/moon-design

Moon Design System for React

Primary LanguageTypeScriptMIT LicenseMIT

Moon Design System

npm (scoped) Commitizen Friendly CircleCI

Moon Design System

Installing Moon Design

  1. Install pnpm:

    corepack enable
    
    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. Hot Module Replacement:

    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

Resources

Architecture

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

  1. next-docs/ - style guide and documentation
  2. packages/ - Moon Design System

packages/

  1. Themes - theming feature
  2. Utils - suite of tools to quickly access common token values.
  3. Icons - React components for each icon.
  4. Core - the individual building blocks of our UI.

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

Docs

next-docs/

Our project's style guide and documentation is built using Next.js inside its own individual package directory.

Contributing

See the Contributing Guidelines for full info.