ng-storybook-standalone

Installs minimum depedencies for storybook to run with agular apps using SystemJs as a module loader

compitable with Webpack v4+

typescript must be installed in order to use this package

Install:

$ npm install --save-dev ng-storybook-standalone

With release of 0.0.1 the package is expected to be used in Node v4+ environment. Support for Node v3 and lower was dropped, but you can install and use the loader version of 0.0.0 in older environments.

With release of 1.0.1 the loader is expected to be used in Webpack v4+ environment. Support for Webpack v3 and lower was dropped, but you can install and use the loader version of 0.0.0 in older environments.

Prerequisites:

• Angular application using either webpack or systemjs as a module loader
• typescript with tsconfig.json file in place (storybook uses this file to configure typescript)
• npm package manager (or yarn)

Usage

After installing the package. Create a .storybook folder in your root directory

in this folder create 2 files config.js and webpack.config.js

In your .storybook/webpack.config.js:

webpack.config.js

const path = require("path");

module.exports = {
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: ["sass-loader"],
        include: path.resolve(__dirname, "../")
      },
      {
        test: /\.(ts|tsx)$/,
        use: ["awesome-typescript-loader", "ng-systemjs-to-webpack"],
        include: path.resolve(__dirname, "../")

      }
    ]
  }
};

and in your .storybook/config.js:

config.js

import { configure } from '@storybook/angular';

function loadStories() {
  require('../src/stories/index.ts');
}

configure(loadStories, module);

then you need to create a cerate stories folder in your src directory. In the stories folder we need a file called index.ts

in your src/stories/index.ts

index.ts

  import { storiesOf, moduleMetadata } from '@storybook/angular';

storiesOf('My Button', module)
  .add('with some emoji', () => ({
    component: AComponent,
    props: {
      text: '😀 😎 👍 💯',
    },
  }));

import { Component } from '@angular/core';

@Component({
    moduleId: module.id,
    selector: 'app-fin',
    template: '<h1>@storybook is awsome</h1>',
    styles: ['{color: white; background-color: black; text-align: center}']
})
export class AComponent {}

In the scripts in Package.json add a command to run storybook

package.json

scrpts {
  "storybook": "start-storybook -p 9001 -c .storybook",
}

To run storybook use

Terminal

 $ npm run storybook

if you don't have typescript installed you can follow this link install typescript for storybook.

Contributing:

Feel free to open issues to propose stuff and participate. Pull requests are also welcome.

Licence:

MIT