@advclb/design-system-react

AdventureClub Design System (React)

Experimental front-end design system with React.

Features (TODO)

• Fully customizable via SaSS
• Large collection of components for different solutions
• Powerful and flexible API
• Animation made easy
• Few dependencies (only classnames and lodash)

Technology usage

• TypeScript
• SaSS
• webpack

Repository structure

• index.ts: uncompiled single entry of library, consumed by webpack/rollup projects
• reset.scss: style reset
• variables.scss: SaSS variables
• mixins.scss: SaSS mixins
• components: UI components
• dist: compiled JS & CSS of library, consumed by other types of projects
• demo: demo application

Development Guide

Recommended editor set-up

Visual Studio Code

Extensions:

• EditorConfig editorconfig.editorconfig
• GitLens eamodio.gitlens
• Prettier esbenp.prettier-vscode
• stylelint shinnn.stylelint
• tslint ms-vscode.vscode-typescript-tslint-plugin

Start demo with hot-load

npm install
npm start # or npm run demo:start

Build library

npm run build

Build demo application

npm run demo:build

License

GNU Affero General Public License version 3 or higher.

Credits

• Guo Yunhe