Note: This project uses semantic-release and conventional-commits spec, please use Commitizen to write commit messages
Clone the repository: git clone git@github.com: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:
-
Install asdf and plugins
asdf plugin add erlang
asdf plugin add elixir
asdf plugin add nodejs
-
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"
)asdf install elixir
asdf install nodejs
-
Install assets dependencies with
cd assets && npm i && cd -
-
Try running
iex -S mix phx.server
-
Stop the command above, then try running
./run-locally-dev.sh
-
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
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
All newly added components must come with tests. In order to run the tests, run mix test
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
In writing code try to remember following rules:
- Code should be as short and simple as possible (less lines is better)
- Code should be as explicit as possible (and compiler should catch as many errors as possible)
- Moon Design System follows headless design approach - emphasis is on building smart, functional and reusable UI components.
- Use slots
- Add and run tests
- Create component's page in moon_web application with API described and state shown
- 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
- Use Moon classes for: (see ds-moon-preset.js for full list of variables, and themes/moon-design-*.css for values)
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