https://github.com/coingaming/moon-design

Moon Design System for React
https://github.com/coingaming/moon-design

design-patterns design-system design-systems monorepo react react-components storybook tailwindcss typescript

Last synced: about 1 month ago
JSON representation

Moon Design System for React

• Host: GitHub
• URL: https://github.com/coingaming/moon-design
• Owner: coingaming
• License: mit
• Created: 2019-01-07T09:19:09.000Z (almost 6 years ago)
• Default Branch: develop
• Last Pushed: 2024-08-09T14:18:08.000Z (3 months ago)
• Last Synced: 2024-10-04T17:35:27.002Z (about 2 months ago)
• Topics: design-patterns, design-system, design-systems, monorepo, react, react-components, storybook, tailwindcss, typescript
• Language: TypeScript
• Homepage: https://moon.io/
• Size: 76.4 MB
• Stars: 272
• Watchers: 31
• Forks: 27
• Open Issues: 5
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE
  • Codeowners: .github/CODEOWNERS

Awesome Lists containing this project

README

        
# Moon Design System

[![npm (scoped)](https://img.shields.io/npm/v/@heathmont/moon-core-tw)](https://www.npmjs.com/package/@heathmont/moon-core-tw)

[![Commitizen Friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/)



## Please use our new repository.

[Moon Light](https://github.com/coingaming/moon-light) - a lightweight version of the Moon Design System.

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

## Installing Moon Design

0. [Install pnpm](https://pnpm.io/installation):

   ```sh

   corepack enable

   // Note that we are using pnpm version 8

   corepack prepare [email protected] --activate

   ```

1. Install dependencies and link local packages together:

   ```sh

   pnpm install

   ```

2. Compile and build all packages:

   ```sh

   pnpm run build

   ```

3. Run storybook for development:

   ```sh

   pnpm run next dev

   ```

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

   ```sh

   pnpm run watch

   ```

   ```sh

   pnpm run next dev

   ```

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

   ```sh

   pnpm run next build

   ```

   ```sh

   pnpm run next start

   ```

## Architecture

Our [pnpm](https://pnpm.io/motivation) monorepo publishes key layers as individual `@heathmont/moon-` packages:

1. [`next-docs/`](#docs) - Style guide and documentation

2. [`workspaces/`](#design-system) - Moon Design System

3. [`packages/`](#design-system) - Legacy components, solely for supporting older projects.

Packages are developed inside their respective `src` folders, utilizing [pnpm workspaces](https://pnpm.io/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](CONTRIBUTING.md) before submitting a pull request.