Moon Design System

Moon Design System Build with React.

View Demo View Github

Installing Moon Design

  1. Install dependencies and link local packages together:

    yarn

  2. Compile and build all packages:

    yarn build

  3. Compile and build storybook:

    yarn next build

  4. Run locally at :3000:

    yarn next start

Using Moon Design

  • yarn next start - serve the docs locally at :3000.
  • yarn commit - CLI to write git commits in our preferred format.
  • yarn build - compiles a distributable lib folder for each package.
  • yarn format - Prettier alias.
  • yarn lint - lint all JavaScript and TypeScript.
  • yarn test - runs the Jest testing suite.
    • Obsolete tests can be updated via the additional -u flag.
    • Additional Jest options can be appended to the command.
  • yarn clean - removes all generated lib folders.
  • yarn nuke - removes all generated lib folders and node_modules.
  • yarn publish:packages - bumps package versions based on the conventional commits specification and publishes.
    • Additional @alpha and @beta suffixes create a tagged release for testing purposes.
  • yarn update:packages - a wizard to update Lerna package dependencies.

Architecture

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

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

Packages are developed inside their respective src folders, utilising Yarn Workspaces for dependency linking/sharing. Distributable code is generated in each package's lib by the TypeScript compiler on build/publish.

Docs

next-docs/

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

Design System

packages/

  1. Assets - common rich media brand assets.
  2. Themes - theming feature
  3. Utils - suite of tools to quickly access common token values.
  4. Icons - React components for each icon.
  5. Components - the individual building blocks of our UI.

Setup

  1. Install the above prerequisites.

  2. Clone the repository:

    git clone [email protected]:coingaming/moon-design.git

  3. Install dependencies and link local packages together:

    yarn

  4. Build packages:

    yarn build

  5. Build storybook:

    yarn next build

  6. Run storybook:

    yarn next start

Usage

  • yarn start - serve the docs locally at :3000 with hot reloading.
  • yarn commit - CLI to write git commits in our preferred format.
  • yarn build - compiles a distributable lib folder for each package.
  • yarn format - Prettier alias.
  • yarn lint - lint all JavaScript and TypeScript.
  • yarn test - runs the Jest testing suite.
    • Obsolete tests can be updated via the additional -u flag.
    • Additional Jest options can be appended to the command.
  • yarn clean - removes all generated lib folders.
  • yarn nuke - removes all generated lib folders and node_modules.
  • yarn publish:packages - bumps package versions based on the conventional commits specification and publishes.
    • Additional @beta suffix creates a tagged release for testing purposes.
  • yarn update:packages - a wizard to update Lerna package dependencies.