Storybook Addon for AngularJS (1.x)

Note This addon is intended to be used with @storybook/html, available since Storybook 4.

Installation

Use your favorite 📦 package manager to install the addon in your project's devDependencies:

npm:

npm install --save-dev storybook-addon-angularjs

Yarn:

yarn add --dev storybook-addon-angularjs

Usage

This addon is flexible enough to let you choose how you want to write stories.

Your stories can be as simple as this:

export default {
  title: "QuoteCard",
  decorators: [withAngularJs("myApp")],
};

export const simpleTemplate = () => `
  <quote-card author="'Me'">
    It works with a simple template!
  </quote-card>
`;

But you may choose something more advanced:

import { withKnobs, text } from "@storybook/addon-knobs";
import { action } from "@storybook/addon-actions";

import { html, withAngularJs } from "storybook-addon-angularjs";

class MockedAppService {
  constructor() {
    this.message = "Mocked message";
  }
}

function mockLoggingService($log) {
  return {
    log: function(message) {
      $log.log(message);
    },
  }
}

export default {
  title: "QuoteCard",
  decorators: [withKnobs, withAngularJs /* OR */ withAngularJs("myApp")],
  parameters: {
    ng: {
      module: "myApp", // optional when provided in the decorator
      rebuild: undefined, // optional, indicates when to rebuild the story. Can be "always", "mount" (when switching stories) or "update" (when updating knobs or controls)
      hooks: {
        beforeCompile() {
          // called once before compiling the the component
        },
        beforeUpdate(SomeService) {
          // called before updating the component with new props
          SomeService.setValue("Hi!");
        },
      },
      mock: {
        // When the app depends on modules which cannot be provided in the story you can mock them
        modules: ["some.external.module"],
        // You can mock / override constants here
        constants: {
          API_URL: "https://example.com",
        },
        // You can mock / override services here (dependency injection also works)
        services: {
          AppService: MockedAppService,
        },
        // You can mock / override factories here (dependency injection also works)
        factories: {
          LoggingService: mockLoggingService,
        },
      }
    },
  },
};

export const fancyTemplate = () => {
  const content = text("Content", "It works with a fancy tagged template string!");
  const author = text("Author", "Me");
  const onEvt = action("clicked");

  return html`
    <quote-card author="${author}" on-click="${onEvt}(foo)">
      {{${content}}}
    </quote-card>
  `;
};

You can even write stories with Markdown files, with the support for the MDX Story Format. This is awesome for writing documentation for your components.

import { Meta, Story, Preview } from "@storybook/addon-docs/blocks";

import { withAngularJs } from "storybook-addon-angularjs";

<Meta title="Demos|MDX Demos" decorators={[withAngularJs("myApp")]} />

# Storybook Addon for AngularJS

This is a simple Quote Card:

<Preview>
  <Story name="Simple Template" height="120px">
    {`
      <quote-card author="'Me'">
        It works with a simple template!
      </quote-card>
    `}
  </Story>
</Preview>

See these and more examples in the example subfolder.

API

withAngularJs(module?: string | string[])

Storybook decorator. Can optionally be used to initialize the module(s) used within the story.

Development

Prepare your environment

npx lerna bootstrap

Build the Example Storybook

npx lerna bootstrap

License

Use of this source code is governed by an MIT-style license that can be found in the LICENSE file.