Moon Design System

Set of UI components built with Surface UI library and Tailwind CSS

Note: This project uses semantic-release and conventional-commits spec, please use Commitizen to write commit messages

Resources

📖 Documentation

Setup

Clone the repository: git clone [email protected]:coingaming/moon.git

Start local development server by running run-locally-dev.sh

If ./run-locally-dev.sh is not working, try the following steps:

1. Install asdf and plugins asdf plugin add erlang
asdf plugin add elixir
asdf plugin add nodejs

2. Run asdf install. This will install all the tool versions specified in the .tool_versions file Or you can install each tool version manually by typing: asdf install erlang # and follow https://github.com/asdf-vm/asdf-erlang#asdf-erlang on fail (e.g. export KERL_CONFIGURE_OPTIONS="--without-wx --without-javac") For fixing error "OTP compiled without EEP48 documentation chunks" u can use KERL_BUILD_DOCS=yes asdf install elixir
asdf install nodejs

3. Install assets dependencies with cd assets && npm i && cd -

4. Try running iex -S mix phx.server

5. Stop the command above, then try running ./run-locally-dev.sh

6. If you do see error in ElixirLS extension "no elixir command found", you'll need to cp .tool-versions ~

Install dependencies: mix deps.get

To format your code, run mix format , mix surface.format

Running .run-auto-importers.sh

This script imports figma assets and icons. You need to set the values in the .env file. You also need read access to the assets tool repo https://github.com/coingaming/assets Kindly check if you can clone this repo, if not, ask YulianaYarema @yarema184

Tests

All newly added components must come with tests. In order to run the tests, run mix test

Creating new component

There is a mix task/generator for it. For creating new component Moon.Design.Form.SomethingAwesome use following command: mix moon.gen.component Form.SomethingAwesome It will create component, page and give instructions what to insert to router & left menu

Preferences to consider when writing code

In writing code try to remember following rules:

1. Code should be as short and simple as possible (less lines is better)
2. Code should be as explicit as possible (and compiler should catch as many errors as possible)
3. Moon Design System follows headless design approach - emphasis is on building smart, functional and reusable UI components.
4. Use slots
5. Add and run tests
6. Create component's page in moon_web application with API described and state shown
7. Use following classes for TW-way styling:
   • Use Moon classes for: (see ds-moon-preset.js for full list of variables, and themes/moon-design-*.css for values)
     • font sizes
     • border-radius - rounded-moon-{s - big elements, e.g cart, i - interactive, e.g button}
     • shadows
     • font-weight - only 2
   • Use TailWind classes for following reasons
     • transition
     • breakpoints - @media
   • And do not forget to use RTL features
     • use rtl: and ltr: prefixes for according write-direction styles
     • use ps & pe instead of pl & pr accordingly

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>

mix test

Screenshots & tests at all

1. https://github.com/mcrumm/elogram/blob/main/lib/elogram/server.ex#L31 also some screenshot tests here - https://stackoverflow.com/questions/58131559/how-to-take-a-screenshot-on-failure-using-hound-elixir https://github.com/HashNuke/hound - maybe too old

https://elixirforum.com/t/wallaby-visit-produces-empty-screenshot/45268 https://github.com/elixir-wallaby/wallaby#screenshots