GitHub/storybook
1
0
Fork 0
mirror of https://github.com/storybookjs/storybook.git synced 2025-04-05 06:01:22 +08:00
Code Issues Packages Projects Releases Wiki Activity

Fix dynamic knobs

Browse Source
This commit is contained in:
Hypnosphi 2018-04-21 21:10:26 +03:00
parent 2c73655020
commit d2a289e524
9 changed files with 22 additions and 281 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
addons/knobs/.storybook/addons.js
View File

@ -1 +0,0 @@
import '../src/register';

12
addons/knobs/.storybook/config.js
View File

@ -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);

4
addons/knobs/.storybook/user/modify_webpack_config.js
View File

@ -1,4 +0,0 @@
module.exports = () => {
// This is the default webpack config defined in the `../webpack.config.js`
// modify as you need.
};

23
addons/knobs/.storybook/webpack.config.js
View File

@ -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;

115
addons/knobs/example/stories/index.js
View File

@ -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', () => <button>{text('Label', 'Hello Button')}</button>);
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 (
<div style={style}>
I'm {name} and I was born on "{moment(dob).format('DD MMM YYYY')}" I like:{' '}
<ul>{passions.map(p => <li key={p}>{p}</li>)}</ul>
<p>My favorite number is {favoriteNumber}.</p>
<p>My most comfortable room temperature is {comfortTemp} degrees Fahrenheit.</p>
<p>
When I am happy I look like this: <img src={images[0]} alt="happy" />
</p>
</div>
);
});
stories.add('dates Knob', () => {
const today = date('today');
const dob = date('DOB', null);
const myDob = date('My DOB', new Date('July 07 1993'));
return (
<ul style={{ listStyleType: 'none', listStyle: 'none', paddingLeft: '15px' }}>
<li>
<p>
<b>Javascript Date</b> default value, passes date value
</p>
<blockquote>
<code>const myDob = date('My DOB', new Date('July 07 1993'));</code>
<pre>{`// I was born in: "${moment(myDob).format('DD MMM YYYY')}"`}</pre>
</blockquote>
</li>
<li>
<p>
<b>undefined</b> default value passes today's date
</p>
<blockquote>
<code>const today = date('today');</code>
<pre>{`// Today's date is: "${moment(today).format('DD MMM YYYY')}"`}</pre>
</blockquote>
</li>
<li>
<p>
<b>null</b> default value passes null value
</p>
<blockquote>
<code>const dob = date('DOB', null);</code>
<pre>
{`// You were born in: "${
dob ? moment(dob).format('DD MMM YYYY') : 'Please select date.'
}"`}
</pre>
</blockquote>
</li>
</ul>
);
});
stories.add('dynamic knobs', () => {
const showOptional = select('Show optional', ['yes', 'no'], 'yes');
return (
<div>
<div>{text('compulsary', 'I must be here')}</div>
{showOptional === 'yes' ? <div>{text('optional', 'I can disapear')}</div> : null}
</div>
);
});
stories.add('without any knob', () => <button>This is a button</button>);

103
addons/knobs/example/typescript/index.tsx
View File

@ -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', () => (
<button>{text('Label', 'Hello Button')}</button>
));
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 (
<div style={style}>
I'm {name} and I was born on "{moment(dob).format("DD MMM YYYY")}"
<p>My favorite number is {favoriteNumber}.</p>
<p>My most comfortable room temperature is {comfortTemp} degrees Fahrenheit.</p>
</div>
);
});
stories.add('dates Knob', () => {
const today = date('today');
const dob = date('DOB', null);
const myDob = date('My DOB', new Date('July 07 1993'));
return (
<ul style={{listStyleType:"none",listStyle:"none",paddingLeft:"15px"}}>
<li>
<p><b>Javascript Date</b> default value, passes date value</p>
<blockquote>
<code>const myDob = date('My DOB', new Date('July 07 1993'));</code>
<pre>// I was born in: "{moment(myDob).format("DD MMM YYYY")}"</pre>
</blockquote>
</li>
<li>
<p><b>undefined</b> default value passes today's date</p>
<blockquote>
<code>const today = date('today');</code>
<pre>// Today's date is: "{moment(today).format("DD MMM YYYY")}"</pre>
</blockquote>
</li>
<li>
<p><b>null</b> default value passes null value</p>
<blockquote>
<code>const dob = date('DOB', null);</code>
<pre>// You were born in: "{dob? moment(dob).format("DD MMM YYYY"): 'Please select date.'}"</pre>
</blockquote>
</li>
</ul>
)
});
stories.add('dynamic knobs', () => {
const showOptional = select('Show optional', ['yes', 'no'], 'yes')
return (
<div>
<div>
{text('compulsary', 'I must be here')}
</div>
{ showOptional==='yes' ? <div>{text('optional', 'I can disapear')}</div> : null }
</div>
)
});
stories.add('without any knob', () => (
<button>This is a button</button>
));

6
addons/knobs/package.json
View File

@ -31,13 +31,9 @@
"util-deprecate": "^1.0.2" "util-deprecate": "^1.0.2"
}, },
"devDependencies": { "devDependencies": {
"@storybook/react": "4.0.0-alpha.3",
"raw-loader": "^0.5.1",
"style-loader": "^0.20.3",
"vue": "^2.5.16" "vue": "^2.5.16"
}, },
"peerDependencies": { "peerDependencies": {
"react": "*", "react": "*"
"react-dom": "*"
} }
} }

30
addons/knobs/src/components/Panel.js
View File

@ -155,31 +155,25 @@ export default class Panel extends React.Component {
const groups = {}; const groups = {};
const groupIds = []; const groupIds = [];
Object.keys(knobs) let knobsArray = Object.keys(knobs).filter(key => knobs[key].used);
.filter(key => knobs[key].used && knobs[key].groupId)
.forEach(key => {
const knobKeyGroupId = knobs[key].groupId;
groupIds.push(knobKeyGroupId);
groups[knobKeyGroupId] = {
render: () => <div id={knobKeyGroupId}>{knobKeyGroupId}</div>,
title: knobKeyGroupId,
};
});
let knobsArray = Object.keys(knobs); knobsArray.filter(key => knobs[key].groupId).forEach(key => {
const knobKeyGroupId = knobs[key].groupId;
groupIds.push(knobKeyGroupId);
groups[knobKeyGroupId] = {
render: () => <div id={knobKeyGroupId}>{knobKeyGroupId}</div>,
title: knobKeyGroupId,
};
});
if (groupIds.length > 0) { if (groupIds.length > 0) {
groups[DEFAULT_GROUP_ID] = { groups[DEFAULT_GROUP_ID] = {
render: () => <div id={DEFAULT_GROUP_ID}>{DEFAULT_GROUP_ID}</div>, render: () => <div id={DEFAULT_GROUP_ID}>{DEFAULT_GROUP_ID}</div>,
title: DEFAULT_GROUP_ID, title: DEFAULT_GROUP_ID,
}; };
knobsArray = knobsArray.filter(key => { if (groupId !== DEFAULT_GROUP_ID) {
const filter = knobsArray = knobsArray.filter(key => knobs[key].groupId === groupId);
groupId === DEFAULT_GROUP_ID }
? knobs[key].used
: knobs[key].used && knobs[key].groupId === groupId;
return filter;
});
} }
knobsArray = knobsArray.map(key => knobs[key]); knobsArray = knobsArray.map(key => knobs[key]);

9
examples/official-storybook/stories/addon-knobs.stories.js
View File

@ -175,6 +175,15 @@ storiesOf('Addons|Knobs.withKnobs', module)
</div> </div>
); );
}) })
.add('dynamic knobs', () => {
const showOptional = select('Show optional', ['yes', 'no'], 'yes');
return (
<div>
<div>{text('compulsary', 'I must be here')}</div>
{showOptional === 'yes' ? <div>{text('optional', 'I can disapear')}</div> : null}
</div>
);
})
.add('triggers actions via button', () => ( .add('triggers actions via button', () => (
<div> <div>
<p>Hit the knob load button and it should trigger an async load after a short delay</p> <p>Hit the knob load button and it should trigger an async load after a short delay</p>