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. The command can also automatically add a link to the newly created page in the sidenav. To add the new entry in the sidenav, the page must be a new module, and the router file path in wich routes are registered must be provided. i.e.: ng generate page foo/bar --router=foo/foo.routes.ts --newModule=true --project=trustlane

• 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!