Storybook ready

.vscode/settings.json

@@ -0,0 +1,2 @@
+{
+}

chapter06/.eslintrc

@@ -5,6 +5,7 @@
         "sourceType": "module"
     },
     "env": {
+        "node": true,
         "browser": true,
         "es6": true,
         "jest": true

chapter06/.storybook/addons.js

@@ -1,2 +1,3 @@
-import '@storybook/addon-actions/register';
+import "@storybook/addon-actions/register";
-import '@storybook/addon-links/register';
+import "@storybook/addon-knobs/register";
+import "@storybook/addon-notes/register";

chapter06/.storybook/config.js

@@ -4,5 +4,3 @@ configure(() => {
     const req = require.context("../src", true, /\.story\.js$/);
     req.keys().forEach(filename => req(filename));
 }, module);
-
-configure(loadStories, module);

chapter06/package.json

@@ -3,14 +3,17 @@
     "version": "0.1.0",
     "private": true,
     "devDependencies": {
-        "@storybook/addon-actions": "^3.4.7",
+        "@storybook/addon-actions": "^3.4.8",
-        "@storybook/addon-links": "^3.4.7",
+        "@storybook/addon-knobs": "^3.4.8",
-        "@storybook/addons": "^3.4.7",
+        "@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"
     },

chapter06/src/components/countryFilterBar/countryFilterBar.md

@@ -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/countryFilterBarWithAddons.story.js

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

@@ -13,20 +13,21 @@ storiesOf("Expandable Card", module)
 
     .add("with many lines of content", () => (
         <ExpandableCard key={229} title={"Long contents"}>
-            Many, many lines<br />
+            <div>Many, many lines</div>
-            Many, many lines<br />
+            <div>Many, many lines</div>
-            Many, many lines<br />
+            <div>Many, many lines</div>
-            Many, many lines<br />
+            <div>Many, many lines</div>
-            Many, many lines<br />
+            <div>Many, many lines</div>
-            Many, many lines<br />
+            <div>Many, many lines</div>
-            Many, many lines<br />
+            <div>Many, many lines</div>
-            Many, many lines<br />
+            <div>Many, many lines</div>
-            Many, many lines<br />
+            <div>Many, many lines</div>
-            Many, many lines<br />
+            <div>Many, many lines</div>
-            Many, many lines<br />
+            <div>Many, many lines</div>
-            Many, many lines<br />
+            <div>Many, many lines</div>
-            Many, many lines<br />
+            <div>Many, many lines</div>
-            Many, many lines<br />
+            <div>Many, many lines</div>
+            <div>Many, many lines</div>
         </ExpandableCard>
     ))
 

chapter06/src/components/expandableCard.2/expandableCardWithAddon.story.js

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