Skip to content

Commit 882bd53

Browse files
huangyiirenehuangyiirene
authored
Merge pull request #69 from objectstack-ai/copilot/redesign-examples-json-spec
2 parents 2a0fec3 + b9464e8 commit 882bd53

File tree

16 files changed

+2806
-10
lines changed

16 files changed

+2806
-10
lines changed

‎README.md‎

Lines changed: 26 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -292,7 +292,31 @@ Object UI is perfect for:
292292

293293
## 🏗️ Examples
294294

295-
Check out complete example applications:
295+
### JSON Schema Examples (Recommended) 🚀
296+
297+
Explore ready-to-use JSON examples that showcase Object UI's capabilities:
298+
299+
```bash
300+
# Install CLI
301+
npm install -g @object-ui/cli
302+
303+
# Try different examples
304+
objectui serve examples/basic-form/app.json # Contact form
305+
objectui serve examples/dashboard/app.json # Analytics dashboard
306+
objectui serve examples/data-display/app.json # Data visualization
307+
objectui serve examples/landing-page/app.json # Marketing page
308+
```
309+
310+
**Available Examples:**
311+
- 📝 [**Basic Form**](./examples/basic-form) - Contact form with validation
312+
- 📊 [**Dashboard**](./examples/dashboard) - Analytics with metrics and feeds
313+
- 📋 [**Data Display**](./examples/data-display) - Lists, badges, progress bars
314+
- 🚀 [**Landing Page**](./examples/landing-page) - Full marketing page
315+
- 🎨 [**CLI Demo**](./examples/cli-demo) - Bilingual form demo
316+
317+
[**View All Examples →**](./examples)
318+
319+
### Full Application Examples
296320

297321
```bash
298322
# Clone the repository
@@ -302,12 +326,9 @@ cd objectui
302326
# Install dependencies
303327
pnpm install
304328

305-
# Run the playground
329+
# Run the interactive playground
306330
pnpm playground
307331

308-
# Run the visual designer demo
309-
pnpm designer
310-
311332
# Run the prototype example
312333
pnpm prototype
313334
```

‎docs/CLI_GUIDE.md‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -388,6 +388,62 @@ You can also define navigation in your main schema using button click handlers:
388388

389389
**Note:** Layout support with `app.json` and `_layout.json` is planned for a future release. Currently, all routing is handled at the page level.
390390

391+
## Running Example Projects
392+
393+
The Object UI repository includes ready-to-use examples that demonstrate various UI patterns and features. You can run them directly using the CLI:
394+
395+
### Available Examples
396+
397+
1. **Basic Form** - Contact form with validation
398+
```bash
399+
objectui serve examples/basic-form/app.json
400+
```
401+
402+
2. **Dashboard** - Analytics dashboard with metrics and activity feeds
403+
```bash
404+
objectui serve examples/dashboard/app.json
405+
```
406+
407+
3. **Data Display** - User profiles, task lists, progress bars, and badges
408+
```bash
409+
objectui serve examples/data-display/app.json
410+
```
411+
412+
4. **Landing Page** - Complete marketing page with hero section and CTAs
413+
```bash
414+
objectui serve examples/landing-page/app.json
415+
```
416+
417+
5. **CLI Demo** - Bilingual form demonstration
418+
```bash
419+
objectui serve examples/cli-demo/app.schema.json
420+
```
421+
422+
### Exploring Examples
423+
424+
Each example includes:
425+
- `app.json` - The JSON schema definition
426+
- `README.md` - Detailed documentation and customization guide
427+
- `.gitignore` - Git ignore configuration
428+
429+
To explore an example:
430+
431+
```bash
432+
# Clone the repository
433+
git clone https://github.com/objectql/objectui.git
434+
cd objectui/examples
435+
436+
# View available examples
437+
ls -la
438+
439+
# Run an example
440+
objectui serve basic-form/app.json
441+
```
442+
443+
Then open http://localhost:3000 in your browser and start editing the `app.json` file to see live updates!
444+
445+
For more details, see the [Examples README](https://github.com/objectql/objectui/tree/main/examples).
446+
391447
## FAQ
392448

393449
### 1. How to customize styles?

‎docs/guide/quick-start.md‎

Lines changed: 13 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -179,11 +179,19 @@ Now that you have the basics:
179179

180180
## Examples
181181

182-
Check out complete examples:
183-
184-
- [Form Example](https://github.com/objectql/objectui/tree/main/examples/forms)
185-
- [CRUD Example](https://github.com/objectql/objectui/tree/main/examples/crud)
186-
- [Dashboard Example](https://github.com/objectql/objectui/tree/main/examples/dashboard)
182+
Check out our JSON-based examples that you can run immediately:
183+
184+
- [Basic Form](https://github.com/objectql/objectui/tree/main/examples/basic-form) - Contact form with validation
185+
- [Dashboard](https://github.com/objectql/objectui/tree/main/examples/dashboard) - Analytics dashboard with metrics
186+
- [Data Display](https://github.com/objectql/objectui/tree/main/examples/data-display) - Lists, badges, and progress bars
187+
- [Landing Page](https://github.com/objectql/objectui/tree/main/examples/landing-page) - Complete marketing page
188+
- [All Examples](https://github.com/objectql/objectui/tree/main/examples) - View the full collection
189+
190+
Run any example with the CLI:
191+
```bash
192+
npm install -g @object-ui/cli
193+
objectui serve examples/basic-form/app.json
194+
```
187195

188196
## Need Help?
189197

‎examples/README.md‎

Lines changed: 237 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,237 @@
1+
# Object UI Examples
2+
3+
Welcome to the Object UI examples directory! This collection showcases the power of JSON-driven UI development with real-world examples.
4+
5+
## 📚 Example Categories
6+
7+
### 🎯 JSON Schema Examples (New!)
8+
9+
These examples demonstrate the new JSON project specification - pure JSON schemas that can be rendered directly with the Object UI CLI or SchemaRenderer.
10+
11+
| Example | Description | Difficulty | Features |
12+
|---------|-------------|------------|----------|
13+
| [**basic-form**](./basic-form) | Beautiful contact form | ⭐ Beginner | Forms, inputs, validation, buttons |
14+
| [**dashboard**](./dashboard) | Analytics dashboard | ⭐⭐ Intermediate | Metrics, activity feeds, grids |
15+
| [**data-display**](./data-display) | Data visualization patterns | ⭐⭐ Intermediate | Lists, profiles, badges, progress |
16+
| [**landing-page**](./landing-page) | Marketing landing page | ⭐⭐⭐ Advanced | Hero sections, CTAs, full layouts |
17+
| [**cli-demo**](./cli-demo) | CLI demonstration | ⭐ Beginner | Bilingual form, gradient backgrounds |
18+
19+
### 🔧 Integration Examples
20+
21+
| Example | Description | Type |
22+
|---------|-------------|------|
23+
| [**objectql-integration**](./objectql-integration) | ObjectQL backend integration | API Integration |
24+
| [**prototype**](./prototype) | React/Vite prototype app | Full Application |
25+
26+
## 🚀 Quick Start
27+
28+
### Option 1: Use Object UI CLI (Recommended)
29+
30+
```bash
31+
# Install CLI globally
32+
npm install -g @object-ui/cli
33+
34+
# Run any JSON example
35+
objectui serve examples/basic-form/app.json
36+
objectui serve examples/dashboard/app.json
37+
objectui serve examples/landing-page/app.json
38+
```
39+
40+
### Option 2: From Repository Root
41+
42+
```bash
43+
# Using pnpm
44+
pnpm objectui serve examples/basic-form/app.json
45+
46+
# Using npx
47+
npx @object-ui/cli serve examples/dashboard/app.json
48+
```
49+
50+
### Option 3: Run Prototype App
51+
52+
```bash
53+
cd examples/prototype
54+
pnpm install
55+
pnpm dev
56+
```
57+
58+
## 📖 Learning Path
59+
60+
### 1️⃣ **Start Here: Basic Form**
61+
Learn the fundamentals of JSON schemas
62+
- Input components
63+
- Layout patterns
64+
- Styling with Tailwind
65+
66+
```bash
67+
objectui serve examples/basic-form/app.json
68+
```
69+
70+
### 2️⃣ **Next: Data Display**
71+
Explore data visualization patterns
72+
- Lists and cards
73+
- Badges and status indicators
74+
- Progress bars
75+
76+
```bash
77+
objectui serve examples/data-display/app.json
78+
```
79+
80+
### 3️⃣ **Then: Dashboard**
81+
Build complex layouts
82+
- Metric cards
83+
- Activity feeds
84+
- Responsive grids
85+
86+
```bash
87+
objectui serve examples/dashboard/app.json
88+
```
89+
90+
### 4️⃣ **Finally: Landing Page**
91+
Master full-page designs
92+
- Hero sections
93+
- Marketing layouts
94+
- Advanced compositions
95+
96+
```bash
97+
objectui serve examples/landing-page/app.json
98+
```
99+
100+
## 🎨 What You'll Learn
101+
102+
### JSON Schema Patterns
103+
- Component composition
104+
- Layout structures
105+
- Responsive design
106+
- Styling with Tailwind CSS
107+
108+
### Component Types
109+
- **Layout**: `div`, `card`, `flex`
110+
- **Typography**: `text`, headings
111+
- **Forms**: `input`, `textarea`, `button`
112+
- **Data**: `progress`, lists, tables
113+
- **Visual**: `separator`, badges, avatars
114+
115+
### Styling Techniques
116+
- Gradient backgrounds
117+
- Hover effects
118+
- Shadow transitions
119+
- Color schemes
120+
- Responsive breakpoints
121+
122+
## 📂 Example Structure
123+
124+
Each JSON example follows this structure:
125+
126+
```
127+
example-name/
128+
├── app.json # The main JSON schema
129+
├── README.md # Detailed documentation
130+
└── .gitignore # Git ignore file (if needed)
131+
```
132+
133+
## 🎯 Features by Example
134+
135+
### Basic Form
136+
✅ Text inputs and textarea
137+
✅ Form validation
138+
✅ Button variants
139+
✅ Card containers
140+
✅ Grid layouts
141+
142+
### Dashboard
143+
✅ Metric cards with trends
144+
✅ Activity timeline
145+
✅ Sticky headers
146+
✅ Color-coded borders
147+
✅ Hover animations
148+
149+
### Data Display
150+
✅ User profile cards
151+
✅ Status badges
152+
✅ Progress bars
153+
✅ Task lists
154+
✅ Achievement displays
155+
156+
### Landing Page
157+
✅ Hero sections
158+
✅ Feature grids
159+
✅ Call-to-action
160+
✅ Statistics display
161+
✅ Full-page layouts
162+
✅ Footer sections
163+
164+
### CLI Demo
165+
✅ Bilingual support (中文/English)
166+
✅ Emoji icons
167+
✅ Gradient backgrounds
168+
✅ Modern styling
169+
170+
## 🛠️ Customization
171+
172+
All examples are fully customizable! Edit the `app.json` files to:
173+
174+
- Change colors and styling
175+
- Add or remove components
176+
- Modify layouts
177+
- Adjust content
178+
- Try different patterns
179+
180+
Example:
181+
182+
```json
183+
{
184+
"type": "button",
185+
"label": "Click Me",
186+
"className": "bg-blue-500 hover:bg-blue-600"
187+
}
188+
```
189+
190+
## 📚 Documentation
191+
192+
- [Protocol Overview](../docs/protocol/overview.md)
193+
- [Component Reference](../docs/api/components.md)
194+
- [CLI Guide](../docs/CLI_GUIDE.md)
195+
- [Quick Start](../docs/guide/quick-start.md)
196+
197+
## 🔗 Related Resources
198+
199+
- [Object UI Documentation](https://www.objectui.org)
200+
- [Tailwind CSS Docs](https://tailwindcss.com)
201+
- [Shadcn/UI Components](https://ui.shadcn.com)
202+
- [React Documentation](https://react.dev)
203+
204+
## 💡 Tips
205+
206+
1. **Start Simple**: Begin with the basic-form example
207+
2. **Experiment**: Modify the JSON and see changes in real-time
208+
3. **Learn Patterns**: Each example showcases different design patterns
209+
4. **Mix & Match**: Combine components from different examples
210+
5. **Read READMEs**: Each example has detailed documentation
211+
212+
## 🤝 Contributing
213+
214+
Want to add more examples? We'd love your contributions!
215+
216+
1. Create a new directory under `examples/`
217+
2. Add your `app.json` schema
218+
3. Write a comprehensive `README.md`
219+
4. Submit a pull request
220+
221+
See [CONTRIBUTING.md](../CONTRIBUTING.md) for guidelines.
222+
223+
## ❓ Need Help?
224+
225+
- [Open an Issue](https://github.com/objectql/objectui/issues)
226+
- [Join Discussions](https://github.com/objectql/objectui/discussions)
227+
- [Read the Docs](https://www.objectui.org)
228+
229+
## 📝 License
230+
231+
All examples are released under the [MIT License](../LICENSE).
232+
233+
---
234+
235+
**Built with ❤️ using [Object UI](https://www.objectui.org)**
236+
237+
Start building amazing UIs with JSON today! 🚀

‎examples/basic-form/.gitignore‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
# Object UI temp files
2+
.objectui-tmp
3+
4+
# OS files
5+
.DS_Store
6+
Thumbs.db
7+
8+
# IDE files
9+
.vscode/
10+
.idea/
11+
*.swp
12+
*.swo
13+
*~
14+
15+
# Logs
16+
*.log
17+
npm-debug.log*

0 commit comments

Comments
 (0)