You can expand Storybook with add-ons, which allow you to enhance your showcase. Out of the many available ones, we will install three of them and have a quick look at their usage:

• addon-actions lets you see the data received by event handlers to see what would happen, for example, when the user clicks on a component
• addon-notes allows you to add notes to a component, to explain how it works or to give insights on its usage
• addon-knobs lets you dynamically tweak a component's props to see how they change

Since add-ons are quite simple, let's look at an example where all of the aforementioned ones are used. First, we'll have to create an addons.js file in the .storybook directory, with a line for each add-on that we want to use:

import "@storybook/addon-actions/register";
import "@storybook/addon-knobs/register";
import "@storybook/addon-notes/register";

Now let's modify our stories so that CountryFilterBar will show what value it sends back with the onSelect event, and will also show some notes describing the component, so that ExpandableCard will let you tweak the props it receives:

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

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

For the action, I provided an action(...) function, which will display its results in another tab, ACTION LOGGER, as follows:

I also added a withNotes(...) call, providing the text from a markdown file I created. The content of this will be shown in the NOTES tab, as shown in the following screenshot:

Finally, we can add a few "knobs" that lets the user change parameters dynamically. Let's allow them to modify the card's title and the numbers shown inside it:

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

When the user sees this story, the KNOBS panel lets them type in some values that are immediately updated on screen, as follows:

We used only texts and numbers, but you can also provide knobs for Booleans, colors, dates, numbers within a given range, objects, string arrays, and options from a list.