coingaming/moon

This system is the Moon Design System, a comprehensive UI component library built with Elixir, Phoenix LiveView, and Tailwind CSS. It provides a standardized set of reusable interface elements, including forms, data tables, navigation components, and layout utilities, all governed by a semantic token system for consistent theming. The repository also serves as the documentation and interactive showcase site for these components, featuring tutorials, API references, and a mock data layer for development and testing.

42 changes.

The project was initialized as an Elixir/Phoenix application using Surface and LiveView, establishing the core Moon UI component library and its associated design system. Significant effort focused on building comprehensive documentation, tutorials, and asset management tooling to showcase the new interface elements. The period also involved setting up deployment infrastructure, testing frameworks, and migrating legacy site-specific code to the new modular architecture.

35 changes.

This period focused on expanding the Moon UI library with a comprehensive v2 design system, introducing new components such as dialogs, selects, tables, and avatars alongside their documentation. The work also involved refactoring existing elements like TextInput and SingleSelect into modular structures, deprecating legacy typography pages in favor of Tailwind CSS, and adding foundational Lego components and test coverage.

49 changes.

This period focused on expanding the Moon Design v2 documentation with comprehensive examples for UI components and introducing new Moon Parts layouts. It also involved migrating the core library from Surface to native Phoenix LiveView, supported by new scaffolding tools and converters to facilitate the transition.

A new Breadcrumb component has been introduced to the library, allowing users to display navigation paths. The component accepts a list of breadcrumbs and an optional CSS class. It implements logic to conditionally render either a 'Collapsed' or 'Extended' view based on the number of items: if there are more than four breadcrumbs, the collapsed variant is used; otherwise, the extended variant is displayed. A supporting Crumb struct is also added to define individual breadcrumb items with name and link properties.

lib/moon/components/breadcrumb · high confidence

The InputGroup component now wraps form fields in a container and automatically renders error messages below the group when validation fails. It supports horizontal or vertical layouts, allows specifying which fields to monitor for errors, and includes a built-in ErrorTag to display field-specific error messages directly to the user.

_lib/moon/components/input\group · high confidence

A new SingleLineItem component has been added to the list items library, providing a flexible layout for list entries with configurable sizes (md, lg, xl), background colors, and optional left/right icon slots.

_lib/moon/components/list\items · high confidence

The documentation page for the TextInput component has been added, showcasing its various sizes (medium, large, xlarge) and demonstrating support for left and right icon slots, including examples for password fields.

_lib/moon\_web/pages/components/text\input · high confidence

New badge components have been introduced to visually indicate specific states and attributes within the UI. These include AriaSupport, Deprecated, InProgress, and RTLSupport, which render as small tags labeled 'Aria', 'Deprecated', 'In progress', and 'RTL' respectively. These components allow users to clearly identify accessibility features, deprecated items, ongoing work, and right-to-left text support directly in the interface.

_lib/moon\web/components/badges · high confidence

New Surface components for rendering date and datetime values have been added to the library. The \Moon.Components.Renderers.Date\ and \Moon.Components.Renderers.Datetime\ components accept a \value\ and an optional \format\ string (defaulting to "%b %d, %Y" and "%b %d, %Y, %H:%M:%S" respectively) to control the output via Timex. A helper module \Moon.Components.Renderers.Helpers\ is also provided with a \datetime/1\ function for programmatic formatting.

lib/moon/components/renderers · high confidence

A new \Moon.Components.Switch.Caption\ component has been introduced to handle the display of labels associated with the Switch. This component supports configurable text sizes (small, medium, large) and dynamically applies color styling based on the switch's active state, allowing for more granular control over the visual presentation of switch captions.

lib/moon/components/switch · high confidence

A new documentation page has been added for the deprecated Text Input component, showcasing its usage with examples (including username and email fields with icons) and listing all available props such as type, size, label, placeholder, and error states.

_lib/moon\web/pages/components/progress/deprecated · high confidence

A new \TextInput\ component has been added to the deprecated components library, providing a styled text input field with support for labels, icons, hints, and various input types. This component serves as a wrapper around the underlying Surface form input, applying consistent styling for sizes, colors, and states while maintaining alignment with the React implementation.

lib/moon/components/deprecated · high confidence

New LiveView pages have been added to the component documentation site to display the Circular and Linear Progress components. The Linear Progress page includes a deprecation warning directing users to the new design system location and provides a live example of the component in use. The Circular Progress page is currently a placeholder indicating the feature is coming soon.

_lib/moon\web/pages/components/progress · high confidence

Added new LiveView pages to the component documentation site for Dialog (Content, Footer, Header, Overlay), Modal, and Popover. The Modal and Popover pages include interactive examples demonstrating usage (such as opening/closing states and placement options) and display props tables, while also featuring deprecation warnings directing users to the new Design system pages. The remaining Dialog sub-pages are created as placeholders with 'Coming soon...' content.

_lib/moon\web/pages/components/dialog · high confidence

New LiveView pages have been added to the components documentation site for Line Chart, Geo Map, Pie, Table, and Vertical Bar charts. The Line Chart page is fully implemented with a working example using the LineChartCard component, including filter state and data generation, while the Geo Map, Pie, Table, and Vertical Bar pages are added as placeholders displaying a 'Coming soon...' message. These pages provide the navigation structure and initial UI scaffolding for these chart components within the Moon design system documentation.

_lib/moon\web/pages/components/charts · high confidence

Added browser configuration files (browserconfig.xml, site.webmanifest) and a Safari pinned-tab SVG icon to the favicons directory, enabling proper favicon rendering and mobile home-screen icon support across modern browsers.

priv/static/images/favs · high confidence

The root layout template now includes links for various favicon assets (including Apple touch icons and browser manifests) and integrates the Google Analytics tracking script (ID: G-S5KHVFW9Y7) to enable usage analytics.

_lib/moon\web/templates/layout · high confidence

Introduces a new modal dialog component in the Moon UI library. The component provides a structured layout with a title, content, and footer sections, featuring a backdrop overlay, a close button, and accessibility attributes such as \role="dialog"\ and \aria-modal="true"\ to ensure proper screen reader support and keyboard navigation.

lib/moon/components/dialog · high confidence

This change introduces several new low-level UI components to the Lego library. Users can now use the Checkbox and Radio components for form selections, which support context-based selection states and custom styling via Tailwind classes. The Title and MultiTitle components provide structured text display with support for titles, text, and default slots. Additionally, the ChevronUpDown component allows for collapsible sections with rotation animations, backed by a temporary ChevronDown icon component that bridges styling until a permanent icon solution is integrated.

lib/moon/components/lego · high confidence

Introduced a new \Moon.Components.Select.Dropdown.Option.Renderer\ component that renders individual options within a select dropdown. This component handles the display of option content via a slot and manages click interactions by dispatching a \moon:update-select\ JavaScript event to update the selection state.

lib/moon/components/select/dropdown/option · high confidence

Introduces the \Moon.Components.InputGroup.Container\ component, which renders a styled div wrapper for input groups. It supports horizontal and vertical orientations, applies specific background colors (defaulting to 'goku'), and visually indicates error states by changing the accent color (from 'beerus' to 'chichi'). The component handles layout styling, including separators between items and hover/focus states.

_lib/moon/components/input\group/styled · high confidence

Added the core table component files (\table.ex\ and \column.ex\) to the \lib/moon\_web/components/table\ directory. This introduces a new table UI element that renders a grid of items with defined columns, featuring alternating row backgrounds (Goku/Gohan themes), sortable column headers, and specific text styling.

_lib/moon\web/components/table · high confidence

New documentation pages have been added for the Circular and Linear Progress components within the v2 design system. These pages provide users with detailed descriptions, example variations (including different sizes, values, and custom colors), and a comprehensive list of props for each component, ensuring clear guidance on how to implement and configure progress indicators in the application.

_lib/moon\web/pages/design/progress · high confidence

Added new documentation pages for the v2 form components (AuthCode, Checkbox, Combobox, Group, Input, InsetInput, Radio, Select, and TextArea) under the /components/v2/form/ path. Each page includes component descriptions, example lists, and props tables to guide users on how to use the updated form inputs.

_lib/moon\web/pages/design/form · high confidence

The design system documentation now includes a comprehensive set of examples for the Alert component, demonstrating its various configurations. These examples cover the default alert state, alerts with titles and messages, alerts incorporating icons, alerts with close buttons, and interactive scenarios where the alert can be opened and closed via user actions. Additionally, customization examples illustrate how to apply different visual styles, such as outline and colorful variants, to the Alert component.

_lib/moon\_web/examples/design/alert\example · high confidence

The design system documentation now includes a new set of examples for the Circular Progress component (v2), demonstrating its default appearance, various size options (2xs through lg), different value states (25% to 100%), and custom color configurations for background and progress strokes.

_lib/moon\_web/examples/design/circular\_progress\example · high confidence

The design system documentation now includes four new example components for the Drawer v2 component: a default drawer, drawers positioned at the start, top, end, and bottom of the screen, a drawer with a backdrop overlay, and a drawer featuring a close button. These examples demonstrate how to integrate the \Moon.Design.Drawer\ and \Moon.Design.Button\ components, handle open/close events via \Drawer.open\ and \Drawer.close\, and utilize the \Drawer.Panel\ and \Drawer.Backdrop\ sub-components.

_lib/moon\_web/examples/design/drawer\_example, lib/moon\_web/examples/design/popover\example · high confidence

A new documentation page for the IconButton component has been added to the design system examples. This page provides a description of the component's purpose, lists various usage examples including default, variants, sizes, and disabled states, and displays the associated props table for the Moon.Design.Button.IconButton module.

_lib/moon\web/pages/design/button · high confidence

Added new example components for the Modal part, including default, small, medium, large, and alert variants, as well as examples demonstrating integration with Forms and Wizards. These examples showcase how to open and close modals, use different sizes, and embed complex UI elements like forms and multi-step wizards within a modal context.

_lib/moon\_web/examples/design/carousel\_example, lib/moon\_web/examples/parts/modal\example · high confidence

The design system now includes example implementations for the Search component, demonstrating both a default usage that filters options and a custom variant that allows rendering each option as a Dropdown.Link with an icon. These examples illustrate how to integrate the Search component with Phoenix LiveView event handling for real-time filtering and how to customize the appearance of search results using the Dropdown component.

_lib/moon\_web/examples/design/search\example · high confidence

Added example pages for the Form.Select component, demonstrating its usage with single and multiple selections, various sizes (sm, md, lg), disabled and error states, and integration with Field labels and hints.

_lib/moon\_web/examples/design/form/select\example · high confidence

A new UserSocket module has been added to the application to support Phoenix Channels. This module defines the socket connection logic, currently allowing all connections by default and returning a nil ID to keep sockets anonymous. It serves as the entry point for real-time communication features, with room channel subscriptions and user authentication logic commented out for future implementation.

_lib/moon\web/channels · high confidence

Added new documentation pages for the Datepicker component, including a detailed page for the default datepicker with examples and props, as well as placeholder pages for range and single date pickers.

_lib/moon\web/pages/components/date · high confidence

New example files have been added to the \lib/moon\_web/examples/design/form/group\_example\ directory to demonstrate the usage of the \Moon.Design.Form.Group\ component. These examples cover default vertical grouping, horizontal orientation via the \orientation\ prop, various input sizes (sm, md, lg), and different input states such as error, disabled, and readonly. Additionally, a variants example illustrates how the Group component integrates with other form elements like \InsetField\, \Select\, and \Form\ wrappers, including handling form changesets.

_lib/moon\_web/examples/design/form/group\_example, lib/moon\_web/examples/design/form/textarea\example · high confidence

New example components have been added to the showroom to demonstrate the Header part. These include a default variant showing breadcrumbs, a title with description, and a button group, as well as a title-only variant, allowing users to preview and understand the different configurations of the header UI.

_lib/moon\_web/examples/parts/chart\_example, lib/moon\_web/examples/parts/header\example · high confidence

The application now includes the initial gettext infrastructure for localizing error messages. This adds the English translation file (errors.po) and the corresponding template file (errors.pot) under priv/gettext, enabling the system to extract and manage translatable strings for user-facing error notifications.

priv/gettext · high confidence

The \lib/moon/lego\ library now includes several new stateless components: \Checkbox\ (with selection mark and click handling), \Radio\ (with selection mark), \ChevronUpDown\ (for dropdown indicators), \Title\ and \MultiTitle\ (for menu item text layouts). These components provide the visual building blocks for form controls and menu structures, utilizing Tailwind CSS for styling and supporting accessibility attributes like \aria-checked\ and \data-testid\.

lib/moon/lego · high confidence

Added four new example components (Generic, Short, Slim, and Wide) in the sidebar examples directory to demonstrate different sidebar configurations, including logo placement, menu sections, and bottom navigation with avatar integration.

_lib/moon\_web/examples/parts/sidebar\example · high confidence

This change introduces new modules to handle user preferences and error rendering. MoonWeb.Hooks.Plug.Cookies reads theme and direction settings from browser cookies and stores them in the session, while MoonWeb.Hooks.Cookies manages these settings within LiveViews, allowing users to toggle dark mode and text direction (LTR/RTL) which are then persisted via cookies. Additionally, standard Phoenix error handling is established with MoonWeb.ErrorView and MoonWeb.ErrorHelpers to display translated error messages, and MoonWeb.Layouts is added to embed layout templates.

_lib/moon\web/views · high confidence

Added example components for the AuthCode form element, demonstrating usage with various configurations including default, custom length, allowed characters, different gaps, disabled and error states, password type, placeholder, hint messages, and integration within a Phoenix form.

_lib/moon\_web/examples/design/form/auth\_code\example · high confidence

The Breadcrumb example set has been expanded to demonstrate new capabilities, including responsive collapsing of items on small screens, custom dividers, icon support in the first item, and headless variants that allow for custom styling and dropdown menus for collapsed states. Additionally, the Loader examples have been updated to showcase available color themes and size variants.

_lib/moon\_web/examples/design/breadcrumb\example · high confidence

The breadcrumb component in the Moon design system has been updated to handle navigation paths with many items by introducing a collapsed view. When the list of breadcrumbs exceeds a certain length, intermediate items are hidden behind a 'more' button (a ghost button with a three-dot icon). Clicking this button reveals a flyout menu containing the hidden links, while the first and last visible breadcrumbs remain in the main navigation bar. This change improves usability on smaller screens or in complex navigation structures by reducing visual clutter without losing access to the full path.

lib/moon/components/breadcrumb/subcomponents · high confidence

Users now see a branded 404 error page when a page is not found, featuring a 'Lost in space' theme with a specific image, descriptive text, and a button to return to the home page.

_lib/moon\web/templates/error · high confidence

The datepicker component has been refactored to support explicit date range selection. It now includes dedicated input fields for start and end dates (supporting both date-only and datetime modes), a new 'Buttons' component providing 'Discard' and 'Apply' actions to control form submission, and a 'Month' component that visually highlights the selected range and respects a configurable week start day. Helper functions have been added to parse dates and calculate standard ranges (e.g., last month, this week).

lib/moon/components/datepicker · high confidence

Added new documentation pages for the v2 design system components, including Accordion, Alert, Avatar, BottomSheet, Breadcrumb, Button, Carousel, Chip, Drawer, Dropdown, Loader, MenuItem, Modal, Pagination, Popover, Search, Snackbar, Switch, Table, Tabs, Tag, and Tooltip. Each page provides component descriptions, anatomy diagrams, usage examples, and property tables to guide developers in implementing the updated UI elements.

_lib/moon\web/pages/design · high confidence

The design system documentation for the Checkbox component has been significantly expanded with new example modules. These additions demonstrate how to use the Checkbox in various states and configurations, including custom visual styling (customizations), disabled and readonly states, integration within standard forms, and support for multiple selection scenarios (both standard and with horizontal labels). A new live example also illustrates a native Phoenix LiveView implementation for checkbox groups.

_lib/moon\_web/examples/design/form/checkbox\example · high confidence

The design system documentation for the Tabs component has been significantly expanded with new example files. Users can now see how to implement custom selected states with specific styling, use the new \Tabs.Link\ component for navigation, and apply different sizes (\sm\, \md\) to tabs, pills, and segments. Additionally, new examples demonstrate using \Tabs.Pill\ and \Tabs.Segment\ as tab modules, and a wizard-style layout is shown by integrating the Tabs component with the Wizard part for multi-step flows.

_lib/moon\_web/examples/design/tabs\example · high confidence

The design system documentation for the Table component has been significantly expanded with a comprehensive suite of new example files. These additions demonstrate specific capabilities including row selection via checkboxes and clickable rows, inline editing using Table.Input, and data sorting with sortable columns. Visual customization options are now illustrated through examples for zebra striping, cell borders, variable row sizes, and variable row gaps. The library also covers advanced data handling patterns such as Phoenix Streams for efficient updates, pagination integration, and footer summaries. Additionally, new examples show how to implement responsive layouts that adapt to different screen sizes and how to use the table in a headless mode for custom styling.

_lib/moon\_web/examples/design/table\example · high confidence

The Icons tutorial page now allows users to select individual icons and automatically generates the corresponding Elixir import code. Users can choose between importing icons by their attribute names (e.g., \\<Icon name="files\_copy" /\>\) or by their capitalized module names (e.g., \alias Moon.Icons.FilesCopy\), with the generated code displayed in scrollable code snippets for easy copying.

_lib/moon\web/pages/tutorials/icons · high confidence

This change introduces the foundational structure for the Moon Web application, including the OTP application supervisor, Phoenix endpoint configuration, and router. It establishes the core web infrastructure by wiring up the MockDB for local data simulation, configuring static asset serving, and defining the complete set of LiveView routes for the documentation site, component showcase, and tutorial pages.

_lib/moon\web · high confidence

Added the initial Distillery release configuration files for the 'moon' application, including \rel/config.exs\, \rel/vm.args\, and \rel/plugins/.gitignore\. This setup defines separate development and production environments, configures the Erlang VM with SMP auto-scaling and distributed cookie settings, and specifies the release profile for building the application.

rel · high confidence

This change introduces the new Moon.Components.Table component, starting with the column definition (Moon.Components.Table.Column) and pagination controls (Moon.Components.Table.Paging). The column component allows users to define column properties such as name, label, width, and sortability (defaulting to false), and supports a custom function for generating data-testid attributes on table cells. The paging component provides navigation controls (previous/next) that conditionally render based on the current offset and total count, displaying the visible range of items. These files establish the foundational structure for table rendering and navigation within the Moon library.

lib/moon/components/table · high confidence

This change introduces the Moon UI component library, adding a comprehensive set of reusable UI elements to the application. The diff adds new Surface components for Accordion, Banner, Calendar, Caption, Card, Checkbox, Chip, Divider, Drawer, Dropdown, FileInput, Form, Heading, Icon, IconButton, Link, Loader, Pagination, Popover, ProgressLinear, Radio, Select, Sidebar, Switch, Table, Tabs, TextInput, Toast, and Tooltip, along with supporting layout and utility components. These components provide the foundational building blocks for the user interface, implementing consistent styling and behavior across the application.

lib/moon/components · high confidence

Added the Avatar component, which displays a user's image, name initials, or a generic user icon. It supports multiple sizes (xs through 2xl), customizable text and background colors, and an optional active status indicator with configurable positioning. The component also includes a rounded property to control border radius.

lib/moon/components/avatar · high confidence

This release adds the core configuration files for the Moon Design System, establishing a Tailwind CSS-based styling foundation. It introduces \colors.json\ to define semantic color tokens (e.g., krillin, chichi, goku) mapped to CSS variables, and \tailwind.config.js\ to configure the design system's typography scales, border radii, animations, and component-specific classes. The \ds-moon-preset.js\ file provides a reusable Tailwind preset for theme extension, while \postcss.config.js\ sets up the build pipeline. This change also includes a changelog entry for version 2.68.4, noting fixes for publishing issues.

assets · high confidence

The library now provides a centralized \MoonWeb\ module that standardizes how controllers, views, LiveViews, and components are defined, including setup for verified routes and Surface integration. Additionally, the \Moon\ module exposes a \colors/0\ function that returns a predefined list of theme color tokens (such as 'krillin', 'goku', and 'frieza' variants), making these design system values available for use in application components.

lib · high confidence

The \lib/moon/components/text\_input\ directory now contains a complete set of new components (\Container\, \HintText\, \Input\, \Password\, \ShowPassword\, and \Utils\) that implement a text input system with three distinct size variants (md, lg, xl) and a password input type featuring a visibility toggle. The \Input\ component supports standard form attributes (placeholder, disabled, required, readonly, min, max, step) and event handlers (focus, blur, keyup, keydown), while the \Password\ component wraps a password input with a toggle mechanism. The \ShowPassword\ component provides the UI for toggling visibility, and \Utils\ handles the specific CSS classes for sizing and border radius.

_lib/moon/components/text\input · high confidence

The \lib/moon/light\ library now includes native LiveView components for forms and tables, replacing previous Surface-based implementations. This adds \Moon.Light.Form\ (with \field\, \input\, and \select\ helpers) and \Moon.Light.Table\ (with sorting, selection, and streaming support), along with supporting utilities like \Moon.Light.Lego\ for checkboxes and \Moon.Light.Sur.Event\ for event handling. Users can now build forms and tables directly with LiveView without relying on Surface.

lib/moon/light · high confidence

Added a comprehensive set of documentation examples for the Bottom Sheet and Modal components. The Bottom Sheet examples demonstrate customization, default usage, various sizes (small, medium, fullscreen), nested sheets, responsive behavior (switching to modal on large screens via \as\_modal\_on\), drag handles, titles, and form integration. The Modal examples cover default usage, large content handling, form integration, select fields, and styled content variations.

_lib/moon\_web/examples/design/bottom\_sheet\example · high confidence

Added three new example components (\Custom\, \Default\, and \Multiple\) for the \Form.Combobox\ design element. These examples demonstrate how to implement a custom dropdown with manual filtering, a standard combobox integrated with a Phoenix form and changeset, and a multi-select combobox variant, providing reference implementations for developers.

_lib/moon\_web/examples/design/dropdown\_example, lib/moon\_web/examples/design/form/combobox\example · high confidence

Added example components in the design system documentation to demonstrate Form.Dropdown usage, including deep customization with custom icons and radio-style options, multi-select support via the is\_multiple prop across small, medium, and large sizes, and visual states such as error and disabled.

_lib/moon\_web/examples/design/form/dropdown\example · high confidence

Added two new documentation components, \ForDesigner\ and \ForDeveloper\, to the Getting Started section. The designer guide covers component usage, color conventions, typography, and product tokens, while the developer guide provides step-by-step instructions for setting up a Phoenix LiveView project with Moon Surface components, including dependency installation, configuration, and asset setup.

_lib/moon\web/components/started · high confidence

Developers can now use \mix moon.gen.component\ to scaffold new Moon components and pages, and \mix moon.convert.component\ to migrate existing Surface components to Phoenix Live View format. These new CLI tools automate file creation and code transformation, streamlining the development and migration workflows for Moon's component library.

lib/mix · high confidence

This change introduces the Moon design system to the client-side application. It adds a new Tailwind CSS preset (\moon-base-preset.js\) and component styles (\moon-components.js\) that define the visual appearance of UI elements like buttons, inputs, and avatars using semantic CSS variables. It also includes configuration files for responsive utility classes for the BottomSheet, Breadcrumb, and Dropdown components. On the application side, \app.js\ is updated to initialize Phoenix LiveView with custom hooks and listeners for form updates and cookie management, while a new S3 uploader module is added to handle direct file uploads to AWS S3.

assets/js · high confidence

Added four new example components for the Form.Radio design element: a default usage with options, a disabled state variant, a form-integrated example using Phoenix changesets, and a customizations example demonstrating Button and Indicator sub-components with custom styling.

_lib/moon\_web/examples/design/form/radio\example · high confidence

Added a new example component at lib/moon\_web/examples/design/form\_example/registration.ex that demonstrates a user registration form. This example showcases the integration of various form elements including Select, Input, TextArea, Switch, and Checkbox within a Phoenix LiveView form structure, providing a reference implementation for building complex forms with validation and submission handling.

_lib/moon\_web/examples/design/form\example · high confidence

The \lib/moon/components/select\ area now introduces a complete set of select UI components: \SingleSelect\, \MultiSelect\, and a shared \Dropdown\ with helper utilities. Users can now render single-choice or multi-choice inputs that integrate with Phoenix LiveView forms, featuring features like search filtering, disabled states, size variants (sm/md/lg/xlarge), custom labels, error handling, and visual indicators like checkboxes or radio buttons within the dropdown. The components use a popover for the dropdown menu and support slots for headers, footers, and custom content.

lib/moon/components/select · high confidence

Added a new conversion toolchain in \lib/moon/convert\ that transforms Surface component definitions (AST, props, slots, and templates) into native LiveView syntax. This includes helper modules for AST manipulation (\ast.ex\), property and slot translation (\module.ex\), template node processing (\template.ex\), and HTML token handling (\tokens.ex\), enabling users to migrate existing Surface components to LiveView.

lib/moon/convert · high confidence

Added three new Surface components—TextInputBasic, TextInputInnerLabel, and TextInputPassword—to the text input library. These components provide distinct visual styles (standard top labels, floating inner labels, and password fields with visibility toggles) and support consistent features such as left/right icon slots, disabled states, size-based styling, and error tag display.

_lib/moon/components/text\input/subcomponents · high confidence

A new tutorial page titled 'Theming and Visuals' has been added to the documentation site. This page introduces users to TailwindCSS-based theming, providing specific sections and reference links for text color, background color, border radius, margin, padding, and responsive layout.

_lib/moon\web/pages/tutorials/theming · high confidence

The design system documentation now includes new example pages for the Tooltip component, demonstrating default usage, custom styling (backgrounds, fonts), various positioning options, and variants without arrows or shadows.

_lib/moon\_web/examples/design/tooltip\example · high confidence

Added a suite of TypeScript scripts in the \scripts/typescript\ directory to automate the generation of Moon UI assets. The \theme-importer.ts\ script converts JavaScript theme definitions into Elixir-compatible CSS variables, while \figma-importer.ts\ fetches design tokens from Figma to update theme files. Additionally, \icons-importer.ts\, \assets-importer-legacy.ts\, and \generate-svg-symbols.ts\ handle the processing of SVG icons and assets, generating the necessary Elixir components and helper modules for the library.

scripts/typescript · high confidence

This release introduces a comprehensive set of new UI components for the Moon Parts library, including Avatar, Button, Chart, Header, IconButton, Modal, Sidebar, Status, Table, and Wizard. These components provide a consistent design system with features such as responsive layouts, sorting capabilities for tables, multi-step wizard navigation, and various button variants (error, success, warning, gray, white). The Sidebar component includes both generic and slim modes with navigation links and accordion sections, while the Header component supports breadcrumbs, titles, and button groups.

lib/moon/parts · high confidence

The \priv/static/themes\ directory now contains a comprehensive set of new CSS files defining the visual identity for various brands, including \aposta10\, \betadda\, \bitcasino\, \bitcasinoNew\, \bombayClub\, \comms\, \empire\, \hub88\, \lab\, \livecasino\, \moon\, \partners\, and \pay\. These stylesheets establish distinct light and dark mode palettes using CSS custom properties for colors, typography (such as Averta Std, DM Sans, Space Grotesk, and Fraunces), spacing, and shadows. The \index.ts\ entry point has been updated to import the \betadda\ and \bitcasino\ themes, making them available to the application.

priv/static/themes · high confidence

The assets documentation site now includes dedicated pages for displaying various asset categories. Users can browse and preview Age Limit indicators, Crests (e.g., Arsenal, Flamengo), Currencies (fiat and crypto like Bitcoin, Ethereum), Duotones, Icons, Logos (full and short variants), and Patterns (circles, crosses, ripple, etc.). Each page presents visual examples alongside their corresponding code snippets, facilitating easier integration and reference for developers.

_lib/moon\web/pages/assets · high confidence

Added a set of new stateless layout components to the library, including ButtonsList, CenterOfScreen, LeftToRight, PullAside, RightToLeft, Sections, and TopToDown. These components provide pre-built structures for common layout needs such as centering content on the screen, arranging items in left-to-right or top-to-down flows with configurable gaps, supporting right-to-left directionality, and creating split layouts with growable left and right sections.

lib/moon/autolayouts · high confidence

The component documentation site now includes dedicated example pages for a wide range of UI components, including Accordion, Avatar, Banner, Breadcrumb, Button, Calendar, Card, Carousel, Checkbox, Chip, Country Flags, and Drawer. These pages provide interactive examples and code snippets for features such as accordion states (open by default, disabled, content outside header), avatar variants (rounded, colored, sized, status indicators), banner configurations (buttons, icons, mobile, single-line), breadcrumb navigation, button styles (variants, sizes, icons, animations), calendar views with events, card layouts (including CardV2 for stats), carousels, checkbox forms (with validation and disabled states), chip interactions (active, stroke, icons), country flag displays, and drawer panels. Each page demonstrates the component's props and usage patterns to help developers integrate them into their applications.

_lib/moon\web/pages/components · high confidence

Added new template files for generating Moon Design v2 components, including an empty module, a stateless component definition with standard props (id, testid, class) and a default slot, an example usage module, and a documentation page LiveView. These templates streamline the creation of new UI components by providing a consistent structure and integration with the existing documentation site.

priv/templates · high confidence

The scripts/deploy directory now includes a comprehensive suite of shell scripts and configuration files to manage the Elixir application's lifecycle on AWS ECS. This introduces automated Docker image building and pushing (docker-build), direct deployment to ECS clusters with rollback support (docker-deploy), and alternative deployment via the stacks repository (stacks-deploy). Operational convenience is improved with new utilities for SSH access (host-ssh, ssh), interactive shell sessions (iex), log streaming (logs, last-logs), and service status monitoring (status). The suite also includes helper scripts for database access (psql), asset building (build-assets), environment variable validation (check-vars), and protocol buffer generation (proto.sh). Additionally, a semantic-release configuration (semantic-release.js) is added to automate versioning and changelog updates based on commit conventions.

scripts/deploy · high confidence

The website now includes several new pages to help users understand and use the Moon Design System. These include a main landing page, a 'Getting Started' guide with tabs for designers and developers, a 'Components' overview listing available UI elements, a 'Colours' palette page, a 'Tokens' page detailing design values like border radius and shadows, a 'Typography' page, a 'Vision' page explaining the system's philosophy, a 'Manifest' page, a 'How to Contribute' guide, a 'Phoenix Usage' guide for integrating with non-Surface templates, an 'Icons' full list page, and an 'Example' page for visual testing.

_lib/moon\web/pages · high confidence

Added new LiveView pages in the Parts section to showcase Moon's UI components. The Buttons page displays default button examples. The Modals page aggregates various modal types, including Alert, Wizard, and Form variants. The Header page demonstrates a header layout with breadcrumbs, title, description, and button groups. The Sidebar section now includes dedicated pages for Generic, Slim, and Wide sidebar templates, each displaying specific examples and detailed props tables for sub-components like Logo, Section, Accordion, and MenuLink.

_lib/moon\web/pages/parts · high confidence

Added dedicated documentation pages for the Select component family, including \select\_page.ex\ (which displays a deprecation warning for the legacy Select component), \single\_select\_page.ex\, \multi\_select\_page.ex\, and \dropdown\_page.ex\. These pages provide interactive examples and props tables for the SingleSelect, MultiSelect, and Dropdown components, demonstrating features such as search, icons, footer actions, and form integration.

_lib/moon\web/pages/components/select · high confidence

The documentation site now features a structured layout with a persistent left sidebar navigation, a top header, and a footer. This includes a new \Page\ component that orchestrates the layout, \LeftMenu\ for navigation with accordion support, and \Breadcrumbs\ for page context. A new \ExampleAndCode\ component allows developers to view component previews alongside their source code, while \PropsTable\ and \TokensTable\ automatically generate API documentation from component modules. Additional utility components like \ColorsPalette\, \ManifestCard\, and \VisionCard\ support the content pages.

_lib/moon\web/components · high confidence

Added a comprehensive set of new example pages for the Button and IconButton components, covering default usage, variants (fill, outline, ghost), sizes (xs through xl), animations (progress, success, error, pulse), icon placement, customization, disabled states, and multi-line support. These examples demonstrate how to use the components with different attributes and styles, providing developers with ready-to-use code snippets for common scenarios.

_lib/moon\_web/examples/design/button\example · high confidence

Added a set of new example pages under the \lib/moon\_web/examples/design/form\ directory to demonstrate the usage of the \Moon.Design.Form.Input\ and \Moon.Design.Form.InsetField\ components. These examples cover various configurations including default usage, different sizes (sm, md, lg), component states (disabled, readonly, error), input types (date, email, password, etc.), and layout variations with labels, hints, and horizontal alignment.

_lib/moon\_web/examples/design/form/input\example · high confidence

The design system documentation now includes dedicated example pages for the MenuItem component, covering specific use cases such as link-style navigation, checkbox and radio selection states, expandable/collapsible nested menus, multi-line content with icons, and size variants (default, large, extra-large).

_lib/moon\_web/examples/design/menu\_item\example · high confidence

This change introduces a suite of new UI components for the Moon documentation site's 'facing' section, including CardArticle and CardContributor for displaying content and team members, a Contributors section with a spotlight carousel, and dedicated blocks for designers and developers with links to Figma and GitHub. It also adds utility components like a reel container, deprecation warnings, and various SVG icons (Figma, GitHub, Future) to support the site's layout and navigation.

_lib/moon\web/components/facing · high confidence

Added new example LiveComponents in the \lib/moon\_web/examples/light\ directory to demonstrate form and table capabilities. The form examples (\registration.ex\, \registration.exs\, \multiple\_choices.ex\) showcase native LiveView form handling with select inputs, text inputs, text areas, switches, and checkboxes, including both macro-based and explicit module-qualified syntax variations. The table examples (\checkboxes.ex\, \clickable\_rows.ex\, \editable.ex\, \sorting.ex\) demonstrate table features such as row selection via checkboxes, clickable rows, inline editable inputs, and column sorting.

_lib/moon\web/examples/light · high confidence

This change introduces a suite of new JavaScript hooks in \assets/js/hooks\ to enhance interactivity for various UI components. The \animation\ hook manages open/close states and transitions for modals and panels, while the \bottom\_sheet\ hook adds swipe-to-dismiss functionality for mobile panels. Form usability is improved with the \auth\_code\ hook, which handles focus jumping and paste events for multi-digit code inputs, and the \datepicker\ hook, which fixes year input length issues. Additionally, the \combobox\ hook prevents event propagation and manages dropdown visibility, and the \vega\_lite\ hook enables dynamic rendering and data updates for line charts.

assets/js/hooks · high confidence

Added three new internal Surface components to support the Select Dropdown feature: \Dropdown.Footer\ provides a layout for action buttons (cancel, clear, confirm) using autolayouts; \Dropdown.Icon\ renders arbitrary icon components with configurable styling; and \Dropdown.Option\ handles individual option rendering, including logic to determine selection state for both single and multi-select modes.

lib/moon/components/select/dropdown · high confidence

This change introduces a comprehensive in-memory mock database (\lib/moon\_web/mock\_db\) to support the web interface, replacing or supplementing previous data sources. It provides GenServer-backed repositories for Users, Affiliates, Transactions, Segments, Countries, Currencies, and Sites. The Users module supports filtering by ID, country, and site, as well as sorting and searching by username. Affiliates and Transactions support pagination and filtering (e.g., by user, site, currency), enabling the UI to display paginated lists with realistic, randomly generated data.

_lib/moon\_web/mock\db · high confidence

Added four new Ecto schema modules in the site schema layer to support documentation site structure and form data handling. The \MoonWeb.Schema.Link\ module provides structured lists of documentation pages for site menus and search indexing. \MoonWeb.Schema.Dates\ introduces validation logic to ensure date ranges have a valid start and end order. \MoonWeb.Schema.User\ defines a stub user model with specific validation rules (including a hardcoded password check) and helper methods for generating form options like roles, permissions, and gender choices. \MoonWeb.Schema.Flow\ provides a basic changeset for flow-related form data.

_lib/moon\web/schema · high confidence

A new tutorial page titled 'Add Data Using Form' has been added to the application. This page demonstrates form handling capabilities by introducing a User schema with validation rules (such as required fields, email format, and specific password constraints) and providing various data options for UI components like gender selection, permissions, and roles, including variants with icons and country flags.

_lib/moon\_web/pages/tutorials/add\_data\_using\form · high confidence

Added three new tutorial pages to the documentation site: an installation guide detailing requirements and setup steps for Moon Surface with Phoenix LiveView, a form tutorial demonstrating data submission using components like TextInput, Select, and FileInput, and an introduction page showcasing design assets and component library implementations via carousels.

_lib/moon\web/pages/tutorials · high confidence

The \lib/moon/design\ library introduces a comprehensive set of v2 UI components, including Accordion, Alert, Avatar, BottomSheet, Breadcrumb, Button, IconButton, and Carousel, along with their sub-components (e.g., Accordion.Header, Breadcrumb.Item). These components provide a modernized visual language with Tailwind CSS styling, support for multiple sizes and variants, and enhanced interactivity such as animations, drag handles, and responsive collapsing. They also include dedicated \testid\ props for testing and improved accessibility features like ARIA attributes.

lib/moon/design · high confidence

The design system documentation now includes three new pagination examples: one using chevron icons for navigation buttons, another using text labels ('Previous'/'Next') with custom styling, and a third demonstrating how to integrate pagination with page hrefs via URL redirects. These examples illustrate different visual styles and interaction patterns for the Pagination component.

_lib/moon\_web/examples/design/pagination\example · high confidence

The repository has been initialized with a new Elixir/Phoenix project structure using Surface UI and Tailwind CSS. This includes setting up the build environment with a Dockerfile and .tool-versions (Erlang 26.1.2, Elixir 1.15.7, Node.js 16.20.2), configuring code quality and formatting via .credo.exs and .formatter.exs, and establishing automated release workflows with semantic-release and conventional commits. The project also introduces scripts for importing Figma assets and icons, adds a CONTRIBUTING.md guide for developers, and switches the license from a restricted proprietary notice to the MIT License.

(repo-wide) · high confidence

The Showroom page now includes a set of wizard components that allow users to interactively preview and customize UI elements. This includes an editable table component for managing menu items with icons, names, and status, alongside header variants (with title only, or with title and description) that support toggling breadcrumbs, button groups, and light/dark themes. Sidebar options (slim, generic, wide) are also exposed with similar theme controls, enabling developers to explore layout adaptability directly within the showroom environment.

_lib/moon\_web/components/show\_room\page · high confidence

Added a comprehensive set of example components for the Switch design element, demonstrating its usage in various states and configurations. These examples cover default behavior, disabled states, custom background colors, size variations (2xs, xs, default), full customization via CSS classes, integration with Phoenix forms, and the use of custom icons for on/off states.

_lib/moon\_web/examples/design/switch\example · high confidence

The Caption, Heading, and Text component documentation pages in the typography section have been marked as deprecated. These LiveView pages now explicitly instruct users to migrate to the new Typography system built with Tailwind CSS classes, rather than relying on the legacy component props for styling.

_lib/moon\web/pages/components/typography · high confidence

The entire body section of the Aposta10 site has been removed, including the main layout and all constituent UI components such as the banner carousel, picks, featured bookmakers, blog carousel, guides, best bookmakers, academy, and footer. This change eliminates the visual rendering of these sections for users visiting the Aposta10 site.

lib/moon/sites/aposta10/body · high confidence

The dark and light theme modules for the Aposta10 site have been removed, eliminating the previously defined color palettes (including specific values for 'piccolo' and 'some-test' colors) that were used to style the site's interface.

lib/moon/sites/aposta10/themes · high confidence

The header UI components for the Aposta10 site have been removed. This includes the links carousel, logo, search icon, and the main navigation menu (with its links and separators). Users will no longer see these specific header elements on the Aposta10 site.

lib/moon/sites/aposta10/header · high confidence

The accordion example directory now includes dedicated documentation pages for various usage patterns, including default styling, disabled items, single-open mode, size variants (xl, lg, md, sm), opening items by default, handling change events, and placing content outside the header.

_lib/moon\_web/examples/design/accordion\example · high confidence

The Avatar example page now includes dedicated sections demonstrating the new \Avatar.Status\ component for displaying online/offline indicators, with support for custom positioning (top/bottom, left/right) and styling. Additionally, the examples showcase the expanded set of avatar sizes (xs, sm, md, lg, xl, 2xl) and various customization options like CSS classes for text, background, and border colors.

_lib/moon\_web/examples/design/avatar\example · high confidence

The design system documentation for the Chip component has been refreshed with new example modules covering active states, disabled states, stroke variants, icon placements (left, right, icon-only), sizes, and click interactions, providing updated usage patterns for developers.

_lib/moon\_web/examples/design/chip\example · high confidence

The calendar grid logic has been refactored into three new, dedicated components: \Day\, \Month\, and \Week\. The \Day\ component now handles the rendering of individual date cells, including event summaries and location details. The \Month\ component manages the full monthly grid layout, calculating previous and next month padding days and filtering events for each day. The \Week\ component provides a dedicated weekly view with a responsive grid layout. This structural change improves code modularity and allows for distinct styling and behavior for each calendar view mode.

lib/moon/components/calendar · high confidence

The application's styling foundation has been updated to use a new semantic design token system, replacing previous hardcoded values with variables for dimensions, spacing, borders, and shadows. This change also introduces the DM Sans font family as the primary typeface and disables automatic font-size adjustment on mobile devices to prevent unexpected zooming. These updates are implemented in the core CSS files (app.css and moon-base.css) which now define the base layer of the design system.

assets/css · high confidence

The Moon library has shifted its component architecture from Surface-based stateful/stateless components to native LiveView components. This is achieved by introducing \Moon.Convert\ to translate Surface syntax to LiveView, adding \Moon.Light\ with LiveView-native implementations for UI elements like icons and tables, and removing the legacy \Moon.Themed\ context. The core macros (\Moon.LiveView\, \Moon.StatefulComponent\, \Moon.StatelessComponent\) have been updated to accept options, replace deprecated helper imports (\ClassNameSupport\, \ResolutionSupport\) with new ones (\Styled\, \MergeClass\, \MoonRender\), and remove built-in theme toggling logic, effectively moving theme management out of the base component definitions.

lib/moon · high confidence

The application now uses dedicated configuration files for each environment (dev, test, prod, backoffice) alongside a central config.exs. Development mode is configured to use esbuild for asset compilation and enables live reloading for Moon and Surface components. The Surface library is configured with specific component defaults, such as error translation and context propagation for Moon's form and design components. Production settings define the HTTP port, URL host, allowed origins, and static asset caching, while test mode disables the server and adjusts logging.

config · high confidence

This change introduces a suite of new helper modules in lib/moon/helpers to support component functionality. Moon.Helpers.Form provides utilities for handling form values, errors, and input styling classes. Moon.Helpers.MergeClass integrates the Tails library to properly merge Tailwind CSS classes, including handling Surface-specific data types. Moon.Helpers.MoonRender enables the rendering of Surface components within non-Surface templates (HEEX/SLIM). Additionally, new helpers for country flags, asset naming, list manipulation, positioning, and style generation are added, while the legacy ClassNameSupport and ResolutionSupport modules are removed.

lib/moon/helpers · high confidence

The Snackbar design examples have been updated to demonstrate additional usage patterns. New examples show how to configure automatic closing via the \timeout\ attribute, position the snackbar in any of the six screen corners, and apply custom styling such as border radius, background color, width, and explicit light/dark themes. The examples also cover semantic variants (Success, Warning, Error) with specific icon styling, as well as options for multi-line messages, headers, icons, and manual close buttons.

_lib/moon\_web/examples/design/snackbar\example · high confidence

The Tag example documentation has been expanded to demonstrate additional usage patterns for the Moon.Design.Tag component. Users can now see examples of customizing tags via CSS classes (such as rounded corners and background colors), controlling letter casing with the \is\_uppercase\ attribute, and applying different sizes including the new \sm\ variant alongside existing \2xs\ and \xs\ options. Additionally, the examples now illustrate how to integrate icons into tags using \left\_icon\ and \right\_icon\ slots.

_lib/moon\_web/examples/design/tag\example · high confidence

The cookie handling logic in the JavaScript assets has been refactored into separate, reusable modules. Specifically, \get-cookie.js\ and \set-cookie.js\ are now distinct files exporting \getCookie\ and \setCookie\ functions respectively, replacing inline or monolithic implementations with modular, maintainable code for reading and writing cookies.

assets/js/cookies · high confidence

The Progress component examples have been updated to demonstrate v2 features, including support for custom background and progress colors, multiple size variants (6xs through 3xs), and the new Progress.Pin sub-component.

_lib/moon\_web/examples/design/progress\example · high confidence

The SingleSelect component has been restructured to improve maintainability and styling precision. The previous monolithic implementation has been replaced by a set of dedicated sub-components: \HintText\ for displaying validation messages with error-specific coloring, and a \Value\ module that delegates rendering to \SelectedValue\, \MainContent\, \InnerLabelContent\, \InnerLabelNoIconsContent\, and \NoInnerLabelNoIconsContent\. This change allows for distinct visual handling of selected values based on the presence of icons, label types, and size variants (such as 'xl'), ensuring the component aligns with the design system's specifications for padding, typography, and icon placement.

_lib/moon/components/select/single\select · high confidence

Added initial test for Switch component; Added initial test infrastructure for MoonWeb; Added integration tests for UI component examples; Added integration tests for page and example routes; Added snapshot and logic tests for MenuItem component; Added test support modules for channel and connection testing; Added tests for Page LiveView rendering; Added tests for table sorting functionality; Added tests for the Switch component; Added tests for the merge\_class helper; Snapshot tests added for Moon menu item variants.

The project now manages its frontend and build tooling via npm, introducing \assets/package.json\ with Tailwind CSS 3.3.2, PostCSS, and Popper.js, alongside a root \package.json\ for semantic-release automation. On the Elixir side, \mix.exs\ upgrades core dependencies to Phoenix 1.6+, LiveView 0.20, and Surface 0.11, while also adding esbuild for asset compilation and updating the Elixir requirement to version 1.11.

(dependencies) · high confidence

The Elixir LS test build directory (\.elixir\_ls/build/\_test\) has been cleared of compiled application artifacts and dependency metadata. This change removes \.app\ files, \ebin\ directories, and \mix.rebar.config\ files for numerous dependencies—including \cachex\, \gettext\, \hackney\, \jason\, \protobuf\, and \telemetry\—effectively resetting the local test build state.

_.elixir\_ls/build/\test · high confidence

Written by watchdog.canine.dev from the codebase's own history, inside the signed delivery this page is composed from.

• First survey — no prior run to compare against. CAI 52.

• Code Health 67
• Architecture 99
• Maturity 54
• Readiness 40
• Security 69
• Accessibility 66

• 300 commits — 201 feature/other, 99 fixes

• (root) — 165 commits
• lib/moon — 67 commits
• lib/moon_web — 26 commits
• (repo) — 20 commits
• .circleci/config.yml — 7 commits
• assets/js — 6 commits
• priv/static — 3 commits
• config/surface.exs — 2 commits
• .github/workflows — 1 commit
• assets/CHANGELOG.md — 1 commit
• test/snapshots — 1 commit
• test/moon_web — 1 commit

• fix: Merge pull request #842 from coingaming/fix/selects-id
• fix: chore: ci fix #5
• fix: chore: circle-ci fix #4
• fix: fix(Combobox): Use String.contains?/2 instead of String.starts_with?/2 for search (#860)
• fix: fix: Add autoclose prop to Dropdown [MDS-841] (#792)
• fix: fix: Add header example to examples folder (#751)
• fix: fix: AuthCode component focus jump fix #1 (#827)
• fix: fix: BottomSheet jumping fix (#760)
• fix: fix: Checkbox label style and error/hint horizontal placement fix [MDS-816] (#782)
• fix: fix: Checkbox styling issue [MDS-1585]
• fix: fix: Combobox attrs attribute
• fix: fix: Combobox options are not fully clickable [MDS-1385] (#858)
• fix: fix: Design.Form now has attrs property (#815)
• fix: fix: Disabled for Chip [MDS-832] (#786)
• fix: fix: DragHandler fix for BottomSheet (#796)
• fix: fix: Dropdown slot fix (#801)
• fix: fix: Dropdown.Input attrs attribute (#821)
• fix: fix: Elixir version bump (#758)
• fix: fix: FileInput set correct z-index for cancel upload (#809)
• fix: fix: Fix Avatar.Status classes (#777)
• …and 280 more

Written by watchdog.canine.dev from the codebase's own history, inside the signed delivery this page is composed from.

coingaming/moon was measured the same way every project in this corpus was: the same rubric, at a pinned commit, with the result published in full. Point a surveyor at a repository you know and see whether you agree with it.