@trustlane/schematics

A schematics collection for Trustlane Angular app. This collection extends the @schematics/angular one, meaning you still can access the originals schematics while having direct access to trustlane collection.

Usage no npm install needed!

<script type="module">
  import trustlaneSchematics from 'https://cdn.skypack.dev/@trustlane/schematics';
</script>

README

Trustlane-schematics

A schematics collection for Trustlane Angular app. This collection extends the @schematics/angular one, meaning you still can access the originals schematics while having direct access to trustlane collection.

Schematics:

  • story :
    Generate a scaffolded file to write stories for Storybook in MDX or CSF format.

  • documentation :
    Generate a MDX file to write documentation-node-only stories for Storybook

  • ui-component :
    Generate all files needed for a ui-component in Trustlane App. i.e : style, HTML template, spec, controller, module & story

  • page :
    Generate all the files to create a new page in Trustlane app, and register it in router & module.

  • domain :
    Generate all the files to create a new domain for Trustlane app.

  • dialog :
    Generate a MatDialog component, according to Trustlane design system.

  • ng-add :
    Support ng add command. When installed via ng add command, the @trustlane/schematics collection is set as the default collection for the project.

  • i18n-check :
    Check the difference beetween traduction files of 2 langages (fr, en). Display report on console and raise exception when missing translation was detected.

Usage

Installation

npm install --save-dev @trustlane/schematics

or

ng add @trustlane/schematics

installation via the ng add command automatically add @trustlane/schematics as your default collection in your angular.json config file.

If you cloned the repo :

cd trustlane-schematics
npm install
npm run build
npm pack

After packing, you'll have to install the collection on your project by doing npm install --no-save path/to/trustlane-schematics-v0.0.1.tgz

Typical use

You can then either use the schematics by referencing the collection ng generate @trustlane/schematics:story path/to/story/name-of-story,
or enabling it globally by setting the collection as the default one in the CLI field of angular.json file :

"cli": {
    "defaultCollection": "@trustlane/schematics"
}

and then use the schematics without referencing the collection : ng generate story path/to/story/name-of-story. The collection extends the original one, so you still have access directly to all the Angular schematics : ng generate component path/to/component/name-of-component

Development

First, you have to install the schematics CLI : npm install -g @angular-devkit/schematics-cli.
Clone the repository, cd and install dependencies : npm install.

  • To add a new schematic to the collection : schematics blank --name=name-of-the-schematic
  • To run the schematic locally : schematics .:name-of-the-schematic
  • To execute the schematic in the context of a project, run this command from the project: ng ../path/to/trustlane-schematics/src/collection.json:name-of-the-schematic
    when executed, the schematic run in 'dry mode', or debug mode, meaning no files are actually written to the file system. To really run the schematic, add the option --debug=false to the command.
  • Run npm run serve to launch a dev server to watch changes
  • npm run build to build the collection
  • Update version in package.json, according to SEMVER
  • Create a Git tag
  • npm publish to push package to NPMJS

Testing

To test locally, install @angular-devkit/schematics-cli globally and use the schematics command line tool. That tool acts the same as the generate command of the Angular CLI, but also has a debug mode.

Check the documentation with

schematics --help

Unit Testing

npm run test will run the unit tests, using Jasmine as a runner and test framework.

Publishing

To publish, simply do:

npm run build
npm publish

That's it!