@roo-dev/ui-components

Getting Started

Install packages

npm install

To start storybook

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 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" )