Merge pull request #2511 from adevinta/sb-8.4

docs: storybook 8.4
adevinta · Nov 18, 2024 · bfc95d2 · bfc95d2
2 parents e8eb31d + 44ea112
commit bfc95d2
Show file tree

Hide file tree

Showing 5 changed files with 382 additions and 1,125 deletions.
diff --git a/.storybook/main.js b/.storybook/main.js
@@ -1,3 +1,4 @@
+import { dirname, join } from 'path'
 const turbosnap = require('vite-plugin-turbosnap')
 const { mergeConfig } = require('vite')
 
@@ -27,26 +28,34 @@ module.exports = {
     '../packages/**/*.doc.mdx',
     '../packages/**/*.stories.tsx',
   ],
-  addons: ['@storybook/addon-links', {
-    name: '@storybook/addon-docs',
-    options: {
-      mdxPluginOptions: {
-        mdxCompileOptions: {
-          remarkPlugins: [remarkGfm],
+  addons: [
+    getAbsolutePath('@storybook/addon-links'),
+    getAbsolutePath('storybook-addon-tag-badges'),
+    {
+      name: '@storybook/addon-docs',
+      options: {
+        mdxPluginOptions: {
+          mdxCompileOptions: {
+            remarkPlugins: [remarkGfm],
+          },
         },
       },
     },
-  }, {
-    name: '@storybook/addon-essentials',
-    options: {
-      backgrounds: false,
-      actions: false,
-      controls: false,
+    {
+      name: '@storybook/addon-essentials',
+      options: {
+        backgrounds: false,
+        actions: false,
+        controls: false,
+      },
     },
-  }, '@storybook/addon-interactions', '@storybook/addon-a11y', '@chromatic-com/storybook'],
+    getAbsolutePath('@storybook/addon-interactions'),
+    getAbsolutePath('@storybook/addon-a11y'),
+    getAbsolutePath('@chromatic-com/storybook'),
+  ],
   staticDirs: ['../public'],
   framework: {
-    name: '@storybook/react-vite',
+    name: getAbsolutePath('@storybook/react-vite'),
     options: {},
   },
   typescript: {
@@ -64,6 +73,10 @@ module.exports = {
     },
   },
   docs: {
-    docsMode: true
+    docsMode: true,
   },
 }
+
+function getAbsolutePath(value) {
+  return dirname(require.resolve(join(value, 'package.json')))
+}
diff --git a/.storybook/manager.js b/.storybook/manager.js
@@ -1,4 +1,3 @@
-
 import { addons, types } from '@storybook/manager-api'
 import { getTheme } from './theme/getTheme.js'
 import { SkinlessThemeSwitcherHandler } from './addons/SkinlessThemeSwitcherHandler.jsx'
@@ -7,8 +6,8 @@ addons.register('skinless-theme-switcher-handler', () => {
   addons.add('skinless-theme-switcher-handler/tool', {
     type: types.TOOL,
     render: SkinlessThemeSwitcherHandler,
-  });
-});
+  })
+})
 
 addons.setConfig({
   theme: getTheme({ base: 'light' }),

diff --git a/.storybook/preview.jsx b/.storybook/preview.jsx
@@ -68,8 +68,6 @@ export const parameters = {
   },
 }
 
-
-
 const preview = {
   globalTypes: {
     theme: {
@@ -89,7 +87,7 @@ const preview = {
   initialGlobals: {
     theme: 'light',
   },
-};
+}
 
 export default preview
 
@@ -98,9 +96,9 @@ export const decorators = [
   (storyFn, { globals }) => {
     const themeKey = globals.theme
 
-    const htmlElement = document.querySelector("html")
+    const htmlElement = document.querySelector('html')
     if (!htmlElement) return
-    htmlElement.setAttribute("data-theme", themeKey)
+    htmlElement.setAttribute('data-theme', themeKey)
 
     return storyFn()
   },
@@ -129,4 +127,4 @@ export const decorators = [
     )
   },
 ]
-export const tags = ['autodocs'];
+export const tags = []