Add some tests

.storybook/main.ts

@@ -1,4 +1,5 @@
 import type { StorybookConfig } from "@storybook/react-vite";
+import { mergeConfig, mergeAlias } from "vite";
 
 const config: StorybookConfig = {
   stories: [
@@ -11,13 +12,29 @@ const config: StorybookConfig = {
     "@storybook/addon-essentials",
     "@storybook/addon-onboarding",
     "@storybook/addon-interactions",
+    "@storybook/addon-a11y",
+    "@storybook/addon-actions",
   ],
+  core: {},
   framework: {
     name: "@storybook/react-vite",
-    options: {},
+    options: {
+      builder: {
+        viteConfigPath: "./.storybook/sbvite.config.ts",
+      },
+    },
   },
   docs: {
     autodocs: "tag",
   },
+  async viteFinal(config) {
+    return mergeConfig(config, {
+      ...config,
+      resolve: {
+        ...config.resolve,
+        alias: [{ find: "~", replacement: "/app" }],
+      },
+    });
+  },
 };
 export default config;

.storybook/preview.ts

@@ -3,7 +3,7 @@ import "../app/tailwind.css";
 
 const preview: Preview = {
   parameters: {
-    actions: { argTypesRegex: "^on[A-Z].*" },
+    actions: {},
     controls: {
       matchers: {
         color: /(background|color)$/i,

.storybook/sbvite.config.ts

@@ -0,0 +1,12 @@
+import tsConfigPaths from "vite-tsconfig-paths";
+import { defineConfig, loadEnv } from "vite";
+import path from "path";
+
+export default defineConfig(({ mode }) => {
+  const env = loadEnv(mode, process.cwd(), "");
+  process.env = { ...process.env, ...env };
+
+  return {
+    plugins: [tsConfigPaths()],
+  };
+});

app/components/Button/Button.stories.tsx

@@ -0,0 +1,75 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { fn } from "@storybook/test";
+
+import Button from "./Button";
+
+const meta: Meta<typeof Button> = {
+  title: "Components/Button",
+  component: Button,
+  args: {
+    onClick: fn(),
+  },
+  argTypes: {
+    onClick: { action: "clicked" },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Button>;
+
+export const Primary: Story = {
+  args: {
+    label: "Submit",
+    primary: true,
+    onClick: fn(),
+    loading: false,
+    loadingText: undefined,
+    error: undefined,
+  },
+  argTypes: {
+    onClick: { action: "clicked" },
+  },
+};
+
+export const Secondary: Story = {
+  args: {
+    label: "Cancel",
+    primary: false,
+    onClick: fn(),
+    loading: false,
+    loadingText: undefined,
+    error: undefined,
+  },
+  argTypes: {
+    onClick: { action: "clicked" },
+  },
+};
+
+export const Loading: Story = {
+  args: {
+    label: "Submit",
+    primary: true,
+    onClick: fn(),
+    loading: true,
+    loadingText: "Submitting...",
+    error: undefined,
+  },
+  argTypes: {
+    onClick: { action: "clicked" },
+  },
+};
+
+export const WithError: Story = {
+  args: {
+    label: "Submit",
+    primary: true,
+    onClick: fn(),
+    loading: false,
+    loadingText: undefined,
+    error: "Something went wrong",
+  },
+  argTypes: {
+    onClick: { action: "clicked" },
+  },
+};

app/components/Button/Button.test.tsx

@@ -0,0 +1,45 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+
+import Button from "./Button";
+
+describe("<Button />", () => {
+  it("Renders to the screen", async () => {
+    const onclick = vi.fn();
+    render(<Button primary label="Submit" onClick={onclick} type="submit" />);
+    expect(screen.getByText("Submit")).toBeInTheDocument();
+  });
+  it("Responds to click", async () => {
+    const onclick = vi.fn();
+    render(<Button primary label="Submit" onClick={onclick} type="submit" />);
+    screen.getByText("Submit").click();
+    expect(onclick).toHaveBeenCalledTimes(1);
+  });
+  it("Shows loading text", async () => {
+    const onclick = vi.fn();
+    render(
+      <Button
+        primary
+        label="Submit"
+        onClick={onclick}
+        loading
+        loadingText="Loading..."
+        type="submit"
+      />,
+    );
+    expect(screen.getByText("Loading...")).toBeInTheDocument();
+  });
+  test("Shows error text", async () => {
+    const onclick = vi.fn();
+    render(
+      <Button
+        primary
+        label="Submit"
+        onClick={onclick}
+        error="An error occurred"
+        type="submit"
+      />,
+    );
+    expect(screen.getByText("An error occurred")).toBeInTheDocument();
+  });
+});

app/components/Button/Button.tsx

@@ -0,0 +1,49 @@
+import { HTMLAttributes } from "react";
+
+import Spinner from "../Icons/Spinner";
+
+interface ButtonProps extends HTMLAttributes<HTMLButtonElement> {
+  label: string;
+  primary: boolean;
+  onClick: () => void;
+  loading?: boolean;
+  loadingText?: string;
+  error?: string;
+  type: "button" | "submit" | "reset";
+}
+
+export default function Button({
+  label,
+  primary = true,
+  loading,
+  loadingText,
+  error,
+  type,
+  onClick,
+}: ButtonProps) {
+  return (
+    <div>
+      <button
+        type={type}
+        onClick={onClick}
+        className={
+          primary
+            ? "bg-blue-500 hover:bg-blue-600 focus:bg-blue-400 text-white font-bold py-2 px-4 rounded"
+            : "bg-gray-200 hover:bg-gray-400 text-gray-700 hover:text-black font-bold py-2 px-4 rounded"
+        }
+      >
+        {loading ? (
+          <div className="flex">
+            <div>
+              <Spinner />
+            </div>
+            <div>{loadingText}</div>
+          </div>
+        ) : (
+          <div>{label}</div>
+        )}
+      </button>
+      {error ? <div className="text-red-500">{error}</div> : null}
+    </div>
+  );
+}

app/components/Forms/BottleForm/BottleForm.stories.tsx

@@ -0,0 +1,100 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import BottleForm from "./BottleForm";
+
+const meta: Meta<typeof BottleForm> = {
+  title: "Components/Forms/BottleForm",
+  component: BottleForm,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof BottleForm>;
+
+export const Primary: Story = {
+  args: {
+    inputs: {
+      name: {
+        id: "name",
+        name: "name",
+      },
+      status: {
+        id: "status",
+        name: "status",
+      },
+      type: {
+        id: "type",
+        name: "type",
+      },
+      distiller: {
+        id: "distiller",
+        name: "distiller",
+      },
+      producer: {
+        id: "producer",
+        name: "producer",
+      },
+      country: {
+        id: "country",
+        name: "country",
+      },
+      region: {
+        id: "region",
+        name: "region",
+      },
+      price: {
+        id: "price",
+        name: "price",
+      },
+      age: {
+        id: "age",
+        name: "age",
+      },
+      year: {
+        id: "year",
+        name: "year",
+      },
+      batch: {
+        id: "batch",
+        name: "batch",
+      },
+      barrel: {
+        id: "barrel",
+        name: "barrel",
+      },
+      alcoholPercent: {
+        id: "alcoholPercent",
+        name: "alcoholPercent",
+      },
+      proof: {
+        id: "proof",
+        name: "proof",
+      },
+      size: {
+        id: "size",
+        name: "size",
+      },
+      color: {
+        id: "color",
+        name: "color",
+      },
+      finishing: {
+        id: "finishing",
+        name: "finishing",
+      },
+      imageUrl: {
+        id: "imageUrl",
+        name: "imageUrl",
+      },
+      openDate: {
+        id: "openDate",
+        name: "openDate",
+      },
+      killDate: {
+        id: "killDate",
+        name: "killDate",
+      },
+    },
+    navigationState: "idle",
+  },
+};