@charitypro/ui-kit

React UI-library for ProCharity project

Stack:

• React 18
• TypeScript 5
• Dart SASS \ SCSS

Toolset:

• Yarn + PNP, zero install ready
• Vite
• Storybook + Playwright tests
• ESlint
• Prettier
• Husky + lint-staged
• generate-react-cli configuration

Installation

• Clone repository
• cd DIR
• yarn

Commands

Create new component

yarn gen component Name — place new component files in src/components including CSS module and story.

yarn gen component Name --withLazy=true — like first, but add index.ts file with default lazy export of component for federation, pages and etc.

Run in watch mode

yarn dev — just execute build --watch for rebuild on changes, usefull when this repo used as dependency somewhere else.

Build library

yarn build — required for publishing library or using in other packages as dependency.

yarn build-storybook — used for publishing storybook build somewhere like chromatic.

Check code quality

yarn lint — execute eslint yarn format — format code in src/ yarn test — execute all tests, initial include only storybook tests

Developing

yarn storybook — main development environment.

Do as follows:

• generate new component
• define prop types
• write a story
• write a play function for key use cases
• develop component while looking to story preview
• add more use cases playbooks

Naming conventions

Prefixed names:

• Layout* — global page Layout, top-level component of every page or screen
• Section* — second level component under Layout
• Card* — box content wrapper for column based content presentation

Postfixed names:

• *Page — top level component for building page including Layout and all under
• *Screen — middle level component for building large part of page, screen flow, modal content and etc. Don't include top-level Layouts.
• *Flow — group of screens combined with internal routing logic.