Add ChipInput component

apps/design-system/src/components/ChipInput.stories.tsx

@@ -0,0 +1,29 @@
+import { useState } from "react";
+import { ChipInput } from "@asyncapi/studio-ui";
+
+const meta = {
+  component: ChipInput,
+  parameters: {
+    layout: 'fullscreen',
+    backgrounds: {
+      default: 'light'
+    }
+  },
+};
+
+export default meta;
+
+export const Default = () => {
+  const [currentChips, setCurrentChips] = useState(['production', 'plateform']);
+
+  return (
+    <div className="p-4 bg-gray-100 flex items-center">
+      <ChipInput 
+        name="chip-input" 
+        id="chip-input-id" 
+        chips={currentChips} 
+        onChange={setCurrentChips} 
+      />
+    </div>
+  );
+};

packages/ui/components/ChipInput.tsx

@@ -0,0 +1,54 @@
+import { FunctionComponent, KeyboardEvent } from 'react';
+
+interface ChipInputProps {
+  name: string;
+  id: string;
+  className?: string;
+  chips: string[];
+  onChange: (chips: string[]) => void;
+  isDisabled?: boolean;
+  placeholder?: string;
+}
+
+export const ChipInput: FunctionComponent<ChipInputProps> = ({
+  name,
+  id,
+  className,
+  chips,
+  onChange,
+  isDisabled = false,
+  placeholder = 'Add a chip'
+}) => {
+  const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
+    if (event.key === 'Enter' && event.currentTarget.value.trim()) {
+      onChange([...chips, event.currentTarget.value.trim()]);
+      event.currentTarget.value = '';
+    }
+  };
+
+  const handleDelete = (chipToDelete: string) => () => {
+    const updatedChips = chips.filter(chip => chip !== chipToDelete);
+    onChange(updatedChips);
+  };
+
+  return (
+    <div className={`${className} flex flex-wrap items-center p-1 bg-gray-900 rounded border-2 border-gray-700`}>
+      {chips.map(chip => (
+        <div key={chip} className="m-1 bg-gray-800 text-white rounded px-2 py-1 flex items-center">
+          <span>{chip}</span>
+          <button onClick={handleDelete(chip)} className="ml-1 text-gray-400 focus:outline-none">×</button>
+        </div>
+      ))}
+      <input
+        name={name}
+        id={id}
+        type="text"
+        onKeyDown={handleKeyDown}
+        className="p-1 bg-gray-900 text-white rounded outline-none"
+        placeholder={placeholder}
+        disabled={isDisabled}
+        defaultValue={'registr'}
+      />
+    </div>
+  );
+};

packages/ui/components/index.tsx

@@ -2,6 +2,7 @@
 import './styles.css'
 
 // components
+export * from './ChipInput'
 export * from './EditorSwitch'
 export * from './DropdownMenu'
 export * from './Logo'