build: add Form/inputs Storybook stories

src/components/Form/inputs/AutoComplete.stories.tsx

@@ -0,0 +1,60 @@
+import { object as yupObject } from "yup";
+import { withFormDecorator, type FormDecoratorArgs } from "@/../.storybook/decorators";
+import { AutoComplete, type AutoCompleteProps } from "./AutoComplete";
+import { yupCommonSchema } from "../helpers";
+import type { Meta, StoryObj } from "@storybook/react";
+
+const meta = {
+  title: "Components/Form/AutoComplete",
+  component: AutoComplete,
+  tags: ["autodocs"],
+  decorators: [withFormDecorator<AutoCompleteProps>],
+  parameters: {
+    /* SB addon-actions currently intercepts events in the component as implemented, and
+    is preventing the relevant handlers from being called, so the addon is disabled for
+    now. This is the same issue in the `Tabs` SB story - I suspect this is due to some
+    event handlers being defined internally rather than an SB story/component `arg`. */
+    actions: false,
+  },
+} satisfies Meta<AutoCompleteProps & FormDecoratorArgs>;
+
+export default meta;
+
+///////////////////////////////////////////////////////////
+// STORIES
+
+type Story = StoryObj<typeof meta>;
+
+export const BasicDemo = {
+  args: {
+    id: "movie",
+    label: "Select a Movie",
+    options: [
+      "2001: A Space Odyssey",
+      "Alien",
+      "Back to the Future",
+      "Contact",
+      "Encanto",
+      "Frozen",
+      "Harry Potter",
+      "Independence Day",
+      "Ip Man",
+      "Jurassic Park",
+      "Lord of the Rings",
+      "Moana",
+      "Pirates of the Caribbean",
+      "Raiders of the Lost Ark",
+      "Star Wars",
+      "The Hobbit",
+      "X-Men",
+    ].map((movieName, index) => ({ id: `movie_${index + 1}`, label: movieName })),
+    style: { width: "13rem" },
+
+    _form_decorator_args: {
+      validationSchema: yupObject({ movie: yupCommonSchema.stringNullable }),
+      initialValues: { movie: null },
+    },
+  },
+} satisfies Story;
+
+// TODO stories/controls for AutoComplete variations: FreeSolo, grouped opts

src/components/Form/inputs/AutoCompleteContact.stories.tsx

@@ -0,0 +1,40 @@
+import { object as yupObject } from "yup";
+import { withFormDecorator, type FormDecoratorArgs } from "@/../.storybook/decorators";
+import { STATIC_MOCK_CONTACTS } from "@/tests/mockItems/staticMockContacts";
+import { AutoCompleteContact, type AutoCompleteContactProps } from "./AutoCompleteContact";
+import { yupCommonSchema } from "../helpers";
+import type { Meta, StoryObj } from "@storybook/react";
+
+const meta = {
+  title: "Components/Form/AutoCompleteContact",
+  component: AutoCompleteContact,
+  tags: ["autodocs"],
+  decorators: [withFormDecorator],
+  parameters: {
+    /* SB addon-actions currently intercepts events in the component as implemented, and
+    is preventing the relevant handlers from being called, so the addon is disabled for
+    now. This is the same issue in the `Tabs` SB story - I suspect this is due to some
+    event handlers being defined internally rather than an SB story/component `arg`. */
+    actions: false,
+  },
+} satisfies Meta<AutoCompleteContactProps & FormDecoratorArgs>;
+
+export default meta;
+
+///////////////////////////////////////////////////////////
+// STORIES
+
+type Story = StoryObj<typeof meta>;
+
+export const BasicDemo = {
+  args: {
+    id: "contact",
+    label: "Contact",
+    options: Object.values(STATIC_MOCK_CONTACTS),
+
+    _form_decorator_args: {
+      validationSchema: yupObject({ contact: yupCommonSchema.stringNullable }),
+      initialValues: { contact: null },
+    },
+  },
+} satisfies Story;

src/components/Form/inputs/AutoCompleteStates.stories.tsx

@@ -0,0 +1,37 @@
+import { object as yupObject } from "yup";
+import { withFormDecorator, type FormDecoratorArgs } from "@/../.storybook/decorators";
+import { AutoCompleteStates, type AutoCompleteStatesProps } from "./AutoCompleteStates";
+import { yupCommonSchema } from "../helpers";
+import type { Meta, StoryObj } from "@storybook/react";
+
+const meta = {
+  title: "Components/Form/AutoCompleteStates",
+  component: AutoCompleteStates,
+  decorators: [withFormDecorator],
+  parameters: {
+    /* SB addon-actions currently intercepts events in the component as implemented, and
+    is preventing the relevant handlers from being called, so the addon is disabled for
+    now. This is the same issue in the `Tabs` SB story - I suspect this is due to some
+    event handlers being defined internally rather than an SB story/component `arg`. */
+    actions: false,
+  },
+} satisfies Meta<AutoCompleteStatesProps & FormDecoratorArgs>;
+
+export default meta;
+
+///////////////////////////////////////////////////////////
+// STORIES
+
+type Story = StoryObj<typeof meta>;
+
+export const BasicDemo = {
+  args: {
+    id: "location",
+    label: "Location",
+
+    _form_decorator_args: {
+      validationSchema: yupObject({ location: yupCommonSchema.stringNullable }),
+      initialValues: { location: null },
+    },
+  },
+} satisfies Story;

src/components/Form/inputs/AutoCompleteWorkOrder.stories.tsx

@@ -0,0 +1,43 @@
+import { object as yupObject } from "yup";
+import { withFormDecorator, type FormDecoratorArgs } from "@/../.storybook/decorators";
+import { MOCK_WORK_ORDERS } from "@/tests/mockItems";
+import { AutoCompleteWorkOrder, type AutoCompleteWorkOrderProps } from "./AutoCompleteWorkOrder";
+import { yupCommonSchema } from "../helpers";
+import type { Meta, StoryObj } from "@storybook/react";
+
+const meta = {
+  title: "Components/Form/AutoCompleteWorkOrder",
+  component: AutoCompleteWorkOrder,
+  decorators: [withFormDecorator],
+  tags: ["autodocs"],
+  parameters: {
+    /* SB addon-actions currently intercepts events in the component as implemented, and
+    is preventing the relevant handlers from being called, so the addon is disabled for
+    now. This is the same issue in the `Tabs` SB story - I suspect this is due to some
+    event handlers being defined internally rather than an SB story/component `arg`. */
+    actions: false,
+  },
+} satisfies Meta<AutoCompleteWorkOrderProps & FormDecoratorArgs>;
+
+export default meta;
+
+///////////////////////////////////////////////////////////
+// STORIES
+
+type Story = StoryObj<typeof meta>;
+
+export const BasicDemo = {
+  args: {
+    id: "workOrder",
+    label: "Work Order",
+    options: MOCK_WORK_ORDERS.myWorkOrders.assignedToUser.map((wo) => ({
+      ...wo,
+      userToDisplay: wo.createdBy,
+    })),
+
+    _form_decorator_args: {
+      validationSchema: yupObject({ workOrder: yupCommonSchema.stringNullable }),
+      initialValues: { workOrder: null },
+    },
+  },
+} satisfies Story;

src/components/Form/inputs/AutoCompleteWorkOrderCategory.stories.tsx

@@ -0,0 +1,41 @@
+import { object as yupObject } from "yup";
+import { withFormDecorator, type FormDecoratorArgs } from "@/../.storybook/decorators";
+import {
+  AutoCompleteWorkOrderCategory,
+  type AutoCompleteWorkOrderCategoryProps,
+} from "./AutoCompleteWorkOrderCategory";
+import { yupCommonSchema } from "../helpers";
+import type { Meta, StoryObj } from "@storybook/react";
+
+const meta = {
+  title: "Components/Form/AutoCompleteWorkOrderCategory",
+  component: AutoCompleteWorkOrderCategory,
+  decorators: [withFormDecorator],
+  tags: ["autodocs"],
+  parameters: {
+    /* SB addon-actions currently intercepts events in the component as implemented, and
+    is preventing the relevant handlers from being called, so the addon is disabled for
+    now. This is the same issue in the `Tabs` SB story - I suspect this is due to some
+    event handlers being defined internally rather than an SB story/component `arg`. */
+    actions: false,
+  },
+} satisfies Meta<AutoCompleteWorkOrderCategoryProps & FormDecoratorArgs>;
+
+export default meta;
+
+///////////////////////////////////////////////////////////
+// STORIES
+
+type Story = StoryObj<typeof meta>;
+
+export const BasicDemo = {
+  args: {
+    id: "category",
+    label: "Category",
+
+    _form_decorator_args: {
+      validationSchema: yupObject({ category: yupCommonSchema.stringNullable }),
+      initialValues: { category: null },
+    },
+  },
+} satisfies Story;

src/components/Form/inputs/BaseTextField.stories.tsx

@@ -0,0 +1,23 @@
+import { BaseTextField, type BaseTextFieldProps } from "./BaseTextField";
+import type { Meta, StoryObj } from "@storybook/react";
+
+const meta = {
+  title: "Components/Form/BaseTextField",
+  component: BaseTextField,
+  tags: ["autodocs"],
+} satisfies Meta<BaseTextFieldProps>;
+
+export default meta;
+
+///////////////////////////////////////////////////////////
+// STORIES
+
+type Story = StoryObj<typeof meta>;
+
+export const BasicDemo = {
+  args: {
+    id: "fooField",
+    label: "Foo Field",
+    placeholder: "Foo placeholder",
+  },
+} satisfies Story;

src/components/Form/inputs/CurrencyInput.stories.tsx

@@ -0,0 +1,31 @@
+import { object as yupObject } from "yup";
+import { withFormDecorator, type FormDecoratorArgs } from "@/../.storybook/decorators";
+import { CurrencyInput, type CurrencyInputProps } from "./CurrencyInput";
+import { yupCommonSchema } from "../helpers";
+import type { Meta, StoryObj } from "@storybook/react";
+
+const meta = {
+  title: "Components/Form/CurrencyInput",
+  component: CurrencyInput,
+  tags: ["autodocs"],
+  decorators: [withFormDecorator],
+} satisfies Meta<CurrencyInputProps & FormDecoratorArgs>;
+
+export default meta;
+
+///////////////////////////////////////////////////////////
+// STORIES
+
+type Story = StoryObj<typeof meta>;
+
+export const BasicDemo = {
+  args: {
+    id: "amount",
+    label: "Amount",
+
+    _form_decorator_args: {
+      validationSchema: yupObject({ amount: yupCommonSchema.stringNullable }),
+      initialValues: { amount: null },
+    },
+  },
+} satisfies Story;

src/components/Form/inputs/DatePicker.stories.tsx

@@ -0,0 +1,51 @@
+import { object as yupObject, date as yupDate } from "yup";
+import {
+  withFormDecorator,
+  withLayoutInfoDecorator,
+  type FormDecoratorArgs,
+} from "@/../.storybook/decorators";
+import { DatePicker, type DatePickerProps } from "./DatePicker";
+import type { Meta, StoryObj } from "@storybook/react";
+
+const meta = {
+  title: "Components/Form/DatePicker",
+  component: DatePicker,
+  tags: ["autodocs"],
+  decorators: [
+    (Story, { viewMode }) => (
+      <div
+        style={{
+          ...(viewMode === "story" && {
+            /* In "story" mode, the component is rendered higher in the viewport to
+            ensure the input's Popper isn't covered by the SB controls panel. This is
+            ignored for "docs" to ensure the component is visible in the preview. */
+            transform: "translateY(-10rem)",
+          }),
+        }}
+      >
+        <Story />
+      </div>
+    ),
+    withLayoutInfoDecorator,
+    withFormDecorator,
+  ],
+} satisfies Meta<DatePickerProps & FormDecoratorArgs>;
+
+export default meta;
+
+///////////////////////////////////////////////////////////
+// STORIES
+
+type Story = StoryObj<typeof meta>;
+
+export const BasicDemo = {
+  args: {
+    id: "date",
+    label: "Pick a Date",
+
+    _form_decorator_args: {
+      validationSchema: yupObject({ date: yupDate().defined().nullable().default(null) }),
+      initialValues: { date: null },
+    },
+  },
+} satisfies Story;

src/components/Form/inputs/DateTimePicker.stories.tsx

@@ -0,0 +1,51 @@
+import { object as yupObject, date as yupDate } from "yup";
+import {
+  withFormDecorator,
+  withLayoutInfoDecorator,
+  type FormDecoratorArgs,
+} from "@/../.storybook/decorators";
+import { DateTimePicker, type DateTimePickerProps } from "./DateTimePicker";
+import type { Meta, StoryObj } from "@storybook/react";
+
+const meta = {
+  title: "Components/Form/DateTimePicker",
+  component: DateTimePicker,
+  tags: ["autodocs"],
+  decorators: [
+    (Story, { viewMode }) => (
+      <div
+        style={{
+          ...(viewMode === "story" && {
+            /* In "story" mode, the component is rendered higher in the viewport to
+            ensure the input's Popper isn't covered by the SB controls panel. This is
+            ignored for "docs" to ensure the component is visible in the preview. */
+            transform: "translateY(-10rem)",
+          }),
+        }}
+      >
+        <Story />
+      </div>
+    ),
+    withLayoutInfoDecorator,
+    withFormDecorator,
+  ],
+} satisfies Meta<DateTimePickerProps & FormDecoratorArgs>;
+
+export default meta;
+
+///////////////////////////////////////////////////////////
+// STORIES
+
+type Story = StoryObj<typeof meta>;
+
+export const BasicDemo = {
+  args: {
+    id: "datetime",
+    label: "Pick a DateTime",
+
+    _form_decorator_args: {
+      validationSchema: yupObject({ datetime: yupDate().defined().nullable().default(null) }),
+      initialValues: { datetime: null },
+    },
+  },
+} satisfies Story;