@grantbii/design-system 1.29.0 → 3.0.3

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":";AAAA,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAsB,MAAM,KAAK,CAAC;AAClE,OAAO,EAAE,SAAS,EAAE,MAAM,+BAA+B,CAAC;AAE1D,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,EAAE,MAAM,EAAE,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;AAM/D,MAAM,eAAe,GAAG,CAAC,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAgB,EAAE,EAAE;IAC3E,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,YAAY,IAAI,EAAE,CAAC,CAAC;IAE7D,MAAM,YAAY,GAAG,CAAC,SAAiB,EAAE,EAAE;QACzC,QAAQ,CAAC,SAAS,CAAC,CAAC;QACpB,QAAQ,EAAE,CAAC,SAAS,CAAC,CAAC;IACxB,CAAC,CAAC;IAEF,OAAO,CACL,KAAC,QAAQ,OACH,KAAK,KACL,CAAC,UAAU;YACb,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,IAAI,KAAK,EAAE,QAAQ,EAAE,YAAY,EAAE;YACzD,CAAC,CAAC,EAAE,QAAQ,EAAE,CAAC,GACjB,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,IAAI,GAAiC;IACzC,KAAK,EAAE,oBAAoB;IAC3B,SAAS,EAAE,eAAe;IAC1B,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,IAAI,EAAE;QACJ,UAAU,EAAE,KAAK;QACjB,OAAO,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC;QAC7C,WAAW,EAAE,wBAAwB;QACrC,YAAY,EAAE,EAAE;QAChB,QAAQ,EAAE,KAAK;QACf,KAAK,EAAE,GAAG;QACV,IAAI,EAAE,WAAW;QACjB,QAAQ,EAAE,EAAE,EAAE;KACf;IACD,QAAQ,EAAE;QACR,UAAU,EAAE;YACV,WAAW,EACT,0FAA0F;YAC5F,KAAK,EAAE,EAAE,YAAY,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE,EAAE;SAC9C;QACD,OAAO,EAAE;YACP,WAAW,EAAE,0CAA0C;YACvD,OAAO,EAAE,QAAQ;SAClB;QACD,WAAW,EAAE;YACX,WAAW,EAAE,6CAA6C;YAC1D,KAAK,EAAE,EAAE,YAAY,EAAE,EAAE,OAAO,EAAE,oBAAoB,EAAE,EAAE;YAC1D,OAAO,EAAE,MAAM;SAChB;QACD,KAAK,EAAE;YACL,WAAW,EAAE,iDAAiD;YAC9D,OAAO,EAAE,MAAM;SAChB;QACD,YAAY,EAAE;YACZ,WAAW,EAAE,2DAA2D;YACxE,KAAK,EAAE,EAAE,YAAY,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE;YAC1C,OAAO,EAAE,MAAM;SAChB;QACD,QAAQ,EAAE;YACR,WAAW,EAAE,wCAAwC;YACrD,OAAO,EAAE,KAAK;SACf;QACD,QAAQ,EAAE;YACR,WAAW,EAAE,+CAA+C;YAC5D,KAAK,EAAE,EAAE,YAAY,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE,EAAE;YAC7C,OAAO,EAAE,SAAS;SACnB;QACD,KAAK,EAAE;YACL,WAAW,EAAE,8CAA8C;YAC3D,KAAK,EAAE,EAAE,YAAY,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,EAAE;YAC9C,OAAO,EAAE,MAAM;SAChB;QACD,IAAI,EAAE;YACJ,WAAW,EAAE,oDAAoD;YACjE,OAAO,EAAE,MAAM;SAChB;QACD,IAAI,EAAE;YACJ,WAAW,EAAE,uDAAuD;YACpE,OAAO,EAAE,MAAM;SAChB;KACF;CACF,CAAC;AAEF,eAAe,IAAI,CAAC;AAIpB,MAAM,CAAC,MAAM,UAAU,GAAU;IAC/B,IAAI,EAAE;QACJ,UAAU,EAAE,IAAI;KACjB;IACD,IAAI,EAAE,KAAK,EAAE,EAAE,aAAa,EAAE,EAAE,EAAE;QAChC,MAAM,MAAM,GAAG,MAAM,CAAC,aAAa,CAAC,CAAC;QACrC,MAAM,OAAO,GAAG,MAAM,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC;QAC3C,MAAM,SAAS,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;QAC/B,MAAM,SAAS,CAAC,KAAK,CAAC,MAAM,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QACxD,MAAM,MAAM,CAAC,OAAO,CAAC,CAAC,GAAG,CAAC,iBAAiB,CAAC,wBAAwB,CAAC,CAAC;IACxE,CAAC;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAAU,EAAE,CAAC;AAEtC,MAAM,CAAC,MAAM,UAAU,GAAU;IAC/B,IAAI,EAAE;QACJ,KAAK,EAAE,aAAa;KACrB;CACF,CAAC","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"]}