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
• Contributing
• 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

1. Clone this repository;
2. Install pnpm using npm install -g pnpm;
3. Install dependencies pnpm i;
4. 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 |

Contributing | Add feature/fix/improvement

1. Create a Branch git checkout -b feature/your-feature-name;
2. Upgrade npm version with npm version {patch/minor/major}
3. Commit your changes with convential commit. For example: git commit -m "feat(header): added new component";
4. Push new branch git push origin feature/your-feature-name
5. Create Merge Request or merge with main branch immediately.

Storybook deploy

There are two ways to get deployed version:

First:

1. Build storybook via pnpm build:storybook;
2. Go to the build folder cd storybook-static;
3. Deploy with surge: npx surge (press enter twice);
4. 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).

1. Build your lib via Vite: pnpm build: lib;
2. 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, ... | | ops | Commits, that affect operational components like infrastructure, deployment, backup, recovery, ... | | 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.

Links:

• Issue board;
• Git repository;
• Npm package;
• Figma;
• Deploy storybook version.