@storybook/addon-backgrounds - npm Package Compare versions

Comparing version 0.0.0-pr-30442-sha-6e0c6f13 to 0.0.0-pr-30457-sha-dfac046c

dist/index.d.ts

@@ -1,3 +0,47 @@
-declare const _default: {};
+import * as core_dist_types from 'storybook/internal/types';
+import * as _storybook_csf from '@storybook/csf';
 
-export { _default as default };
+interface Background {
+    name: string;
+    value: string;
+}
+interface GridConfig {
+    cellAmount: number;
+    cellSize: number;
+    opacity: number;
+    offsetX?: number;
+    offsetY?: number;
+}
+type GlobalState = {
+    value: string | undefined;
+    grid: boolean;
+};
+interface BackgroundsParameters {
+    /**
+     * Backgrounds configuration
+     *
+     * @see https://storybook.js.org/docs/essentials/backgrounds#parameters
+     */
+    backgrounds: {
+        /** Default background color */
+        default?: string;
+        /** Remove the addon panel and disable the addon's behavior */
+        disable?: boolean;
+        /** Configuration for the background grid */
+        grid?: Partial<GridConfig>;
+        /** Available background colors */
+        values?: Array<Background>;
+    };
+}
+interface BackgroundsGlobals {
+    /**
+     * Backgrounds configuration
+     *
+     * @see https://storybook.js.org/docs/essentials/backgrounds#globals
+     */
+    backgrounds: GlobalState;
+}
+
+declare const _default: () => core_dist_types.ProjectAnnotations<_storybook_csf.Renderer>;
+
+export { BackgroundsGlobals, BackgroundsParameters, _default as default };

dist/index.js

 'use strict';
 
-var src_default={};
+var previewApi = require('storybook/internal/preview-api');
+var global = require('@storybook/global');
+var clientLogger = require('storybook/internal/client-logger');
+var tsDedent = require('ts-dedent');
 
+var __defProp=Object.defineProperty;var __export=(target,all)=>{for(var name in all)__defProp(target,name,{get:all[name],enumerable:!0});};var preview_exports={};__export(preview_exports,{decorators:()=>decorators,initialGlobals:()=>initialGlobals,parameters:()=>parameters});var PARAM_KEY="backgrounds";var DEFAULT_BACKGROUNDS={light:{name:"light",value:"#F8F8F8"},dark:{name:"dark",value:"#333"}};var{document,window}=global.global,isReduceMotionEnabled=()=>!!window?.matchMedia("(prefers-reduced-motion: reduce)")?.matches,clearStyles=selector=>{(Array.isArray(selector)?selector:[selector]).forEach(clearStyle);},clearStyle=selector=>{let element=document.getElementById(selector);element&&element.parentElement?.removeChild(element);},addGridStyle=(selector,css)=>{let existingStyle=document.getElementById(selector);if(existingStyle)existingStyle.innerHTML!==css&&(existingStyle.innerHTML=css);else {let style=document.createElement("style");style.setAttribute("id",selector),style.innerHTML=css,document.head.appendChild(style);}},addBackgroundStyle=(selector,css,storyId)=>{let existingStyle=document.getElementById(selector);if(existingStyle)existingStyle.innerHTML!==css&&(existingStyle.innerHTML=css);else {let style=document.createElement("style");style.setAttribute("id",selector),style.innerHTML=css;let gridStyleSelector=`addon-backgrounds-grid${storyId?`-docs-${storyId}`:""}`,existingGridStyle=document.getElementById(gridStyleSelector);existingGridStyle?existingGridStyle.parentElement?.insertBefore(style,existingGridStyle):document.head.appendChild(style);}};var defaultGrid={cellSize:100,cellAmount:10,opacity:.8},BG_SELECTOR_BASE="addon-backgrounds",GRID_SELECTOR_BASE="addon-backgrounds-grid",transitionStyle=isReduceMotionEnabled()?"":"transition: background-color 0.3s;",withBackgroundAndGrid=(StoryFn,context)=>{let{globals,parameters:parameters2,viewMode,id}=context,{options=DEFAULT_BACKGROUNDS,disable,grid=defaultGrid}=parameters2[PARAM_KEY]||{},data=globals[PARAM_KEY]||{},backgroundName=data.value,item=backgroundName?options[backgroundName]:void 0,value=item?.value||"transparent",showGrid=data.grid||!1,shownBackground=!!item&&!disable,backgroundSelector=viewMode==="docs"?`#anchor--${id} .docs-story`:".sb-show-main",gridSelector=viewMode==="docs"?`#anchor--${id} .docs-story`:".sb-show-main",isLayoutPadded=parameters2.layout===void 0||parameters2.layout==="padded",defaultOffset=viewMode==="docs"?20:isLayoutPadded?16:0,{cellAmount,cellSize,opacity,offsetX=defaultOffset,offsetY=defaultOffset}=grid,backgroundSelectorId=viewMode==="docs"?`${BG_SELECTOR_BASE}-docs-${id}`:`${BG_SELECTOR_BASE}-color`,backgroundTarget=viewMode==="docs"?id:null;previewApi.useEffect(()=>{let backgroundStyles=`
+    ${backgroundSelector} {
+      background: ${value} !important;
+      ${transitionStyle}
+      }`;if(!shownBackground){clearStyles(backgroundSelectorId);return}addBackgroundStyle(backgroundSelectorId,backgroundStyles,backgroundTarget);},[backgroundSelector,backgroundSelectorId,backgroundTarget,shownBackground,value]);let gridSelectorId=viewMode==="docs"?`${GRID_SELECTOR_BASE}-docs-${id}`:`${GRID_SELECTOR_BASE}`;return previewApi.useEffect(()=>{if(!showGrid){clearStyles(gridSelectorId);return}let gridSize=[`${cellSize*cellAmount}px ${cellSize*cellAmount}px`,`${cellSize*cellAmount}px ${cellSize*cellAmount}px`,`${cellSize}px ${cellSize}px`,`${cellSize}px ${cellSize}px`].join(", "),gridStyles=`
+        ${gridSelector} {
+          background-size: ${gridSize} !important;
+          background-position: ${offsetX}px ${offsetY}px, ${offsetX}px ${offsetY}px, ${offsetX}px ${offsetY}px, ${offsetX}px ${offsetY}px !important;
+          background-blend-mode: difference !important;
+          background-image: linear-gradient(rgba(130, 130, 130, ${opacity}) 1px, transparent 1px),
+           linear-gradient(90deg, rgba(130, 130, 130, ${opacity}) 1px, transparent 1px),
+           linear-gradient(rgba(130, 130, 130, ${opacity/2}) 1px, transparent 1px),
+           linear-gradient(90deg, rgba(130, 130, 130, ${opacity/2}) 1px, transparent 1px) !important;
+        }
+      `;addGridStyle(gridSelectorId,gridStyles);},[cellAmount,cellSize,gridSelector,gridSelectorId,showGrid,offsetX,offsetY,opacity]),StoryFn()};var getBackgroundColorByName=(currentSelectedValue,backgrounds=[],defaultName)=>{if(currentSelectedValue==="transparent")return "transparent";if(backgrounds.find(background=>background.value===currentSelectedValue)||currentSelectedValue)return currentSelectedValue;let defaultBackground=backgrounds.find(background=>background.name===defaultName);if(defaultBackground)return defaultBackground.value;if(defaultName){let availableColors=backgrounds.map(background=>background.name).join(", ");clientLogger.logger.warn(tsDedent.dedent`
+        Backgrounds Addon: could not find the default color "${defaultName}".
+        These are the available colors for your story based on your configuration:
+        ${availableColors}.
+      `);}return "transparent"};var withBackground=(StoryFn,context)=>{let{globals,parameters:parameters2}=context,globalsBackgroundColor=globals[PARAM_KEY]?.value,backgroundsConfig=parameters2[PARAM_KEY],selectedBackgroundColor=previewApi.useMemo(()=>backgroundsConfig.disable?"transparent":getBackgroundColorByName(globalsBackgroundColor,backgroundsConfig.values,backgroundsConfig.default),[backgroundsConfig,globalsBackgroundColor]),isActive=previewApi.useMemo(()=>selectedBackgroundColor&&selectedBackgroundColor!=="transparent",[selectedBackgroundColor]),selector=context.viewMode==="docs"?`#anchor--${context.id} .docs-story`:".sb-show-main",backgroundStyles=previewApi.useMemo(()=>`
+      ${selector} {
+        background: ${selectedBackgroundColor} !important;
+        ${isReduceMotionEnabled()?"":"transition: background-color 0.3s;"}
+      }
+    `,[selectedBackgroundColor,selector]);return previewApi.useEffect(()=>{let selectorId=context.viewMode==="docs"?`addon-backgrounds-docs-${context.id}`:"addon-backgrounds-color";if(!isActive){clearStyles(selectorId);return}addBackgroundStyle(selectorId,backgroundStyles,context.viewMode==="docs"?context.id:null);},[isActive,backgroundStyles,context]),StoryFn()};var withGrid=(StoryFn,context)=>{let{globals,parameters:parameters2}=context,gridParameters=parameters2[PARAM_KEY].grid,isActive=globals[PARAM_KEY]?.grid===!0&&gridParameters.disable!==!0,{cellAmount,cellSize,opacity}=gridParameters,isInDocs=context.viewMode==="docs",defaultOffset=parameters2.layout===void 0||parameters2.layout==="padded"?16:0,offsetX=gridParameters.offsetX??(isInDocs?20:defaultOffset),offsetY=gridParameters.offsetY??(isInDocs?20:defaultOffset),gridStyles=previewApi.useMemo(()=>{let selector=context.viewMode==="docs"?`#anchor--${context.id} .docs-story`:".sb-show-main",backgroundSize=[`${cellSize*cellAmount}px ${cellSize*cellAmount}px`,`${cellSize*cellAmount}px ${cellSize*cellAmount}px`,`${cellSize}px ${cellSize}px`,`${cellSize}px ${cellSize}px`].join(", ");return `
+      ${selector} {
+        background-size: ${backgroundSize} !important;
+        background-position: ${offsetX}px ${offsetY}px, ${offsetX}px ${offsetY}px, ${offsetX}px ${offsetY}px, ${offsetX}px ${offsetY}px !important;
+        background-blend-mode: difference !important;
+        background-image: linear-gradient(rgba(130, 130, 130, ${opacity}) 1px, transparent 1px),
+         linear-gradient(90deg, rgba(130, 130, 130, ${opacity}) 1px, transparent 1px),
+         linear-gradient(rgba(130, 130, 130, ${opacity/2}) 1px, transparent 1px),
+         linear-gradient(90deg, rgba(130, 130, 130, ${opacity/2}) 1px, transparent 1px) !important;
+      }
+    `},[cellSize]);return previewApi.useEffect(()=>{let selectorId=context.viewMode==="docs"?`addon-backgrounds-grid-docs-${context.id}`:"addon-backgrounds-grid";if(!isActive){clearStyles(selectorId);return}addGridStyle(selectorId,gridStyles);},[isActive,gridStyles,context]),StoryFn()};var decorators=globalThis.FEATURES?.backgroundsStoryGlobals?[withBackgroundAndGrid]:[withGrid,withBackground],parameters={[PARAM_KEY]:{grid:{cellSize:20,opacity:.5,cellAmount:5},disable:!1,...!globalThis.FEATURES?.backgroundsStoryGlobals&&{values:Object.values(DEFAULT_BACKGROUNDS)}}},modern={[PARAM_KEY]:{value:void 0,grid:!1}},initialGlobals=globalThis.FEATURES?.backgroundsStoryGlobals?modern:{[PARAM_KEY]:null};var src_default=()=>previewApi.definePreview(preview_exports);
+
 module.exports = src_default;

dist/preview.d.ts

@@ -1,2 +0,2 @@
-import { Addon_DecoratorFunction } from 'storybook/internal/types';
+import * as _storybook_csf from '@storybook/csf';
 
@@ -12,3 +12,3 @@ interface Background {
 
-declare const decorators: Addon_DecoratorFunction[];
+declare const decorators: _storybook_csf.DecoratorFunction[];
 declare const parameters: {
@@ -15,0 +15,0 @@ backgrounds: {

dist/preview.js

@@ -41,3 +41,3 @@ 'use strict';
       }
-    `},[cellSize]);return previewApi.useEffect(()=>{let selectorId=context.viewMode==="docs"?`addon-backgrounds-grid-docs-${context.id}`:"addon-backgrounds-grid";if(!isActive){clearStyles(selectorId);return}addGridStyle(selectorId,gridStyles);},[isActive,gridStyles,context]),StoryFn()};var decorators=FEATURES?.backgroundsStoryGlobals?[withBackgroundAndGrid]:[withGrid,withBackground],parameters={[PARAM_KEY]:{grid:{cellSize:20,opacity:.5,cellAmount:5},disable:!1,...!FEATURES?.backgroundsStoryGlobals&&{values:Object.values(DEFAULT_BACKGROUNDS)}}},modern={[PARAM_KEY]:{value:void 0,grid:!1}},initialGlobals=FEATURES?.backgroundsStoryGlobals?modern:{[PARAM_KEY]:null};
+    `},[cellSize]);return previewApi.useEffect(()=>{let selectorId=context.viewMode==="docs"?`addon-backgrounds-grid-docs-${context.id}`:"addon-backgrounds-grid";if(!isActive){clearStyles(selectorId);return}addGridStyle(selectorId,gridStyles);},[isActive,gridStyles,context]),StoryFn()};var decorators=globalThis.FEATURES?.backgroundsStoryGlobals?[withBackgroundAndGrid]:[withGrid,withBackground],parameters={[PARAM_KEY]:{grid:{cellSize:20,opacity:.5,cellAmount:5},disable:!1,...!globalThis.FEATURES?.backgroundsStoryGlobals&&{values:Object.values(DEFAULT_BACKGROUNDS)}}},modern={[PARAM_KEY]:{value:void 0,grid:!1}},initialGlobals=globalThis.FEATURES?.backgroundsStoryGlobals?modern:{[PARAM_KEY]:null};
 
@@ -44,0 +44,0 @@ exports.decorators = decorators;

package.json

 {
   "name": "@storybook/addon-backgrounds",
-  "version": "0.0.0-pr-30442-sha-6e0c6f13",
+  "version": "0.0.0-pr-30457-sha-dfac046c",
   "description": "Switch backgrounds to view components in different settings",
@@ -46,2 +46,12 @@ "keywords": [
   "types": "dist/index.d.ts",
+  "typesVersions": {
+    "*": {
+      "*": [
+        "dist/index.d.ts"
+      ],
+      "preview": [
+        "dist/preview.d.ts"
+      ]
+    }
+  },
   "files": [
@@ -70,3 +80,3 @@ "dist/**/*",
   "peerDependencies": {
-    "storybook": "^0.0.0-pr-30442-sha-6e0c6f13"
+    "storybook": "^0.0.0-pr-30457-sha-dfac046c"
   },
@@ -73,0 +83,0 @@ "publishConfig": {

New alerts

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

45493

increased by68.28%

Lines of code

351

increased by83.77%

Worsened metrics

Number of low quality alerts

3

increased by50%

No dependency changes