refactor(storybook): re-use remix stub

digitalservicebund · Nov 16, 2023 · c21d5c9 · c21d5c9
1 parent d9f9b1f
commit c21d5c9
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 18 deletions.
diff --git a/.storybook/remixContext.ts b/.storybook/remixContext.ts
@@ -0,0 +1,6 @@
+import { createRemixStub } from "@remix-run/testing";
+import { ComponentType, createElement } from "react";
+
+export function remixContext(component: ComponentType) {
+  return createElement(createRemixStub([{ path: "/", Component: component }]));
+}
diff --git a/stories/Checkbox.stories.tsx b/stories/Checkbox.stories.tsx
@@ -1,7 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import Checkbox from "../app/components/inputs/Checkbox";
-import { createRemixStub } from "@remix-run/testing";
-import { createElement } from "react";
+import { remixContext } from "../.storybook/remixContext";
 const component = Checkbox;
 
 const meta = {
@@ -18,9 +17,6 @@ export const Default = {
     label: "label",
     formId: "formId",
   },
-  decorators: [
-    (Story) =>
-      createElement(createRemixStub([{ path: "/", Component: Story }])),
-  ],
+  decorators: [(Story) => remixContext(Story)],
 } satisfies StoryObj<typeof meta>;
 export default meta;
diff --git a/stories/UserFeedback.stories.tsx b/stories/UserFeedback.stories.tsx
@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import UserFeedback, { BannerState } from "../app/components/UserFeedback";
-import { createRemixStub } from "@remix-run/testing";
+import { remixContext } from "../.storybook/remixContext";
 
 const meta = {
   title: "Content/UserFeedback",
@@ -32,15 +32,5 @@ export const Example: StoryObj<typeof meta> = {
       text: "Ihr Feedback hilft uns, diese Seite für alle Nutzenden zu verbessern!",
     },
   },
-  decorators: [
-    (Story) => {
-      const RemixStub = createRemixStub([
-        {
-          path: "/",
-          Component: Story,
-        },
-      ]);
-      return <RemixStub />;
-    },
-  ],
+  decorators: [(Story) => remixContext(Story)],
 };