{"id":13491120,"url":"https://github.com/coingaming/moon","last_synced_at":"2025-05-16T19:08:08.426Z","repository":{"id":56745600,"uuid":"296295613","full_name":"coingaming/moon","owner":"coingaming","description":"Moon Design System for Elixir","archived":false,"fork":false,"pushed_at":"2025-05-06T08:22:29.000Z","size":34410,"stargazers_count":217,"open_issues_count":29,"forks_count":18,"subscribers_count":43,"default_branch":"main","last_synced_at":"2025-05-16T00:00:50.746Z","etag":null,"topics":["design-system","elixir"],"latest_commit_sha":null,"homepage":"https://surface.moon.io/","language":"Elixir","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/coingaming.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2020-09-17T10:36:31.000Z","updated_at":"2025-05-15T13:43:39.000Z","dependencies_parsed_at":"2023-11-03T14:40:18.191Z","dependency_job_id":"209ce518-9b46-4807-b20e-fbf4aa9e614d","html_url":"https://github.com/coingaming/moon","commit_stats":null,"previous_names":[],"tags_count":425,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/coingaming%2Fmoon","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/coingaming%2Fmoon/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/coingaming%2Fmoon/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/coingaming%2Fmoon/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/coingaming","download_url":"https://codeload.github.com/coingaming/moon/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254592395,"owners_count":22097013,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["design-system","elixir"],"created_at":"2024-07-31T19:00:53.723Z","updated_at":"2025-05-16T19:08:03.415Z","avatar_url":"https://github.com/coingaming.png","language":"Elixir","funding_links":[],"categories":["Elixir"],"sub_categories":[],"readme":"# Moon Design System\n\u003ch3 \u003eSet of UI components built with Surface UI library and Tailwind CSS\u003c/h3\u003e\n\u003cp\u003e\n  \u003ca href=\"https://conventionalcommits.org\"\u003e\n    \u003cimg alt=\"Conventional Commits\" src=\"https://img.shields.io/badge/Conventional%20Commits-1.0.0-yellow.svg\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://github.com/semantic-release/semantic-release\"\u003e\n    \u003cimg alt=\"semantic-release\" src=\"https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\n\n\u003cimg width=\"644\" alt=\"Moon Design System\" src=\"https://user-images.githubusercontent.com/232199/133601344-e63bd62f-dd0f-47a1-9d1e-b5cb065e5a90.png\"\u003e\n\n_Note: This project uses **[semantic-release](https://semantic-release.gitbook.io/semantic-release/)** and **[conventional-commits](https://www.conventionalcommits.org/en/v1.0.0/)** spec, please use **[Commitizen](https://github.com/commitizen/cz-cli)**\nto write commit messages_\n\n## Resources\n\n📖 [Documentation](https://surface.moon.io/)\n\n## Setup\n\nClone the repository: `git clone git@github.com:coingaming/moon.git`\n\nStart local development server by running `run-locally-dev.sh`\n\nIf `./run-locally-dev.sh` is not working, try the following steps:\n\n1. Install [asdf](https://asdf-vm.com/) and plugins\n   `asdf plugin add erlang`  \n   `asdf plugin add elixir`  \n   `asdf plugin add nodejs`\n2. Run `asdf install`. This will install all the tool versions specified in the _.tool_versions_ file\n   Or you can install each tool version manually by typing:\n   `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`\n   `asdf install elixir`  \n   `asdf install nodejs`\n\n3. Install assets dependencies with `cd assets \u0026\u0026 npm i \u0026\u0026 cd -`\n4. Try running `iex -S mix phx.server`\n5. Stop the command above, then try running `./run-locally-dev.sh`\n6. If you do see error in ElixirLS extension \"no elixir command found\", you'll need to `cp .tool-versions ~`\n\nInstall dependencies: `mix deps.get`\n\nTo format your code, run `mix format` , `mix surface.format`\n\n## Running .run-auto-importers.sh\n\nThis script imports figma assets and icons. You need to set the values in the .env file.\nYou also need read access to the assets tool repo https://github.com/coingaming/assets\nKindly check if you can clone this repo, if not, ask YulianaYarema @yarema184\n\n## Tests\nAll newly added components must come with tests. In order to run the tests, run `mix test`\n\n## Creating new component\nThere is a mix task/generator for it. For creating new component `Moon.Design.Form.SomethingAwesome` use following command:\n`mix moon.gen.component Form.SomethingAwesome`\nIt will create component, page and give instructions what to insert to router \u0026 left menu\n\n## Preferences to consider when writing code\n\nIn writing code try to remember following rules:\n\n1. Code should be as short and simple as possible (less lines is better)\n2. Code should be as explicit as possible (and compiler should catch as many errors as possible)\n3. Moon Design System follows [headless design ](https://garden.mirahi.io/get-started-with-headless-design-systems/) approach - emphasis is on building smart, functional and reusable UI components.\n4. Use slots\n5. Add and run tests\n6. Create component's page in moon_web application with API described and state shown\n7. Use following classes for TW-way styling:\n   - Use Moon classes for: (see ds-moon-preset.js for full list of variables, and themes/moon-design-\\*.css for values)\n     - font sizes\n     - border-radius - rounded-moon-{s - big elements, e.g cart, i - interactive, e.g button}\n     - shadows\n     - font-weight - only 2\n   - Use TailWind classes for following reasons\n     - transition\n     - breakpoints - @media\n   - And do not forget to use RTL features\n     - use rtl: and ltr: prefixes for according write-direction styles\n     - use ps \u0026 pe instead of pl \u0026 pr accordingly\n\n```\nalias Moon.Components.TextInput\nalias Moon.Assets.Icons.IconCloseRounded\nalias Moon.Assets.Icons.IconZoom\n\n\u003cTextInput placeholder=\"Search for dashboard, segments and more\"\u003e\n  \u003c:left_icon\u003e\n    \u003cIconZoom\u003e\n  \u003c/:left_icon\u003e\n  \u003c:right_icon\u003e\n    \u003cIconCloseRounded on_click=\"clear_search\"\u003e\n  \u003c/:right_icon\u003e\n\u003c/TextInput\u003e\n```\n\n```bash\nmix test\n```\n\n## Screenshots \u0026 tests at all\n1. https://github.com/mcrumm/elogram/blob/main/lib/elogram/server.ex#L31\nalso some screenshot tests here - \nhttps://stackoverflow.com/questions/58131559/how-to-take-a-screenshot-on-failure-using-hound-elixir\nhttps://github.com/HashNuke/hound - maybe too old\n\nhttps://elixirforum.com/t/wallaby-visit-produces-empty-screenshot/45268\nhttps://github.com/elixir-wallaby/wallaby#screenshots\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcoingaming%2Fmoon","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcoingaming%2Fmoon","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcoingaming%2Fmoon/lists"}