@storybook/addon-themes 0.0.0-pr-24271-sha-4a56eddc → 0.0.0-pr-24844-sha-520c653e

package/README.md

@@ -1,8 +1,8 @@
-# @storybook/addon-themes
+# `@storybook/addon-themes
 
 Storybook Addon Themes can be used which between multiple themes for components inside the preview in [Storybook](https://storybook.js.org).
 
-![React Storybook Screenshot](https://user-images.githubusercontent.com/18172605/274302488-77a39112-cdbe-4d16-9966-0d8e9e7e3399.gif)
+![React Storybook Screenshot](https://user-images.githubusercontent.com/42671/98158421-dada2300-1ea8-11eb-8619-af1e7018e1ec.png)
 
 ## Usage
 

package/dist/manager.js

@@ -1 +1 @@
-"use strict";var __create=Object.create;var __defProp=Object.defineProperty;var __getOwnPropDesc=Object.getOwnPropertyDescriptor;var __getOwnPropNames=Object.getOwnPropertyNames;var __getProtoOf=Object.getPrototypeOf,__hasOwnProp=Object.prototype.hasOwnProperty;var __copyProps=(to,from,except,desc)=>{if(from&&typeof from=="object"||typeof from=="function")for(let key of __getOwnPropNames(from))!__hasOwnProp.call(to,key)&&key!==except&&__defProp(to,key,{get:()=>from[key],enumerable:!(desc=__getOwnPropDesc(from,key))||desc.enumerable});return to};var __toESM=(mod,isNodeMode,target)=>(target=mod!=null?__create(__getProtoOf(mod)):{},__copyProps(isNodeMode||!mod||!mod.__esModule?__defProp(target,"default",{value:mod,enumerable:!0}):target,mod));var import_manager_api2=require("@storybook/manager-api");var PARAM_KEY="themes",ADDON_ID=`storybook/${PARAM_KEY}}`;var THEME_SWITCHER_ID=`${ADDON_ID}/theme-switcher`,DEFAULT_ADDON_STATE={themesList:[],themeDefault:void 0},DEFAULT_THEME_PARAMETERS={},THEMING_EVENTS={REGISTER_THEMES:`${ADDON_ID}/REGISTER_THEMES`};var import_react=__toESM(require("react")),import_manager_api=require("@storybook/manager-api"),import_theming=require("@storybook/theming"),import_components=require("@storybook/components"),import_icons=require("@storybook/icons");var IconButtonLabel=import_theming.styled.div(({theme})=>({fontSize:theme.typography.size.s2-1,marginLeft:10})),hasMultipleThemes=themesList=>themesList.length>1,ThemeSwitcher=()=>{let{themeOverride}=(0,import_manager_api.useParameter)(PARAM_KEY,DEFAULT_THEME_PARAMETERS),[{theme:selected},updateGlobals]=(0,import_manager_api.useGlobals)(),[{themesList,themeDefault},updateState]=(0,import_manager_api.useAddonState)(THEME_SWITCHER_ID,DEFAULT_ADDON_STATE);(0,import_manager_api.useChannel)({[THEMING_EVENTS.REGISTER_THEMES]:({themes,defaultTheme})=>{updateState(state=>({...state,themesList:themes,themeDefault:defaultTheme}))}});let label=(0,import_react.useMemo)(()=>{if(themeOverride)return import_react.default.createElement(import_react.default.Fragment,null,"Story override");let themeName=selected||themeDefault;return themeName&&import_react.default.createElement(import_react.default.Fragment,null,`${themeName} theme`)},[themeOverride,themeDefault,selected]);return hasMultipleThemes(themesList)?import_react.default.createElement(import_react.Fragment,null,import_react.default.createElement(import_components.WithTooltip,{placement:"top",trigger:"click",closeOnClick:!0,tooltip:({onHide})=>import_react.default.createElement(import_components.TooltipLinkList,{links:themesList.map(theme=>({id:theme,title:theme,active:selected===theme,onClick:()=>{updateGlobals({theme}),onHide()}}))})},import_react.default.createElement(import_components.IconButton,{key:THEME_SWITCHER_ID,active:!themeOverride,title:"Theme"},import_react.default.createElement(import_icons.PaintBrushIcon,null),label&&import_react.default.createElement(IconButtonLabel,null,label)))):null};import_manager_api2.addons.register(ADDON_ID,()=>{import_manager_api2.addons.add(THEME_SWITCHER_ID,{title:"Themes",type:import_manager_api2.types.TOOL,match:({viewMode})=>!!(viewMode&&viewMode.match(/^(story|docs)$/)),render:ThemeSwitcher,paramKey:PARAM_KEY})});
+"use strict";var __create=Object.create;var __defProp=Object.defineProperty;var __getOwnPropDesc=Object.getOwnPropertyDescriptor;var __getOwnPropNames=Object.getOwnPropertyNames;var __getProtoOf=Object.getPrototypeOf,__hasOwnProp=Object.prototype.hasOwnProperty;var __copyProps=(to,from,except,desc)=>{if(from&&typeof from=="object"||typeof from=="function")for(let key of __getOwnPropNames(from))!__hasOwnProp.call(to,key)&&key!==except&&__defProp(to,key,{get:()=>from[key],enumerable:!(desc=__getOwnPropDesc(from,key))||desc.enumerable});return to};var __toESM=(mod,isNodeMode,target)=>(target=mod!=null?__create(__getProtoOf(mod)):{},__copyProps(isNodeMode||!mod||!mod.__esModule?__defProp(target,"default",{value:mod,enumerable:!0}):target,mod));var import_manager_api2=require("@storybook/manager-api");var PARAM_KEY="themes",ADDON_ID=`storybook/${PARAM_KEY}}`;var THEME_SWITCHER_ID=`${ADDON_ID}/theme-switcher`,DEFAULT_ADDON_STATE={themesList:[],themeDefault:void 0},DEFAULT_THEME_PARAMETERS={},THEMING_EVENTS={REGISTER_THEMES:`${ADDON_ID}/REGISTER_THEMES`};var import_react=__toESM(require("react")),import_manager_api=require("@storybook/manager-api"),import_theming=require("@storybook/theming"),import_components=require("@storybook/components");var IconButtonLabel=import_theming.styled.div(({theme})=>({fontSize:theme.typography.size.s2-1,marginLeft:10})),hasMultipleThemes=themesList=>themesList.length>1,ThemeSwitcher=()=>{let{themeOverride}=(0,import_manager_api.useParameter)(PARAM_KEY,DEFAULT_THEME_PARAMETERS),[{theme:selected},updateGlobals]=(0,import_manager_api.useGlobals)(),[{themesList,themeDefault},updateState]=(0,import_manager_api.useAddonState)(THEME_SWITCHER_ID,DEFAULT_ADDON_STATE);(0,import_manager_api.useChannel)({[THEMING_EVENTS.REGISTER_THEMES]:({themes,defaultTheme})=>{updateState(state=>({...state,themesList:themes,themeDefault:defaultTheme}))}});let label=(0,import_react.useMemo)(()=>{if(themeOverride)return import_react.default.createElement(import_react.default.Fragment,null,"Story override");let themeName=selected||themeDefault;return themeName&&import_react.default.createElement(import_react.default.Fragment,null,`${themeName} theme`)},[themeOverride,themeDefault,selected]);return hasMultipleThemes(themesList)?import_react.default.createElement(import_react.Fragment,null,import_react.default.createElement(import_components.WithTooltip,{placement:"top",trigger:"click",closeOnClick:!0,tooltip:({onHide})=>import_react.default.createElement(import_components.TooltipLinkList,{links:themesList.map(theme=>({id:theme,title:theme,active:selected===theme,onClick:()=>{updateGlobals({theme}),onHide()}}))})},import_react.default.createElement(import_components.IconButton,{key:THEME_SWITCHER_ID,active:!themeOverride,title:"Theme"},import_react.default.createElement(import_components.Icons,{icon:"paintbrush"}),label&&import_react.default.createElement(IconButtonLabel,null,label)))):null};import_manager_api2.addons.register(ADDON_ID,()=>{import_manager_api2.addons.add(THEME_SWITCHER_ID,{title:"Themes",type:import_manager_api2.types.TOOL,match:({viewMode})=>!!(viewMode&&viewMode.match(/^(story|docs)$/)),render:ThemeSwitcher,paramKey:PARAM_KEY})});

package/dist/manager.mjs

@@ -2,7 +2,6 @@ import { ADDON_ID, THEME_SWITCHER_ID, PARAM_KEY, DEFAULT_THEME_PARAMETERS, DEFAU
 import { addons, types, useParameter, useGlobals, useAddonState, useChannel } from '@storybook/manager-api';
 import React, { useMemo, Fragment } from 'react';
 import { styled } from '@storybook/theming';
-import { WithTooltip, TooltipLinkList, IconButton } from '@storybook/components';
-import { PaintBrushIcon } from '@storybook/icons';
+import { WithTooltip, TooltipLinkList, IconButton, Icons } from '@storybook/components';
 
-var IconButtonLabel=styled.div(({theme})=>({fontSize:theme.typography.size.s2-1,marginLeft:10})),hasMultipleThemes=themesList=>themesList.length>1,ThemeSwitcher=()=>{let{themeOverride}=useParameter(PARAM_KEY,DEFAULT_THEME_PARAMETERS),[{theme:selected},updateGlobals]=useGlobals(),[{themesList,themeDefault},updateState]=useAddonState(THEME_SWITCHER_ID,DEFAULT_ADDON_STATE);useChannel({[THEMING_EVENTS.REGISTER_THEMES]:({themes,defaultTheme})=>{updateState(state=>({...state,themesList:themes,themeDefault:defaultTheme}));}});let label=useMemo(()=>{if(themeOverride)return React.createElement(React.Fragment,null,"Story override");let themeName=selected||themeDefault;return themeName&&React.createElement(React.Fragment,null,`${themeName} theme`)},[themeOverride,themeDefault,selected]);return hasMultipleThemes(themesList)?React.createElement(Fragment,null,React.createElement(WithTooltip,{placement:"top",trigger:"click",closeOnClick:!0,tooltip:({onHide})=>React.createElement(TooltipLinkList,{links:themesList.map(theme=>({id:theme,title:theme,active:selected===theme,onClick:()=>{updateGlobals({theme}),onHide();}}))})},React.createElement(IconButton,{key:THEME_SWITCHER_ID,active:!themeOverride,title:"Theme"},React.createElement(PaintBrushIcon,null),label&&React.createElement(IconButtonLabel,null,label)))):null};addons.register(ADDON_ID,()=>{addons.add(THEME_SWITCHER_ID,{title:"Themes",type:types.TOOL,match:({viewMode})=>!!(viewMode&&viewMode.match(/^(story|docs)$/)),render:ThemeSwitcher,paramKey:PARAM_KEY});});
+var IconButtonLabel=styled.div(({theme})=>({fontSize:theme.typography.size.s2-1,marginLeft:10})),hasMultipleThemes=themesList=>themesList.length>1,ThemeSwitcher=()=>{let{themeOverride}=useParameter(PARAM_KEY,DEFAULT_THEME_PARAMETERS),[{theme:selected},updateGlobals]=useGlobals(),[{themesList,themeDefault},updateState]=useAddonState(THEME_SWITCHER_ID,DEFAULT_ADDON_STATE);useChannel({[THEMING_EVENTS.REGISTER_THEMES]:({themes,defaultTheme})=>{updateState(state=>({...state,themesList:themes,themeDefault:defaultTheme}));}});let label=useMemo(()=>{if(themeOverride)return React.createElement(React.Fragment,null,"Story override");let themeName=selected||themeDefault;return themeName&&React.createElement(React.Fragment,null,`${themeName} theme`)},[themeOverride,themeDefault,selected]);return hasMultipleThemes(themesList)?React.createElement(Fragment,null,React.createElement(WithTooltip,{placement:"top",trigger:"click",closeOnClick:!0,tooltip:({onHide})=>React.createElement(TooltipLinkList,{links:themesList.map(theme=>({id:theme,title:theme,active:selected===theme,onClick:()=>{updateGlobals({theme}),onHide();}}))})},React.createElement(IconButton,{key:THEME_SWITCHER_ID,active:!themeOverride,title:"Theme"},React.createElement(Icons,{icon:"paintbrush"}),label&&React.createElement(IconButtonLabel,null,label)))):null};addons.register(ADDON_ID,()=>{addons.add(THEME_SWITCHER_ID,{title:"Themes",type:types.TOOL,match:({viewMode})=>!!(viewMode&&viewMode.match(/^(story|docs)$/)),render:ThemeSwitcher,paramKey:PARAM_KEY});});

package/dist/preview.d.ts

@@ -1,5 +1,5 @@
 import { ProjectAnnotations, Renderer } from '@storybook/types';
 
-declare const globals: ProjectAnnotations<Renderer>['globals'];
+declare const preview: ProjectAnnotations<Renderer>;
 
-export { globals };
+export { preview as default };

package/dist/preview.js

@@ -1 +1 @@
-"use strict";var __defProp=Object.defineProperty;var __getOwnPropDesc=Object.getOwnPropertyDescriptor;var __getOwnPropNames=Object.getOwnPropertyNames;var __hasOwnProp=Object.prototype.hasOwnProperty;var __export=(target,all)=>{for(var name in all)__defProp(target,name,{get:all[name],enumerable:!0})},__copyProps=(to,from,except,desc)=>{if(from&&typeof from=="object"||typeof from=="function")for(let key of __getOwnPropNames(from))!__hasOwnProp.call(to,key)&&key!==except&&__defProp(to,key,{get:()=>from[key],enumerable:!(desc=__getOwnPropDesc(from,key))||desc.enumerable});return to};var __toCommonJS=mod=>__copyProps(__defProp({},"__esModule",{value:!0}),mod);var preview_exports={};__export(preview_exports,{globals:()=>globals});module.exports=__toCommonJS(preview_exports);var PARAM_KEY="themes",ADDON_ID=`storybook/${PARAM_KEY}}`,GLOBAL_KEY="theme",THEME_SWITCHER_ID=`${ADDON_ID}/theme-switcher`;var THEMING_EVENTS={REGISTER_THEMES:`${ADDON_ID}/REGISTER_THEMES`};var globals={[GLOBAL_KEY]:""};0&&(module.exports={globals});
+"use strict";var __defProp=Object.defineProperty;var __getOwnPropDesc=Object.getOwnPropertyDescriptor;var __getOwnPropNames=Object.getOwnPropertyNames;var __hasOwnProp=Object.prototype.hasOwnProperty;var __export=(target,all)=>{for(var name in all)__defProp(target,name,{get:all[name],enumerable:!0})},__copyProps=(to,from,except,desc)=>{if(from&&typeof from=="object"||typeof from=="function")for(let key of __getOwnPropNames(from))!__hasOwnProp.call(to,key)&&key!==except&&__defProp(to,key,{get:()=>from[key],enumerable:!(desc=__getOwnPropDesc(from,key))||desc.enumerable});return to};var __toCommonJS=mod=>__copyProps(__defProp({},"__esModule",{value:!0}),mod);var preview_exports={};__export(preview_exports,{default:()=>preview_default});module.exports=__toCommonJS(preview_exports);var PARAM_KEY="themes",ADDON_ID=`storybook/${PARAM_KEY}}`,GLOBAL_KEY="theme",THEME_SWITCHER_ID=`${ADDON_ID}/theme-switcher`;var THEMING_EVENTS={REGISTER_THEMES:`${ADDON_ID}/REGISTER_THEMES`};var preview={globals:{[GLOBAL_KEY]:""}},preview_default=preview;

package/dist/preview.mjs

@@ -1,5 +1,5 @@
 import { GLOBAL_KEY } from './chunk-5PKFUQBM.mjs';
 
-var globals={[GLOBAL_KEY]:""};
+var preview={globals:{[GLOBAL_KEY]:""}},preview_default=preview;
 
-export { globals };
+export { preview_default as default };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-themes",
-  "version": "0.0.0-pr-24271-sha-4a56eddc",
+  "version": "0.0.0-pr-24844-sha-520c653e",
   "description": "Switch between multiple themes for you components in Storybook",
   "keywords": [
     "css",
@@ -74,18 +74,17 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/client-logger": "0.0.0-pr-24271-sha-4a56eddc",
-    "@storybook/components": "0.0.0-pr-24271-sha-4a56eddc",
-    "@storybook/core-events": "0.0.0-pr-24271-sha-4a56eddc",
-    "@storybook/icons": "^1.2.1",
-    "@storybook/manager-api": "0.0.0-pr-24271-sha-4a56eddc",
-    "@storybook/preview-api": "0.0.0-pr-24271-sha-4a56eddc",
-    "@storybook/theming": "0.0.0-pr-24271-sha-4a56eddc",
-    "@storybook/types": "0.0.0-pr-24271-sha-4a56eddc",
+    "@storybook/client-logger": "0.0.0-pr-24844-sha-520c653e",
+    "@storybook/components": "0.0.0-pr-24844-sha-520c653e",
+    "@storybook/core-events": "0.0.0-pr-24844-sha-520c653e",
+    "@storybook/manager-api": "0.0.0-pr-24844-sha-520c653e",
+    "@storybook/preview-api": "0.0.0-pr-24844-sha-520c653e",
+    "@storybook/theming": "0.0.0-pr-24844-sha-520c653e",
+    "@storybook/types": "0.0.0-pr-24844-sha-520c653e",
     "ts-dedent": "^2.0.0"
   },
   "devDependencies": {
-    "typescript": "~5.2.2"
+    "typescript": "~4.9.3"
   },
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
@@ -115,6 +114,6 @@
     "unsupportedFrameworks": [
       "react-native"
     ],
-    "icon": "https://user-images.githubusercontent.com/18172605/264114587-e4b32190-a9b7-4afa-b739-c873fc0498a6.png"
+    "icon": ""
   }
 }

package/postinstall.js

@@ -1,24 +1,17 @@
 const { spawn } = require('child_process');
 
 const PACKAGE_MANAGER_TO_COMMAND = {
-  npm: ['npx'],
-  pnpm: ['pnpm', 'dlx'],
-  yarn1: ['npx'],
-  yarn2: ['yarn', 'dlx'],
+  npm: 'npx',
+  yarn1: 'npx',
+  yarn2: 'yarn dlx',
+  pnpm: 'pnpm dlx',
 };
 
-const selectPackageManagerCommand = (packageManager) => PACKAGE_MANAGER_TO_COMMAND[packageManager];
+module.exports = function postinstall(options) {
+  const command = PACKAGE_MANAGER_TO_COMMAND[options.packageManager];
 
-const spawnPackageManagerScript = async (packageManager, args) => {
-  const [command, ...baseArgs] = selectPackageManagerCommand(packageManager);
-
-  await spawn(command, [...baseArgs, ...args], {
+  spawn(command, ['@storybook/auto-config', 'themes'], {
     stdio: 'inherit',
     cwd: process.cwd(),
-    shell: true,
   });
 };
-
-module.exports = async function postinstall({ packageManager = 'npm' }) {
-  await spawnPackageManagerScript(packageManager, ['@storybook/auto-config', 'themes']);
-};