Merge pull request #2 from riverqueue/npm-dep-upgrades

npm dep upgrades, fix storybook
riverqueue · May 8, 2024 · 990912f · 990912f
2 parents 1b41c20 + ed1f40f
commit 990912f
Show file tree

Hide file tree

Showing 5 changed files with 8,267 additions and 10,108 deletions.
diff --git a/ui/.storybook/main.ts b/ui/.storybook/main.ts
@@ -8,8 +8,11 @@ const config: StorybookConfig = {
     "@storybook/addon-onboarding",
     "@storybook/addon-interactions",
     "@storybook/addon-themes",
-    "@storybook/themes",
+    "@chromatic-com/storybook"
   ],
+  core: {
+    disableTelemetry: true,
+  },
   framework: {
     name: "@storybook/react-vite",
     options: {},

diff --git a/ui/.storybook/preview.tsx b/ui/.storybook/preview.tsx
@@ -1,11 +1,57 @@
+import React from "react";
 import type { Preview } from "@storybook/react";
 import { ThemeProvider } from "next-themes";
 import { ReactRenderer } from "@storybook/react";
 import { withThemeByClassName } from "@storybook/addon-themes";
+import type { PartialStoryFn, StoryContext } from "@storybook/types";
+import {
+  createMemoryHistory,
+  createRootRoute,
+  createRoute,
+  createRouter,
+  RouterProvider,
+} from "@tanstack/react-router";
 
 import "../src/global-type-overrides";
 import "../src/index.css";
 
+function withRouter(Story: PartialStoryFn, { parameters }: StoryContext) {
+  const {
+    initialEntries = ["/"],
+    initialIndex,
+    routes = ["/"],
+  } = parameters?.router || {};
+
+  const rootRoute = createRootRoute();
+
+  const children = routes.map((path) =>
+    createRoute({
+      path,
+      getParentRoute: () => rootRoute,
+      component: Story,
+    })
+  );
+
+  rootRoute.addChildren(children);
+
+  const router = createRouter({
+    history: createMemoryHistory({ initialEntries, initialIndex }),
+    routeTree: rootRoute,
+  });
+
+  return <RouterProvider router={router} />;
+}
+
+declare module "@storybook/types" {
+  interface Parameters {
+    router?: {
+      initialEntries?: string[];
+      initialIndex?: number;
+      routes?: string[];
+    };
+  }
+}
+
 const preview: Preview = {
   parameters: {
     actions: { argTypesRegex: "^on[A-Z].*" },
@@ -18,6 +64,7 @@ const preview: Preview = {
   },
 
   decorators: [
+    withRouter,
     withThemeByClassName<ReactRenderer>({
       themes: {
         light: "light",