@grantbii/design-system 1.0.81 → 1.0.82

package/core/molecules/Dropdown.d.ts

@@ -1,8 +1,8 @@
 import type { DetailedHTMLProps, SelectHTMLAttributes } from "react";
 import type { Option } from "../foundations";
-type DropdownProps = {
+export type DropdownProps = {
     options: Option[];
     defaultLabel?: string;
 } & DetailedHTMLProps<SelectHTMLAttributes<HTMLSelectElement>, HTMLSelectElement>;
-declare const Dropdown: ({ options, defaultLabel, defaultValue, ...selectProps }: DropdownProps) => import("react/jsx-runtime").JSX.Element;
+declare const Dropdown: ({ options, defaultLabel, ...selectProps }: DropdownProps) => import("react/jsx-runtime").JSX.Element;
 export default Dropdown;

package/core/molecules/Dropdown.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Select } from "../atoms";
-const Dropdown = ({ options, defaultLabel, defaultValue = "", ...selectProps }) => (_jsxs(Select, { ...selectProps, defaultValue: defaultValue, children: [_jsx("option", { hidden: true, disabled: true, value: defaultValue, children: defaultLabel ? defaultLabel : "-" }), options.map((option) => (_jsx("option", { value: option.value, children: option.label }, option.value)))] }));
+const Dropdown = ({ options, defaultLabel, ...selectProps }) => (_jsxs(Select, { ...selectProps, children: [_jsx("option", { hidden: true, disabled: true, value: "", children: defaultLabel ? defaultLabel : "-" }), options.map((option) => (_jsx("option", { value: option.value, children: option.label }, option.value)))] }));
 export default Dropdown;
 //# sourceMappingURL=Dropdown.js.map

package/core/molecules/Dropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dropdown.js","sourceRoot":"","sources":["../../../core/molecules/Dropdown.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAWlC,MAAM,QAAQ,GAAG,CAAC,EAChB,OAAO,EACP,YAAY,EACZ,YAAY,GAAG,EAAE,EACjB,GAAG,WAAW,EACA,EAAE,EAAE,CAAC,CACnB,MAAC,MAAM,OAAK,WAAW,EAAE,YAAY,EAAE,YAAY,aACjD,iBAAQ,MAAM,QAAC,QAAQ,QAAC,KAAK,EAAE,YAAY,YACxC,YAAY,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,GAAG,GAC3B,EAER,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CACvB,iBAA2B,KAAK,EAAE,MAAM,CAAC,KAAK,YAC3C,MAAM,CAAC,KAAK,IADF,MAAM,CAAC,KAAK,CAEhB,CACV,CAAC,IACK,CACV,CAAC;AAEF,eAAe,QAAQ,CAAC","sourcesContent":["import type { DetailedHTMLProps, SelectHTMLAttributes } from \"react\";\nimport { Select } from \"../atoms\";\nimport type { Option } from \"../foundations\";\n\ntype DropdownProps = {\n  options: Option[];\n  defaultLabel?: string;\n} & DetailedHTMLProps<\n  SelectHTMLAttributes<HTMLSelectElement>,\n  HTMLSelectElement\n>;\n\nconst Dropdown = ({\n  options,\n  defaultLabel,\n  defaultValue = \"\",\n  ...selectProps\n}: DropdownProps) => (\n  <Select {...selectProps} defaultValue={defaultValue}>\n    <option hidden disabled value={defaultValue}>\n      {defaultLabel ? defaultLabel : \"-\"}\n    </option>\n\n    {options.map((option) => (\n      <option key={option.value} value={option.value}>\n        {option.label}\n      </option>\n    ))}\n  </Select>\n);\n\nexport default Dropdown;\n"]}
+{"version":3,"file":"Dropdown.js","sourceRoot":"","sources":["../../../core/molecules/Dropdown.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAWlC,MAAM,QAAQ,GAAG,CAAC,EAAE,OAAO,EAAE,YAAY,EAAE,GAAG,WAAW,EAAiB,EAAE,EAAE,CAAC,CAC7E,MAAC,MAAM,OAAK,WAAW,aACrB,iBAAQ,MAAM,QAAC,QAAQ,QAAC,KAAK,EAAC,EAAE,YAC7B,YAAY,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,GAAG,GAC3B,EAER,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CACvB,iBAA2B,KAAK,EAAE,MAAM,CAAC,KAAK,YAC3C,MAAM,CAAC,KAAK,IADF,MAAM,CAAC,KAAK,CAEhB,CACV,CAAC,IACK,CACV,CAAC;AAEF,eAAe,QAAQ,CAAC","sourcesContent":["import type { DetailedHTMLProps, SelectHTMLAttributes } from \"react\";\nimport { Select } from \"../atoms\";\nimport type { Option } from \"../foundations\";\n\nexport type DropdownProps = {\n  options: Option[];\n  defaultLabel?: string;\n} & DetailedHTMLProps<\n  SelectHTMLAttributes<HTMLSelectElement>,\n  HTMLSelectElement\n>;\n\nconst Dropdown = ({ options, defaultLabel, ...selectProps }: DropdownProps) => (\n  <Select {...selectProps}>\n    <option hidden disabled value=\"\">\n      {defaultLabel ? defaultLabel : \"-\"}\n    </option>\n\n    {options.map((option) => (\n      <option key={option.value} value={option.value}>\n        {option.label}\n      </option>\n    ))}\n  </Select>\n);\n\nexport default Dropdown;\n"]}

package/core/molecules/index.d.ts

@@ -1,4 +1,4 @@
-export { default as Dropdown } from "./Dropdown";
+export { default as Dropdown, type DropdownProps } from "./Dropdown";
 export { default as FileDrop, useFileDrop } from "./FileDrop";
 export { default as Modal, useModal } from "./Modal";
 export { default as RadioButtons, type RadioOption } from "./RadioButtons";

package/core/molecules/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../core/molecules/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AACjD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AACrD,OAAO,EAAE,OAAO,IAAI,YAAY,EAAoB,MAAM,gBAAgB,CAAC","sourcesContent":["export { default as Dropdown } from \"./Dropdown\";\nexport { default as FileDrop, useFileDrop } from \"./FileDrop\";\nexport { default as Modal, useModal } from \"./Modal\";\nexport { default as RadioButtons, type RadioOption } from \"./RadioButtons\";\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../core/molecules/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAsB,MAAM,YAAY,CAAC;AACrE,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AACrD,OAAO,EAAE,OAAO,IAAI,YAAY,EAAoB,MAAM,gBAAgB,CAAC","sourcesContent":["export { default as Dropdown, type DropdownProps } from \"./Dropdown\";\nexport { default as FileDrop, useFileDrop } from \"./FileDrop\";\nexport { default as Modal, useModal } from \"./Modal\";\nexport { default as RadioButtons, type RadioOption } from \"./RadioButtons\";\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@grantbii/design-system",
-  "version": "1.0.81",
+  "version": "1.0.82",
   "description": "Grantbii's Design System",
   "homepage": "https://design.grantbii.com",
   "repository": {

package/stories/molecules/Dropdown.stories.d.ts

@@ -1,8 +1,10 @@
-import { Dropdown } from "@/.";
 import type { Meta, StoryObj } from "@storybook/nextjs-vite";
-declare const meta: Meta<typeof Dropdown>;
+type ExampleProps = {
+    controlled: boolean;
+};
+declare const DropdownExample: ({ controlled }: ExampleProps) => import("react/jsx-runtime").JSX.Element;
+declare const meta: Meta<typeof DropdownExample>;
 export default meta;
 type Story = StoryObj<typeof meta>;
-export declare const BasicExample: Story;
-export declare const CustomDefaults: Story;
-export declare const WithValidation: Story;
+export declare const Controlled: Story;
+export declare const Uncontrolled: Story;

package/stories/molecules/Dropdown.stories.js

@@ -1,34 +1,43 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import { Dropdown } from "@/.";
-import { Need } from "@grantbii/ui-base/filter/enums";
+import { Need, parseNeed } from "@grantbii/ui-base/filter/enums";
+import { useState } from "react";
+const DropdownExample = ({ controlled }) => {
+    const [selectedNeed, setSelectedNeed] = useState(Need.UNKNOWN);
+    const controlledProps = {
+        options,
+        defaultLabel,
+        value: selectedNeed === Need.UNKNOWN ? "" : selectedNeed,
+        onChange: (event) => setSelectedNeed(parseNeed(event.target.value)),
+    };
+    return _jsx(Dropdown, { ...(controlled ? controlledProps : uncontrolledProps) });
+};
+const defaultLabel = "Select your grant need";
+const options = Object.values(Need)
+    .filter((need) => need !== Need.UNKNOWN)
+    .map((need) => ({ label: need, value: need }));
+const uncontrolledProps = {
+    options,
+    defaultLabel,
+    defaultValue: "",
+};
 const meta = {
     title: "Molecules/Dropdown",
-    component: Dropdown,
+    component: DropdownExample,
     tags: ["autodocs"],
     parameters: {
         layout: "centered",
     },
 };
 export default meta;
-const options = Object.values(Need)
-    .filter((need) => need !== Need.UNKNOWN)
-    .map((need) => ({ label: need, value: need }));
-export const BasicExample = {
+export const Controlled = {
     args: {
-        options,
+        controlled: true,
     },
 };
-export const CustomDefaults = {
+export const Uncontrolled = {
     args: {
-        options,
-        defaultValue: "-",
-        defaultLabel: "Select your grant need",
-    },
-};
-export const WithValidation = {
-    args: {
-        options,
-        required: true,
-        defaultLabel: "Select your grant need",
+        controlled: false,
     },
 };
 //# sourceMappingURL=Dropdown.stories.js.map

package/stories/molecules/Dropdown.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dropdown.stories.js","sourceRoot":"","sources":["../../../stories/molecules/Dropdown.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,KAAK,CAAC;AAC/B,OAAO,EAAE,IAAI,EAAE,MAAM,gCAAgC,CAAC;AAGtD,MAAM,IAAI,GAA0B;IAClC,KAAK,EAAE,oBAAoB;IAC3B,SAAS,EAAE,QAAQ;IACnB,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,UAAU,EAAE;QACV,MAAM,EAAE,UAAU;KACnB;CACF,CAAC;AAEF,eAAe,IAAI,CAAC;AAIpB,MAAM,OAAO,GAAG,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC;KAChC,MAAM,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,KAAK,IAAI,CAAC,OAAO,CAAC;KACvC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;AAEjD,MAAM,CAAC,MAAM,YAAY,GAAU;IACjC,IAAI,EAAE;QACJ,OAAO;KACR;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAU;IACnC,IAAI,EAAE;QACJ,OAAO;QACP,YAAY,EAAE,GAAG;QACjB,YAAY,EAAE,wBAAwB;KACvC;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAU;IACnC,IAAI,EAAE;QACJ,OAAO;QACP,QAAQ,EAAE,IAAI;QACd,YAAY,EAAE,wBAAwB;KACvC;CACF,CAAC","sourcesContent":["import { Dropdown } from \"@/.\";\nimport { Need } from \"@grantbii/ui-base/filter/enums\";\nimport type { Meta, StoryObj } from \"@storybook/nextjs-vite\";\n\nconst meta: Meta<typeof Dropdown> = {\n  title: \"Molecules/Dropdown\",\n  component: Dropdown,\n  tags: [\"autodocs\"],\n  parameters: {\n    layout: \"centered\",\n  },\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof meta>;\n\nconst options = Object.values(Need)\n  .filter((need) => need !== Need.UNKNOWN)\n  .map((need) => ({ label: need, value: need }));\n\nexport const BasicExample: Story = {\n  args: {\n    options,\n  },\n};\n\nexport const CustomDefaults: Story = {\n  args: {\n    options,\n    defaultValue: \"-\",\n    defaultLabel: \"Select your grant need\",\n  },\n};\n\nexport const WithValidation: Story = {\n  args: {\n    options,\n    required: true,\n    defaultLabel: \"Select your grant need\",\n  },\n};\n"]}
+{"version":3,"file":"Dropdown.stories.js","sourceRoot":"","sources":["../../../stories/molecules/Dropdown.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAsB,MAAM,KAAK,CAAC;AACnD,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,gCAAgC,CAAC;AAEjE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAMjC,MAAM,eAAe,GAAG,CAAC,EAAE,UAAU,EAAgB,EAAE,EAAE;IACvD,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IAE/D,MAAM,eAAe,GAAkB;QACrC,OAAO;QACP,YAAY;QACZ,KAAK,EAAE,YAAY,KAAK,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,YAAY;QACxD,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,eAAe,CAAC,SAAS,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;KACpE,CAAC;IAEF,OAAO,KAAC,QAAQ,OAAK,CAAC,UAAU,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,iBAAiB,CAAC,GAAI,CAAC;AAC9E,CAAC,CAAC;AAEF,MAAM,YAAY,GAAG,wBAAwB,CAAC;AAE9C,MAAM,OAAO,GAAG,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC;KAChC,MAAM,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,KAAK,IAAI,CAAC,OAAO,CAAC;KACvC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;AAEjD,MAAM,iBAAiB,GAAkB;IACvC,OAAO;IACP,YAAY;IACZ,YAAY,EAAE,EAAE;CACjB,CAAC;AAEF,MAAM,IAAI,GAAiC;IACzC,KAAK,EAAE,oBAAoB;IAC3B,SAAS,EAAE,eAAe;IAC1B,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,UAAU,EAAE;QACV,MAAM,EAAE,UAAU;KACnB;CACF,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, type DropdownProps } from \"@/.\";\nimport { Need, parseNeed } from \"@grantbii/ui-base/filter/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 [selectedNeed, setSelectedNeed] = useState(Need.UNKNOWN);\n\n  const controlledProps: DropdownProps = {\n    options,\n    defaultLabel,\n    value: selectedNeed === Need.UNKNOWN ? \"\" : selectedNeed,\n    onChange: (event) => setSelectedNeed(parseNeed(event.target.value)),\n  };\n\n  return <Dropdown {...(controlled ? controlledProps : uncontrolledProps)} />;\n};\n\nconst defaultLabel = \"Select your grant need\";\n\nconst options = Object.values(Need)\n  .filter((need) => need !== Need.UNKNOWN)\n  .map((need) => ({ label: need, value: need }));\n\nconst uncontrolledProps: DropdownProps = {\n  options,\n  defaultLabel,\n  defaultValue: \"\",\n};\n\nconst meta: Meta<typeof DropdownExample> = {\n  title: \"Molecules/Dropdown\",\n  component: DropdownExample,\n  tags: [\"autodocs\"],\n  parameters: {\n    layout: \"centered\",\n  },\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"]}