diff --git a/addons/essentials/package.json b/addons/essentials/package.json index 593fe7802f21..c793e4ab0be2 100644 --- a/addons/essentials/package.json +++ b/addons/essentials/package.json @@ -44,6 +44,7 @@ "@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", @@ -51,7 +52,6 @@ "@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": { diff --git a/addons/essentials/src/index.ts b/addons/essentials/src/index.ts index b281ec05be15..7cf3bc35170b 100644 --- a/addons/essentials/src/index.ts +++ b/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 diff --git a/addons/outline/README.md b/addons/outline/README.md new file mode 100644 index 000000000000..c94df715d438 --- /dev/null +++ b/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. diff --git a/addons/outline/package.json b/addons/outline/package.json new file mode 100644 index 000000000000..86a70a0995aa --- /dev/null +++ b/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" + } +} diff --git a/addons/outline/preset.js b/addons/outline/preset.js new file mode 100644 index 000000000000..459bbb650ccd --- /dev/null +++ b/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, +}; diff --git a/addons/outline/register.js b/addons/outline/register.js new file mode 100644 index 000000000000..f209c0eb3703 --- /dev/null +++ b/addons/outline/register.js @@ -0,0 +1 @@ +require('./dist/esm/register'); diff --git a/addons/outline/src/OutlineSelector.tsx b/addons/outline/src/OutlineSelector.tsx new file mode 100644 index 000000000000..9a91fba9cd6d --- /dev/null +++ b/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 ( + + + + ); +}); diff --git a/addons/outline/src/constants.ts b/addons/outline/src/constants.ts new file mode 100644 index 000000000000..1da3648c98ee --- /dev/null +++ b/addons/outline/src/constants.ts @@ -0,0 +1,2 @@ +export const ADDON_ID = 'storybook/outline'; +export const PARAM_KEY = 'outline'; diff --git a/addons/outline/src/helpers.ts b/addons/outline/src/helpers.ts new file mode 100644 index 000000000000..04cb9cbc1aa7 --- /dev/null +++ b/addons/outline/src/helpers.ts @@ -0,0 +1,27 @@ +import global from 'global'; + +export const clearStyles = (selector: string) => { + const selectors = Array.isArray(selector) ? selector : [selector]; + selectors.forEach(clearStyle); +}; + +const clearStyle = (selector: 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); + } +}; diff --git a/addons/outline/src/outlineCSS.ts b/addons/outline/src/outlineCSS.ts new file mode 100644 index 000000000000..94bbeee73570 --- /dev/null +++ b/addons/outline/src/outlineCSS.ts @@ -0,0 +1,403 @@ +import dedent from 'ts-dedent'; + +/* + From pesticide v1.3.0 . @mrmrs . MIT +*/ +export default function outlineCSS(selector: string) { + return dedent/* css */ ` + ${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; + }`; +} diff --git a/addons/outline/src/preset/addDecorator.tsx b/addons/outline/src/preset/addDecorator.tsx new file mode 100644 index 000000000000..1abee6e575c6 --- /dev/null +++ b/addons/outline/src/preset/addDecorator.tsx @@ -0,0 +1,8 @@ +import { withOutline } from '../withOutline'; +import { PARAM_KEY } from '../constants'; + +export const decorators = [withOutline]; + +export const globals = { + [PARAM_KEY]: false, +}; diff --git a/addons/outline/src/register.tsx b/addons/outline/src/register.tsx new file mode 100644 index 000000000000..3f3f96ae3b06 --- /dev/null +++ b/addons/outline/src/register.tsx @@ -0,0 +1,14 @@ +import React from 'react'; +import { addons, types } from '@storybook/addons'; + +import { ADDON_ID } from './constants'; +import { OutlineSelector } from './OutlineSelector'; + +addons.register(ADDON_ID, () => { + addons.add(ADDON_ID, { + title: 'Outline', + type: types.TOOL, + match: ({ viewMode }) => !!(viewMode && viewMode.match(/^(story|docs)$/)), + render: () => , + }); +}); diff --git a/addons/outline/src/typings.d.ts b/addons/outline/src/typings.d.ts new file mode 100644 index 000000000000..2f4eb9cf4fd9 --- /dev/null +++ b/addons/outline/src/typings.d.ts @@ -0,0 +1 @@ +declare module 'global'; diff --git a/addons/outline/src/withOutline.ts b/addons/outline/src/withOutline.ts new file mode 100644 index 000000000000..391967c96abb --- /dev/null +++ b/addons/outline/src/withOutline.ts @@ -0,0 +1,33 @@ +import { StoryFn as StoryFunction, StoryContext, useMemo, useEffect } from '@storybook/addons'; + +import { clearStyles, addOutlineStyles } from './helpers'; +import { PARAM_KEY } from './constants'; +import outlineCSS from './outlineCSS'; + +export const withOutline = (StoryFn: StoryFunction, context: StoryContext) => { + const { globals } = context; + const isActive = globals[PARAM_KEY] === true; + const isInDocs = context.viewMode === 'docs'; + + const outlineStyles = useMemo(() => { + const selector = isInDocs ? `#anchor--${context.id} .docs-story` : '.sb-show-main'; + + return outlineCSS(selector); + }, [context]); + + useEffect(() => { + const selectorId = isInDocs ? `addon-outline-docs-${context.id}` : `addon-outline`; + + if (!isActive) { + clearStyles(selectorId); + } else { + addOutlineStyles(selectorId, outlineStyles); + } + + return () => { + clearStyles(selectorId); + }; + }, [isActive, outlineStyles, context]); + + return StoryFn(); +}; diff --git a/addons/outline/tsconfig.json b/addons/outline/tsconfig.json new file mode 100644 index 000000000000..d1ee4fc75941 --- /dev/null +++ b/addons/outline/tsconfig.json @@ -0,0 +1,18 @@ +{ + "extends": "../../tsconfig.json", + "compilerOptions": { + "rootDir": "./src", + "types": ["webpack-env"] + }, + "include": [ + "src/**/*" + ], + "exclude": [ + "src/**/*.test.*", + "src/**/tests/**/*", + "src/**/__tests__/**/*", + "src/**/*.stories.*", + "src/**/*.mockdata.*", + "src/**/__testfixtures__/**" + ] +} diff --git a/examples/official-storybook/stories/addon-outline.stories.js b/examples/official-storybook/stories/addon-outline.stories.js new file mode 100644 index 000000000000..714616c6ea3e --- /dev/null +++ b/examples/official-storybook/stories/addon-outline.stories.js @@ -0,0 +1,46 @@ +import React from 'react'; + +export default { + title: 'Addons/Outline', +}; + +const OutlineButton = () => ( + + + +); + +export const Basic = () => ( +
+
+ {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map((id) => ( +
+ {id} +
+ ))} +
+

+ Click the outline button in the toolbar to toggle outlines +

+
+); diff --git a/yarn.lock b/yarn.lock index b519b0612f54..a02ee4173527 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5777,6 +5777,7 @@ __metadata: "@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 @@ -5787,7 +5788,6 @@ __metadata: "@types/webpack-env": ^1.16.0 core-js: ^3.8.2 regenerator-runtime: ^0.13.7 - storybook-addon-outline: ^1.4.1 ts-dedent: ^2.0.0 peerDependencies: "@babel/core": ^7.9.6 @@ -5888,6 +5888,31 @@ __metadata: languageName: node linkType: hard +"@storybook/addon-outline@6.4.0-alpha.12, @storybook/addon-outline@workspace:addons/outline": + version: 0.0.0-use.local + resolution: "@storybook/addon-outline@workspace:addons/outline" + 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 + "@types/webpack-env": ^1.16.0 + core-js: ^3.8.2 + global: ^4.4.0 + regenerator-runtime: ^0.13.7 + ts-dedent: ^2.0.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 + languageName: unknown + linkType: soft + "@storybook/addon-postcss@npm:^2.0.0": version: 2.0.0 resolution: "@storybook/addon-postcss@npm:2.0.0" @@ -6109,26 +6134,6 @@ __metadata: languageName: unknown linkType: soft -"@storybook/addons@npm:^6.3.0": - version: 6.3.0 - resolution: "@storybook/addons@npm:6.3.0" - dependencies: - "@storybook/api": 6.3.0 - "@storybook/channels": 6.3.0 - "@storybook/client-logger": 6.3.0 - "@storybook/core-events": 6.3.0 - "@storybook/router": 6.3.0 - "@storybook/theming": 6.3.0 - core-js: ^3.8.2 - global: ^4.4.0 - regenerator-runtime: ^0.13.7 - peerDependencies: - react: ^16.8.0 || ^17.0.0 - react-dom: ^16.8.0 || ^17.0.0 - checksum: 465a3db6e0af9963dd8773db5eff9bf127673b35bb648d7405ecf2cb47fda52fb838a29aa65f52562e29d2d5304986637054751d6eb8ca36d8931d9dc3c17888 - languageName: node - linkType: hard - "@storybook/angular@6.4.0-alpha.12, @storybook/angular@workspace:*, @storybook/angular@workspace:app/angular": version: 0.0.0-use.local resolution: "@storybook/angular@workspace:app/angular" @@ -6243,37 +6248,6 @@ __metadata: languageName: unknown linkType: soft -"@storybook/api@npm:6.3.0, @storybook/api@npm:^6.3.0": - version: 6.3.0 - resolution: "@storybook/api@npm:6.3.0" - dependencies: - "@reach/router": ^1.3.4 - "@storybook/channels": 6.3.0 - "@storybook/client-logger": 6.3.0 - "@storybook/core-events": 6.3.0 - "@storybook/csf": 0.0.1 - "@storybook/router": 6.3.0 - "@storybook/semver": ^7.3.2 - "@storybook/theming": 6.3.0 - "@types/reach__router": ^1.3.7 - core-js: ^3.8.2 - fast-deep-equal: ^3.1.3 - global: ^4.4.0 - lodash: ^4.17.20 - memoizerific: ^1.11.3 - qs: ^6.10.0 - regenerator-runtime: ^0.13.7 - store2: ^2.12.0 - telejson: ^5.3.2 - ts-dedent: ^2.0.0 - util-deprecate: ^1.0.2 - peerDependencies: - react: ^16.8.0 || ^17.0.0 - react-dom: ^16.8.0 || ^17.0.0 - checksum: aa5a2bbc01e1d8231832abccb949738dc085200eee3711eeb5608a0cd494662de1317a9974fcbb69dd46d7bbb60d0df07220b5dd389ce93e7d8942a1bc6a2eac - languageName: node - linkType: hard - "@storybook/builder-webpack4@6.4.0-alpha.12, @storybook/builder-webpack4@workspace:lib/builder-webpack4": version: 0.0.0-use.local resolution: "@storybook/builder-webpack4@workspace:lib/builder-webpack4" @@ -6475,17 +6449,6 @@ __metadata: languageName: unknown linkType: soft -"@storybook/channels@npm:6.3.0": - version: 6.3.0 - resolution: "@storybook/channels@npm:6.3.0" - dependencies: - core-js: ^3.8.2 - ts-dedent: ^2.0.0 - util-deprecate: ^1.0.2 - checksum: 17ed14d3888de30ed6a8d2d919fe0c0524386b158373fa1672edd0ca16d77cbe9a6771f095d218f3fca3d99c08beed1fc12c372c17a77079c4b254be95415123 - languageName: node - linkType: hard - "@storybook/cli@6.4.0-alpha.12, @storybook/cli@workspace:*, @storybook/cli@workspace:lib/cli": version: 0.0.0-use.local resolution: "@storybook/cli@workspace:lib/cli" @@ -6568,16 +6531,6 @@ __metadata: languageName: unknown linkType: soft -"@storybook/client-logger@npm:6.3.0": - version: 6.3.0 - resolution: "@storybook/client-logger@npm:6.3.0" - dependencies: - core-js: ^3.8.2 - global: ^4.4.0 - checksum: 9eb412856ef04883747a0e9e37b17f6d02189898a93d21f46ee670d1fb38d65c538067b9f88a9b4328c3a34572f12053bcf777c67700177d6696f392f64a5d46 - languageName: node - linkType: hard - "@storybook/codemod@6.4.0-alpha.12, @storybook/codemod@workspace:*, @storybook/codemod@workspace:lib/codemod": version: 0.0.0-use.local resolution: "@storybook/codemod@workspace:lib/codemod" @@ -6636,41 +6589,6 @@ __metadata: languageName: unknown linkType: soft -"@storybook/components@npm:^6.3.0": - version: 6.3.0 - resolution: "@storybook/components@npm:6.3.0" - dependencies: - "@popperjs/core": ^2.6.0 - "@storybook/client-logger": 6.3.0 - "@storybook/csf": 0.0.1 - "@storybook/theming": 6.3.0 - "@types/color-convert": ^2.0.0 - "@types/overlayscrollbars": ^1.12.0 - "@types/react-syntax-highlighter": 11.0.5 - color-convert: ^2.0.1 - core-js: ^3.8.2 - fast-deep-equal: ^3.1.3 - global: ^4.4.0 - lodash: ^4.17.20 - markdown-to-jsx: ^7.1.3 - memoizerific: ^1.11.3 - overlayscrollbars: ^1.13.1 - polished: ^4.0.5 - prop-types: ^15.7.2 - react-colorful: ^5.1.2 - react-popper-tooltip: ^3.1.1 - react-syntax-highlighter: ^13.5.3 - react-textarea-autosize: ^8.3.0 - regenerator-runtime: ^0.13.7 - ts-dedent: ^2.0.0 - util-deprecate: ^1.0.2 - peerDependencies: - react: ^16.8.0 || ^17.0.0 - react-dom: ^16.8.0 || ^17.0.0 - checksum: aba5b6a88370a94208401816e2df0ebb394cc1d59f62b51b1462c4a057ed8c47da70d22bb2b808f54ba2758fe1c965b1d62aefac9408519e4a9a5a4f28fa4fb1 - languageName: node - linkType: hard - "@storybook/core-client@6.4.0-alpha.12, @storybook/core-client@workspace:lib/core-client": version: 0.0.0-use.local resolution: "@storybook/core-client@workspace:lib/core-client" @@ -6775,15 +6693,6 @@ __metadata: languageName: unknown linkType: soft -"@storybook/core-events@npm:6.3.0, @storybook/core-events@npm:^6.3.0": - version: 6.3.0 - resolution: "@storybook/core-events@npm:6.3.0" - dependencies: - core-js: ^3.8.2 - checksum: 116ddf249a3968450b12c625487493281a293f85c4183887b3d24baf1623ddabea00f7dc62d80225264a968d9ef02fcb7415540e3763e512371b785b467279eb - languageName: node - linkType: hard - "@storybook/core-server@6.4.0-alpha.12, @storybook/core-server@workspace:lib/core-server": version: 0.0.0-use.local resolution: "@storybook/core-server@workspace:lib/core-server" @@ -7560,27 +7469,6 @@ __metadata: languageName: unknown linkType: soft -"@storybook/router@npm:6.3.0": - version: 6.3.0 - resolution: "@storybook/router@npm:6.3.0" - dependencies: - "@reach/router": ^1.3.4 - "@storybook/client-logger": 6.3.0 - "@types/reach__router": ^1.3.7 - core-js: ^3.8.2 - fast-deep-equal: ^3.1.3 - global: ^4.4.0 - lodash: ^4.17.20 - memoizerific: ^1.11.3 - qs: ^6.10.0 - ts-dedent: ^2.0.0 - peerDependencies: - react: ^16.8.0 || ^17.0.0 - react-dom: ^16.8.0 || ^17.0.0 - checksum: 91bf67797024a46c1466eee63250cbccc3a72ab4bee4b6c59aec388289d938345a4f7ce2586ce3c9440fa00941e3d506cd84ad0cf0d2f630c823e386fefcf2c3 - languageName: node - linkType: hard - "@storybook/semver@npm:^7.3.2": version: 7.3.2 resolution: "@storybook/semver@npm:7.3.2" @@ -7693,29 +7581,6 @@ __metadata: languageName: unknown linkType: soft -"@storybook/theming@npm:6.3.0": - version: 6.3.0 - resolution: "@storybook/theming@npm:6.3.0" - dependencies: - "@emotion/core": ^10.1.1 - "@emotion/is-prop-valid": ^0.8.6 - "@emotion/styled": ^10.0.27 - "@storybook/client-logger": 6.3.0 - core-js: ^3.8.2 - deep-object-diff: ^1.1.0 - emotion-theming: ^10.0.27 - global: ^4.4.0 - memoizerific: ^1.11.3 - polished: ^4.0.5 - resolve-from: ^5.0.0 - ts-dedent: ^2.0.0 - peerDependencies: - react: ^16.8.0 || ^17.0.0 - react-dom: ^16.8.0 || ^17.0.0 - checksum: df3d6a32c437777ab8672e5615171d220ee4a8933c1b732f9f7a94a6028f59b6e4141ac6775020a58874b2e6d737a5e4d929d298d62ff2371e33a826dcd1e2d2 - languageName: node - linkType: hard - "@storybook/ui@6.4.0-alpha.12, @storybook/ui@workspace:*, @storybook/ui@workspace:lib/ui": version: 0.0.0-use.local resolution: "@storybook/ui@workspace:lib/ui" @@ -39744,22 +39609,6 @@ resolve@1.19.0: languageName: node linkType: hard -"storybook-addon-outline@npm:^1.4.1": - version: 1.4.1 - resolution: "storybook-addon-outline@npm:1.4.1" - dependencies: - "@storybook/addons": ^6.3.0 - "@storybook/api": ^6.3.0 - "@storybook/components": ^6.3.0 - "@storybook/core-events": ^6.3.0 - ts-dedent: ^2.1.1 - peerDependencies: - react: ^16.8.0 || ^17.0.0 - react-dom: ^16.8.0 || ^17.0.0 - checksum: 41c98cc3e68267e141c2889815c78a6f8413ab41135179064e4a2dfe0ea540e6447fcfcbabee501f25d66ccbe8af063202f4a0d97f9487f6a7681ce4b8f9c7f0 - languageName: node - linkType: hard - "storybook@workspace:lib/cli-storybook": version: 0.0.0-use.local resolution: "storybook@workspace:lib/cli-storybook" @@ -41736,13 +41585,6 @@ resolve@1.19.0: languageName: node linkType: hard -"ts-dedent@npm:^2.1.1": - version: 2.1.1 - resolution: "ts-dedent@npm:2.1.1" - checksum: 7ac68dbc2e864db6e3f0500a8b6af5bf775020bfe09816cf647469e06acdcb76d2a24b1b0211614c3c44e0978aa081a51a3dde6b8f211a68f945cbc177f7f9c2 - languageName: node - linkType: hard - "ts-essentials@npm:^2.0.3": version: 2.0.12 resolution: "ts-essentials@npm:2.0.12"