From dbeb742568b9b404b3c1ff44efd0f8b7669aca4f Mon Sep 17 00:00:00 2001
From: Prince Rajpoot <44585452+princerajpoot20@users.noreply.github.com>
Date: Tue, 10 Oct 2023 15:31:14 +0530
Subject: [PATCH 1/2] Add ChipInput component (#808)

---
 .../src/components/ChipInput.stories.tsx      | 76 ++++++++++++++++++
 packages/ui/components/ChipInput.tsx          | 80 +++++++++++++++++++
 packages/ui/components/index.tsx              |  1 +
 3 files changed, 157 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..fa129f7f3
--- /dev/null
+++ b/apps/design-system/src/components/ChipInput.stories.tsx
@@ -0,0 +1,76 @@
+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<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-custom-placeholder" 
+        id="chip-input-id-placeholder" 
+        chips={currentChips} 
+        onChange={setCurrentChips}
+        placeholder="Enter a custom chip"
+      />
+    </div>
+  );
+};
diff --git a/packages/ui/components/ChipInput.tsx b/packages/ui/components/ChipInput.tsx
new file mode 100644
index 000000000..f3d45c694
--- /dev/null
+++ b/packages/ui/components/ChipInput.tsx
@@ -0,0 +1,80 @@
+import { FunctionComponent, KeyboardEvent, useRef } from 'react';
+
+interface ChipInputProps {
+  name: string;
+  id: string;
+  className?: string;
+  chips: string[];
+  onChange: (chips: string[]) => void;
+  isDisabled?: boolean;
+  placeholder?: string;
+  defaultValue?: string;
+}
+
+export const ChipInput: FunctionComponent<ChipInputProps> = ({
+  name,
+  id,
+  className,
+  chips,
+  onChange,
+  isDisabled = false,
+  placeholder = 'Add Tags',
+  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) {
+      onChange(chips.slice(0, -1));
+    } else if (event.key === 'Tab' && !event.shiftKey) {
+      event.preventDefault();
+      firstChipRef.current?.focus();
+    }
+  };
+
+  const handleChipKeyDown = (index: number) => (event: KeyboardEvent<HTMLDivElement>) => {
+    if (event.key === 'Backspace') {
+      const updatedChips = [...chips];
+      updatedChips.splice(index, 1);
+      onChange(updatedChips);
+    }
+  };
+
+  const handleDelete = (chipToDelete: string) => () => {
+    const updatedChips = chips.filter(chip => chip !== chipToDelete);
+    onChange(updatedChips);
+  };
+
+  return (
+    <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-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}
+        >
+          <span>{chip}</span>
+          <button onClick={handleDelete(chip)} tabIndex={-1} className="ml-1 text-gray-400 focus:outline-none">×</button>
+        </div>
+      ))}
+      <input
+        ref={inputRef}
+        name={name}
+        id={id}
+        type="text"
+        onKeyDown={handleKeyDown}
+        className="p-1 bg-gray-900 text-white rounded outline-none"
+        placeholder={placeholder}
+        disabled={isDisabled}
+        defaultValue={defaultValue}
+      />
+    </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 2b1da0697299cb0ed6ff9849d3a7ddcc9c5b318b Mon Sep 17 00:00:00 2001
From: asyncapi-bot <bot+chan@asyncapi.io>
Date: Wed, 11 Oct 2023 11:01:26 +0200
Subject: [PATCH 2/2] chore: update @asyncapi/java-spring-template to 1.4.0
 version (#813)

---
 apps/studio/package.json |  2 +-
 package-lock.json        | 16 ++++++++--------
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/apps/studio/package.json b/apps/studio/package.json
index ff7c15172..dc50d6a13 100644
--- a/apps/studio/package.json
+++ b/apps/studio/package.json
@@ -78,7 +78,7 @@
     "@asyncapi/go-watermill-template": "^0.2.40",
     "@asyncapi/html-template": "^0.28.4",
     "@asyncapi/java-spring-cloud-stream-template": "^0.13.4",
-    "@asyncapi/java-spring-template": "^1.3.0",
+    "@asyncapi/java-spring-template": "^1.4.0",
     "@asyncapi/java-template": "^0.2.1",
     "@asyncapi/markdown-template": "^1.4.0",
     "@asyncapi/nodejs-template": "^1.0.0",
diff --git a/package-lock.json b/package-lock.json
index c796cd9ff..bb408ea06 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -525,7 +525,7 @@
         "@asyncapi/go-watermill-template": "^0.2.40",
         "@asyncapi/html-template": "^0.28.4",
         "@asyncapi/java-spring-cloud-stream-template": "^0.13.4",
-        "@asyncapi/java-spring-template": "^1.3.0",
+        "@asyncapi/java-spring-template": "^1.4.0",
         "@asyncapi/java-template": "^0.2.1",
         "@asyncapi/markdown-template": "^1.4.0",
         "@asyncapi/nodejs-template": "^1.0.0",
@@ -1387,9 +1387,9 @@
       }
     },
     "node_modules/@asyncapi/java-spring-template": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/@asyncapi/java-spring-template/-/java-spring-template-1.3.0.tgz",
-      "integrity": "sha512-w9Q4t6Y1k3twJES9tGSjByu7/64UuzpVQQGEsmtDtRa7SaWzbVML82HCmnAV3C8tKX+AARK1jBxNf680AtZBzg==",
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/@asyncapi/java-spring-template/-/java-spring-template-1.4.0.tgz",
+      "integrity": "sha512-8fRosWeK7F6fk9kYIaHVfv53GdkqunpWkaF1q4wOInlXt5NV3JJt9iVqRcSQis79X/cy9E3jP3VnbDmwl5btCQ==",
       "dev": true,
       "dependencies": {
         "@asyncapi/generator-filters": "^2.1.0",
@@ -34835,9 +34835,9 @@
       }
     },
     "@asyncapi/java-spring-template": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/@asyncapi/java-spring-template/-/java-spring-template-1.3.0.tgz",
-      "integrity": "sha512-w9Q4t6Y1k3twJES9tGSjByu7/64UuzpVQQGEsmtDtRa7SaWzbVML82HCmnAV3C8tKX+AARK1jBxNf680AtZBzg==",
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/@asyncapi/java-spring-template/-/java-spring-template-1.4.0.tgz",
+      "integrity": "sha512-8fRosWeK7F6fk9kYIaHVfv53GdkqunpWkaF1q4wOInlXt5NV3JJt9iVqRcSQis79X/cy9E3jP3VnbDmwl5btCQ==",
       "dev": true,
       "requires": {
         "@asyncapi/generator-filters": "^2.1.0",
@@ -35224,7 +35224,7 @@
         "@asyncapi/go-watermill-template": "^0.2.40",
         "@asyncapi/html-template": "^0.28.4",
         "@asyncapi/java-spring-cloud-stream-template": "^0.13.4",
-        "@asyncapi/java-spring-template": "^1.3.0",
+        "@asyncapi/java-spring-template": "^1.4.0",
         "@asyncapi/java-template": "^0.2.1",
         "@asyncapi/markdown-template": "^1.4.0",
         "@asyncapi/nodejs-template": "^1.0.0",