mirror of
https://github.com/johndoe6345789/metabuilder.git
synced 2026-04-24 13:54:57 +00:00
JohnDoe6345789
59714ca814
- Introduced `LanguageSelector.qml` for selecting application languages with a user-friendly interface. - Created `NerdPanel.qml` to display API logs, session information, and keyboard shortcuts in a dedicated panel. - Implemented `PatchDialog.qml` for viewing and managing Git patches, including copy and save functionalities. - Developed `SendPromptDialog.qml` for sending prompts to Codex, featuring environment selection and input validation. - Added `TaskListItem.qml` to represent individual tasks with detailed information and PR indicators. - Introduced `ThemeSelector.qml` for selecting application themes with visual indicators.
257 lines
6.4 KiB
Markdown
257 lines
6.4 KiB
Markdown
# 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.
|