@storybook/addon-outline - npm Package Compare versions

Comparing version 0.0.0-pr-30197-sha-99c86eb2 to 0.0.0-pr-30197-sha-a3d613d5

dist/index.d.ts

@@ -1,3 +0,6 @@
-declare const _default: {};
+import * as core_dist_types from 'storybook/internal/types';
+import * as _storybook_csf from '@storybook/csf';
 
+declare const _default: () => core_dist_types.ProjectAnnotations<_storybook_csf.Renderer>;
+
 export { _default as default };

dist/index.js

 'use strict';
 
-var src_default={};
+var previewApi = require('storybook/internal/preview-api');
+var global = require('@storybook/global');
+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});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 {
+      outline: 1px solid #2980b9 !important;
+    }
+
+    ${selector} article {
+      outline: 1px solid #3498db !important;
+    }
+
+    ${selector} nav {
+      outline: 1px solid #0088c3 !important;
+    }
+
+    ${selector} aside {
+      outline: 1px solid #33a0ce !important;
+    }
+
+    ${selector} section {
+      outline: 1px solid #66b8da !important;
+    }
+
+    ${selector} header {
+      outline: 1px solid #99cfe7 !important;
+    }
+
+    ${selector} footer {
+      outline: 1px solid #cce7f3 !important;
+    }
+
+    ${selector} h1 {
+      outline: 1px solid #162544 !important;
+    }
+
+    ${selector} h2 {
+      outline: 1px solid #314e6e !important;
+    }
+
+    ${selector} h3 {
+      outline: 1px solid #3e5e85 !important;
+    }
+
+    ${selector} h4 {
+      outline: 1px solid #449baf !important;
+    }
+
+    ${selector} h5 {
+      outline: 1px solid #c7d1cb !important;
+    }
+
+    ${selector} h6 {
+      outline: 1px solid #4371d0 !important;
+    }
+
+    ${selector} main {
+      outline: 1px solid #2f4f90 !important;
+    }
+
+    ${selector} address {
+      outline: 1px solid #1a2c51 !important;
+    }
+
+    ${selector} div {
+      outline: 1px solid #036cdb !important;
+    }
+
+    ${selector} p {
+      outline: 1px solid #ac050b !important;
+    }
+
+    ${selector} hr {
+      outline: 1px solid #ff063f !important;
+    }
+
+    ${selector} pre {
+      outline: 1px solid #850440 !important;
+    }
+
+    ${selector} blockquote {
+      outline: 1px solid #f1b8e7 !important;
+    }
+
+    ${selector} ol {
+      outline: 1px solid #ff050c !important;
+    }
+
+    ${selector} ul {
+      outline: 1px solid #d90416 !important;
+    }
+
+    ${selector} li {
+      outline: 1px solid #d90416 !important;
+    }
+
+    ${selector} dl {
+      outline: 1px solid #fd3427 !important;
+    }
+
+    ${selector} dt {
+      outline: 1px solid #ff0043 !important;
+    }
+
+    ${selector} dd {
+      outline: 1px solid #e80174 !important;
+    }
+
+    ${selector} figure {
+      outline: 1px solid #ff00bb !important;
+    }
+
+    ${selector} figcaption {
+      outline: 1px solid #bf0032 !important;
+    }
+
+    ${selector} table {
+      outline: 1px solid #00cc99 !important;
+    }
+
+    ${selector} caption {
+      outline: 1px solid #37ffc4 !important;
+    }
+
+    ${selector} thead {
+      outline: 1px solid #98daca !important;
+    }
+
+    ${selector} tbody {
+      outline: 1px solid #64a7a0 !important;
+    }
+
+    ${selector} tfoot {
+      outline: 1px solid #22746b !important;
+    }
+
+    ${selector} tr {
+      outline: 1px solid #86c0b2 !important;
+    }
+
+    ${selector} th {
+      outline: 1px solid #a1e7d6 !important;
+    }
+
+    ${selector} td {
+      outline: 1px solid #3f5a54 !important;
+    }
+
+    ${selector} col {
+      outline: 1px solid #6c9a8f !important;
+    }
+
+    ${selector} colgroup {
+      outline: 1px solid #6c9a9d !important;
+    }
+
+    ${selector} button {
+      outline: 1px solid #da8301 !important;
+    }
+
+    ${selector} datalist {
+      outline: 1px solid #c06000 !important;
+    }
+
+    ${selector} fieldset {
+      outline: 1px solid #d95100 !important;
+    }
+
+    ${selector} form {
+      outline: 1px solid #d23600 !important;
+    }
+
+    ${selector} input {
+      outline: 1px solid #fca600 !important;
+    }
+
+    ${selector} keygen {
+      outline: 1px solid #b31e00 !important;
+    }
+
+    ${selector} label {
+      outline: 1px solid #ee8900 !important;
+    }
+
+    ${selector} legend {
+      outline: 1px solid #de6d00 !important;
+    }
+
+    ${selector} meter {
+      outline: 1px solid #e8630c !important;
+    }
+
+    ${selector} optgroup {
+      outline: 1px solid #b33600 !important;
+    }
+
+    ${selector} option {
+      outline: 1px solid #ff8a00 !important;
+    }
+
+    ${selector} output {
+      outline: 1px solid #ff9619 !important;
+    }
+
+    ${selector} progress {
+      outline: 1px solid #e57c00 !important;
+    }
+
+    ${selector} select {
+      outline: 1px solid #e26e0f !important;
+    }
+
+    ${selector} textarea {
+      outline: 1px solid #cc5400 !important;
+    }
+
+    ${selector} details {
+      outline: 1px solid #33848f !important;
+    }
+
+    ${selector} summary {
+      outline: 1px solid #60a1a6 !important;
+    }
+
+    ${selector} command {
+      outline: 1px solid #438da1 !important;
+    }
+
+    ${selector} menu {
+      outline: 1px solid #449da6 !important;
+    }
+
+    ${selector} del {
+      outline: 1px solid #bf0000 !important;
+    }
+
+    ${selector} ins {
+      outline: 1px solid #400000 !important;
+    }
+
+    ${selector} img {
+      outline: 1px solid #22746b !important;
+    }
+
+    ${selector} iframe {
+      outline: 1px solid #64a7a0 !important;
+    }
+
+    ${selector} embed {
+      outline: 1px solid #98daca !important;
+    }
+
+    ${selector} object {
+      outline: 1px solid #00cc99 !important;
+    }
+
+    ${selector} param {
+      outline: 1px solid #37ffc4 !important;
+    }
+
+    ${selector} video {
+      outline: 1px solid #6ee866 !important;
+    }
+
+    ${selector} audio {
+      outline: 1px solid #027353 !important;
+    }
+
+    ${selector} source {
+      outline: 1px solid #012426 !important;
+    }
+
+    ${selector} canvas {
+      outline: 1px solid #a2f570 !important;
+    }
+
+    ${selector} track {
+      outline: 1px solid #59a600 !important;
+    }
+
+    ${selector} map {
+      outline: 1px solid #7be500 !important;
+    }
+
+    ${selector} area {
+      outline: 1px solid #305900 !important;
+    }
+
+    ${selector} a {
+      outline: 1px solid #ff62ab !important;
+    }
+
+    ${selector} em {
+      outline: 1px solid #800b41 !important;
+    }
+
+    ${selector} strong {
+      outline: 1px solid #ff1583 !important;
+    }
+
+    ${selector} i {
+      outline: 1px solid #803156 !important;
+    }
+
+    ${selector} b {
+      outline: 1px solid #cc1169 !important;
+    }
+
+    ${selector} u {
+      outline: 1px solid #ff0430 !important;
+    }
+
+    ${selector} s {
+      outline: 1px solid #f805e3 !important;
+    }
+
+    ${selector} small {
+      outline: 1px solid #d107b2 !important;
+    }
+
+    ${selector} abbr {
+      outline: 1px solid #4a0263 !important;
+    }
+
+    ${selector} q {
+      outline: 1px solid #240018 !important;
+    }
+
+    ${selector} cite {
+      outline: 1px solid #64003c !important;
+    }
+
+    ${selector} dfn {
+      outline: 1px solid #b4005a !important;
+    }
+
+    ${selector} sub {
+      outline: 1px solid #dba0c8 !important;
+    }
+
+    ${selector} sup {
+      outline: 1px solid #cc0256 !important;
+    }
+
+    ${selector} time {
+      outline: 1px solid #d6606d !important;
+    }
+
+    ${selector} code {
+      outline: 1px solid #e04251 !important;
+    }
+
+    ${selector} kbd {
+      outline: 1px solid #5e001f !important;
+    }
+
+    ${selector} samp {
+      outline: 1px solid #9c0033 !important;
+    }
+
+    ${selector} var {
+      outline: 1px solid #d90047 !important;
+    }
+
+    ${selector} mark {
+      outline: 1px solid #ff0053 !important;
+    }
+
+    ${selector} bdi {
+      outline: 1px solid #bf3668 !important;
+    }
+
+    ${selector} bdo {
+      outline: 1px solid #6f1400 !important;
+    }
+
+    ${selector} ruby {
+      outline: 1px solid #ff7b93 !important;
+    }
+
+    ${selector} rt {
+      outline: 1px solid #ff2f54 !important;
+    }
+
+    ${selector} rp {
+      outline: 1px solid #803e49 !important;
+    }
+
+    ${selector} span {
+      outline: 1px solid #cc2643 !important;
+    }
+
+    ${selector} br {
+      outline: 1px solid #db687d !important;
+    }
+
+    ${selector} wbr {
+      outline: 1px solid #db175b !important;
+    }`}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};var src_default=()=>previewApi.definePreview(preview_exports);
+
 module.exports = src_default;

dist/preview.d.ts

@@ -1,4 +0,4 @@
-import { Addon_DecoratorFunction } from 'storybook/internal/types';
+import * as _storybook_csf from '@storybook/csf';
 
-declare const decorators: Addon_DecoratorFunction[];
+declare const decorators: _storybook_csf.DecoratorFunction[];
 declare const initialGlobals: {
@@ -5,0 +5,0 @@ outline: boolean;

package.json

 {
   "name": "@storybook/addon-outline",
-  "version": "0.0.0-pr-30197-sha-99c86eb2",
+  "version": "0.0.0-pr-30197-sha-a3d613d5",
   "description": "Outline all elements with CSS to help with layout placement and alignment",
@@ -48,2 +48,12 @@ "keywords": [
   "types": "dist/index.d.ts",
+  "typesVersions": {
+    "*": {
+      "*": [
+        "dist/index.d.ts"
+      ],
+      "preview": [
+        "dist/preview.d.ts"
+      ]
+    }
+  },
   "files": [
@@ -71,3 +81,3 @@ "dist/**/*",
   "peerDependencies": {
-    "storybook": "^0.0.0-pr-30197-sha-99c86eb2"
+    "storybook": "^0.0.0-pr-30197-sha-a3d613d5"
   },
@@ -85,3 +95,3 @@ "publishConfig": {
     "previewEntries": [
-      "./src/preview.tsx"
+      "./src/preview.ts"
     ]
@@ -88,0 +98,0 @@ },

No alert changes

Improved metrics

Total package byte prevSize

41432

increased by81.84%

Lines of code

1249

increased by96.08%

No dependency changes