Documentation

Fundamental-react uses Component Story Format (CSF) and @storybook/addon-docs to automatically generate component documentation.

Title

The page title is generated from the default export in the stories file.

src/__stories__/Component.stories.js

export default {
    title: 'Component API/Component',
    component: Component
};

Description

Each component's description is generated from the JSDoc comment above the component declaration in the component's file.

src/Component/Component.js

/**
 * The **Component** is used for component like things.
 */

const Component = () => ();

Examples

Each example is generated from from the named story exports in each stories file.

Note: The first story, generally named primary will appear without a description.

src/__stories__/Component.stories.js

export const myExample = () => <Component />;

This story will appear in the docs titled "My Example" with no description.

Adding custom title and/or description

A custom story name and story description can be added by adding parameters to your story.

myExample.story = {
    name: 'This is a custom title for the example',
    parameters: {
        docs: {
            storyDescription: `This is a custom description for the example. You can use markdown in here.`
        }
    }
};

Props Table

The property table is generated from the JSDoc comment above each prop type in the component's file.

src/Component/Component.js

Component.propTypes = {
    /** description of prop */
    prop: PropTypes.string
};

Subcomponents

If Component has subcomponents, add them to the default export as an object to have them included as tabs in the props table.

src/__stories__/Component.stories.js

export default {
    title: 'Component API/Component',
    component: Component,
    subcomponents: { ComponentSubComponent, ComponentSubComponentTwo }
};