npm package: @roo-dev/ui-components
Description: Install packages ```bash npm install ``` To start storybook ```bash npm run storybook ``` ## Creating a New Component - In the ui-components folder, copy either the ExampleAntSwitch or ExampleCustomButton folder and rename it and its files after the new c
Latest version: 0.5.44

## Getting Started
Install packages
```bash
npm install
```
To start storybook
```bash
npm run storybook
```
## Creating a New Component
- In the ui-components folder, copy either the ExampleAntSwitch or ExampleCustomButton folder and rename it and its files after the new component 
    - Component names should match the name in figma 

- Build the component in the index.tsx file in the new folder
    - If using a component from Ant design make sure you also import its props, otherwise you can use the props from Ant as a guide when deciding on props for a custom component

- Style the component in the NewComponentStyles.tsx file
    - Use styled components: https://styled-components.com/
    - Reference ui-components/index.tsx for colors, gridWidths, and any other constant styles that should only be exported from this file and never coded separately (there should be no hexcodes in style files)

- Fill in the NewComponentInfo.tsx file with the component's details following the outlined headings in the file and adding any additional info 
- In the stories folder, copy either the ExampleAntSwitch.stories.tsx or ExampleCustomButton.stories.tsx file and rename it after the new component
    - Import your component and build new templates accordingly (generally one for the component and one for the details)
    - Aim to include a version of each possible state for the component 
- Export your finished component in src/index.tsx

## Testing Changes in Another Repository
You can use [yalc](https://github.com/wclr/yalc) to use your local changes to the `@roo-dev/ui-components` package in another repo (for instance `Roo-React`) without needing to publish to NPM. To do this:
- Install yalc globally with `npm i yalc -g`.
- Run `npm run build && yalc publish` in the root of your local `Roo-UI-Components` repository (and do this every time you want to make your latest changes available).
- Run `yalc link @roo-dev/ui-components` in the root of your local `Roo-React` repository (only necessary to do this once).
- To pull the latest published UI components into `Roo-React`, run `yalc update` from the root of `Roo-React` and then restart your dev server to see the changes.
- If you want to stop using yalc in `Roo-React`, type `yalc retreat --all` in the root of `Roo-React`. And if you want to start using it again, type `yalc restore --all`.

## Publish + Versioning
- To Publish the new changes, run the `Publish to NPM` action. However, you need to bump the version up before publishing it on NPM.

Here are some rules for versioning: 
- Major: These could be things such as React upgrade or any major upgrade of the underline technologies.
- Minor: These could be things such as adding/removing a new/old component.
- Patch: These could be things such as bug fixes.

For example: If the current version is 0.2.1, after fixing some small bugs. We can go to `package.json` and change `version: "0.2.1"` to `version: "0.2.2"`. Then we push it to the `main` branch and run the `Publish to NPM` action.

## Deploying/Using a New Component
- When a new branch is merged to master the new component should automatically start deploying to storybook and then (when finished) be available for viewing at http://storybook.roo.vet.s3-website-us-east-1.amazonaws.com
    - You can also manually deploy to storybook via the github action "Deploy Storybook"
- To use the component in Roo-React you must first
    1. Update the version number in package.json (example: if the version number is currently 0.0.15, update it to 0.0.16)
    2. Deploy the new version to npm via the github action "Publish to NPM"
    3. Open the package.json in Roo-React, search "@roo-dev/ui-components", update the version number to match Roo-UI-Components and run npm install
    4. Import the component you want to use in the relevant Roo-React file (example: import { Toast } from "@roo-dev/ui-components" )