diff --git a/packages/bento-design-system/src/index.ts b/packages/bento-design-system/src/index.ts index 291981d49..d0693798f 100644 --- a/packages/bento-design-system/src/index.ts +++ b/packages/bento-design-system/src/index.ts @@ -53,7 +53,7 @@ export * from "./Menu/Menu"; export * from "./Modal/Modal"; export * from "./Navigation/Navigation"; export * from "./NumberField/NumberField"; -export * from "./NumberInput/NumberInput"; +export * from "./NumberField/NumberInput"; export * from "./Pagination/Pagination"; export * from "./Placeholder/Placeholder"; export * from "./Popover/Popover"; @@ -62,6 +62,7 @@ export * from "./RadioGroupField/RadioGroupField"; export * from "./ReadOnlyField/ReadOnlyField"; export * from "./SearchBar/SearchBar"; export * from "./SelectField/SelectField"; +export * from "./SelectField/SelectInput"; export * from "./Slider/Slider"; export * from "./SliderField/SliderField"; export * from "./Stepper/Stepper"; @@ -71,6 +72,7 @@ export * from "./Tabs/Tabs"; export { bentoSprinkles } from "./internal/sprinkles.css"; export * from "./TextArea/TextArea"; export * from "./TextField/TextField"; +export * from "./TextField/TextInput"; export * from "./TimeField/TimeField"; export type { TypeOverrides, diff --git a/packages/bento-design-system/stories/Components/Inputs/NumberInput.stories.tsx b/packages/bento-design-system/stories/Components/Inputs/NumberInput.stories.tsx new file mode 100644 index 000000000..2a602a895 --- /dev/null +++ b/packages/bento-design-system/stories/Components/Inputs/NumberInput.stories.tsx @@ -0,0 +1,79 @@ +import { NumberInput } from "../.."; +import { Meta, StoryObj } from "@storybook/react"; + +const meta = { + component: NumberInput, + args: { + value: undefined, + "aria-label": "number-input", + validationState: "valid", + }, +} satisfies Meta; + +export default meta; + +type Story = StoryObj; + +export const Default = {} satisfies Story; + +export const Disabled = { + args: { + value: 0, + disabled: true, + }, +} satisfies Story; + +export const Invalid = { + args: { + value: 0, + validationState: "invalid", + }, +} satisfies Story; + +export const Currency = { + args: { + value: 0, + kind: "currency", + currency: "EUR", + }, +} satisfies Story; + +export const Percentage = { + args: { + value: 0, + kind: "percentage", + }, +} satisfies Story; + +export const ReadOnly = { + args: { + value: 50, + kind: "percentage", + isReadOnly: true, + }, +} satisfies Story; + +export const MinMaxAndStep = { + args: { + value: 5, + minValue: 0.1, + maxValue: 10, + step: 0.5, + }, +} satisfies Story; + +export const RightAccessory = { + args: { + value: 0, + rightAccessory: "👍", + }, +} satisfies Story; + +export const KindAndRightAccessory = { + args: { + value: 0, + rightAccessory: "💰", + kind: "currency", + currency: "EUR", + }, +} satisfies Story; diff --git a/packages/bento-design-system/stories/Components/Inputs/SelectInput.stories.tsx b/packages/bento-design-system/stories/Components/Inputs/SelectInput.stories.tsx new file mode 100644 index 000000000..25364d9ca --- /dev/null +++ b/packages/bento-design-system/stories/Components/Inputs/SelectInput.stories.tsx @@ -0,0 +1,189 @@ +import { StoryFn, Meta, StoryObj } from "@storybook/react"; +import { + IconLightbulb, + IconUser, + IconPlaceholder, + Modal, + SelectInput, + BentoConfigProvider, + SelectFieldProps, +} from "../.."; + +const meta = { + component: SelectInput, + args: { + value: undefined, + "aria-label": "select-input", + validationState: "valid", + menuSize: "large", + options: [ + { + value: 1, + label: "Red", + kind: "two-line", + secondLine: "prova", + icon: IconPlaceholder, + }, + { + value: 2, + label: "Blue", + kind: "two-line", + secondLine: "prova", + icon: IconPlaceholder, + }, + { + value: 3, + label: "Green", + kind: "two-line", + secondLine: "prova", + icon: IconPlaceholder, + disabled: true, + }, + { + value: 4, + label: ` + Very very very very very very very very long label. Did I say this label is very long? Well let me say it again, it's loooooong, very looooooooong. Maybe we should say it again, let's go! Very very very very very very very very long label. + Very very very very very very very very long label. Did I say this label is very long? Well let me say it again, it's loooooong, very looooooooong. Maybe we should say it again, let's go! Very very very very very very very very long label.`, + kind: "single-line", + }, + ], + noOptionsMessage: "No options", + }, +} satisfies Meta; + +export default meta; + +type Story = StoryObj; + +export const LargeMenu = {} satisfies Story; + +export const MediumMenu = { + args: { + menuSize: "medium", + }, +} satisfies Story; + +export const Disabled = { + args: { + disabled: true, + }, +} satisfies Story; + +export const Invalid = { + args: { + validationState: "invalid", + }, +} satisfies Story; + +export const InModal = { + decorators: [ + (Story: StoryFn) => ( + {}} closeButtonLabel="Close"> + + + ), + ], +} satisfies Story; + +export const MultiSelectOneOptionSelected = { + args: { + value: [1], + isMulti: true, + multiValueMessage: (numberOfSelectedOptions: number) => + `${numberOfSelectedOptions} options selected`, + showMultiSelectBulkActions: true, + }, +} satisfies Story; + +export const MultiSelectMultipleOptionsSelected = { + args: { + value: [1, 2], + isMulti: true, + multiValueMessage: (numberOfSelectedOptions: number) => + `${numberOfSelectedOptions} options selected`, + }, +} satisfies Story; + +const manyColors = [ + "red", + "green", + "blue", + "yellow", + "orange", + "purple", + "pink", + "brown", + "black", + "white", + "gray", + "cyan", + "magenta", + "lime", + "maroon", + "navy", + "olive", + "teal", + "aqua", + "fuchsia", +]; + +export const MultiSelectModeChipsSelected = { + args: { + value: manyColors, + isMulti: true, + multiSelectMode: "chips", + showMultiSelectBulkActions: true, + options: manyColors.map((color) => ({ + value: color, + label: color, + kind: "single-line", + })), + }, +} satisfies Story; + +export const WithIconSelected = { + args: { + value: 1, + options: [ + { value: 1, label: "Idea", icon: IconLightbulb }, + { value: 2, label: "User", icon: IconUser }, + ], + }, +} satisfies Story; + +export const ReadOnly = { + args: { + value: 1, + options: [ + { value: 1, label: "Idea", icon: IconLightbulb }, + { value: 2, label: "User", icon: IconUser }, + ], + isReadOnly: true, + }, +} satisfies Story; + +// This story tests that we can configure List specifically for SelectInput +export const CustomListConfig = { + args: { + autoFocus: true, + }, + decorators: [ + (Story: StoryFn) => ( + + {}}> + + + + ), + ], +} satisfies Story; diff --git a/packages/bento-design-system/stories/Components/Inputs/TextInput.stories.tsx b/packages/bento-design-system/stories/Components/Inputs/TextInput.stories.tsx new file mode 100644 index 000000000..d4c8abea0 --- /dev/null +++ b/packages/bento-design-system/stories/Components/Inputs/TextInput.stories.tsx @@ -0,0 +1,50 @@ +import { TextInput } from "../.."; +import { StoryObj, Meta } from "@storybook/react"; + +const meta = { + component: TextInput, + args: { + value: "", + validationState: "valid", + "aria-label": "text-input", + }, +} satisfies Meta; + +export default meta; + +type Story = StoryObj; + +export const Default = {} satisfies Story; + +export const Invalid = { + args: { + validationState: "invalid", + }, +} satisfies Story; + +export const Disabled = { + args: { + disabled: true, + }, +} satisfies Story; + +export const ReadOnly = { + args: { + value: "Read only", + isReadOnly: true, + }, +} satisfies Story; + +export const CustomAccessory = { + args: { + value: "With a custom accessory", + rightAccessory: "👍", + }, +} satisfies Story; + +export const Password = { + args: { + value: "password", + type: "password", + }, +} satisfies Story;