Zoids

Composable React Components for ClearTax! Used across ClearTax GST and other products

Adding a component

1. Create a folder with a component name. (Three things to consider, .tsx file, types.ts and a styling.ts file). For example, let's say we need to make a component for Button. Create a Button.tsx file in src/components. Create a types.ts file in src/components/Button folder and style.ts file in the same location.
2. Please make sure to add a functional component, instead of a class based component

Types file/ Styles file

1. Normal styling to be added using styled-components
2. Make sure that you're adding types with proper comments

Benchmarking

1. Performance benchmarking of the component needs to be done
2. Copy/Paste the component in the benchmark folder. (Refer to any file in the folder)
3. Please note that you import a build component, instead of a raw one
4. Number of component instances is specified under benchmark/index.ts

Miscellaneous

1. Expose the component to the src/index.ts file
2. Add documentation for the component (You will have to add it to test your react components)
3. Sections.js (style guide) file picks up the .md file for documentation
4. You can use zoids-snippets extension from VScode marketplace to help you with the dev process. (Optional)

Branching rules

1. Master branch is the production branch for zoids. (Should always remain stable)
2. Development branch is the staging branch. All the branches should be checked out of this branch and PRs be raised against this branch.