Skip to content

Commit 59dda83

Browse files
Copilothuangyiirene
Copilot
and
huangyiirene
committed
Add tests and visual guide for specialized designers
Co-authored-by: huangyiirene <7665279+huangyiirene@users.noreply.github.com>
1 parent 500933e commit 59dda83

File tree

2 files changed

+317
-0
lines changed

2 files changed

+317
-0
lines changed

‎packages/designer/DESIGNER_MODES_VISUAL_GUIDE.md‎

Lines changed: 290 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,290 @@
1+
# Visual Guide: Designer Modes Comparison
2+
3+
## Overview
4+
5+
Object UI Designer now offers three specialized modes, each optimized for specific design tasks. This guide provides a visual comparison to help you choose the right mode for your needs.
6+
7+
---
8+
9+
## 🎨 Designer Mode Comparison
10+
11+
### 1. Form Designer (`mode="form"`)
12+
13+
**Purpose**: Specialized for building forms with validation and field management
14+
15+
**Visual Identity**:
16+
- Header: Emerald/Teal gradient background
17+
- Branding: `Form Designer` title
18+
- Color Scheme: Green accents for form-focused workflow
19+
20+
**Component Palette**:
21+
22+
```
23+
┌─────────────────────────────┐
24+
│ Form Designer │
25+
├─────────────────────────────┤
26+
│ Search: [ ] 🔍 │
27+
├─────────────────────────────┤
28+
│ FORM FIELDS │
29+
│ ┌──┐ ┌──┐ ┌──┐ ┌──┐ │
30+
│ │📝│ │📋│ │☑️│ │🔘│ │
31+
│ └──┘ └──┘ └──┘ └──┘ │
32+
│ input textarea checkbox │
33+
│ │
34+
│ ┌──┐ ┌──┐ ┌──┐ │
35+
│ │🔀│ │🔽│ │🏷️│ │
36+
│ └──┘ └──┘ └──┘ │
37+
│ switch select label │
38+
│ │
39+
│ FORM ACTIONS │
40+
│ ┌──┐ │
41+
│ │🔘│ │
42+
│ └──┘ │
43+
│ button │
44+
│ │
45+
│ FORM LAYOUT │
46+
│ ┌──┐ ┌──┐ ┌──┐ ┌──┐ │
47+
│ │📦│ │📇│ │⚡│ │➖│ │
48+
│ └──┘ └──┘ └──┘ └──┘ │
49+
│ card stack grid separator │
50+
└─────────────────────────────┘
51+
```
52+
53+
**Typical Use Cases**:
54+
- Contact forms
55+
- User registration
56+
- Data entry forms
57+
- Survey forms
58+
- Login/signup pages
59+
60+
**Component Count**: ~15 components
61+
62+
---
63+
64+
### 2. Layout Designer (`mode="layout"`)
65+
66+
**Purpose**: Specialized for designing page layouts and structures
67+
68+
**Visual Identity**:
69+
- Header: Blue/Indigo gradient background
70+
- Branding: `Page Layout Designer` title
71+
- Color Scheme: Blue accents for structural design
72+
73+
**Component Palette**:
74+
75+
```
76+
┌─────────────────────────────┐
77+
│ Page Layout Designer │
78+
├─────────────────────────────┤
79+
│ Search: [ ] 🔍 │
80+
├─────────────────────────────┤
81+
│ CONTAINERS │
82+
│ ┌──┐ ┌──┐ ┌──┐ │
83+
│ │📦│ │📇│ │⚡│ │
84+
│ └──┘ └──┘ └──┘ │
85+
│ div card grid │
86+
│ │
87+
│ LAYOUT │
88+
│ ┌──┐ ┌──┐ │
89+
│ │📚│ │➖│ │
90+
│ └──┘ └──┘ │
91+
│ stack separator │
92+
│ │
93+
│ NAVIGATION │
94+
│ ┌──┐ ┌──┐ ┌──┐ │
95+
│ │📑│ │🥖│ │☰│ │
96+
│ └──┘ └──┘ └──┘ │
97+
│ tabs breadcrumb menubar │
98+
│ │
99+
│ CONTENT │
100+
│ ┌──┐ ┌──┐ ┌──┐ ┌──┐ │
101+
│ │📝│ │🖼️│ │🔘│ │
102+
│ └──┘ └──┘ └──┘ │
103+
│ text image button │
104+
└─────────────────────────────┘
105+
```
106+
107+
**Typical Use Cases**:
108+
- Dashboard layouts
109+
- Landing pages
110+
- Admin panel structures
111+
- Multi-column layouts
112+
- Navigation hierarchies
113+
114+
**Component Count**: ~15 components
115+
116+
---
117+
118+
### 3. General Designer (`mode="general"` or default)
119+
120+
**Purpose**: Full-featured designer for any UI design task
121+
122+
**Visual Identity**:
123+
- Header: Purple/Pink gradient background
124+
- Branding: `General Designer` title
125+
- Color Scheme: Purple accents for versatility
126+
127+
**Component Palette**:
128+
129+
```
130+
┌─────────────────────────────┐
131+
│ General Designer │
132+
├─────────────────────────────┤
133+
│ Search: [ ] 🔍 │
134+
├─────────────────────────────┤
135+
│ LAYOUT │
136+
│ ┌──┐ ┌──┐ ┌──┐ ┌──┐ ┌──┐ │
137+
│ │📦│ │📇│ │📚│ │⚡│ │➖│ │
138+
│ └──┘ └──┘ └──┘ └──┘ └──┘ │
139+
│ │
140+
│ FORM │
141+
│ ┌──┐ ┌──┐ ┌──┐ ┌──┐ ┌──┐ │
142+
│ │📝│ │🔘│ │☑️│ │🔀│ │🔽│ │
143+
│ └──┘ └──┘ └──┘ └──┘ └──┘ │
144+
│ │
145+
│ DATA DISPLAY │
146+
│ ┌──┐ ┌──┐ ┌──┐ ┌──┐ ┌──┐ │
147+
│ │📄│ │🖼️│ │🏷️│ │👤│ │📊│ │
148+
│ └──┘ └──┘ └──┘ └──┘ └──┘ │
149+
│ │
150+
│ FEEDBACK │
151+
│ ┌──┐ ┌──┐ ┌──┐ ┌──┐ │
152+
│ │🔔│ │📊│ │💀│ │💬│ │
153+
│ └──┘ └──┘ └──┘ └──┘ │
154+
│ │
155+
│ OVERLAY │
156+
│ ┌──┐ ┌──┐ ┌──┐ ┌──┐ │
157+
│ │📱│ │🗃️│ │💭│ │📌│ │
158+
│ └──┘ └──┘ └──┘ └──┘ │
159+
│ │
160+
│ NAVIGATION │
161+
│ ┌──┐ ┌──┐ ┌──┐ ┌──┐ │
162+
│ │📑│ │🥖│ │📄│ │☰│ │
163+
│ └──┘ └──┘ └──┘ └──┘ │
164+
└─────────────────────────────┘
165+
```
166+
167+
**Typical Use Cases**:
168+
- Complex applications
169+
- Custom components
170+
- Prototyping
171+
- Full-featured UIs
172+
- When you need maximum flexibility
173+
174+
**Component Count**: 30+ components
175+
176+
---
177+
178+
## 🎯 Quick Comparison Table
179+
180+
| Feature | Form Designer | Layout Designer | General Designer |
181+
|---------|--------------|-----------------|------------------|
182+
| **Primary Use** | Forms | Page Layouts | Everything |
183+
| **Complexity** | 🟢 Low | 🟡 Medium | 🔴 High |
184+
| **Components** | 15 | 15 | 30+ |
185+
| **Learning Curve** | Easiest | Easy | Moderate |
186+
| **Specialization** | High | High | None |
187+
| **Flexibility** | Limited | Limited | Maximum |
188+
189+
---
190+
191+
## 💡 Choosing the Right Mode
192+
193+
### Use Form Designer When:
194+
- ✅ Building forms exclusively
195+
- ✅ You need validation-focused tools
196+
- ✅ Working on data entry interfaces
197+
- ✅ Team members are form specialists
198+
199+
### Use Layout Designer When:
200+
- ✅ Designing page structures
201+
- ✅ Creating navigation systems
202+
- ✅ Building dashboard layouts
203+
- ✅ Focusing on responsive grids
204+
205+
### Use General Designer When:
206+
- ✅ Need all component types
207+
- ✅ Building complex applications
208+
- ✅ Prototyping various UI patterns
209+
- ✅ Require maximum flexibility
210+
211+
---
212+
213+
## 🔄 Switching Between Modes
214+
215+
You can easily switch between modes in your code:
216+
217+
```tsx
218+
import { Designer } from '@object-ui/designer';
219+
import { useState } from 'react';
220+
221+
function App() {
222+
const [mode, setMode] = useState<'form' | 'layout' | 'general'>('general');
223+
224+
return (
225+
<div>
226+
{/* Mode selector */}
227+
<nav>
228+
<button onClick={() => setMode('form')}>Form</button>
229+
<button onClick={() => setMode('layout')}>Layout</button>
230+
<button onClick={() => setMode('general')}>General</button>
231+
</nav>
232+
233+
{/* Designer with selected mode */}
234+
<Designer mode={mode} />
235+
</div>
236+
);
237+
}
238+
```
239+
240+
---
241+
242+
## 📊 Component Distribution
243+
244+
```
245+
Form Designer Components (15):
246+
├── Form Fields (7): input, textarea, select, checkbox, switch, label, button
247+
├── Layout (4): div, card, stack, grid, separator
248+
└── Display (2): text, badge
249+
250+
Layout Designer Components (15):
251+
├── Containers (3): div, card, grid
252+
├── Layout (2): stack, separator
253+
├── Navigation (4): tabs, breadcrumb, menubar, pagination
254+
├── Content (3): text, image, button
255+
└── Display (3): table, badge, avatar
256+
257+
General Designer Components (30+):
258+
└── All categories: Layout, Form, Data Display, Feedback, Overlay, Navigation
259+
```
260+
261+
---
262+
263+
## 🎨 Visual Differentiation
264+
265+
Each designer mode has distinct visual branding to help users quickly identify which mode they're using:
266+
267+
| Mode | Header Color | Gradient | Icon Theme |
268+
|------|-------------|----------|------------|
269+
| Form | Emerald/Teal | `from-emerald-50 to-teal-50` | 🟢 Green |
270+
| Layout | Blue/Indigo | `from-blue-50 to-indigo-50` | 🔵 Blue |
271+
| General | Purple/Pink | `from-purple-50 to-pink-50` | 🟣 Purple |
272+
273+
---
274+
275+
## 🚀 Best Practices
276+
277+
1. **Start Specialized**: Begin with Form or Layout designer for focused work
278+
2. **Export and Upgrade**: Design in specialized mode, export schema, open in General if needed
279+
3. **Team Workflow**: Assign Form Designer to form specialists, Layout Designer to UI designers
280+
4. **Prototyping**: Use General Designer for initial exploration, then switch to specialized modes
281+
5. **Component Consistency**: Specialized modes encourage using appropriate components for the task
282+
283+
---
284+
285+
## 📚 Related Documentation
286+
287+
- [Specialized Designers Guide](./SPECIALIZED_DESIGNERS.md) - Detailed API documentation
288+
- [Main Designer README](./README.md) - General designer documentation
289+
- [Examples](../../examples/designer-modes/) - Interactive demo application
290+
- [Migration Guide](./SPECIALIZED_DESIGNERS.md#migration-guide) - Upgrading from previous versions

‎packages/designer/src/__tests__/specialized-designers.test.ts‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import { describe, it, expect } from 'vitest';
2+
import { FormDesigner } from '../components/FormDesigner';
3+
import { LayoutDesigner } from '../components/LayoutDesigner';
4+
import { GeneralDesigner } from '../components/GeneralDesigner';
5+
import { Designer } from '../components/Designer';
6+
7+
describe('Specialized Designers', () => {
8+
it('should export FormDesigner component', () => {
9+
expect(FormDesigner).toBeDefined();
10+
expect(typeof FormDesigner).toBe('function');
11+
});
12+
13+
it('should export LayoutDesigner component', () => {
14+
expect(LayoutDesigner).toBeDefined();
15+
expect(typeof LayoutDesigner).toBe('function');
16+
});
17+
18+
it('should export GeneralDesigner component', () => {
19+
expect(GeneralDesigner).toBeDefined();
20+
expect(typeof GeneralDesigner).toBe('function');
21+
});
22+
23+
it('should export unified Designer component', () => {
24+
expect(Designer).toBeDefined();
25+
expect(typeof Designer).toBe('function');
26+
});
27+
});

0 commit comments

Comments
 (0)