GiveGrants Design System

React toolkit and design language for give-grants open source and internal projects.

Tech Stack

Building components

• Storybook for UI component development and auto-generated docs
• Tailwind CSS with twind for component-scoped styling
• React for declarative component centric UI
• Prettier and ESLint for automatic code formatting and static testing

Maintaining the system

• NPM for packaging and distribution
• TypeScript for static type definitions
• Jest and testing-library for unit testing components
• TSDX for setup and build

Development Script

npm run start

Runs the project in development/watch mode.

npm run test:watch

Runs your tests using Jest in watch mode.

npm run lint

Runs Eslint with Prettier on all .ts and .tsx files (and js as well).

npm run start

Bundles the package to the dist folder.

npm run storybook

Starts storybook on port 6006.

Sanity Check with Sandbox

Although you can develop a component using storybook locally but if you wish to playaround and test any component in the broswer then

1. Build the code with

npm build

2. Move to sandbox folder and install the dependencies (first time)

cd sandbox && npm i

3. Next import the component to the index.tsx file
4. Start the development server with npm start and then visit http://localhost:1234

Instructions

1. The baseUrl is set to "src" in the tsconfig.json, hence you can import modules from path relative to the src.
2. Please install Prettier and Eslint plugins for VSCode and use the recommended settings provided for a better DX.

Contribution Guideline

--- To be added ---

License

MIT © give