@rovula/ui 0.1.6 → 0.1.8

package/src/components/Form/Form.stories.tsx

@@ -0,0 +1,490 @@
+import React, { useMemo, useState } from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import type { Resolver } from "react-hook-form";
+import * as yup from "yup";
+import Button from "@/components/Button/Button";
+import TextInput from "@/components/TextInput/TextInput";
+import Dropdown, { Options } from "@/components/Dropdown/Dropdown";
+import DatePicker from "@/components/DatePicker/DatePicker";
+import { NumberInput } from "@/components/NumberInput/NumberInput";
+import { Switch } from "@/components/Switch/Switch";
+import { Field } from "./Field";
+import {
+  Form,
+  FormController,
+  useControlledForm,
+} from "./Form";
+
+type LoginFormValues = {
+  email: string;
+  password: string;
+};
+
+type EmployeeFormValues = {
+  fullName: string;
+  role: string;
+  salary?: number;
+  startDate?: Date;
+  isActive: boolean;
+};
+
+type CodeControlFormValues = {
+  title: string;
+  description: string;
+};
+
+const roleOptions: Options[] = [
+  { value: "dev", label: "Developer" },
+  { value: "pm", label: "Product Manager" },
+  { value: "qa", label: "QA Engineer" },
+];
+
+const meta: Meta = {
+  title: "Components/Form",
+  tags: ["autodocs"],
+  parameters: {
+    layout: "centered",
+  },
+  decorators: [
+    (Story) => (
+      <div className="w-[520px] max-w-full p-5 bg-bg-bg2 rounded-md">
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+type Story = StoryObj;
+
+const loginSchema = yup.object({
+  email: yup
+    .string()
+    .email("Invalid email format")
+    .required("Email is required"),
+  password: yup
+    .string()
+    .required("Password is required")
+    .min(6, "Password must be at least 6 characters"),
+});
+
+export const BasicYupLogin = {
+  args: {},
+  render: () => {
+    const [lastEmailChange, setLastEmailChange] = useState("");
+
+    return (
+      <Form<LoginFormValues>
+        className="flex flex-col gap-3"
+        defaultValues={{
+          email: "",
+          password: "",
+        }}
+        validationSchema={loginSchema}
+        onSubmit={(values: LoginFormValues) => {
+          // eslint-disable-next-line no-console
+          console.log("Submitted form values:", values);
+        }}
+      >
+        <Field<LoginFormValues, "email">
+          name="email"
+          component={TextInput}
+          componentProps={{
+            label: "Email",
+            type: "email",
+            helperText: "Use your work email",
+            required: true,
+          }}
+          onChange={(value) => {
+            setLastEmailChange(String(value ?? ""));
+          }}
+        />
+        <Field<LoginFormValues, "password">
+          name="password"
+          component={TextInput}
+          componentProps={{
+            label: "Password",
+            type: "password",
+            required: true,
+          }}
+        />
+        <div className="text-xs text-text-g-contrast-medium">
+          Last email change: {lastEmailChange || "-"}
+        </div>
+        <Button type="submit">Sign in</Button>
+      </Form>
+    );
+  },
+} satisfies Story;
+
+export const MixedUiKitControls = {
+  args: {},
+  render: () => {
+    const selectedRole = useMemo(
+      () => roleOptions.find((item) => item.value === "dev"),
+      [],
+    );
+
+    return (
+      <Form<EmployeeFormValues>
+        className="flex flex-col gap-4"
+        defaultValues={{
+          fullName: "",
+          role: selectedRole?.value || "",
+          salary: undefined,
+          startDate: undefined,
+          isActive: true,
+        }}
+        validationSchema={yup.object({
+          fullName: yup.string().required("Full name is required"),
+          role: yup.string().required("Please select a role"),
+        })}
+        onSubmit={(values) => {
+          // eslint-disable-next-line no-console
+          console.log("Submitted employee values:", values);
+        }}
+      >
+        <Field<EmployeeFormValues, "fullName">
+          name="fullName"
+          component={TextInput}
+          componentProps={{
+            label: "Full name",
+            required: true,
+          }}
+        />
+
+        <Field<
+          EmployeeFormValues,
+          "role",
+          React.ComponentProps<typeof Dropdown>
+        >
+          name="role"
+          component={Dropdown}
+          componentProps={{
+            label: "Role",
+            options: roleOptions,
+            required: true,
+            helperText: "Choose one role",
+          }}
+          valuePropName="value"
+          changePropName="onSelect"
+          parseValue={(incoming) => {
+            const option = incoming as Options | undefined;
+            return option?.value || "";
+          }}
+          formatValue={(value) =>
+            roleOptions.find((option) => option.value === value)
+          }
+        />
+
+        <Field<EmployeeFormValues, "salary">
+          name="salary"
+          component={NumberInput}
+          componentProps={{
+            label: "Salary",
+            min: 0,
+            thousandSeparator: ",",
+            formatDisplay: true,
+          }}
+          parseValue={(incoming) =>
+            typeof incoming === "number" ? incoming : undefined
+          }
+        />
+
+        <Field<
+          EmployeeFormValues,
+          "startDate",
+          React.ComponentProps<typeof DatePicker>
+        >
+          name="startDate"
+          component={DatePicker}
+          componentProps={{
+            date: undefined,
+            onSelect: () => undefined,
+            textInputProps: { label: "Start date", required: false },
+          }}
+          valuePropName="date"
+          changePropName="onSelect"
+          blurPropName={false}
+          refPropName={false}
+          errorMessagePropName={false}
+          invalidPropName={false}
+          parseValue={(incoming) => incoming as Date | undefined}
+        />
+
+        <div className="flex items-center justify-between rounded-md border border-bg-stroke1 px-3 py-2">
+          <span className="text-sm text-text-contrast-max">
+            Active employee
+          </span>
+          <Field<
+            EmployeeFormValues,
+            "isActive",
+            React.ComponentProps<typeof Switch>
+          >
+            name="isActive"
+            component={Switch}
+            valuePropName="checked"
+            changePropName="onCheckedChange"
+            blurPropName={false}
+            errorMessagePropName={false}
+            invalidPropName={false}
+            parseValue={(incoming) => Boolean(incoming)}
+          />
+        </div>
+
+        <Button type="submit">Create employee</Button>
+      </Form>
+    );
+  },
+} satisfies Story;
+
+export const ResolverBasedValidation = {
+  args: {},
+  render: () => {
+    const resolver: Resolver<LoginFormValues> = async (values) => {
+      const errors: {
+        email?: { type: string; message: string };
+        password?: { type: string; message: string };
+      } = {};
+
+      if (!values.email?.includes("@")) {
+        errors.email = { type: "validate", message: "Email must include @" };
+      }
+      if (!values.password || values.password.length < 8) {
+        errors.password = {
+          type: "validate",
+          message: "Password must be at least 8 characters",
+        };
+      }
+
+      return {
+        values: Object.keys(errors).length ? {} : values,
+        errors,
+      };
+    };
+
+    return (
+      <Form<LoginFormValues>
+        className="flex flex-col gap-3"
+        defaultValues={{
+          email: "",
+          password: "",
+        }}
+        resolver={resolver}
+        onSubmit={(values) => {
+          // eslint-disable-next-line no-console
+          console.log("Resolver submit values:", values);
+        }}
+      >
+        <Field<LoginFormValues, "email">
+          name="email"
+          component={TextInput}
+          componentProps={{
+            label: "Email",
+            type: "email",
+            required: true,
+          }}
+        />
+        <Field<LoginFormValues, "password">
+          name="password"
+          component={TextInput}
+          componentProps={{
+            label: "Password",
+            type: "password",
+            helperText: "This story demonstrates custom resolver.",
+            required: true,
+          }}
+        />
+        <Button type="submit">Validate</Button>
+      </Form>
+    );
+  },
+} satisfies Story;
+
+export const RenderPropsCodeControl = {
+  args: {},
+  render: () => {
+    const codeControlSchema = yup.object({
+      title: yup.string().required("Title is required"),
+      description: yup
+        .string()
+        .required("Description is required")
+        .min(10, "Description must be at least 10 characters"),
+    });
+
+    return (
+      <Form<CodeControlFormValues>
+        className="flex flex-col gap-3"
+        defaultValues={{
+          title: "",
+          description: "",
+        }}
+        mode="onChange"
+        validationSchema={codeControlSchema}
+        onSubmit={(values) => {
+          // eslint-disable-next-line no-console
+          console.log("Submit with code:", values);
+        }}
+      >
+        {({ formState, getValues, handleSubmit }) => (
+          <>
+            <Field<CodeControlFormValues, "title">
+              name="title"
+              component={TextInput}
+              componentProps={{
+                label: "Title",
+                required: true,
+              }}
+            />
+            <Field<CodeControlFormValues, "description">
+              name="description"
+              component={TextInput}
+              componentProps={{
+                label: "Description",
+                helperText: "Try at least 10 characters",
+                required: true,
+              }}
+            />
+
+            <div className="flex gap-2">
+              <Button
+                type="submit"
+                disabled={!formState.isValid || formState.isSubmitting}
+                isLoading={formState.isSubmitting}
+              >
+                Submit with code
+              </Button>
+            </div>
+          </>
+        )}
+      </Form>
+    );
+  },
+} satisfies Story;
+
+export const HigherLayerCodeControl = {
+  args: {},
+  render: () => {
+    const [stateSnapshot, setStateSnapshot] = useState("-");
+    const [submitCount, setSubmitCount] = useState(0);
+    const formRef = React.useRef<FormController<CodeControlFormValues> | null>(
+      null
+    );
+
+    const schema = yup.object({
+      title: yup.string().required("Title is required"),
+      description: yup
+        .string()
+        .required("Description is required")
+        .min(10, "Description must be at least 10 characters"),
+    });
+
+    const { methods, FormRoot } = useControlledForm<CodeControlFormValues>({
+      defaultValues: {
+        title: "",
+        description: "",
+      },
+      validationSchema: schema,
+      mode: "onChange",
+    });
+
+    const onSubmit = (values: CodeControlFormValues) => {
+      setSubmitCount((prev) => prev + 1);
+      // eslint-disable-next-line no-console
+      console.log("Higher layer submit with code:", values);
+    };
+
+    return (
+      <div className="flex flex-col gap-3">
+        <div className="rounded-md border border-bg-stroke1 bg-bg-bg2 p-3 text-xs text-text-g-contrast-medium">
+          Higher layer state: {methods.formState.isValid ? "valid" : "invalid"}{" "}
+          /{methods.formState.isDirty ? " dirty" : " pristine"} / submits:{" "}
+          {submitCount}
+        </div>
+
+        <div className="flex gap-2">
+          <Button
+            type="button"
+            variant="outline"
+            onClick={() => {
+              const snapshot = JSON.stringify({
+                values: methods.getValues(),
+                isValid: methods.formState.isValid,
+                isDirty: methods.formState.isDirty,
+              });
+              setStateSnapshot(snapshot);
+            }}
+          >
+            Get state with code (outside Form)
+          </Button>
+          <Button
+            type="button"
+            disabled={
+              !methods.formState.isValid || methods.formState.isSubmitting
+            }
+            isLoading={methods.formState.isSubmitting}
+            onClick={() => {
+              methods.handleSubmit(onSubmit)();
+            }}
+          >
+            Submit with code (outside Form)
+          </Button>
+          <Button
+            type="button"
+            variant="outline"
+            onClick={async () => {
+              await formRef.current?.submit();
+            }}
+          >
+            Submit with ref
+          </Button>
+          <Button
+            type="button"
+            variant="outline"
+            onClick={() => {
+              const valuesFromRef = formRef.current?.getValues();
+              if (!valuesFromRef) return;
+
+              setStateSnapshot(
+                JSON.stringify({
+                  values: valuesFromRef,
+                  via: "controllerRef",
+                }),
+              );
+            }}
+          >
+            Get state with ref
+          </Button>
+        </div>
+
+        <div className="rounded-md border border-bg-stroke1 bg-bg-bg2 p-3 text-xs text-text-g-contrast-medium">
+          Snapshot: {stateSnapshot}
+        </div>
+
+        <FormRoot
+          ref={formRef}
+          className="flex flex-col gap-3"
+          onSubmit={onSubmit}
+        >
+          <Field<CodeControlFormValues, "title">
+            name="title"
+            component={TextInput}
+            componentProps={{
+              label: "Title",
+              required: true,
+            }}
+          />
+          <Field<CodeControlFormValues, "description">
+            name="description"
+            component={TextInput}
+            componentProps={{
+              label: "Description",
+              helperText: "Try at least 10 characters",
+              required: true,
+            }}
+          />
+        </FormRoot>
+      </div>
+    );
+  },
+} satisfies Story;