@islavi/ng-component-lab v1.2.0
Ng Component Lab
A component development and testing tool built for Angular 2, inspired by React Storybook This is a fork from component-lab with some bug fixes and with angular 2 instead of angular 4.
Getting Started
Installation and Configuration
Install NG Component Lab: Via npm:
npm install @islavi/ng-component-lab --save-dev
Via yarn:
yarn add @islavi/ng-component-lab --dev
The best way to understand how to configure ng-component-lab is to download the example from https://github.com/islavi/ng-component-lab-example The following files should be configured:
ng-lab-webpack.config.js
file in the root of your project This is webpack configuration file for ng-component-lab Below is example file:var webpack = require('webpack'); var path = require('path'); var webpackConfig = { devtool: 'source-map', plugins: [], resolve: { extensions: ['.ts', '.js'], modules: [path.resolve(__dirname, 'node_modules')] }, module: { loaders: [ { test: /\.ts$/, loaders: [ 'awesome-typescript-loader', 'angular2-template-loader', 'angular2-router-loader' ] }, { test: /\.css$/, loaders: ['to-string-loader', 'css-loader'] }, { test: /\.html$/, loader: 'raw-loader' } ] }, node: { global: true, crypto: 'empty', __dirname: true, __filename: true, process: true, Buffer: false, clearImmediate: false, setImmediate: false } }; module.exports = webpackConfig;
Create folder
.lab
in the root of your application, and create two files inside of it: First file:ng-component-lab.config.js
- configuration file of ng-component-lab. Example:var getWebPackConfig = require('./../ng-lab-webpack.config'); module.exports = { webpackConfig: getWebPackConfig, host: 'localhost', port: 6007, include: [], suites: { feature: './.lab/ng-lab-configuration.module.ts' } };
Second file:
ng-lab-configuration.module.ts
- configuration module for ng-component-lab. Example:import { createLab } from '@islavi/ng-component-lab'; import { ComponentsModule } from './../components/components.module'; createLab({ /** * NgModule to import. All components and pipes must be exported * by this module to be useable in your experiments */ ngModule: ComponentsModule, /** * Function that returns an array of experiments. * * Here is an example using webpack's `require.context` to * load all modules ending in `.exp.ts` and returning thier * default exports as an array: */ loadExperiments() { const context = (require as any).context('./../experiments/', true, /\.exp\.ts/); var result = context.keys().map(context).map(mod => mod.default); return result; } });
Writing Experiments
Create folder called
experiments
in the root folder.Create a
component-name.exp.ts
file inexperiments
folder (example:button.component.exp.ts
). Experiments can also provide both a template context object and an array of styles. Some cases can be ignored by usingxcase
instead ofcase
. Example:import { experimentOn } from '@islavi/ng-component-lab'; import { ButtonComponent } from "./../components/button.component"; export default experimentOn('Button') .case('Primary Button', { styles: [` my-button /deep/ .my-button { border: solid 1px darkblue; color: white; border-radius: 4px; padding: 2px 10px; cursor: pointer; } my-button /deep/ .my-button-primary { background-color: blue; } `], template: ` <my-button>Button</my-button> ` }) .case('Warning Button', { context: { buttonLabel: 'Warning!', }, styles: [` my-button /deep/ .my-button { border: solid 1px darkblue; color: white; border-radius: 4px; padding: 2px 10px; cursor: pointer; } my-button /deep/ .my-button-warning { border: solid 1px darkred; background-color: red; } `], template: ` <my-button [type]="'warning'"> {{ buttonLabel }} </my-button> ` }) .xcase('Not Yet Implemented', { template: ` <my-button raised>Raised Button</my-button> ` })
Running Ng Component Lab
In the
scripts
section of your package.json add a script to start Component Lab:{ "scripts": { "lab": "ng-component-lab --config .lab/ng-component-lab.config.js -- feature" } }
Note: feature is the suite name.
Start the Component Lab server using npm or yarn:
Via npm:
npm run lab
Via yarn:
yarn run lab
Bulding ng-component-lab from your project
In the
scripts
section of your package.json add a script to build Component Lab:{ "scripts": { "build-lab": "ng-component-lab --config .lab/ng-component-lab.config.js --build -- feature" } }
Note: feature is the suite name. .dist is the default floder where the build bundle will be created. you can override this in your webpack config. Example:
"output": { "path": ".somePath" }
Start the Component Lab build using npm or yarn:
Via npm:
npm run build-lab
Via yarn:
yarn run build-lab
Bulding ng-component-lab from src
Install all dependencies:
Via npm:
npm install
Via yarn:
yarn install
Build ng-component-lab:
Via npm:npm run build
Via yarn:
yarn run build
This will create a folder called "release".
6 years ago