@storybook/addon-highlight 7.0.0-alpha.7

package/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2017 Kadira Inc. <hello@kadira.io>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

package/README.md

@@ -0,0 +1,64 @@
+# Storybook Addon Highlight
+
+Storybook addon allows for highlighting specific DOM nodes within your story.
+
+Use it to call attention to particular parts of the story. Or use it to enhance other addons that you might be building. For example, [Accessibility](https://storybook.js.org/addons/@storybook/addon-a11y/) addon uses it to highlight DOM nodes that are failing accessibility checks.
+
+![](https://user-images.githubusercontent.com/42671/160146801-179eaa79-fff8-4bff-b17c-9262fdc94918.png)
+
+## Usage
+
+This addon requires Storybook 6.5 or later. Highlight is part of [essentials](https://storybook.js.org/docs/react/essentials/introduction) and so is installed in all new Storybooks by default. If you need to add it to your Storybook, you can run:
+
+```sh
+npm i -D @storybook/addon-highlight
+```
+
+Add `"@storybook/addon-highlight"` to the addons array in your `.storybook/main.js`:
+
+```js
+module.exports = {
+  addons: ['@storybook/addon-highlight'],
+};
+```
+
+### Apply or clear highlights
+
+Highlight DOM nodes by emitting the `HIGHLIGHT` event from within a story or an addon. The event payload must contain a list of selectors you want to highlight.
+
+```js
+import React, { useEffect } from 'react';
+import { useChannel } from '@storybook/addons';
+import { HIGHLIGHT, RESET_HIGHLIGHT } from '@storybook/addon-highlight';
+import { MyComponent } form './MyComponent';
+
+export default { component: MyComponent };
+
+export const MyStory = () => {
+  const emit = useChannel({});
+
+  useEffect(() => {
+    emit(HIGHLIGHT, {
+      elements: ['.title', '.subtitle'],
+    });
+  }, []);
+
+  return <MyComponent />;
+};
+```
+
+Highlights are automatically cleared when the story changes. You can also manually clear them by emitting the `RESET_HIGHLIGHT` event.
+
+```js
+emit(RESET_HIGHLIGHT);
+```
+
+### Customize style
+
+```js
+emit(HIGHLIGHT, {
+  elements: ['.title', '.subtitle'],
+  color: 'red',
+  style: 'solid', // 'dotted' | 'dashed' | 'solid' | 'double'
+});
+```

package/dist/cjs/constants.js

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.RESET_HIGHLIGHT = exports.HIGHLIGHT_STYLE_ID = exports.HIGHLIGHT = exports.ADDON_ID = void 0;
+const ADDON_ID = 'storybook/highlight';
+exports.ADDON_ID = ADDON_ID;
+const HIGHLIGHT_STYLE_ID = 'storybookHighlight';
+exports.HIGHLIGHT_STYLE_ID = HIGHLIGHT_STYLE_ID;
+const HIGHLIGHT = `${ADDON_ID}/add`;
+exports.HIGHLIGHT = HIGHLIGHT;
+const RESET_HIGHLIGHT = `${ADDON_ID}/reset`;
+exports.RESET_HIGHLIGHT = RESET_HIGHLIGHT;

package/dist/cjs/highlight.js

@@ -0,0 +1,69 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.highlightStyle = exports.highlightObject = void 0;
+
+var _global = _interopRequireDefault(require("global"));
+
+var _addons = require("@storybook/addons");
+
+var _coreEvents = require("@storybook/core-events");
+
+var _constants = require("./constants");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/* eslint-env browser */
+const {
+  document
+} = _global.default;
+
+const highlightStyle = (color = '#FF4785', style = 'dashed') => `
+  outline: 2px ${style} ${color};
+  outline-offset: 2px;
+  box-shadow: 0 0 0 6px rgba(255,255,255,0.6);
+`;
+
+exports.highlightStyle = highlightStyle;
+
+const highlightObject = color => ({
+  outline: `2px dashed ${color}`,
+  outlineOffset: 2,
+  boxShadow: '0 0 0 6px rgba(255,255,255,0.6)'
+});
+
+exports.highlightObject = highlightObject;
+
+if (module && module.hot && module.hot.decline) {
+  module.hot.decline();
+}
+
+const channel = _addons.addons.getChannel();
+
+const highlight = infos => {
+  const id = _constants.HIGHLIGHT_STYLE_ID;
+  resetHighlight(); // Make sure there are no duplicated selectors
+
+  const elements = Array.from(new Set(infos.elements));
+  const sheet = document.createElement('style');
+  sheet.setAttribute('id', id);
+  sheet.innerHTML = elements.map(target => `${target}{
+          ${highlightStyle(infos.color, infos.style)}
+         }`).join(' ');
+  document.head.appendChild(sheet);
+};
+
+const resetHighlight = () => {
+  const id = _constants.HIGHLIGHT_STYLE_ID;
+  const sheetToBeRemoved = document.getElementById(id);
+
+  if (sheetToBeRemoved) {
+    sheetToBeRemoved.parentNode.removeChild(sheetToBeRemoved);
+  }
+};
+
+channel.on(_coreEvents.STORY_CHANGED, resetHighlight);
+channel.on(_constants.RESET_HIGHLIGHT, resetHighlight);
+channel.on(_constants.HIGHLIGHT, highlight);

package/dist/cjs/index.js

@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "HIGHLIGHT", {
+  enumerable: true,
+  get: function () {
+    return _constants.HIGHLIGHT;
+  }
+});
+Object.defineProperty(exports, "RESET_HIGHLIGHT", {
+  enumerable: true,
+  get: function () {
+    return _constants.RESET_HIGHLIGHT;
+  }
+});
+exports.default = void 0;
+
+var _constants = require("./constants");
+
+if (module && module.hot && module.hot.decline) {
+  module.hot.decline();
+} // make it work with --isolatedModules
+
+
+var _default = {};
+exports.default = _default;

package/dist/esm/constants.js

@@ -0,0 +1,4 @@
+export const ADDON_ID = 'storybook/highlight';
+export const HIGHLIGHT_STYLE_ID = 'storybookHighlight';
+export const HIGHLIGHT = `${ADDON_ID}/add`;
+export const RESET_HIGHLIGHT = `${ADDON_ID}/reset`;

package/dist/esm/highlight.js

@@ -0,0 +1,50 @@
+/* eslint-env browser */
+import global from 'global';
+import { addons } from '@storybook/addons';
+import { STORY_CHANGED } from '@storybook/core-events';
+import { HIGHLIGHT, RESET_HIGHLIGHT, HIGHLIGHT_STYLE_ID } from './constants';
+const {
+  document
+} = global;
+export const highlightStyle = (color = '#FF4785', style = 'dashed') => `
+  outline: 2px ${style} ${color};
+  outline-offset: 2px;
+  box-shadow: 0 0 0 6px rgba(255,255,255,0.6);
+`;
+export const highlightObject = color => ({
+  outline: `2px dashed ${color}`,
+  outlineOffset: 2,
+  boxShadow: '0 0 0 6px rgba(255,255,255,0.6)'
+});
+
+if (module && module.hot && module.hot.decline) {
+  module.hot.decline();
+}
+
+const channel = addons.getChannel();
+
+const highlight = infos => {
+  const id = HIGHLIGHT_STYLE_ID;
+  resetHighlight(); // Make sure there are no duplicated selectors
+
+  const elements = Array.from(new Set(infos.elements));
+  const sheet = document.createElement('style');
+  sheet.setAttribute('id', id);
+  sheet.innerHTML = elements.map(target => `${target}{
+          ${highlightStyle(infos.color, infos.style)}
+         }`).join(' ');
+  document.head.appendChild(sheet);
+};
+
+const resetHighlight = () => {
+  const id = HIGHLIGHT_STYLE_ID;
+  const sheetToBeRemoved = document.getElementById(id);
+
+  if (sheetToBeRemoved) {
+    sheetToBeRemoved.parentNode.removeChild(sheetToBeRemoved);
+  }
+};
+
+channel.on(STORY_CHANGED, resetHighlight);
+channel.on(RESET_HIGHLIGHT, resetHighlight);
+channel.on(HIGHLIGHT, highlight);

package/dist/esm/index.js

@@ -0,0 +1,8 @@
+export { HIGHLIGHT, RESET_HIGHLIGHT } from './constants';
+
+if (module && module.hot && module.hot.decline) {
+  module.hot.decline();
+} // make it work with --isolatedModules
+
+
+export default {};

package/dist/types/constants.d.ts

@@ -0,0 +1,4 @@
+export declare const ADDON_ID = "storybook/highlight";
+export declare const HIGHLIGHT_STYLE_ID = "storybookHighlight";
+export declare const HIGHLIGHT: string;
+export declare const RESET_HIGHLIGHT: string;

package/dist/types/highlight.d.ts

@@ -0,0 +1,8 @@
+declare type OutlineStyle = 'dotted' | 'dashed' | 'solid' | 'double';
+export declare const highlightStyle: (color?: string, style?: OutlineStyle) => string;
+export declare const highlightObject: (color: string) => {
+    outline: string;
+    outlineOffset: number;
+    boxShadow: string;
+};
+export {};

package/dist/types/index.d.ts

@@ -0,0 +1,3 @@
+export { HIGHLIGHT, RESET_HIGHLIGHT } from './constants';
+declare const _default: {};
+export default _default;

package/package.json

@@ -0,0 +1,59 @@
+{
+  "name": "@storybook/addon-highlight",
+  "version": "7.0.0-alpha.7",
+  "description": "Highlight DOM nodes within your stories",
+  "keywords": [
+    "storybook-addons",
+    "essentials",
+    "style",
+    "appearance"
+  ],
+  "homepage": "https://github.com/storybookjs/storybook/tree/main/addons/highlight",
+  "bugs": {
+    "url": "https://github.com/storybookjs/storybook/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/storybookjs/storybook.git",
+    "directory": "addons/highlight"
+  },
+  "funding": {
+    "type": "opencollective",
+    "url": "https://opencollective.com/storybook"
+  },
+  "license": "MIT",
+  "author": "winkerVSbecks",
+  "main": "dist/cjs/index.js",
+  "module": "dist/esm/index.js",
+  "types": "dist/types/index.d.ts",
+  "files": [
+    "dist/**/*",
+    "README.md",
+    "*.js",
+    "*.d.ts"
+  ],
+  "scripts": {
+    "prepare": "node ../../scripts/prepare.js"
+  },
+  "dependencies": {
+    "@storybook/addons": "7.0.0-alpha.7",
+    "@storybook/core-events": "7.0.0-alpha.7",
+    "core-js": "^3.8.2",
+    "global": "^4.4.0"
+  },
+  "devDependencies": {
+    "@types/webpack-env": "^1.16.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "gitHead": "d334cabd251cd0ed8b845a87707dc84f007d4074",
+  "sbmodern": "dist/modern/index.js",
+  "storybook": {
+    "displayName": "Highlight",
+    "unsupportedFrameworks": [
+      "react-native"
+    ],
+    "icon": "https://user-images.githubusercontent.com/42671/162045505-9d06fe2e-8fcb-4c41-9486-e0553bce10cc.png"
+  }
+}

package/preview.js

@@ -0,0 +1 @@
+export * from './dist/esm/highlight';