From 2e06165882aa32f780b10da493ca9cb539333ea8 Mon Sep 17 00:00:00 2001 From: Kaylum Lally Date: Sat, 14 Dec 2019 15:21:15 +0000 Subject: [PATCH] refactor(storybook): storybook enhancement and cleanup refactored the storybook codebase for all components re #381 --- package-lock.json | 47 +++++++++++++++++++------ package.json | 14 +++++++- story/_helpers/icons.js | 38 ++++++++++++++++++++ story/_helpers/shared.js | 5 +++ story/avatars.stories.js | 22 ------------ story/avatars/avatars.stories.js | 8 +++++ story/avatars/avatars.template.js | 26 ++++++++++++++ story/badge.stories.js | 43 ---------------------- story/badge/badge.stories.js | 8 +++++ story/badge/badge.template.js | 38 ++++++++++++++++++++ story/balloons.stories.js | 18 ---------- story/balloons/balloons.stories.js | 8 +++++ story/balloons/balloons.template.js | 25 +++++++++++++ story/buttons.stories.js | 28 --------------- story/buttons/buttons.stories.js | 8 +++++ story/buttons/buttons.template.js | 26 ++++++++++++++ story/containers.stories.js | 24 ------------- story/containers/containers.stories.js | 8 +++++ story/containers/containers.template.js | 31 ++++++++++++++++ story/dialogs.stories.js | 19 ---------- story/dialogs/dialogs.stories.js | 8 +++++ story/dialogs/dialogs.template.js | 23 ++++++++++++ story/icons.stories.js | 46 ------------------------ story/icons/icons.stories.js | 10 ++++++ story/icons/icons.template.js | 23 ++++++++++++ story/icons/sprites.template.js | 13 +++++++ story/inputs.stories.js | 43 ---------------------- story/inputs/checkboxes.template.js | 22 ++++++++++++ story/inputs/input.template.js | 20 +++++++++++ story/inputs/inputs.stories.js | 12 +++++++ story/inputs/radio.template.js | 27 ++++++++++++++ story/lists.stories.js | 20 ----------- story/lists/lists.stories.js | 8 +++++ story/lists/lists.template.js | 23 ++++++++++++ story/progress.stories.js | 28 --------------- story/progress/progress.stories.js | 8 +++++ story/progress/progress.template.js | 32 +++++++++++++++++ story/select.stories.js | 27 -------------- story/select/select.stories.js | 8 +++++ story/select/select.template.js | 21 +++++++++++ story/table.stories.js | 37 ------------------- story/table/table.stories.js | 8 +++++ story/table/table.template.js | 41 +++++++++++++++++++++ story/text.stories.js | 19 ---------- story/text/text.stories.js | 8 +++++ story/text/text.template.js | 22 ++++++++++++ story/textarea.stories.js | 18 ---------- story/textarea/textarea.stories.js | 8 +++++ story/textarea/textarea.template.js | 20 +++++++++++ 49 files changed, 643 insertions(+), 404 deletions(-) create mode 100644 story/_helpers/icons.js create mode 100644 story/_helpers/shared.js delete mode 100644 story/avatars.stories.js create mode 100644 story/avatars/avatars.stories.js create mode 100644 story/avatars/avatars.template.js delete mode 100644 story/badge.stories.js create mode 100644 story/badge/badge.stories.js create mode 100644 story/badge/badge.template.js delete mode 100644 story/balloons.stories.js create mode 100644 story/balloons/balloons.stories.js create mode 100644 story/balloons/balloons.template.js delete mode 100644 story/buttons.stories.js create mode 100644 story/buttons/buttons.stories.js create mode 100644 story/buttons/buttons.template.js delete mode 100644 story/containers.stories.js create mode 100644 story/containers/containers.stories.js create mode 100644 story/containers/containers.template.js delete mode 100644 story/dialogs.stories.js create mode 100644 story/dialogs/dialogs.stories.js create mode 100644 story/dialogs/dialogs.template.js delete mode 100644 story/icons.stories.js create mode 100644 story/icons/icons.stories.js create mode 100644 story/icons/icons.template.js create mode 100644 story/icons/sprites.template.js delete mode 100644 story/inputs.stories.js create mode 100644 story/inputs/checkboxes.template.js create mode 100644 story/inputs/input.template.js create mode 100644 story/inputs/inputs.stories.js create mode 100644 story/inputs/radio.template.js delete mode 100644 story/lists.stories.js create mode 100644 story/lists/lists.stories.js create mode 100644 story/lists/lists.template.js delete mode 100644 story/progress.stories.js create mode 100644 story/progress/progress.stories.js create mode 100644 story/progress/progress.template.js delete mode 100644 story/select.stories.js create mode 100644 story/select/select.stories.js create mode 100644 story/select/select.template.js delete mode 100644 story/table.stories.js create mode 100644 story/table/table.stories.js create mode 100644 story/table/table.template.js delete mode 100644 story/text.stories.js create mode 100644 story/text/text.stories.js create mode 100644 story/text/text.template.js delete mode 100644 story/textarea.stories.js create mode 100644 story/textarea/textarea.stories.js create mode 100644 story/textarea/textarea.template.js diff --git a/package-lock.json b/package-lock.json index 83000524..621fabcc 100644 --- a/package-lock.json +++ b/package-lock.json @@ -6362,6 +6362,12 @@ } } }, + "file-type": { + "version": "11.1.0", + "resolved": "https://registry.npmjs.org/file-type/-/file-type-11.1.0.tgz", + "integrity": "sha512-rM0UO7Qm9K7TWTtA6AShI/t7H5BPjDeGVDaNyg9BjHAj3PysKy7+8C8D137R88jnR3rFJZQB/tFgydl5sN5m7g==", + "dev": true + }, "filesize": { "version": "3.6.1", "resolved": "https://registry.npmjs.org/filesize/-/filesize-3.6.1.tgz", @@ -6651,7 +6657,8 @@ "version": "2.1.1", "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz", "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=", - "dev": true + "dev": true, + "optional": true }, "aproba": { "version": "1.2.0", @@ -6675,13 +6682,15 @@ "version": "1.0.0", "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz", "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=", - "dev": true + "dev": true, + "optional": true }, "brace-expansion": { "version": "1.1.11", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==", "dev": true, + "optional": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -6698,19 +6707,22 @@ "version": "1.1.0", "resolved": "https://registry.npmjs.org/code-point-at/-/code-point-at-1.1.0.tgz", "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=", - "dev": true + "dev": true, + "optional": true }, "concat-map": { "version": "0.0.1", "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz", "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=", - "dev": true + "dev": true, + "optional": true }, "console-control-strings": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/console-control-strings/-/console-control-strings-1.1.0.tgz", "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=", - "dev": true + "dev": true, + "optional": true }, "core-util-is": { "version": "1.0.2", @@ -6841,7 +6853,8 @@ "version": "2.0.3", "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz", "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=", - "dev": true + "dev": true, + "optional": true }, "ini": { "version": "1.3.5", @@ -6855,6 +6868,7 @@ "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz", "integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=", "dev": true, + "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -6871,6 +6885,7 @@ "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz", "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==", "dev": true, + "optional": true, "requires": { "brace-expansion": "^1.1.7" } @@ -6879,13 +6894,15 @@ "version": "0.0.8", "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz", "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=", - "dev": true + "dev": true, + "optional": true }, "minipass": { "version": "2.3.5", "resolved": "https://registry.npmjs.org/minipass/-/minipass-2.3.5.tgz", "integrity": "sha512-Gi1W4k059gyRbyVUZQ4mEqLm0YIUiGYfvxhF6SIlk3ui1WVxMTGfGdQ2SInh3PDrRTVvPKgULkpJtT4RH10+VA==", "dev": true, + "optional": true, "requires": { "safe-buffer": "^5.1.2", "yallist": "^3.0.0" @@ -6906,6 +6923,7 @@ "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz", "integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=", "dev": true, + "optional": true, "requires": { "minimist": "0.0.8" } @@ -6994,7 +7012,8 @@ "version": "1.0.1", "resolved": "https://registry.npmjs.org/number-is-nan/-/number-is-nan-1.0.1.tgz", "integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=", - "dev": true + "dev": true, + "optional": true }, "object-assign": { "version": "4.1.1", @@ -7008,6 +7027,7 @@ "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz", "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=", "dev": true, + "optional": true, "requires": { "wrappy": "1" } @@ -7103,7 +7123,8 @@ "version": "5.1.2", "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz", "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==", - "dev": true + "dev": true, + "optional": true }, "safer-buffer": { "version": "2.1.2", @@ -7145,6 +7166,7 @@ "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz", "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=", "dev": true, + "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", @@ -7166,6 +7188,7 @@ "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz", "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=", "dev": true, + "optional": true, "requires": { "ansi-regex": "^2.0.0" } @@ -7214,13 +7237,15 @@ "version": "1.0.2", "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz", "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=", - "dev": true + "dev": true, + "optional": true }, "yallist": { "version": "3.0.3", "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.0.3.tgz", "integrity": "sha512-S+Zk8DEWE6oKpV+vI3qWkaK+jSbIK86pCwe2IF/xwIpQ8jEuxpw9NyaGjmp9+BoJv5FV2piqCDcoCtStppiq2A==", - "dev": true + "dev": true, + "optional": true } } }, diff --git a/package.json b/package.json index aa432284..ec98c3cc 100644 --- a/package.json +++ b/package.json @@ -57,6 +57,7 @@ "@storybook/html": "^5.0.0", "autoprefixer": "^9.1.5", "babel-loader": "^8.0.4", + "classnames": "^2.2.6", "clean-css-cli": "^4.2.1", "commitizen": "^3.1.1", "css-loader": "^2.0.0", @@ -158,7 +159,18 @@ ] }, "eslintConfig": { - "extends": "airbnb-base" + "extends": "airbnb-base", + "rules": { + "import/no-extraneous-dependencies": [ + "error", + { + "devDependencies": [ + "**/*.stories.js", + "**/*.template.js" + ] + } + ] + } }, "eslintIgnore": [ "docs/*" diff --git a/story/_helpers/icons.js b/story/_helpers/icons.js new file mode 100644 index 00000000..a6398ce6 --- /dev/null +++ b/story/_helpers/icons.js @@ -0,0 +1,38 @@ +export const Icons = { + twitter: 'twitter', + facebook: 'facebook', + github: 'github', + google: 'google', + youtube: 'youtube', + whatsapp: 'whatsapp', + gmail: 'gmail', + linkedin: 'linkedin', + instagram: 'instagram', + close: 'close', + coin: 'coin', + trophy: 'trophy', +}; + +export const Sprites = { + 'nes-pokeball': 'nes-pokeball', + 'nes-bulbasaur': 'nes-bulbasaur', + 'nes-charmander': 'nes-charmander', + 'nes-squirtle': 'nes-squirtle', + 'nes-smartphone': 'nes-smartphone', + 'nes-kirby': 'nes-kirby', + 'nes-phone': 'nes-phone', + 'nes-octocat animate': 'nes-octocat animate', + 'nes-ash': 'nes-ash', + 'nes-mario': 'nes-mario', + 'nes-logo': 'nes-logo', + 'nes-jp-logo': 'nes-jp-logo', + 'snes-logo': 'snes-logo', + 'snes-jp-logo': 'snes-jp-logo', +}; + +export const Size = { + default: '', + 'is-small': 'is-small', + 'is-medium': 'is-medium', + 'is-large': 'is-large', +}; diff --git a/story/_helpers/shared.js b/story/_helpers/shared.js new file mode 100644 index 00000000..b8083e3b --- /dev/null +++ b/story/_helpers/shared.js @@ -0,0 +1,5 @@ +export default { + 'is-success': 'is-success', + 'is-warning': 'is-warning', + 'is-error': 'is-error', +}; diff --git a/story/avatars.stories.js b/story/avatars.stories.js deleted file mode 100644 index 35f79cf5..00000000 --- a/story/avatars.stories.js +++ /dev/null @@ -1,22 +0,0 @@ -import { storiesOf } from '@storybook/html'; // eslint-disable-line import/no-extraneous-dependencies -import { // eslint-disable-line import/no-extraneous-dependencies - withKnobs, radios, boolean, -} from '@storybook/addon-knobs'; - -const stories = storiesOf('Avatars', module); -stories.addDecorator(withKnobs); - -stories.add('avatars', () => { - const options = radios('class', { - 'is-small': 'is-small', - default: '', - 'is-medium': 'is-medium', - 'is-large': 'is-large', - }, ''); - const isRounded = boolean('is-rounded', false) ? 'is-rounded' : ''; - const selectedClasses = [isRounded, options].join(' '); - - return `Gravatar Image Example`; -}); diff --git a/story/avatars/avatars.stories.js b/story/avatars/avatars.stories.js new file mode 100644 index 00000000..6f536718 --- /dev/null +++ b/story/avatars/avatars.stories.js @@ -0,0 +1,8 @@ +import { storiesOf } from '@storybook/html'; +import { withKnobs } from '@storybook/addon-knobs'; + +import Avatars from './avatars.template'; + +storiesOf('Avatars', module) + .addDecorator(withKnobs) + .add('Avatar', () => Avatars()); diff --git a/story/avatars/avatars.template.js b/story/avatars/avatars.template.js new file mode 100644 index 00000000..cf61e673 --- /dev/null +++ b/story/avatars/avatars.template.js @@ -0,0 +1,26 @@ +import { select, boolean } from '@storybook/addon-knobs'; +import classNames from 'classnames'; + +export default () => { + const isRounded = boolean('is-rounded', false); + const avatarSize = select('Avatar Classes', { + default: '', + 'is-small': 'is-small', + 'is-medium': 'is-medium', + 'is-large': 'is-large', + }, ''); + + const avatarClasses = classNames( + 'nes-avatar', + avatarSize, + { + 'is-rounded': isRounded, + }, + ); + + return ` + Gravatar Image Example + `; +}; diff --git a/story/badge.stories.js b/story/badge.stories.js deleted file mode 100644 index fa4d591c..00000000 --- a/story/badge.stories.js +++ /dev/null @@ -1,43 +0,0 @@ -import { storiesOf } from '@storybook/html'; // eslint-disable-line import/no-extraneous-dependencies -import { // eslint-disable-line import/no-extraneous-dependencies - withKnobs, radios, number, -} from '@storybook/addon-knobs'; - -const stories = storiesOf('Badges', module); -stories.addDecorator(withKnobs); - -stories.add('badges', () => { - const optionsLeft = radios('left/only', { - 'is-dark': 'is-dark', - 'is-success': 'is-success', - 'is-primary': 'is-primary', - 'is-warning': 'is-warning', - 'is-error': 'is-error', - }, 'is-dark'); - - const optionsRight = radios('right', { - 'is-dark': 'is-dark', - 'is-success': 'is-success', - 'is-primary': 'is-primary', - 'is-warning': 'is-warning', - 'is-error': 'is-error', - }, 'is-success'); - - const isSplitedIsIconOrDefault = radios('default/splited/icon', { - default: '', - 'is-splited': 'is-splited', - 'is-icon': 'is-icon', - }, 'is-splited'); - - const fontSize = number('font-size', 1, { - range: true, - min: 0, - max: 100, - step: 0.01, - }); - - return ` - npm - 1.0.0 - `; -}); diff --git a/story/badge/badge.stories.js b/story/badge/badge.stories.js new file mode 100644 index 00000000..70cfc56f --- /dev/null +++ b/story/badge/badge.stories.js @@ -0,0 +1,8 @@ +import { storiesOf } from '@storybook/html'; +import { withKnobs } from '@storybook/addon-knobs'; + +import Badge from './badge.template'; + +storiesOf('Badges', module) + .addDecorator(withKnobs) + .add('Badge', () => Badge()); diff --git a/story/badge/badge.template.js b/story/badge/badge.template.js new file mode 100644 index 00000000..8f7a9c34 --- /dev/null +++ b/story/badge/badge.template.js @@ -0,0 +1,38 @@ +import { select } from '@storybook/addon-knobs'; +import classNames from 'classnames'; + +import sharedOptions from '../_helpers/shared'; + +export default () => { + const sharedComponentOptions = { + 'is-dark': 'is-dark', + 'is-primary': 'is-primary', + ...sharedOptions, + }; + + const iconStyle = select('Badge Display', { + default: '', + 'is-splited': 'is-splited', + 'is-icon': 'is-icon', + }, 'is-splited'); + + const leftOptions = select('Left Style', { + ...sharedComponentOptions, + }, 'is-dark'); + + const rightOptions = select('Right Style', { + ...sharedComponentOptions, + }, 'is-success'); + + const badgeClasses = classNames( + 'nes-badge', + iconStyle, + ); + + return ` + + npm + 1.0.0 + + `; +}; diff --git a/story/balloons.stories.js b/story/balloons.stories.js deleted file mode 100644 index 6111dbcb..00000000 --- a/story/balloons.stories.js +++ /dev/null @@ -1,18 +0,0 @@ -import { storiesOf } from '@storybook/html'; // eslint-disable-line import/no-extraneous-dependencies -import { // eslint-disable-line import/no-extraneous-dependencies - withKnobs, boolean, radios, -} from '@storybook/addon-knobs'; - -const stories = storiesOf('Ballons', module); -stories.addDecorator(withKnobs); - -stories.add('balloon', () => { - const isDark = boolean('is-dark', false) ? 'is-dark' : ''; - const alignment = radios('direction', { - default: '', - 'from-left': 'from-left', - 'from-right': 'from-right', - }, ''); - const selectedClasses = [isDark, alignment]; - return `

Hello NES.css

`; -}); diff --git a/story/balloons/balloons.stories.js b/story/balloons/balloons.stories.js new file mode 100644 index 00000000..0daf80b6 --- /dev/null +++ b/story/balloons/balloons.stories.js @@ -0,0 +1,8 @@ +import { storiesOf } from '@storybook/html'; +import { withKnobs } from '@storybook/addon-knobs'; + +import Ballons from './balloons.template'; + +storiesOf('Balloons', module) + .addDecorator(withKnobs) + .add('Balloon', () => Ballons()); diff --git a/story/balloons/balloons.template.js b/story/balloons/balloons.template.js new file mode 100644 index 00000000..b42646eb --- /dev/null +++ b/story/balloons/balloons.template.js @@ -0,0 +1,25 @@ +import { select, boolean } from '@storybook/addon-knobs'; +import classNames from 'classnames'; + +export default () => { + const isDark = boolean('is-dark', false); + const balloonDirection = select('Direction', { + default: '', + 'from-left': 'from-left', + 'from-right': 'from-right', + }, ''); + + const balloonClasses = classNames( + 'nes-balloon', + balloonDirection, + { + 'is-dark': isDark, + }, + ); + + return ` +
+

Hello NES.css

+
+ `; +}; diff --git a/story/buttons.stories.js b/story/buttons.stories.js deleted file mode 100644 index 8211f1eb..00000000 --- a/story/buttons.stories.js +++ /dev/null @@ -1,28 +0,0 @@ -import { storiesOf } from '@storybook/html'; // eslint-disable-line import/no-extraneous-dependencies -import { // eslint-disable-line import/no-extraneous-dependencies - withKnobs, radios, select, -} from '@storybook/addon-knobs'; - -const stories = storiesOf('Buttons', module); -stories.addDecorator(withKnobs); - -stories.add('button', () => { - const buttonType = select('type', { - button: 'button', - file: 'file', - }, 'button'); - const extraClass = radios('class', { - default: '', - 'is-primary': 'is-primary', - 'is-success': 'is-success', - 'is-warning': 'is-warning', - 'is-error': 'is-error', - 'is-disabled': 'is-disabled', - }, ''); - return buttonType === 'file' - ? `` - : ``; -}); diff --git a/story/buttons/buttons.stories.js b/story/buttons/buttons.stories.js new file mode 100644 index 00000000..d354449e --- /dev/null +++ b/story/buttons/buttons.stories.js @@ -0,0 +1,8 @@ +import { storiesOf } from '@storybook/html'; +import { withKnobs } from '@storybook/addon-knobs'; + +import Buttons from './buttons.template'; + +storiesOf('Buttons', module) + .addDecorator(withKnobs) + .add('Buttons', () => Buttons()); diff --git a/story/buttons/buttons.template.js b/story/buttons/buttons.template.js new file mode 100644 index 00000000..7291c406 --- /dev/null +++ b/story/buttons/buttons.template.js @@ -0,0 +1,26 @@ +import { select } from '@storybook/addon-knobs'; + +import sharedOption from '../_helpers/shared'; + +export default () => { + const buttonType = select('Button Type', { + button: 'button', + file: 'file', + }, 'button'); + + const buttonClasses = select('Button Classes', { + default: '', + 'is-primary': 'is-primary', + ...sharedOption, + 'is-disabled': 'is-disabled', + }, ''); + + return buttonType === 'button' ? ` + + ` : ` + + `; +}; diff --git a/story/containers.stories.js b/story/containers.stories.js deleted file mode 100644 index 49521282..00000000 --- a/story/containers.stories.js +++ /dev/null @@ -1,24 +0,0 @@ -import { storiesOf } from '@storybook/html'; // eslint-disable-line import/no-extraneous-dependencies -import { // eslint-disable-line import/no-extraneous-dependencies - withKnobs, boolean, radios, -} from '@storybook/addon-knobs'; - -const stories = storiesOf('Containers', module); -stories.addDecorator(withKnobs); - -stories.add('container', () => { - const withTitle = boolean('with-title', false) ? 'with-title' : ''; - const isDark = boolean('is-dark', false) ? 'is-dark' : ''; - const isRounded = boolean('is-rounded', false) ? 'is-rounded' : ''; - const alignment = radios('alignment', { - default: '', - 'is-centered': 'is-centered', - 'is-right': 'is-right', - }, ''); - const selectedClasses = [withTitle, isDark, isRounded, alignment]; - - return `
-

Container

-

Good morning. Thou hast had a good night's sleep, I hope.

-
`; -}); diff --git a/story/containers/containers.stories.js b/story/containers/containers.stories.js new file mode 100644 index 00000000..77e0fde0 --- /dev/null +++ b/story/containers/containers.stories.js @@ -0,0 +1,8 @@ +import { storiesOf } from '@storybook/html'; +import { withKnobs } from '@storybook/addon-knobs'; + +import Containers from './containers.template'; + +storiesOf('Containers', module) + .addDecorator(withKnobs) + .add('Container', () => Containers()); diff --git a/story/containers/containers.template.js b/story/containers/containers.template.js new file mode 100644 index 00000000..517c0269 --- /dev/null +++ b/story/containers/containers.template.js @@ -0,0 +1,31 @@ +import { select, boolean } from '@storybook/addon-knobs'; +import classNames from 'classnames'; + +export default () => { + const isDark = boolean('is-dark', false); + const isRounded = boolean('is-rounded', false); + const withTitle = boolean('with-title', false); + + const containerAlignment = select('Alignment', { + default: '', + 'is-centered': 'is-centered', + 'is-right': 'is-right', + }, ''); + + const containerClasses = classNames( + 'nes-container', + containerAlignment, + { + 'is-dark': isDark, + 'is-rounded': isRounded, + 'with-title': withTitle, + }, + ); + + return ` +
+ ${withTitle ? '

Container

' : ''} +

Good morning. Thou hast had a good night's sleep, I hope.

+
+ `; +}; diff --git a/story/dialogs.stories.js b/story/dialogs.stories.js deleted file mode 100644 index 2d9e914b..00000000 --- a/story/dialogs.stories.js +++ /dev/null @@ -1,19 +0,0 @@ -import { storiesOf } from '@storybook/html'; // eslint-disable-line import/no-extraneous-dependencies -import { // eslint-disable-line import/no-extraneous-dependencies - withKnobs, boolean, -} from '@storybook/addon-knobs'; - -const stories = storiesOf('Dialogs', module); -stories.addDecorator(withKnobs); - -stories.add('dialog', () => { - const open = boolean('open', true) ? 'open' : ''; - const isRounded = boolean('is-rounded', false) ? 'is-rounded' : ''; - const isDark = boolean('is-dark', false) ? 'is-dark' : ''; - const selectedClasses = [isRounded, isDark]; - - return ` -

Dialog

-

Alert: this is a dialog.

- `; -}); diff --git a/story/dialogs/dialogs.stories.js b/story/dialogs/dialogs.stories.js new file mode 100644 index 00000000..9907fa80 --- /dev/null +++ b/story/dialogs/dialogs.stories.js @@ -0,0 +1,8 @@ +import { storiesOf } from '@storybook/html'; +import { withKnobs } from '@storybook/addon-knobs'; + +import Dialogs from './dialogs.template'; + +storiesOf('Dialogs', module) + .addDecorator(withKnobs) + .add('Dialog', () => Dialogs()); diff --git a/story/dialogs/dialogs.template.js b/story/dialogs/dialogs.template.js new file mode 100644 index 00000000..b7dadda3 --- /dev/null +++ b/story/dialogs/dialogs.template.js @@ -0,0 +1,23 @@ +import { boolean } from '@storybook/addon-knobs'; +import classNames from 'classnames'; + +export default () => { + const isOpen = boolean('Open', true) ? 'open' : ''; + const isRounded = boolean('is-rounded', false); + const isDark = boolean('is-dark', false); + + const dialogClasses = classNames( + 'nes-dialog', + { + 'is-rounded': isRounded, + 'is-dark': isDark, + }, + ); + + return ` + +

Dialog

+

Alert: this is a dialog.

+ + `; +}; diff --git a/story/icons.stories.js b/story/icons.stories.js deleted file mode 100644 index 2a0e8a8d..00000000 --- a/story/icons.stories.js +++ /dev/null @@ -1,46 +0,0 @@ -import { storiesOf } from '@storybook/html'; // eslint-disable-line import/no-extraneous-dependencies -import { // eslint-disable-line import/no-extraneous-dependencies - withKnobs, select, radios, -} from '@storybook/addon-knobs'; - -const stories = storiesOf('Icons', module); -stories.addDecorator(withKnobs); - -stories.add('icon', () => { - const selectedClass = select('class', { - 'nes-icon twitter': 'nes-icon twitter', - 'nes-icon facebook': 'nes-icon facebook', - 'nes-icon github': 'nes-icon github', - 'nes-icon google': 'nes-icon google', - 'nes-icon youtube': 'nes-icon youtube', - 'nes-icon whatsapp': 'nes-icon whatsapp', - 'nes-icon gmail': 'nes-icon gmail', - 'nes-icon linkedin': 'nes-icon linkedin', - 'nes-icon instagram': 'nes-icon instagram', - 'nes-icon close': 'nes-icon close', - 'nes-icon coin': 'nes-icon coin', - 'nes-pokeball': 'nes-pokeball', - 'nes-bulbasaur': 'nes-bulbasaur', - 'nes-charmander': 'nes-charmander', - 'nes-squirtle': 'nes-squirtle', - 'nes-smartphone': 'nes-smartphone', - 'nes-kirby': 'nes-kirby', - 'nes-phone': 'nes-phone', - 'nes-octocat animate': 'nes-octocat animate', - 'nes-ash': 'nes-ash', - 'nes-icon trophy': 'nes-icon trophy', - 'nes-mario': 'nes-mario', - 'nes-logo': 'nes-logo', - 'nes-jp-logo': 'nes-jp-logo', - 'snes-logo': 'snes-logo', - 'snes-jp-logo': 'snes-jp-logo', - }, 'nes-icon twitter'); - const selectedSize = radios('size', { - default: '', - 'is-small': 'is-small', - 'is-medium': 'is-medium', - 'is-large': 'is-large', - }, ''); - - return ``; -}); diff --git a/story/icons/icons.stories.js b/story/icons/icons.stories.js new file mode 100644 index 00000000..1ec95f5f --- /dev/null +++ b/story/icons/icons.stories.js @@ -0,0 +1,10 @@ +import { storiesOf } from '@storybook/html'; +import { withKnobs } from '@storybook/addon-knobs'; + +import Icons from './icons.template'; +import Sprites from './sprites.template'; + +storiesOf('Icons', module) + .addDecorator(withKnobs) + .add('Icons', () => Icons()) + .add('Sprites', () => Sprites()); diff --git a/story/icons/icons.template.js b/story/icons/icons.template.js new file mode 100644 index 00000000..59017f7b --- /dev/null +++ b/story/icons/icons.template.js @@ -0,0 +1,23 @@ +import { radios, select } from '@storybook/addon-knobs'; +import classNames from 'classnames'; + +import { Icons, Size } from '../_helpers/icons'; + +export default () => { + const selectedIcon = select('class', { + ...Icons, + }, 'twitter'); + + const iconSize = radios('Icon Size', { + ...Size, + }, ''); + + const iconClasses = classNames( + 'nes-icon', + selectedIcon, + iconSize, + ); + return ` + + `; +}; diff --git a/story/icons/sprites.template.js b/story/icons/sprites.template.js new file mode 100644 index 00000000..c4b707ec --- /dev/null +++ b/story/icons/sprites.template.js @@ -0,0 +1,13 @@ +import { select } from '@storybook/addon-knobs'; + +import { Sprites } from '../_helpers/icons'; + +export default () => { + const selectedSprite = select('class', { + ...Sprites, + }, 'nes-pokeball'); + + return ` + + `; +}; diff --git a/story/inputs.stories.js b/story/inputs.stories.js deleted file mode 100644 index 2ed2d028..00000000 --- a/story/inputs.stories.js +++ /dev/null @@ -1,43 +0,0 @@ -import { storiesOf } from '@storybook/html'; // eslint-disable-line import/no-extraneous-dependencies -import { // eslint-disable-line import/no-extraneous-dependencies - withKnobs, radios, boolean, -} from '@storybook/addon-knobs'; - -const stories = storiesOf('Inputs', module); -stories.addDecorator(withKnobs); - -stories.add('input.radio', () => { - const isDark = boolean('is-dark', false) ? 'is-dark' : ''; - - return ( - ` - ` - ); -}) - .add('input.checkbox', () => { - const isDark = boolean('is-dark', false) ? 'is-dark' : ''; - - return ( - `` - ); - }) - .add('input', () => { - const selectedClass = radios('class', { - default: '', - 'is-success': 'is-success', - 'is-warning': 'is-warning', - 'is-error': 'is-error', - 'is-dark': 'is-dark', - }, ''); - - return ``; - }); diff --git a/story/inputs/checkboxes.template.js b/story/inputs/checkboxes.template.js new file mode 100644 index 00000000..efa3d61f --- /dev/null +++ b/story/inputs/checkboxes.template.js @@ -0,0 +1,22 @@ +import { boolean } from '@storybook/addon-knobs'; +import classNames from 'classnames'; + +export default () => { + const isDark = boolean('is-dark', false); + + const checkBoxClasses = classNames( + 'nes-checkbox', + { + 'is-dark': isDark, + }, + ); + + return ` +
+ +
+ `; +}; diff --git a/story/inputs/input.template.js b/story/inputs/input.template.js new file mode 100644 index 00000000..156cc51b --- /dev/null +++ b/story/inputs/input.template.js @@ -0,0 +1,20 @@ +import { select } from '@storybook/addon-knobs'; +import classNames from 'classnames'; + +import sharedOptions from '../_helpers/shared'; + +export default () => { + const inputOptions = select('Input Classes', { + default: '', + ...sharedOptions, + }, ''); + + const inputClasses = classNames( + 'nes-input', + inputOptions, + ); + + return ` + + `; +}; diff --git a/story/inputs/inputs.stories.js b/story/inputs/inputs.stories.js new file mode 100644 index 00000000..def5ac86 --- /dev/null +++ b/story/inputs/inputs.stories.js @@ -0,0 +1,12 @@ +import { storiesOf } from '@storybook/html'; +import { withKnobs } from '@storybook/addon-knobs'; + +import Input from './input.template'; +import CheckBox from './checkboxes.template'; +import Radio from './radio.template'; + +storiesOf('Inputs', module) + .addDecorator(withKnobs) + .add('Input', () => Input()) + .add('Checkbox', () => CheckBox()) + .add('Radio', () => Radio()); diff --git a/story/inputs/radio.template.js b/story/inputs/radio.template.js new file mode 100644 index 00000000..a78dd999 --- /dev/null +++ b/story/inputs/radio.template.js @@ -0,0 +1,27 @@ +import { boolean } from '@storybook/addon-knobs'; +import classNames from 'classnames'; + + +export default () => { + const isDark = boolean('is-dark', false); + + const radioClasses = classNames( + 'nes-radio', + { + 'is-dark': isDark, + }, + ); + + return ` +
+ + +
+ `; +}; diff --git a/story/lists.stories.js b/story/lists.stories.js deleted file mode 100644 index 3c8c40b3..00000000 --- a/story/lists.stories.js +++ /dev/null @@ -1,20 +0,0 @@ -import { storiesOf } from '@storybook/html'; // eslint-disable-line import/no-extraneous-dependencies -import { // eslint-disable-line import/no-extraneous-dependencies - withKnobs, radios, -} from '@storybook/addon-knobs'; - -const stories = storiesOf('Lists', module); -stories.addDecorator(withKnobs); - -stories.add('list', () => { - const selectedClass = radios('type', { - default: 'is-disc', - 'is-circle': 'is-circle', - }, 'is-disc'); - return ``; -}); diff --git a/story/lists/lists.stories.js b/story/lists/lists.stories.js new file mode 100644 index 00000000..ab60393e --- /dev/null +++ b/story/lists/lists.stories.js @@ -0,0 +1,8 @@ +import { storiesOf } from '@storybook/html'; +import { withKnobs } from '@storybook/addon-knobs'; + +import Lists from './lists.template'; + +storiesOf('Lists', module) + .addDecorator(withKnobs) + .add('List', () => Lists()); diff --git a/story/lists/lists.template.js b/story/lists/lists.template.js new file mode 100644 index 00000000..f3964765 --- /dev/null +++ b/story/lists/lists.template.js @@ -0,0 +1,23 @@ +import { radios } from '@storybook/addon-knobs'; +import classNames from 'classnames'; + +export default () => { + const listOptions = radios('List Type', { + 'is-disc': 'is-disc', + 'is-circle': 'is-circle', + }, 'is-disc'); + + const listClasses = classNames( + 'nes-list', + listOptions, + ); + + return ` + + `; +}; diff --git a/story/progress.stories.js b/story/progress.stories.js deleted file mode 100644 index 8e4c6b50..00000000 --- a/story/progress.stories.js +++ /dev/null @@ -1,28 +0,0 @@ -import { storiesOf } from '@storybook/html'; // eslint-disable-line import/no-extraneous-dependencies -import { // eslint-disable-line import/no-extraneous-dependencies - withKnobs, number, radios, boolean, -} from '@storybook/addon-knobs'; - -const stories = storiesOf('Progress', module); -stories.addDecorator(withKnobs); - -// prettier-ignore -stories.add('progress', () => { - const percentage = number('percentage', 30, { - range: true, - min: 0, - max: 100, - step: 1, - }); - const extraClass = radios('class', { - default: '', - 'is-primary': 'is-primary', - 'is-success': 'is-success', - 'is-warning': 'is-warning', - 'is-error': 'is-error', - 'is-pattern': 'is-pattern', - }, ''); - const isRounded = boolean('is-rounded', false) ? 'is-rounded' : ''; - const selectedClasses = [extraClass, isRounded]; - return ``; -}); diff --git a/story/progress/progress.stories.js b/story/progress/progress.stories.js new file mode 100644 index 00000000..eba15132 --- /dev/null +++ b/story/progress/progress.stories.js @@ -0,0 +1,8 @@ +import { storiesOf } from '@storybook/html'; +import { withKnobs } from '@storybook/addon-knobs'; + +import Progress from './progress.template'; + +storiesOf('Progress', module) + .addDecorator(withKnobs) + .add('Progress', () => Progress()); diff --git a/story/progress/progress.template.js b/story/progress/progress.template.js new file mode 100644 index 00000000..86d7e70e --- /dev/null +++ b/story/progress/progress.template.js @@ -0,0 +1,32 @@ +import { select, boolean, number } from '@storybook/addon-knobs'; +import classNames from 'classnames'; + +import sharedOption from '../_helpers/shared'; + +export default () => { + const isRounded = boolean('is-rounded', false); + const progressTypes = select('Progress Style', { + default: '', + 'is-dark': 'is-dark', + ...sharedOption, + }, ''); + + const percentage = number('Percentage', 30, { + range: true, + min: 0, + max: 100, + step: 1, + }); + + const progessClasses = classNames( + 'nes-progress', + progressTypes, + { + 'is-rounded': isRounded, + }, + ); + + return ` + + `; +}; diff --git a/story/select.stories.js b/story/select.stories.js deleted file mode 100644 index f9bcd6fd..00000000 --- a/story/select.stories.js +++ /dev/null @@ -1,27 +0,0 @@ -import { storiesOf } from '@storybook/html'; // eslint-disable-line import/no-extraneous-dependencies -import { // eslint-disable-line import/no-extraneous-dependencies - withKnobs, radios, -} from '@storybook/addon-knobs'; - -const stories = storiesOf('Selects', module); -stories.addDecorator(withKnobs); - -stories.add('select', () => { - const selectedClass = radios('class', { - default: '', - 'is-success': 'is-success', - 'is-warning': 'is-warning', - 'is-error': 'is-error', - 'is-dark': 'is-dark', - }, ''); - - return ` -
- -
- `; -}); diff --git a/story/select/select.stories.js b/story/select/select.stories.js new file mode 100644 index 00000000..1c340ef8 --- /dev/null +++ b/story/select/select.stories.js @@ -0,0 +1,8 @@ +import { storiesOf } from '@storybook/html'; +import { withKnobs } from '@storybook/addon-knobs'; + +import Select from './select.template'; + +storiesOf('Selects', module) + .addDecorator(withKnobs) + .add('Select', () => Select()); diff --git a/story/select/select.template.js b/story/select/select.template.js new file mode 100644 index 00000000..81a66d29 --- /dev/null +++ b/story/select/select.template.js @@ -0,0 +1,21 @@ +import { select } from '@storybook/addon-knobs'; + +import sharedOptions from '../_helpers/shared'; + +export default () => { + const selectedClass = select('class', { + default: '', + ...sharedOptions, + 'is-dark': 'is-dark', + }, ''); + + return ` +
+ +
+ `; +}; diff --git a/story/table.stories.js b/story/table.stories.js deleted file mode 100644 index f138432e..00000000 --- a/story/table.stories.js +++ /dev/null @@ -1,37 +0,0 @@ -import { storiesOf } from '@storybook/html'; // eslint-disable-line import/no-extraneous-dependencies -import { // eslint-disable-line import/no-extraneous-dependencies - withKnobs, boolean, -} from '@storybook/addon-knobs'; - -const stories = storiesOf('Tables', module); -stories.addDecorator(withKnobs); - -stories.add('table', () => { - const isBordered = boolean('is-bordered', true) ? 'is-bordered' : ''; - const isCentered = boolean('is-centered', false) ? 'is-centered' : ''; - const isDark = boolean('is-dark', false) ? 'is-dark' : ''; - - const selectedClasses = [isBordered, isCentered, isDark]; - - return ` - - - - - - - - - - - - - - - - - - - -
Table.is-darkTable.is-borderedTable.is-centered
Thou hast had a good morningThou hast had a good afternoonThou hast had a good night
Thou hast had a good morningThou hast had a good afternoonThou hast had a good night
`; -}); diff --git a/story/table/table.stories.js b/story/table/table.stories.js new file mode 100644 index 00000000..98c2d41c --- /dev/null +++ b/story/table/table.stories.js @@ -0,0 +1,8 @@ +import { storiesOf } from '@storybook/html'; +import { withKnobs } from '@storybook/addon-knobs'; + +import Table from './table.template'; + +storiesOf('Tables', module) + .addDecorator(withKnobs) + .add('Table', () => Table()); diff --git a/story/table/table.template.js b/story/table/table.template.js new file mode 100644 index 00000000..a2f96b91 --- /dev/null +++ b/story/table/table.template.js @@ -0,0 +1,41 @@ +import { boolean } from '@storybook/addon-knobs'; +import classNames from 'classnames'; + +export default () => { + const isBorderd = boolean('is-bordered', true); + const isCentered = boolean('is-centered', false); + const isDark = boolean('is-dark', false); + + const tableClasses = classNames( + 'nes-table', + { + 'is-bordered': isBorderd, + 'is-centered': isCentered, + 'is-dark': isDark, + }, + ); + + return ` + + + + + + + + + + + + + + + + + + + + +
Table.is-darkTable.is-borderedTable.is-centered
Thou hast had a good morningThou hast had a good afternoonThou hast had a good night
Thou hast had a good morningThou hast had a good afternoonThou hast had a good night
+ `; +}; diff --git a/story/text.stories.js b/story/text.stories.js deleted file mode 100644 index e85ae3b9..00000000 --- a/story/text.stories.js +++ /dev/null @@ -1,19 +0,0 @@ -import { storiesOf } from '@storybook/html'; // eslint-disable-line import/no-extraneous-dependencies -import { // eslint-disable-line import/no-extraneous-dependencies - withKnobs, radios, -} from '@storybook/addon-knobs'; - -const stories = storiesOf('Texts', module); -stories.addDecorator(withKnobs); - -stories.add('text', () => { - const extraClass = radios('class', { - default: '', - 'is-primary': 'is-primary', - 'is-success': 'is-success', - 'is-warning': 'is-warning', - 'is-error': 'is-error', - 'is-disabled': 'is-disabled', - }, ''); - return `NES.css`; -}); diff --git a/story/text/text.stories.js b/story/text/text.stories.js new file mode 100644 index 00000000..0602ff2d --- /dev/null +++ b/story/text/text.stories.js @@ -0,0 +1,8 @@ +import { storiesOf } from '@storybook/html'; +import { withKnobs } from '@storybook/addon-knobs'; + +import Text from './text.template'; + +storiesOf('Text', module) + .addDecorator(withKnobs) + .add('Text', () => Text()); diff --git a/story/text/text.template.js b/story/text/text.template.js new file mode 100644 index 00000000..25831497 --- /dev/null +++ b/story/text/text.template.js @@ -0,0 +1,22 @@ +import { select } from '@storybook/addon-knobs'; +import classNames from 'classnames'; + +import sharedOptions from '../_helpers/shared'; + +export default () => { + const textOptions = select('Radio Classes', { + default: '', + 'is-primary': 'is-primary', + ...sharedOptions, + 'is-disabled': 'is-disabled', + }, ''); + + const textClasses = classNames( + 'nes-text', + textOptions, + ); + + return ` + NES.css + `; +}; diff --git a/story/textarea.stories.js b/story/textarea.stories.js deleted file mode 100644 index 7d12b4a6..00000000 --- a/story/textarea.stories.js +++ /dev/null @@ -1,18 +0,0 @@ -import { storiesOf } from '@storybook/html'; // eslint-disable-line import/no-extraneous-dependencies -import { // eslint-disable-line import/no-extraneous-dependencies - withKnobs, radios, -} from '@storybook/addon-knobs'; - -const stories = storiesOf('Textareas', module); -stories.addDecorator(withKnobs); - -stories.add('textarea', () => { - const selectedClass = radios('class', { - default: '', - 'is-success': 'is-success', - 'is-warning': 'is-warning', - 'is-error': 'is-error', - }, ''); - - return ``; -}); diff --git a/story/textarea/textarea.stories.js b/story/textarea/textarea.stories.js new file mode 100644 index 00000000..5904bfa5 --- /dev/null +++ b/story/textarea/textarea.stories.js @@ -0,0 +1,8 @@ +import { storiesOf } from '@storybook/html'; +import { withKnobs } from '@storybook/addon-knobs'; + +import Textarea from './textarea.template'; + +storiesOf('Textareas', module) + .addDecorator(withKnobs) + .add('Textarea', () => Textarea()); diff --git a/story/textarea/textarea.template.js b/story/textarea/textarea.template.js new file mode 100644 index 00000000..97f0d857 --- /dev/null +++ b/story/textarea/textarea.template.js @@ -0,0 +1,20 @@ +import { select } from '@storybook/addon-knobs'; +import classNames from 'classnames'; + +import sharedOptions from '../_helpers/shared'; + +export default () => { + const textareaOption = select('Textarea Classes', { + default: '', + ...sharedOptions, + }, ''); + + const textareaClasses = classNames( + 'nes-textarea', + textareaOption, + ); + + return ` + + `; +};