Moon Design System - Set of UI components built with Surface UI library

Antrater · August 24, 2022, 1:57pm

Hi everyone!

I’m thrilled to announce a huge thing. We have been developing Elixir Moon Design System for quite a while. We are finally ready to Open Source Moon DS written in Elixir language today.

Isn’t it outstanding?! We are presenting the Design System to the Elixir world. Our goal is to make Elixir Moon DS stunning and mature.

The main idea behind Moon Design System is to provide an easy-to-use tool for building beautiful front-ends fast. We have dedicated designers and developers in our team. Despite that, we are welcoming you guys to participate. If you’ve found a bug, or have an idea about how to improve our product and simplify your life as a developer, don’t hesitate to ping us either on Github or here.

Truly yours,
Moon Design System team

cvkmohan · August 24, 2022, 2:15pm

Congratulations and best wishes.
Components will stay in surface only or is there a plan to port to LiveView 0.18 compatible components?

hauleth · August 24, 2022, 2:35pm

Nice to see Mr Feynman as part as the team, but you forgot to mention who is the necromancer.

Antrater · August 24, 2022, 2:37pm

Good, good catch))) Text is more relevant

Nefcairon · August 24, 2022, 5:43pm

I love to see Surface UI components

Do your components have functionalities? Like sorting in tables and such.

What’s the reason you call it a “design system”?

stevensonmt · August 25, 2022, 12:21am

If you’re open to some criticism of the site (not the library, which I’m sure is great), I wonder if it’s a great endorsement for a UI/UX system.

You’ve got a card literally covering up some text about UX that requires the user find the horizontal scrollbar to uncover. Those colored cards seem to just be taking up too much space for the information they offer and get in the way of other elements.

The intro text could use some English polish as well:

Moon is Yolo Group product design system that helps us maintain the integrity of their user experience and optimize design and development resources.

The above has a confusing pair of pronouns without antecedents. Who is “us” referring to? Who is the “they” that “their” is referring to? I would suggest something like

Moon is the Yolo Group product design system that helps developers maintain the integrity of their user experience while optimizing design and development resources.

Or perhaps

The Yolo Group presents our Moon Design System to help developers improve the quality and consistency of the user experience while optimizing design and development resources.

cmo · August 25, 2022, 5:21am

Further to @stevensonmt 's feedback. On mobile, you shouldn’t really be able to scroll to the right half the page width to reveal blank space. Nor should you have a horizontally scrolling section that isn’t obvious it is a horizontally scrolling section.

The settings menu displays a row of random icons with no indication of what they do, except dark mode, with no border around the menus so it displays half over content. The settings button should probably have a white bg, not transparent.

Nice colours and shapes

Sebb · August 25, 2022, 8:21am

Great to see comprehensive component library for Elixir. Looks amazing.
I can’t use it though, cause it builds on surface, we only use LV. Are there plans to port to LV when it absorbs the relevant surface features?

margusp2rt · August 25, 2022, 12:32pm

We mainly use Surface, so Surface is our development tool and LiveView version, that is supported by Surface, will be supported by us.

Surface components can be used from LiveView:

github.com

coingaming/moon/blob/main/lib/moon/render_helpers.ex

defmodule Moon.RenderHelpers do
  @moduledoc false

  def get_default_props(module) do
    Enum.reduce(module.__props__(), %{}, fn
      %{name: name, opts: opts, type: type}, acc ->
        value = Keyword.get(opts, :values)

        value =
          if type == :string and not is_nil(value) do
            Enum.join(value, " ")
          else
            value
          end

        Map.put(acc, name, value)
    end)
  end

  def render_component(module, custom_props) do

This file has been truncated. show original

I have created also task Add example how to use Surface components from surface.moon.io from LiveView · Issue #360 · coingaming/moon · GitHub and will update documents, how to do this.

margusp2rt · August 25, 2022, 12:32pm

Moon started from Internal project that was opensourced. We have Tables, but not in Moon. Will be moved into Moon in few days.

sfusato · August 25, 2022, 3:58pm

The DatePicker component isn’t working in the demo, throws a Not Found error. Otherwise, how would one go about adding it to a Phoenix project? How’s the assets bundling done?

Antrater · August 26, 2022, 7:59am

sfusato, thanks for pointing the bug out. We are working every day on developing Moon DS and fixing bugs. And now we’ve set your bug in our sprint.

rudolfb · August 27, 2022, 9:31am

The “Components >> Text input” on the demo site for “Date Time” has an issue. If you set the focus into the field, and start typing the “2” key, the resulting date/time value is

22.02.222222 22:22:22

The year part does not seem to react correctly.

Antrater · August 30, 2022, 8:13am

Hi! That’s a good catch, thank you! Already made a ticket

niccolox · August 30, 2022, 11:44pm

interesting and thanks

Tailwind or Bulma?

Antrater · September 5, 2022, 7:52am

We use Tailwind for styling all components and the website itself

But for colours, we use this named approach, called Dragon Ball Z. So, that’s why you may see bulma and gohan. We don’t use native Tailwind’s colours.

dmitriid · September 7, 2022, 8:49am

You may want to revisit your “barely visible gray on darker gray” approach for so much of the design.

I’m 20/20 vision and I struggle to read most of the text on this page

dmitriid · September 7, 2022, 8:53am

Same here. Some of these are actually active and clickable?

Antrater · September 21, 2022, 2:39pm

Hi @dmitriid! Thanks for your feedback. That totally makes sense. Will be fixed.

CharlesIrvine · March 18, 2023, 10:43pm

Hi. Looks very interesting. Any plans to update your getting started docs to Phoenix 1.7?