Essentials: Add outline addon to monorepo

addons/essentials/package.json

@@ -44,14 +44,14 @@
     "@storybook/addon-controls": "6.4.0-alpha.12",
     "@storybook/addon-docs": "6.4.0-alpha.12",
     "@storybook/addon-measure": "^2.0.0",
+    "@storybook/addon-outline": "6.4.0-alpha.12",
     "@storybook/addon-toolbars": "6.4.0-alpha.12",
     "@storybook/addon-viewport": "6.4.0-alpha.12",
     "@storybook/addons": "6.4.0-alpha.12",
     "@storybook/api": "6.4.0-alpha.12",
     "@storybook/node-logger": "6.4.0-alpha.12",
     "core-js": "^3.8.2",
     "regenerator-runtime": "^0.13.7",
-    "storybook-addon-outline": "^1.4.1",
     "ts-dedent": "^2.0.0"
   },
   "devDependencies": {

addons/essentials/src/index.ts

@@ -39,7 +39,7 @@ export function addons(options: PresetOptions = {}) {
   return (
     ['docs', 'controls', 'actions', 'backgrounds', 'viewport', 'toolbars', 'measure', 'outline']
       .filter((key) => (options as any)[key] !== false)
-      .map((key) => (key === 'outline' ? `storybook-addon-${key}` : `@storybook/addon-${key}`))
+      .map((key) => `@storybook/addon-${key}`)
       .filter((addon) => !checkInstalled(addon, main))
       // Use `require.resolve` to ensure Yarn PnP compatibility
       // Files of various addons should be resolved in the context of `addon-essentials` as they are listed as deps here

addons/outline/README.md

@@ -0,0 +1,23 @@
+# Storybook Addon Outline
+
+Storybook Addon Outline can be used for visually debugging CSS layout and alignment inside the preview in [Storybook](https://storybook.js.org). Based on [Pesticide](https://github.com/mrmrs/pesticide), it draws outlines around every single element in the preview pane.
+
+![React Storybook Screenshot](https://user-images.githubusercontent.com/42671/98158421-dada2300-1ea8-11eb-8619-af1e7018e1ec.png)
+
+## Usage
+
+Requires Storybook 6.1 or later. Outline 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-outline
+```
+
+Then, add following content to [`.storybook/main.js`](https://storybook.js.org/docs/react/configure/overview#configure-your-storybook-project):
+
+```js
+module.exports = {
+  addons: ['@storybook/addon-outline'],
+};
+```
+
+You can now click on the outline button in the toolbar to toggle the outlines.

addons/outline/package.json

@@ -0,0 +1,87 @@
+{
+  "name": "@storybook/addon-outline",
+  "version": "6.4.0-alpha.12",
+  "description": "Outline all elements with CSS to help with layout placement and alignment",
+  "keywords": [
+    "storybook-addons",
+    "essentials",
+    "outline",
+    "css",
+    "layout",
+    "debug",
+    "storybook-addon",
+    "style"
+  ],
+  "homepage": "https://github.com/storybookjs/storybook/tree/main/addons/outline",
+  "bugs": {
+    "url": "https://github.com/storybookjs/storybook/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/storybookjs/storybook.git",
+    "directory": "addons/outline"
+  },
+  "funding": {
+    "type": "opencollective",
+    "url": "https://opencollective.com/storybook"
+  },
+  "license": "MIT",
+  "author": "winkerVSbecks",
+  "main": "dist/cjs/index.js",
+  "module": "dist/esm/index.js",
+  "types": "dist/ts3.9/index.d.ts",
+  "typesVersions": {
+    "<3.8": {
+      "*": [
+        "dist/ts3.4/*"
+      ]
+    }
+  },
+  "files": [
+    "dist/**/*",
+    "README.md",
+    "*.js",
+    "*.d.ts"
+  ],
+  "scripts": {
+    "prepare": "node ../../scripts/prepare.js"
+  },
+  "dependencies": {
+    "@storybook/addons": "6.4.0-alpha.12",
+    "@storybook/api": "6.4.0-alpha.12",
+    "@storybook/client-logger": "6.4.0-alpha.12",
+    "@storybook/components": "6.4.0-alpha.12",
+    "@storybook/core-events": "6.4.0-alpha.12",
+    "core-js": "^3.8.2",
+    "global": "^4.4.0",
+    "regenerator-runtime": "^0.13.7",
+    "ts-dedent": "^2.0.0"
+  },
+  "devDependencies": {
+    "@types/webpack-env": "^1.16.0"
+  },
+  "peerDependencies": {
+    "react": "^16.8.0 || ^17.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    },
+    "react-dom": {
+      "optional": true
+    }
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "gitHead": "417958f6d40b4ac7d361c706d9b96dd4123231cd",
+  "sbmodern": "dist/modern/index.js",
+  "storybook": {
+    "displayName": "Outline",
+    "unsupportedFrameworks": [
+      "react-native"
+    ],
+    "icon": "https://user-images.githubusercontent.com/263385/101991674-48355c80-3c7c-11eb-9686-f684e755fcdd.png"
+  }
+}

addons/outline/preset.js

@@ -0,0 +1,12 @@
+function config(entry = []) {
+  return [...entry, require.resolve('./dist/esm/preset/addDecorator')];
+}
+
+function managerEntries(entry = [], options) {
+  return [...entry, require.resolve('./dist/esm/register')];
+}
+
+module.exports = {
+  managerEntries,
+  config,
+};

addons/outline/register.js

@@ -0,0 +1 @@
+require('./dist/esm/register');

addons/outline/src/OutlineSelector.tsx

@@ -0,0 +1,29 @@
+import React, { memo, useCallback } from 'react';
+import { useGlobals } from '@storybook/api';
+import { Icons, IconButton } from '@storybook/components';
+import { PARAM_KEY } from './constants';
+
+export const OutlineSelector = memo(() => {
+  const [globals, updateGlobals] = useGlobals();
+
+  const isActive = globals[PARAM_KEY] || false;
+
+  const toggleOutline = useCallback(
+    () =>
+      updateGlobals({
+        [PARAM_KEY]: !isActive,
+      }),
+    [isActive]
+  );
+
+  return (
+    <IconButton
+      key="outline"
+      active={isActive}
+      title="Apply outlines to the preview"
+      onClick={toggleOutline}
+    >
+      <Icons icon="outline" />
+    </IconButton>
+  );
+});

addons/outline/src/constants.ts

@@ -0,0 +1,2 @@
+export const ADDON_ID = 'storybook/outline';
+export const PARAM_KEY = 'outline';

addons/outline/src/helpers.ts

@@ -0,0 +1,27 @@
+import global from 'global';
+
+export const clearStyles = (selector: string | string[]) => {
+  const selectors = Array.isArray(selector) ? selector : [selector];
+  selectors.forEach(clearStyle);
+};
+
+const clearStyle = (selector: string | string[]) => {
+  const element = global.document.getElementById(selector);
+  if (element && element.parentElement) {
+    element.parentElement.removeChild(element);
+  }
+};
+
+export const addOutlineStyles = (selector: string, css: string) => {
+  const existingStyle = global.document.getElementById(selector);
+  if (existingStyle) {
+    if (existingStyle.innerHTML !== css) {
+      existingStyle.innerHTML = css;
+    }
+  } else {
+    const style = global.document.createElement('style');
+    style.setAttribute('id', selector);
+    style.innerHTML = css;
+    global.document.head.appendChild(style);
+  }
+};