zade-design-system-react
v1.0.5
Published
React component library | ZADE
Downloads
1
Readme
ZADE DESIGN SYSTEM
This is a Zade Design System – comprehensive collection of reusable components, styles, and guidelines designed to help you build consistent, accessible, and high-quality user interfaces with React
.
Content
- Features
- Getting Started
- Scripts
- Contribution
- Storybook deploy
- NPM | Publish new version
- Support
- Commit conventions
- Links
Features
- React library;
- TypeScript: A strongly typed superset of JavaScript;
- SCSS: CSS preprocessor;
- Storybook: A frontend workshop for building UI components and pages in isolation;
- Vite: A next generation frontend tooling that runs and builds your library incredibly fast;
- ESLint: A tool that finds and fixes problems in your code;
- Prettier: A code formatter;
- Husky: A pre-commit, pre-push hook;
- Commitlint: Commit message conventions;
- Surge: Auto deploy when pushing changes;
- pnpm: Fast, disk space efficient package manager;
- NPM package: A library that published in npm registry.
Getting Started
- Clone this repository;
- Install pnpm using
npm install -g pnpm
; - Install dependencies
pnpm i
; - Start project:
pnpm dev
.
Scripts
An explanation of the package.json
scripts.
| Command | Description |
| ----------- | ---------------------------------------------------------------------------------- |
| dev
| Starts the local Storybook server, use this to develop and preview your components |
| build
| Builds your Storybook as a static web application |
| build:lib
| Builds your component library with Vite |
| lint
| Runs ESLint tool |
| format
| Formats your code with Prettier |
| prepare
| Installs Husky, a tool for setting up Git hooks |
Contribution | Add feature/fix/improvement
- Create a Branch
git checkout -b feature/your-feature-name
; - Optional, if you want to update npm package: Upgrade npm version with
npm version {patch/minor/major}
; - Commit your changes with convential commit. For example:
git commit -m "feat(header): added new component"
; - Push new branch
git push origin feature/your-feature-name
; - Create Merge Request or merge with
main
branch immediately; - Optional: Build project
pnpm build:lib
and callnpm publish
to upload dist directory in NPM.
Storybook deploy
There are two ways to get deployed version:
First:
- Build storybook via
pnpm build:storybook
; - Go to the build folder
cd storybook-static
; - Deploy with surge:
npx surge
(press enter twice); - Go to the link in console to see deploy.
Second:
When you push changes to the main
branch, pre-push husky hook will auto deploy app with new changes to the deployed Storybook link.
NPM | Publish new version
Requirements:
- Be sure that you have raised npm package version (see Contribution Guideline, p. 2):
npm version {patch/minor/major}
; - Ask for invite as a developer in npm package (see Support paragraph).
- Build your lib via Vite:
pnpm build:lib
; - Publish new version:
npm publish
.
Commit conventions
An explanation of the available commit conventions, more details you can find here.
| Command | Description |
| ---------- | ------------------------------------------------------------------------------------------------------ |
| feat
| Commits, that adds or remove a new feature |
| fix
| Commits, that fixes a bug |
| refactor
| Commits, that rewrite/restructure your code, however does not change any API behaviour |
| perf
| Commits are special refactor commits, that improve performance |
| style
| Commits, that do not affect the meaning (white-space, formatting, missing semi-colons, etc) |
| test
| Commits, that add missing tests or correcting existing tests |
| docs
| Commits, that affect documentation only |
| build
| Commits, that affect build components like build tool, ci pipeline, dependencies, project version, ... |
| chore
| Miscellaneous commits e.g. modifying .gitignore |
Support
If you encounter any issues or have questions, please reach out to our support team:
Emails:
[email protected];
[email protected];
[email protected].
Bugs, improvements? Issues board.