@anansi/storybook

Storybook for Anansi

Storybook for Anansi is a UI development environment for the Anansi framework. With it, storybook will automatically work with all components you build, even when customizing and extending your Anansi integration.

Storybook runs outside of your app. So you can develop UI components in isolation without worrying about app specific dependencies and requirements.

Getting Started

If you already have an existing Anansi project

cd my-app
anansi add storybook

For new projects

npm install -g @anansi/cli

Then generate your new project:

anansi hatch my-app-name

If you just used the @anansi/webpack-config without the rest of the framework:

npm install --dev storybook @storybook/react @anansi/storybook

Then set @anansi/storybook as the framework .storybook/main.js:

module.exports = {
  framework: {
    name: '@anansi/storybook'
  },
};

Typescript

npx sb init will select .ts starter stories if your package.json has typescript as a dependency. If starting a new project, run npm init and npm install typescript --save-dev before initializing storybook to get the typescript starter stories.

Storybook also comes with a lot of addons and a great API to customize as you wish. You can also build a static version of your Storybook and deploy it anywhere you want.