Skip to content

Commit 2e1c14e

Browse files
Copilothuangyiirene
Copilot
and
huangyiirene
committed
Create new JSON-based examples following project specification
Co-authored-by: huangyiirene <7665279+huangyiirene@users.noreply.github.com>
1 parent c77db46 commit 2e1c14e

9 files changed

Lines changed: 2643 additions & 0 deletions

File tree

‎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/objectstack-ai/objectui/issues)
226+
- [Join Discussions](https://github.com/objectstack-ai/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/README.md‎

Lines changed: 109 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
1+
# Basic Form Example
2+
3+
A beautiful contact form built entirely with JSON schema - no coding required!
4+
5+
## 🎯 What You'll Learn
6+
7+
- How to create forms using JSON schemas
8+
- Tailwind CSS styling with Object UI
9+
- Layout and composition patterns
10+
- Input validation and required fields
11+
12+
## 🚀 Quick Start
13+
14+
From the repository root, run:
15+
16+
```bash
17+
pnpm objectui serve examples/basic-form/app.json
18+
```
19+
20+
Or using npx:
21+
22+
```bash
23+
npx @object-ui/cli serve examples/basic-form/app.json
24+
```
25+
26+
Then open http://localhost:3000 in your browser.
27+
28+
## ✨ Features Demonstrated
29+
30+
- ✅ **Text inputs** - First name, last name, email, phone
31+
- ✅ **Textarea** - Multi-line message input
32+
- ✅ **Form layout** - Grid layouts for responsive design
33+
- ✅ **Buttons** - Primary and outline variants
34+
- ✅ **Card component** - Container with title and description
35+
- ✅ **Gradient backgrounds** - Modern visual design
36+
- ✅ **Tailwind CSS** - Utility-first styling
37+
- ✅ **Shadcn/UI** - Beautiful component primitives
38+
39+
## 📝 Schema Structure
40+
41+
The form is defined in `app.json` using a hierarchical schema:
42+
43+
```json
44+
{
45+
"type": "div",
46+
"className": "...",
47+
"body": {
48+
"type": "card",
49+
"body": [
50+
{
51+
"type": "input",
52+
"label": "First Name",
53+
"required": true
54+
}
55+
]
56+
}
57+
}
58+
```
59+
60+
## 🎨 Customization
61+
62+
### Change Colors
63+
64+
Modify the `className` properties to use different Tailwind colors:
65+
66+
```json
67+
{
68+
"className": "bg-gradient-to-r from-blue-600 to-green-600"
69+
}
70+
```
71+
72+
### Add More Fields
73+
74+
Simply add more input objects to the `body` array:
75+
76+
```json
77+
{
78+
"type": "input",
79+
"label": "Company",
80+
"placeholder": "Your company name"
81+
}
82+
```
83+
84+
### Modify Layout
85+
86+
Change grid columns for different layouts:
87+
88+
```json
89+
{
90+
"className": "grid gap-6 md:grid-cols-3"
91+
}
92+
```
93+
94+
## 📚 Learn More
95+
96+
- [Object UI Documentation](https://www.objectui.org)
97+
- [Protocol Overview](../../docs/protocol/overview.md)
98+
- [Component Reference](../../docs/api/components.md)
99+
- [CLI Guide](../../docs/CLI_GUIDE.md)
100+
101+
## 🔗 Related Examples
102+
103+
- [Dashboard](../dashboard) - Full dashboard with metrics
104+
- [Data Display](../data-display) - Tables, lists, and cards
105+
- [Landing Page](../landing-page) - Marketing page example
106+
107+
---
108+
109+
**Built with ❤️ using [Object UI](https://www.objectui.org)**

0 commit comments

Comments
 (0)