♻️ #4 - refactor: replace global decorator with smaller scoped decora…

…tors
maykinmedia · Jan 16, 2024 · 59687da · 59687da
1 parent 5ae8b15
commit 59687da
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 13 deletions.
diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
@@ -1,20 +1,7 @@
 import type { Preview } from "@storybook/react";
 import * as React from "react";
 
-import { Page } from "../src";
-
 const preview: Preview = {
-  decorators: [
-    (Story, { parameters }) => {
-      return parameters.ignoreGlobalDecorator ? (
-        <Story />
-      ) : (
-        <Page>
-          <Story />
-        </Page>
-      );
-    },
-  ],
   parameters: {
     actions: { argTypesRegex: "^on[A-Z].*" },
     controls: {

diff --git a/src/components/dropdown/dropdown.stories.tsx b/src/components/dropdown/dropdown.stories.tsx
@@ -4,12 +4,20 @@ import React from "react";
 
 import { Button, ButtonLink } from "../button";
 import { Outline } from "../icon";
+import { Page } from "../page";
 import { Toolbar } from "../toolbar";
 import { Dropdown } from "./dropdown";
 
 const meta = {
   title: "Controls/Dropdown",
   component: Dropdown,
+  decorators: [
+    (Story) => (
+      <Page>
+        <Story />
+      </Page>
+    ),
+  ],
   parameters: {
     layout: "fullscreen",
   },

diff --git a/src/components/navbar/navbar.stories.tsx b/src/components/navbar/navbar.stories.tsx
@@ -4,11 +4,19 @@ import React from "react";
 
 import { Button, ButtonLink } from "../button";
 import { Outline } from "../icon";
+import { Page } from "../page";
 import { Navbar } from "./navbar";
 
 const meta = {
   title: "Controls/Navbar",
   component: Navbar,
+  decorators: [
+    (Story) => (
+      <Page>
+        <Story />
+      </Page>
+    ),
+  ],
 } satisfies Meta<typeof Navbar>;
 
 export default meta;

diff --git a/src/components/toolbar/toolbar.stories.tsx b/src/components/toolbar/toolbar.stories.tsx
@@ -3,12 +3,20 @@ import React from "react";
 
 import { Button, ButtonLink } from "../button";
 import { Outline } from "../icon";
+import { Page } from "../page";
 import { A } from "../typography";
 import { Toolbar } from "./toolbar";
 
 const meta = {
   title: "Controls/Toolbar",
   component: Toolbar,
+  decorators: [
+    (Story) => (
+      <Page>
+        <Story />
+      </Page>
+    ),
+  ],
 } satisfies Meta<typeof Toolbar>;
 
 export default meta;