ng-storybook-standalone v0.0.3
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.