Add storybook

When working on UI elements it is a lot easier to iterate and test in storybook where you can put up the interesting cases as stories and browse through them instead of having construct scenarios in a live running app.

Signed-off-by: Dobes Vandermeer <dobes.vandermeer@newsela.com>

Author: dobesv

ui/.gitignore

@@ -39,3 +39,6 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+# storybook
+/storybook-static

ui/.storybook/main.ts

@@ -0,0 +1,17 @@
+import type { StorybookConfig } from '@storybook/nextjs-vite';
+
+const config: StorybookConfig = {
+  "stories": [
+    "../src/**/*.mdx",
+    "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"
+  ],
+  "addons": [
+    "@chromatic-com/storybook",
+    "@storybook/addon-vitest",
+    "@storybook/addon-a11y",
+    "@storybook/addon-docs",
+    "@storybook/addon-onboarding"
+  ],
+  "framework": "@storybook/nextjs-vite"
+};
+export default config;

ui/.storybook/preview.tsx

@@ -0,0 +1,63 @@
+import type { Preview } from '@storybook/nextjs-vite'
+import React, { ReactNode } from 'react'
+import '../src/app/globals.css'
+import { AgentsContext } from '../src/components/AgentsProvider'
+import type { AgentsContextType } from '../src/components/AgentsProvider'
+import type { Agent } from '../src/types'
+
+const mockContextValue: AgentsContextType = {
+  agents: [],
+  models: [],
+  loading: false,
+  error: "",
+  tools: [],
+  refreshAgents: async () => {},
+  refreshModels: async () => {},
+  refreshTools: async () => {},
+  createNewAgent: async () => ({ message: "mock", data: {} as Agent }),
+  updateAgent: async () => ({ message: "mock", data: {} as Agent }),
+  getAgent: async () => null,
+  validateAgentData: () => ({}),
+};
+
+interface MockAgentsProviderProps {
+  children: ReactNode;
+  value?: Partial<AgentsContextType>;
+}
+
+function MockAgentsProvider({ children, value }: MockAgentsProviderProps) {
+  return (
+    <AgentsContext.Provider value={{ ...mockContextValue, ...value }}>
+      {children}
+    </AgentsContext.Provider>
+  );
+}
+
+const preview: Preview = {
+  parameters: {
+    nextjs: {
+      appDirectory: true,
+    },
+    controls: {
+      matchers: {
+       color: /(background|color)$/i,
+       date: /Date$/i,
+      },
+    },
+    a11y: {
+      test: 'todo'
+    }
+  },
+  decorators: [
+    (Story) => {
+      document.documentElement.classList.add('dark');
+      return (
+        <MockAgentsProvider>
+          <Story />
+        </MockAgentsProvider>
+      );
+    },
+  ],
+};
+
+export default preview;

ui/.storybook/vitest.setup.ts

@@ -0,0 +1,7 @@
+import * as a11yAddonAnnotations from "@storybook/addon-a11y/preview";
+import { setProjectAnnotations } from '@storybook/nextjs-vite';
+import * as projectAnnotations from './preview';
+
+// This is an important step to apply the right configuration when testing your stories.
+// More info at: https://storybook.js.org/docs/api/portable-stories/portable-stories-vitest#setprojectannotations
+setProjectAnnotations([a11yAddonAnnotations, projectAnnotations]);

ui/eslint.config.mjs

@@ -1,3 +1,6 @@
+// For more info, see https://github.com/storybookjs/eslint-plugin-storybook#configuration-flat-config-format
+import storybook from "eslint-plugin-storybook";
+
 import { defineConfig, globalIgnores } from "eslint/config";
 import nextVitals from "eslint-config-next/core-web-vitals";
 import nextTs from "eslint-config-next/typescript";
@@ -27,6 +30,7 @@ const eslintConfig = defineConfig([
     "build/**",
     "next-env.d.ts",
   ]),
+  ...storybook.configs["flat/recommended"],
 ]);
 
 export default eslintConfig;