Add storybook

.eslintrc.js

@@ -1,21 +1,16 @@
 /** @type {import('@types/eslint').Linter.BaseConfig} */
 module.exports = {
-  extends: [
-    "@remix-run/eslint-config",
-    "@remix-run/eslint-config/node",
-    "@remix-run/eslint-config/jest-testing-library",
-    "prettier",
-  ],
+  extends: ["@remix-run/eslint-config", "@remix-run/eslint-config/node", "@remix-run/eslint-config/jest-testing-library", "prettier", "plugin:storybook/recommended", "plugin:storybook/recommended"],
   env: {
-    "cypress/globals": true,
+    "cypress/globals": true
   },
   plugins: ["cypress"],
   // We're using vitest which has a very similar API to jest
   // (so the linting plugins work nicely), but we have to
   // set the jest version explicitly.
   settings: {
     jest: {
-      version: 28,
-    },
-  },
-};
+      version: 28
+    }
+  }
+};

.storybook/main.ts

@@ -0,0 +1,27 @@
+import type { StorybookConfig } from "@storybook/react-vite";
+const config: StorybookConfig = {
+  stories: [
+    "../stories/**/*.mdx",
+    "../stories/**/*.stories.@(js|jsx|ts|tsx)",
+    "../app/components/**/*.stories.@(jsx|tsx)",
+  ],
+  addons: [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/addon-interactions",
+    {
+      name: "@storybook/addon-styling",
+      options: {
+        postCss: true,
+      },
+    },
+  ],
+  framework: {
+    name: "@storybook/react-vite",
+    options: {},
+  },
+  docs: {
+    autodocs: "tag",
+  },
+};
+export default config;

.storybook/preview.ts

@@ -0,0 +1,16 @@
+import type { Preview } from "@storybook/react";
+import '../app/styles/tailwind.css';
+
+const preview: Preview = {
+  parameters: {
+    actions: { argTypesRegex: "^on[A-Z].*" },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/,
+      },
+    },
+  },
+};
+
+export default preview;

app/components/UI/Inputs/TextInput/TextInput.stories.tsx

@@ -0,0 +1,42 @@
+import { unstable_createRemixStub as createRemixStub } from "@remix-run/testing";
+import type { Meta, StoryObj } from "@storybook/react";
+import TextInput from "./TextInput";
+
+const meta: Meta<typeof TextInput> = {
+  title: "components/UI/TextInput",
+  component: TextInput,
+  decorators: [
+    (Story) => {
+      const RemixStub = createRemixStub([
+        {
+          path: "/",
+          element: <Story />,
+        },
+      ]);
+      return <RemixStub />;
+    },
+  ],
+  tags: ["autodocs"],
+  args: {
+    name: "email",
+    labelName: "Email",
+    type: "email",
+    emoji: "📧",
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {};
+
+export const Error: Story = {
+  args: {
+    name: "email",
+    labelName: "Email",
+    type: "email",
+    error:
+      "That email is already taken. Please choose another or browse to the login page.",
+  },
+};

app/components/UI/Inputs/TextInput/TextInput.tsx

@@ -38,7 +38,16 @@ export default function TextInput({
           className="block w-full min-w-0 flex-1 rounded-lg border border-gray-300 bg-gray-50 p-2.5 text-sm text-gray-900 focus:border-blue-500 focus:ring-blue-500"
         />
       </div>
-      {error && <ValidationMessage error={error} isSubmitting={false} />}
+      {error && (
+        <div className="ml-1 mt-1 flex w-auto">
+          <div
+            role="alert"
+            className="w-auto rounded bg-red-200 px-2 py-4 text-red-600 shadow-md"
+          >
+            <ValidationMessage error={error} isSubmitting={false} />
+          </div>
+        </div>
+      )}
     </div>
   );
 }

app/components/UI/ValidationMessage/ValidationMessage.tsx

@@ -22,6 +22,8 @@ export default function ValidationMessage({
   return (
     <div
       style={{
+        display: "flex",
+        alignItems: "center",
         opacity: show ? 1 : 0,
         height: show ? "1em" : 0,
         color: "red",