A component library based on Gada Design System
- Login to your npm account from npm cli.
- Make sure you are a member of DS npm project.
- Install npm package to your project:
npm install @gudangada/design-system
- Add imports to your
_app.tsx:
import "@fontsource/inter";
import * as React from "react";
import { ThemeProvider } from "@gudangada/design-system";
const MyApp: React.VFC<AppProps> = ({ Component, pageProps }) => {
return (
<>
<Head>
<title>GudangAda - Project</title>
<meta
name="viewport"
content="minimum-scale=1, initial-scale=1, width=device-width"
/>
</Head>
<ThemeProvider>
<Component {...pageProps} />
</ThemeProvider>
</>
);
};
export default MyApp;
- For deployment, you need to add
NPM_TOKENenvironment variable to your project. You can get the token from npm project dashboard.
src/components: used for all the react components/core: contains all those components that have finalized design on figma/data-grid: contains the components that are used to show data in a certain way e.g. aTable./lab: contains all the experimental components that shouldn't be exported with the npm package
src/hocs: contains generic higher order componentssrc/styles: contains all the stuff related to theming, including tokens for colors, typography and mui component's overrides etc.
The repo has 3 main branches:
main-> Productiondevelop-> Development
- Use
feature/GUD-ticket-number-feature-namefor any feature development - Use
fix/GUD-ticket-number-fix-namefor any fixes - Use
improve/GUD-ticket-number-feature-to-improve-namefor any improvements
- Run storybook
yarn storybook- Checkout
developbranch
git checkout develop- Make sure that you have latest changes from the remote
develop
git pull origin develop- Checkout a feature branch from
developand do your changes on that new branch
git checkout -b feature/GUD-ticket-number-feature-name- Push all your changes to your feature branch and create a PR against
developbranch.
- Get that PR reviewed and address any feedback.
- Once approved, merge it using
Squash and mergeoption. - Test it on the
devinstance - Move the
developchanges tomaster(production) branch by:
- git checkout master
- git pull origin develop
# Resolve any conflicts
- git push origin master- Draft a new GitHub release by providing correct version as tag and release title.
- Naming convention for tag and title should follow
v{version_number}.
- Naming convention for tag and title should follow
- Auto generate release notes
- Release notes are auto generated from the PRs that are merged since the last release
- Press
Publish releasebutton. This will trigger Github action to publish the release to NPM.- Release action is defined in
npm-publish.ymlworkflow file
- Release action is defined in
- Clone the repo to your local
git clone https://github.com/gudangada/gada-ui.git- Checkout
developbranch
git checkout develop- Install dependencies
yarn install- Run the project
yarn storybook- Pick any unimplemented component from Design System's Figma project
- Assign an existing unassigned task to yourself from Design System - Web project on linear, or create a new one if it doesn't exist.
- Specify the
Estimatepoints (1 point being 2 hours) to your ticket - Checkout your feature branch (Follow Conventions for branch name section's guideline)
- Implement the feature
- Create a PR against
developbranch - Post it in the
#design-system-web-trackerschannel on slack - Get that PR approved
- Merge the PR to
develop(with a meaningful message - can use PR's title) - Don't forget to keep updating your linear ticket's status
- Responsive components
- Unit Testing
- Gradually replace material-ui with custom components to remove dependencies
- In case you run into type error from
stylednot recognizing the theme fully, addindex.d.tsfile to your root repo and add following lines to it:
import { AppTheme } from "@gudangada/design-system";
declare module "@emotion/react" {
export interface Theme extends AppTheme {}
}