ctc-component-library

Requirements

node v18.19.1 or above

Install

npm install --save @ctc-component-library

Run local

- npm install
- npm run storybook

To publish

- Increase the version on package.json
- Push to main branch, the actions to publish and deploy will be run

Material Symbols demo

- Here you can preview all the icons
https://marella.me/material-symbols/demo/

- Usage
https://github.com/marella/material-symbols/tree/main/material-symbols#usage

Installing yalc on Your Machine

Using NPM:

npm i yalc -g

Using Yarn:

yarn global add yalc

Updating the Library with yalc

Once yalc is installed, navigate to the root of the library and execute:

ctc-component-library % yarn yalc:update

Then, in the root of the project where the library will be installed (e.g., Backoffice), execute:

ctc-backoffice-frontend % yalc add ctc-component-library

Using the Components

Now you can use the components, for example:

import { Button } from 'ctc-component-library';

const SomeForm: React.FC = () => (
  <Button type="primary" text="Send" />
);

This allows you to have the library installed locally, make changes or adjustments to any component in the library, and validate them immediately without having to go through the process of pull requests, merges, and deployment to NPM.

Updating the Library in a Project

After making a change to a component in the library, and if you need to see this change in the project consuming the library, you must build and update the package in the local yalc repository. Then, remove and add the library package again in the consuming project. To do this:

Navigate to the root of the library and execute:

ctc-component-library % yarn yalc:update

Navigate to the root of the project consuming the library (e.g., Backoffice) and to remove the library, execute:

ctc-backoffice-frontend % yalc remove ctc-component-library

Then, to add the library, execute:

ctc-backoffice-frontend % yalc add ctc-component-library