DEVPROD-5139: Combine Storybook config

.evergreen/evergreen.yml

@@ -109,6 +109,8 @@ buildvariants:
       - ubuntu2204-small
     tasks:
       - name: lint
+      - name: snapshots
+      - name: storybook
       - name: test
       - name: type_check
 

.evergreen/scripts/generate-tasks.js

@@ -19,7 +19,13 @@ const Tasks = {
 // Enumerate each task in a build variant that can run as part of a PR.
 // It would be nice to use tags for this, but Evergreen does not reevaluate tags as part of generate.tasks.
 const TASK_MAPPING = {
-  lib: [Tasks.Lint, Tasks.Test, Tasks.TypeCheck],
+  lib: [
+    Tasks.Lint,
+    Tasks.Snapshots,
+    Tasks.Storybook,
+    Tasks.Test,
+    Tasks.TypeCheck,
+  ],
   parsley: [
     Tasks.CheckCodegen,
     Tasks.Compile,

.github/dependabot.yml

@@ -9,3 +9,32 @@ updates:
       prefix: "CHORE(NPM) - "
     reviewers:
       - "evergreen-ci/evg-ui"
+    groups:
+      emotion:
+        applies-to: version-updates
+        patterns:
+          - "@emotion/*"
+      graphql-codegen:
+        applies-to: version-updates
+        patterns:
+          - "@graphql-codegen/*"
+      react:
+        applies-to: version-updates
+        patterns:
+          - "react"
+          - "react-dom"
+          - "@types/react"
+          - "@types/react-dom"
+      sentry:
+        applies-to: version-updates
+        patterns:
+          - "@sentry/*"
+      storybook:
+        applies-to: version-updates
+        patterns:
+          - "storybook"
+          - "@storybook/*"
+      testing-library:
+        applies-to: version-updates
+        patterns:
+          - "@testing-library/*"

.gitignore

@@ -2,3 +2,7 @@ node_modules
 
 # artifacts
 bin
+build
+dist
+coverage
+storybook-static

.storybook/README.mdx

@@ -0,0 +1 @@
+# Evergreen UI Storybook

.storybook/main.ts

@@ -0,0 +1,21 @@
+export default {
+  addons: ["@evg-ui/storybook-addon"],
+  stories: ["./README.mdx"],
+  framework: {
+    name: "@storybook/react-vite",
+  },
+  refs: {
+    lib: {
+      title: "Evergreen UI Library",
+      url: "http://localhost:6008",
+    },
+    parsley: {
+      title: "Parsley",
+      url: "http://localhost:6007",
+    },
+    spruce: {
+      title: "Spruce",
+      url: "http://localhost:6006",
+    },
+  },
+};

README.md

@@ -35,3 +35,10 @@ To run a particular workspace's unit tests from root:
 ```bash
 yarn test --project [workspace-name]
 ```
+
+### Storybook
+
+Spruce, Parsley, and @evg-ui/lib all have their own storybooks, but there's also a shared storybook that combines them into one interface. From root, just run:
+```bash
+yarn storybook
+```

apps/parsley/.gitignore

@@ -1,17 +1,8 @@
 # testing
-/coverage
 cypress/videos/
 cypress/screenshots/
 
-# production
-/build
-/dist
-
-# storybook
-storybook-static
-
 # artifacts
-/bin
 /src/**/*.css
 build.txt
 build.txt-e

apps/parsley/.storybook/main.ts

@@ -1,23 +1,6 @@
-// eslint-disable-next-line import/no-import-module-exports
-import type { StorybookConfig } from "@storybook/react-vite";
-
-const config: StorybookConfig = {
-  stories: ["../src/**/*.stories.@(js|jsx|ts|tsx)"],
-  addons: [
-    "@storybook/addon-essentials",
-    "@storybook/addon-interactions",
-    "@storybook/addon-links",
-    "storybook-addon-apollo-client",
-  ],
+export default {
+  addons: ["@evg-ui/storybook-addon"],
   framework: {
     name: "@storybook/react-vite",
-    options: {},
-  },
-  docs: {
-    autodocs: true,
   },
 };
-
-// storybook/addon-storyshots does not support es6 module exports so we must use commonjs
-// https://github.com/storybookjs/storybook/issues/20814
-module.exports = config;

apps/parsley/.storybook/preview.tsx

@@ -1,29 +1,13 @@
-import React from "react";
-import { MockedProvider } from "@apollo/client/testing";
-import { Decorator, Parameters } from "@storybook/react";
-import { RouterProvider, createMemoryRouter } from "react-router-dom";
-import { GlobalStyles } from "../src/components/styles";
+import { Global } from "@emotion/react";
+import { Decorator } from "@storybook/react";
+import { globalStyles } from "../src/components/styles/GlobalStyles";
 import { LogContextProvider } from "../src/context/LogContext";
 import WithToastContext from "../src/test_utils/toast-decorator";
 
-export const parameters: Parameters = {
-  actions: { argTypesRegex: "^on[A-Z].*" },
-  apolloClient: {
-    // This workaround is required for storyshots (https://github.com/lifeiscontent/storybook-addon-apollo-client/issues/16).
-    MockedProvider: ({ children }: { children: React.ReactNode }) => children,
-  },
-  controls: {
-    matchers: {
-      color: /(background|color)$/i,
-      date: /Date$/,
-    },
-  },
-};
-
 export const decorators: Decorator[] = [
   (Story: () => JSX.Element) => (
     <>
-      <GlobalStyles />
+      <Global styles={globalStyles} />
       <Story />
     </>
   ),
@@ -32,30 +16,5 @@ export const decorators: Decorator[] = [
       <Story />
     </LogContextProvider>
   ),
-  (
-    Story,
-    {
-      parameters: {
-        apolloClient: { MockedProvider: _, ...rest },
-      },
-    },
-  ) => (
-    <MockedProvider {...rest}>
-      <Story />
-    </MockedProvider>
-  ),
   WithToastContext,
-  (Story: () => JSX.Element) => {
-    const routes = [
-      {
-        path: "/",
-        element: <Story />,
-        errorElement: <div>Failed to render component.</div>,
-      },
-    ];
-    const memoryRouter = createMemoryRouter(routes, {
-      initialEntries: ["/"],
-    });
-    return <RouterProvider router={memoryRouter} />;
-  },
 ];

apps/parsley/package.json

@@ -31,7 +31,7 @@
     "snapshot": "vitest run snapshot.test.ts",
     "start": "vite",
     "verify-backend": "./scripts/verify-backend.sh",
-    "storybook": "storybook dev -p 6006",
+    "storybook": "storybook dev -p 6007",
     "storybook:build": "env-cmd -e local -r .env-cmdrc.local.json storybook build",
     "test": "vitest --typecheck=false --exclude=src/snapshot.test.ts",
     "postversion": "scripts/push-version.sh"
@@ -81,24 +81,22 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-dropzone": "14.2.3",
-    "react-router-dom": "6.11.2",
+    "react-router-dom": "6.16.0",
     "react-virtuoso": "4.7.10",
     "xss": "1.0.15"
   },
   "devDependencies": {
     "@emotion/babel-plugin": "11.11.0",
     "@evg-ui/eslint-config": "*",
     "@evg-ui/lint-staged": "*",
+    "@evg-ui/storybook-addon": "*",
     "@graphql-codegen/cli": "5.0.2",
     "@graphql-codegen/typescript": "4.0.1",
     "@graphql-codegen/typescript-operations": "4.0.1",
     "@sentry/vite-plugin": "2.16.1",
-    "@storybook/addon-actions": "7.6.9",
-    "@storybook/addon-essentials": "7.6.9",
-    "@storybook/addon-interactions": "7.6.9",
-    "@storybook/addon-links": "8.1.1",
-    "@storybook/react": "7.6.9",
-    "@storybook/react-vite": "7.6.9",
+    "@storybook/addon-actions": "8.1.6",
+    "@storybook/react": "8.1.6",
+    "@storybook/react-vite": "8.1.6",
     "@storybook/testing-library": "0.2.2",
     "@styled/typescript-styled-plugin": "1.0.1",
     "@testing-library/jest-dom": "6.4.5",
@@ -124,8 +122,8 @@
     "replace-in-file": "7.1.0",
     "rollup-plugin-visualizer": "5.9.0",
     "serve": "14.2.1",
-    "storybook": "7.6.9",
-    "storybook-addon-apollo-client": "5.0.0",
+    "storybook": "8.1.6",
+    "storybook-addon-apollo-client": "7.3.0",
     "ts-node": "10.9.1",
     "typescript": "5.1.3",
     "vite": "5.2.11",

apps/parsley/src/components/Badge/TaskStatusBadge/TaskStatusBadge.stories.tsx

@@ -12,6 +12,7 @@ export const Default: CustomStoryObj<typeof TaskStatusBadge> = {
   argTypes: {
     status: {
       control: "select",
+      // @ts-expect-error: FIXME. This comment was added by an automated script.
       options: TaskStatus,
     },
   },

apps/parsley/src/components/Badge/TestStatusBadge/TestStatusBadge.stories.tsx

@@ -12,6 +12,7 @@ export const Default: CustomStoryObj<typeof TestStatusBadge> = {
   argTypes: {
     status: {
       control: "select",
+      // @ts-expect-error: FIXME. This comment was added by an automated script.
       options: TestStatus,
     },
   },

apps/parsley/src/components/Search/SearchBar/SearchBar.stories.tsx

@@ -10,6 +10,7 @@ export const Default: CustomStoryObj<typeof SearchBar> = {
   argTypes: {
     disabled: { control: "boolean", description: "Should disable input" },
     validator: {
+      // @ts-expect-error: FIXME. This comment was added by an automated script.
       control: "func",
       defaultValue: "() => true",
       description: "Function to validate input",
@@ -28,6 +29,7 @@ export const WithSearchSuggestions: CustomStoryObj<typeof SearchBar> = {
   argTypes: {
     disabled: { control: "boolean", description: "Should disable input" },
     validator: {
+      // @ts-expect-error: FIXME. This comment was added by an automated script.
       control: "func",
       defaultValue: "() => true",
       description: "Function to validate input",

apps/parsley/src/components/styles/GlobalStyles.tsx

@@ -10,8 +10,7 @@ const resetStyles = css`
   }
 `;
 
-const globalStyles = css`
-  ${fontStyles}
+export const globalStyles = css`
   ${resetStyles}
   background-color: white;
   body {
@@ -32,6 +31,13 @@ const globalStyles = css`
   }
 `;
 
-const GlobalStyles = () => <Global styles={globalStyles} />;
+const GlobalStyles = () => (
+  <Global
+    styles={css`
+      ${fontStyles}
+      ${globalStyles}
+    `}
+  />
+);
 
 export default GlobalStyles;

apps/parsley/src/snapshot.test.ts

@@ -1,9 +1,12 @@
-import { composeStories } from "@storybook/react";
+import { projectAnnotations } from "@evg-ui/storybook-addon";
+import { composeStories, setProjectAnnotations } from "@storybook/react";
 import { expect } from "vitest";
 import path from "path";
 import { act, render, stubGetClientRects } from "test_utils";
 import { CustomMeta, CustomStoryObj } from "test_utils/types";
-import * as projectAnnotations from "../.storybook/preview";
+import * as previewAnnotations from "../.storybook/preview";
+
+setProjectAnnotations([projectAnnotations, previewAnnotations]);
 
 type StoryFile = {
   default: CustomMeta<unknown>;
@@ -19,7 +22,7 @@ const compose = (
   entry: StoryFile,
 ): ReturnType<typeof composeStories<StoryFile>> => {
   try {
-    return composeStories(entry, projectAnnotations);
+    return composeStories(entry);
   } catch (e) {
     throw new Error(
       `There was an issue composing stories for the module: ${JSON.stringify(

apps/spruce/.gitignore

@@ -1,18 +1,10 @@
 # See https://help.github.com/ignore-files/ for more about ignoring files.
 
 # testing
-/coverage
 cypress/videos/
 cypress/screenshots/
 
-# production
-/build
-
-# storybook
-storybook-static
-
 # artifacts
-/bin
 /src/**/*.css
 
 #env variables