New
Storybook for full-stack developersAutomate with Chromatic
Star75,295
Back to integrations
Add your integration
Categories
  • ⭐️ Popular
  • 🧩 Essentials
  • 🛠 Code
  • ⚡️ Data & state
  • ✅ Test
  • 💅 Style
  • 🎨 Design
  • ⚙️ Appearance
  • 🗄 Organize
How to install addons Create an addon
storybook-webpack-angular-types-plugin
A webpack plugin that adds type information to angular classes. The information can be consumed by @storybook/addon-docs.
npm install storybook-webpack-angular-types-plugin
Last updated 4 months ago
6
Downloads per week
Readme View on GitHub

Webpack angular types plugin

A webpack plugin that generates types information for the Storybook <ArgsTable /> during compile time of Storybook itself.

Heads up! This package is in an experimental stage and not yet officially supported by Storybook until it got reviewed and approved by the core team.

Goals

  • Being fast. The additional type extraction should not be noticeable.
  • Zero-config. The <ArgsTable /> should render useful information out-of-the-box.
  • Configurable. The plugin should be configurable in a way that you can adjust the content of <ArgsTable />.

Installation

Remove compodoc

If you are using compodoc for extracting types from your components, then you first have to remove it.

.storybook/preview.js

// Remove these
import { setCompodocJson } from "@storybook/addon-docs/angular";
import docJson from "../documentation.json";
setCompodocJson(docJson);

package.json

{
  // Before
  "scripts": {
	"docs:json": "compodoc -p ./tsconfig.json -e json -d .",
	"storybook": "yarn docs:json && start-storybook -p 6006",
	"build-storybook": "yarn docs:json && build-storybook"
  },
  // after
  "scripts": {
	"storybook": "start-storybook -p 6006",
	"build-storybook": "build-storybook"
  }
}

If you don't use compodoc for anything else, then you should remove the documentation.json in your root directory as well as the compodoc dependency in your package.json.

Install package

// npm
npm install storybook-webpack-angular-types-plugin --save-dev

// yarn
yarn install --dev storybook-webpack-angular-types-plugin

Configure storybook

The following steps are necessary because this plugin is not yet integrated as a Storybook addon.

.storybook/main.js

const WebpackAngularTypesPlugin = require('storybook-webpack-angular-types-plugin/index').WebpackAngularTypesPlugin;

module.exports = {
	// ...
	webpackFinal: (config) => {
		config.plugins.push(new WebpackAngularTypesPlugin());
		return config;
	},
};

.storybook/preview.ts

import {
	extractArgTypes,
	STORYBOOK_ANGULAR_ARG_TYPES,
} from 'storybook-webpack-angular-types-plugin/extract-arg-types';

(window as any)[STORYBOOK_ANGULAR_ARG_TYPES] = {};

export const parameters = {
	docs: {
		inlineStories: true,
		extractArgTypes,
	},
};

Features

Take a look at the packages/anguar-demo package to see the possibilities of this plugin. A full documentation will be available at a later point in time.

You can start the demo app by running

yarn start-demo
Join the community
5,867 developers and counting
WhyWhy StorybookComponent-driven UI
Open source software
Storybook

Maintained by
Chromatic
Special thanks to Netlify and CircleCI