Smarty UI

A UI components framework for building DivKit widgets for Smarty, aligned with the Smartbank Figma design system.

Overview

Smarty UI provides a layered component architecture built on top of pydivkit:

• Tokens - Design system values (colors, typography, spacing)
• Primitives - Basic UI atoms (text, buttons, images, dividers)
• Composites - Reusable molecules (badges, input fields, status bubbles)
• Blocks - Complete UI patterns (cards, lists, widgets)

Installation

pip install -e .

Quick Start

import pydivkit as dk
from smart_ui import (
    # Layout helpers
    HStack, VStack,
    # Primitives
    title_1, text_1, primary_button, smarty_button,
    # Blocks
    transaction_success_widget, payment_status_widget,
    home_balance_widget,
    # Theme
    default_theme,
)

# Create a simple card
card = VStack(
    [
        title_1("Hello, Smarty!"),
        text_1("Welcome to the UI framework."),
        primary_button("Get Started", action_url="div-action://start"),
    ],
    gap=12,
    padding=16,
    background="#FFFFFF",
    corner_radius=12,
)

# Create a transaction status widget
widget = transaction_success_widget(
    amount="200 000",
    recipient="ALEKSANDR GURYANOV ** 2221",
    date_time="3 сентября 2023 18:27",
)

Components

Layout Helpers

# Horizontal stack (row)
HStack([item1, item2, item3], gap=8, align_v="center")

# Vertical stack (column)  
VStack([header, content, footer], gap=12, align_h="left", padding=16)

Primitives

Composites

Blocks

Theming

from smart_ui import default_theme, dark_theme, Theme, ColorTokens

# Use default Smartbank theme
widget = balance_widget(total_balance="1 000 000", theme=default_theme)

# Use dark theme
widget = balance_widget(total_balance="1 000 000", theme=dark_theme)

# Create custom theme
custom_theme = Theme(
    colors=ColorTokens(
        primary="#FF5722",
        background="#FAFAFA",
    )
)

Project Structure

src/smart_ui/
├── tokens/           # Design tokens
│   ├── colors.py     # Color palette
│   ├── typography.py # Font styles
│   └── spacing.py    # Spacing scale
├── primitives/       # Basic UI atoms
│   ├── text.py       # Text components
│   ├── button.py     # Button variants
│   ├── image.py      # Image components
│   └── smarty_button.py
├── composites/       # Reusable molecules
│   ├── status_bubble.py
│   ├── chat_bubble.py
│   └── ...
├── blocks/           # Complete UI patterns
│   ├── transaction_status_widget.py
│   ├── payment_status_widget.py
│   ├── home_balance_widget.py
│   └── ...
└── _helpers.py       # Layout utilities (HStack, VStack)

License

Internal use only.