BiitFrontendComponents

This project contains all common components that are used among all Angular projects developed by BiiT. You can take a look here:

https://biit-solutions.github.io/WizardryTheme

Adding a new component

On the path projects/wizardry-theme generate a folder for your component. Inside this folder must exist a src component a new folder inside it with the name of your component. For example projects/wizardry-theme/mycomponent/src/mycustomcomponent.

Now generate the component and the module files:

ng generate module ../../projects/wizardry-theme/mycomponent/src/mycustomcomponent
ng generate component ../../projects/wizardry-theme/mycomponent/src/mycustomcomponent

Define your component

Remember to export your component in the component module: mycustomcomponent.module.ts

@NgModule({
  declarations: [
    MyCustomComponentComponent
  ],
  imports: [
    CommonModule
  ],
  exports: [MyCustomComponentComponent]
})
export class MyCustomComponentModule { }

Define public-api.ts

Generate a file public-api.ts on the src folder of your component (projects/wizardry-theme/mycomponent/src/public-api.ts) . And define all the exports in it:

/*
 * Public API Surface of wizardry-theme/mycomponent
 */

export * from './mycustomcomponent/my-custom-component.component';
export * from './mycustomcomponent/my-custom-component.module';

Define ng-package.json

Create this file on the root folder of your component (projects/wizardry-theme/mycomponent/ng-package.json). This file define the folder structure. As an example:

{
  "$schema": "../../../node_modules/ng-packagr/ng-package.schema.json",
  "dest": "../../../dist/wizardry-theme",
  "lib": {
    "entryFile": "src/public-api.ts"
  }
}

Define package.json

Create this file on the root folder of your component (projects/wizardry-theme/mycomponent/package.json)Include the dependencies from your component there:

{
  "peerDependencies": {
    "@angular/material": "^15.1.0"
  }
}

Add your new library to main tsconfig.json file

Open (tsconfig.json) file and add your component on section compilerOptions/paths:

 "compilerOptions": {
    ...
    "paths": {
      ...
      "wizardry-theme/filter": [
        "projects/wizardry-theme/filter/src/public-api"
      ]
    }

You will need this if you want to use this library in other libraries from this project.

To import them you have to use the short path:

import {BiitFilterModule} from "@biit-solutions/wizardry-theme/filter";

Stories

After it, create a stories.ts file for your component under src/stories/ folder. Something like src/stories/mycustomcomponent.stories.ts:

export default {
  title: 'Section/MyComponent',
  decorators: [
    moduleMetadata({
      imports: [MyCustomComponentModule],
    }),
  ],
  args: {
    ...
  },
  argTypes: {
    ...
  }
} as Meta;

const Template: Story<MyCustomComponent> = (args: MyCustomComponent) => ({
  props: args,
  template: `
    <my-custom-component>
      ...
    </my-custom-component>`
}

export const Default = Template.bind({});
Default.args = {
  ...
}

Executing the storybook

To run and test the storybook, simply execute:

npm run storybook

Compiling the storybook

To compile storybook, run next command:

npm run build-storybook

Publishing the storybook

If you need to publish. A script has been created on package.json. To do it, just run the next command:

npm run publish-storybook

This command will compile the project it will copy README and package.json to the proper dist directory and, finally it will publish.

Generating compressed distribution

To get a compressed distribution in /dist-zip/storyboo.gz. Simply run:

npm run generate-zip

Translations

Add transloco to a new project

1. Install transloco dependencies

ng add @ngneat/transloco

Directory ./assets/i18n will be created with languages selected.

2. Delete TranslocoRootModule generated by transloco installation. This file is already imported by wizardry-theme library.
3. Edit ./src/app/app.module.ts and change imported TranslocoRootModule and import it from wizardry-theme/i18n
4. On transloco.config.js add the lib directory (where package.json file is) to import translations:

scopedLibs: [  
  {  
    src: './projects/wizardry-theme/lib1',  
    dist: ['./src/assets/i18n/wizardry-theme']  
  },  
  {  
    src: './projects/wizardry-theme/lib2',  
    dist: ['./src/assets/i18n/wizardry-theme']  
  }  
]

5. On package.json add the next scripts to extract wizardry-theme translations

"scripts": {  
  (...)  
  "transloco:clean": "del-cli --force ./src/assets/i18n/wizardry-theme",  
  "transloco:extract": "npm run transloco:clean && transloco-scoped-libs",  
  (...)  
}

When compiling the project npm run transloco:extract should be run to copy all wizardry-theme translations to ./assets/i18n/wizardry-theme

How to translate your libraries with transloco

1. On your library src directory create a new one and named i18n
2. Add as much json files as languages supported. ie. en.json, es.json, nl.json
3. On your library package.json add the i18n directives as next:

 "i18n": [  
          {  
            "scope": "lib_name",  
            "path": "src/i18n"  
          }  
]

4. On your main lib module import TranslocoRootModule from wizardry-theme/18n
5. Add as well on main lib module next provider:

providers: [{  
  provide: TRANSLOCO_SCOPE,  
  useValue: {scope: 'wizardry-theme/lib_name', alias: "lib_alias"}  
}]  

6. To translate a string in your libary use transloco api.

<div>{{'lib_alias.translation_key' | transloco}}</div>