# Fakemui

A Material-UI inspired component library for QML and React, providing 100+ components for building modern user interfaces.

## Overview

Fakemui (Fakenham) is a comprehensive UI component library that implements Material Design principles in both QML and React/JavaScript. It provides a consistent, customizable, and accessible component system for rapid application development.

## Quick Start

### QML Usage

```qml
import Fakemui 1.0

CButton {
    text: "Click Me"
    variant: "contained"
    color: "primary"
    onClicked: console.log("Button clicked!")
}
```

### Component Count

- **104+ QML Components** in `qml-components/`
- **24+ File Categories** organized by function
- **Consistent API** following Material-UI patterns

## Project Structure

### 📁 Root Directory

Application-specific files and global configuration:

```
fakemui/
├── index.qml                 # QML module index
├── qmldir                    # Module definition
├── LICENSE                   # MIT License
├── README.md                 # This file
├── .gitignore               # Git ignore rules
├── .gitattributes           # Git attributes
├── core/                     # Core application files
│   └── App.qml              # Main application entry point
├── theming/                  # Theme system singletons
│   ├── Theme.qml            # Global theme configuration
│   ├── StyleVariables.qml   # Design tokens and variables
│   ├── StyleMixins.qml      # Reusable style patterns
│   └── Responsive.qml       # Responsive breakpoints
└── widgets/                  # Application widgets
    ├── AjaxQueueWidget.qml  # Ajax request queue manager
    ├── DetailPane.qml       # Detail view panel
    ├── LanguageSelector.qml # Language switcher
    ├── NerdPanel.qml        # Developer tools panel
    ├── PatchDialog.qml      # Patch management dialog
    ├── SendPromptDialog.qml # Prompt input dialog
    ├── TaskListItem.qml     # Task list item component
    └── ThemeSelector.qml    # Theme switcher
```

### 📁 QML Components (`qml-components/`)

Material-UI style component library with **104+ components** organized by category:

#### Core Components

**atoms/** (Basic Building Blocks)
- CPanel, CText, CTitle, CCaption
- CCodeBlock, CMarkdown, CSyntaxHighlight
- CHero, CFeature, CHighlight

**core/** (Fundamental UI)
- CButton, CIconButton, CFab, CButtonGroup
- CCard, CCardContent, CCardHeader, CCardActions
- CIcon, CImage, CToolbar, CChip

#### Form & Input

**form/** (Form Controls)
- CTextField, CTextArea, CPasswordField
- CCheckbox, CRadio, CSwitch, CSlider
- CSelect, CAutocomplete
- CFormControl, CFormLabel, CFormHelperText

#### Layout & Structure

**layout/** (Layout Components)
- CGrid, CBox, CContainer, CStack
- FlexRow, FlexCol
- CSpacer, CDivider
- CHidden (responsive visibility)

#### Data Display

**data-display/**
- CTable, CTableRow, CTableCell, CTableHead
- CList, CListItem, CListItemText
- CAvatar, CAvatarGroup
- CBadge, CChip, CTooltip
- CTypography

#### Navigation

**navigation/**
- CTabs, CTab, CTabPanel
- CMenu, CMenuItem
- CBreadcrumbs
- CSidebar, CBottomNavigation
- CStepper, CStep, CStepLabel
- CLink, CPagination

#### Feedback & Interaction

**feedback/**
- CAlert, CAlertTitle
- CDialog, CDialogTitle, CDialogContent, CDialogActions
- CSnackbar
- CProgress (Linear & Circular)
- CBackdrop, CSkeleton
- CRating

#### Surfaces

**surfaces/**
- CAppBar, CToolbar
- CDrawer
- CPaper, CCard
- CAccordion, CAccordionSummary, CAccordionDetails

#### Lab (Experimental)

**lab/**
- CDataGrid
- CDatePicker, CTimePicker, CCalendar
- CTimeline, CTimelineItem
- CAutocomplete, CTreeView
- CSpeedDial, CToggleButtonGroup

#### Theming & Utilities

**theming/**
- CThemeProvider
- CStyled

**utils/**
- CModal, CPopover, CPopper
- CCssBaseline
- CPortal, CTransition
- CClickAwayListener
- CNoSsr

### 📁 React/Python Components (`fakemui/`)

JavaScript and Python component implementations organized by category:

```
fakemui/
├── atoms/              # Basic components
├── data-display/       # Data visualization
├── feedback/           # User feedback
├── inputs/             # Input controls
├── lab/                # Experimental
├── layout/             # Layout system
├── navigation/         # Navigation
├── surfaces/           # Container surfaces
├── theming/            # Theme system
├── utils/              # Utilities
└── x/                  # Advanced/Extended
```

### 📁 Additional Directories

**components/** - Application-specific QML components
**contexts/** - QML context providers (state management)
**styles/** - SCSS stylesheets
- `atoms/` - Atomic style definitions
- `global/` - Global styles
- `mixins/` - SCSS mixins

## Component API

All components follow Material-UI naming and API conventions:

### Common Props

```qml
// Variant system
variant: "text" | "outlined" | "contained"

// Color system
color: "primary" | "secondary" | "error" | "warning" | "info" | "success"

// Size system
size: "small" | "medium" | "large"

// State props
disabled: bool
loading: bool
```

### Theme Integration

Components automatically use theme variables:

```qml
CButton {
    // Uses theme.palette.primary.main
    color: "primary"

    // Uses theme.spacing() system
    padding: theme.spacing(2)

    // Uses theme.typography
    typography: "button"
}
```

## File Organization

- **128 QML files** total
- **Modular structure** - each component in its own file
- **Category-based** organization for easy discovery
- **Consistent naming** - C prefix for all components (e.g., CButton, CCard)

## Module Definition

The `qmldir` file defines the Fakemui QML module, making all components available via:

```qml
import Fakemui 1.0
```

## Development

### Adding Components

1. Create component in appropriate `qml-components/` category
2. Follow C prefix naming convention
3. Update `qmldir` if creating a new singleton
4. Add to category documentation

### Style Guidelines

- Use theme variables for colors, spacing, typography
- Support all standard Material-UI props (variant, color, size)
- Implement accessibility features (ARIA, keyboard navigation)
- Follow responsive design patterns

## License

MIT License - see [LICENSE](LICENSE) file for details.

## Related Projects

Part of the MetaBuilder ecosystem - a comprehensive application building platform.