From db763e98668d2dcb2f7312fe0e3ebcafc862f671 Mon Sep 17 00:00:00 2001 From: Tseho Date: Thu, 14 Dec 2023 09:35:29 +0100 Subject: [PATCH] updates DSM --- .../src/__snapshots__/App.test.js.snap | 2 +- .../jest-puppeteer.config.js | 1 + ...ts-avatar-avatar-list-correctly-1-snap.png | Bin 0 -> 9809 bytes ...ts-avatar-avatar-size-correctly-1-snap.png | Bin 0 -> 6694 bytes ...tar-background-colors-correctly-1-snap.png | Bin 0 -> 11581 bytes ...nents-avatar-standard-correctly-1-snap.png | Bin 0 -> 1407 bytes ...nts-avatar-with-image-correctly-1-snap.png | Bin 0 -> 2810 bytes .../src/components/Avatar/Avatar.stories.mdx | 147 ++++++++++++++++++ .../src/components/Avatar/Avatar.tsx | 102 ++++++++++++ .../src/components/Avatar/Avatar.unit.tsx | 79 ++++++++++ .../src/components/Avatar/Avatars.tsx | 50 ++++++ .../src/components/Avatar/Avatars.unit.tsx | 41 +++++ .../Input/BooleanInput/BooleanInput.tsx | 4 +- .../MultiSelectInput/MultiSelectInput.tsx | 42 +++-- .../MultiSelectInput.unit.tsx | 45 ++++++ .../Input/SelectInput/SelectInput.tsx | 46 +++--- .../Input/SelectInput/SelectInput.unit.tsx | 52 +++++++ .../TableInputRow/TableInputRow.tsx | 9 +- .../components/Input/TagInput/TagInput.tsx | 6 +- .../src/components/index.ts | 2 + 20 files changed, 581 insertions(+), 47 deletions(-) create mode 100644 front-packages/akeneo-design-system/src/__image_snapshots__/all-visual-tsx-visual-tests-renders-components-avatar-avatar-list-correctly-1-snap.png create mode 100644 front-packages/akeneo-design-system/src/__image_snapshots__/all-visual-tsx-visual-tests-renders-components-avatar-avatar-size-correctly-1-snap.png create mode 100644 front-packages/akeneo-design-system/src/__image_snapshots__/all-visual-tsx-visual-tests-renders-components-avatar-background-colors-correctly-1-snap.png create mode 100644 front-packages/akeneo-design-system/src/__image_snapshots__/all-visual-tsx-visual-tests-renders-components-avatar-standard-correctly-1-snap.png create mode 100644 front-packages/akeneo-design-system/src/__image_snapshots__/all-visual-tsx-visual-tests-renders-components-avatar-with-image-correctly-1-snap.png create mode 100644 front-packages/akeneo-design-system/src/components/Avatar/Avatar.stories.mdx create mode 100644 front-packages/akeneo-design-system/src/components/Avatar/Avatar.tsx create mode 100644 front-packages/akeneo-design-system/src/components/Avatar/Avatar.unit.tsx create mode 100644 front-packages/akeneo-design-system/src/components/Avatar/Avatars.tsx create mode 100644 front-packages/akeneo-design-system/src/components/Avatar/Avatars.unit.tsx diff --git a/front-packages/akeneo-design-system/example/src/__snapshots__/App.test.js.snap b/front-packages/akeneo-design-system/example/src/__snapshots__/App.test.js.snap index e4db26d74dda..29427d8afbaf 100644 --- a/front-packages/akeneo-design-system/example/src/__snapshots__/App.test.js.snap +++ b/front-packages/akeneo-design-system/example/src/__snapshots__/App.test.js.snap @@ -5,7 +5,7 @@ exports[`renders the expected elements 1`] = `
Success diff --git a/front-packages/akeneo-design-system/jest-puppeteer.config.js b/front-packages/akeneo-design-system/jest-puppeteer.config.js index a8453deb5356..2424d597b124 100644 --- a/front-packages/akeneo-design-system/jest-puppeteer.config.js +++ b/front-packages/akeneo-design-system/jest-puppeteer.config.js @@ -2,6 +2,7 @@ module.exports = { launch: { dumpio: true, headless: true, + args: ['--no-sandbox', '--disable-setuid-sandbox'] }, server: { command: 'yarn http-server storybook-static -p 6006', diff --git a/front-packages/akeneo-design-system/src/__image_snapshots__/all-visual-tsx-visual-tests-renders-components-avatar-avatar-list-correctly-1-snap.png b/front-packages/akeneo-design-system/src/__image_snapshots__/all-visual-tsx-visual-tests-renders-components-avatar-avatar-list-correctly-1-snap.png new file mode 100644 index 0000000000000000000000000000000000000000..9b3c79354d0ad5bf38653f79993408faf918c2fa GIT binary patch literal 9809 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 literal 0 HcmV?d00001 diff --git a/front-packages/akeneo-design-system/src/__image_snapshots__/all-visual-tsx-visual-tests-renders-components-avatar-avatar-size-correctly-1-snap.png b/front-packages/akeneo-design-system/src/__image_snapshots__/all-visual-tsx-visual-tests-renders-components-avatar-avatar-size-correctly-1-snap.png new file mode 100644 index 0000000000000000000000000000000000000000..1e69520884d123b93d1606937b8edf19bf5e7d19 GIT binary patch literal 6694 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 literal 0 HcmV?d00001 diff --git a/front-packages/akeneo-design-system/src/__image_snapshots__/all-visual-tsx-visual-tests-renders-components-avatar-background-colors-correctly-1-snap.png b/front-packages/akeneo-design-system/src/__image_snapshots__/all-visual-tsx-visual-tests-renders-components-avatar-background-colors-correctly-1-snap.png new file mode 100644 index 0000000000000000000000000000000000000000..4f63adac703746025f49368f96dac8f1b474c2b7 GIT binary patch literal 11581 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 + +# Avatar + +## Usage + +This component is used to display users avatars. If no avatar is available, first letters of the first and last name are +displayed with a dedicated color. + +## Playground + + + + {args => { + return ; + }} + + + + + +## Variation on background colors + +The background color is based from the username. + + + + {args => { + return ( + <> + + + + + + + + + + + + + + ); + }} + + + +## Variation with image + + + + {args => { + return ( + <> + + + ); + }} + + + +## Variation on List + +You can use a dedicated component to display avatar list. After a defined maximum, other avatars are not displayed. + + + + {args => { + return ( + <> + + + + + + + + + + + + + + + + ); + }} + + + +## Variation on Size + + + + {args => { + return ( + <> + + + + ); + }} + + diff --git a/front-packages/akeneo-design-system/src/components/Avatar/Avatar.tsx b/front-packages/akeneo-design-system/src/components/Avatar/Avatar.tsx new file mode 100644 index 000000000000..7d79ef3399ac --- /dev/null +++ b/front-packages/akeneo-design-system/src/components/Avatar/Avatar.tsx @@ -0,0 +1,102 @@ +import React, {useMemo} from 'react'; +import styled, {css} from 'styled-components'; +import {useTheme} from '../../hooks'; +import {Override} from '../../shared'; +import {AkeneoThemedProps, getColor} from '../../theme'; + +const AvatarContainer = styled.span` + ${({size}) => + size === 'default' + ? css` + height: 32px; + width: 32px; + line-height: 32px; + font-size: 15px; + border-radius: 32px; + ` + : css` + height: 140px; + width: 140px; + line-height: 140px; + font-size: 66px; + border-radius: 140px; + `} + display: inline-block; + color: ${getColor('white')}; + text-align: center; + background-position: center; + background-repeat: no-repeat; + background-size: cover; + text-transform: uppercase; + cursor: ${({onClick}) => (onClick ? 'pointer' : 'default')}; +`; + +type AvatarProps = Override< + React.HTMLAttributes, + { + /** + * Username to use as fallback if the avatar is not provided and the Firstname and Lastname are empty. + */ + username: string; + + /** + * Firstname to use as fallback with the Lastname if the avatar is not provided. + */ + firstName: string; + + /** + * Lastname to use as fallback with the Firstname if the avatar is not provided. + */ + lastName: string; + + /** + * Url of the avatar image. + */ + avatarUrl?: string; + + /** + * Size of the avatar. + */ + size?: 'default' | 'big'; + } +>; + +const Avatar = ({username, firstName, lastName, avatarUrl, size = 'default', ...rest}: AvatarProps) => { + const theme = useTheme(); + + const fallback = ( + firstName.trim().charAt(0) + lastName.trim().charAt(0) || username.substring(0, 2) + ).toLocaleUpperCase(); + const title = `${firstName} ${lastName}`.trim() || username; + + const backgroundColor = useMemo(() => { + const colorId = username.split('').reduce((s, l) => s + l.charCodeAt(0), 0); + const colors = [ + theme.colorAlternative.green120, + theme.colorAlternative.darkCyan120, + theme.colorAlternative.forestGreen120, + theme.colorAlternative.oliveGreen120, + theme.colorAlternative.blue120, + theme.colorAlternative.darkBlue120, + theme.colorAlternative.hotPink120, + theme.colorAlternative.red120, + theme.colorAlternative.coralRed120, + theme.colorAlternative.yellow120, + theme.colorAlternative.orange120, + theme.colorAlternative.chocolate120, + ]; + + return colors[colorId % colors.length]; + }, [theme, username]); + + const style = avatarUrl ? {backgroundImage: `url(${avatarUrl})`} : {backgroundColor}; + + return ( + + {avatarUrl ? '' : fallback} + + ); +}; + +export {Avatar}; +export type {AvatarProps}; diff --git a/front-packages/akeneo-design-system/src/components/Avatar/Avatar.unit.tsx b/front-packages/akeneo-design-system/src/components/Avatar/Avatar.unit.tsx new file mode 100644 index 000000000000..816f0397f650 --- /dev/null +++ b/front-packages/akeneo-design-system/src/components/Avatar/Avatar.unit.tsx @@ -0,0 +1,79 @@ +import React from 'react'; +import {render, screen} from '../../storybook/test-util'; +import {Avatar} from './Avatar'; + +test('renders', () => { + render(); + + const avatar = screen.getByTitle('John Doe'); + expect(avatar).toBeInTheDocument(); +}); + +test('avatar image', () => { + render(); + + const avatar = screen.getByTitle('John Doe'); + expect(avatar).toHaveStyle('background-image: url(path/to/image)'); +}); + +test('deterministic fallback color', () => { + render(); + + const avatar = screen.getByTitle('John Doe'); + expect(avatar).toHaveStyle('background-color: rgb(68, 31, 0)'); +}); + +test('fallback to firstname + lastname', () => { + render(); + + const avatar = screen.getByTitle('John Doe'); + expect(avatar).toHaveTextContent('JD'); +}); + +test('fallback to firstname only', () => { + render(); + + const avatar = screen.getByTitle('John'); + expect(avatar).toHaveTextContent('J'); +}); + +test('fallback to lastname only', () => { + render(); + + const avatar = screen.getByTitle('Doe'); + expect(avatar).toHaveTextContent('D'); +}); + +test('fallback to username', () => { + render(); + + const avatar = screen.getByTitle('john'); + expect(avatar).toHaveTextContent('JO'); +}); + +test('initial are converted to uppercase', () => { + render(); + + const avatar = screen.getByTitle('john doe'); + expect(avatar).toHaveTextContent('JD'); +}); + +test('size default', () => { + render(); + + const avatar = screen.getByTitle('John Doe'); + expect(avatar).toHaveStyle('width: 32px'); +}); + +test('size big', () => { + render(); + + const avatar = screen.getByTitle('John Doe'); + expect(avatar).toHaveStyle('width: 140px'); +}); + +test('supports ...rest props', () => { + render(); + + expect(screen.getByTestId('my_value')).toBeInTheDocument(); +}); diff --git a/front-packages/akeneo-design-system/src/components/Avatar/Avatars.tsx b/front-packages/akeneo-design-system/src/components/Avatar/Avatars.tsx new file mode 100644 index 000000000000..dbd5a1178d82 --- /dev/null +++ b/front-packages/akeneo-design-system/src/components/Avatar/Avatars.tsx @@ -0,0 +1,50 @@ +import React, {Children} from 'react'; +import styled from 'styled-components'; +import {Override} from '../../shared'; +import {AkeneoThemedProps, getColor} from '../../theme'; + +const AvatarListContainer = styled.div` + display: flex; + flex-direction: row-reverse; + justify-content: flex-end; + & > * { + margin-right: -4px; + position: relative; + } +`; + +const RemainingAvatar = styled.span` + height: 32px; + width: 32px; + display: inline-block; + border: 1px solid ${getColor('grey', 10)}; + line-height: 32px; + text-align: center; + font-size: 15px; + border-radius: 32px; + background-color: ${getColor('white')}; +`; + +type AvatarsProps = Override< + React.HTMLAttributes, + { + max: number; + } +>; + +const Avatars = ({max, children, ...rest}: AvatarsProps) => { + const childrenArray = Children.toArray(children); + const displayedChildren = childrenArray.slice(0, max); + const remainingChildrenCount = childrenArray.length - max; + const reverseChildren = displayedChildren.reverse(); + + return ( + + {remainingChildrenCount > 0 && +{remainingChildrenCount}} + {reverseChildren} + + ); +}; + +export {Avatars}; +export type {AvatarsProps}; diff --git a/front-packages/akeneo-design-system/src/components/Avatar/Avatars.unit.tsx b/front-packages/akeneo-design-system/src/components/Avatar/Avatars.unit.tsx new file mode 100644 index 000000000000..2f8ac9ea39b4 --- /dev/null +++ b/front-packages/akeneo-design-system/src/components/Avatar/Avatars.unit.tsx @@ -0,0 +1,41 @@ +import React from 'react'; +import {render, screen} from '../../storybook/test-util'; +import {Avatar} from './Avatar'; +import {Avatars} from './Avatars'; + +test('renders multiple avatars', () => { + render( + + + + + ); + + expect(screen.getByTitle('John Doe')).toBeInTheDocument(); + expect(screen.getByTitle('Leonard Doe')).toBeInTheDocument(); +}); + +test('renders a maximum number of avatars', () => { + render( + + + + + ); + + expect(screen.getByTitle('John Doe')).toBeInTheDocument(); + expect(screen.queryByTitle('Leonard Doe')).not.toBeInTheDocument(); + expect(screen.getByText('+1')).toBeInTheDocument(); +}); + +test('renders no avatar', () => { + render(); + + expect(screen.queryByTitle('+1')).not.toBeInTheDocument(); +}); + +test('supports ...rest props', () => { + render(); + + expect(screen.getByTestId('my_value')).toBeInTheDocument(); +}); diff --git a/front-packages/akeneo-design-system/src/components/Input/BooleanInput/BooleanInput.tsx b/front-packages/akeneo-design-system/src/components/Input/BooleanInput/BooleanInput.tsx index 214cd7e077e1..f5b78c4172aa 100644 --- a/front-packages/akeneo-design-system/src/components/Input/BooleanInput/BooleanInput.tsx +++ b/front-packages/akeneo-design-system/src/components/Input/BooleanInput/BooleanInput.tsx @@ -149,7 +149,7 @@ type BooleanInputProps = Override< clearLabel?: string; } ) & { - readOnly: boolean; + readOnly?: boolean; yesLabel: string; noLabel: string; invalid?: boolean; @@ -165,7 +165,7 @@ const BooleanInput = React.forwardRef( ( { value, - readOnly, + readOnly = false, onChange, clearable = false, yesLabel, diff --git a/front-packages/akeneo-design-system/src/components/Input/MultiSelectInput/MultiSelectInput.tsx b/front-packages/akeneo-design-system/src/components/Input/MultiSelectInput/MultiSelectInput.tsx index 05d0b6b42538..7b196793ecd3 100644 --- a/front-packages/akeneo-design-system/src/components/Input/MultiSelectInput/MultiSelectInput.tsx +++ b/front-packages/akeneo-design-system/src/components/Input/MultiSelectInput/MultiSelectInput.tsx @@ -150,17 +150,24 @@ type MultiMultiSelectInputProps = Override< * Callback called when the user hit enter on the field. */ onSubmit?: () => void; - - /** - * Handler called when the next page is almost reached. - */ - onNextPage?: () => void; - - /** - * Handler called when the search value changed - */ - onSearchChange?: (searchValue: string) => void; - } + } & ( + | { + /** + * Handler called when the next page is almost reached. + */ + onNextPage?: () => void; + /** + * Handler called when the search value changed + */ + onSearchChange?: (searchValue: string) => void; + disableInternalSearch?: false; + } + | { + onNextPage: () => void; + onSearchChange: (searchValue: string) => void; + disableInternalSearch: true; + } + ) >; /** @@ -183,6 +190,7 @@ const MultiSelectInput = ({ verticalPosition, onNextPage, onSearchChange, + disableInternalSearch = false, 'aria-labelledby': ariaLabelledby, ...rest }: MultiMultiSelectInputProps) => { @@ -211,12 +219,14 @@ const MultiSelectInput = ({ return indexedChips; }, {}); - const filteredChildren = validChildren.filter(({props}) => { - const childValue = props.value; - const optionValue = childValue + props.children; + const filteredChildren = disableInternalSearch + ? validChildren + : validChildren.filter(({props}) => { + const childValue = props.value; + const optionValue = childValue + props.children; - return !value.includes(childValue) && optionValue.toLowerCase().includes(searchValue.toLowerCase()); - }); + return !value.includes(childValue) && optionValue.toLowerCase().includes(searchValue.toLowerCase()); + }); const handleEnter = () => { if (filteredChildren.length > 0 && dropdownIsOpen) { diff --git a/front-packages/akeneo-design-system/src/components/Input/MultiSelectInput/MultiSelectInput.unit.tsx b/front-packages/akeneo-design-system/src/components/Input/MultiSelectInput/MultiSelectInput.unit.tsx index c0e9ff2438ed..b7ae72c0aa30 100644 --- a/front-packages/akeneo-design-system/src/components/Input/MultiSelectInput/MultiSelectInput.unit.tsx +++ b/front-packages/akeneo-design-system/src/components/Input/MultiSelectInput/MultiSelectInput.unit.tsx @@ -77,6 +77,51 @@ test('it handles search', () => { expect(onChange).toHaveBeenCalledTimes(2); }); +test('it handles external search', () => { + const onChange = jest.fn(); + const onNextPage = jest.fn(); + const onSearchChange = jest.fn(); + + const observe = jest.fn(); + const unobserve = jest.fn(); + window.IntersectionObserver = jest.fn(() => ({ + observe, + unobserve, + })) as unknown as jest.Mock; + + render( + + English + French + German + Spanish + + ); + + const input = screen.getByRole('textbox'); + fireEvent.click(input); + fireEvent.change(input, {target: {value: 'Fr'}}); + + const germanOption = screen.queryByText('German'); + expect(germanOption).toBeInTheDocument(); + const usOption = screen.queryByText('English'); + expect(usOption).toBeInTheDocument(); + const spanishOption = screen.queryByText('Spanish'); + expect(spanishOption).toBeInTheDocument(); + const frenchOption = screen.getByText('French'); + expect(frenchOption).toBeInTheDocument(); +}); + test('it handles empty cases', () => { const onChange = jest.fn(); render( diff --git a/front-packages/akeneo-design-system/src/components/Input/SelectInput/SelectInput.tsx b/front-packages/akeneo-design-system/src/components/Input/SelectInput/SelectInput.tsx index f83c1aa897c3..cc675ffddfe1 100644 --- a/front-packages/akeneo-design-system/src/components/Input/SelectInput/SelectInput.tsx +++ b/front-packages/akeneo-design-system/src/components/Input/SelectInput/SelectInput.tsx @@ -178,17 +178,24 @@ type SelectInputProps = Override< * Force the vertical position of the overlay. */ verticalPosition?: VerticalPosition; - - /** - * Handler called when the next page is almost reached. - */ - onNextPage?: () => void; - - /** - * Handler called when the search value changed - */ - onSearchChange?: (searchValue: string) => void; - } + } & ( + | { + /** + * Handler called when the next page is almost reached. + */ + onNextPage?: () => void; + /** + * Handler called when the search value changed + */ + onSearchChange?: (searchValue: string) => void; + disableInternalSearch?: false; + } + | { + onNextPage: () => void; + onSearchChange: (searchValue: string) => void; + disableInternalSearch: true; + } + ) >; /** @@ -209,6 +216,7 @@ const SelectInput = ({ verticalPosition, onNextPage, onSearchChange, + disableInternalSearch = false, 'aria-labelledby': ariaLabelledby, ...rest }: SelectInputProps) => { @@ -235,14 +243,16 @@ const SelectInput = ({ return optionCodes; }, []); - const filteredChildren = validChildren.filter(child => { - const content = typeof child.props.children === 'string' ? child.props.children : ''; - const title = child.props.title ?? ''; - const value = child.props.value; - const optionValue = value + content + title; + const filteredChildren = disableInternalSearch + ? validChildren + : validChildren.filter(child => { + const content = typeof child.props.children === 'string' ? child.props.children : ''; + const title = child.props.title ?? ''; + const value = child.props.value; + const optionValue = value + content + title; - return optionValue.toLowerCase().includes(searchValue.toLowerCase()); - }); + return optionValue.toLowerCase().includes(searchValue.toLowerCase()); + }); const currentValueElement = validChildren.find(child => { diff --git a/front-packages/akeneo-design-system/src/components/Input/SelectInput/SelectInput.unit.tsx b/front-packages/akeneo-design-system/src/components/Input/SelectInput/SelectInput.unit.tsx index b27153f57588..da1abe9ae486 100644 --- a/front-packages/akeneo-design-system/src/components/Input/SelectInput/SelectInput.unit.tsx +++ b/front-packages/akeneo-design-system/src/components/Input/SelectInput/SelectInput.unit.tsx @@ -95,6 +95,58 @@ test('it handles search', () => { expect(onChange).toHaveBeenCalledWith('es_ES'); }); +test('it handles external search', () => { + const onChange = jest.fn(); + const onNextPage = jest.fn(); + const onSearchChange = jest.fn(); + + const observe = jest.fn(); + const unobserve = jest.fn(); + window.IntersectionObserver = jest.fn(() => ({ + observe, + unobserve, + })) as unknown as jest.Mock; + + render( + + + + + + Français + + + + + + + + + ); + + const input = screen.getByRole('textbox'); + fireEvent.click(input); + fireEvent.change(input, {target: {value: 'Français'}}); + + const germanOption = screen.queryByText('German'); + expect(germanOption).toBeInTheDocument(); + const usOption = screen.queryByText('English'); + expect(usOption).toBeInTheDocument(); + const spanishOption = screen.queryByText('Spanish'); + expect(spanishOption).toBeInTheDocument(); + const frenchOption = screen.getByText('Français'); + expect(frenchOption).toBeInTheDocument(); +}); + test('it handles empty cases', () => { const onChange = jest.fn(); render( diff --git a/front-packages/akeneo-design-system/src/components/Input/TableInput/TableInputRow/TableInputRow.tsx b/front-packages/akeneo-design-system/src/components/Input/TableInput/TableInputRow/TableInputRow.tsx index f694f095f46d..a01608ff78a0 100644 --- a/front-packages/akeneo-design-system/src/components/Input/TableInput/TableInputRow/TableInputRow.tsx +++ b/front-packages/akeneo-design-system/src/components/Input/TableInput/TableInputRow/TableInputRow.tsx @@ -96,15 +96,10 @@ const TableInputTr = styled.tr< height: 0; margin-top: -1px; } - &:has(div) { - background: red !important; - } border-bottom-color: ${getColor('blue', 100)}; - &:first-child { - border-left: 1px solid ${getColor('blue', 100)}; - } + border-left-color: ${getColor('blue', 100)}; &:last-child { - border-right: 1px solid ${getColor('blue', 100)}; + border-right-color: ${getColor('blue', 100)}; } } `} diff --git a/front-packages/akeneo-design-system/src/components/Input/TagInput/TagInput.tsx b/front-packages/akeneo-design-system/src/components/Input/TagInput/TagInput.tsx index 1a6a21392b3b..8d1994ae5d3b 100644 --- a/front-packages/akeneo-design-system/src/components/Input/TagInput/TagInput.tsx +++ b/front-packages/akeneo-design-system/src/components/Input/TagInput/TagInput.tsx @@ -55,12 +55,12 @@ const TagText = styled.span` white-space: nowrap; `; -const InputContainer = styled.li` +const InputContainer = styled.li` list-style-type: none; color: ${getColor('grey', 120)}; border: 0; flex: 1; - padding: 0; + padding: ${({hasTags}) => (hasTags ? '0' : '0 11px')}; align-items: center; display: flex; @@ -255,7 +255,7 @@ const TagInput: FC = ({ ); })} - + 0}>