ecki/modernjs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Storybook work

Browse Source
This commit is contained in:
Federico Kereki
2018-06-27 23:10:23 -03:00
parent a841c230a3
commit c07fa2e1eb
7 changed files with 197 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files
chapter06/.gitignore
+1
View File
@@ -8,6 +8,7 @@
# production
/build
/out_sb
# misc
.DS_Store
chapter06/.storybook/config.js
+5 -4
View File
@@ -1,7 +1,8 @@
import { configure } from '@storybook/react';
import { configure } from "@storybook/react";
function loadStories() {
require('../src/stories');
}
configure(() => {
const req = require.context("../src", true, /\.story\.js$/);
req.keys().forEach(filename => req(filename));
}, module);
configure(loadStories, module);
chapter06/package-lock.json
Generated
+122 -45
View File
@@ -210,26 +210,26 @@
"dev": true
},
"@storybook/channel-postmessage": {
"version": "3.4.7",
"resolved": "https://registry.npmjs.org/@storybook/channel-postmessage/-/channel-postmessage-3.4.7.tgz",
"integrity": "sha512-o6PDQXvsA5IGlG0Ol62BYVt/1ZyHZ7ERFkWij368mCkHcFqE4mr9xOGr+rQkflMUl9tWnbdcfyp6KM3eq5nizA==",
"version": "3.4.8",
"resolved": "https://registry.npmjs.org/@storybook/channel-postmessage/-/channel-postmessage-3.4.8.tgz",
"integrity": "sha512-jWWd11fyQsW9Oa4fYtimKLfRTvv5tM0ZI/05pNtpaDSM9AFj0QFba2+1SdHvG2e3DL0uxpY0Ko/V8v+/7WH3+A==",
"dev": true,
"requires": {
"@storybook/channels": "3.4.7",
"@storybook/channels": "3.4.8",
"global": "4.3.2",
"json-stringify-safe": "5.0.1"
}
},
"@storybook/channels": {
"version": "3.4.7",
"resolved": "https://registry.npmjs.org/@storybook/channels/-/channels-3.4.7.tgz",
"integrity": "sha512-EzZx+4jJ2wNJ03N/HBfQVZ0XAhO8pfDlluDu/k9fWLWglHufpczp6NxvAL6qkUONVKwFpTPKizvDye3RUd+Qcw==",
"version": "3.4.8",
"resolved": "https://registry.npmjs.org/@storybook/channels/-/channels-3.4.8.tgz",
"integrity": "sha512-tcKTMfEQehv/hjtdIjM5e/12Hklj1rByAUVg3467yAs8wFle/D1VBfWthsFmVLezBV2+6wUots2KPUIXxLkDVg==",
"dev": true
},
"@storybook/client-logger": {
"version": "3.4.7",
"resolved": "https://registry.npmjs.org/@storybook/client-logger/-/client-logger-3.4.7.tgz",
"integrity": "sha512-obyFZrM2Axoj0MwMoAZTvvGM/VjwLdXzUGZQLpafz97s61eDq6SX6Nd7rPyh1WJU+O5+1oo4R8u03iikpi3o2A==",
"version": "3.4.8",
"resolved": "https://registry.npmjs.org/@storybook/client-logger/-/client-logger-3.4.8.tgz",
"integrity": "sha512-ZOat8vZh/M8pSZ2J38HKHc2fxyY7bJeUhhkFBR+/2u/erF3EmWT+YK3nLhkI5Xa8V6sbPS/jdxTQyMSdmDvzaA==",
"dev": true
},
"@storybook/components": {
@@ -244,16 +244,16 @@
}
},
"@storybook/core": {
"version": "3.4.7",
"resolved": "https://registry.npmjs.org/@storybook/core/-/core-3.4.7.tgz",
"integrity": "sha512-mYMGmjFpJXGwVv2K7JjYUtaluI4ixhsb8VoJHU8tfrdqeiY26grsA5aUtosuFM0TsKft/GpZIOPfoynxHgBtjA==",
"version": "3.4.8",
"resolved": "https://registry.npmjs.org/@storybook/core/-/core-3.4.8.tgz",
"integrity": "sha512-izxtnGQQ26nkXI246qqhNtcYY/LbJ+L3D0Nk3hc1VDTrSMpftbI1/zJ/9ENFiz+XrsaDnxXW4iSgC626Ki/RCQ==",
"dev": true,
"requires": {
"@storybook/addons": "3.4.7",
"@storybook/channel-postmessage": "3.4.7",
"@storybook/client-logger": "3.4.7",
"@storybook/node-logger": "3.4.7",
"@storybook/ui": "3.4.7",
"@storybook/addons": "3.4.8",
"@storybook/channel-postmessage": "3.4.8",
"@storybook/client-logger": "3.4.8",
"@storybook/node-logger": "3.4.8",
"@storybook/ui": "3.4.8",
"autoprefixer": "7.2.6",
"babel-runtime": "6.26.0",
"chalk": "2.4.1",
@@ -278,6 +278,12 @@
"webpack-hot-middleware": "2.22.2"
},
"dependencies": {
"@storybook/addons": {
"version": "3.4.8",
"resolved": "https://registry.npmjs.org/@storybook/addons/-/addons-3.4.8.tgz",
"integrity": "sha512-2ND/D3J2WqryUxmU0NsihG97zxWcnQ+N5OR0hcCvF2kpe2e3RV55ywHzh9f0lxK8Lcqum2gsv+f5+bT1T4bCdg==",
"dev": true
},
"ajv": {
"version": "6.5.1",
"resolved": "https://registry.npmjs.org/ajv/-/ajv-6.5.1.tgz",
@@ -669,9 +675,9 @@
}
},
"@storybook/node-logger": {
"version": "3.4.7",
"resolved": "https://registry.npmjs.org/@storybook/node-logger/-/node-logger-3.4.7.tgz",
"integrity": "sha512-JtDpcKYn+1V7qIhaCmGveWfHd9n3GV7mxDCwEWuSQpcVTnD9YEww0LDtK9RyjR6dClXZwuzY52p4WDN7g5wWSQ==",
"version": "3.4.8",
"resolved": "https://registry.npmjs.org/@storybook/node-logger/-/node-logger-3.4.8.tgz",
"integrity": "sha512-xLN8aofM3TEGs7cAJeagi1OJeaY2CwqQeNe5z7I4YSgVqF+FmgN6vPahCVZo//Zvw/UHPCPRplS9qpCI9hGS+w==",
"dev": true,
"requires": {
"npmlog": "4.1.2"
@@ -688,19 +694,19 @@
}
},
"@storybook/react": {
"version": "3.4.7",
"resolved": "https://registry.npmjs.org/@storybook/react/-/react-3.4.7.tgz",
"integrity": "sha512-phPJz0RG3YlttyuX6yn2MCiL41i/xitexrxQi95EA+vIUUlo/NlnxyZ9YNDRBvGS5Qudc7O//aW5eAbtmXGCVg==",
"version": "3.4.8",
"resolved": "https://registry.npmjs.org/@storybook/react/-/react-3.4.8.tgz",
"integrity": "sha512-ax3m1SEWfJXQqZqLh9h/l+j85nJHJsJeTGzv4FYfLpTMVaQomMf8IrPC2IugM6yFQoza5bH1Qc3Popb9+1ZmyA==",
"dev": true,
"requires": {
"@storybook/addon-actions": "3.4.7",
"@storybook/addon-links": "3.4.7",
"@storybook/addons": "3.4.7",
"@storybook/channel-postmessage": "3.4.7",
"@storybook/client-logger": "3.4.7",
"@storybook/core": "3.4.7",
"@storybook/node-logger": "3.4.7",
"@storybook/ui": "3.4.7",
"@storybook/addon-actions": "3.4.8",
"@storybook/addon-links": "3.4.8",
"@storybook/addons": "3.4.8",
"@storybook/channel-postmessage": "3.4.8",
"@storybook/client-logger": "3.4.8",
"@storybook/core": "3.4.8",
"@storybook/node-logger": "3.4.8",
"@storybook/ui": "3.4.8",
"airbnb-js-shims": "1.6.0",
"babel-loader": "7.1.4",
"babel-plugin-macros": "2.2.2",
@@ -728,12 +734,59 @@
"prop-types": "15.6.1",
"react-dev-utils": "5.0.1",
"redux": "3.7.2",
"uglifyjs-webpack-plugin": "1.2.5",
"uglifyjs-webpack-plugin": "1.2.7",
"util-deprecate": "1.0.2",
"webpack": "3.12.0",
"webpack-hot-middleware": "2.22.2"
},
"dependencies": {
"@storybook/addon-actions": {
"version": "3.4.8",
"resolved": "https://registry.npmjs.org/@storybook/addon-actions/-/addon-actions-3.4.8.tgz",
"integrity": "sha512-lYCCdVXNO1OrBUcrg5Kj3LJFxZXzaXv4S4JLYGvf1UV87i1vNfc8U8nNltXvJhtF7ohldOmmUbIaW37Ynl0ftQ==",
"dev": true,
"requires": {
"@storybook/components": "3.4.8",
"babel-runtime": "6.26.0",
"deep-equal": "1.0.1",
"glamor": "2.20.40",
"glamorous": "4.13.1",
"global": "4.3.2",
"make-error": "1.3.4",
"prop-types": "15.6.1",
"react-inspector": "2.3.0",
"uuid": "3.2.1"
}
},
"@storybook/addon-links": {
"version": "3.4.8",
"resolved": "https://registry.npmjs.org/@storybook/addon-links/-/addon-links-3.4.8.tgz",
"integrity": "sha512-z/krQGMlKb6C3ai4tzscNhjmDzmqod/M6qN5ZFvlvhZmgAiN1Iou2mdOkkmLBALd4d6m88BGjgDN/5aj1wtrXQ==",
"dev": true,
"requires": {
"@storybook/components": "3.4.8",
"babel-runtime": "6.26.0",
"global": "4.3.2",
"prop-types": "15.6.1"
}
},
"@storybook/addons": {
"version": "3.4.8",
"resolved": "https://registry.npmjs.org/@storybook/addons/-/addons-3.4.8.tgz",
"integrity": "sha512-2ND/D3J2WqryUxmU0NsihG97zxWcnQ+N5OR0hcCvF2kpe2e3RV55ywHzh9f0lxK8Lcqum2gsv+f5+bT1T4bCdg==",
"dev": true
},
"@storybook/components": {
"version": "3.4.8",
"resolved": "https://registry.npmjs.org/@storybook/components/-/components-3.4.8.tgz",
"integrity": "sha512-r3fLayskVxxzDBq5MO9pGMTubs5RN0g8UFY3n9drwgfzZj3pKhDbdJ0uQF0epfg7oUmH678dvceuduyP//dacA==",
"dev": true,
"requires": {
"glamor": "2.20.40",
"glamorous": "4.13.1",
"prop-types": "15.6.1"
}
},
"ajv": {
"version": "6.5.1",
"resolved": "https://registry.npmjs.org/ajv/-/ajv-6.5.1.tgz",
@@ -913,9 +966,9 @@
}
},
"uglifyjs-webpack-plugin": {
"version": "1.2.5",
"resolved": "https://registry.npmjs.org/uglifyjs-webpack-plugin/-/uglifyjs-webpack-plugin-1.2.5.tgz",
"integrity": "sha512-hIQJ1yxAPhEA2yW/i7Fr+SXZVMp+VEI3d42RTHBgQd2yhp/1UdBcR3QEWPV5ahBxlqQDMEMTuTEvDHSFINfwSw==",
"version": "1.2.7",
"resolved": "https://registry.npmjs.org/uglifyjs-webpack-plugin/-/uglifyjs-webpack-plugin-1.2.7.tgz",
"integrity": "sha512-1VicfKhCYHLS8m1DCApqBhoulnASsEoJ/BvpUpP4zoNAPpKzdH+ghk0olGJMmwX2/jprK2j3hAHdUbczBSy2FA==",
"dev": true,
"requires": {
"cacache": "10.0.4",
@@ -1115,12 +1168,12 @@
}
},
"@storybook/ui": {
"version": "3.4.7",
"resolved": "https://registry.npmjs.org/@storybook/ui/-/ui-3.4.7.tgz",
"integrity": "sha512-GMloQZpsbNI5fBJZemwsmLjkso+ccPtxa0rdpt1gkwpPcB8uoTQglK2Pbg+ojHR5y46K/Alu9bmQ1IZRfTcVzQ==",
"version": "3.4.8",
"resolved": "https://registry.npmjs.org/@storybook/ui/-/ui-3.4.8.tgz",
"integrity": "sha512-BLa1eEZ3MHmJ0P9LT+tVJ9MK7Gcec+rFtUw4fDfBqCJ8NYNZz93qkc5CL9ebeqS8C2UgOz+glM8Mi3kTIq/dQg==",
"dev": true,
"requires": {
"@storybook/components": "3.4.7",
"@storybook/components": "3.4.8",
"@storybook/mantra-core": "1.7.2",
"@storybook/podda": "1.2.3",
"@storybook/react-komposer": "2.0.4",
@@ -1143,6 +1196,17 @@
"react-treebeard": "2.1.0"
},
"dependencies": {
"@storybook/components": {
"version": "3.4.8",
"resolved": "https://registry.npmjs.org/@storybook/components/-/components-3.4.8.tgz",
"integrity": "sha512-r3fLayskVxxzDBq5MO9pGMTubs5RN0g8UFY3n9drwgfzZj3pKhDbdJ0uQF0epfg7oUmH678dvceuduyP//dacA==",
"dev": true,
"requires": {
"glamor": "2.20.40",
"glamorous": "4.13.1",
"prop-types": "15.6.1"
}
},
"events": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/events/-/events-2.1.0.tgz",
@@ -12815,14 +12879,27 @@
}
},
"react-transition-group": {
"version": "2.3.1",
"resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-2.3.1.tgz",
"integrity": "sha512-hu4/LAOFSKjWt1+1hgnOv3ldxmt6lvZGTWz4KUkFrqzXrNDIVSu6txIcPszw7PNduR8en9YTN55JLRyd/L1ZiQ==",
"version": "2.4.0",
"resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-2.4.0.tgz",
"integrity": "sha512-Xv5d55NkJUxUzLCImGSanK8Cl/30sgpOEMGc5m86t8+kZwrPxPCPcFqyx83kkr+5Lz5gs6djuvE5By+gce+VjA==",
"dev": true,
"requires": {
"dom-helpers": "3.3.1",
"loose-envify": "1.3.1",
"prop-types": "15.6.1"
"prop-types": "15.6.2",
"react-lifecycles-compat": "3.0.4"
},
"dependencies": {
"prop-types": {
"version": "15.6.2",
"resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.6.2.tgz",
"integrity": "sha512-3pboPvLiWD7dkI3qf3KbUe6hKFKa52w+AE0VCqECtf+QHAKgOL37tTaNCnuX1nAAQ4ZhyP+kYVKf8rLmJ/feDQ==",
"dev": true,
"requires": {
"loose-envify": "1.3.1",
"object-assign": "4.1.1"
}
}
}
},
"react-treebeard": {
@@ -14989,7 +15066,7 @@
"requires": {
"lodash": "4.17.10",
"prop-types": "15.6.1",
"react-transition-group": "2.3.1",
"react-transition-group": "2.4.0",
"velocity-animate": "1.5.1"
}
},
chapter06/package.json
+2 -2
View File
@@ -6,7 +6,7 @@
"@storybook/addon-actions": "^3.4.7",
"@storybook/addon-links": "^3.4.7",
"@storybook/addons": "^3.4.7",
"@storybook/react": "^3.4.7",
"@storybook/react": "^3.4.8",
"babel-core": "^6.26.3",
"babel-eslint": "^8.2.3",
"babel-runtime": "^6.26.0",
@@ -27,7 +27,7 @@
"test": "react-app-rewired test --env=jsdom",
"eject": "react-app-rewired eject",
"storybook": "start-storybook -p 9009 -s public",
"build-storybook": "build-storybook -s public",
"build-storybook": "build-storybook -s public -o out_sb",
"flow": "flow",
"addTypes": "flow-typed install"
},
chapter06/src/components/countryFilterBar/countryFilterBar.story.js
+15
View File
@@ -0,0 +1,15 @@
import React from "react";
import { storiesOf } from "@storybook/react";
import { CountryFilterBar } from "./";
const countries = [
{ code: "AR", name: "Argentine" },
{ code: "BR", name: "Brazil" },
{ code: "PY", name: "Paraguay" },
{ code: "UY", name: "Uruguay" }
];
storiesOf("Country Filter Bar", module).add("with some countries", () => (
<CountryFilterBar list={countries} onSelect={() => null} />
));
chapter06/src/components/expandableCard.2/expandableCard.story.js
+45
View File
@@ -0,0 +1,45 @@
import React from "react";
import { storiesOf } from "@storybook/react";
import { ExpandableCard } from "./";
storiesOf("Expandable Card", module)
.add("with normal contents", () => (
<ExpandableCard key={229} title={"Normal"}>
<div>CITIES: 12</div>
<div>POPULATION: 41956</div>
</ExpandableCard>
))
.add("with many lines of content", () => (
<ExpandableCard key={229} title={"Long contents"}>
Many, many lines<br />
Many, many lines<br />
Many, many lines<br />
Many, many lines<br />
Many, many lines<br />
Many, many lines<br />
Many, many lines<br />
Many, many lines<br />
Many, many lines<br />
Many, many lines<br />
Many, many lines<br />
Many, many lines<br />
Many, many lines<br />
Many, many lines<br />
</ExpandableCard>
))
.add("with expandable cards inside", () => (
<ExpandableCard key={229} title={"Out card"}>
<ExpandableCard key={1} title={"First internal"}>
A single 1
</ExpandableCard>
<ExpandableCard key={2} title={"Second internal"}>
Some twos
</ExpandableCard>
<ExpandableCard key={3} title={"Third internal"}>
Three threes: 333
</ExpandableCard>
</ExpandableCard>
));
chapter06/src/stories/index.js
+7 -5
View File
@@ -8,16 +8,18 @@ import { linkTo } from "@storybook/addon-links";
import { Button, Welcome } from "@storybook/react/demo";
const make2 = (s: string) => s + s + s;
storiesOf("Welcome", module).add("to Storybook", () => <Welcome showApp={linkTo("Button")} />);
storiesOf("Welcome", module).add("to Storybook", () => (
<Welcome showApp={linkTo("Button")} />
));
storiesOf("Button", module)
.add("with text", () => <Button onClick={action("clicked")}>Hello Button</Button>)
.add("with text", () => (
<Button onClick={action("clicked")}>Hello Button</Button>
))
.add("with some emoji", () => (
<Button onClick={action("clicked")}>
<span role="img" aria-label="so cool">
😀 😎 👍 💯 {make2("FK")}
😀 😎 👍 💯
</span>
</Button>
));