Moon Design System

Installing Moon Design

0. Install pnpm:

   npm install -g pnpm

1. Install dependencies and link local packages together:

   pnpm install

2. Compile and build all packages:

   pnpm run build

3. Run storybook for development:

   pnpm run next dev

4. Hot Module Replacement:

   pnpm run watch

   pnpm run next dev

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

   pnpm run next build

   pnpm run next start

Resources

• 📖 Documentation

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 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.

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. Components - the individual building blocks of our UI.
5. Core - the individual building blocks of our UI.

Contributing

See the Contributing Guidelines for full info.