ui-lib-workspace v1.0.0

UiLibWorkspace

This project was generated with Angular CLI version 8.3.20.

Run project in dev

Follow these steps to start the project in development

• 1. Clone repository. git clone (https://github.com/finsmart-labs/fs-ui-lib.git)
• 2. Install dependencies in the project folder. npm install.
• 3. Run Storybook npm run storybook, this command run Storybook. Navigate to http://localhost:6006/. The app will automatically reload if you change any of the source files.

Code scaffolding

Follow these steps to create a new component, if you want to create an atom - molecule - organims

• 1. Go the root of the project in your terminal en type npm run cc. This command will display a question on your terminal and you have to select base on what you want to create.

? What kind of component would you like to create? …
❯ atom
  molecule
  organism

• 2. Next you need to have a name to the component you want to create (for now only accept one name without -)

✔ What kind of component would you like to create? · molecule
? What is the name of the new component? ›

• 3. After that you will see your component inside the directory of atom / molecules / organisms that you selected

✔ What kind of component would you like to create? · molecule
✔ What is the name of the new component? · test
Creating..
CREATE projects/ui-lib/src/lib/components/molecules/test/test.component.scss (0 bytes)
CREATE projects/ui-lib/src/lib/components/molecules/test/test.component.html (19 bytes)
CREATE projects/ui-lib/src/lib/components/molecules/test/test.component.spec.ts (612 bytes)
CREATE projects/ui-lib/src/lib/components/molecules/test/test.component.ts (268 bytes)
UPDATE projects/ui-lib/src/lib/ui-lib.module.ts (2075 bytes)
🔧 stories folder created!
🔧 component file Test.stories.ts created!

• 4. IN CASE you are creating a molecule or an organism and you need to use other components (atoms) inside your new component, you need to import import { moduleMetadata } from "@storybook/angular";
• 5. Then you have to export by default the title of your story and also include some components inside decorators to be available to use:

export default {
  title: "Molecules/Currency amount",
  component: CurrencyAmountComponent,
  decorators: [
    moduleMetadata({
      declarations: [CurrencyComponent],
    }),
  ],
} as Meta;

Build

Run ng build ui-lib to build the project. The build artifacts will be stored in the dist/ directory. Use the --prod flag for a production build.

Please make sure you add your component inside public-api.ts to be available to export your component and can use in another projects

/*
 * Public API Surface of ui-lib
 */

export * from "./lib/ui-lib.service";
export * from "./lib/ui-lib.component";
export * from "./lib/ui-lib.module";
export * from "./lib/components/atoms/amount/amount.component";
export * from "./lib/components/atoms/currency/currency.component";
export * from "./lib/components/atoms/label/label.component";
export * from "./lib/components/molecules/currency-amount/currency-amount.component";
export * from "./lib/components/organisms/quick-card/quick-card.component";
export * from "./lib/components/atoms/button-upload/button-upload.component";
export * from "./lib/components/atoms/hyperlink/hyperlink.component";
export * from "./lib/components/atoms/data-box/data-box.component";
export * from "./lib/components/atoms/input/input.component";
export * from "./lib/components/organisms/quick-card-three/quick-card-three.component";

Publish the library

Follow these steps to publish the ui library: 1. Run ng build ui-lib to build the project. 2. Go to /dist/ui-lib directory and Run npm pack. This will make a Pack (target) file with a name ui-library-0.0.1.tgz.

I follow this cool article wich explain this steps very nice (https://jinalshah999.medium.com/how-to-build-and-publish-angular-library-a333d6ff12c0)

Running unit tests

Run ng test to execute the unit tests via Karma.

Running end-to-end tests

Run ng e2e to execute the end-to-end tests via Protractor.

Running visual regretion testing

Run npm run chromatic

Running end-to-end and unit tests

Run npm run test:all.

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI README.

Also this is anothe article explain very nice how create an angular library using Storybook (https://dev.to/activenode/angular-10-storybook-npm-package-ng-design-system-step-by-step-2dn2)