From 8209d13717ad74b04b9b3d3e06d2ff556fbf69cf Mon Sep 17 00:00:00 2001 From: Hypnosphi Date: Sat, 21 Apr 2018 21:10:26 +0300 Subject: [PATCH 1/2] Fix dynamic knobs (cherry picked from commit d2a289e) --- addons/knobs/.storybook/addons.js | 1 - addons/knobs/.storybook/config.js | 12 -- .../.storybook/user/modify_webpack_config.js | 4 - addons/knobs/.storybook/webpack.config.js | 23 ---- addons/knobs/example/stories/index.js | 115 ------------------ addons/knobs/example/typescript/index.tsx | 103 ---------------- addons/knobs/package.json | 6 +- addons/knobs/src/components/Panel.js | 32 ++--- .../stories/addon-knobs.stories.js | 9 ++ 9 files changed, 23 insertions(+), 282 deletions(-) delete mode 100644 addons/knobs/.storybook/addons.js delete mode 100644 addons/knobs/.storybook/config.js delete mode 100644 addons/knobs/.storybook/user/modify_webpack_config.js delete mode 100644 addons/knobs/.storybook/webpack.config.js delete mode 100644 addons/knobs/example/stories/index.js delete mode 100644 addons/knobs/example/typescript/index.tsx diff --git a/addons/knobs/.storybook/addons.js b/addons/knobs/.storybook/addons.js deleted file mode 100644 index d33eec83877b..000000000000 --- a/addons/knobs/.storybook/addons.js +++ /dev/null @@ -1 +0,0 @@ -import '../src/register'; diff --git a/addons/knobs/.storybook/config.js b/addons/knobs/.storybook/config.js deleted file mode 100644 index ef2441034f6a..000000000000 --- a/addons/knobs/.storybook/config.js +++ /dev/null @@ -1,12 +0,0 @@ -// IMPORTANT -// --------- -// This is an auto generated file with React CDK. -// Do not modify this file. - -import { configure } from '@storybook/react'; - -function loadStories() { - require('../example/stories'); -} - -configure(loadStories, module); diff --git a/addons/knobs/.storybook/user/modify_webpack_config.js b/addons/knobs/.storybook/user/modify_webpack_config.js deleted file mode 100644 index 75e957836877..000000000000 --- a/addons/knobs/.storybook/user/modify_webpack_config.js +++ /dev/null @@ -1,4 +0,0 @@ -module.exports = () => { - // This is the default webpack config defined in the `../webpack.config.js` - // modify as you need. -}; diff --git a/addons/knobs/.storybook/webpack.config.js b/addons/knobs/.storybook/webpack.config.js deleted file mode 100644 index b729b721602a..000000000000 --- a/addons/knobs/.storybook/webpack.config.js +++ /dev/null @@ -1,23 +0,0 @@ -// IMPORTANT -// --------- -// This is an auto generated file with React CDK. -// Do not modify this file. -// Use `.storybook/user/modify_webpack_config.js instead`. - -const path = require('path'); -const updateConfig = require('./user/modify_webpack_config'); - -const config = { - module: { - loaders: [ - { - test: /\.css?$/, - loaders: ['style', 'raw'], - include: path.resolve(__dirname, '../'), - }, - ], - }, -}; - -updateConfig(config); -module.exports = config; diff --git a/addons/knobs/example/stories/index.js b/addons/knobs/example/stories/index.js deleted file mode 100644 index bd4ec782a111..000000000000 --- a/addons/knobs/example/stories/index.js +++ /dev/null @@ -1,115 +0,0 @@ -import React from 'react'; -import { storiesOf } from '@storybook/react'; -import moment from 'moment'; -import { - withKnobs, - number, - object, - boolean, - text, - select, - date, - array, - color, - files, -} from '../../src'; - -const stories = storiesOf('Example of Knobs', module); - -stories.addDecorator(withKnobs); - -stories.add('simple example', () => ); - -stories.add('with all knobs', () => { - const name = text('Name', 'Tom Cary'); - const dob = date('DOB', new Date('January 20 1887')); - - const bold = boolean('Bold', false); - const selectedColor = color('Color', 'black'); - const favoriteNumber = number('Favorite Number', 42); - const comfortTemp = number('Comfort Temp', 72, { range: true, min: 60, max: 90, step: 1 }); - - const passions = array('Passions', ['Fishing', 'Skiing']); - - const images = files('Happy Picture', 'image/*', [ - 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAQAAAC1+jfqAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QA/4ePzL8AAAAHdElNRQfiARwMCyEWcOFPAAAAP0lEQVQoz8WQMQoAIAwDL/7/z3GwghSp4KDZyiUpBMCYUgd8rehtH16/l3XewgU2KAzapjXBbNFaPS6lDMlKB6OiDv3iAH1OAAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDE4LTAxLTI4VDEyOjExOjMzLTA3OjAwlAHQBgAAACV0RVh0ZGF0ZTptb2RpZnkAMjAxOC0wMS0yOFQxMjoxMTozMy0wNzowMOVcaLoAAAAASUVORK5CYII=', - ]); - - const customStyle = object('Style', { - fontFamily: 'Arial', - padding: 20, - }); - - const style = { - ...customStyle, - fontWeight: bold ? 800 : 400, - favoriteNumber, - color: selectedColor, - }; - - return ( -
- I'm {name} and I was born on "{moment(dob).format('DD MMM YYYY')}" I like:{' '} - -

My favorite number is {favoriteNumber}.

-

My most comfortable room temperature is {comfortTemp} degrees Fahrenheit.

-

- When I am happy I look like this: happy -

-
- ); -}); - -stories.add('dates Knob', () => { - const today = date('today'); - const dob = date('DOB', null); - const myDob = date('My DOB', new Date('July 07 1993')); - - return ( - - ); -}); - -stories.add('dynamic knobs', () => { - const showOptional = select('Show optional', ['yes', 'no'], 'yes'); - return ( -
-
{text('compulsary', 'I must be here')}
- {showOptional === 'yes' ?
{text('optional', 'I can disapear')}
: null} -
- ); -}); - -stories.add('without any knob', () => ); diff --git a/addons/knobs/example/typescript/index.tsx b/addons/knobs/example/typescript/index.tsx deleted file mode 100644 index 2417b4484a38..000000000000 --- a/addons/knobs/example/typescript/index.tsx +++ /dev/null @@ -1,103 +0,0 @@ -import * as React from 'react'; -import { storiesOf } from '@storybook/react'; -import * as moment from 'moment'; -import { - withKnobs, - number, - color, - object, - boolean, - text, - select, - date -} from '../../storybook-addon-knobs'; - -const stories = storiesOf('Example of Knobs', module); - -stories.addDecorator(withKnobs); - -stories.add('simple example', () => ( - -)); - -stories.add('with all knobs', () => { - const name = text('Name', 'Tom Cary'); - const dob = date('DOB', new Date('January 20 1887')); - - const bold = boolean('Bold', false); - const selectedColor = color('Color', 'black'); - const favoriteNumber = number('Favorite Number', 42); - const comfortTemp = number('Comfort Temp', 72, { range: true, min: 60, max: 90, step: 1 }); - const textDecoration = select('Decoration', { - none: 'None', - underline: 'Underline', - "line-through": 'Line-Through' - }, 'none'); - - const customStyle = object('Style', { - fontFamily: 'Arial', - padding: 20, - }); - - const style = Object.assign({}, customStyle, { - fontWeight: bold ? 800: 400, - color: selectedColor, - textDecoration - }); - - return ( -
- I'm {name} and I was born on "{moment(dob).format("DD MMM YYYY")}" -

My favorite number is {favoriteNumber}.

-

My most comfortable room temperature is {comfortTemp} degrees Fahrenheit.

-
- ); -}); - -stories.add('dates Knob', () => { - const today = date('today'); - const dob = date('DOB', null); - const myDob = date('My DOB', new Date('July 07 1993')); - - return ( - - ) -}); - -stories.add('dynamic knobs', () => { - const showOptional = select('Show optional', ['yes', 'no'], 'yes') - return ( -
-
- {text('compulsary', 'I must be here')} -
- { showOptional==='yes' ?
{text('optional', 'I can disapear')}
: null } -
- ) -}); - -stories.add('without any knob', () => ( - -)); diff --git a/addons/knobs/package.json b/addons/knobs/package.json index 0f8b26b45688..eb6e1594f7ac 100644 --- a/addons/knobs/package.json +++ b/addons/knobs/package.json @@ -31,13 +31,9 @@ "util-deprecate": "^1.0.2" }, "devDependencies": { - "@storybook/react": "4.0.0-alpha.3", - "raw-loader": "^0.5.1", - "style-loader": "^0.20.3", "vue": "^2.5.16" }, "peerDependencies": { - "react": "*", - "react-dom": "*" + "react": "*" } } diff --git a/addons/knobs/src/components/Panel.js b/addons/knobs/src/components/Panel.js index 3763cef2d964..c0f66faf5790 100644 --- a/addons/knobs/src/components/Panel.js +++ b/addons/knobs/src/components/Panel.js @@ -155,31 +155,25 @@ export default class Panel extends React.Component { const groups = {}; const groupIds = []; - Object.keys(knobs) - .filter(key => knobs[key].used && knobs[key].groupId) - .forEach(key => { - const knobKeyGroupId = knobs[key].groupId; - groupIds.push(knobKeyGroupId); - groups[knobKeyGroupId] = { - render: () =>
{knobKeyGroupId}
, - title: knobKeyGroupId, - }; - }); - - let knobsArray = Object.keys(knobs); + let knobsArray = Object.keys(knobs).filter(key => knobs[key].used); + + knobsArray.filter(key => knobs[key].groupId).forEach(key => { + const knobKeyGroupId = knobs[key].groupId; + groupIds.push(knobKeyGroupId); + groups[knobKeyGroupId] = { + render: () =>
{knobKeyGroupId}
, + title: knobKeyGroupId, + }; + }); if (groupIds.length > 0) { groups[DEFAULT_GROUP_ID] = { render: () =>
{DEFAULT_GROUP_ID}
, title: DEFAULT_GROUP_ID, }; - knobsArray = knobsArray.filter(key => { - const filter = - groupId === DEFAULT_GROUP_ID - ? knobs[key].used - : knobs[key].used && knobs[key].groupId === groupId; - return filter; - }); + if (groupId !== DEFAULT_GROUP_ID) { + knobsArray = knobsArray.filter(key => knobs[key].groupId === groupId); + } } knobsArray = knobsArray.map(key => knobs[key]); diff --git a/examples/official-storybook/stories/addon-knobs.stories.js b/examples/official-storybook/stories/addon-knobs.stories.js index 0233ea31a855..c88ae1b69cc5 100644 --- a/examples/official-storybook/stories/addon-knobs.stories.js +++ b/examples/official-storybook/stories/addon-knobs.stories.js @@ -175,6 +175,15 @@ storiesOf('Addons|Knobs.withKnobs', module) ); }) + .add('dynamic knobs', () => { + const showOptional = select('Show optional', ['yes', 'no'], 'yes'); + return ( +
+
{text('compulsary', 'I must be here')}
+ {showOptional === 'yes' ?
{text('optional', 'I can disapear')}
: null} +
+ ); + }) .add('triggers actions via button', () => (

Hit the knob load button and it should trigger an async load after a short delay

From 5ef4749f34250cb6f9559f1f53839d5b66386d31 Mon Sep 17 00:00:00 2001 From: Hypnosphi Date: Sat, 21 Apr 2018 21:16:35 +0300 Subject: [PATCH 2/2] Take storyshot --- .../__snapshots__/addon-knobs.stories.storyshot | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/examples/official-storybook/stories/__snapshots__/addon-knobs.stories.storyshot b/examples/official-storybook/stories/__snapshots__/addon-knobs.stories.storyshot index 01efdf0c4570..31a1b0fc13e4 100644 --- a/examples/official-storybook/stories/__snapshots__/addon-knobs.stories.storyshot +++ b/examples/official-storybook/stories/__snapshots__/addon-knobs.stories.storyshot @@ -1,5 +1,16 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP +exports[`Storyshots Addons|Knobs.withKnobs dynamic knobs 1`] = ` +
+
+ I must be here +
+
+ I can disapear +
+
+`; + exports[`Storyshots Addons|Knobs.withKnobs triggers actions via button 1`] = `