Replace Storybook with documentation site (Phase 1)

[nstuyvesant]

Storybook Replacement with Docs website

What problems does this solve?

1. The existing stories for the chart components are not organized in a way that promotes discovery. They are really just a list of demos organized into Complex and Simple categories which is not the way developers look for information on a chart library.
2. Dependency on Storybook is risky. In the past, Storybook compatibility and bugs blocked progress towards upgrading the component libraries.
3. Greater simplicity - Each package in the monorepo requires at least 12 dev dependencies, config info for Storybook, code to generate stories, and package.json scripts.
4. Faster build times - Bundling all of the component libraries in the monorepo takes about 30 seconds while Storybook adds minutes.

How does this work?

• A package called docs was added to the monorepo. The static website is written using carbon-components-svelte. Svelte is used because of the minimal amount of boilerplate and its easy translation to other frameworks should the need arise (like using Sveltosis). It also compiles away the framework.
• This docs package combines information from the Carbon Design website, information in Storybook MDX files, and new documentation. It also provides detailed installation and setup information using live examples for each supported framework.
• When yarn build:package is called for the docs package, it outputs a website to ../../pages/docs and API docs to ../../pages/api. This allows the new docs site to coexist with the existing Storybook demos and API documentation. Only someone who knows the URL would be able to view it. This permits a review process prior to removing the Storybook demos.

What's missing?

• The documentation portion is complete but only Alluvial, Area, and Stacked Area chart examples are finished.

Netlify Deployment Example

Visit this URL