From a6b83dba5baeeedc0fb05bd3c2599646e7760f60 Mon Sep 17 00:00:00 2001
From: Prince Rajpoot <prince.rajpoot.20@gmail.com>
Date: Fri, 6 Oct 2023 02:14:21 +0530
Subject: [PATCH 1/8] added ChipInput component

---
 .../src/components/ChipInput.stories.tsx      |  7 +++
 packages/ui/components/ChipInput.tsx          | 49 +++++++++++++++++++
 packages/ui/components/index.tsx              |  1 +
 3 files changed, 57 insertions(+)
 create mode 100644 apps/design-system/src/components/ChipInput.stories.tsx
 create mode 100644 packages/ui/components/ChipInput.tsx

diff --git a/apps/design-system/src/components/ChipInput.stories.tsx b/apps/design-system/src/components/ChipInput.stories.tsx
new file mode 100644
index 000000000..1a3d2bd24
--- /dev/null
+++ b/apps/design-system/src/components/ChipInput.stories.tsx
@@ -0,0 +1,7 @@
+import { ChipInput } from '@asyncapi/studio-ui';
+
+export default {
+  component: ChipInput,
+};
+
+export const Default = () => <ChipInput initialChips={['production', 'platform']} />;
diff --git a/packages/ui/components/ChipInput.tsx b/packages/ui/components/ChipInput.tsx
new file mode 100644
index 000000000..8c9876d50
--- /dev/null
+++ b/packages/ui/components/ChipInput.tsx
@@ -0,0 +1,49 @@
+import { useState, KeyboardEvent, FunctionComponent } from 'react';
+
+interface ChipInputProps {
+  initialChips?: string[];
+  initialInputValue?: string;
+}
+
+export const ChipInput: FunctionComponent<ChipInputProps> = ({ 
+  initialChips = [], 
+  initialInputValue = 'registr' 
+}) => {
+  const [chips, setChips] = useState<string[]>(initialChips);
+  const [inputValue, setInputValue] = useState<string>(initialInputValue);
+
+  const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
+    if (event.key === 'Enter' && inputValue.trim()) {
+      setChips((prevChips) => [...prevChips, inputValue.trim()]);
+      setInputValue('');
+    }
+  };
+
+  const handleDelete = (chipToDelete: string) => () => {
+    setChips((chips) => chips.filter((chip) => chip !== chipToDelete));
+  };
+
+  return (
+    <div className="flex flex-wrap items-center p-2 bg-gray-900 rounded">
+      <div className="w-full text-gray-100 mb-2">Tags</div>
+      {chips.map((chip) => (
+        <div key={chip} className="m-1 bg-gray-100 border-0.5 border-gray-400 text-gray-900 rounded px-3 py-1 flex items-center relative">
+          <span className="mr-3">{chip}</span>
+          <button 
+            onClick={handleDelete(chip)} 
+            className="text-gray-900 absolute top-1/2 transform -translate-y-1/2 right-2 focus:outline-none"
+            style={{ fontSize: '18px' }}
+          >×</button>
+        </div>
+      ))}
+      <input 
+        type="text" 
+        value={inputValue}
+        onChange={(e) => setInputValue(e.target.value)}
+        onKeyDown={handleKeyDown}
+        className="p-1 bg-gray-900 text-white rounded outline-none"
+        placeholder="Add a chip"
+      />
+    </div>
+  );
+};
diff --git a/packages/ui/components/index.tsx b/packages/ui/components/index.tsx
index 50e048646..a1058b7ad 100644
--- a/packages/ui/components/index.tsx
+++ b/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'

From fdcec514a0c4e69e2ebc322e00c6dd8fbc012d26 Mon Sep 17 00:00:00 2001
From: Prince Rajpoot <prince.rajpoot.20@gmail.com>
Date: Sat, 7 Oct 2023 02:44:31 +0530
Subject: [PATCH 2/8] made changes

---
 .../src/components/ChipInput.stories.tsx      | 28 ++++++++-
 packages/ui/components/ChipInput.tsx          | 61 ++++++++++---------
 2 files changed, 58 insertions(+), 31 deletions(-)

diff --git a/apps/design-system/src/components/ChipInput.stories.tsx b/apps/design-system/src/components/ChipInput.stories.tsx
index 1a3d2bd24..422b01a92 100644
--- a/apps/design-system/src/components/ChipInput.stories.tsx
+++ b/apps/design-system/src/components/ChipInput.stories.tsx
@@ -1,7 +1,29 @@
-import { ChipInput } from '@asyncapi/studio-ui';
+import { useState } from "react";
+import { ChipInput } from "@asyncapi/studio-ui";
 
-export default {
+const meta = {
   component: ChipInput,
+  parameters: {
+    layout: 'fullscreen',
+    backgrounds: {
+      default: 'light'
+    }
+  },
 };
 
-export const Default = () => <ChipInput initialChips={['production', 'platform']} />;
+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>
+  );
+};
diff --git a/packages/ui/components/ChipInput.tsx b/packages/ui/components/ChipInput.tsx
index 8c9876d50..b520d13b0 100644
--- a/packages/ui/components/ChipInput.tsx
+++ b/packages/ui/components/ChipInput.tsx
@@ -1,48 +1,53 @@
-import { useState, KeyboardEvent, FunctionComponent } from 'react';
+import { FunctionComponent, KeyboardEvent } from 'react';
 
 interface ChipInputProps {
-  initialChips?: string[];
-  initialInputValue?: string;
+  name: string;
+  id: string;
+  className?: string;
+  chips: string[];
+  onChange: (chips: string[]) => void;
+  isDisabled?: boolean;
+  placeholder?: string;
 }
 
-export const ChipInput: FunctionComponent<ChipInputProps> = ({ 
-  initialChips = [], 
-  initialInputValue = 'registr' 
+export const ChipInput: FunctionComponent<ChipInputProps> = ({
+  name,
+  id,
+  className,
+  chips,
+  onChange,
+  isDisabled = false,
+  placeholder = 'Add a chip'
 }) => {
-  const [chips, setChips] = useState<string[]>(initialChips);
-  const [inputValue, setInputValue] = useState<string>(initialInputValue);
-
   const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
-    if (event.key === 'Enter' && inputValue.trim()) {
-      setChips((prevChips) => [...prevChips, inputValue.trim()]);
-      setInputValue('');
+    if (event.key === 'Enter' && event.currentTarget.value.trim()) {
+      onChange([...chips, event.currentTarget.value.trim()]);
+      event.currentTarget.value = '';
     }
   };
 
   const handleDelete = (chipToDelete: string) => () => {
-    setChips((chips) => chips.filter((chip) => chip !== chipToDelete));
+    const updatedChips = chips.filter(chip => chip !== chipToDelete);
+    onChange(updatedChips);
   };
 
   return (
-    <div className="flex flex-wrap items-center p-2 bg-gray-900 rounded">
-      <div className="w-full text-gray-100 mb-2">Tags</div>
-      {chips.map((chip) => (
-        <div key={chip} className="m-1 bg-gray-100 border-0.5 border-gray-400 text-gray-900 rounded px-3 py-1 flex items-center relative">
-          <span className="mr-3">{chip}</span>
-          <button 
-            onClick={handleDelete(chip)} 
-            className="text-gray-900 absolute top-1/2 transform -translate-y-1/2 right-2 focus:outline-none"
-            style={{ fontSize: '18px' }}
-          >×</button>
+    <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 
-        type="text" 
-        value={inputValue}
-        onChange={(e) => setInputValue(e.target.value)}
+      <input
+        name={name}
+        id={id}
+        type="text"
         onKeyDown={handleKeyDown}
         className="p-1 bg-gray-900 text-white rounded outline-none"
-        placeholder="Add a chip"
+        placeholder={placeholder}
+        disabled={isDisabled}
+        defaultValue={'registr'}
       />
     </div>
   );

From 40623179d1427c25b73ed53e955cdf4c345f7858 Mon Sep 17 00:00:00 2001
From: Prince Rajpoot <prince.rajpoot.20@gmail.com>
Date: Tue, 10 Oct 2023 02:43:55 +0530
Subject: [PATCH 3/8] added multiple cases in design system

---
 .../src/components/ChipInput.stories.tsx      | 55 +++++++++++++++++--
 packages/ui/components/ChipInput.tsx          |  6 +-
 2 files changed, 55 insertions(+), 6 deletions(-)

diff --git a/apps/design-system/src/components/ChipInput.stories.tsx b/apps/design-system/src/components/ChipInput.stories.tsx
index 422b01a92..fa129f7f3 100644
--- a/apps/design-system/src/components/ChipInput.stories.tsx
+++ b/apps/design-system/src/components/ChipInput.stories.tsx
@@ -14,15 +14,62 @@ const meta = {
 export default meta;
 
 export const Default = () => {
-  const [currentChips, setCurrentChips] = useState(['production', 'plateform']);
+  const [currentChips, setCurrentChips] = useState<string[]>([]);
+  
+  return (
+    <div className="p-4 bg-gray-100 flex items-center">
+      <ChipInput 
+        name="chip-input-default" 
+        id="chip-input-id-default" 
+        chips={currentChips} 
+        onChange={setCurrentChips}
+      />
+    </div>
+  );
+};
+
+export const WithTags = () => {
+    const [currentChips, setCurrentChips] = useState<string[]>(['production', 'platform']);
+    
+    return (
+      <div className="p-4 bg-gray-100 flex items-center">
+        <ChipInput 
+          name="chip-input-chip-text" 
+          id="chip-input-id-chip-text" 
+          chips={currentChips} 
+          onChange={setCurrentChips}
+        />
+      </div>
+    );
+  };
+  
+export const WithSomeDefaultText = () => {
+  const [currentChips, setCurrentChips] = useState<string[]>(['production', 'platform']);
+
+  return (
+    <div className="p-4 bg-gray-100 flex items-center">
+      <ChipInput 
+        name="chip-input-default-text-in-input" 
+        id="chip-input-id-default-text-in-input" 
+        chips={currentChips} 
+        onChange={setCurrentChips}
+        defaultValue="registr"
+      />
+    </div>
+  );
+};
 
+export const WithCustomPlaceholder = () => {
+  const [currentChips, setCurrentChips] = useState<string[]>([]);
+  
   return (
     <div className="p-4 bg-gray-100 flex items-center">
       <ChipInput 
-        name="chip-input" 
-        id="chip-input-id" 
+        name="chip-input-custom-placeholder" 
+        id="chip-input-id-placeholder" 
         chips={currentChips} 
-        onChange={setCurrentChips} 
+        onChange={setCurrentChips}
+        placeholder="Enter a custom chip"
       />
     </div>
   );
diff --git a/packages/ui/components/ChipInput.tsx b/packages/ui/components/ChipInput.tsx
index b520d13b0..f912854e7 100644
--- a/packages/ui/components/ChipInput.tsx
+++ b/packages/ui/components/ChipInput.tsx
@@ -8,6 +8,7 @@ interface ChipInputProps {
   onChange: (chips: string[]) => void;
   isDisabled?: boolean;
   placeholder?: string;
+  defaultValue?: string;
 }
 
 export const ChipInput: FunctionComponent<ChipInputProps> = ({
@@ -17,7 +18,8 @@ export const ChipInput: FunctionComponent<ChipInputProps> = ({
   chips,
   onChange,
   isDisabled = false,
-  placeholder = 'Add a chip'
+  placeholder = 'Add Tags',
+  defaultValue = ''
 }) => {
   const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
     if (event.key === 'Enter' && event.currentTarget.value.trim()) {
@@ -47,7 +49,7 @@ export const ChipInput: FunctionComponent<ChipInputProps> = ({
         className="p-1 bg-gray-900 text-white rounded outline-none"
         placeholder={placeholder}
         disabled={isDisabled}
-        defaultValue={'registr'}
+        defaultValue={defaultValue}
       />
     </div>
   );

From 523edc6870f5a86e49db7e5d4540d330cb72755a Mon Sep 17 00:00:00 2001
From: Prince Rajpoot <prince.rajpoot.20@gmail.com>
Date: Tue, 10 Oct 2023 02:55:49 +0530
Subject: [PATCH 4/8] remove chip with delete and navigate through tab

---
 packages/ui/components/ChipInput.tsx | 34 +++++++++++++++++++++++++---
 1 file changed, 31 insertions(+), 3 deletions(-)

diff --git a/packages/ui/components/ChipInput.tsx b/packages/ui/components/ChipInput.tsx
index f912854e7..420e21afa 100644
--- a/packages/ui/components/ChipInput.tsx
+++ b/packages/ui/components/ChipInput.tsx
@@ -1,4 +1,4 @@
-import { FunctionComponent, KeyboardEvent } from 'react';
+import { FunctionComponent, KeyboardEvent, useRef } from 'react';
 
 interface ChipInputProps {
   name: string;
@@ -21,10 +21,32 @@ export const ChipInput: FunctionComponent<ChipInputProps> = ({
   placeholder = 'Add Tags',
   defaultValue = ''
 }) => {
+  const inputRef = useRef<HTMLInputElement>(null);
+  
   const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
     if (event.key === 'Enter' && event.currentTarget.value.trim()) {
       onChange([...chips, event.currentTarget.value.trim()]);
       event.currentTarget.value = '';
+    } else if (event.key === 'Backspace' && !event.currentTarget.value) {
+      // Handle delete if input is empty
+      onChange(chips.slice(0, -1));
+    } else if (event.key === 'Tab') {
+      // Focus on the next chip
+      event.preventDefault();
+      if (inputRef.current) {
+        const nextChip = inputRef.current.previousSibling as HTMLElement;
+        nextChip?.focus();
+      }
+    }
+  };
+
+  const handleChipKeyDown = (index: number) => (event: KeyboardEvent<HTMLDivElement>) => {
+    if (event.key === 'Backspace') {
+      const updatedChips = [...chips];
+      updatedChips.splice(index, 1);
+      onChange(updatedChips);
+    } else if (event.key === 'Tab' && index === chips.length - 1) {
+      inputRef.current?.focus();
     }
   };
 
@@ -35,13 +57,19 @@ export const ChipInput: FunctionComponent<ChipInputProps> = ({
 
   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">
+      {chips.map((chip, index) => (
+        <div 
+          key={chip} 
+          className="m-1 bg-gray-800 text-white rounded px-2 py-1 flex items-center" 
+          tabIndex={0} 
+          onKeyDown={handleChipKeyDown(index)}
+        >
           <span>{chip}</span>
           <button onClick={handleDelete(chip)} className="ml-1 text-gray-400 focus:outline-none">×</button>
         </div>
       ))}
       <input
+        ref={inputRef}
         name={name}
         id={id}
         type="text"

From ac1e8b7a6f42cb975b2da895fe7a0ce9b9bf4f31 Mon Sep 17 00:00:00 2001
From: Prince Rajpoot <prince.rajpoot.20@gmail.com>
Date: Tue, 10 Oct 2023 03:08:52 +0530
Subject: [PATCH 5/8] fix: now pressing tab will navigate to the first chip

---
 packages/ui/components/ChipInput.tsx | 15 +++++----------
 1 file changed, 5 insertions(+), 10 deletions(-)

diff --git a/packages/ui/components/ChipInput.tsx b/packages/ui/components/ChipInput.tsx
index 420e21afa..e208e3381 100644
--- a/packages/ui/components/ChipInput.tsx
+++ b/packages/ui/components/ChipInput.tsx
@@ -22,21 +22,17 @@ export const ChipInput: FunctionComponent<ChipInputProps> = ({
   defaultValue = ''
 }) => {
   const inputRef = useRef<HTMLInputElement>(null);
+  const firstChipRef = useRef<HTMLDivElement>(null);
   
   const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
     if (event.key === 'Enter' && event.currentTarget.value.trim()) {
       onChange([...chips, event.currentTarget.value.trim()]);
       event.currentTarget.value = '';
     } else if (event.key === 'Backspace' && !event.currentTarget.value) {
-      // Handle delete if input is empty
       onChange(chips.slice(0, -1));
-    } else if (event.key === 'Tab') {
-      // Focus on the next chip
+    } else if (event.key === 'Tab' && !event.shiftKey) {
       event.preventDefault();
-      if (inputRef.current) {
-        const nextChip = inputRef.current.previousSibling as HTMLElement;
-        nextChip?.focus();
-      }
+      firstChipRef.current?.focus();
     }
   };
 
@@ -45,8 +41,6 @@ export const ChipInput: FunctionComponent<ChipInputProps> = ({
       const updatedChips = [...chips];
       updatedChips.splice(index, 1);
       onChange(updatedChips);
-    } else if (event.key === 'Tab' && index === chips.length - 1) {
-      inputRef.current?.focus();
     }
   };
 
@@ -63,9 +57,10 @@ export const ChipInput: FunctionComponent<ChipInputProps> = ({
           className="m-1 bg-gray-800 text-white rounded px-2 py-1 flex items-center" 
           tabIndex={0} 
           onKeyDown={handleChipKeyDown(index)}
+          ref={index === 0 ? firstChipRef : undefined}
         >
           <span>{chip}</span>
-          <button onClick={handleDelete(chip)} className="ml-1 text-gray-400 focus:outline-none">×</button>
+          <button onClick={handleDelete(chip)} tabIndex={-1} className="ml-1 text-gray-400 focus:outline-none">×</button>
         </div>
       ))}
       <input

From b2f94a42fc876defc4616ee1cd0e786aa420b940 Mon Sep 17 00:00:00 2001
From: Prince Rajpoot <prince.rajpoot.20@gmail.com>
Date: Tue, 10 Oct 2023 12:05:31 +0530
Subject: [PATCH 6/8] fix height inconsistency

---
 packages/ui/components/ChipInput.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/ui/components/ChipInput.tsx b/packages/ui/components/ChipInput.tsx
index e208e3381..d54803e02 100644
--- a/packages/ui/components/ChipInput.tsx
+++ b/packages/ui/components/ChipInput.tsx
@@ -23,7 +23,7 @@ export const ChipInput: FunctionComponent<ChipInputProps> = ({
 }) => {
   const inputRef = useRef<HTMLInputElement>(null);
   const firstChipRef = useRef<HTMLDivElement>(null);
-  
+
   const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
     if (event.key === 'Enter' && event.currentTarget.value.trim()) {
       onChange([...chips, event.currentTarget.value.trim()]);
@@ -50,7 +50,7 @@ export const ChipInput: FunctionComponent<ChipInputProps> = ({
   };
 
   return (
-    <div className={`${className} flex flex-wrap items-center p-1 bg-gray-900 rounded border-2 border-gray-700`}>
+    <div className={`${className} flex flex-wrap items-center p-1 bg-gray-900 rounded border-2 border-gray-700 h-12`}>
       {chips.map((chip, index) => (
         <div 
           key={chip} 

From fef44ca483b3d52c8c712882f299d5a238d793f4 Mon Sep 17 00:00:00 2001
From: Prince Rajpoot <prince.rajpoot.20@gmail.com>
Date: Tue, 10 Oct 2023 14:21:03 +0530
Subject: [PATCH 7/8] ui changes

---
 packages/ui/components/ChipInput.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/ui/components/ChipInput.tsx b/packages/ui/components/ChipInput.tsx
index d54803e02..047239359 100644
--- a/packages/ui/components/ChipInput.tsx
+++ b/packages/ui/components/ChipInput.tsx
@@ -50,11 +50,12 @@ export const ChipInput: FunctionComponent<ChipInputProps> = ({
   };
 
   return (
-    <div className={`${className} flex flex-wrap items-center p-1 bg-gray-900 rounded border-2 border-gray-700 h-12`}>
+    <div className={`${className} flex flex-wrapitems-center p-1 bg-gray-900 rounded border border-gray-800`} style={{ width: '862px', height: '46px' }}>
       {chips.map((chip, index) => (
         <div 
           key={chip} 
-          className="m-1 bg-gray-800 text-white rounded px-2 py-1 flex items-center" 
+          className="m-1 bg-gray-100 text-gray-900 rounded px-2 py-1 flex items-center border border-gray-400 focus:border-blue-500 focus:outline"
+          style={{ height: '28px', borderWidth: '0.5px', borderStyle: 'solid' }}
           tabIndex={0} 
           onKeyDown={handleChipKeyDown(index)}
           ref={index === 0 ? firstChipRef : undefined}

From d080f7e3ac1b8acf1e55b1eab2761f38f55f757e Mon Sep 17 00:00:00 2001
From: Prince Rajpoot <prince.rajpoot.20@gmail.com>
Date: Tue, 10 Oct 2023 15:02:26 +0530
Subject: [PATCH 8/8] increase focused border

---
 packages/ui/components/ChipInput.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/ui/components/ChipInput.tsx b/packages/ui/components/ChipInput.tsx
index 047239359..f3d45c694 100644
--- a/packages/ui/components/ChipInput.tsx
+++ b/packages/ui/components/ChipInput.tsx
@@ -54,8 +54,8 @@ export const ChipInput: FunctionComponent<ChipInputProps> = ({
       {chips.map((chip, index) => (
         <div 
           key={chip} 
-          className="m-1 bg-gray-100 text-gray-900 rounded px-2 py-1 flex items-center border border-gray-400 focus:border-blue-500 focus:outline"
-          style={{ height: '28px', borderWidth: '0.5px', borderStyle: 'solid' }}
+          className="m-1 bg-gray-100 text-gray-900 rounded px-2 py-1 flex items-center border border-gray-400 focus:border-blue-500 focus:border-2 focus:outline-none"
+          style={{ height: '28px', borderStyle: 'solid' }}
           tabIndex={0} 
           onKeyDown={handleChipKeyDown(index)}
           ref={index === 0 ? firstChipRef : undefined}