First, start by installing Storybook itself; we are going to use this version for React, but the tool can also be used with Angular and Vue:

npm install @storybook/react --save-dev

Then add a couple of scripts to package.json: one will launch Storybook (as we'll see later) and the other will build a standalone application that you can use to showcase your components in an independent fashion:

"scripts": { 
    "storybook": "start-storybook -p 9001 -c .storybook", 
    "build-storybook": "build-storybook -c .storybook -o out_sb",
    .
    .
    .

Now let's write a simple story for ExpandableCard. In the same directory where that component is (the final version, which actually allowed expanding and compressing, not the first version without that behavior), create a ExpandableCard.story.js file. What would you want to show about your component? You could display the following:

• An expandable card with a couple of lines within, as we used previously
• Another card with many lines, to show how the card stretches
• A card containing other cards, each of them with some minimal content

The code will look quite similar in style to the tests we wrote for Node back in Chapter 5, Testing and Debugging your Server. I'm assuming that you can figure out what each test does:

// Source file: src/components/expandableCard.2/expandableCard.story.js

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

So as not to have a single story, let's write a short one for the CountryFilterBar component; it will be in the same directory, named countryFilterBar.story.js. And, yes, I know this is a very simple component, but this is just for our example!

// Source file: src/components/countryFilterBar/countryFilterBar.story.js

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} />
));

Finally, we need a launcher. Create a .storybook directory at the root of the project, and a config.js file within, as follows:

import { configure } from "@storybook/react";

configure(() => {
    const req = require.context("../src", true, /.story.js$/);
    req.keys().forEach(filename => req(filename));
}, module);

configure(loadStories, module);

Yes, it's sort of mysterious—but it basically says to scan the /src directory, and pick up all of the files whose names end with .story.js. Now we are set to see how this all comes together.