feat: Render initial Badge in dedicated stories

.storybook/ThemeProvider.tsx

@@ -0,0 +1,73 @@
+import React, { Fragment } from 'react'
+import {
+  convert,
+  createReset,
+  Global,
+  styled,
+  ThemeProvider,
+  themes,
+} from '@storybook/theming'
+
+const ThemeBlock = styled.div<{ side: 'left' | 'right'; layout: string }>(
+  {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: '50vw',
+    width: '50vw',
+    height: '100vh',
+    bottom: 0,
+    overflow: 'auto',
+  },
+  ({ layout }) => ({
+    padding: layout === 'fullscreen' ? 0 : '1rem',
+    display: layout === 'centered' ? 'flex' : 'block',
+    alignItems: 'center',
+    justifyContent: 'center',
+  }),
+  ({ theme }) => ({
+    background: theme.background.content,
+    color: theme.color.defaultText,
+  }),
+  ({ side }) =>
+    side === 'left'
+      ? {
+          left: 0,
+          right: '50vw',
+        }
+      : {
+          right: 0,
+          left: '50vw',
+        },
+)
+
+const AddonThemeProvider = (StoryFn, { context: { viewMode }, parameters }) => {
+  if (viewMode === 'docs') {
+    return (
+      <ThemeProvider theme={convert(themes.dark)}>
+        <Global styles={createReset} />
+        <StoryFn />
+      </ThemeProvider>
+    )
+  }
+
+  return (
+    <Fragment>
+      <ThemeProvider theme={convert(themes.light)}>
+        <Global styles={createReset} />
+      </ThemeProvider>
+      <ThemeProvider theme={convert(themes.light)}>
+        <ThemeBlock side="left" data-side="left" layout={parameters.layout}>
+          <StoryFn />
+        </ThemeBlock>
+      </ThemeProvider>
+      <ThemeProvider theme={convert(themes.dark)}>
+        <ThemeBlock side="right" data-side="right" layout={parameters.layout}>
+          <StoryFn />
+        </ThemeBlock>
+      </ThemeProvider>
+    </Fragment>
+  )
+}
+
+export default AddonThemeProvider

.storybook/main.ts

@@ -3,12 +3,7 @@ import type { StorybookConfig } from '@storybook/react-vite'
 const config: StorybookConfig = {
   stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
 
-  addons: [
-    '@storybook/addon-links',
-    '@storybook/addon-essentials',
-    '@storybook/addon-interactions',
-    './local-preset.js',
-  ],
+  addons: ['@storybook/addon-essentials', './local-preset.js'],
   framework: {
     name: '@storybook/react-vite',
     options: {},

.storybook/preview.ts

@@ -1,4 +1,9 @@
 import type { Preview } from '@storybook/react'
+import { themes } from '@storybook/theming'
+
+import ThemeProvider from './ThemeProvider'
+
+export const decorators = [ThemeProvider]
 
 const preview: Preview = {
   parameters: {
@@ -8,9 +13,13 @@ const preview: Preview = {
         date: /Date$/,
       },
     },
+    docs: {
+      theme: themes.dark,
+      toc: true,
+    },
   },
   initialGlobals: {
-    background: { value: 'light' },
+    background: { value: 'dark' },
   },
 }
 

package.json

@@ -24,10 +24,7 @@
       "types": "./dist/index.d.ts",
       "import": "./dist/preview.js",
       "require": "./dist/preview.cjs"
-    },
-    "./preset": "./dist/preset.cjs",
-    "./manager": "./dist/manager.js",
-    "./package.json": "./package.json"
+    }
   },
   "files": [
     "dist/**/*",
@@ -44,9 +41,6 @@
     ],
     "previewEntries": [
       "src/preview.ts"
-    ],
-    "nodeEntries": [
-      "src/preset.ts"
     ]
   },
   "scripts": {
@@ -104,6 +98,7 @@
     "husky": "^8.0.3",
     "lint-staged": "^13.3.0",
     "node^22": "link:@types/node^22",
+    "npm-run-all": "^4.1.5",
     "prettier": "^3.3.3",
     "prompts": "^2.4.2",
     "react": "^18.3.1",