@boundstate/tier-one-dgeni

tier-one-dgeni

Docs generator for tier-one and derivative frameworks. The docs app is built on your project source so that components can be easily demonstrated.

Usage

// gulpfile.js
const gulp = require('gulp');
const docTasks = require('@boundstate/tier-one-dgeni/tasks');

docTasks.register({
  gulp: gulp,
  faviconPath: 'favicon.ico',
  scssPath: 'src/scss/tier-one.scss',
  iconSvgPath: 'open-iconic/sprite/sprite.svg'
});

Run docs app, watching for changes:

gulp docs:start

Options

• gulp: gulp instance to register tasks
• faviconPath: path to favicon to be used by docs app (relative to project root)
• scssPath: path to SASS file to be used by docs app (relative to project root)
• iconSvgPath: path to icon SVG file to be used by docs app

Note: your project source code must be at./src and re-export the tier-one library.

Demos

Add a demo for a component by creating a _demo folder within the component folder. Create a file that exports a module with a name ending in DemoModule (e.g. ButtonDemoModule).

The DemoToolsModule module exported by this library provides tools useful for demos:

demo-control-info

Renders debug information about input controls.

Usage

@Component({templateUrl: 'demo.html'})
class InputTextDemoComponent {
  controls: {[key: string]: FormControl} = {
    'text1': new FormControl(''),
    'text2': new FormControl('', Validators.required)
  };
  controlsArray = _.map(this.controls, (control, name) => ({name, control}));
  controlGroup = new FormGroup(this.controls);
  ...
}

<span class="demo-control-id">text1</span>
<bss-input-text 
  label="Text 1" 
  [control]="controlGroup.controls['text1']"></bss-input-text>

<span class="demo-control-id">text2</span>
<bss-input-text 
  label="Text 2" 
  [control]="controlGroup.controls['text2']"></bss-input-text>

<demo-control-info 
  [controlsArray]="controlsArray" 
  [controlGroup]="controlGroup"></demo-control-info>