Merge pull request #37 from club-40/feat/storybook

feat: add storybook

frontend/.eslintrc

@@ -36,6 +36,18 @@
     "import/extensions": "off",
     "import/no-unresolved": "off",
 
+    // disable React module needing to be in scope for jsx, no idea why react-jsx is not working in tsconfig
+    "react/react-in-jsx-scope": "off",
+
+    // disable warning of dev dependencies added by storybook needing to be in dependencies
+    "import/no-extraneous-dependencies": [
+      "error",
+      {
+        "devDependencies": ["**/*.stories.*", "**/.storybook/**/*.*"],
+        "peerDependencies": true
+      }
+    ],
+
     // additional ts settings for strictness
     "@typescript-eslint/consistent-type-exports": "error",
     "@typescript-eslint/consistent-type-imports": "error",

frontend/.storybook/main.ts

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

frontend/.storybook/preview.tsx

@@ -0,0 +1,71 @@
+import React from "react";
+import type { Decorator, Preview } from "@storybook/react";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import "../src/index.css";
+
+const viewports = {
+  small: {
+    name: "Small",
+    styles: {
+      width: "390px",
+      height: "844px",
+    },
+  },
+  medium: {
+    name: "Medium",
+    styles: {
+      width: "768px",
+      height: "1024px",
+    },
+  },
+  large: {
+    name: "Large",
+    styles: {
+      width: "1512px",
+      height: "982px",
+    },
+  },
+};
+
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      refetchOnWindowFocus: false,
+      refetchIntervalInBackground: false,
+      retry: false,
+      cacheTime: 0,
+    },
+  },
+});
+
+const decorators: Decorator[] = [
+  (Story) => {
+    // Extend if we're going to have more providers
+    return (
+      <QueryClientProvider client={queryClient}>
+        <Story />
+      </QueryClientProvider>
+    );
+  },
+];
+
+const preview: Preview = {
+  parameters: {
+    actions: { argTypesRegex: "^on[A-Z].*" },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/,
+      },
+    },
+    options: {
+      storySort: {
+        order: ["Introduction", "Design", "Components"],
+      },
+    },
+    viewport: { viewports, defaultViewport: "small" },
+  },
+  decorators,
+};
+
+export default preview;