React Styleguidist

React Styleguidist is a component development tools that would improves the workflow and code reuse in React project.

By default, it allows you to document your React component using comments, the prop-types library and the component use cases with markdown files.

To show you an example, Button component in Shopit is documented with:

component description using comment here
supported props using prop-types here.
use cases with markdown here.
output from React Styleguidist can be seen here.

For this workshop, we can customize React Styleguidist so we can use TypeScript to document our component instead of prop-types.

Benefits of Using Component Development Tools

allows you to develop component in isolation. This allows you to ignore the business rules and focus on developing a reusable UI component.
encourage component reuse as it is easier to explore and try the components that have been developed.
reduce need of manual documentation. As documentation are generated with comment and code itself, you do not need to worry about outdated documentation.
ease communications with designers and business stackholders. It is a great tools when all your UI components is available in single page that you can compare and highlight variation and inconsistency.

Configure Styleguidist to Parse TypeScript

By default, React Styleguidist use prop-types to generate documentation but we want it to generate from our TypeScript code.

Let’s configure it with the following steps.

Install react-docgen-typescript, which will generates metadata from TypeScript code in the format that React Styleguidist can understand.
```
bash
yarn add -D react-docgen-typescript
```
```
bash
yarn add -D react-docgen-typescript
```

Configure React Styleguidist to use react-docgen-typescript by editing styleguide.config.js.

styleguide.config.js
js
const path = require('path');
module.exports = {
  components: 'src/components/**/*.{jsx,tsx}',
  propsParser: (filePath, source, resolver, handlers) => {
    const { ext } = path.parse(filePath);
    return ext === '.tsx'
      ? require('react-docgen-typescript').parse(filePath, source, resolver, handlers)
      : require('react-docgen').parse(source, resolver, handlers);
  },
  template: {
    head: {
      links: [
        {
          rel: 'stylesheet',
          href: 'https://bootswatch.com/3/cerulean/bootstrap.min.css',
        },
      ],
    },
  },
};

styleguide.config.js
js
const path = require('path');
module.exports = {
  components: 'src/components/**/*.{jsx,tsx}',
  propsParser: (filePath, source, resolver, handlers) => {
    const { ext } = path.parse(filePath);
    return ext === '.tsx'
      ? require('react-docgen-typescript').parse(filePath, source, resolver, handlers)
      : require('react-docgen').parse(source, resolver, handlers);
  },
  template: {
    head: {
      links: [
        {
          rel: 'stylesheet',
          href: 'https://bootswatch.com/3/cerulean/bootstrap.min.css',
        },
      ],
    },
  },
};