Update exports; add stories

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,

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<typeof NumberInput>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+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;

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<typeof SelectInput>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+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) => (
+      <Modal title="Title" onClose={() => {}} closeButtonLabel="Close">
+        <Story />
+      </Modal>
+    ),
+  ],
+} 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) => (
+      <BentoConfigProvider
+        value={{
+          dropdown: {
+            list: {
+              item: {
+                paddingX: { large: 80, medium: 80 },
+              },
+            },
+          },
+        }}
+      >
+        <Modal title="Title" onClose={() => {}}>
+          <Story />
+        </Modal>
+      </BentoConfigProvider>
+    ),
+  ],
+} satisfies Story;

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<typeof TextInput>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+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;