feat: add storybook

add stories for several components
replace some tests with stories
or use portable stories with them

Author: areisle

.eslintrc.json

@@ -25,6 +25,16 @@
         "import/no-cycle": "warn",
         "import/order": "off",
         "import/prefer-default-export": "warn",
+        "import/no-extraneous-dependencies": ["error", {
+            "devDependencies": [
+                // these globs cannot be combined
+                ".storybook/**",
+                "**/*.stories.*",
+                "**/*.test.*",
+                "**/test.*",
+                "vite.config.*"
+            ]
+        }],
         "max-len": [
             "off",
             {

.github/workflows/npm-test.yml

@@ -13,6 +13,7 @@ jobs:
       - run: npm ci
       - run: npm run lint
       - run: npm run check-types
+      - run: npx playwright install chromium
       - run: npm run test -- --reporter=default --reporter=junit --outputFile=coverage/junit.xml --coverage
       - name: Publish Unit Test Results
         uses: EnricoMi/publish-unit-test-result-action@v1.6

.gitignore

@@ -42,4 +42,6 @@ Thumbs.db
 /stats.json
 /dist
 /dist\ copy
-.env.*.local
+.env.*.local
+*storybook.log
+storybook-static

.storybook/main.ts

@@ -0,0 +1,11 @@
+import { defineMain } from '@storybook/react-vite/node';
+
+export default defineMain({
+  "stories": [
+    "../src/**/*.stories.tsx"
+  ],
+  "addons": [
+    "@storybook/addon-vitest",
+  ],
+  "framework": "@storybook/react-vite",
+});

.storybook/preview.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import ThemeProvider from '../src/theme';
+import { initialize, mswLoader, getWorker } from 'msw-storybook-addon'
+import { QueryClient, QueryClientProvider } from 'react-query';
+import '../src/static/graphkb-env-config';
+import { HttpResponse, http } from 'msw';
+import { QueryBody } from '../src/components/types';
+import { definePreview } from '@storybook/react-vite';
+import addonTest from '@storybook/addon-vitest';
+import { MswParameters } from 'msw-storybook-addon'
+import { PreviewAddon } from 'storybook/internal/csf';
+
+export function mockQueryHandler(resolver: (body: QueryBody) => HttpResponse<any>) {
+  return http.post(`${window._env_.API_BASE_URL}/api/query`, async ({ request }) => {
+    const body = await request.clone().json();
+    return resolver(body as any);
+  })
+}
+
+// see https://github.com/mswjs/msw-storybook-addon/issues/180
+try {
+  getWorker();
+} catch (_) {
+  initialize({
+    onUnhandledRequest: ({ url }, print) => {
+      if (url.startsWith(window._env_.API_BASE_URL)) {
+        print.error();
+      }
+    },
+    quiet: import.meta.env.CI === 'true',
+  })
+}
+
+type MswTypes = {
+  parameters: MswParameters
+}
+
+const addonMsw = () => ({}) as PreviewAddon<MswTypes>;
+
+export default definePreview({
+  addons: [addonTest(), addonMsw()],
+  parameters: {
+    controls: {
+      matchers: {
+       color: /(background|color)$/i,
+       date: /Date$/i,
+      },
+    },
+  },
+  decorators: [
+    (Story) => <ThemeProvider><Story /></ThemeProvider>,
+    (Story, context) => {
+      return <QueryClientProvider client={context.loaded.queryClient}><Story /></QueryClientProvider>
+    }
+  ],
+  loaders: [mswLoader, () => ({ queryClient: new QueryClient({ defaultOptions: { queries: { retry: false }}})})],
+});

config/jest/windowEnvMock.js

@@ -1,7 +1,14 @@
-import { expect, afterEach } from 'vitest';
+import { expect, afterEach, beforeAll } from 'vitest';
 import { cleanup } from '@testing-library/react';
+import { setProjectAnnotations } from '@storybook/react-vite';
+import * as previewAnnotations from '../../.storybook/preview';
+
+const annotations = setProjectAnnotations([previewAnnotations]);
+
+// Run Storybook's beforeAll hook
+beforeAll(annotations.beforeAll);
+
 // necessary for extend-expect to work until upgrade to v6
-global.expect = expect;
 window.expect = expect;
 
 // Automatically clean up the DOM after each test run