Make changes from feedback

code/addons/essentials/package.json

@@ -173,7 +173,9 @@
       "./src/outline/preview.ts",
       "./src/outline/manager.ts",
       "./src/toolbars/manager.ts",
-      "./src/viewport/manager.ts"
+      "./src/viewport/manager.ts",
+      "./src/themes/manager.ts",
+      "./src/themes/preview.ts"
     ],
     "platform": "node"
   },

code/addons/themes/docs/getting-started/bootstrap.md

@@ -46,6 +46,8 @@ module.exports = {
 To give your stories access to Bootstrap's styles and JavaScript, import them into your `.storybook/preview.js` file.
 
 ```diff
+-import { Preview } from "@storybook/your-framework";
++import { Preview, Renderer } from "@storybook/your-framework";
 +import "bootstrap/dist/css/bootstrap.min.css";
 +import "bootstrap/dist/js/bootstrap.bundle";
 

code/addons/themes/docs/getting-started/emotion.md

@@ -48,6 +48,8 @@ Finally, provide your theme(s) and global styles component to your stories with
 Make the following changes to your `.storybook/preview.js`
 
 ```diff
+-import { Preview } from "@storybook/your-framework";
++import { Preview, Renderer } from "@storybook/your-framework";
 +import { withThemeFromJSXProvider } from "@storybook/addon-themes";
 +import { ThemeProvider } from '@emotion/react';
 +import { GlobalStyles, lightTheme, darkTheme } from "../src/themes"; // import your custom theme configs

code/addons/themes/docs/getting-started/material-ui.md

@@ -75,6 +75,8 @@ While Material UI comes with a default theme that works out of the box. You can
 Make the following changes to your `.storybook/preview.js`
 
 ```diff
+-import { Preview } from "@storybook/your-framework";
++import { Preview, Renderer } from "@storybook/your-framework";
 +import { withThemeFromJSXProvider } from "@storybook/addon-themes";
 +import { CssBaseline, ThemeProvider } from "@mui/material";
 +import { lightTheme, darkTheme } from "../src/themes"; // import your custom theme configs
@@ -86,27 +88,20 @@ import "@fontsource/roboto/500.css";
 import "@fontsource/roboto/700.css";
 import "@fontsource/material-icons";
 
-export const parameters = {
-  actions: { argTypesRegex: "^on[A-Z].*" },
-  controls: {
-    expanded: true,
-    hideNoControlsWarning: true,
-    matchers: {
-      color: /(background|color)$/i,
-      date: /Date$/,
-    },
-  },
+const preview: Preview = {
+  parameters: { /* ... */ },
++ decorators: [
++   withThemeFromJSXProvider<Renderer>({
++     themes: {
++       light: lightTheme,
++       dark: darkTheme,
++     },
++     defaultTheme: "light",
++     Provider: ThemeProvider,
++     GlobalStyles: CssBaseline,
++   }),
++ ],
 };
 
-+export const decorators = [
-+  withThemeFromJSXProvider({
-+    themes: {
-+      light: lightTheme,
-+      dark: darkTheme,
-+    },
-+    defaultTheme: "light",
-+    Provider: ThemeProvider,
-+    GlobalStyles: CssBaseline,
-+  }),
-+];
+export default preview;
 ```

code/addons/themes/docs/getting-started/styled-components.md

@@ -48,32 +48,26 @@ Finally, provide your theme(s) and global styles component to your stories with
 Make the following changes to your `.storybook/preview.js`
 
 ```diff
+-import { Preview } from "@storybook/your-framework";
++import { Preview, Renderer } from "@storybook/your-framework";
 +import { withThemeFromJSXProvider } from "@storybook/addon-themes";
 +import { ThemeProvider } from 'styled-components';
 +import { GlobalStyles, lightTheme, darkTheme } from "../src/themes"; // import your custom theme configs
 
-
-export const parameters = {
-  actions: { argTypesRegex: "^on[A-Z].*" },
-  controls: {
-    expanded: true,
-    hideNoControlsWarning: true,
-    matchers: {
-      color: /(background|color)$/i,
-      date: /Date$/,
-    },
-  },
+const preview: Preview = {
+  parameters: { /* ... */ },
++ decorators: [
++   withThemeFromJSXProvider<Renderer>({
++     themes: {
++       light: lightTheme,
++       dark: darkTheme,
++     },
++     defaultTheme: "light",
++     Provider: ThemeProvider,
++     GlobalStyles: GlobalStyles,
++   }),
++ ],
 };
 
-+export const decorators = [
-+  withThemeFromJSXProvider({
-+    themes: {
-+      light: lightTheme,
-+      dark: darkTheme,
-+    },
-+    defaultTheme: "light",
-+    Provider: ThemeProvider,
-+    GlobalStyles: GlobalStyles,
-+  }),
-+];
+export default preview;
 ```

code/addons/themes/docs/getting-started/tailwind.md

@@ -68,6 +68,8 @@ Tailwind supports light and dark color modes out of the box. These modes can be
 To enable switching between these modes in a click for your stories, use our `withThemeByClassName` decorator by adding the following code to your `.storybook/preview.js` file.
 
 ```diff
+-import { Preview } from "@storybook/your-framework";
++import { Preview, Renderer } from "@storybook/your-framework";
 +import { withThemeByClassName } from "@storybook/addon-themes";
 import "../src/index.css";
 
@@ -100,6 +102,8 @@ export const parameters = {
 If you've configured Tailwind to toggle themes with a data attribute, use our `withThemeByDataAttribute` decorator by adding the following code to your `.storybook/preview.js` file.
 
 ```diff
+-import { Preview } from "@storybook/your-framework";
++import { Preview, Renderer } from "@storybook/your-framework";
 +import { withThemeByDataAttribute } from "@storybook/addon-themes";
 import "../src/index.css";
 

code/addons/themes/src/decorators/class-name.decorator.tsx

@@ -28,6 +28,10 @@ export const withThemeByClassName = <TRenderer extends Renderer = Renderer>({
       const selectedThemeName = themeOverride || selected || defaultTheme;
       const parentElement = document.querySelector(parentSelector);
 
+      if (!parentElement) {
+        return;
+      }
+
       Object.entries(themes)
         .filter(([themeName]) => themeName !== selectedThemeName)
         .forEach(([themeName, className]) => {

code/addons/themes/src/decorators/data-attribute.decorator.tsx

@@ -27,7 +27,9 @@ export const withThemeByDataAttribute = <TRenderer extends Renderer = Renderer>(
       const parentElement = document.querySelector(parentSelector);
       const themeKey = themeOverride || selected || defaultTheme;
 
-      parentElement.setAttribute(attributeName, themes[themeKey]);
+      if (parentElement) {
+        parentElement.setAttribute(attributeName, themes[themeKey]);
+      }
     }, [themeOverride, selected, parentSelector, attributeName]);
 
     return storyFn();

scripts/verdaccio.yaml

@@ -55,6 +55,10 @@ packages:
     access: $all
     publish: $all
     proxy: npmjs
+  '@storybook/addon-styling':
+    access: $all
+    publish: $all
+    proxy: npmjs
   '@storybook/addon-svelte-csf':
     access: $all
     publish: $all