From a7fc8eb91ffbcc5415025c67b4875a313feb17f4 Mon Sep 17 00:00:00 2001 From: asyncapi-bot Date: Sat, 7 Oct 2023 22:56:02 +0200 Subject: [PATCH 1/3] chore: update @asyncapi/java-spring-template to 1.3.0 version (#810) --- 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 b0cc65305..a0072db58 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.2.0", + "@asyncapi/java-spring-template": "^1.3.0", "@asyncapi/java-template": "^0.2.1", "@asyncapi/markdown-template": "^1.3.3", "@asyncapi/nodejs-template": "^1.0.0", diff --git a/package-lock.json b/package-lock.json index bdf51e2e4..f691123a7 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.2.0", + "@asyncapi/java-spring-template": "^1.3.0", "@asyncapi/java-template": "^0.2.1", "@asyncapi/markdown-template": "^1.3.3", "@asyncapi/nodejs-template": "^1.0.0", @@ -1387,9 +1387,9 @@ } }, "node_modules/@asyncapi/java-spring-template": { - "version": "1.2.0", - "resolved": "https://registry.npmjs.org/@asyncapi/java-spring-template/-/java-spring-template-1.2.0.tgz", - "integrity": "sha512-aCt18PnX24rgqZOvBoIC2Fi3rISB0vey/Kuk/VLAs4Ox89bcnIkZFZFB7u/h70IO+cI0I/GldyzpwluTGfJeeg==", + "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==", "dev": true, "dependencies": { "@asyncapi/generator-filters": "^2.1.0", @@ -34837,9 +34837,9 @@ } }, "@asyncapi/java-spring-template": { - "version": "1.2.0", - "resolved": "https://registry.npmjs.org/@asyncapi/java-spring-template/-/java-spring-template-1.2.0.tgz", - "integrity": "sha512-aCt18PnX24rgqZOvBoIC2Fi3rISB0vey/Kuk/VLAs4Ox89bcnIkZFZFB7u/h70IO+cI0I/GldyzpwluTGfJeeg==", + "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==", "dev": true, "requires": { "@asyncapi/generator-filters": "^2.1.0", @@ -35228,7 +35228,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.2.0", + "@asyncapi/java-spring-template": "^1.3.0", "@asyncapi/java-template": "^0.2.1", "@asyncapi/markdown-template": "^1.3.3", "@asyncapi/nodejs-template": "^1.0.0", From cc5fce876a1c548fc891f029bba08f58734bae6e Mon Sep 17 00:00:00 2001 From: asyncapi-bot Date: Mon, 9 Oct 2023 11:15:35 +0200 Subject: [PATCH 2/3] chore: update @asyncapi/markdown-template to 1.4.0 version (#811) --- apps/studio/package.json | 2 +- package-lock.json | 20 ++++++++------------ 2 files changed, 9 insertions(+), 13 deletions(-) diff --git a/apps/studio/package.json b/apps/studio/package.json index a0072db58..ff7c15172 100644 --- a/apps/studio/package.json +++ b/apps/studio/package.json @@ -80,7 +80,7 @@ "@asyncapi/java-spring-cloud-stream-template": "^0.13.4", "@asyncapi/java-spring-template": "^1.3.0", "@asyncapi/java-template": "^0.2.1", - "@asyncapi/markdown-template": "^1.3.3", + "@asyncapi/markdown-template": "^1.4.0", "@asyncapi/nodejs-template": "^1.0.0", "@asyncapi/nodejs-ws-template": "^0.9.33", "@asyncapi/python-paho-template": "^0.2.13", diff --git a/package-lock.json b/package-lock.json index f691123a7..c796cd9ff 100644 --- a/package-lock.json +++ b/package-lock.json @@ -527,7 +527,7 @@ "@asyncapi/java-spring-cloud-stream-template": "^0.13.4", "@asyncapi/java-spring-template": "^1.3.0", "@asyncapi/java-template": "^0.2.1", - "@asyncapi/markdown-template": "^1.3.3", + "@asyncapi/markdown-template": "^1.4.0", "@asyncapi/nodejs-template": "^1.0.0", "@asyncapi/nodejs-ws-template": "^0.9.33", "@asyncapi/python-paho-template": "^0.2.13", @@ -1428,14 +1428,12 @@ } }, "node_modules/@asyncapi/markdown-template": { - "version": "1.3.3", - "resolved": "https://registry.npmjs.org/@asyncapi/markdown-template/-/markdown-template-1.3.3.tgz", - "integrity": "sha512-7gRo1yVMf6TCrOJOi8q8HxkZOJGWtQHQOElXTi9gUbl710b/3SYxlPN8hiS8JuX7d9oOD5JHg0MvRXlq4YxiLw==", + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/@asyncapi/markdown-template/-/markdown-template-1.4.0.tgz", + "integrity": "sha512-mvghEtlCi/2DxSnBRMn5nRD+lD2P/HOfodnLMPav1SM0th9eiwizovTQzfuUByjFxVRj9x54ywXObm/fzo3oBQ==", "dev": true, "dependencies": { - "@asyncapi/generator-filters": "^2.1.0", "@asyncapi/generator-react-sdk": "^1.0.0", - "@asyncapi/parser": "^2.1.0", "openapi-sampler": "^1.3.0", "yaml": "^1.10.2" } @@ -34872,14 +34870,12 @@ } }, "@asyncapi/markdown-template": { - "version": "1.3.3", - "resolved": "https://registry.npmjs.org/@asyncapi/markdown-template/-/markdown-template-1.3.3.tgz", - "integrity": "sha512-7gRo1yVMf6TCrOJOi8q8HxkZOJGWtQHQOElXTi9gUbl710b/3SYxlPN8hiS8JuX7d9oOD5JHg0MvRXlq4YxiLw==", + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/@asyncapi/markdown-template/-/markdown-template-1.4.0.tgz", + "integrity": "sha512-mvghEtlCi/2DxSnBRMn5nRD+lD2P/HOfodnLMPav1SM0th9eiwizovTQzfuUByjFxVRj9x54ywXObm/fzo3oBQ==", "dev": true, "requires": { - "@asyncapi/generator-filters": "^2.1.0", "@asyncapi/generator-react-sdk": "^1.0.0", - "@asyncapi/parser": "^2.1.0", "openapi-sampler": "^1.3.0", "yaml": "^1.10.2" }, @@ -35230,7 +35226,7 @@ "@asyncapi/java-spring-cloud-stream-template": "^0.13.4", "@asyncapi/java-spring-template": "^1.3.0", "@asyncapi/java-template": "^0.2.1", - "@asyncapi/markdown-template": "^1.3.3", + "@asyncapi/markdown-template": "^1.4.0", "@asyncapi/nodejs-template": "^1.0.0", "@asyncapi/nodejs-ws-template": "^0.9.33", "@asyncapi/openapi-schema-parser": "^3.0.4", 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 3/3] 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([]); + + return ( +
+ +
+ ); +}; + +export const WithTags = () => { + const [currentChips, setCurrentChips] = useState(['production', 'platform']); + + return ( +
+ +
+ ); + }; + +export const WithSomeDefaultText = () => { + const [currentChips, setCurrentChips] = useState(['production', 'platform']); + + return ( +
+ +
+ ); +}; + +export const WithCustomPlaceholder = () => { + const [currentChips, setCurrentChips] = useState([]); + + return ( +
+ +
+ ); +}; 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 = ({ + name, + id, + className, + chips, + onChange, + isDisabled = false, + placeholder = 'Add Tags', + defaultValue = '' +}) => { + const inputRef = useRef(null); + const firstChipRef = useRef(null); + + const handleKeyDown = (event: KeyboardEvent) => { + 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) => { + 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 ( +
+ {chips.map((chip, index) => ( +
+ {chip} + +
+ ))} + +
+ ); +}; 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'