Merge pull request #6 from storybookjs/valentin/init-storybook-theme-…

…provider

Init Storybook Theme Provider

.storybook/preview.ts → .storybook/preview.tsx

@@ -1,4 +1,6 @@
 import type { Preview } from "@storybook/react";
+import { ThemeProvider, ensure, themes } from "@storybook/theming";
+import React from "react";
 
 const preview: Preview = {
   parameters: {
@@ -13,6 +15,13 @@ const preview: Preview = {
       },
     },
   },
+  decorators: [
+    (storyFn) => {
+      const theme = ensure(themes.light);
+
+      return <ThemeProvider theme={theme}>{storyFn()}</ThemeProvider>;
+    },
+  ],
 };
 
 export default preview;

package.json

@@ -60,6 +60,7 @@
     "@storybook/react": "^7.0.0",
     "@storybook/react-vite": "^7.0.0",
     "@storybook/testing-library": "^0.0.14-next.1",
+    "@storybook/theming": "^7.0.17",
     "@types/node": "^18.15.0",
     "@types/react": "^18.0.34",
     "@types/react-dom": "^18.2.4",

src/App.tsx

@@ -0,0 +1,12 @@
+import { ThemeProvider, ensure, themes } from "@storybook/theming";
+import React from "react";
+
+const theme = ensure(themes.light);
+
+export function App() {
+  return (
+    <ThemeProvider theme={theme}>
+      <div>Hello World</div>
+    </ThemeProvider>
+  );
+}

src/manager.tsx

@@ -1,5 +1,6 @@
 import ReactDOM from "react-dom";
 import React from "react";
+import { App } from "./App";
 
 // Add a new DOM element to document.body, where we will bootstrap our React app
 const domNode = document.createElement("div");
@@ -18,4 +19,4 @@ domNode.style.visibility = "hidden";
 document.body.appendChild(domNode);
 
 // Render the React app
-ReactDOM.render(<div>Hello World</div>, domNode);
+ReactDOM.render(<App />, domNode);

src/preview.ts

@@ -1,4 +1,6 @@
 import type { Renderer, ProjectAnnotations } from "@storybook/types";
+import { ThemeProvider, ensure, themes } from "@storybook/theming";
+import React from "react";
 
 /**
  * Note: if you want to use JSX in this file, rename it to `preview.tsx`

yarn.lock

@@ -2229,6 +2229,13 @@
   dependencies:
     "@storybook/global" "^5.0.0"
 
+"@storybook/client-logger@7.0.17":
+  version "7.0.17"
+  resolved "https://registry.yarnpkg.com/@storybook/client-logger/-/client-logger-7.0.17.tgz#7acd3d0e467d6a69f3fc6fbd5b157a32d475c11d"
+  integrity sha512-1u313wdESQqN08DLfdB1tNMdsk3JExWU1ZlViCwK8cFPZaWgjts1vLcilWtYJBK28yEO/vS4H+lgwSm+oVQXVA==
+  dependencies:
+    "@storybook/global" "^5.0.0"
+
 "@storybook/codemod@7.0.0":
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/@storybook/codemod/-/codemod-7.0.0.tgz#0dcc824ee5ba20542fc3d5c1f944c3d7c993b922"
@@ -2613,6 +2620,16 @@
     "@storybook/global" "^5.0.0"
     memoizerific "^1.11.3"
 
+"@storybook/theming@^7.0.17":
+  version "7.0.17"
+  resolved "https://registry.yarnpkg.com/@storybook/theming/-/theming-7.0.17.tgz#2bb6154f558b08c21d924cd80cdf0c170e93c6c4"
+  integrity sha512-I0MrZorCGJ1kQmwhsxAsNy02gXRiUmQKuoLNQwitwx8ridzA+ukkkBIr6M38jwA2URaO53AvlGfD/664ZdM4XA==
+  dependencies:
+    "@emotion/use-insertion-effect-with-fallbacks" "^1.0.0"
+    "@storybook/client-logger" "7.0.17"
+    "@storybook/global" "^5.0.0"
+    memoizerific "^1.11.3"
+
 "@storybook/types@7.0.0":
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/@storybook/types/-/types-7.0.0.tgz#01e0a6bdd94207ea2316dc126dd780438fcb1f2c"