diff --git a/.storybook/config.js b/.storybook/config.js index 3357948..8bc0a15 100644 --- a/.storybook/config.js +++ b/.storybook/config.js @@ -2,7 +2,9 @@ import { configure, addDecorator, setAddon } from '@storybook/react'; import { withKnobs } from '@storybook/addon-knobs'; import HelixUI from 'helix-ui'; import 'helix-ui/dist/css/helix-ui.min.css'; +import { jsxDecorator } from 'storybook-addon-jsx'; +addDecorator(jsxDecorator); addDecorator(withKnobs); // Requires require.context from Webpack diff --git a/.storybook/manager.js b/.storybook/manager.js index 027eed6..efc2808 100644 --- a/.storybook/manager.js +++ b/.storybook/manager.js @@ -4,6 +4,7 @@ import '@storybook/addon-knobs/register'; import '@storybook/addon-actions/register'; import '@storybook/addon-viewport/register'; import '@storybook/addon-options/register'; +import 'storybook-addon-jsx/register'; addons.setConfig({ theme: helixTheme, diff --git a/README.md b/README.md index b4f5aa5..9b87c8a 100644 --- a/README.md +++ b/README.md @@ -10,8 +10,6 @@ A React wrapper of the [Helix UI Webcomponents Library](https://github.com/HelixDesignSystem/helix-ui/) 🚀 Alpha release is [here](https://helix-react.netlify.app)! Check out how to get started below! 🌻 - -
@@ -25,7 +23,6 @@ - [Helix UI Webcomponent Snippet From Documentation](#helix-ui-webcomponent-snippet-from-documentation) - [Our Implementation](#our-implementation) - [Guiding Principles](#guiding-principles) -- [Storybook](#-storybook) - [Issues](#issues) - [🐛 Bugs](#-bugs) - [💡 Feature Requests](#-feature-requests) @@ -110,6 +107,7 @@ Follow the [Getting Started with HelixUI](https://helixdesignsystem.github.io/he ``` +[See Helix-React Storybook docs for more examples](https://helix-react.netlify.app/) ## Guiding Principles @@ -118,27 +116,6 @@ Each wrapper corresponds with a component listed on the [Helix UI documentation] ![helix-ui-documentation](https://user-images.githubusercontent.com/22566333/82083617-07f70700-96b8-11ea-9581-da1796737e52.png) -## 📚 Storybook -[Storybook](https://storybook.js.org/) is an open source tool for developing UI components -in isolation for React, Vue, and Angular. -You can use this as a playground for all our components. - -1. Install Dependencies - -```bash -yarn install -``` - -2. Run Storybook - -```bash -npm start -``` -The script should automatically open Storybook in your browser, but you can always navigate to `http://localhost:6006/?path=/story` - -3. Play Around -Screen Shot 2020-05-15 at 2 32 35 PM - ## Issues _Looking to contribute? Look for the [Good First Issue][good-first-issue] @@ -161,6 +138,27 @@ a 👍. This helps maintainers prioritize what to work on. For questions related to using the library, please file an issue on GitHub. +## 📚 Setting up a Local Dev Environment +[Storybook](https://storybook.js.org/) is an open source tool for developing UI components +in isolation for React, Vue, and Angular. +You can use this as a playground for all our components. + +1. Install Dependencies + +```bash +yarn install +``` + +2. Run Storybook + +```bash +npm start +``` +The script should automatically open Storybook in your browser, but you can always navigate to `http://localhost:6006/?path=/story` + +3. Play Around +Screen Shot 2020-05-15 at 2 32 35 PM + ## Contributors Thanks goes to these people: diff --git a/package.json b/package.json index 342ba1e..5a10f81 100644 --- a/package.json +++ b/package.json @@ -58,13 +58,14 @@ "husky": "^4.2.5", "microbundle": "^0.12.3", "prettier": "^2.0.4", + "prop-types": "^15.7.2", "react": "^16.6.3", "react-dom": "^16.6.3", - "prop-types": "^15.7.2" + "storybook-addon-jsx": "^7.3.4" }, "dependencies": { - "use-onclickoutside": "^0.3", - "classnames": "^2.x" + "classnames": "^2.x", + "use-onclickoutside": "^0.3" }, "peerDependencies": { "helix-ui": "^0.24.0", diff --git a/src/Alert/stories.js b/src/Alert/stories.js index e852182..5faa6f3 100644 --- a/src/Alert/stories.js +++ b/src/Alert/stories.js @@ -1,8 +1,13 @@ import React from 'react'; -import { storiesOf } from '@storybook/react'; +import { addParameters, storiesOf } from '@storybook/react'; import { boolean, select, text } from '@storybook/addon-knobs/react'; import Alert from './index'; import { action } from '@storybook/addon-actions'; +import { callback } from '../storyUtils'; + +addParameters({ + jsx: { skip: 0 }, +}); const TYPES = { info: 'info', @@ -24,8 +29,8 @@ storiesOf('Alert', module).add('All Knobs', () => { {...(status && { status })} {...(persist && { persist })} {...(type && { type })} - onDismiss={action('onDismiss')} - onSubmit={action('onSubmit')} + onDismiss={callback(action('onDismiss'))} + onSubmit={callback(action('onSubmit'))} > {content} diff --git a/src/Breadcrumb/stories.js b/src/Breadcrumb/stories.js index 56dfd0f..d884a11 100644 --- a/src/Breadcrumb/stories.js +++ b/src/Breadcrumb/stories.js @@ -1,7 +1,11 @@ import React from 'react'; -import { storiesOf } from '@storybook/react'; +import { addParameters, storiesOf } from '@storybook/react'; import Breadcrumb from './index'; +addParameters({ + jsx: { skip: 0 }, +}); + storiesOf('Breadcrumb', module) .add('Multiple Breadcrumbs', () => { return ( diff --git a/src/Button/stories.js b/src/Button/stories.js index 4eed5fa..3a6d9c9 100644 --- a/src/Button/stories.js +++ b/src/Button/stories.js @@ -2,9 +2,13 @@ import Button from './'; import { Icons } from '../Icon'; import React from 'react'; import centered from '@storybook/addon-centered/react'; -import { storiesOf } from '@storybook/react'; +import { addParameters, storiesOf } from '@storybook/react'; import { boolean, select, text } from '@storybook/addon-knobs/react'; +addParameters({ + jsx: { skip: 2 }, +}); + const SIZES = { small: 'Small', '': 'Medium', diff --git a/src/Checkbox/stories.js b/src/Checkbox/stories.js index 6728c7d..6b5b606 100644 --- a/src/Checkbox/stories.js +++ b/src/Checkbox/stories.js @@ -1,10 +1,13 @@ import React from 'react'; import { action } from '@storybook/addon-actions'; import { boolean, text } from '@storybook/addon-knobs/react'; -import { storiesOf } from '@storybook/react'; - +import { addParameters, storiesOf } from '@storybook/react'; import Checkbox from './index'; +import { callback } from '../storyUtils'; +addParameters({ + jsx: { skip: 0 }, +}); storiesOf('Checkbox', module).add('All Knobs', () => { let label = text('label', 'check me out'); let checked = boolean('checked', false); @@ -19,7 +22,7 @@ storiesOf('Checkbox', module).add('All Knobs', () => { {...(indeterminate && { indeterminate })} {...(required && { required })} {...(label && { label })} - onChange={action('onChange')} + onChange={callback(action('onChange'))} /> ); }); diff --git a/src/ChoiceTile/stories.js b/src/ChoiceTile/stories.js index d6b3288..ca5ab5f 100644 --- a/src/ChoiceTile/stories.js +++ b/src/ChoiceTile/stories.js @@ -2,10 +2,13 @@ import React from 'react'; import { action } from '@storybook/addon-actions'; import { optionsKnob as options } from '@storybook/addon-knobs'; import { boolean, select, text } from '@storybook/addon-knobs/react'; -import { storiesOf } from '@storybook/react'; - +import { addParameters, storiesOf } from '@storybook/react'; import ChoiceTile from './index'; -import { getShortText } from '../storyUtils'; +import { callback, getShortText } from '../storyUtils'; + +addParameters({ + jsx: { skip: 1 }, +}); const SIZES = { small: 'small', @@ -45,7 +48,7 @@ storiesOf('Choice Tile', module).add('All Knobs', () => { {...(size && { size })} icon={icon} name="choiceTileDemo" - onChange={action('onChange')} + onChange={callback(action('onChange'))} style={{ width: 200, float: 'left' }} title={title || defaultTitle} > diff --git a/src/Drawer/stories.js b/src/Drawer/stories.js index 06eb82a..64d930b 100644 --- a/src/Drawer/stories.js +++ b/src/Drawer/stories.js @@ -1,12 +1,15 @@ import React from 'react'; import { action } from '@storybook/addon-actions'; import { boolean, select, text } from '@storybook/addon-knobs/react'; -import { storiesOf } from '@storybook/react'; - +import { addParameters, storiesOf } from '@storybook/react'; import Drawer from './index'; import Button from '../Button'; import Div from '../Div'; -import { getLongText } from '../storyUtils'; +import { callback, getLongText } from '../storyUtils'; + +addParameters({ + jsx: { skip: 0 }, +}); const SIZES = { small: 'small', @@ -34,8 +37,8 @@ storiesOf('Drawer', module).add('All Knobs', () => { {
{header || defaultHeader}
} diff --git a/src/Icon/stories.js b/src/Icon/stories.js index 5618d2c..5251d55 100644 --- a/src/Icon/stories.js +++ b/src/Icon/stories.js @@ -2,7 +2,11 @@ import React from 'react'; import Icon, { Icons } from './'; import centered from '@storybook/addon-centered/react'; import { select } from '@storybook/addon-knobs/react'; -import { storiesOf } from '@storybook/react'; +import { addParameters, storiesOf } from '@storybook/react'; + +addParameters({ + jsx: { skip: 2 }, +}); storiesOf('Icon', module) .addDecorator(centered) diff --git a/src/Modal/stories.js b/src/Modal/stories.js index 2e3792a..39d812d 100644 --- a/src/Modal/stories.js +++ b/src/Modal/stories.js @@ -1,11 +1,15 @@ import React from 'react'; -import { storiesOf } from '@storybook/react'; +import { addParameters, storiesOf } from '@storybook/react'; import { action } from '@storybook/addon-actions'; import { boolean, select, text } from '@storybook/addon-knobs/react'; import Modal from './index'; import Div from '../Div'; import Button from '../Button'; -import { getLongText } from '../storyUtils'; +import { callback, getLongText } from '../storyUtils'; + +addParameters({ + jsx: { skip: 0 }, +}); const SIZES = { small: 'small', @@ -23,20 +27,18 @@ storiesOf('Modal', module).add('All Knobs', () => { const smallText = 'This is the body of a demo modal. Interaction with content behind this modal cannot take place until this modal is closed.\n'; const longText = [1, 2, 3, 4, 5].map(() =>

{getLongText()}

); - const defaultFooter = ( - <> - - - - ); + const defaultFooter = [ + , + , + ]; return ( {header && (
diff --git a/src/Pill/stories.js b/src/Pill/stories.js index 4c8d14a..1ea8bbf 100644 --- a/src/Pill/stories.js +++ b/src/Pill/stories.js @@ -1,16 +1,21 @@ import React from 'react'; import { action } from '@storybook/addon-actions'; import { boolean, text, select } from '@storybook/addon-knobs/react'; -import { storiesOf } from '@storybook/react'; +import { addParameters, storiesOf } from '@storybook/react'; import Pill from './index'; import Status from './Status'; +import { callback } from '../storyUtils'; + +addParameters({ + jsx: { skip: 0 }, +}); storiesOf('Pill', module) .add('All Knobs', () => { let persist = boolean('persist', false); let pillText = text('pill text', 'status: unicorns!'); return ( - + {pillText} ); @@ -20,7 +25,7 @@ storiesOf('Pill', module) let pillText = text('pill text', 'default'); let variant = select('variant', ['default', 'grey', 'purple', 'subdued']); return ( - + {pillText} ); diff --git a/src/Popover/stories.js b/src/Popover/stories.js index 3caf2a6..95b4297 100644 --- a/src/Popover/stories.js +++ b/src/Popover/stories.js @@ -1,15 +1,19 @@ import React from 'react'; -import { storiesOf } from '@storybook/react'; +import { addParameters, storiesOf } from '@storybook/react'; import { action } from '@storybook/addon-actions'; import centered from '@storybook/addon-centered/react'; import { boolean, select, text } from '@storybook/addon-knobs/react'; import Popover from '.'; import Div from '../Div'; import Button from '../Button'; -import { getLongText } from '../storyUtils'; +import { callback, getLongText } from '../storyUtils'; import { POSITIONS } from '../constants'; import Disclosure from '../Disclosure'; +addParameters({ + jsx: { skip: 3 }, +}); + storiesOf('Popover', module) .addDecorator(centered) .add('All Knobs', () => { @@ -20,13 +24,10 @@ storiesOf('Popover', module) const smallText = 'This is the body of a demo popover\n'; const longText = [1, 2, 3, 4, 5].map(() =>

{getLongText()}

); - const defaultFooter = ( - <> - - - - ); - + const defaultFooter = [ + , + , + ]; return ( <> @@ -35,14 +36,14 @@ storiesOf('Popover', module) {header &&
{header}
} -
- {smallText} - {scroll ? longText : null} +
+ {!scroll && smallText} + {scroll && longText}
{
{footer || defaultFooter}
} diff --git a/src/Radio/stories.js b/src/Radio/stories.js index 222d4c7..4525c0a 100644 --- a/src/Radio/stories.js +++ b/src/Radio/stories.js @@ -1,10 +1,15 @@ import React from 'react'; import { action } from '@storybook/addon-actions'; import { boolean, text } from '@storybook/addon-knobs/react'; -import { storiesOf } from '@storybook/react'; +import { addParameters, storiesOf } from '@storybook/react'; import Radio from './index'; import RadioSet from './RadioSet'; +import { callback } from '../storyUtils'; + +addParameters({ + jsx: { skip: 0 }, +}); storiesOf('Radio', module) .add('All Knobs', () => { @@ -19,7 +24,7 @@ storiesOf('Radio', module) {...(disabled && { disabled })} {...(required && { required })} {...(label && { label })} - onChange={action('onChange')} + onChange={callback(action('onChange'))} /> ); }) @@ -37,7 +42,7 @@ storiesOf('Radio', module) {...(checked && { checked })} {...(disabled && { disabled })} {...(required && { required })} - onChange={action('onChange')} + onChange={callback(action('onChange'))} /> ); diff --git a/src/Search/stories.js b/src/Search/stories.js index 052ba06..56b7467 100644 --- a/src/Search/stories.js +++ b/src/Search/stories.js @@ -1,12 +1,16 @@ import { action } from '@storybook/addon-actions'; import { boolean, text, select } from '@storybook/addon-knobs'; -import { storiesOf } from '@storybook/react'; +import { addParameters, storiesOf } from '@storybook/react'; import React, { useState } from 'react'; import Search from '../Search'; import SearchAssist from './SearchAssist'; -import { InputContainer } from '../storyUtils'; +import { callback, InputContainer } from '../storyUtils'; import { POSITIONS } from '../constants'; +addParameters({ + jsx: { skip: 1 }, +}); + storiesOf('Search', module) .add('All Knobs', () => { let disabled = boolean('disabled', false); @@ -24,7 +28,7 @@ storiesOf('Search', module) {...(optional && { optional })} {...(required && { required })} {...(position && { position })} - onChange={action('change')} + onChange={callback(action('change'))} autoComplete="off" /> @@ -45,11 +49,11 @@ storiesOf('Search', module) onChange={(e) => setValue(e.target.value)} value={value} onClear={(e) => { - action('onClear'); + callback(action('onClear')); setValue(''); }} - onFocus={(e) => action('onFocus')} - onBlur={(e) => action('onBlur')} + onFocus={(e) => callback(action('onFocus'))} + onBlur={(e) => callback(action('onBlur'))} autoComplete="off" {...(disabled && { disabled })} {...(label && { label })} diff --git a/src/Select/stories.js b/src/Select/stories.js index 7d8d983..abe7c60 100644 --- a/src/Select/stories.js +++ b/src/Select/stories.js @@ -1,11 +1,14 @@ import centered from '@storybook/addon-centered/react'; import { action } from '@storybook/addon-actions'; -import { boolean, text } from '@storybook/addon-knobs'; -import { storiesOf } from '@storybook/react'; +import { boolean } from '@storybook/addon-knobs'; +import { storiesOf, addParameters } from '@storybook/react'; import React from 'react'; - import Select from '../Select'; -import { InputContainer } from '../storyUtils'; +import { callback, InputContainer } from '../storyUtils'; + +addParameters({ + jsx: { skip: 3 }, +}); storiesOf('Select', module) .addDecorator(centered) @@ -13,34 +16,21 @@ storiesOf('Select', module) let disabled = boolean('disabled', false); let optional = boolean('optional', false); let required = boolean('required', false); - return ( - + + + ); }); - -const Demo = (props) => { - return ( - - - - ); -}; - -const Options = () => { - return ( - - - - - - - ); -}; diff --git a/src/Switch/stories.js b/src/Switch/stories.js index bcf6974..a2853d2 100644 --- a/src/Switch/stories.js +++ b/src/Switch/stories.js @@ -1,10 +1,14 @@ import React from 'react'; import { action } from '@storybook/addon-actions'; import { boolean, text } from '@storybook/addon-knobs/react'; -import { storiesOf } from '@storybook/react'; -import { InputContainer } from '../storyUtils'; +import { addParameters, storiesOf } from '@storybook/react'; +import { callback, InputContainer } from '../storyUtils'; import Switch from './index'; +addParameters({ + jsx: { skip: 1 }, +}); + storiesOf('Switch', module).add('All Knobs', () => { let disabled = boolean('disabled', false); let invalid = boolean('invalid', false); @@ -18,7 +22,7 @@ storiesOf('Switch', module).add('All Knobs', () => { {...(invalid && { invalid })} {...(onLabel && { onLabel })} {...(offLabel && { offLabel })} - onChange={action('onChange')} + onChange={callback(action('onChange'))} /> ); diff --git a/src/Text/stories.js b/src/Text/stories.js index 2c78d93..e93093d 100644 --- a/src/Text/stories.js +++ b/src/Text/stories.js @@ -1,9 +1,13 @@ import React from 'react'; import { action } from '@storybook/addon-actions'; import { boolean, text } from '@storybook/addon-knobs/react'; -import { storiesOf } from '@storybook/react'; +import { addParameters, storiesOf } from '@storybook/react'; import Text from './index'; -import { InputContainer } from '../storyUtils'; +import { callback, InputContainer } from '../storyUtils'; + +addParameters({ + jsx: { skip: 2 }, +}); storiesOf('Text', module).add('All Knobs', () => { let disabled = boolean('disabled', false); @@ -21,12 +25,11 @@ storiesOf('Text', module).add('All Knobs', () => { {...(required && { required })} {...(optional && { optional })} label="Username" - onChange={action('onChange')} + onChange={callback(action('onChange'))} /> - -

Prefix

- +
+

Prefix

{ {...(optional && { optional })} {...(prefix && { prefix })} label="twitter handle" - onChange={action('onChange')} + onChange={callback(action('onChange'))} /> - -

Suffix

- +
+

Suffix

{ {...(optional && { optional })} {...(suffix && { suffix })} label="Subdomain" - onChange={action('onChange')} + onChange={callback(action('onChange'))} /> diff --git a/src/TextArea/stories.js b/src/TextArea/stories.js index deffa40..1cfb19f 100644 --- a/src/TextArea/stories.js +++ b/src/TextArea/stories.js @@ -1,9 +1,13 @@ import React from 'react'; import { action } from '@storybook/addon-actions'; import { boolean, text } from '@storybook/addon-knobs/react'; -import { storiesOf } from '@storybook/react'; +import { addParameters, storiesOf } from '@storybook/react'; import TextArea from './index'; -import { InputContainer } from '../storyUtils'; +import { callback, InputContainer } from '../storyUtils'; + +addParameters({ + jsx: { skip: 1 }, +}); storiesOf('TextArea', module).add('All Knobs', () => { let disabled = boolean('disabled', false); @@ -18,7 +22,7 @@ storiesOf('TextArea', module).add('All Knobs', () => { {...(disabled && { disabled })} {...(required && { required })} {...(optional && { optional })} - onChange={action('onChange')} + onChange={callback(action('onChange'))} /> ); diff --git a/src/Toast/stories.js b/src/Toast/stories.js index a1a22f7..fa62c09 100644 --- a/src/Toast/stories.js +++ b/src/Toast/stories.js @@ -1,8 +1,13 @@ import React from 'react'; -import { storiesOf } from '@storybook/react'; +import { addParameters, storiesOf } from '@storybook/react'; import { select, text } from '@storybook/addon-knobs/react'; import Toast from './index'; import { action } from '@storybook/addon-actions'; +import { callback } from '../storyUtils'; + +addParameters({ + jsx: { skip: 0 }, +}); const TYPES = { info: 'info', @@ -20,8 +25,8 @@ storiesOf('Toast', module).add('All Knobs', () => { {...(cta && { cta })} {...(status && { status })} {...(type && { type })} - onDismiss={action('onDismiss')} - onSubmit={action('onSubmit')} + onDismiss={callback(action('onDismiss'))} + onSubmit={callback(action('onSubmit'))} > {content} diff --git a/src/Tooltip/stories.js b/src/Tooltip/stories.js index c525baf..1ba7777 100644 --- a/src/Tooltip/stories.js +++ b/src/Tooltip/stories.js @@ -1,10 +1,15 @@ import centered from '@storybook/addon-centered/react'; -import { storiesOf } from '@storybook/react'; +import { addParameters, storiesOf } from '@storybook/react'; import React from 'react'; import { action } from '@storybook/addon-actions'; import { select, text } from '@storybook/addon-knobs/react'; import Tooltip from '../Tooltip'; import { POSITIONS } from '../constants'; +import { callback } from '../storyUtils'; + +addParameters({ + jsx: { skip: 3 }, +}); const id = 'tooltipDemo'; @@ -20,9 +25,9 @@ storiesOf('Tooltip', module) {content} diff --git a/src/storyUtils.js b/src/storyUtils.js index 2477fa1..0c4a03d 100644 --- a/src/storyUtils.js +++ b/src/storyUtils.js @@ -19,3 +19,13 @@ export const getLongText = () => ` export const InputContainer = ({ children }) => (
{children}
); + +/** + * Overrides the toString on a function so that it addon-jsx prints + * the callbacks in a copy-paste-able way. + */ +export const callback = (fn) => { + /** A toString to render the function in storybook */ + fn.toString = () => '() => {}'; + return fn; +}; diff --git a/yarn.lock b/yarn.lock index f8305df..a0673de 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1680,6 +1680,11 @@ lodash "^4.17.13" to-fast-properties "^2.0.0" +"@base2/pretty-print-object@1.0.0": + version "1.0.0" + resolved "https://registry.yarnpkg.com/@base2/pretty-print-object/-/pretty-print-object-1.0.0.tgz#860ce718b0b73f4009e153541faff2cb6b85d047" + integrity sha512-4Th98KlMHr5+JkxfcoDT//6vY8vM+iSPrLNpHhRyLx2CFYi8e2RfqPLdpbnpo0Q5lQC5hNB79yes07zb02fvCw== + "@emotion/cache@^10.0.27", "@emotion/cache@^10.0.9": version "10.0.29" resolved "https://registry.yarnpkg.com/@emotion/cache/-/cache-10.0.29.tgz#87e7e64f412c060102d589fe7c6dc042e6f9d1e0" @@ -3947,6 +3952,14 @@ concat-with-sourcemaps@^1.1.0: dependencies: source-map "^0.6.1" +config-chain@^1.1.12: + version "1.1.12" + resolved "https://registry.yarnpkg.com/config-chain/-/config-chain-1.1.12.tgz#0fde8d091200eb5e808caf25fe618c02f48e4efa" + integrity sha512-a1eOIcu8+7lUInge4Rpf/n4Krkf3Dd9lqhljRzII1/Zno/kRtUWnznPO3jOKBmTEktkt3fkxisUcivoj0ebzoA== + dependencies: + ini "^1.3.4" + proto-list "~1.2.1" + console-browserify@^1.1.0: version "1.1.0" resolved "https://registry.yarnpkg.com/console-browserify/-/console-browserify-1.1.0.tgz#f0241c45730a9fc6323b206dbf38edc741d0bb10" @@ -4549,6 +4562,16 @@ duplexify@^3.4.2, duplexify@^3.6.0: readable-stream "^2.0.0" stream-shift "^1.0.0" +editorconfig@^0.15.3: + version "0.15.3" + resolved "https://registry.yarnpkg.com/editorconfig/-/editorconfig-0.15.3.tgz#bef84c4e75fb8dcb0ce5cee8efd51c15999befc5" + integrity sha512-M9wIMFx96vq0R4F+gRpY3o2exzb8hEj/n9S8unZtHSvYjibBp/iMufSzvmOcV/laG0ZtuTVGtiJggPOSW2r93g== + dependencies: + commander "^2.19.0" + lru-cache "^4.1.5" + semver "^5.6.0" + sigmund "^1.0.1" + ee-first@1.1.1: version "1.1.1" resolved "https://registry.yarnpkg.com/ee-first/-/ee-first-1.1.1.tgz#590c61156b0ae2f4f0255732a158b266bc56b21d" @@ -5694,7 +5717,7 @@ inherits@2.0.3: version "2.0.3" resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.3.tgz#633c2c83e3da42a502f52466022480f4208261de" -ini@^1.3.5, ini@~1.3.0: +ini@^1.3.4, ini@^1.3.5, ini@~1.3.0: version "1.3.5" resolved "https://registry.yarnpkg.com/ini/-/ini-1.3.5.tgz#eee25f56db1c9ec6085e0c22778083f596abf927" @@ -5969,6 +5992,11 @@ is-plain-obj@^1.0.0: version "1.1.0" resolved "https://registry.yarnpkg.com/is-plain-obj/-/is-plain-obj-1.1.0.tgz#71a50c8429dfca773c92a390a4a03b39fcd51d3e" +is-plain-object@3.0.1: + version "3.0.1" + resolved "https://registry.yarnpkg.com/is-plain-object/-/is-plain-object-3.0.1.tgz#662d92d24c0aa4302407b0d45d21f2251c85f85b" + integrity sha512-Xnpx182SBMrr/aBik8y+GuR4U1L9FqMSojwDQwPMmxyC6bvEqly9UBCxhauBF5vNh2gwWJNX6oDV7O+OM4z34g== + is-plain-object@^2.0.1, is-plain-object@^2.0.3, is-plain-object@^2.0.4: version "2.0.4" resolved "https://registry.yarnpkg.com/is-plain-object/-/is-plain-object-2.0.4.tgz#2c163b3fafb1b606d9d17928f05c2a1c38e07677" @@ -6106,6 +6134,17 @@ jest-worker@^25.1.0: merge-stream "^2.0.0" supports-color "^7.0.0" +js-beautify@^1.8.8: + version "1.13.0" + resolved "https://registry.yarnpkg.com/js-beautify/-/js-beautify-1.13.0.tgz#a056d5d3acfd4918549aae3ab039f9f3c51eebb2" + integrity sha512-/Tbp1OVzZjbwzwJQFIlYLm9eWQ+3aYbBXLSaqb1mEJzhcQAfrqMMQYtjb6io+U6KpD0ID4F+Id3/xcjH3l/sqA== + dependencies: + config-chain "^1.1.12" + editorconfig "^0.15.3" + glob "^7.1.3" + mkdirp "^1.0.4" + nopt "^5.0.0" + js-tokens@^3.0.0, js-tokens@^3.0.2: version "3.0.2" resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-3.0.2.tgz#9866df395102130e38f7f996bceb65443209c25b" @@ -6344,6 +6383,14 @@ lowlight@~1.11.0: fault "^1.0.2" highlight.js "~9.13.0" +lru-cache@^4.1.5: + version "4.1.5" + resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-4.1.5.tgz#8bbe50ea85bed59bc9e33dcab8235ee9bcf443cd" + integrity sha512-sWZlbEP2OsHNkXrMl5GYk/jKk70MBng6UU4YI/qGDYbgf6YbP4EvmqISbXCoJiRKs+1bSpFHVgQxvJ17F2li5g== + dependencies: + pseudomap "^1.0.2" + yallist "^2.1.2" + lru-cache@^5.1.1: version "5.1.1" resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-5.1.1.tgz#1da27e6710271947695daf6848e847f01d84b920" @@ -6714,6 +6761,11 @@ mkdirp@^0.5.3: dependencies: minimist "^1.2.5" +mkdirp@^1.0.4: + version "1.0.4" + resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-1.0.4.tgz#3eb5ed62622756d79a5f0e2a221dfebad75c2f7e" + integrity sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw== + module-details-from-path@^1.0.3: version "1.0.3" resolved "https://registry.yarnpkg.com/module-details-from-path/-/module-details-from-path-1.0.3.tgz#114c949673e2a8a35e9d35788527aa37b679da2b" @@ -6882,6 +6934,13 @@ nopt@^4.0.1: abbrev "1" osenv "^0.1.4" +nopt@^5.0.0: + version "5.0.0" + resolved "https://registry.yarnpkg.com/nopt/-/nopt-5.0.0.tgz#530942bb58a512fccafe53fe210f13a25355dc88" + integrity sha512-Tbj67rffqceeLpcRXrT7vKAN8CwfPeIBgM7E6iBkmKLV7bEMwpGgYLGv0jACUsECaa/vuxP0IjEont6umdMgtQ== + dependencies: + abbrev "1" + normalize-path@^2.1.1: version "2.1.1" resolved "https://registry.yarnpkg.com/normalize-path/-/normalize-path-2.1.1.tgz#1ab28b556e198363a8c1a6f7e6fa20137fe6aed9" @@ -7885,6 +7944,11 @@ property-information@^5.0.0: dependencies: xtend "^4.0.0" +proto-list@~1.2.1: + version "1.2.4" + resolved "https://registry.yarnpkg.com/proto-list/-/proto-list-1.2.4.tgz#212d5bfe1318306a420f6402b8e26ff39647a849" + integrity sha1-IS1b/hMYMGpCD2QCuOJv85ZHqEk= + proxy-addr@~2.0.5: version "2.0.6" resolved "https://registry.yarnpkg.com/proxy-addr/-/proxy-addr-2.0.6.tgz#fdc2336505447d3f2f2c638ed272caf614bbb2bf" @@ -7896,6 +7960,11 @@ prr@~1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/prr/-/prr-1.0.1.tgz#d3fc114ba06995a45ec6893f484ceb1d78f5f476" +pseudomap@^1.0.2: + version "1.0.2" + resolved "https://registry.yarnpkg.com/pseudomap/-/pseudomap-1.0.2.tgz#f052a28da70e618917ef0a8ac34c1ae5a68286b3" + integrity sha1-8FKijacOYYkX7wqKw0wa5aaChrM= + public-encrypt@^4.0.0: version "4.0.2" resolved "https://registry.yarnpkg.com/public-encrypt/-/public-encrypt-4.0.2.tgz#46eb9107206bf73489f8b85b69d91334c6610994" @@ -8093,6 +8162,14 @@ react-draggable@^4.0.3: classnames "^2.2.5" prop-types "^15.6.0" +react-element-to-jsx-string@^14.3.1: + version "14.3.2" + resolved "https://registry.yarnpkg.com/react-element-to-jsx-string/-/react-element-to-jsx-string-14.3.2.tgz#c0000ed54d1f8b4371731b669613f2d4e0f63d5c" + integrity sha512-WZbvG72cjLXAxV7VOuSzuHEaI3RHj10DZu8EcKQpkKcAj7+qAkG5XUeSdX5FXrA0vPrlx0QsnAzZEBJwzV0e+w== + dependencies: + "@base2/pretty-print-object" "1.0.0" + is-plain-object "3.0.1" + react-error-overlay@^6.0.3: version "6.0.7" resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.7.tgz#1dcfb459ab671d53f660a991513cb2f0a0553108" @@ -8802,6 +8879,11 @@ side-channel@^1.0.2: es-abstract "^1.17.0-next.1" object-inspect "^1.7.0" +sigmund@^1.0.1: + version "1.0.1" + resolved "https://registry.yarnpkg.com/sigmund/-/sigmund-1.0.1.tgz#3ff21f198cad2175f9f3b781853fd94d0d19b590" + integrity sha1-P/IfGYytIXX587eBhT/ZTQ0ZtZA= + signal-exit@^3.0.0, signal-exit@^3.0.2: version "3.0.2" resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.2.tgz#b5fdc08f1287ea1178628e415e25132b73646c6d" @@ -8968,6 +9050,21 @@ store2@^2.7.1: version "2.10.0" resolved "https://registry.yarnpkg.com/store2/-/store2-2.10.0.tgz#46b82bb91878daf1b0d56dec2f1d41e54d5103cf" +storybook-addon-jsx@^7.3.4: + version "7.3.4" + resolved "https://registry.yarnpkg.com/storybook-addon-jsx/-/storybook-addon-jsx-7.3.4.tgz#fdd0c47091fe51a86ac52c820bf9837ab45a6711" + integrity sha512-15bBSk4zl6yuIKWbJdQbl3MGbABzjhJf5cFx657nF8OmoOlXMpsz5+lxfc3c+AyRvUZxdJOXkvtRqBTmQ0mouQ== + dependencies: + copy-to-clipboard "^3.0.8" + js-beautify "^1.8.8" + react-element-to-jsx-string "^14.3.1" + storybook-pretty-props "^1.0.3" + +storybook-pretty-props@^1.0.3: + version "1.2.1" + resolved "https://registry.yarnpkg.com/storybook-pretty-props/-/storybook-pretty-props-1.2.1.tgz#04c6e7c80efc0190a5dd94dceaf50579c159e182" + integrity sha512-3dUtu0UbBA6idA3Qo0i+CYGGz8GiqlXzhgCJdT065jnuJ3y9intKxZpv05ZbnQXCPnsPVSDos+hgOZ444hf6xA== + stream-browserify@^2.0.1: version "2.0.1" resolved "https://registry.yarnpkg.com/stream-browserify/-/stream-browserify-2.0.1.tgz#66266ee5f9bdb9940a4e4514cafb43bb71e5c9db" @@ -9797,6 +9894,11 @@ y18n@^4.0.0: version "4.0.0" resolved "https://registry.yarnpkg.com/y18n/-/y18n-4.0.0.tgz#95ef94f85ecc81d007c264e190a120f0a3c8566b" +yallist@^2.1.2: + version "2.1.2" + resolved "https://registry.yarnpkg.com/yallist/-/yallist-2.1.2.tgz#1c11f9218f076089a47dd512f93c6699a6a81d52" + integrity sha1-HBH5IY8HYImkfdUS+TxmmaaoHVI= + yallist@^3.0.0, yallist@^3.0.2: version "3.0.2" resolved "https://registry.yarnpkg.com/yallist/-/yallist-3.0.2.tgz#8452b4bb7e83c7c188d8041c1a837c773d6d8bb9"