Initial commit
This commit is contained in:
Zhongwei Li
@@ -0,0 +1,715 @@
|
||||
# Screenshot Import Complete Examples
|
||||
|
||||
This document contains complete end-to-end examples of screenshot-to-uxscii conversion, showing input data, generated files, and expected outputs.
|
||||
|
||||
## Example 1: Simple Button Component
|
||||
|
||||
### Input: Vision Analysis Data
|
||||
|
||||
```json
|
||||
{
|
||||
"id": "submit-button",
|
||||
"type": "button",
|
||||
"category": "atomic",
|
||||
"visualProperties": {
|
||||
"width": 20,
|
||||
"height": 3,
|
||||
"borderStyle": "rounded",
|
||||
"textContent": "Submit"
|
||||
},
|
||||
"states": ["default", "hover", "focus", "disabled"],
|
||||
"accessibility": {
|
||||
"role": "button",
|
||||
"label": "Submit form"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Output: submit-button.uxm
|
||||
|
||||
```json
|
||||
{
|
||||
"id": "submit-button",
|
||||
"type": "button",
|
||||
"version": "1.0.0",
|
||||
"metadata": {
|
||||
"name": "Submit Button",
|
||||
"description": "An interactive button component for user actions. Submit form",
|
||||
"author": "Fluxwing Screenshot Import",
|
||||
"created": "2025-10-13T12:00:00Z",
|
||||
"modified": "2025-10-13T12:00:00Z",
|
||||
"tags": ["button", "imported", "screenshot-generated", "utility", "interactive"],
|
||||
"category": "utility"
|
||||
},
|
||||
"props": {
|
||||
"text": "Submit",
|
||||
"variant": "secondary",
|
||||
"size": "small"
|
||||
},
|
||||
"behavior": {
|
||||
"states": [
|
||||
{
|
||||
"name": "default",
|
||||
"properties": {
|
||||
"border": "rounded",
|
||||
"background": "filled",
|
||||
"textColor": "default"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "hover",
|
||||
"properties": {
|
||||
"border": "heavy",
|
||||
"background": "filled",
|
||||
"textColor": "default"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "focus",
|
||||
"properties": {
|
||||
"border": "heavy",
|
||||
"background": "filled",
|
||||
"textColor": "default"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "disabled",
|
||||
"properties": {
|
||||
"border": "dashed",
|
||||
"background": "filled",
|
||||
"textColor": "default",
|
||||
"opacity": 0.5,
|
||||
"cursor": "not-allowed"
|
||||
}
|
||||
}
|
||||
],
|
||||
"interactions": ["click", "keyboard"],
|
||||
"accessibility": {
|
||||
"role": "button",
|
||||
"focusable": true,
|
||||
"keyboardSupport": ["Enter", "Space"],
|
||||
"ariaLabel": "Submit form"
|
||||
}
|
||||
},
|
||||
"layout": {
|
||||
"display": "inline-block",
|
||||
"positioning": "static",
|
||||
"spacing": {
|
||||
"padding": { "x": 2, "y": 1 },
|
||||
"margin": { "x": 0, "y": 0 }
|
||||
},
|
||||
"sizing": {
|
||||
"minWidth": 20,
|
||||
"height": 3
|
||||
}
|
||||
},
|
||||
"ascii": {
|
||||
"templateFile": "submit-button.md",
|
||||
"width": 20,
|
||||
"height": 3,
|
||||
"variables": [
|
||||
{
|
||||
"name": "text",
|
||||
"type": "string",
|
||||
"required": true,
|
||||
"default": "Submit",
|
||||
"description": "button label text"
|
||||
},
|
||||
{
|
||||
"name": "variant",
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"default": "primary",
|
||||
"description": "Button style variant (primary, secondary, danger)"
|
||||
},
|
||||
{
|
||||
"name": "size",
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"default": "medium",
|
||||
"description": "Component size (small, medium, large)"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Output: submit-button.md
|
||||
|
||||
```markdown
|
||||
# Submit Button
|
||||
|
||||
An interactive button component for user actions. Submit form
|
||||
|
||||
## Default State
|
||||
|
||||
```
|
||||
╭──────────────────╮
|
||||
│▓▓▓▓▓▓Submit▓▓▓▓▓▓│
|
||||
╰──────────────────╯
|
||||
```
|
||||
|
||||
## Hover State
|
||||
|
||||
```
|
||||
┏━━━━━━━━━━━━━━━━━━┓
|
||||
┃████████Submit████┃
|
||||
┗━━━━━━━━━━━━━━━━━━┛
|
||||
```
|
||||
|
||||
## Focus State
|
||||
|
||||
```
|
||||
┏━━━━━━━━━━━━━━━━━━┓
|
||||
┃▓▓▓▓▓Submit ✨▓▓▓▓┃
|
||||
┗━━━━━━━━━━━━━━━━━━┛
|
||||
```
|
||||
|
||||
## Disabled State
|
||||
|
||||
```
|
||||
╭ ─ ─ ─ ─ ─ ─ ─ ─ ╮
|
||||
│ Submit │
|
||||
╰ ─ ─ ─ ─ ─ ─ ─ ─ ╯
|
||||
```
|
||||
|
||||
## Variables
|
||||
|
||||
- `text` (string, required): button label text
|
||||
- Default: "Submit"
|
||||
- Example: "Submit Form"
|
||||
|
||||
- `variant` (string, optional): Button style variant (primary, secondary, danger)
|
||||
- Default: "primary"
|
||||
|
||||
- `size` (string, optional): Component size (small, medium, large)
|
||||
- Default: "medium"
|
||||
|
||||
## Accessibility
|
||||
|
||||
- **Role**: button
|
||||
- **Focusable**: Yes
|
||||
- **Keyboard Support**: Enter, Space
|
||||
- **ARIA Label**: Submit form
|
||||
|
||||
## Usage Examples
|
||||
|
||||
```
|
||||
╭──────────────────╮
|
||||
│▓▓▓Submit Form▓▓▓▓│
|
||||
╰──────────────────╯
|
||||
```
|
||||
|
||||
---
|
||||
*Generated by Fluxwing Screenshot Import*
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Example 2: Email Input Component
|
||||
|
||||
### Input: Vision Analysis Data
|
||||
|
||||
```json
|
||||
{
|
||||
"id": "email-input",
|
||||
"type": "input",
|
||||
"category": "atomic",
|
||||
"visualProperties": {
|
||||
"width": 40,
|
||||
"height": 3,
|
||||
"borderStyle": "light",
|
||||
"textContent": "Email",
|
||||
"placeholder": "Enter your email"
|
||||
},
|
||||
"states": ["default", "focus", "error", "disabled"],
|
||||
"accessibility": {
|
||||
"role": "textbox",
|
||||
"label": "Email address"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Output: email-input.uxm (abbreviated)
|
||||
|
||||
```json
|
||||
{
|
||||
"id": "email-input",
|
||||
"type": "input",
|
||||
"version": "1.0.0",
|
||||
"metadata": {
|
||||
"name": "Email Input",
|
||||
"description": "A text input field for user data entry. Email address",
|
||||
"category": "input"
|
||||
},
|
||||
"props": {
|
||||
"text": "Email",
|
||||
"placeholder": "Enter your email",
|
||||
"type": "email",
|
||||
"size": "large",
|
||||
"maxLength": 32
|
||||
},
|
||||
"ascii": {
|
||||
"templateFile": "email-input.md",
|
||||
"width": 40,
|
||||
"height": 3,
|
||||
"variables": [
|
||||
{
|
||||
"name": "text",
|
||||
"type": "string",
|
||||
"required": true,
|
||||
"default": "Email",
|
||||
"description": "input label text"
|
||||
},
|
||||
{
|
||||
"name": "placeholder",
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"default": "Enter your email",
|
||||
"description": "Placeholder text when empty"
|
||||
},
|
||||
{
|
||||
"name": "value",
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"default": "",
|
||||
"description": "Current value"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Output: email-input.md
|
||||
|
||||
```markdown
|
||||
# Email Input
|
||||
|
||||
A text input field for user data entry. Email address
|
||||
|
||||
## Default State
|
||||
|
||||
```
|
||||
┌──────────────────────────────────────┐
|
||||
│ Email │
|
||||
│ Enter your email │
|
||||
└──────────────────────────────────────┘
|
||||
```
|
||||
|
||||
## Focus State
|
||||
|
||||
```
|
||||
┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
|
||||
┃ Email │┃
|
||||
┃ john.doe@example.com ┃
|
||||
┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
|
||||
```
|
||||
|
||||
## Error State
|
||||
|
||||
```
|
||||
┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
|
||||
┃ ⚠️ Email ┃
|
||||
┃ invalid@email ┃
|
||||
┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
|
||||
❌ Please enter valid email address
|
||||
```
|
||||
|
||||
## Disabled State
|
||||
|
||||
```
|
||||
┌ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┐
|
||||
│ Email │
|
||||
│ ────────────────────── │
|
||||
└ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┘
|
||||
```
|
||||
|
||||
## Variables
|
||||
|
||||
- `text` (string, required): input label text
|
||||
- Default: "Email"
|
||||
|
||||
- `placeholder` (string, optional): Placeholder text when empty
|
||||
- Default: "Enter your email"
|
||||
|
||||
- `value` (string, optional): Current value
|
||||
- Default: ""
|
||||
|
||||
## Accessibility
|
||||
|
||||
- **Role**: textbox
|
||||
- **Focusable**: Yes
|
||||
- **Keyboard Support**: Tab, Escape
|
||||
- **ARIA Label**: Email address
|
||||
|
||||
---
|
||||
*Generated by Fluxwing Screenshot Import*
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Example 3: Multi-Component Login Form
|
||||
|
||||
### Input: Vision Analysis Data
|
||||
|
||||
```json
|
||||
{
|
||||
"screen": {
|
||||
"type": "login-form",
|
||||
"name": "Login Screen",
|
||||
"description": "User authentication screen with email/password inputs",
|
||||
"layout": "vertical-center"
|
||||
},
|
||||
"components": [
|
||||
{
|
||||
"id": "email-input",
|
||||
"type": "input",
|
||||
"category": "atomic",
|
||||
"visualProperties": { "width": 40, "height": 3, "borderStyle": "light", "textContent": "Email", "placeholder": "Enter your email" },
|
||||
"states": ["default", "focus", "error"],
|
||||
"accessibility": { "role": "textbox", "label": "Email address" }
|
||||
},
|
||||
{
|
||||
"id": "password-input",
|
||||
"type": "input",
|
||||
"category": "atomic",
|
||||
"visualProperties": { "width": 40, "height": 3, "borderStyle": "light", "textContent": "Password", "placeholder": "Enter your password" },
|
||||
"states": ["default", "focus", "error"],
|
||||
"accessibility": { "role": "textbox", "label": "Password" }
|
||||
},
|
||||
{
|
||||
"id": "submit-button",
|
||||
"type": "button",
|
||||
"category": "atomic",
|
||||
"visualProperties": { "width": 20, "height": 3, "borderStyle": "rounded", "textContent": "Sign In" },
|
||||
"states": ["default", "hover", "disabled"],
|
||||
"accessibility": { "role": "button", "label": "Sign in to account" }
|
||||
},
|
||||
{
|
||||
"id": "login-form",
|
||||
"type": "form",
|
||||
"category": "composite",
|
||||
"visualProperties": { "width": 50, "height": 20, "borderStyle": "rounded", "textContent": "Sign In" },
|
||||
"states": ["default"],
|
||||
"accessibility": { "role": "form", "label": "Login form" }
|
||||
}
|
||||
],
|
||||
"composition": {
|
||||
"atomicComponents": ["email-input", "password-input", "submit-button"],
|
||||
"compositeComponents": ["login-form"],
|
||||
"screenComponents": ["login-screen"]
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Files Generated
|
||||
|
||||
1. **Atomic Components:**
|
||||
- `./fluxwing/components/email-input.uxm`
|
||||
- `./fluxwing/components/email-input.md`
|
||||
- `./fluxwing/components/password-input.uxm`
|
||||
- `./fluxwing/components/password-input.md`
|
||||
- `./fluxwing/components/submit-button.uxm`
|
||||
- `./fluxwing/components/submit-button.md`
|
||||
|
||||
2. **Composite Component:**
|
||||
- `./fluxwing/components/login-form.uxm`
|
||||
- `./fluxwing/components/login-form.md`
|
||||
|
||||
3. **Screen:**
|
||||
- `./fluxwing/screens/login-screen.uxm`
|
||||
- `./fluxwing/screens/login-screen.md`
|
||||
- `./fluxwing/screens/login-screen.rendered.md`
|
||||
|
||||
### Output: login-form.uxm (composite)
|
||||
|
||||
```json
|
||||
{
|
||||
"id": "login-form",
|
||||
"type": "form",
|
||||
"version": "1.0.0",
|
||||
"metadata": {
|
||||
"name": "Login Form",
|
||||
"description": "A form container for collecting user input. Login form",
|
||||
"category": "utility"
|
||||
},
|
||||
"props": {
|
||||
"title": "Sign In",
|
||||
"components": [
|
||||
{ "id": "email-input", "slot": "field-1" },
|
||||
{ "id": "password-input", "slot": "field-2" },
|
||||
{ "id": "submit-button", "slot": "action" }
|
||||
]
|
||||
},
|
||||
"ascii": {
|
||||
"templateFile": "login-form.md",
|
||||
"width": 50,
|
||||
"height": 20,
|
||||
"variables": [
|
||||
{
|
||||
"name": "title",
|
||||
"type": "string",
|
||||
"required": true,
|
||||
"default": "Sign In",
|
||||
"description": "Form title"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Output: login-form.md (composite)
|
||||
|
||||
```markdown
|
||||
# Login Form
|
||||
|
||||
A form container for collecting user input. Login form
|
||||
|
||||
## Default State
|
||||
|
||||
```
|
||||
╭────────────────────────────────────────────────╮
|
||||
│ Sign In │
|
||||
├────────────────────────────────────────────────┤
|
||||
│ │
|
||||
│ {{component:email-input}} │
|
||||
│ │
|
||||
│ {{component:password-input}} │
|
||||
│ │
|
||||
│ {{component:submit-button}} │
|
||||
│ │
|
||||
╰────────────────────────────────────────────────╯
|
||||
```
|
||||
|
||||
## Variables
|
||||
|
||||
- `title` (string, required): Form title
|
||||
- Default: "Sign In"
|
||||
|
||||
## Accessibility
|
||||
|
||||
- **Role**: form
|
||||
- **Focusable**: No
|
||||
- **ARIA Label**: Login form
|
||||
|
||||
---
|
||||
*Generated by Fluxwing Screenshot Import*
|
||||
```
|
||||
|
||||
### Output: login-screen.rendered.md
|
||||
|
||||
```markdown
|
||||
# Login Screen
|
||||
|
||||
User authentication screen with email/password inputs
|
||||
|
||||
## Rendered Example
|
||||
|
||||
```
|
||||
╭────────────────────────────────────────────────╮
|
||||
│ Sign In │
|
||||
├────────────────────────────────────────────────┤
|
||||
│ │
|
||||
│ ┌──────────────────────────────────────┐ │
|
||||
│ │ Email │ │
|
||||
│ │ john.doe@example.com │ │
|
||||
│ └──────────────────────────────────────┘ │
|
||||
│ │
|
||||
│ ┌──────────────────────────────────────┐ │
|
||||
│ │ Password │ │
|
||||
│ │ •••••••• │ │
|
||||
│ └──────────────────────────────────────┘ │
|
||||
│ │
|
||||
│ ╭──────────────────╮ │
|
||||
│ │▓▓▓▓Sign In▓▓▓▓▓▓▓│ │
|
||||
│ ╰──────────────────╯ │
|
||||
│ │
|
||||
╰────────────────────────────────────────────────╯
|
||||
```
|
||||
|
||||
**Example Data:**
|
||||
- Email: john.doe@example.com
|
||||
- Password: ••••••••
|
||||
- Button: Sign In
|
||||
|
||||
**Actions:**
|
||||
- Submit form → authenticate user
|
||||
- Focus management → email → password → button
|
||||
|
||||
## Components Used
|
||||
|
||||
- `email-input` - Email Input (input)
|
||||
- `password-input` - Password Input (input)
|
||||
- `submit-button` - Submit Button (button)
|
||||
- `login-form` - Login Form (form)
|
||||
|
||||
---
|
||||
*Generated by Fluxwing Screenshot Import*
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Example 4: Checkbox Component
|
||||
|
||||
### Input: Vision Analysis Data
|
||||
|
||||
```json
|
||||
{
|
||||
"id": "remember-me-checkbox",
|
||||
"type": "checkbox",
|
||||
"category": "atomic",
|
||||
"visualProperties": {
|
||||
"width": 20,
|
||||
"height": 1,
|
||||
"borderStyle": "none",
|
||||
"textContent": "Remember me"
|
||||
},
|
||||
"states": ["default", "checked", "disabled"],
|
||||
"accessibility": {
|
||||
"role": "checkbox",
|
||||
"label": "Remember login credentials"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Output: remember-me-checkbox.md
|
||||
|
||||
```markdown
|
||||
# Remember Me Checkbox
|
||||
|
||||
A checkbox input for boolean selection. Remember login credentials
|
||||
|
||||
## Default State
|
||||
|
||||
```
|
||||
[ ] Remember me
|
||||
```
|
||||
|
||||
## Checked State
|
||||
|
||||
```
|
||||
[✓] Remember me
|
||||
```
|
||||
|
||||
## Disabled State
|
||||
|
||||
```
|
||||
[─] Remember me
|
||||
```
|
||||
|
||||
## Variables
|
||||
|
||||
- `text` (string, required): checkbox label text
|
||||
- Default: "Remember me"
|
||||
|
||||
## Accessibility
|
||||
|
||||
- **Role**: checkbox
|
||||
- **Focusable**: Yes
|
||||
- **Keyboard Support**: Space
|
||||
- **ARIA Label**: Remember login credentials
|
||||
|
||||
---
|
||||
*Generated by Fluxwing Screenshot Import*
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Example 5: Badge Component
|
||||
|
||||
### Input: Vision Analysis Data
|
||||
|
||||
```json
|
||||
{
|
||||
"id": "new-badge",
|
||||
"type": "badge",
|
||||
"category": "atomic",
|
||||
"visualProperties": {
|
||||
"width": 8,
|
||||
"height": 1,
|
||||
"borderStyle": "none",
|
||||
"textContent": "New"
|
||||
},
|
||||
"states": ["default"],
|
||||
"accessibility": {
|
||||
"role": "status",
|
||||
"label": "New item indicator"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Output: new-badge.md
|
||||
|
||||
```markdown
|
||||
# New Badge
|
||||
|
||||
A small badge component for labels or counts. New item indicator
|
||||
|
||||
## Default State
|
||||
|
||||
```
|
||||
▓ New ▓
|
||||
```
|
||||
|
||||
## Variables
|
||||
|
||||
- `text` (string, required): badge label text
|
||||
- Default: "New"
|
||||
|
||||
## Accessibility
|
||||
|
||||
- **Role**: status
|
||||
- **Focusable**: No
|
||||
- **ARIA Label**: New item indicator
|
||||
|
||||
---
|
||||
*Generated by Fluxwing Screenshot Import*
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Usage Patterns
|
||||
|
||||
### Pattern 1: Generate Single Atomic Component
|
||||
|
||||
```typescript
|
||||
const timestamp = new Date().toISOString();
|
||||
const uxmData = generateAtomicUXM(visionComponentData, timestamp);
|
||||
const mdContent = generateAtomicMD(visionComponentData, uxmData);
|
||||
await saveAtomicComponent(componentId, uxmData, mdContent);
|
||||
```
|
||||
|
||||
### Pattern 2: Generate All Components from Screen
|
||||
|
||||
```typescript
|
||||
// 1. Generate atomics first
|
||||
for (const atomicId of composition.atomicComponents) {
|
||||
const componentData = components.find(c => c.id === atomicId);
|
||||
await generateAtomicComponent(componentData);
|
||||
}
|
||||
|
||||
// 2. Generate composites (can reference atomics)
|
||||
for (const compositeId of composition.compositeComponents) {
|
||||
const componentData = components.find(c => c.id === compositeId);
|
||||
await generateCompositeComponent(componentData);
|
||||
}
|
||||
|
||||
// 3. Generate screen (references everything)
|
||||
await generateScreen(screenData, composition);
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Reference
|
||||
|
||||
These examples demonstrate the complete screenshot-to-uxscii workflow:
|
||||
|
||||
1. **Vision analysis** produces structured JSON
|
||||
2. **Helper functions** (see screenshot-import-helpers.md) transform data
|
||||
3. **ASCII generation** (see screenshot-import-ascii.md) creates visual representations
|
||||
4. **File generation** produces valid .uxm + .md pairs
|
||||
5. **Validation** ensures quality and schema compliance
|
||||
|
||||
All generated files conform to:
|
||||
- `fluxwing/data/schema/uxm-component.schema.json` - JSON Schema
|
||||
- Quality standards documented in the schema
|
||||
Reference in New Issue
Block a user