fix: solve issue with storybook preview (#326)

Signed-off-by: David van der Spek <[email protected]>
pluralsh · Nov 18, 2022 · 6ee29f9 · 6ee29f9
1 parent 0bd5950
commit 6ee29f9
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 11 deletions.
diff --git a/.storybook/main.ts b/.storybook/main.ts
@@ -1,14 +1,24 @@
-module.exports = {
+import type { StorybookConfig } from '@storybook/builder-vite';
+
+const config: StorybookConfig = {
   stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
-  addons: ['@storybook/addon-docs', '@storybook/addon-links', '@storybook/addon-essentials', '@storybook/addon-interactions', '@storybook/preset-create-react-app'],
+  addons: [
+    '@storybook/addon-docs',
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-interactions',
+    '@storybook/preset-create-react-app',
+  ],
   framework: {
     name: '@storybook/react-vite',
     options: {}
   },
-  core: {},
-  docsPage: {
-    docs: 'automatic'
+  core: {
+    builder: '@storybook/builder-vite',
   },
+  // docsPage: {
+  //   docs: 'automatic',
+  // },
   async viteFinal(config) {
     return {
       ...config,
@@ -17,7 +27,7 @@ module.exports = {
         jsxInject: `import React from 'react'`,
       },
       rollupOptions: {
-        ...config.rollupOptions,
+        ...config,
         // Externalize deps that shouldn't be bundled
         external: ["react", "react-dom"],
         output: {
@@ -31,3 +41,5 @@ module.exports = {
     };
   },
 };
+
+export default config;
diff --git a/package.json b/package.json
@@ -68,6 +68,7 @@
     "@storybook/addon-essentials": "7.0.0-alpha.50",
     "@storybook/addon-interactions": "7.0.0-alpha.50",
     "@storybook/addon-links": "7.0.0-alpha.50",
+    "@storybook/builder-vite": "7.0.0-alpha.50",
     "@storybook/node-logger": "7.0.0-alpha.50",
     "@storybook/preset-create-react-app": "4.1.2",
     "@storybook/react": "7.0.0-alpha.50",

diff --git a/public/index.html b/public/index.html
@@ -2,25 +2,25 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <link rel="icon" href="/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <meta
       name="description"
       content="Web site created using create-react-app"
     />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <link rel="apple-touch-icon" href="/logo192.png" />
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <link rel="manifest" href="/manifest.json" />
     <!--
-      Notice the use of %PUBLIC_URL% in the tags above.
+      Notice the use of  in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
       Only files inside the `public` folder can be referenced from the HTML.
 
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      Unlike "/favicon.ico" or "favicon.ico", "/favicon.ico" will
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->

diff --git a/yarn.lock b/yarn.lock
@@ -3344,6 +3344,7 @@ __metadata:
     "@storybook/addon-essentials": 7.0.0-alpha.50
     "@storybook/addon-interactions": 7.0.0-alpha.50
     "@storybook/addon-links": 7.0.0-alpha.50
+    "@storybook/builder-vite": 7.0.0-alpha.50
     "@storybook/node-logger": 7.0.0-alpha.50
     "@storybook/preset-create-react-app": 4.1.2
     "@storybook/react": 7.0.0-alpha.50