- {queue.name}
+
+ {queue.name}
+
- Available
diff --git a/src/components/TagInput.stories.ts b/src/components/TagInput.stories.ts
new file mode 100644
index 00000000..a51de36d
--- /dev/null
+++ b/src/components/TagInput.stories.ts
@@ -0,0 +1,105 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { type BadgeColor } from "./Badge";
+import TagInput from "./TagInput";
+
+const meta: Meta = {
+ argTypes: {
+ badgeColor: {
+ control: "select",
+ },
+ onChange: { action: "changed" },
+ showHelpText: {
+ control: "boolean",
+ description: "Show the helper text below the input",
+ },
+ },
+ component: TagInput,
+ tags: ["autodocs"],
+ title: "Components/TagInput",
+};
+
+export default meta;
+
+type Story = StoryObj;
+
+export const Empty: Story = {
+ args: {
+ disabled: false,
+ placeholder: "Type and press Enter to add",
+ showHelpText: false,
+ tags: [],
+ },
+};
+
+export const EmptyWithHelp: Story = {
+ args: {
+ disabled: false,
+ placeholder: "Type and press Enter to add",
+ showHelpText: true,
+ tags: [],
+ },
+};
+
+export const WithTags: Story = {
+ args: {
+ badgeColor: "indigo",
+ disabled: false,
+ showHelpText: false,
+ tags: ["customer_id", "region", "user_id"],
+ },
+};
+
+export const WithTagsAndHelp: Story = {
+ args: {
+ badgeColor: "indigo",
+ disabled: false,
+ showHelpText: true,
+ tags: ["customer_id", "region", "user_id"],
+ },
+};
+
+export const WithManyTags: Story = {
+ args: {
+ disabled: false,
+ tags: [
+ "customer_id",
+ "region",
+ "user_id",
+ "order_id",
+ "product_id",
+ "session_id",
+ "long_key_name_with_many_characters",
+ ],
+ },
+};
+
+export const BlueBadges: Story = {
+ args: {
+ badgeColor: "blue" as BadgeColor,
+ disabled: false,
+ tags: ["customer_id", "region", "user_id"],
+ },
+};
+
+export const GreenBadges: Story = {
+ args: {
+ badgeColor: "green" as BadgeColor,
+ disabled: false,
+ tags: ["customer_id", "region", "user_id"],
+ },
+};
+
+export const Disabled: Story = {
+ args: {
+ disabled: true,
+ tags: ["customer_id", "region"],
+ },
+};
+
+export const DisabledEmpty: Story = {
+ args: {
+ disabled: true,
+ tags: [],
+ },
+};
diff --git a/src/components/TagInput.tsx b/src/components/TagInput.tsx
new file mode 100644
index 00000000..a90189ed
--- /dev/null
+++ b/src/components/TagInput.tsx
@@ -0,0 +1,117 @@
+import { XMarkIcon } from "@heroicons/react/20/solid";
+import { KeyboardEvent, useEffect, useState } from "react";
+
+import { Badge, type BadgeColor } from "./Badge";
+
+export type TagInputProps = {
+ badgeColor?: BadgeColor;
+ disabled?: boolean;
+ id?: string;
+ name?: string;
+ onChange: (tags: string[]) => void;
+ placeholder?: string;
+ showHelpText?: boolean;
+ tags: string[];
+};
+
+/**
+ * A component for inputting multiple tags or keys with a chip-like UI
+ */
+const TagInput = ({
+ badgeColor = "indigo",
+ disabled = false,
+ id,
+ name,
+ onChange,
+ placeholder = "Type and press Enter to add",
+ showHelpText = false,
+ tags = [],
+}: TagInputProps) => {
+ const [inputValue, setInputValue] = useState("");
+ const [internalTags, setInternalTags] = useState(tags);
+
+ // Update internal tags when external tags change
+ useEffect(() => {
+ setInternalTags(tags);
+ }, [tags]);
+
+ const addTag = (tag: string) => {
+ const trimmedTag = tag.trim();
+ if (trimmedTag && !internalTags.includes(trimmedTag)) {
+ const newTags = [...internalTags, trimmedTag];
+ setInternalTags(newTags);
+ onChange(newTags);
+ }
+ setInputValue("");
+ };
+
+ const removeTag = (tagToRemove: string) => {
+ const newTags = internalTags.filter((tag) => tag !== tagToRemove);
+ setInternalTags(newTags);
+ onChange(newTags);
+ };
+
+ const handleKeyDown = (e: KeyboardEvent) => {
+ if (e.key === "Enter" && inputValue) {
+ e.preventDefault();
+ addTag(inputValue);
+ } else if (
+ e.key === "Backspace" &&
+ !inputValue &&
+ internalTags.length > 0
+ ) {
+ // Remove the last tag when backspace is pressed and input is empty
+ const newTags = [...internalTags];
+ newTags.pop();
+ setInternalTags(newTags);
+ onChange(newTags);
+ }
+ };
+
+ return (
+
+
+ {internalTags.map((tag) => (
+
+
+ {tag}
+ {!disabled && (
+
+ )}
+
+
+ ))}
+ setInputValue(e.target.value)}
+ onKeyDown={handleKeyDown}
+ placeholder={internalTags.length === 0 ? placeholder : ""}
+ type="text"
+ value={inputValue}
+ />
+
+ {showHelpText && (
+
+ Enter multiple keys by typing each one and pressing Enter
+
+ )}
+ |