@storybook/addon-outline - npm Package Compare versions

Comparing version 0.0.0-pr-26243-sha-393e9350 to 0.0.0-pr-26243-sha-c7b1761e

dist/manager.js

 import React, { memo, useCallback, useEffect } from 'react';
-import { useGlobals, useStorybookApi, addons, types } from '@storybook/manager-api';
-import { IconButton } from '@storybook/components';
+import { useGlobals, useStorybookApi, addons, types } from 'storybook/internal/manager-api';
+import { IconButton } from 'storybook/internal/components';
 import { OutlineIcon } from '@storybook/icons';
 
 var ADDON_ID="storybook/outline",PARAM_KEY="outline";var OutlineSelector=memo(function(){let[globals,updateGlobals]=useGlobals(),api=useStorybookApi(),isActive=[!0,"true"].includes(globals[PARAM_KEY]),toggleOutline=useCallback(()=>updateGlobals({[PARAM_KEY]:!isActive}),[isActive]);return useEffect(()=>{api.setAddonShortcut(ADDON_ID,{label:"Toggle Outline",defaultShortcut:["alt","O"],actionName:"outline",showInMenu:!1,action:toggleOutline});},[toggleOutline,api]),React.createElement(IconButton,{key:"outline",active:isActive,title:"Apply outlines to the preview",onClick:toggleOutline},React.createElement(OutlineIcon,null))});addons.register(ADDON_ID,()=>{addons.add(ADDON_ID,{title:"Outline",type:types.TOOL,match:({viewMode,tabId})=>!!(viewMode&&viewMode.match(/^(story|docs)$/))&&!tabId,render:()=>React.createElement(OutlineSelector,null)});});

dist/preview.js

@@ -1,6 +0,8 @@
-import { useMemo, useEffect } from '@storybook/preview-api';
-import { global } from '@storybook/global';
-import { dedent } from 'ts-dedent';
+'use strict';
 
-var clearStyles=selector=>{(Array.isArray(selector)?selector:[selector]).forEach(clearStyle);},clearStyle=input=>{let selector=typeof input=="string"?input:input.join(""),element=global.document.getElementById(selector);element&&element.parentElement&&element.parentElement.removeChild(element);},addOutlineStyles=(selector,css)=>{let existingStyle=global.document.getElementById(selector);if(existingStyle)existingStyle.innerHTML!==css&&(existingStyle.innerHTML=css);else {let style=global.document.createElement("style");style.setAttribute("id",selector),style.innerHTML=css,global.document.head.appendChild(style);}};var PARAM_KEY="outline";function outlineCSS(selector){return dedent`
+var previewApi = require('storybook/internal/preview-api');
+var global = require('@storybook/global');
+var tsDedent = require('ts-dedent');
+
+var PARAM_KEY="outline";var clearStyles=selector=>{(Array.isArray(selector)?selector:[selector]).forEach(clearStyle);},clearStyle=input=>{let selector=typeof input=="string"?input:input.join(""),element=global.global.document.getElementById(selector);element&&element.parentElement&&element.parentElement.removeChild(element);},addOutlineStyles=(selector,css)=>{let existingStyle=global.global.document.getElementById(selector);if(existingStyle)existingStyle.innerHTML!==css&&(existingStyle.innerHTML=css);else {let style=global.global.document.createElement("style");style.setAttribute("id",selector),style.innerHTML=css,global.global.document.head.appendChild(style);}};function outlineCSS(selector){return tsDedent.dedent`
     ${selector} body {
@@ -400,4 +402,5 @@ outline: 1px solid #2980b9 !important;
       outline: 1px solid #db175b !important;
-    }`}var withOutline=(StoryFn,context)=>{let{globals:globals2}=context,isActive=[!0,"true"].includes(globals2[PARAM_KEY]),isInDocs=context.viewMode==="docs",outlineStyles=useMemo(()=>outlineCSS(isInDocs?'[data-story-block="true"]':".sb-show-main"),[context]);return useEffect(()=>{let selectorId=isInDocs?`addon-outline-docs-${context.id}`:"addon-outline";return isActive?addOutlineStyles(selectorId,outlineStyles):clearStyles(selectorId),()=>{clearStyles(selectorId);}},[isActive,outlineStyles,context]),StoryFn()};var decorators=[withOutline],globals={[PARAM_KEY]:!1};
+    }`}var withOutline=(StoryFn,context)=>{let{globals}=context,isActive=[!0,"true"].includes(globals[PARAM_KEY]),isInDocs=context.viewMode==="docs",outlineStyles=previewApi.useMemo(()=>outlineCSS(isInDocs?'[data-story-block="true"]':".sb-show-main"),[context]);return previewApi.useEffect(()=>{let selectorId=isInDocs?`addon-outline-docs-${context.id}`:"addon-outline";return isActive?addOutlineStyles(selectorId,outlineStyles):clearStyles(selectorId),()=>{clearStyles(selectorId);}},[isActive,outlineStyles,context]),StoryFn()};var decorators=[withOutline],initialGlobals={[PARAM_KEY]:!1};
 
-export { decorators, globals };
+exports.decorators = decorators;
+exports.initialGlobals = initialGlobals;

package.json

 {
   "name": "@storybook/addon-outline",
-  "version": "0.0.0-pr-26243-sha-393e9350",
+  "version": "0.0.0-pr-26243-sha-c7b1761e",
   "description": "Outline all elements with CSS to help with layout placement and alignment",
@@ -33,8 +33,11 @@ "keywords": [
       "types": "./dist/index.d.ts",
-      "node": "./dist/index.js",
-      "require": "./dist/index.js",
-      "import": "./dist/index.mjs"
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
     },
+    "./preview": {
+      "types": "./dist/preview.d.ts",
+      "import": "./dist/preview.mjs",
+      "require": "./dist/preview.js"
+    },
     "./manager": "./dist/manager.js",
-    "./preview": "./dist/preview.js",
     "./register": "./dist/manager.js",
@@ -54,4 +57,4 @@ "./package.json": "./package.json"
   "scripts": {
-    "check": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/check.ts",
-    "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/addon-bundle.ts"
+    "check": "jiti ../../../scripts/prepare/check.ts",
+    "prep": "jiti ../../../scripts/prepare/addon-bundle.ts"
   },
@@ -63,9 +66,3 @@ "dependencies": {
   "devDependencies": {
-    "@storybook/client-logger": "0.0.0-pr-26243-sha-393e9350",
-    "@storybook/components": "0.0.0-pr-26243-sha-393e9350",
-    "@storybook/core-events": "0.0.0-pr-26243-sha-393e9350",
-    "@storybook/icons": "^1.2.5",
-    "@storybook/manager-api": "0.0.0-pr-26243-sha-393e9350",
-    "@storybook/preview-api": "0.0.0-pr-26243-sha-393e9350",
-    "@storybook/types": "0.0.0-pr-26243-sha-393e9350",
+    "@storybook/icons": "^1.2.12",
     "react": "^18.2.0",
@@ -75,2 +72,5 @@ "react-dom": "^18.2.0",
   },
+  "peerDependencies": {
+    "storybook": "^0.0.0-pr-26243-sha-c7b1761e"
+  },
   "publishConfig": {
@@ -90,3 +90,3 @@ "access": "public"
   },
-  "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae17",
+  "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae16",
   "storybook": {
@@ -93,0 +93,0 @@ "displayName": "Outline",

README.md

@@ -9,3 +9,3 @@ # Storybook Addon Outline
 
-Requires Storybook 6.1 or later. Outline is part of [essentials](https://storybook.js.org/docs/react/essentials) and so is installed in all new Storybooks by default. If you need to add it to your Storybook, you can run:
+Requires Storybook 6.1 or later. Outline is part of [essentials](https://storybook.js.org/docs/essentials) and so is installed in all new Storybooks by default. If you need to add it to your Storybook, you can run:
 
@@ -16,3 +16,3 @@ ```sh
 
-Then, add following content to [`.storybook/main.js`](https://storybook.js.org/docs/react/configure/#configure-your-storybook-project):
+Then, add following content to [`.storybook/main.js`](https://storybook.js.org/docs/configure#configure-your-storybook-project):
 
@@ -19,0 +19,0 @@ ```js

No alert changes

Improved metrics

Total package byte prevSize

22785

increased by62.37%

Dev dependency count

4

decreased by-60%

Number of package files

11

increased by22.22%

Lines of code

637

increased by97.21%

Worsened metrics

Dependency count

3

increased by50%

No dependency changes