#UI Component Gallery

• Framework: Rabbita (MVU frontend framework, compiles to JS)
• Architecture: Single-page app with sidebar navigation and live component demos
• No backend: Pure frontend -- served as static files via any HTTP server

#Quick Start

moon update
make serve

make open

#Component Sections

#Inputs

#Display

#Navigation

#Data

#Overlay

#Composite

#Animated

#Rich Inputs

#Layout

#Feedback

#Project Structure

frontend/
  main.mbt              # Rabbita app entry point, mounts to #app
  app/
    types.mbt            # Section enum, all component state structs, Msg enum
    update.mbt           # Model::update() — message handling and state transitions
    styles.mbt           # CSS-in-MoonBit style constants
    view.mbt             # Top-level layout: sidebar + content + overlays
    view_inputs.mbt      # View functions for Input section components
    view_display.mbt     # View functions for Display section components
    view_navigation.mbt  # View functions for Navigation section components
    view_data.mbt        # View functions for Data section components
    view_overlay.mbt     # View functions for Overlay section components
    view_composite.mbt   # View functions for Composite section components
    view_animated.mbt    # View functions for Animated section components
    view_rich_inputs.mbt # View functions for Rich Inputs section components
    view_layout.mbt      # View functions for Layout section components
    view_feedback.mbt    # View functions for Feedback section components
    js_extern.mbt        # FFI bindings for browser APIs (clipboard, etc.)
    *_test.mbt           # Unit and end-to-end tests
public/
  index.html             # Static HTML shell with #app mount point
  frontend.js            # Build output (compiled MoonBit JS)
moon.mod.json            # Module config and dependencies
Makefile                 # Build and serve commands

#Architecture Diagrams

#Component Taxonomy

graph LR
    G["Gallery<br/>50+ Components"] --- I["Inputs (8)"]
    G --- Di["Display (7)"]
    G --- N["Navigation (4)"]
    G --- Da["Data (4)"]
    G --- O["Overlay (3)"]
    G --- Co["Composite (7)"]
    G --- An["Animated (5)"]
    G --- RI["Rich Inputs (5)"]
    G --- L["Layout (4)"]
    G --- F["Feedback (3)"]

    I --- I1["TextInput, TextArea<br/>Checkbox, RadioGroup<br/>Select, Toggle<br/>Slider, ColorPicker"]
    Di --- Di1["Avatar, Badge<br/>ProgressBar, Tooltip<br/>Tag, Skeleton<br/>EmptyState"]
    N --- N1["Tabs, Accordion<br/>Breadcrumb, TreeView"]
    Da --- Da1["DataTable, Calendar<br/>Timeline, Chart"]
    O --- O1["Toast, Modal<br/>CommandPalette"]
    Co --- Co1["KanbanBoard<br/>SearchableSelect<br/>DateRangePicker<br/>FormWizard<br/>MarkdownPreview<br/>SpreadsheetGrid<br/>DragSortList"]
    An --- An1["Stopwatch, Countdown<br/>Typewriter, Carousel<br/>AnimatedCounter"]
    RI --- RI1["StarRating, PinInput<br/>PasswordStrength<br/>TagAutocomplete<br/>InlineEdit"]
    L --- L1["Stepper, SplitPane<br/>VirtualList<br/>MasonryGrid"]
    F --- F1["ConfirmButton<br/>CopyToClipboard<br/>UndoSnackbar"]

#Application Architecture

graph TD
    subgraph Browser
        HTML["index.html<br/>#app mount point"]
        JS["frontend.js<br/>(compiled MoonBit)"]
    end

    subgraph "Rabbita MVU Loop"
        Model["Model<br/>section + component index<br/>+ 50 sub-states"]
        Update["Model::update(msg)<br/>returns (Model, Cmd)"]
        View["Model::view(dispatch)<br/>returns Html"]
    end

    subgraph "View Layer"
        Sidebar["Sidebar<br/>10 collapsible sections<br/>component list per section"]
        Content["Content Area<br/>active component demo<br/>rendered by view_*.mbt"]
        Overlays["Overlay Layer<br/>Toast stack<br/>Modal dialog<br/>Command palette"]
    end

    HTML --> JS
    JS --> Model
    Model --> View
    View --> Sidebar
    View --> Content
    View --> Overlays

    Sidebar -->|"ChangeSection(s)<br/>ChangeComponent(i)"| Update
    Content -->|"component-specific Msg"| Update
    Overlays -->|"ModalClose, DismissToast,<br/>CommandPaletteToggle"| Update
    Update --> Model