elaraai/skills/east-ui

East UI

UI component definitions for the East language. Components return data structures describing UI layouts rather than rendering directly, enabling portability across different rendering environments.

Quick Start

import { East, ArrayType } from "@elaraai/east";
import { Stack, Text, Button, UIComponentType } from "@elaraai/east-ui";

// Define a UI component
const MyComponent = East.function(
    [],
    UIComponentType,
    $ => {
        return Stack.Root([
            Text.Root("Hello, World!", { fontSize: "xl", fontWeight: "bold" }),
            Button.Root("Click Me", { variant: "solid", colorPalette: "blue" }),
        ], { gap: "4", direction: "column" });
    }
);

// Convert to IR for serialization or rendering
const ir = MyComponent.toIR();

Decision Tree: Which Component to Use

Task -> What do you need?
    |
    +-- Layout (containers)
    |   +-- Box         -> Generic container with flexbox styling
    |   +-- Stack       -> Vertical or horizontal stack (.Root, .HStack, .VStack)
    |   +-- Grid        -> CSS Grid layout (.Root, .Item)
    |   +-- Splitter    -> Resizable split panels
    |   +-- Separator   -> Visual divider
    |
    +-- Typography
    |   +-- Text        -> Basic text display
    |   +-- Code        -> Inline code
    |   +-- Heading     -> Section headings
    |   +-- Link        -> Hyperlinks
    |   +-- List        -> Ordered/unordered lists
    |   +-- CodeBlock   -> Multi-line code blocks
    |
    +-- Buttons
    |   +-- Button      -> Standard button with variants
    |   +-- IconButton  -> Icon-only button
    |
    +-- Forms
    |   +-- Input       -> Text, Integer, Float, DateTime inputs
    |   +-- Select      -> Dropdown selection (.Root, .Item)
    |   +-- Checkbox    -> Boolean checkbox
    |   +-- Switch      -> Toggle switch
    |   +-- Slider      -> Range slider
    |   +-- Textarea    -> Multi-line text
    |   +-- TagsInput   -> Tag/chip input
    |   +-- FileUpload  -> File upload
    |   +-- Field       -> Form field wrapper with label
    |
    +-- Collections
    |   +-- Table       -> Data tables (.Root, .Row, .Cell)
    |   +-- DataList    -> Key-value list (.Root, .Item)
    |   +-- TreeView    -> Hierarchical tree
    |   +-- Gantt       -> Gantt chart timeline
    |
    +-- Charts
    |   +-- Chart.Area, Chart.Bar, Chart.Line, Chart.Pie
    |   +-- Chart.Radar, Chart.Scatter
    |   +-- Chart.BarList, Chart.BarSegment
    |   +-- Sparkline   -> Inline mini charts
    |
    +-- Display
    |   +-- Badge       -> Status indicators
    |   +-- Tag         -> Labels/tags
    |   +-- Avatar      -> User avatars
    |   +-- Stat        -> Statistics display
    |   +-- Icon        -> Icons
    |
    +-- Feedback
    |   +-- Alert       -> Alert messages
    |   +-- Progress    -> Progress indicators
    |
    +-- Disclosure
    |   +-- Accordion   -> Collapsible sections (.Root, .Item)
    |   +-- Tabs        -> Tabbed content
    |   +-- Carousel    -> Image/content carousel
    |
    +-- Overlays
    |   +-- Dialog      -> Modal dialogs
    |   +-- Drawer      -> Side drawers
    |   +-- Popover     -> Popovers
    |   +-- Tooltip     -> Tooltips
    |   +-- Menu        -> Context menus
    |   +-- HoverCard   -> Hover cards
    |
    +-- Container
        +-- Card        -> Content card with header/body

Component Pattern

All components follow a consistent namespace pattern:

import { Badge, Stack, Button } from "@elaraai/east-ui";

// Create component using .Root()
const badge = Badge.Root("New", { variant: "solid", colorPalette: "green" });

// Compound components have sub-factories
const stack = Stack.Root([
    Text.Root("Item 1"),
    Text.Root("Item 2"),
], { gap: "4" });

// Access East types via .Types
const badgeType = Badge.Types.Badge;
const styleType = Badge.Types.Style;

Styling

Components accept style options with Chakra UI tokens:

Button.Root("Click", {
    variant: "solid",        // solid, outline, subtle, ghost
    colorPalette: "blue",    // gray, red, orange, yellow, green, teal, blue, purple, pink
    size: "md",              // xs, sm, md, lg
});

Text.Root("Hello", {
    fontSize: "xl",
    fontWeight: "bold",      // normal, medium, semibold, bold
    color: "gray.600",
});

Stack.Root([...], {
    gap: "4",                // Chakra spacing tokens
    direction: "row",        // row, column
    align: "center",         // flex alignment
});