@grantbii/design-system 2.0.0 → 3.0.4

package/stories/molecules/ToggleButton.stories.js

@@ -0,0 +1,79 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { SystemIcon, ToggleButton, ToggleButtonGroup, ToggleButtonGroupItem, Tooltip, TooltipContent, TooltipTrigger, } from "@/.";
+import { expect, userEvent, within } from "storybook/test";
+const meta = {
+    title: "Molecules/Toggle Button",
+    component: ToggleButton,
+    tags: ["autodocs"],
+    args: {
+        disabled: false,
+        size: "medium",
+    },
+    argTypes: {
+        children: {
+            description: "Icon or text displayed inside the toggle button.",
+            control: false,
+        },
+        pressed: {
+            description: "Pressed state when the toggle is controlled.",
+            control: "boolean",
+        },
+        onPressedChange: {
+            description: "Called when the pressed state changes.",
+            control: false,
+        },
+        size: {
+            description: "Size of the toggle button.",
+            table: { defaultValue: { summary: '"medium"' } },
+            control: "radio",
+            options: ["small", "medium", "large"],
+        },
+        disabled: {
+            description: "Prevents the toggle button from being pressed.",
+            table: { defaultValue: { summary: "false" } },
+            control: "boolean",
+        },
+        title: {
+            description: "Native browser tooltip text for the button.",
+            control: "text",
+        },
+        type: {
+            description: "Native button behavior when used inside a form.",
+            table: { defaultValue: { summary: '"button"' } },
+            control: "radio",
+            options: ["button", "submit", "reset"],
+        },
+    },
+};
+export default meta;
+export const Icon = {
+    args: { title: "Bookmark" },
+    render: (args) => (_jsx(ToggleButton, { ...args, children: _jsx(SystemIcon.BookmarkSimpleIcon, {}) })),
+    play: async ({ canvasElement }) => {
+        const toggleButton = within(canvasElement).getByRole("button");
+        await expect(toggleButton).toHaveAttribute("data-state", "off");
+        await userEvent.click(toggleButton);
+        await expect(toggleButton).toHaveAttribute("data-state", "on");
+        await userEvent.click(toggleButton);
+        await expect(toggleButton).toHaveAttribute("data-state", "off");
+    },
+};
+export const WithTooltip = {
+    render: (args) => (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { children: _jsx(ToggleButton, { ...args, children: _jsx(SystemIcon.BookmarkSimpleIcon, {}) }) }), _jsx(TooltipContent, { sideOffset: 8, children: "Bookmark" })] })),
+};
+export const Text = {
+    render: (args) => _jsx(ToggleButton, { ...args, children: "Bookmark" }),
+};
+export const IconGroup = {
+    args: { size: "small" },
+    render: (args) => (_jsxs(ToggleButtonGroup, { defaultValue: "bookmark", disabled: args.disabled, size: args.size, children: [_jsx(ToggleButtonGroupItem, { value: "bookmark", title: "Bookmarks", children: _jsx(SystemIcon.BookmarkSimpleIcon, {}) }), _jsx(ToggleButtonGroupItem, { value: "grid", title: "Grid view", children: _jsx(SystemIcon.GridFourIcon, {}) }), _jsx(ToggleButtonGroupItem, { value: "list", title: "List view", children: _jsx(SystemIcon.ListIcon, {}) })] })),
+};
+export const TextGroup = {
+    args: { size: "small" },
+    render: (args) => (_jsxs(ToggleButtonGroup, { defaultValue: "first", disabled: args.disabled, size: args.size, children: [_jsx(ToggleButtonGroupItem, { value: "first", children: "Bookmark" }), _jsx(ToggleButtonGroupItem, { value: "second", children: "Bookmark" }), _jsx(ToggleButtonGroupItem, { value: "third", children: "Bookmark" })] })),
+};
+export const Disabled = {
+    args: { disabled: true, title: "Bookmark" },
+    render: Icon.render,
+};
+//# sourceMappingURL=ToggleButton.stories.js.map

package/stories/molecules/ToggleButton.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleButton.stories.js","sourceRoot":"","sources":["../../../stories/molecules/ToggleButton.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  SystemIcon,\n  ToggleButton,\n  ToggleButtonGroup,\n  ToggleButtonGroupItem,\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/.\";\nimport type { Meta, StoryObj } from \"@storybook/nextjs-vite\";\nimport { expect, userEvent, within } from \"storybook/test\";\n\nconst meta: Meta<typeof ToggleButton> = {\n  title: \"Molecules/Toggle Button\",\n  component: ToggleButton,\n  tags: [\"autodocs\"],\n  args: {\n    disabled: false,\n    size: \"medium\",\n  },\n  argTypes: {\n    children: {\n      description: \"Icon or text displayed inside the toggle button.\",\n      control: false,\n    },\n    pressed: {\n      description: \"Pressed state when the toggle is controlled.\",\n      control: \"boolean\",\n    },\n    onPressedChange: {\n      description: \"Called when the pressed state changes.\",\n      control: false,\n    },\n    size: {\n      description: \"Size of the toggle button.\",\n      table: { defaultValue: { summary: '\"medium\"' } },\n      control: \"radio\",\n      options: [\"small\", \"medium\", \"large\"],\n    },\n    disabled: {\n      description: \"Prevents the toggle button from being pressed.\",\n      table: { defaultValue: { summary: \"false\" } },\n      control: \"boolean\",\n    },\n    title: {\n      description: \"Native browser tooltip text for the button.\",\n      control: \"text\",\n    },\n    type: {\n      description: \"Native button behavior when used inside a form.\",\n      table: { defaultValue: { summary: '\"button\"' } },\n      control: \"radio\",\n      options: [\"button\", \"submit\", \"reset\"],\n    },\n  },\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof meta>;\n\nexport const Icon: Story = {\n  args: { title: \"Bookmark\" },\n  render: (args) => (\n    <ToggleButton {...args}>\n      <SystemIcon.BookmarkSimpleIcon />\n    </ToggleButton>\n  ),\n  play: async ({ canvasElement }) => {\n    const toggleButton = within(canvasElement).getByRole(\"button\");\n    await expect(toggleButton).toHaveAttribute(\"data-state\", \"off\");\n    await userEvent.click(toggleButton);\n    await expect(toggleButton).toHaveAttribute(\"data-state\", \"on\");\n    await userEvent.click(toggleButton);\n    await expect(toggleButton).toHaveAttribute(\"data-state\", \"off\");\n  },\n};\n\nexport const WithTooltip: Story = {\n  render: (args) => (\n    <Tooltip>\n      <TooltipTrigger>\n        <ToggleButton {...args}>\n          <SystemIcon.BookmarkSimpleIcon />\n        </ToggleButton>\n      </TooltipTrigger>\n      <TooltipContent sideOffset={8}>Bookmark</TooltipContent>\n    </Tooltip>\n  ),\n};\n\nexport const Text: Story = {\n  render: (args) => <ToggleButton {...args}>Bookmark</ToggleButton>,\n};\n\nexport const IconGroup: Story = {\n  args: { size: \"small\" },\n  render: (args) => (\n    <ToggleButtonGroup\n      defaultValue=\"bookmark\"\n      disabled={args.disabled}\n      size={args.size}\n    >\n      <ToggleButtonGroupItem value=\"bookmark\" title=\"Bookmarks\">\n        <SystemIcon.BookmarkSimpleIcon />\n      </ToggleButtonGroupItem>\n      <ToggleButtonGroupItem value=\"grid\" title=\"Grid view\">\n        <SystemIcon.GridFourIcon />\n      </ToggleButtonGroupItem>\n      <ToggleButtonGroupItem value=\"list\" title=\"List view\">\n        <SystemIcon.ListIcon />\n      </ToggleButtonGroupItem>\n    </ToggleButtonGroup>\n  ),\n};\n\nexport const TextGroup: Story = {\n  args: { size: \"small\" },\n  render: (args) => (\n    <ToggleButtonGroup\n      defaultValue=\"first\"\n      disabled={args.disabled}\n      size={args.size}\n    >\n      <ToggleButtonGroupItem value=\"first\">Bookmark</ToggleButtonGroupItem>\n      <ToggleButtonGroupItem value=\"second\">Bookmark</ToggleButtonGroupItem>\n      <ToggleButtonGroupItem value=\"third\">Bookmark</ToggleButtonGroupItem>\n    </ToggleButtonGroup>\n  ),\n};\n\nexport const Disabled: Story = {\n  args: { disabled: true, title: \"Bookmark\" },\n  render: Icon.render,\n};\n"]}

package/stories/molecules/Tooltip.stories.d.ts

@@ -0,0 +1,11 @@
+import { type TooltipContentProps } from "@/.";
+import type { ReactNode } from "react";
+import type { Meta, StoryObj } from "@storybook/nextjs-vite";
+type TooltipExampleProps = Omit<TooltipContentProps, "children"> & {
+    content: ReactNode;
+};
+declare const TooltipExample: ({ content, ...tooltipContentProps }: TooltipExampleProps) => import("react").JSX.Element;
+declare const meta: Meta<typeof TooltipExample>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;

package/stories/molecules/Tooltip.stories.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, Tooltip, TooltipContent, TooltipTrigger, } from "@/.";
+const TooltipExample = ({ content, ...tooltipContentProps }) => (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { children: _jsx(Button, { label: "Hover me" }) }), _jsx(TooltipContent, { ...tooltipContentProps, children: content })] }));
+const meta = {
+    title: "Molecules/Tooltip",
+    component: TooltipExample,
+    tags: ["autodocs"],
+    args: {
+        content: "A message which appears when a cursor is positioned over an element.",
+        side: "top",
+        sideOffset: 8,
+    },
+    argTypes: {
+        content: {
+            description: "Content displayed inside the tooltip.",
+            control: "text",
+        },
+        side: {
+            description: "Preferred side of the trigger where the tooltip is displayed. It may change to remain visible within the viewport.",
+            control: "radio",
+            options: ["top", "right", "bottom", "left"],
+            table: { defaultValue: { summary: '"top"' } },
+        },
+        sideOffset: {
+            description: "Distance in pixels between the tooltip and its trigger.",
+            control: { type: "number", min: 0, step: 1 },
+            table: { defaultValue: { summary: "0" } },
+        },
+    },
+};
+export default meta;
+export const Default = {};
+//# sourceMappingURL=Tooltip.stories.js.map

package/stories/molecules/Tooltip.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.stories.js","sourceRoot":"","sources":["../../../stories/molecules/Tooltip.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,MAAM,EACN,OAAO,EACP,cAAc,EACd,cAAc,GAEf,MAAM,KAAK,CAAC;AAQb,MAAM,cAAc,GAAG,CAAC,EACtB,OAAO,EACP,GAAG,mBAAmB,EACF,EAAE,EAAE,CAAC,CACzB,MAAC,OAAO,eACN,KAAC,cAAc,cACb,KAAC,MAAM,IAAC,KAAK,EAAC,UAAU,GAAG,GACZ,EACjB,KAAC,cAAc,OAAK,mBAAmB,YAAG,OAAO,GAAkB,IAC3D,CACX,CAAC;AAEF,MAAM,IAAI,GAAgC;IACxC,KAAK,EAAE,mBAAmB;IAC1B,SAAS,EAAE,cAAc;IACzB,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,IAAI,EAAE;QACJ,OAAO,EACL,sEAAsE;QACxE,IAAI,EAAE,KAAK;QACX,UAAU,EAAE,CAAC;KACd;IACD,QAAQ,EAAE;QACR,OAAO,EAAE;YACP,WAAW,EAAE,uCAAuC;YACpD,OAAO,EAAE,MAAM;SAChB;QACD,IAAI,EAAE;YACJ,WAAW,EACT,oHAAoH;YACtH,OAAO,EAAE,OAAO;YAChB,OAAO,EAAE,CAAC,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,CAAC;YAC3C,KAAK,EAAE,EAAE,YAAY,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE,EAAE;SAC9C;QACD,UAAU,EAAE;YACV,WAAW,EAAE,yDAAyD;YACtE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE;YAC5C,KAAK,EAAE,EAAE,YAAY,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE,EAAE;SAC1C;KACF;CACF,CAAC;AAEF,eAAe,IAAI,CAAC;AAIpB,MAAM,CAAC,MAAM,OAAO,GAAU,EAAE,CAAC","sourcesContent":["import {\n  Button,\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n  type TooltipContentProps,\n} from \"@/.\";\nimport type { ReactNode } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/nextjs-vite\";\n\ntype TooltipExampleProps = Omit<TooltipContentProps, \"children\"> & {\n  content: ReactNode;\n};\n\nconst TooltipExample = ({\n  content,\n  ...tooltipContentProps\n}: TooltipExampleProps) => (\n  <Tooltip>\n    <TooltipTrigger>\n      <Button label=\"Hover me\" />\n    </TooltipTrigger>\n    <TooltipContent {...tooltipContentProps}>{content}</TooltipContent>\n  </Tooltip>\n);\n\nconst meta: Meta<typeof TooltipExample> = {\n  title: \"Molecules/Tooltip\",\n  component: TooltipExample,\n  tags: [\"autodocs\"],\n  args: {\n    content:\n      \"A message which appears when a cursor is positioned over an element.\",\n    side: \"top\",\n    sideOffset: 8,\n  },\n  argTypes: {\n    content: {\n      description: \"Content displayed inside the tooltip.\",\n      control: \"text\",\n    },\n    side: {\n      description:\n        \"Preferred side of the trigger where the tooltip is displayed. It may change to remain visible within the viewport.\",\n      control: \"radio\",\n      options: [\"top\", \"right\", \"bottom\", \"left\"],\n      table: { defaultValue: { summary: '\"top\"' } },\n    },\n    sideOffset: {\n      description: \"Distance in pixels between the tooltip and its trigger.\",\n      control: { type: \"number\", min: 0, step: 1 },\n      table: { defaultValue: { summary: \"0\" } },\n    },\n  },\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof meta>;\n\nexport const Default: Story = {};\n"]}

package/stories/organisms/Dropdown.stories.d.ts

@@ -1,10 +1,12 @@
+import { type DropdownProps } from "@/.";
 import type { Meta, StoryObj } from "@storybook/nextjs-vite";
-type ExampleProps = {
+type ExampleProps = DropdownProps & {
     controlled: boolean;
 };
-declare const DropdownExample: ({ controlled }: ExampleProps) => import("react").JSX.Element;
+declare const DropdownExample: ({ controlled, onChange, ...props }: ExampleProps) => import("react").JSX.Element;
 declare const meta: Meta<typeof DropdownExample>;
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Controlled: Story;
 export declare const Uncontrolled: Story;
+export declare const FitContent: Story;

package/stories/organisms/Dropdown.stories.js

@@ -1,39 +1,96 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Dropdown, enumToOptions } from "@/.";
 import { Objective } from "@grantbii/ui-core/grant/enums";
-import { parseEnum } from "@grantbii/ui-core/enums";
 import { useState } from "react";
-const DropdownExample = ({ controlled }) => {
-    const [selectedObjective, setSelectedObjective] = useState(Objective.UNKNOWN);
-    const controlledProps = {
-        ...baseProps,
-        value: selectedObjective === Objective.UNKNOWN ? "" : selectedObjective,
-        onChange: (event) => setSelectedObjective(parseEnum(event.target.value, Objective)),
+import { expect, fn, userEvent, within } from "storybook/test";
+const DropdownExample = ({ controlled, onChange, ...props }) => {
+    const [value, setValue] = useState(props.defaultValue ?? "");
+    const handleChange = (nextValue) => {
+        setValue(nextValue);
+        onChange?.(nextValue);
     };
-    return _jsx(Dropdown, { ...(controlled ? controlledProps : uncontrolledProps) });
-};
-const baseProps = {
-    options: enumToOptions(Objective),
-    defaultLabel: "Select grant objective",
-};
-const uncontrolledProps = {
-    ...baseProps,
-    defaultValue: "",
+    return (_jsx(Dropdown, { ...props, ...(controlled
+            ? { value: props.value ?? value, onChange: handleChange }
+            : { onChange }) }));
 };
 const meta = {
     title: "Organisms/Dropdown",
     component: DropdownExample,
     tags: ["autodocs"],
+    args: {
+        controlled: false,
+        options: enumToOptions(Objective).slice(0, 5),
+        placeholder: "Select grant objective",
+        defaultValue: "",
+        disabled: false,
+        width: 320,
+        name: "objective",
+        onChange: fn(),
+    },
+    argTypes: {
+        controlled: {
+            description: "Controls whether the selected value is managed by React state or by the Dropdown itself.",
+            table: { defaultValue: { summary: "false" } },
+        },
+        options: {
+            description: "Options displayed in the dropdown panel.",
+            control: "object",
+        },
+        placeholder: {
+            description: "Label displayed when no option is selected.",
+            table: { defaultValue: { summary: '"Select an option"' } },
+            control: "text",
+        },
+        value: {
+            description: "Selected value when the Dropdown is controlled.",
+            control: "text",
+        },
+        defaultValue: {
+            description: "Initial selected value when the Dropdown is uncontrolled.",
+            table: { defaultValue: { summary: '""' } },
+            control: "text",
+        },
+        onChange: {
+            description: "Called with the selected option value.",
+            control: false,
+        },
+        disabled: {
+            description: "Disables the dropdown trigger and form value.",
+            table: { defaultValue: { summary: "false" } },
+            control: "boolean",
+        },
+        width: {
+            description: "Width of the trigger and dropdown container.",
+            table: { defaultValue: { summary: '"100%"' } },
+            control: "text",
+        },
+        name: {
+            description: "Form field name used to submit the selected value.",
+            control: "text",
+        },
+        form: {
+            description: "ID of the form associated with the hidden form field.",
+            control: "text",
+        },
+    },
 };
 export default meta;
 export const Controlled = {
     args: {
         controlled: true,
     },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+        const trigger = canvas.getByRole("button");
+        await userEvent.click(trigger);
+        await userEvent.click(canvas.getAllByRole("option")[0]);
+        await expect(trigger).not.toHaveTextContent("Select grant objective");
+    },
 };
-export const Uncontrolled = {
+export const Uncontrolled = {};
+export const FitContent = {
     args: {
-        controlled: false,
+        width: "fit-content",
     },
 };
 //# sourceMappingURL=Dropdown.stories.js.map

package/stories/organisms/Dropdown.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dropdown.stories.js","sourceRoot":"","sources":["../../../stories/organisms/Dropdown.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAsB,MAAM,KAAK,CAAC;AAClE,OAAO,EAAE,SAAS,EAAE,MAAM,+BAA+B,CAAC;AAC1D,OAAO,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAEpD,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAMjC,MAAM,eAAe,GAAG,CAAC,EAAE,UAAU,EAAgB,EAAE,EAAE;IACvD,MAAM,CAAC,iBAAiB,EAAE,oBAAoB,CAAC,GAAG,QAAQ,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC;IAE9E,MAAM,eAAe,GAAkB;QACrC,GAAG,SAAS;QACZ,KAAK,EAAE,iBAAiB,KAAK,SAAS,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,iBAAiB;QACvE,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAClB,oBAAoB,CAAC,SAAS,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,EAAE,SAAS,CAAC,CAAC;KACjE,CAAC;IAEF,OAAO,KAAC,QAAQ,OAAK,CAAC,UAAU,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,iBAAiB,CAAC,GAAI,CAAC;AAC9E,CAAC,CAAC;AAEF,MAAM,SAAS,GAAkB;IAC/B,OAAO,EAAE,aAAa,CAAC,SAAS,CAAC;IACjC,YAAY,EAAE,wBAAwB;CACvC,CAAC;AAEF,MAAM,iBAAiB,GAAkB;IACvC,GAAG,SAAS;IACZ,YAAY,EAAE,EAAE;CACjB,CAAC;AAEF,MAAM,IAAI,GAAiC;IACzC,KAAK,EAAE,oBAAoB;IAC3B,SAAS,EAAE,eAAe;IAC1B,IAAI,EAAE,CAAC,UAAU,CAAC;CACnB,CAAC;AAEF,eAAe,IAAI,CAAC;AAIpB,MAAM,CAAC,MAAM,UAAU,GAAU;IAC/B,IAAI,EAAE;QACJ,UAAU,EAAE,IAAI;KACjB;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAAU;IACjC,IAAI,EAAE;QACJ,UAAU,EAAE,KAAK;KAClB;CACF,CAAC","sourcesContent":["import { Dropdown, enumToOptions, type DropdownProps } from \"@/.\";\nimport { Objective } from \"@grantbii/ui-core/grant/enums\";\nimport { parseEnum } from \"@grantbii/ui-core/enums\";\nimport type { Meta, StoryObj } from \"@storybook/nextjs-vite\";\nimport { useState } from \"react\";\n\ntype ExampleProps = {\n  controlled: boolean;\n};\n\nconst DropdownExample = ({ controlled }: ExampleProps) => {\n  const [selectedObjective, setSelectedObjective] = useState(Objective.UNKNOWN);\n\n  const controlledProps: DropdownProps = {\n    ...baseProps,\n    value: selectedObjective === Objective.UNKNOWN ? \"\" : selectedObjective,\n    onChange: (event) =>\n      setSelectedObjective(parseEnum(event.target.value, Objective)),\n  };\n\n  return <Dropdown {...(controlled ? controlledProps : uncontrolledProps)} />;\n};\n\nconst baseProps: DropdownProps = {\n  options: enumToOptions(Objective),\n  defaultLabel: \"Select grant objective\",\n};\n\nconst uncontrolledProps: DropdownProps = {\n  ...baseProps,\n  defaultValue: \"\",\n};\n\nconst meta: Meta<typeof DropdownExample> = {\n  title: \"Organisms/Dropdown\",\n  component: DropdownExample,\n  tags: [\"autodocs\"],\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof meta>;\n\nexport const Controlled: Story = {\n  args: {\n    controlled: true,\n  },\n};\n\nexport const Uncontrolled: Story = {\n  args: {\n    controlled: false,\n  },\n};\n"]}
+{"version":3,"file":"Dropdown.stories.js","sourceRoot":"","sources":["../../../stories/organisms/Dropdown.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Dropdown, enumToOptions, type DropdownProps } from \"@/.\";\nimport { Objective } from \"@grantbii/ui-core/grant/enums\";\nimport type { Meta, StoryObj } from \"@storybook/nextjs-vite\";\nimport { useState } from \"react\";\nimport { expect, fn, userEvent, within } from \"storybook/test\";\n\ntype ExampleProps = DropdownProps & {\n  controlled: boolean;\n};\n\nconst DropdownExample = ({ controlled, onChange, ...props }: ExampleProps) => {\n  const [value, setValue] = useState(props.defaultValue ?? \"\");\n\n  const handleChange = (nextValue: string) => {\n    setValue(nextValue);\n    onChange?.(nextValue);\n  };\n\n  return (\n    <Dropdown\n      {...props}\n      {...(controlled\n        ? { value: props.value ?? value, onChange: handleChange }\n        : { onChange })}\n    />\n  );\n};\n\nconst meta: Meta<typeof DropdownExample> = {\n  title: \"Organisms/Dropdown\",\n  component: DropdownExample,\n  tags: [\"autodocs\"],\n  args: {\n    controlled: false,\n    options: enumToOptions(Objective).slice(0, 5),\n    placeholder: \"Select grant objective\",\n    defaultValue: \"\",\n    disabled: false,\n    width: 320,\n    name: \"objective\",\n    onChange: fn(),\n  },\n  argTypes: {\n    controlled: {\n      description:\n        \"Controls whether the selected value is managed by React state or by the Dropdown itself.\",\n      table: { defaultValue: { summary: \"false\" } },\n    },\n    options: {\n      description: \"Options displayed in the dropdown panel.\",\n      control: \"object\",\n    },\n    placeholder: {\n      description: \"Label displayed when no option is selected.\",\n      table: { defaultValue: { summary: '\"Select an option\"' } },\n      control: \"text\",\n    },\n    value: {\n      description: \"Selected value when the Dropdown is controlled.\",\n      control: \"text\",\n    },\n    defaultValue: {\n      description: \"Initial selected value when the Dropdown is uncontrolled.\",\n      table: { defaultValue: { summary: '\"\"' } },\n      control: \"text\",\n    },\n    onChange: {\n      description: \"Called with the selected option value.\",\n      control: false,\n    },\n    disabled: {\n      description: \"Disables the dropdown trigger and form value.\",\n      table: { defaultValue: { summary: \"false\" } },\n      control: \"boolean\",\n    },\n    width: {\n      description: \"Width of the trigger and dropdown container.\",\n      table: { defaultValue: { summary: '\"100%\"' } },\n      control: \"text\",\n    },\n    name: {\n      description: \"Form field name used to submit the selected value.\",\n      control: \"text\",\n    },\n    form: {\n      description: \"ID of the form associated with the hidden form field.\",\n      control: \"text\",\n    },\n  },\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof meta>;\n\nexport const Controlled: Story = {\n  args: {\n    controlled: true,\n  },\n  play: async ({ canvasElement }) => {\n    const canvas = within(canvasElement);\n    const trigger = canvas.getByRole(\"button\");\n    await userEvent.click(trigger);\n    await userEvent.click(canvas.getAllByRole(\"option\")[0]);\n    await expect(trigger).not.toHaveTextContent(\"Select grant objective\");\n  },\n};\n\nexport const Uncontrolled: Story = {};\n\nexport const FitContent: Story = {\n  args: {\n    width: \"fit-content\",\n  },\n};\n"]}