適用於 AngularJS (1.x) 的 Storybook 附加元件

注意 此附加元件旨在與 Storybook 4 開始提供的 @storybook/html 一起使用。

安裝

使用您最喜歡的 📦 套件管理器將附加元件安裝到您專案的 devDependencies 中

npm

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

Yarn

yarn add --dev storybook-addon-angularjs

用法

此附加元件足夠彈性，可讓您選擇如何編寫故事。

您的故事可以像這樣簡單

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

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

但您可以選擇更進階的方式

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>
  `;
};

您甚至可以使用 Markdown 檔案編寫故事，並支援 MDX 故事格式。這對於撰寫元件的文件非常棒。

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>

在範例子資料夾中查看這些和其他範例。

API

withAngularJs(module?: string | string[])

Storybook 裝飾器。可以選擇性地用於初始化故事中使用的模組。

開發

準備您的環境

npx lerna bootstrap

建置範例 Storybook

npx lerna bootstrap

授權許可

此原始程式碼的使用受 MIT 樣式授權的約束，該授權可在 LICENSE 檔案中找到。