search

coingaming / moon-design

Moon Design System for React
https://moon.io/
MIT License
273 stars 27 forks source link
design-patterns design-system design-systems monorepo react react-components storybook tailwindcss typescript

readme

Moon Design System

npm (scoped) Commitizen Friendly

Moon Design System

Please use our new repository.

Moon Light - a lightweight version of the Moon Design System.

New repo link: https://github.com/coingaming/moon-light

Installing Moon Design

  1. Install pnpm:

    corepack enable

// Note that we are using pnpm version 8

corepack prepare pnpm@8.2.0 --activate

  2. Install dependencies and link local packages together:

    pnpm install

  3. Compile and build all packages:

    pnpm run build

  4. Run storybook for development:

    pnpm run next dev

  5. For Hot Module Replacement run these tasks in parallel:

    pnpm run watch
    pnpm run next dev

  6. Build and run storybook for production at localhost:80:

    pnpm run next build
    pnpm run next start

Architecture

Our pnpm monorepo publishes key layers as individual @heathmont/moon- packages:

  1. next-docs/ - Style guide and documentation
  2. workspaces/ - Moon Design System
  3. packages/ - Legacy components, solely for supporting older projects.

Packages are developed inside their respective src folders, utilizing pnpm workspaces for dependency linking/sharing. The distributable code is generated in each package's lib by the TypeScript compiler.

Contributing

If you're interested in contributing to Moon Design, please read our сontributing docs before submitting a pull request.