Packages

moon

2.87.8
2.90.5 retired 2.90.4 2.90.3 2.90.2 2.90.1 2.90.0 2.89.4 2.89.1 2.89.0 2.88.0 2.87.11 2.87.10 2.87.9 2.87.8 2.87.7 2.87.6 2.87.5 2.87.4 2.87.3 2.87.2 2.87.1 2.87.0 2.86.1 2.86.0 2.85.1 2.85.0 2.84.0 2.83.0 2.82.0 2.81.4 2.81.3 2.81.2 2.81.1 2.81.0 2.80.2 2.80.1 2.80.0 2.79.13 2.79.12 2.79.11 2.79.10 2.79.9 2.79.8 2.79.7 2.79.6 2.79.5 2.79.4 2.79.3 2.79.2 2.79.1 2.79.0 2.78.4 2.78.3 2.78.2 2.78.1 2.78.0 2.77.0 2.76.5 2.76.4 2.76.3 2.76.2 2.76.1 2.76.0 2.75.0 2.74.1 2.74.0 2.73.8 2.73.7 2.73.6 2.73.5 2.73.4 2.73.3 2.73.2 2.73.1 2.73.0 2.72.5 2.72.4 2.72.3 2.72.2 2.72.1 2.72.0 2.71.1 2.71.0 2.70.0 2.69.2 2.69.1 2.69.0 2.68.11 2.68.10

Components-based design system written in elixir

HexDocs

Current section

Files

Jump to
Readme
89 Versions
17 Dependencies
0 Dependants
Files
Activity
moon lib moon_web pages contribute_page.ex
Raw

lib/moon_web/pages/contribute_page.ex 

defmodule MoonWeb.Pages.HowToContributePage do

  @moduledoc false



  use MoonWeb, :live_view



  alias MoonWeb.Components.PageSection

  alias MoonWeb.Components.CodeSnippet

  alias MoonWeb.Components.Page



  data(breadcrumbs, :any,

    default: [

      %{

        to: "/contribute",

        name: "How to contribute"

      }

    ]

  )



  def render(assigns) do

    ~F"""

    <Page {=@theme_name} {=@active_page} {=@breadcrumbs} {=@direction}>

      <h1 class="text-moon-32 font-semibold">How to contribute</h1>

      <PageSection title="Setup">

        <p class="text-moon-16">Clone the repository:</p>

        <CodeSnippet>git clone git@github.com:coingaming/moon.git</CodeSnippet>

        <p class="text-moon-16">Start local development server by running:</p>

        <CodeSnippet>run-locally-dev.sh</CodeSnippet>

        <p class="text-moon-16">

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

        <p class="text-moon-16">Install <a

            href="https://asdf-vm.com/"

            class="text-piccolo font-medium transition-colors duration-200 hover:text-hit visited:text-hit"

            target="_blank"

            rel="noreferrer"

          >asdf</a> and plugins:</p>

        <CodeSnippet>asdf plugin add erlang

          asdf plugin add elixir

          asdf plugin add nodejs

        </CodeSnippet>

        <p class="text-moon-16">Install all the tool versions specified in the .tool_versions file:</p>

        <CodeSnippet>asdf install</CodeSnippet>

        <p class="text-moon-16">Install assets dependencies:</p>

        <CodeSnippet>cd assets && npm i && cd -</CodeSnippet>

        <p class="text-moon-16">Try running local development server:</p>

        <CodeSnippet>iex -S mix phx.server</CodeSnippet>

        <p class="text-moon-16">Stop the command above, then try running:</p>

        <CodeSnippet>run-locally-dev.sh</CodeSnippet>

        <p class="text-moon-16">If you do see error in ElixirLS extension "no elixir command found", you'll need to:</p>

        <CodeSnippet>cp .tool-versions ~</CodeSnippet>

        <p class="text-moon-16">Install dependencies:</p>

        <CodeSnippet>mix deps.get</CodeSnippet>

      </PageSection>

      <PageSection title="Assets repository setup">

        <p class="text-moon-16">

          The following script imports Figma assets and icons. You need to set the values in the .env file. Please make sure you have read access to the assets tool repo https://github.com/coingaming/assets .</p>

        <CodeSnippet>run-auto-importers.sh

          mix assets.setup

          cd $root_dir/scripts/typescript/

          npm install

        </CodeSnippet>

        <p class="text-moon-16">Clone the repository:</p>

        <CodeSnippet>git clone git@github.com:coingaming/assets.git</CodeSnippet>

        <CodeSnippet>cd assets

          git reset --hard HEAD

          git pull\nnpm install -g pnpm

          pnpm install

          pnpm run build

          export page=$(grep ICON_PAGE_NAME .env | cut -d '=' -f2)

          npm run figma --page=$page

        </CodeSnippet>

      </PageSection>

      <PageSection title="Style guide">

        <p class="text-moon-16">Moon Design System follows

          <a

            href="https://garden.mirahi.io/get-started-with-headless-design-systems/"

            class="text-piccolo font-medium transition-colors duration-200 hover:text-hit visited:text-hit"

            target="_blank"

            rel="noreferrer"

          >headless design approach</a> - we build smart, functional and reusable

          <a

            href="https://surface.moon.io/components/v2/menu_item"

            class="text-piccolo font-medium transition-colors duration-200 hover:text-hit visited:text-hit"

            target="_blank"

            rel="noreferrer"

          >UI components</a>.</p>

        <p>To format your code, run:</p>

        <CodeSnippet>mix format

          mix surface.format

        </CodeSnippet>

      </PageSection>

      <PageSection title="Tests">

        <p class="text-moon-16">All newly added components must come with tests. In order to run the tests:</p>

        <CodeSnippet>mix test</CodeSnippet>

      </PageSection>



      <PageSection title="Check our Github">

        <ul class="list-inside list-disc text-moon-16">

          <li>

            <a

              href="https://github.com/coingaming/moon"

              class="text-piccolo font-medium transition-colors duration-200 hover:text-hit visited:text-hit"

              target="_blank"

              rel="noreferrer"

            >

              Github repository

            </a>

          </li>

          <li>

            <a

              href="https://github.com/coingaming/moon/blob/main//CONTRIBUTING.md"

              class="text-piccolo font-medium transition-colors duration-200 hover:text-hit visited:text-hit"

              target="_blank"

              rel="noreferrer"

            >

              Contributing page

            </a>

          </li>

        </ul>

      </PageSection>

    </Page>

    """

  end

end