Moon Design System

Moon follows a headless design approach using Tailwind CSS. When writing styles, follow these rules:

Use Moon classes for:

• Font sizes
• Border-radius (use rounded-moon-{s} for large elements like cards, or rounded-moon-{i} for interactive elements like buttons)
• Shadows
• Font-weight (only 2 allowed)

Use Tailwind classes for:

• Transitions
• Breakpoints (@media queries)

RTL (Right-to-Left) Support:

• Use rtl: and ltr: prefixes for direction-specific styles.
• Use logical properties: ps (padding-start) and pe (padding-end) instead of pl (padding-left) and pr (padding-right).

Use the following Mix commands to maintain code quality:

• Run tests: mix test (All new components must include tests).
• Format Elixir code: mix format
• Format Surface code: mix surface.format

To set up a local development environment for Moon, clone the repository and run the provided setup script. If the script fails, ensure you have asdf installed with the required plugins for Erlang, Elixir, and Node.js, then install the versions specified in .tool_versions.

Prerequisites via asdf

asdf plugin add erlang
asdf plugin add elixir
asdf plugin add nodejs
asdf install

Manual Setup Steps

1. Clone the repo: git clone git@github.com:coingaming/moon.git
2. Install Elixir dependencies: mix deps.get
3. Install Asset dependencies:

   cd assets && npm i && cd -

4. Run development server: ./run-locally-dev.sh

Note: If you encounter "no elixir command found" in the ElixirLS extension, run cp .tool-versions ~.

The script .run-auto-importers.sh is used to import assets and icons from Figma.

Requirements:

1. You must set the necessary values in a .env file.
2. You must have read access to the https://github.com/coingaming/assets repository.

Moon provides a Mix task to scaffold new components. This generator creates the component itself, a dedicated page, and provides instructions for updating the router and the left navigation menu.

To create a component named Moon.Design.Form.SomethingAwesome, use:

mix moon.gen.component Form.SomethingAwesome

The is_multiline prop on Moon.Components.Banner changes the internal composition of the component:

• When is_multiline={true} (Default): The banner uses a grid layout. It displays a title and an optional icon_header_slot in a top row, followed by the description in a second row, and finally the buttons_slot at the bottom.
• When is_multiline={false}: The banner uses a flex layout. It displays the description and the link_slot in a single row, optimized for short, single-line notifications.

You can use the provided docker-compose.yml to run a local instance of the Moon service for testing images. The service maps port 4000 on your host to port 80 inside the container.

docker-compose up

Moon components utilize slots for flexible content injection. Below is an example of using a TextInput with left and right icons using the <:slot_name> syntax.

alias Moon.Components.TextInput
alias Moon.Assets.Icons.IconCloseRounded
alias Moon.Assets.Icons.IconZoom

<TextInput placeholder="Search for dashboard, segments and more">
  <:left_icon>
    <IconZoom>
  </:left_icon>
  <:right_icon>
    <IconCloseRounded on_click="clear_search">
  </:right_icon>
</TextInput>

The breadcrumb.config.js file exports a configuration function tailwindClassesBreadcrumb used to generate responsive Tailwind CSS utility classes for the Breadcrumb component. This function returns an array of class strings that map specific visibility states (hidden or inline) to various breakpoint sizes (sm, md, lg, xl, 2xl).

module.exports = {
    tailwindClassesBreadcrumb: () => {
      return ["sm", "md", "lg", "xl", "2xl"].map(size => {
        //options
        return ["hidden", "inline"].map(cls => [size, cls].join(':'))
      }).flat()
    }
  }

The tailwindClassesDropdown configuration function returns an array of Tailwind CSS class mappings for different screen sizes (sm, md, lg, xl, 2xl). Each mapping pairs a breakpoint with a specific set of utility classes used to style the dropdown's positioning, layering, and appearance.

Use this function to retrieve the standard Moon Design System utility classes for dropdown components to ensure consistent styling across breakpoints.

const dropdownConfig = require('./assets/js/dropdown.config.js');
const classes = dropdownConfig.tailwindClassesDropdown();
// Returns an array like ["sm:absolute", "sm:z-[99]", ...]

The Moon Carousel component is controlled through HTML data-* attributes on the carousel element. These attributes allow you to manage the active item, scrolling behavior, and auto-slide functionality without writing custom JavaScript.

Available Data Attributes

The Moon project uses SVGO for optimizing SVG assets. The configuration is defined in scripts/typescript/svgo.config.js and uses the preset-default plugin. To ensure compatibility with certain rendering requirements, the removeViewBox option is explicitly disabled within the overrides parameter of the preset-default plugin.

module.exports = {
  plugins: [
    {
      name: 'preset-default',
      params: {
        overrides: {
          removeViewBox: false
        }
      }
    }
  ]
}