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 localRoo-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 localRoo-React
repository (only necessary to do this once). - To pull the latest published UI components into
Roo-React
, runyalc update
from the root ofRoo-React
and then restart your dev server to see the changes. - If you want to stop using yalc in
Roo-React
, typeyalc retreat --all
in the root ofRoo-React
. And if you want to start using it again, typeyalc 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
- Update the version number in package.json (example: if the version number is currently 0.0.15, update it to 0.0.16)
- Deploy the new version to npm via the github action "Publish to NPM"
- 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
- Import the component you want to use in the relevant Roo-React file (example: import { Toast } from "@roo-dev/ui-components" )