From c02a6b2cb948ee7c8a3a33125716725a2827deda Mon Sep 17 00:00:00 2001 From: Neretin Artem Date: Wed, 7 Feb 2024 13:04:09 +0600 Subject: [PATCH] feat(plasma-new-hope): Add `Combobox` config for plasma_web --- .../components/Combobox/Combobox.config.ts | 326 ++++++++++++++++++ .../components/Combobox/Combobox.stories.tsx | 244 +++++++++++++ .../components/Combobox/Combobox.ts | 29 ++ 3 files changed, 599 insertions(+) create mode 100644 packages/plasma-new-hope/src/examples/plasma_web/components/Combobox/Combobox.config.ts create mode 100644 packages/plasma-new-hope/src/examples/plasma_web/components/Combobox/Combobox.stories.tsx create mode 100644 packages/plasma-new-hope/src/examples/plasma_web/components/Combobox/Combobox.ts diff --git a/packages/plasma-new-hope/src/examples/plasma_web/components/Combobox/Combobox.config.ts b/packages/plasma-new-hope/src/examples/plasma_web/components/Combobox/Combobox.config.ts new file mode 100644 index 0000000000..a78de9c351 --- /dev/null +++ b/packages/plasma-new-hope/src/examples/plasma_web/components/Combobox/Combobox.config.ts @@ -0,0 +1,326 @@ +import { css } from '@linaria/core'; + +import { comboboxTokens } from '../../../../components/Combobox'; + +export const config = { + defaults: { + view: 'default', + size: 'm', + }, + variations: { + size: { + xs: css` + ${comboboxTokens.width}: 100%; + ${comboboxTokens.height}: auto; + ${comboboxTokens.borderRadius}: 0.5rem; + ${comboboxTokens.paddingTop}: 0.125rem; + ${comboboxTokens.paddingRight}: 0.125rem; + ${comboboxTokens.paddingBottom}: 0.125rem; + ${comboboxTokens.paddingLeft}: 0.125rem; + + ${comboboxTokens.dividerColor}: var(--surface-transparent-tertiary); + ${comboboxTokens.dividerHeight}: 0.063rem; + ${comboboxTokens.dividerMarginTop}: 0; + ${comboboxTokens.dividerMarginRight}: 0.5rem; + ${comboboxTokens.dividerMarginBottom}: 0; + ${comboboxTokens.dividerMarginLeft}: 0.375rem; + + ${comboboxTokens.itemWidth}: auto; + ${comboboxTokens.itemHeight}: 1rem; + ${comboboxTokens.itemPaddingTop}: 0.5rem; + ${comboboxTokens.itemPaddingRight}: 0.5rem; + ${comboboxTokens.itemPaddingBottom}: 0.5rem; + ${comboboxTokens.itemPaddingLeft}: 0.375rem; + ${comboboxTokens.itemBorderRadius}: 0.375rem; + ${comboboxTokens.itemContentLeftWidth}: 1.25rem; + ${comboboxTokens.itemFontFamily}: var(--plasma-typo-body-xs-font-family); + ${comboboxTokens.itemFontSize}: var(--plasma-typo-body-xs-font-size); + ${comboboxTokens.itemFontStyle}: var(--plasma-typo-body-xs-font-style); + ${comboboxTokens.itemFontWeightBold}: var(--plasma-typo-body-xs-font-weight); + ${comboboxTokens.itemFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${comboboxTokens.itemFontLineHeight}: var(--plasma-typo-body-xs-line-height); + + ${comboboxTokens.chipGap}: 0.25rem; + ${comboboxTokens.chipBorderRadius}: 0.125rem; + ${comboboxTokens.chipWidth}: auto; + ${comboboxTokens.chipHeight}: 1.25rem; + ${comboboxTokens.chipPaddingRight}: 0.375rem; + ${comboboxTokens.chipPaddingLeft}: 0.625rem; + ${comboboxTokens.chipClearContentMarginLeft}: 0.25rem; + ${comboboxTokens.chipClearContentMarginRight}: 0rem; + ${comboboxTokens.chipCloseIconSize}: 0.75rem; + ${comboboxTokens.chipFontFamily}: var(--plasma-typo-body-xs-font-family); + ${comboboxTokens.chipFontSize}: var(--plasma-typo-body-xs-font-size); + ${comboboxTokens.chipFontStyle}: var(--plasma-typo-body-xs-font-style); + ${comboboxTokens.chipFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${comboboxTokens.chipLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${comboboxTokens.chipLineHeight}: var(--plasma-typo-body-xs-line-height); + + ${comboboxTokens.targetArrowRight}: 0.5rem; + ${comboboxTokens.targetHeight}: 2rem; + ${comboboxTokens.targetWidth}: 100%; + ${comboboxTokens.targetRadius}: 0.5rem; + ${comboboxTokens.targetPadding}: 0 2.5rem 0 0.75rem; + ${comboboxTokens.targetPaddingHasChips}: 0 2.625rem 0 0.375rem; + ${comboboxTokens.targetPaddingWithInput}: 0 2.625rem 0 0.625rem; + ${comboboxTokens.targetInnerTop}: 0.5rem; + ${comboboxTokens.targetLabelInnerTop}: 0.375rem; + ${comboboxTokens.targetFontFamily}: var(--plasma-typo-body-xs-font-family); + ${comboboxTokens.targetFontSize}: var(--plasma-typo-body-xs-font-size); + ${comboboxTokens.targetFontStyle}: var(--plasma-typo-body-xs-font-style); + ${comboboxTokens.targetFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${comboboxTokens.targetLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${comboboxTokens.targetLineHeight}: var(--plasma-typo-body-xs-line-height); + ${comboboxTokens.targetLabelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); + ${comboboxTokens.targetLabelInnerFontSize}: var(--plasma-typo-body-xs-font-size); + ${comboboxTokens.targetLabelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); + ${comboboxTokens.targetLabelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${comboboxTokens.targetLabelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${comboboxTokens.targetLabelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + `, + s: css` + ${comboboxTokens.width}: 100%; + ${comboboxTokens.height}: auto; + ${comboboxTokens.borderRadius}: 0.625rem; + ${comboboxTokens.paddingTop}: 0.125rem; + ${comboboxTokens.paddingRight}: 0.125rem; + ${comboboxTokens.paddingBottom}: 0.125rem; + ${comboboxTokens.paddingLeft}: 0.125rem; + + ${comboboxTokens.dividerColor}: var(--surface-transparent-tertiary); + ${comboboxTokens.dividerHeight}: 0.063rem; + ${comboboxTokens.dividerMarginTop}: 0; + ${comboboxTokens.dividerMarginRight}: 0.75rem; + ${comboboxTokens.dividerMarginBottom}: 0; + ${comboboxTokens.dividerMarginLeft}: 0.75rem; + + ${comboboxTokens.itemWidth}: auto; + ${comboboxTokens.itemHeight}: 1.5rem; + ${comboboxTokens.itemPaddingTop}: 0.5rem; + ${comboboxTokens.itemPaddingRight}: 0.75rem; + ${comboboxTokens.itemPaddingBottom}: 0.5rem; + ${comboboxTokens.itemPaddingLeft}: 0.75rem; + ${comboboxTokens.itemBorderRadius}: 0.5rem; + ${comboboxTokens.itemContentLeftWidth}: 1.75rem; + ${comboboxTokens.itemFontFamily}: var(--plasma-typo-body-s-font-family); + ${comboboxTokens.itemFontSize}: var(--plasma-typo-body-s-font-size); + ${comboboxTokens.itemFontStyle}: var(--plasma-typo-body-s-font-style); + ${comboboxTokens.itemFontWeightBold}: var(--plasma-typo-body-s-font-weight); + ${comboboxTokens.itemFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); + ${comboboxTokens.itemFontLineHeight}: var(--plasma-typo-body-s-line-height); + + ${comboboxTokens.chipGap}: 0.25rem; + ${comboboxTokens.chipBorderRadius}: 0.25rem; + ${comboboxTokens.chipWidth}: auto; + ${comboboxTokens.chipHeight}: 1.75rem; + ${comboboxTokens.chipPaddingRight}: 0.5rem; + ${comboboxTokens.chipPaddingLeft}: 0.75rem; + ${comboboxTokens.chipClearContentMarginLeft}: 0.375rem; + ${comboboxTokens.chipClearContentMarginRight}: 0rem; + ${comboboxTokens.chipCloseIconSize}: 0.75rem; + ${comboboxTokens.chipFontFamily}: var(--plasma-typo-body-s-font-family); + ${comboboxTokens.chipFontSize}: var(--plasma-typo-body-s-font-size); + ${comboboxTokens.chipFontStyle}: var(--plasma-typo-body-s-font-style); + ${comboboxTokens.chipFontWeight}: var(--plasma-typo-body-s-font-weight); + ${comboboxTokens.chipLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); + ${comboboxTokens.chipLineHeight}: var(--plasma-typo-body-s-line-height); + + ${comboboxTokens.targetArrowRight}: 0.75rem; + ${comboboxTokens.targetHeight}: 2.5rem; + ${comboboxTokens.targetWidth}: 100%; + ${comboboxTokens.targetRadius}: 0.625rem; + ${comboboxTokens.targetPadding}: 0 3rem 0 1rem; + ${comboboxTokens.targetPaddingHasChips}: 0 3.125rem 0 0.375rem; + ${comboboxTokens.targetPaddingWithInput}: 0 3.125rem 0 0.625rem; + ${comboboxTokens.targetInnerTop}: 0.5rem; + ${comboboxTokens.targetLabelInnerTop}: 0.375rem; + ${comboboxTokens.targetFontFamily}: var(--plasma-typo-body-s-font-family); + ${comboboxTokens.targetFontSize}: var(--plasma-typo-body-s-font-size); + ${comboboxTokens.targetFontStyle}: var(--plasma-typo-body-s-font-style); + ${comboboxTokens.targetFontWeight}: var(--plasma-typo-body-s-font-weight); + ${comboboxTokens.targetLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); + ${comboboxTokens.targetLineHeight}: var(--plasma-typo-body-s-line-height); + ${comboboxTokens.targetLabelInnerFontFamily}: var(--plasma-typo-body-xxs-font-family); + ${comboboxTokens.targetLabelInnerFontSize}: var(--plasma-typo-body-xxs-font-size); + ${comboboxTokens.targetLabelInnerFontStyle}: var(--plasma-typo-body-xxs-font-style); + ${comboboxTokens.targetLabelInnerFontWeight}: var(--plasma-typo-body-xxs-font-weight); + ${comboboxTokens.targetLabelInnerLetterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); + ${comboboxTokens.targetLabelInnerLineHeight}: var(--plasma-typo-body-xxs-line-height); + `, + m: css` + ${comboboxTokens.width}: 100%; + ${comboboxTokens.height}: auto; + ${comboboxTokens.borderRadius}: 0.75rem; + ${comboboxTokens.paddingTop}: 0.125rem; + ${comboboxTokens.paddingRight}: 0.125rem; + ${comboboxTokens.paddingBottom}: 0.125rem; + ${comboboxTokens.paddingLeft}: 0.125rem; + + ${comboboxTokens.dividerColor}: var(--surface-transparent-tertiary); + ${comboboxTokens.dividerHeight}: 0.063rem; + ${comboboxTokens.dividerMarginTop}: 0; + ${comboboxTokens.dividerMarginRight}: 0.875rem; + ${comboboxTokens.dividerMarginBottom}: 0; + ${comboboxTokens.dividerMarginLeft}: 0.875rem; + + ${comboboxTokens.itemWidth}: auto; + ${comboboxTokens.itemHeight}: 1.5rem; + ${comboboxTokens.itemPaddingTop}: 0.75rem; + ${comboboxTokens.itemPaddingRight}: 0.875rem; + ${comboboxTokens.itemPaddingBottom}: 0.75rem; + ${comboboxTokens.itemPaddingLeft}: 0.875rem; + ${comboboxTokens.itemBorderRadius}: 0.625rem; + ${comboboxTokens.itemContentLeftWidth}: 1.75rem; + ${comboboxTokens.itemFontFamily}: var(--plasma-typo-body-m-font-family); + ${comboboxTokens.itemFontSize}: var(--plasma-typo-body-m-font-size); + ${comboboxTokens.itemFontStyle}: var(--plasma-typo-body-m-font-style); + ${comboboxTokens.itemFontWeightBold}: var(--plasma-typo-body-m-font-weight); + ${comboboxTokens.itemFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); + ${comboboxTokens.itemFontLineHeight}: var(--plasma-typo-body-m-line-height); + + ${comboboxTokens.chipGap}: 0.25rem; + ${comboboxTokens.chipBorderRadius}: 0.375rem; + ${comboboxTokens.chipWidth}: auto; + ${comboboxTokens.chipHeight}: 2.25rem; + ${comboboxTokens.chipPaddingRight}: 0.875rem; + ${comboboxTokens.chipPaddingLeft}: 0.625rem; + ${comboboxTokens.chipClearContentMarginLeft}: 0.5rem; + ${comboboxTokens.chipClearContentMarginRight}: 0rem; + ${comboboxTokens.chipCloseIconSize}: 1rem; + ${comboboxTokens.chipFontFamily}: var(--plasma-typo-body-m-font-family); + ${comboboxTokens.chipFontSize}: var(--plasma-typo-body-m-font-size); + ${comboboxTokens.chipFontStyle}: var(--plasma-typo-body-m-font-style); + ${comboboxTokens.chipFontWeight}: var(--plasma-typo-body-m-font-weight); + ${comboboxTokens.chipLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); + ${comboboxTokens.chipLineHeight}: var(--plasma-typo-body-m-line-height); + + ${comboboxTokens.targetArrowRight}: 0.875rem; + ${comboboxTokens.targetHeight}: 3rem; + ${comboboxTokens.targetWidth}: 100%; + ${comboboxTokens.targetRadius}: 0.75rem; + ${comboboxTokens.targetPadding}: 0 3.25rem 0 1.25rem; + ${comboboxTokens.targetPaddingHasChips}: 0 3.375rem 0 0.375rem; + ${comboboxTokens.targetPaddingWithInput}: 0 3.375rem 0 0.625rem; + ${comboboxTokens.targetInnerTop}: 0.5rem; + ${comboboxTokens.targetLabelInnerTop}: 0.375rem; + ${comboboxTokens.targetFontFamily}: var(--plasma-typo-body-m-font-family); + ${comboboxTokens.targetFontSize}: var(--plasma-typo-body-m-font-size); + ${comboboxTokens.targetFontStyle}: var(--plasma-typo-body-m-font-style); + ${comboboxTokens.targetFontWeight}: var(--plasma-typo-body-m-font-weight); + ${comboboxTokens.targetLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); + ${comboboxTokens.targetLineHeight}: var(--plasma-typo-body-m-line-height); + ${comboboxTokens.targetLabelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); + ${comboboxTokens.targetLabelInnerFontSize}: var(--plasma-typo-body-xs-font-size); + ${comboboxTokens.targetLabelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); + ${comboboxTokens.targetLabelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${comboboxTokens.targetLabelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${comboboxTokens.targetLabelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + `, + l: css` + ${comboboxTokens.width}: 100%; + ${comboboxTokens.height}: auto; + ${comboboxTokens.borderRadius}: 0.875rem; + ${comboboxTokens.paddingTop}: 0.125rem; + ${comboboxTokens.paddingRight}: 0.125rem; + ${comboboxTokens.paddingBottom}: 0.125rem; + ${comboboxTokens.paddingLeft}: 0.125rem; + + ${comboboxTokens.dividerColor}: var(--surface-transparent-tertiary); + ${comboboxTokens.dividerHeight}: 0.063rem; + ${comboboxTokens.dividerMarginTop}: 0; + ${comboboxTokens.dividerMarginRight}: 1rem; + ${comboboxTokens.dividerMarginBottom}: 0; + ${comboboxTokens.dividerMarginLeft}: 1rem; + + ${comboboxTokens.itemWidth}: auto; + ${comboboxTokens.itemHeight}: 1.5rem; + ${comboboxTokens.itemPaddingTop}: 1rem; + ${comboboxTokens.itemPaddingRight}: 1rem; + ${comboboxTokens.itemPaddingBottom}: 1rem; + ${comboboxTokens.itemPaddingLeft}: 1rem; + ${comboboxTokens.itemBorderRadius}: 0.75rem; + ${comboboxTokens.itemContentLeftWidth}: 1.875rem; + ${comboboxTokens.itemFontFamily}: var(--plasma-typo-body-l-font-family); + ${comboboxTokens.itemFontSize}: var(--plasma-typo-body-l-font-size); + ${comboboxTokens.itemFontStyle}: var(--plasma-typo-body-l-font-style); + ${comboboxTokens.itemFontWeightBold}: var(--plasma-typo-body-l-font-weight); + ${comboboxTokens.itemFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); + ${comboboxTokens.itemFontLineHeight}: var(--plasma-typo-body-l-line-height); + + ${comboboxTokens.chipGap}: 0.25rem; + ${comboboxTokens.chipBorderRadius}: 0.5rem; + ${comboboxTokens.chipWidth}: auto; + ${comboboxTokens.chipHeight}: 2.75rem; + ${comboboxTokens.chipPaddingRight}: 0.75rem; + ${comboboxTokens.chipPaddingLeft}: 1rem; + ${comboboxTokens.chipClearContentMarginLeft}: 0.625rem; + ${comboboxTokens.chipClearContentMarginRight}: 0rem; + ${comboboxTokens.chipCloseIconSize}: 1rem; + ${comboboxTokens.chipFontFamily}: var(--plasma-typo-body-m-font-family); + ${comboboxTokens.chipFontSize}: var(--plasma-typo-body-m-font-size); + ${comboboxTokens.chipFontStyle}: var(--plasma-typo-body-m-font-style); + ${comboboxTokens.chipFontWeight}: var(--plasma-typo-body-m-font-weight); + ${comboboxTokens.chipLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); + ${comboboxTokens.chipLineHeight}: var(--plasma-typo-body-m-line-height); + + ${comboboxTokens.targetArrowRight}: 1rem; + ${comboboxTokens.targetHeight}: 3.5rem; + ${comboboxTokens.targetWidth}: 100%; + ${comboboxTokens.targetRadius}: 0.875rem; + ${comboboxTokens.targetPadding}: 0 3.5rem 0 1.5rem; + ${comboboxTokens.targetPaddingHasChips}: 0 3.625rem 0 0.375rem; + ${comboboxTokens.targetPaddingWithInput}: 0 3.625rem 0 0.625rem; + ${comboboxTokens.targetInnerTop}: 0.5rem; + ${comboboxTokens.targetLabelInnerTop}: 0.375rem; + ${comboboxTokens.targetFontFamily}: var(--plasma-typo-body-l-font-family); + ${comboboxTokens.targetFontSize}: var(--plasma-typo-body-l-font-size); + ${comboboxTokens.targetFontStyle}: var(--plasma-typo-body-l-font-style); + ${comboboxTokens.targetFontWeight}: var(--plasma-typo-body-l-font-weight); + ${comboboxTokens.targetLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); + ${comboboxTokens.targetLineHeight}: var(--plasma-typo-body-l-line-height); + ${comboboxTokens.targetLabelInnerFontFamily}: var(--plasma-typo-body-s-font-family); + ${comboboxTokens.targetLabelInnerFontSize}: var(--plasma-typo-body-s-font-size); + ${comboboxTokens.targetLabelInnerFontStyle}: var(--plasma-typo-body-s-font-style); + ${comboboxTokens.targetLabelInnerFontWeight}: var(--plasma-typo-body-s-font-weight); + ${comboboxTokens.targetLabelInnerLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); + ${comboboxTokens.targetLabelInnerLineHeight}: var(--plasma-typo-body-s-line-height); + `, + }, + view: { + default: css` + ${comboboxTokens.targetColor}: var(--text-primary); + ${comboboxTokens.targetLabelColor}: var(--text-secondary); + ${comboboxTokens.targetArrowColor}: var(--text-secondary); + ${comboboxTokens.targetBorderColor}: var(--text-tertiary); + ${comboboxTokens.targetBorderColorHover}: var(--text-tertiary-hover); + ${comboboxTokens.targetBorderColorActive}: var(--text-tertiary-active); + ${comboboxTokens.targetBorderColorOpen}: var(--text-accent); + + ${comboboxTokens.background}: var(--surface-solid-card); + ${comboboxTokens.boxShadow}: var(--shadow-down-soft-s); + + ${comboboxTokens.itemBackground}: var(--plasma-colors-transparent); + ${comboboxTokens.itemBackgroundHover}: var(--surface-transparent-secondary); + ${comboboxTokens.itemBackgroundSelectedHover}: var(--surface-transparent-secondary); + ${comboboxTokens.itemColor}: var(--text-primary); + ${comboboxTokens.itemContentLeftColor}: var(--text-accent); + + ${comboboxTokens.chipCloseIconColor}: var(--text-secondary); + ${comboboxTokens.chipColor}: var(--text-primary); + ${comboboxTokens.chipBackground}: var(--surface-transparent-secondary); + ${comboboxTokens.chipColorHover}: var(--text-primary); + ${comboboxTokens.chipBackgroundHover}: var(--surface-transparent-secondary-hover); + ${comboboxTokens.chipColorActive}: var(--text-primary); + ${comboboxTokens.chipBackgroundActive}: var(--surface-transparent-secondary-active); + ${comboboxTokens.chipBackgroundReadOnly}: var(--surface-transparent-secondary); + ${comboboxTokens.chipColorReadOnly}: var(--text-primary); + ${comboboxTokens.chipBackgroundReadOnlyHover}: var(--surface-transparent-secondary); + ${comboboxTokens.chipColorReadOnlyHover}: var(--text-primary); + ${comboboxTokens.chipOpacityReadonly}: 0.72; + + ${comboboxTokens.disabledOpacity}: 0.4; + ${comboboxTokens.focusColor}: var(--surface-accent); + `, + }, + }, +}; diff --git a/packages/plasma-new-hope/src/examples/plasma_web/components/Combobox/Combobox.stories.tsx b/packages/plasma-new-hope/src/examples/plasma_web/components/Combobox/Combobox.stories.tsx new file mode 100644 index 0000000000..b04dc11db3 --- /dev/null +++ b/packages/plasma-new-hope/src/examples/plasma_web/components/Combobox/Combobox.stories.tsx @@ -0,0 +1,244 @@ +import React, { useState } from 'react'; +import type { ComponentProps } from 'react'; +import type { Meta, StoryObj } from '@storybook/react'; +import { action } from '@storybook/addon-actions'; + +import { mergeConfig } from '../../../../engines'; +import { Checkbox } from '../Checkbox/Checkbox'; +import { ComboboxPrimitiveValue, comboboxConfig } from '../../../../components/Combobox'; +import { WithTheme, argTypesFromConfig } from '../../../_helpers'; +import { IconDone } from '../../../../components/_Icon'; + +import { Combobox, ComboboxItem } from './Combobox'; +import { config } from './Combobox.config'; + +const placements: Array = ['top', 'bottom', 'right', 'left', 'auto']; +const enumerations: Array = ['comma', 'chip']; + +type StorySelectPropsCustom = { + skidding?: number; + distance?: number; +}; + +type StorySelectProps = ComponentProps & StorySelectPropsCustom; + +const meta: Meta = { + title: 'plasma_web/Combobox', + decorators: [WithTheme], + component: Combobox, + argTypes: { + placement: { + options: placements, + control: { + type: 'select', + }, + }, + enumerationType: { + options: enumerations, + control: { + type: 'select', + }, + }, + ...argTypesFromConfig(mergeConfig(comboboxConfig, config)), + }, + args: { + disabled: false, + readOnly: false, + label: 'Label', + placeholder: 'Placeholder', + enumerationType: 'comma', + size: 'm', + view: 'default', + placement: 'bottom', + }, +}; + +export default meta; + +const onChangeAction = action('onChange'); + +const iconDoneToSelectSizeMap: Record = { + xs: 'xs', + s: 's', + m: 's', + l: 's', +}; + +const checkboxToSelectSizeMap: Record = { + xs: 's', + s: 'm', + m: 'm', + l: 'm', +}; + +const getSelectItems = (slug: string, elemCount: number) => + [...Array(elemCount).keys()].map((num) => ({ + value: `${slug}_${num}`, + child: `${slug} ${num}`, + })); + +const StorySingle = (args: StorySelectProps) => { + const { placement, label, placeholder, readOnly, disabled, size = 'm', view } = args; + + const [value, setValue] = useState('item_0'); + + const onChangeValue = (newValue?: ComboboxPrimitiveValue) => { + setValue(newValue); + onChangeAction(newValue); + }; + + return ( +
+ + + {getSelectItems('item', 6).map((item) => ( + + ) : undefined + } + value={item.value} + text={item.child} + /> + ))} + +
+ ); +}; + +export const Single: StoryObj = { + render: (args) => , +}; + +const StoryMultiple = (args: StorySelectProps) => { + const { placement, label, placeholder, readOnly, disabled, enumerationType, size = 'm', view } = args; + + const [value, setValue] = useState | undefined>(['item_2', 'item_3']); + + const onChangeValue = (newValue?: Array) => { + setValue(newValue); + onChangeAction(newValue); + }; + + return ( +
+ + + {getSelectItems('item', 6).map((item) => ( + } + value={item.value} + text={item.child} + /> + ))} + +
+ ); +}; + +export const Multiple: StoryObj = { + render: (args) => , +}; + +const StoryAddCustomItem = (args: StorySelectProps) => { + const { placement, label, placeholder, readOnly, disabled, size = 'm', view } = args; + + const [isOpen, setIsOpen] = useState(false); + const [items, setItems] = useState(getSelectItems('item', 1)); + const [value, setValue] = useState('item_0'); + + const onChangeValue = (newValue?: ComboboxPrimitiveValue) => { + setValue(newValue); + onChangeAction(newValue); + }; + + const onToggle = (openValue: boolean) => setIsOpen(openValue); + + const onKeyDown = (event: React.KeyboardEvent) => { + const { code } = event; + + if (code === 'Enter') { + const newValue = (event.target as HTMLInputElement).value; + const newItems = [...items]; + + if (newItems.find((item) => item.child === newValue)) { + return; + } + + newItems.push({ + value: `${newValue}_`, + child: (newValue || '').toString(), + }); + + setIsOpen(false); + setItems(newItems); + } + }; + + const filterFunction = () => true; + + return ( +
+ + + {items.map((item) => ( + + ) : undefined + } + value={item.value} + text={item.child} + /> + ))} + +
+ ); +}; + +export const AddCustomItem: StoryObj = { + render: (args) => , +}; diff --git a/packages/plasma-new-hope/src/examples/plasma_web/components/Combobox/Combobox.ts b/packages/plasma-new-hope/src/examples/plasma_web/components/Combobox/Combobox.ts new file mode 100644 index 0000000000..0dcc90b2ab --- /dev/null +++ b/packages/plasma-new-hope/src/examples/plasma_web/components/Combobox/Combobox.ts @@ -0,0 +1,29 @@ +import { + comboboxConfig, + comboboxItemConfig, + comboboxDividerConfig, + comboboxFooterConfig, + comboboxGroupConfig, + comboboxHeaderConfig, +} from '../../../../components/Combobox'; +import { component, mergeConfig } from '../../../../engines'; + +import { config } from './Combobox.config'; + +const mergedConfig = mergeConfig(comboboxConfig, config); +export const Combobox = component(mergedConfig); + +const mergedItemConfig = mergeConfig(comboboxItemConfig); +export const ComboboxItem = component(mergedItemConfig); + +const mergedDividerConfig = mergeConfig(comboboxDividerConfig); +export const ComboboxDivider = component(mergedDividerConfig); + +const mergedFooterConfig = mergeConfig(comboboxFooterConfig); +export const ComboboxFooter = component(mergedFooterConfig); + +const mergedGroupConfig = mergeConfig(comboboxGroupConfig); +export const ComboboxGroup = component(mergedGroupConfig); + +const mergedHeaderConfig = mergeConfig(comboboxHeaderConfig); +export const ComboboxHeader = component(mergedHeaderConfig);