Moon Design System Build with React

Moon Design System

Moon Design System Build with React.

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.
  • Additional TypeScript compiler options can be appended to the command.
• 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 git@github.com: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.
  • Additional TypeScript compiler options can be appended to the command.
• 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.