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

Merge pull request #1 from fkereki/storybook

Browse Source 
Storybook work
This commit is contained in:
Federico Kereki
2018-06-30 18:54:08 -03:00
committed by GitHub
parent a841c230a3 e94000ff7f
commit bfaad12a63
13 changed files with 16217 additions and 15712 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.vscode/settings.json
Vendored
+2
View File
@@ -0,0 +1,2 @@
{
}
chapter06/.eslintrc
+1
View File
@@ -5,6 +5,7 @@
"sourceType": "module"
},
"env": {
"node": true,
"browser": true,
"es6": true,
"jest": true
chapter06/.gitignore
+1
View File
@@ -8,6 +8,7 @@
# production
/build
/out_sb
# misc
.DS_Store
chapter06/.storybook/addons.js
+3 -2
View File
@@ -1,2 +1,3 @@
import '@storybook/addon-actions/register';
import '@storybook/addon-links/register';
import "@storybook/addon-actions/register";
import "@storybook/addon-knobs/register";
import "@storybook/addon-notes/register";
chapter06/.storybook/config.js
+5 -6
View File
@@ -1,7 +1,6 @@
import { configure } from '@storybook/react';
import { configure } from "@storybook/react";
function loadStories() {
require('../src/stories');
}
configure(loadStories, module);
configure(() => {
const req = require.context("../src", true, /\.story\.js$/);
req.keys().forEach(filename => req(filename));
}, module);
chapter06/package-lock.json
Generated
+16088 -15674
View File
File diff suppressed because it is too large Load Diff
chapter06/package.json
+10 -7
View File
@@ -3,14 +3,17 @@
"version": "0.1.0",
"private": true,
"devDependencies": {
"@storybook/addon-actions": "^3.4.7",
"@storybook/addon-links": "^3.4.7",
"@storybook/addons": "^3.4.7",
"@storybook/react": "^3.4.7",
"@storybook/addon-actions": "^3.4.8",
"@storybook/addon-knobs": "^3.4.8",
"@storybook/addon-notes": "^3.4.8",
"@storybook/react": "^3.4.8",
"babel-core": "^6.26.3",
"babel-eslint": "^8.2.3",
"babel-eslint": "^8.2.5",
"babel-runtime": "^6.26.0",
"eslint-plugin-react": "^7.9.1",
"eslint": "^5.0.1",
"eslint-plugin-babel": "^5.1.0",
"eslint-plugin-flowtype": "^2.49.3",
"eslint-plugin-react": "^7.10.0",
"flow-bin": "^0.75.0",
"react-scripts": "1.1.4"
},
@@ -27,7 +30,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.md
+7
View File
@@ -0,0 +1,7 @@
# Introduction
This is a description file for `CountryFilterBar`, written with Markdown.
# Description
It's a _nice_ component!
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/countryFilterBar/countryFilterBarWithAddons.story.js
+24
View File
@@ -0,0 +1,24 @@
import React from "react";
import { storiesOf } from "@storybook/react";
import { action } from "@storybook/addon-actions";
import { withNotes } from "@storybook/addon-notes";
import { CountryFilterBar } from "./";
import markDownText from "./countryFilterBar.md";
const countries = [
{ code: "AR", name: "Argentine" },
{ code: "BR", name: "Brazil" },
{ code: "PY", name: "Paraguay" },
{ code: "UY", name: "Uruguay" }
];
storiesOf("Country Filter Bar (with addons)", module).add(
"with some countries - with actions and notes",
withNotes(markDownText)(() => (
<CountryFilterBar
list={countries}
onSelect={action("change:country")}
/>
))
);
chapter06/src/components/expandableCard.2/expandableCard.story.js
+46
View File
@@ -0,0 +1,46 @@
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"}>
<div>Many, many lines</div>
<div>Many, many lines</div>
<div>Many, many lines</div>
<div>Many, many lines</div>
<div>Many, many lines</div>
<div>Many, many lines</div>
<div>Many, many lines</div>
<div>Many, many lines</div>
<div>Many, many lines</div>
<div>Many, many lines</div>
<div>Many, many lines</div>
<div>Many, many lines</div>
<div>Many, many lines</div>
<div>Many, many lines</div>
<div>Many, many lines</div>
</ExpandableCard>
))
.add("with expandable cards inside", () => (
<ExpandableCard key={229} title={"Outer card"}>
<ExpandableCard key={1} title={"First inner card"}>
A single 1
</ExpandableCard>
<ExpandableCard key={2} title={"Second inner card"}>
Some twos <br />2, 2, 2, 2...
</ExpandableCard>
<ExpandableCard key={3} title={"Third inner card"}>
Three threes: 333
</ExpandableCard>
</ExpandableCard>
));
chapter06/src/components/expandableCard.2/expandableCardWithAddon.story.js
+15
View File
@@ -0,0 +1,15 @@
import React from "react";
import { storiesOf } from "@storybook/react";
import { withKnobs, text, number } from "@storybook/addon-knobs";
import { ExpandableCard } from "./";
storiesOf("Expandable Card (with knobs)", module)
.addDecorator(withKnobs)
.add("with normal contents", () => (
<ExpandableCard key={229} title={text("Card title", "XYZZY")}>
<div>CITIES: {number("Number of cities", 12)}</div>
<div>POPULATION: {number("Population", 54321)}</div>
</ExpandableCard>
));
chapter06/src/stories/index.js
-23
View File
@@ -1,23 +0,0 @@
/* @flow */
import React from "react";
import { storiesOf } from "@storybook/react";
import { action } from "@storybook/addon-actions";
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("Button", module)
.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>
));