Skip to content

Latest commit

 

History

History
174 lines (125 loc) · 4.65 KB

README.md

File metadata and controls

174 lines (125 loc) · 4.65 KB
Raw

Hosted on Vercel

Intro

A component library based on Gada Design System

Usage

  • 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_TOKEN environment variable to your project. You can get the token from npm project dashboard.

File Organization

  • 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. a Table.
    • /lab : contains all the experimental components that shouldn't be exported with the npm package
  • src/hocs : contains generic higher order components
  • src/styles : contains all the stuff related to theming, including tokens for colors, typography and mui component's overrides etc.

Branch Structure

The repo has 3 main branches:

  • main -> Production
  • develop -> Development

Conventions for branch name

  • Use feature/GUD-ticket-number-feature-name for any feature development
  • Use fix/GUD-ticket-number-fix-name for any fixes
  • Use improve/GUD-ticket-number-feature-to-improve-name for any improvements

How to run

  • Run storybook
yarn storybook

For development

  • Checkout develop branch
git checkout develop
  • Make sure that you have latest changes from the remote develop
git pull origin develop
  • Checkout a feature branch from develop and 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 develop branch.

For release:

  • Get that PR reviewed and address any feedback.
  • Once approved, merge it using Squash and merge option.
  • Test it on the dev instance
  • Move the develop changes to master (production) branch by:
- git checkout master
- git pull origin develop
# Resolve any conflicts
- git push origin master

Publish to NPM

  • 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}.
  • Auto generate release notes
    • Release notes are auto generated from the PRs that are merged since the last release
  • Press Publish release button. This will trigger Github action to publish the release to NPM.
    • Release action is defined in npm-publish.yml workflow file

Contribution

  • Clone the repo to your local
git clone https://github.com/gudangada/gada-ui.git
  • Checkout develop branch
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 Estimate points (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 develop branch
  • Post it in the #design-system-web-trackers channel 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

TODOs

  • Responsive components
  • Unit Testing
  • Gradually replace material-ui with custom components to remove dependencies

Troubleshoot

  • In case you run into type error from styled not recognizing the theme fully, add index.d.ts file 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 {}
}