From d9a2948dabb58be6558323ccb9aac339699b41ad Mon Sep 17 00:00:00 2001 From: Oleg Proskurin Date: Mon, 10 Jul 2017 00:30:31 +0300 Subject: [PATCH 01/10] Refactoring Addon Info [WIP] --- addons/info/src/index.js | 94 ++++++++-------- .../cra-kitchen-sink/src/stories/index.js | 103 +++++++++++++++--- 2 files changed, 138 insertions(+), 59 deletions(-) diff --git a/addons/info/src/index.js b/addons/info/src/index.js index 4567ed366ba5..b5c7225a5f6a 100644 --- a/addons/info/src/index.js +++ b/addons/info/src/index.js @@ -29,57 +29,61 @@ const defaultMarksyConf = { ul: UL, }; -export default { - addWithInfo(storyName, info, storyFn, _options) { - if (typeof storyFn !== 'function') { - if (typeof info === 'function') { - _options = storyFn; // eslint-disable-line - storyFn = info; // eslint-disable-line - info = ''; // eslint-disable-line - } else { - throw new Error('No story defining function has been specified'); - } +export function withInfo(info, storyFn, _options, context) { + if (typeof storyFn !== 'function') { + if (typeof info === 'function') { + _options = storyFn; // eslint-disable-line + storyFn = info; // eslint-disable-line + info = ''; // eslint-disable-line + } else { + throw new Error('No story defining function has been specified'); } + } - const options = { - ...defaultOptions, - ..._options, - }; + const options = { + ...defaultOptions, + ..._options, + }; - // props.propTables can only be either an array of components or null - // propTables option is allowed to be set to 'false' (a boolean) - // if the option is false, replace it with null to avoid react warnings - if (!options.propTables) { - options.propTables = null; - } + // props.propTables can only be either an array of components or null + // propTables option is allowed to be set to 'false' (a boolean) + // if the option is false, replace it with null to avoid react warnings + if (!options.propTables) { + options.propTables = null; + } - const marksyConf = { ...defaultMarksyConf }; - if (options && options.marksyConf) { - Object.assign(marksyConf, options.marksyConf); - } + const marksyConf = { ...defaultMarksyConf }; + if (options && options.marksyConf) { + Object.assign(marksyConf, options.marksyConf); + } - return this.add(storyName, context => { - const props = { - info, - context, - showInline: Boolean(options.inline), - showHeader: Boolean(options.header), - showSource: Boolean(options.source), - propTables: options.propTables, - propTablesExclude: options.propTablesExclude, - styles: typeof options.styles === 'function' ? options.styles : s => s, - marksyConf, - maxPropObjectKeys: options.maxPropObjectKeys, - maxPropArrayLength: options.maxPropArrayLength, - maxPropsIntoLine: options.maxPropsIntoLine, - maxPropStringLength: options.maxPropStringLength, - }; + const props = { + info, + context, + showInline: Boolean(options.inline), + showHeader: Boolean(options.header), + showSource: Boolean(options.source), + propTables: options.propTables, + propTablesExclude: options.propTablesExclude, + styles: typeof options.styles === 'function' ? options.styles : s => s, + marksyConf, + maxPropObjectKeys: options.maxPropObjectKeys, + maxPropArrayLength: options.maxPropArrayLength, + maxPropsIntoLine: options.maxPropsIntoLine, + maxPropStringLength: options.maxPropStringLength, + }; - return ( - - {storyFn(context)} - - ); + return ( + + {storyFn(context)} + + ); +} + +export default { + addWithInfo(storyName, info, storyFn, _options) { + return this.add(storyName, context => { + return withInfo(info, storyFn, _options, context); }); }, }; diff --git a/examples/cra-kitchen-sink/src/stories/index.js b/examples/cra-kitchen-sink/src/stories/index.js index 9c34858322d8..db4ace743673 100644 --- a/examples/cra-kitchen-sink/src/stories/index.js +++ b/examples/cra-kitchen-sink/src/stories/index.js @@ -19,6 +19,7 @@ import { object, } from '@storybook/addon-knobs'; import centered from '@storybook/addon-centered'; +import { withInfo } from '@storybook/addon-info'; import { Button, Welcome } from '@storybook/react/demo'; @@ -37,6 +38,24 @@ const emit = emiter.emit.bind(emiter); storiesOf('Welcome', module).add('to Storybook', () => ); +const InfoButton = () => + + {' '}Show Info{' '} + ; + storiesOf('Button', module) .addDecorator(withKnobs) .add('with text', () => ) @@ -75,21 +94,46 @@ storiesOf('Button', module) return (
-

{intro}

-

My birthday is: {new Date(birthday).toLocaleDateString()}

-

My wallet contains: ${dollars.toFixed(2)}

+

+ {intro} +

+

+ My birthday is: {new Date(birthday).toLocaleDateString()} +

+

+ My wallet contains: ${dollars.toFixed(2)} +

In my backpack, I have:

    - {items.map(item =>
  • {item}
    • )} + {items.map(item => +
  • + {item} +
    • + )}
-

{salutation}

+

+ {salutation} +

); }) .addWithInfo( 'with some info', 'Use the [info addon](https://github.com/storybooks/storybook/tree/master/addons/info) with its painful API.', - () => + () => +
+ click the label in top right for info +
+ ) + .add('with new info', (context) => + withInfo( + 'Use the [info addon](https://github.com/storybooks/storybook/tree/master/addons/info) with its painful API.', () => ( +
+ click the label in top right for info +
), + {}, + context + ) ); storiesOf('App', module).add('full app', () => ); @@ -177,7 +221,11 @@ storiesOf('Addon Knobs deprecated Decorator', module) const age = number('Age', 120); const content = `I am ${name} and I'm ${age} years old.`; - return
{content}
; + return ( +
+ {content} +
+ ); }); storiesOf('Addon Knobs', module).add( @@ -187,14 +235,26 @@ storiesOf('Addon Knobs', module).add( const age = number('Age', 89); const content = `I am ${name} and I'm ${age} years old.`; - return
{content}
; + return ( +
+ {content} +
+ ); }) ); storiesOf('component.base.Link') .addDecorator(withKnobs) - .add('first', () => {text('firstLink', 'first link')}) - .add('second', () => {text('secondLink', 'second link')}); + .add('first', () => + + {text('firstLink', 'first link')} + + ) + .add('second', () => + + {text('secondLink', 'second link')} + + ); storiesOf('component.base.Span') .add('first', () => first span) @@ -205,8 +265,20 @@ storiesOf('component.common.Div') .add('second', () =>
second div
); storiesOf('component.common.Table') - .add('first', () =>
first table
) - .add('second', () =>
first table
); + .add('first', () => + + + + +
first table
+ ) + .add('second', () => + + + + +
first table
+ ); storiesOf('component.Button') .add('first', () => ) @@ -216,7 +288,11 @@ storiesOf('component.Button') storiesOf('Cellsยฏ\\_(ใƒ„)_/ยฏMolecules.Atoms/simple', module) .addDecorator(withKnobs) - .add('with text', () => ) + .add('with text', () => + + ) .add('with some emoji', () => ); storiesOf('Cells/Molecules/Atoms.more', module) @@ -230,4 +306,3 @@ storiesOf('Cells/Molecules', module) storiesOf('Cells.Molecules.Atoms', module) .add('with text2', () => ) .add('with some emoji2', () => ); - From d41888f848533af99cb2ae39e74b8bcd8874bd46 Mon Sep 17 00:00:00 2001 From: Oleg Proskurin Date: Mon, 10 Jul 2017 11:09:10 +0300 Subject: [PATCH 02/10] Addons composition --- addons/info/src/components/PropVal.js | 15 ++++-- addons/info/src/index.js | 47 +++++++++---------- .../cra-kitchen-sink/src/stories/index.js | 35 ++++++++++---- 3 files changed, 60 insertions(+), 37 deletions(-) diff --git a/addons/info/src/components/PropVal.js b/addons/info/src/components/PropVal.js index 13901ab87fef..1afad856f2b6 100644 --- a/addons/info/src/components/PropVal.js +++ b/addons/info/src/components/PropVal.js @@ -115,9 +115,16 @@ export default function PropVal(props) { return {content}; } +PropVal.defaultProps = { + val: null, // eslint-disable-line + maxPropObjectKeys: 0, + maxPropArrayLength: 0, + maxPropStringLength: 0, +} + PropVal.propTypes = { - val: PropTypes.any.isRequired, // eslint-disable-line - maxPropObjectKeys: PropTypes.number.isRequired, - maxPropArrayLength: PropTypes.number.isRequired, - maxPropStringLength: PropTypes.number.isRequired, + val: PropTypes.any, // eslint-disable-line + maxPropObjectKeys: PropTypes.number, + maxPropArrayLength: PropTypes.number, + maxPropStringLength: PropTypes.number, }; diff --git a/addons/info/src/index.js b/addons/info/src/index.js index b5c7225a5f6a..712a95d4791f 100644 --- a/addons/info/src/index.js +++ b/addons/info/src/index.js @@ -29,7 +29,7 @@ const defaultMarksyConf = { ul: UL, }; -export function withInfo(info, storyFn, _options, context) { +export function withInfo(info, storyFn, _options) { if (typeof storyFn !== 'function') { if (typeof info === 'function') { _options = storyFn; // eslint-disable-line @@ -57,34 +57,33 @@ export function withInfo(info, storyFn, _options, context) { Object.assign(marksyConf, options.marksyConf); } - const props = { - info, - context, - showInline: Boolean(options.inline), - showHeader: Boolean(options.header), - showSource: Boolean(options.source), - propTables: options.propTables, - propTablesExclude: options.propTablesExclude, - styles: typeof options.styles === 'function' ? options.styles : s => s, - marksyConf, - maxPropObjectKeys: options.maxPropObjectKeys, - maxPropArrayLength: options.maxPropArrayLength, - maxPropsIntoLine: options.maxPropsIntoLine, - maxPropStringLength: options.maxPropStringLength, + return context => { + const props = { + info, + context, + showInline: Boolean(options.inline), + showHeader: Boolean(options.header), + showSource: Boolean(options.source), + propTables: options.propTables, + propTablesExclude: options.propTablesExclude, + styles: typeof options.styles === 'function' ? options.styles : s => s, + marksyConf, + maxPropObjectKeys: options.maxPropObjectKeys, + maxPropArrayLength: options.maxPropArrayLength, + maxPropsIntoLine: options.maxPropsIntoLine, + maxPropStringLength: options.maxPropStringLength, + }; + return ( + + {storyFn(context)} + + ); }; - - return ( - - {storyFn(context)} - - ); } export default { addWithInfo(storyName, info, storyFn, _options) { - return this.add(storyName, context => { - return withInfo(info, storyFn, _options, context); - }); + return this.add(storyName, withInfo(info, storyFn, _options)); }, }; diff --git a/examples/cra-kitchen-sink/src/stories/index.js b/examples/cra-kitchen-sink/src/stories/index.js index db4ace743673..db81e4f03c9e 100644 --- a/examples/cra-kitchen-sink/src/stories/index.js +++ b/examples/cra-kitchen-sink/src/stories/index.js @@ -56,6 +56,11 @@ const InfoButton = () => {' '}Show Info{' '} ; +const withNotes = (note, storyFn) => context => + + {storyFn(context)} + ; + storiesOf('Button', module) .addDecorator(withKnobs) .add('with text', () => ) @@ -120,19 +125,31 @@ storiesOf('Button', module) .addWithInfo( 'with some info', 'Use the [info addon](https://github.com/storybooks/storybook/tree/master/addons/info) with its painful API.', - () => + context =>
- click the label in top right for info + click the label in top right for info about "{context.story}"
) - .add('with new info', (context) => + .add( + 'with new info', withInfo( - 'Use the [info addon](https://github.com/storybooks/storybook/tree/master/addons/info) with its painful API.', () => ( -
- click the label in top right for info -
), - {}, - context + 'Use the [info addon](https://github.com/storybooks/storybook/tree/master/addons/info) with its new painless API.', + context => +
+ click the label in top right for info about "{context.story}" +
+ ) + ) + .add( + 'addons composition', + withInfo( + 'Addon info', + withNotes('Addons composition: Info(Notes(storyFn))', context => +
+ click the label in top right and select "Notes" on Addons Panel to know + more about "{context.story}" +
+ ) ) ); From 73f64c805247c39ac64d26206933c1c64e1ad9ac Mon Sep 17 00:00:00 2001 From: Oleg Proskurin Date: Mon, 10 Jul 2017 22:22:10 +0300 Subject: [PATCH 03/10] Add withInfo()(storyFn) --- addons/info/src/index.js | 93 ++++++++++--------- .../cra-kitchen-sink/src/stories/index.js | 20 ++-- 2 files changed, 56 insertions(+), 57 deletions(-) diff --git a/addons/info/src/index.js b/addons/info/src/index.js index 712a95d4791f..3439706d68cb 100644 --- a/addons/info/src/index.js +++ b/addons/info/src/index.js @@ -29,61 +29,62 @@ const defaultMarksyConf = { ul: UL, }; -export function withInfo(info, storyFn, _options) { - if (typeof storyFn !== 'function') { - if (typeof info === 'function') { - _options = storyFn; // eslint-disable-line - storyFn = info; // eslint-disable-line - info = ''; // eslint-disable-line - } else { - throw new Error('No story defining function has been specified'); +export function withInfo(info, _options) { + return (storyFn) => { + if (typeof storyFn !== 'function') { + if (typeof info === 'function') { + _options = storyFn; // eslint-disable-line + storyFn = info; // eslint-disable-line + info = ''; // eslint-disable-line + } else { + throw new Error('No story defining function has been specified'); + } } - } - const options = { - ...defaultOptions, - ..._options, - }; + const options = { + ...defaultOptions, + ..._options, + }; - // props.propTables can only be either an array of components or null - // propTables option is allowed to be set to 'false' (a boolean) - // if the option is false, replace it with null to avoid react warnings - if (!options.propTables) { - options.propTables = null; - } + // props.propTables can only be either an array of components or null + // propTables option is allowed to be set to 'false' (a boolean) + // if the option is false, replace it with null to avoid react warnings + if (!options.propTables) { + options.propTables = null; + } - const marksyConf = { ...defaultMarksyConf }; - if (options && options.marksyConf) { - Object.assign(marksyConf, options.marksyConf); - } + const marksyConf = { ...defaultMarksyConf }; + if (options && options.marksyConf) { + Object.assign(marksyConf, options.marksyConf); + } - return context => { - const props = { - info, - context, - showInline: Boolean(options.inline), - showHeader: Boolean(options.header), - showSource: Boolean(options.source), - propTables: options.propTables, - propTablesExclude: options.propTablesExclude, - styles: typeof options.styles === 'function' ? options.styles : s => s, - marksyConf, - maxPropObjectKeys: options.maxPropObjectKeys, - maxPropArrayLength: options.maxPropArrayLength, - maxPropsIntoLine: options.maxPropsIntoLine, - maxPropStringLength: options.maxPropStringLength, - }; - return ( - - {storyFn(context)} - - ); - }; + return context => { + const props = { + info, + context, + showInline: Boolean(options.inline), + showHeader: Boolean(options.header), + showSource: Boolean(options.source), + propTables: options.propTables, + propTablesExclude: options.propTablesExclude, + styles: typeof options.styles === 'function' ? options.styles : s => s, + marksyConf, + maxPropObjectKeys: options.maxPropObjectKeys, + maxPropArrayLength: options.maxPropArrayLength, + maxPropsIntoLine: options.maxPropsIntoLine, + maxPropStringLength: options.maxPropStringLength, + }; + return ( + + {storyFn(context)} + + ); + };} } export default { addWithInfo(storyName, info, storyFn, _options) { - return this.add(storyName, withInfo(info, storyFn, _options)); + return this.add(storyName, withInfo(info, _options)(storyFn)); }, }; diff --git a/examples/cra-kitchen-sink/src/stories/index.js b/examples/cra-kitchen-sink/src/stories/index.js index db81e4f03c9e..e1c33e210ce7 100644 --- a/examples/cra-kitchen-sink/src/stories/index.js +++ b/examples/cra-kitchen-sink/src/stories/index.js @@ -43,12 +43,12 @@ const InfoButton = () => style={{ fontFamily: 'sans-serif', fontSize: 12, - // display: 'block', textDecoration: 'none', background: 'rgb(34, 136, 204)', color: 'rgb(255, 255, 255)', padding: '5px 15px', margin: 4, + marginTop: 16, cursor: 'pointer', borderRadius: '0px 0px 0px 5px', }} @@ -133,21 +133,19 @@ storiesOf('Button', module) .add( 'with new info', withInfo( - 'Use the [info addon](https://github.com/storybooks/storybook/tree/master/addons/info) with its new painless API.', - context => -
- click the label in top right for info about "{context.story}" -
+ 'Use the [info addon](https://github.com/storybooks/storybook/tree/master/addons/info) with its new painless API.' + )(context => +
+ click the label in top right for info about "{context.story}" +
) ) .add( 'addons composition', - withInfo( - 'Addon info', - withNotes('Addons composition: Info(Notes(storyFn))', context => + withInfo('see Notes panel for composition info')( + addonNotes({ notes: 'Composition: Info(Notes())' })(context =>
- click the label in top right and select "Notes" on Addons Panel to know - more about "{context.story}" + click the label in top right for info about "{context.story}"
) ) From ec8ee5cb2d9edddc560e959f2683444a23c21ee9 Mon Sep 17 00:00:00 2001 From: Oleg Proskurin Date: Tue, 11 Jul 2017 20:06:39 +0300 Subject: [PATCH 04/10] Add deprecation warning --- addons/info/src/index.js | 28 +++++++++++++++++-- .../cra-kitchen-sink/src/stories/index.js | 9 +----- 2 files changed, 26 insertions(+), 11 deletions(-) diff --git a/addons/info/src/index.js b/addons/info/src/index.js index 3439706d68cb..cf132ed1f402 100644 --- a/addons/info/src/index.js +++ b/addons/info/src/index.js @@ -30,7 +30,7 @@ const defaultMarksyConf = { }; export function withInfo(info, _options) { - return (storyFn) => { + return storyFn => { if (typeof storyFn !== 'function') { if (typeof info === 'function') { _options = storyFn; // eslint-disable-line @@ -79,12 +79,34 @@ export function withInfo(info, _options) { {storyFn(context)} ); - };} + }; + }; +} + +function deprecate() { + const logger = console; + let warned = false; + const deprecated = msg => { + if (!warned) { + logger.warn(msg); + warned = true; + } + }; + return deprecated; } +const showWaring = deprecate(); + +const warning = storyFn => context => { + showWaring( + `Warning: Applying addWithInfo is deprecated and will be removed in the next major release. Use withInfo from the same package instead. Please check the "${context.kind}/${context.story}" story. See https://github.com/storybooks/storybook/tree/master/addons/info` + ); + return storyFn(context); +}; + export default { addWithInfo(storyName, info, storyFn, _options) { - return this.add(storyName, withInfo(info, _options)(storyFn)); + return this.add(storyName, warning(withInfo(info, _options)(storyFn))); }, }; diff --git a/examples/cra-kitchen-sink/src/stories/index.js b/examples/cra-kitchen-sink/src/stories/index.js index e1c33e210ce7..e308ad065114 100644 --- a/examples/cra-kitchen-sink/src/stories/index.js +++ b/examples/cra-kitchen-sink/src/stories/index.js @@ -47,20 +47,13 @@ const InfoButton = () => background: 'rgb(34, 136, 204)', color: 'rgb(255, 255, 255)', padding: '5px 15px', - margin: 4, - marginTop: 16, - cursor: 'pointer', + margin: 10, borderRadius: '0px 0px 0px 5px', }} > {' '}Show Info{' '} ; -const withNotes = (note, storyFn) => context => - - {storyFn(context)} - ; - storiesOf('Button', module) .addDecorator(withKnobs) .add('with text', () => ) From 0e8230c45973e969116df175fc264ba373bc3a22 Mon Sep 17 00:00:00 2001 From: Oleg Proskurin Date: Tue, 11 Jul 2017 21:29:46 +0300 Subject: [PATCH 05/10] Refactoring withInfo function --- addons/info/src/index.js | 130 ++++++++++++++++++++------------------- 1 file changed, 66 insertions(+), 64 deletions(-) diff --git a/addons/info/src/index.js b/addons/info/src/index.js index cf132ed1f402..38408cba0726 100644 --- a/addons/info/src/index.js +++ b/addons/info/src/index.js @@ -2,6 +2,31 @@ import React from 'react'; import _Story from './components/Story'; import { H1, H2, H3, H4, H5, H6, Code, P, UL, A, LI } from './components/markdown'; +function addonCompose(addonFn) { + return storyFn => context => addonFn(storyFn, context); +} + +function deprecate() { + const logger = console; + let warned = false; + const deprecated = msg => { + if (!warned) { + logger.warn(msg); + warned = true; + } + }; + return deprecated; +} + +const showWaring = deprecate(); + +const warning = addonCompose((storyFn, context) => { + showWaring( + `Warning: Applying addWithInfo is deprecated and will be removed in the next major release. Use withInfo from the same package instead. \nPlease check the "${context.kind}/${context.story}" story. \nSee https://github.com/storybooks/storybook/tree/master/addons/info` + ); + return storyFn(context); +}); + export const Story = _Story; const defaultOptions = { @@ -29,80 +54,57 @@ const defaultMarksyConf = { ul: UL, }; -export function withInfo(info, _options) { - return storyFn => { - if (typeof storyFn !== 'function') { - if (typeof info === 'function') { +export function addInfo(storyFn, context, { info, _options }) { + if (typeof storyFn !== 'function') { + if (typeof info === 'function') { _options = storyFn; // eslint-disable-line storyFn = info; // eslint-disable-line info = ''; // eslint-disable-line - } else { - throw new Error('No story defining function has been specified'); - } + } else { + throw new Error('No story defining function has been specified'); } + } - const options = { - ...defaultOptions, - ..._options, - }; - - // props.propTables can only be either an array of components or null - // propTables option is allowed to be set to 'false' (a boolean) - // if the option is false, replace it with null to avoid react warnings - if (!options.propTables) { - options.propTables = null; - } - - const marksyConf = { ...defaultMarksyConf }; - if (options && options.marksyConf) { - Object.assign(marksyConf, options.marksyConf); - } - - return context => { - const props = { - info, - context, - showInline: Boolean(options.inline), - showHeader: Boolean(options.header), - showSource: Boolean(options.source), - propTables: options.propTables, - propTablesExclude: options.propTablesExclude, - styles: typeof options.styles === 'function' ? options.styles : s => s, - marksyConf, - maxPropObjectKeys: options.maxPropObjectKeys, - maxPropArrayLength: options.maxPropArrayLength, - maxPropsIntoLine: options.maxPropsIntoLine, - maxPropStringLength: options.maxPropStringLength, - }; - return ( - - {storyFn(context)} - - ); - }; + const options = { + ...defaultOptions, + ..._options, }; -} -function deprecate() { - const logger = console; - let warned = false; - const deprecated = msg => { - if (!warned) { - logger.warn(msg); - warned = true; - } + // props.propTables can only be either an array of components or null + // propTables option is allowed to be set to 'false' (a boolean) + // if the option is false, replace it with null to avoid react warnings + if (!options.propTables) { + options.propTables = null; + } + + const marksyConf = { ...defaultMarksyConf }; + if (options && options.marksyConf) { + Object.assign(marksyConf, options.marksyConf); + } + const props = { + info, + context, + showInline: Boolean(options.inline), + showHeader: Boolean(options.header), + showSource: Boolean(options.source), + propTables: options.propTables, + propTablesExclude: options.propTablesExclude, + styles: typeof options.styles === 'function' ? options.styles : s => s, + marksyConf, + maxPropObjectKeys: options.maxPropObjectKeys, + maxPropArrayLength: options.maxPropArrayLength, + maxPropsIntoLine: options.maxPropsIntoLine, + maxPropStringLength: options.maxPropStringLength, }; - return deprecated; + return ( + + {storyFn(context)} + + ); } -const showWaring = deprecate(); - -const warning = storyFn => context => { - showWaring( - `Warning: Applying addWithInfo is deprecated and will be removed in the next major release. Use withInfo from the same package instead. Please check the "${context.kind}/${context.story}" story. See https://github.com/storybooks/storybook/tree/master/addons/info` - ); - return storyFn(context); -}; +export const withInfo = (info, _options) => + addonCompose((storyFn, context) => addInfo(storyFn, context, { info, _options })); export default { addWithInfo(storyName, info, storyFn, _options) { From 868dcedd127d4cdc2eb865225770ce011b027a9c Mon Sep 17 00:00:00 2001 From: Oleg Proskurin Date: Tue, 11 Jul 2017 22:31:28 +0300 Subject: [PATCH 06/10] Add test --- addons/info/src/index.test.js | 23 +++++++++++++++++++++++ 1 file changed, 23 insertions(+) create mode 100644 addons/info/src/index.test.js diff --git a/addons/info/src/index.test.js b/addons/info/src/index.test.js new file mode 100644 index 000000000000..b828d441b245 --- /dev/null +++ b/addons/info/src/index.test.js @@ -0,0 +1,23 @@ +/* global document */ + +import React from 'react'; +import ReactDOM from 'react-dom'; +import AddonInfo, { withInfo } from './'; + +describe('addon Info', () => { + const story = context => +
+ It's a {context.story} story +
; + const api = { + add: (name, fn) => fn({ kind: 'addon_info', story: 'jest_test' }), + }; + it('should render ', () => { + const Info = withInfo('Test Info')(story); + ReactDOM.render(, document.createElement('div')); + }); + it('should show deprecation warning', () => { + const addWithInfo = AddonInfo.addWithInfo.bind(api); + addWithInfo('jest', 'test info', story); + }); +}); From 1e2892f2f15a3ff7128f3f42d6947534e1e11393 Mon Sep 17 00:00:00 2001 From: UsulPro Date: Wed, 12 Jul 2017 11:48:38 +0300 Subject: [PATCH 07/10] Improve test coverage --- addons/info/src/index.test.js | 42 +++++++++++++++++++++++++++++++---- 1 file changed, 38 insertions(+), 4 deletions(-) diff --git a/addons/info/src/index.test.js b/addons/info/src/index.test.js index b828d441b245..68c2d371d8f7 100644 --- a/addons/info/src/index.test.js +++ b/addons/info/src/index.test.js @@ -2,22 +2,56 @@ import React from 'react'; import ReactDOM from 'react-dom'; -import AddonInfo, { withInfo } from './'; +import AddonInfo, { withInfo, setDefaults, addInfo } from './'; + +/* eslint-disable */ +const TestComponent = ({ func, obj, array, number, string, bool, empty }) => +
+

{func}

+

{obj.toString()}

+

{array}

+

{number}

+
{string}
+
{bool}
+

{empty}

+ test + storiesOf + +
  • 1
    • +
  • 2
    • +     +
    ; +/* eslint-enable */ + +const testContext = { kind: 'addon_info', story: 'jest_test' }; +const testOptions = { propTables: false }; describe('addon Info', () => { const story = context =>
    - It's a {context.story} story + It's a {context.story} story: + x + 1} + obj={{ a: 'a', b: 'b' }} + array={[1, 2, 3]} + number={7} + string={'seven'} + bool + />
    ; const api = { - add: (name, fn) => fn({ kind: 'addon_info', story: 'jest_test' }), + add: (name, fn) => fn(testContext), }; it('should render ', () => { const Info = withInfo('Test Info')(story); ReactDOM.render(, document.createElement('div')); }); + it('should should render with missed info', () => { + setDefaults(testOptions); + addInfo(null, testContext, { info: story, options: testOptions }); + }); it('should show deprecation warning', () => { const addWithInfo = AddonInfo.addWithInfo.bind(api); - addWithInfo('jest', 'test info', story); + addWithInfo('jest', story); }); }); From 6c128f3c3b979d037b89e94a02ff66e0625a4009 Mon Sep 17 00:00:00 2001 From: Oleg Proskurin Date: Wed, 12 Jul 2017 19:50:44 +0300 Subject: [PATCH 08/10] Fix typo --- addons/info/src/index.js | 4 ++-- addons/info/src/index.test.js | 8 +++++--- 2 files changed, 7 insertions(+), 5 deletions(-) diff --git a/addons/info/src/index.js b/addons/info/src/index.js index 38408cba0726..fc3e6588e94e 100644 --- a/addons/info/src/index.js +++ b/addons/info/src/index.js @@ -18,10 +18,10 @@ function deprecate() { return deprecated; } -const showWaring = deprecate(); +const showWarning = deprecate(); const warning = addonCompose((storyFn, context) => { - showWaring( + showWarning( `Warning: Applying addWithInfo is deprecated and will be removed in the next major release. Use withInfo from the same package instead. \nPlease check the "${context.kind}/${context.story}" story. \nSee https://github.com/storybooks/storybook/tree/master/addons/info` ); return storyFn(context); diff --git a/addons/info/src/index.test.js b/addons/info/src/index.test.js index 68c2d371d8f7..c41e13eff646 100644 --- a/addons/info/src/index.test.js +++ b/addons/info/src/index.test.js @@ -42,11 +42,13 @@ describe('addon Info', () => { const api = { add: (name, fn) => fn(testContext), }; - it('should render ', () => { - const Info = withInfo('Test Info')(story); + it('should render and markdown', () => { + const Info = withInfo( + '# Test story \n## with markdown info \ncontaing **bold**, *cursive* text and `code`' + )(story); ReactDOM.render(, document.createElement('div')); }); - it('should should render with missed info', () => { + it('should render with missed info', () => { setDefaults(testOptions); addInfo(null, testContext, { info: story, options: testOptions }); }); From 3832ae9fd7630eb7fb7e4debee2570e411eb087c Mon Sep 17 00:00:00 2001 From: Oleg Proskurin Date: Thu, 13 Jul 2017 15:05:56 +0300 Subject: [PATCH 09/10] Switch to util-deprecate --- addons/info/package.json | 3 ++- addons/info/src/index.js | 32 ++++++-------------------------- 2 files changed, 8 insertions(+), 27 deletions(-) diff --git a/addons/info/package.json b/addons/info/package.json index 6a880a325b10..394881b11a77 100644 --- a/addons/info/package.json +++ b/addons/info/package.json @@ -19,7 +19,8 @@ "global": "^4.3.2", "marksy": "^2.0.0", "prop-types": "^15.5.8", - "react-addons-create-fragment": "^15.5.3" + "react-addons-create-fragment": "^15.5.3", + "util-deprecate": "^1.0.2" }, "devDependencies": { "git-url-parse": "^6.2.2", diff --git a/addons/info/src/index.js b/addons/info/src/index.js index fc3e6588e94e..3ff306f3ee55 100644 --- a/addons/info/src/index.js +++ b/addons/info/src/index.js @@ -1,4 +1,5 @@ import React from 'react'; +import deprecate from 'util-deprecate'; import _Story from './components/Story'; import { H1, H2, H3, H4, H5, H6, Code, P, UL, A, LI } from './components/markdown'; @@ -6,27 +7,6 @@ function addonCompose(addonFn) { return storyFn => context => addonFn(storyFn, context); } -function deprecate() { - const logger = console; - let warned = false; - const deprecated = msg => { - if (!warned) { - logger.warn(msg); - warned = true; - } - }; - return deprecated; -} - -const showWarning = deprecate(); - -const warning = addonCompose((storyFn, context) => { - showWarning( - `Warning: Applying addWithInfo is deprecated and will be removed in the next major release. Use withInfo from the same package instead. \nPlease check the "${context.kind}/${context.story}" story. \nSee https://github.com/storybooks/storybook/tree/master/addons/info` - ); - return storyFn(context); -}); - export const Story = _Story; const defaultOptions = { @@ -54,7 +34,7 @@ const defaultMarksyConf = { ul: UL, }; -export function addInfo(storyFn, context, { info, _options }) { +export function addInfo(storyFn, context, info, _options) { if (typeof storyFn !== 'function') { if (typeof info === 'function') { _options = storyFn; // eslint-disable-line @@ -104,12 +84,12 @@ export function addInfo(storyFn, context, { info, _options }) { } export const withInfo = (info, _options) => - addonCompose((storyFn, context) => addInfo(storyFn, context, { info, _options })); + addonCompose((storyFn, context) => addInfo(storyFn, context, info, _options)); export default { - addWithInfo(storyName, info, storyFn, _options) { - return this.add(storyName, warning(withInfo(info, _options)(storyFn))); - }, + addWithInfo: deprecate(function addWithInfo(storyName, info, storyFn, _options) { + return this.add(storyName, withInfo(info, _options)(storyFn)); + }, '@storybook/addon-info .addWithInfo() addon is deprecated, use withInfo() from the same package instead. \nSee https://github.com/storybooks/storybook/tree/master/addons/info'), }; export function setDefaults(newDefaults) { From a73d01d6323c7baf8cb27bf842ac8f824cce7065 Mon Sep 17 00:00:00 2001 From: Oleg Proskurin Date: Thu, 13 Jul 2017 20:42:47 +0300 Subject: [PATCH 10/10] Fix tests and default props --- addons/info/src/components/PropVal.js | 10 +++++----- addons/info/src/index.test.js | 2 +- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/addons/info/src/components/PropVal.js b/addons/info/src/components/PropVal.js index 1afad856f2b6..2012528afd7c 100644 --- a/addons/info/src/components/PropVal.js +++ b/addons/info/src/components/PropVal.js @@ -116,11 +116,11 @@ export default function PropVal(props) { } PropVal.defaultProps = { - val: null, // eslint-disable-line - maxPropObjectKeys: 0, - maxPropArrayLength: 0, - maxPropStringLength: 0, -} + val: null, + maxPropObjectKeys: 3, + maxPropArrayLength: 3, + maxPropStringLength: 50, +}; PropVal.propTypes = { val: PropTypes.any, // eslint-disable-line diff --git a/addons/info/src/index.test.js b/addons/info/src/index.test.js index c41e13eff646..afbae389ce2c 100644 --- a/addons/info/src/index.test.js +++ b/addons/info/src/index.test.js @@ -50,7 +50,7 @@ describe('addon Info', () => { }); it('should render with missed info', () => { setDefaults(testOptions); - addInfo(null, testContext, { info: story, options: testOptions }); + addInfo(null, testContext, story, testOptions); }); it('should show deprecation warning', () => { const addWithInfo = AddonInfo.addWithInfo.bind(api);