diff --git a/.changeset/real-dragons-talk.md b/.changeset/real-dragons-talk.md new file mode 100644 index 0000000..ac9c6ee --- /dev/null +++ b/.changeset/real-dragons-talk.md @@ -0,0 +1,5 @@ +--- +"@saleor/react-hook-form-macaw": minor +--- + +Add Select input component diff --git a/packages/react-hook-form-macaw/index.ts b/packages/react-hook-form-macaw/index.ts index 919e4b6..3e00683 100644 --- a/packages/react-hook-form-macaw/index.ts +++ b/packages/react-hook-form-macaw/index.ts @@ -1,3 +1,4 @@ export * from "./src/components/Input"; export * from "./src/components/Combobox"; export * from "./src/components/Multiselect"; +export * from "./src/components/Select"; diff --git a/packages/react-hook-form-macaw/src/components/Select.stories.tsx b/packages/react-hook-form-macaw/src/components/Select.stories.tsx new file mode 100644 index 0000000..8200279 --- /dev/null +++ b/packages/react-hook-form-macaw/src/components/Select.stories.tsx @@ -0,0 +1,70 @@ +import { useEffect } from "react"; +import { Meta, StoryObj } from "@storybook/react"; +import { Select } from "./Select"; +import { useForm } from "react-hook-form"; +import { action } from "@storybook/addon-actions"; + +const meta: Meta = { + title: "Components / Select", + component: Select, +}; + +export default meta; + +type Story = StoryObj; + +const SelectTemplate: Story = { + render: (args) => { + const { control, watch, setError } = useForm(); + const name = "selectField"; + + if (args.error) { + setError(name, { message: "Error message" }); + } + + useEffect(() => { + const subscription = watch((value) => action("[React Hooks Form] Form value changed")(value)); + + return () => subscription.unsubscribe(); + }, [watch]); + + return ( +