From c77db4685f05c6f0d31ce5d79546be9a00dbcd3f Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Thu, 15 Jan 2026 03:20:39 +0000 Subject: [PATCH 1/5] Initial plan From 2e1c14eff0dc78de318d297f1efce22b7a78b13b Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Thu, 15 Jan 2026 03:28:16 +0000 Subject: [PATCH 2/5] Create new JSON-based examples following project specification Co-authored-by: huangyiirene <7665279+huangyiirene@users.noreply.github.com> --- examples/README.md | 237 +++++++++++++++ examples/basic-form/README.md | 109 +++++++ examples/basic-form/app.json | 137 +++++++++ examples/dashboard/README.md | 178 +++++++++++ examples/dashboard/app.json | 492 ++++++++++++++++++++++++++++++ examples/data-display/README.md | 217 +++++++++++++ examples/data-display/app.json | 521 ++++++++++++++++++++++++++++++++ examples/landing-page/README.md | 236 +++++++++++++++ examples/landing-page/app.json | 516 +++++++++++++++++++++++++++++++ 9 files changed, 2643 insertions(+) create mode 100644 examples/README.md create mode 100644 examples/basic-form/README.md create mode 100644 examples/basic-form/app.json create mode 100644 examples/dashboard/README.md create mode 100644 examples/dashboard/app.json create mode 100644 examples/data-display/README.md create mode 100644 examples/data-display/app.json create mode 100644 examples/landing-page/README.md create mode 100644 examples/landing-page/app.json diff --git a/examples/README.md b/examples/README.md new file mode 100644 index 0000000000..45ef5ef817 --- /dev/null +++ b/examples/README.md @@ -0,0 +1,237 @@ +# Object UI Examples + +Welcome to the Object UI examples directory! This collection showcases the power of JSON-driven UI development with real-world examples. + +## πŸ“š Example Categories + +### 🎯 JSON Schema Examples (New!) + +These examples demonstrate the new JSON project specification - pure JSON schemas that can be rendered directly with the Object UI CLI or SchemaRenderer. + +| Example | Description | Difficulty | Features | +|---------|-------------|------------|----------| +| [**basic-form**](./basic-form) | Beautiful contact form | ⭐ Beginner | Forms, inputs, validation, buttons | +| [**dashboard**](./dashboard) | Analytics dashboard | ⭐⭐ Intermediate | Metrics, activity feeds, grids | +| [**data-display**](./data-display) | Data visualization patterns | ⭐⭐ Intermediate | Lists, profiles, badges, progress | +| [**landing-page**](./landing-page) | Marketing landing page | ⭐⭐⭐ Advanced | Hero sections, CTAs, full layouts | +| [**cli-demo**](./cli-demo) | CLI demonstration | ⭐ Beginner | Bilingual form, gradient backgrounds | + +### πŸ”§ Integration Examples + +| Example | Description | Type | +|---------|-------------|------| +| [**objectql-integration**](./objectql-integration) | ObjectQL backend integration | API Integration | +| [**prototype**](./prototype) | React/Vite prototype app | Full Application | + +## πŸš€ Quick Start + +### Option 1: Use Object UI CLI (Recommended) + +```bash +# Install CLI globally +npm install -g @object-ui/cli + +# Run any JSON example +objectui serve examples/basic-form/app.json +objectui serve examples/dashboard/app.json +objectui serve examples/landing-page/app.json +``` + +### Option 2: From Repository Root + +```bash +# Using pnpm +pnpm objectui serve examples/basic-form/app.json + +# Using npx +npx @object-ui/cli serve examples/dashboard/app.json +``` + +### Option 3: Run Prototype App + +```bash +cd examples/prototype +pnpm install +pnpm dev +``` + +## πŸ“– Learning Path + +### 1️⃣ **Start Here: Basic Form** +Learn the fundamentals of JSON schemas +- Input components +- Layout patterns +- Styling with Tailwind + +```bash +objectui serve examples/basic-form/app.json +``` + +### 2️⃣ **Next: Data Display** +Explore data visualization patterns +- Lists and cards +- Badges and status indicators +- Progress bars + +```bash +objectui serve examples/data-display/app.json +``` + +### 3️⃣ **Then: Dashboard** +Build complex layouts +- Metric cards +- Activity feeds +- Responsive grids + +```bash +objectui serve examples/dashboard/app.json +``` + +### 4️⃣ **Finally: Landing Page** +Master full-page designs +- Hero sections +- Marketing layouts +- Advanced compositions + +```bash +objectui serve examples/landing-page/app.json +``` + +## 🎨 What You'll Learn + +### JSON Schema Patterns +- Component composition +- Layout structures +- Responsive design +- Styling with Tailwind CSS + +### Component Types +- **Layout**: `div`, `card`, `flex` +- **Typography**: `text`, headings +- **Forms**: `input`, `textarea`, `button` +- **Data**: `progress`, lists, tables +- **Visual**: `separator`, badges, avatars + +### Styling Techniques +- Gradient backgrounds +- Hover effects +- Shadow transitions +- Color schemes +- Responsive breakpoints + +## πŸ“‚ Example Structure + +Each JSON example follows this structure: + +``` +example-name/ +β”œβ”€β”€ app.json # The main JSON schema +β”œβ”€β”€ README.md # Detailed documentation +└── .gitignore # Git ignore file (if needed) +``` + +## 🎯 Features by Example + +### Basic Form +βœ… Text inputs and textarea +βœ… Form validation +βœ… Button variants +βœ… Card containers +βœ… Grid layouts + +### Dashboard +βœ… Metric cards with trends +βœ… Activity timeline +βœ… Sticky headers +βœ… Color-coded borders +βœ… Hover animations + +### Data Display +βœ… User profile cards +βœ… Status badges +βœ… Progress bars +βœ… Task lists +βœ… Achievement displays + +### Landing Page +βœ… Hero sections +βœ… Feature grids +βœ… Call-to-action +βœ… Statistics display +βœ… Full-page layouts +βœ… Footer sections + +### CLI Demo +βœ… Bilingual support (δΈ­ζ–‡/English) +βœ… Emoji icons +βœ… Gradient backgrounds +βœ… Modern styling + +## πŸ› οΈ Customization + +All examples are fully customizable! Edit the `app.json` files to: + +- Change colors and styling +- Add or remove components +- Modify layouts +- Adjust content +- Try different patterns + +Example: + +```json +{ + "type": "button", + "label": "Click Me", + "className": "bg-blue-500 hover:bg-blue-600" +} +``` + +## πŸ“š Documentation + +- [Protocol Overview](../docs/protocol/overview.md) +- [Component Reference](../docs/api/components.md) +- [CLI Guide](../docs/CLI_GUIDE.md) +- [Quick Start](../docs/guide/quick-start.md) + +## πŸ”— Related Resources + +- [Object UI Documentation](https://www.objectui.org) +- [Tailwind CSS Docs](https://tailwindcss.com) +- [Shadcn/UI Components](https://ui.shadcn.com) +- [React Documentation](https://react.dev) + +## πŸ’‘ Tips + +1. **Start Simple**: Begin with the basic-form example +2. **Experiment**: Modify the JSON and see changes in real-time +3. **Learn Patterns**: Each example showcases different design patterns +4. **Mix & Match**: Combine components from different examples +5. **Read READMEs**: Each example has detailed documentation + +## 🀝 Contributing + +Want to add more examples? We'd love your contributions! + +1. Create a new directory under `examples/` +2. Add your `app.json` schema +3. Write a comprehensive `README.md` +4. Submit a pull request + +See [CONTRIBUTING.md](../CONTRIBUTING.md) for guidelines. + +## ❓ Need Help? + +- [Open an Issue](https://github.com/objectstack-ai/objectui/issues) +- [Join Discussions](https://github.com/objectstack-ai/objectui/discussions) +- [Read the Docs](https://www.objectui.org) + +## πŸ“ License + +All examples are released under the [MIT License](../LICENSE). + +--- + +**Built with ❀️ using [Object UI](https://www.objectui.org)** + +Start building amazing UIs with JSON today! πŸš€ diff --git a/examples/basic-form/README.md b/examples/basic-form/README.md new file mode 100644 index 0000000000..560614f3f9 --- /dev/null +++ b/examples/basic-form/README.md @@ -0,0 +1,109 @@ +# Basic Form Example + +A beautiful contact form built entirely with JSON schema - no coding required! + +## 🎯 What You'll Learn + +- How to create forms using JSON schemas +- Tailwind CSS styling with Object UI +- Layout and composition patterns +- Input validation and required fields + +## πŸš€ Quick Start + +From the repository root, run: + +```bash +pnpm objectui serve examples/basic-form/app.json +``` + +Or using npx: + +```bash +npx @object-ui/cli serve examples/basic-form/app.json +``` + +Then open http://localhost:3000 in your browser. + +## ✨ Features Demonstrated + +- βœ… **Text inputs** - First name, last name, email, phone +- βœ… **Textarea** - Multi-line message input +- βœ… **Form layout** - Grid layouts for responsive design +- βœ… **Buttons** - Primary and outline variants +- βœ… **Card component** - Container with title and description +- βœ… **Gradient backgrounds** - Modern visual design +- βœ… **Tailwind CSS** - Utility-first styling +- βœ… **Shadcn/UI** - Beautiful component primitives + +## πŸ“ Schema Structure + +The form is defined in `app.json` using a hierarchical schema: + +```json +{ + "type": "div", + "className": "...", + "body": { + "type": "card", + "body": [ + { + "type": "input", + "label": "First Name", + "required": true + } + ] + } +} +``` + +## 🎨 Customization + +### Change Colors + +Modify the `className` properties to use different Tailwind colors: + +```json +{ + "className": "bg-gradient-to-r from-blue-600 to-green-600" +} +``` + +### Add More Fields + +Simply add more input objects to the `body` array: + +```json +{ + "type": "input", + "label": "Company", + "placeholder": "Your company name" +} +``` + +### Modify Layout + +Change grid columns for different layouts: + +```json +{ + "className": "grid gap-6 md:grid-cols-3" +} +``` + +## πŸ“š Learn More + +- [Object UI Documentation](https://www.objectui.org) +- [Protocol Overview](../../docs/protocol/overview.md) +- [Component Reference](../../docs/api/components.md) +- [CLI Guide](../../docs/CLI_GUIDE.md) + +## πŸ”— Related Examples + +- [Dashboard](../dashboard) - Full dashboard with metrics +- [Data Display](../data-display) - Tables, lists, and cards +- [Landing Page](../landing-page) - Marketing page example + +--- + +**Built with ❀️ using [Object UI](https://www.objectui.org)** diff --git a/examples/basic-form/app.json b/examples/basic-form/app.json new file mode 100644 index 0000000000..8ccb989b92 --- /dev/null +++ b/examples/basic-form/app.json @@ -0,0 +1,137 @@ +{ + "type": "div", + "className": "min-h-screen bg-gradient-to-br from-indigo-50 via-purple-50 to-pink-50 p-6", + "body": { + "type": "div", + "className": "max-w-2xl mx-auto space-y-8", + "body": [ + { + "type": "div", + "className": "text-center space-y-3", + "body": [ + { + "type": "text", + "content": "πŸ“ Contact Form Example", + "className": "text-4xl font-extrabold bg-gradient-to-r from-indigo-600 via-purple-600 to-pink-600 bg-clip-text text-transparent" + }, + { + "type": "text", + "content": "A beautiful form built entirely with JSON - No code required!", + "className": "text-gray-600 text-lg" + } + ] + }, + { + "type": "card", + "className": "shadow-2xl border-0 bg-white/80 backdrop-blur-lg rounded-2xl overflow-hidden", + "title": "Get in Touch", + "description": "Fill out the form below and we'll get back to you soon", + "body": { + "type": "div", + "className": "p-8 space-y-6", + "body": [ + { + "type": "div", + "className": "grid gap-6 md:grid-cols-2", + "body": [ + { + "type": "input", + "label": "First Name", + "placeholder": "John", + "required": true, + "className": "transition-all focus:ring-2 focus:ring-indigo-500" + }, + { + "type": "input", + "label": "Last Name", + "placeholder": "Doe", + "required": true, + "className": "transition-all focus:ring-2 focus:ring-indigo-500" + } + ] + }, + { + "type": "input", + "label": "πŸ“§ Email Address", + "inputType": "email", + "required": true, + "placeholder": "john.doe@example.com", + "className": "transition-all focus:ring-2 focus:ring-purple-500" + }, + { + "type": "input", + "label": "πŸ“± Phone Number", + "inputType": "tel", + "placeholder": "+1 (555) 000-0000", + "className": "transition-all focus:ring-2 focus:ring-pink-500" + }, + { + "type": "textarea", + "label": "πŸ’¬ Message", + "placeholder": "Tell us what you need help with...", + "rows": 5, + "className": "transition-all focus:ring-2 focus:ring-purple-500" + }, + { + "type": "separator", + "className": "my-4" + }, + { + "type": "div", + "className": "flex items-center justify-end gap-3 pt-4", + "body": [ + { + "type": "button", + "label": "Reset", + "variant": "outline", + "className": "px-6 py-2.5 hover:bg-gray-100 transition-colors" + }, + { + "type": "button", + "label": "βœ“ Send Message", + "className": "px-6 py-2.5 bg-gradient-to-r from-indigo-600 via-purple-600 to-pink-600 hover:from-indigo-700 hover:via-purple-700 hover:to-pink-700 text-white shadow-lg hover:shadow-xl transition-all" + } + ] + } + ] + } + }, + { + "type": "card", + "className": "shadow-lg border border-indigo-100", + "body": { + "type": "div", + "className": "p-6 space-y-3", + "body": [ + { + "type": "text", + "content": "πŸ’‘ Built with Object UI", + "className": "text-lg font-semibold text-indigo-900" + }, + { + "type": "text", + "content": "This entire form was created using a simple JSON schema. Edit app.json to customize it!", + "className": "text-sm text-gray-600" + }, + { + "type": "div", + "className": "bg-gray-50 rounded-lg p-4 mt-4", + "body": [ + { + "type": "text", + "content": "Quick Start:", + "className": "text-sm font-mono font-semibold text-gray-700 mb-2" + }, + { + "type": "text", + "content": "$ objectui serve app.json", + "className": "text-sm font-mono text-indigo-600" + } + ] + } + ] + } + } + ] + } +} diff --git a/examples/dashboard/README.md b/examples/dashboard/README.md new file mode 100644 index 0000000000..9ba7b1f8a5 --- /dev/null +++ b/examples/dashboard/README.md @@ -0,0 +1,178 @@ +# Dashboard Example + +A complete analytics dashboard with metrics, activity feed, and quick actions - built entirely from JSON! + +## 🎯 What You'll Learn + +- Complex dashboard layouts using JSON schemas +- Metric cards with visual indicators +- Activity feeds with timestamps +- Sticky headers and responsive grids +- Advanced Tailwind CSS patterns + +## πŸš€ Quick Start + +From the repository root, run: + +```bash +pnpm objectui serve examples/dashboard/app.json +``` + +Or using npx: + +```bash +npx @object-ui/cli serve examples/dashboard/app.json +``` + +Then open http://localhost:3000 in your browser. + +## ✨ Features Demonstrated + +- βœ… **Metric Cards** - Revenue, users, sales, and activity metrics +- βœ… **Sticky Header** - Navigation bar that stays at the top +- βœ… **Activity Feed** - Real-time updates with status indicators +- βœ… **Grid Layouts** - Responsive 4-column and 2-column grids +- βœ… **Color Accents** - Left borders with different colors per card +- βœ… **Hover Effects** - Shadow transitions on cards +- βœ… **Icon Support** - Emoji icons for visual appeal +- βœ… **Quick Actions** - Button list for common tasks +- βœ… **Pro Tips** - Informational callout boxes + +## πŸ“Š Dashboard Components + +### Metric Cards + +Each metric card displays: +- Icon and label +- Large number value +- Trend indicator (↑/↓) +- Percentage change +- Color-coded left border + +```json +{ + "type": "card", + "className": "border-l-4 border-l-blue-500", + "body": [ + { + "type": "text", + "content": "$45,231.89", + "className": "text-3xl font-bold text-blue-600" + } + ] +} +``` + +### Activity Feed + +Timeline-style list with: +- Status dots (colored indicators) +- Activity title +- Description text +- Timestamp +- Border separators + +### Quick Actions + +List of actionable buttons: +- Full-width buttons +- Left-aligned text +- Icon prefixes +- Outline variant + +## 🎨 Customization + +### Change Metric Values + +Edit the `content` properties in the metric cards: + +```json +{ + "type": "text", + "content": "$99,999.99", + "className": "text-3xl font-bold text-blue-600" +} +``` + +### Modify Colors + +Change the border and text colors: + +```json +{ + "className": "border-l-4 border-l-red-500" +} +``` + +Available colors: blue, green, purple, orange, red, pink, etc. + +### Add More Metrics + +Duplicate a card object and modify its content: + +```json +{ + "type": "card", + "className": "shadow-sm hover:shadow-md transition-shadow border-l-4 border-l-yellow-500", + "body": [...] +} +``` + +### Adjust Grid Columns + +Change the number of columns: + +```json +{ + "className": "grid gap-4 md:grid-cols-2 lg:grid-cols-3" +} +``` + +## πŸ“š Advanced Patterns + +### Sticky Header + +```json +{ + "type": "div", + "className": "sticky top-0 z-50 shadow-sm" +} +``` + +### Responsive Grid + +```json +{ + "className": "grid gap-4 md:grid-cols-2 lg:grid-cols-4" +} +``` + +This creates: +- 1 column on mobile +- 2 columns on tablet (md) +- 4 columns on desktop (lg) + +### Hover Effects + +```json +{ + "className": "hover:shadow-md transition-shadow" +} +``` + +## πŸ“š Learn More + +- [Object UI Documentation](https://www.objectui.org) +- [Protocol Overview](../../docs/protocol/overview.md) +- [Component Reference](../../docs/api/components.md) +- [Tailwind CSS Grid](https://tailwindcss.com/docs/grid-template-columns) + +## πŸ”— Related Examples + +- [Basic Form](../basic-form) - Contact form example +- [Data Display](../data-display) - Tables and lists +- [Landing Page](../landing-page) - Marketing page + +--- + +**Built with ❀️ using [Object UI](https://www.objectui.org)** diff --git a/examples/dashboard/app.json b/examples/dashboard/app.json new file mode 100644 index 0000000000..0a3f5fb46f --- /dev/null +++ b/examples/dashboard/app.json @@ -0,0 +1,492 @@ +{ + "type": "div", + "className": "min-h-screen bg-muted/10", + "body": [ + { + "type": "div", + "className": "border-b bg-background sticky top-0 z-50 shadow-sm", + "body": { + "type": "div", + "className": "container mx-auto px-6 py-4", + "body": { + "type": "div", + "className": "flex items-center justify-between", + "body": [ + { + "type": "div", + "className": "flex items-center gap-4", + "body": [ + { + "type": "text", + "content": "πŸ“Š", + "className": "text-3xl" + }, + { + "type": "div", + "className": "space-y-0.5", + "body": [ + { + "type": "text", + "content": "Analytics Dashboard", + "className": "text-2xl font-bold tracking-tight" + }, + { + "type": "text", + "content": "Real-time performance metrics", + "className": "text-sm text-muted-foreground" + } + ] + } + ] + }, + { + "type": "div", + "className": "flex items-center gap-2", + "body": [ + { + "type": "button", + "label": "πŸ“₯ Export", + "variant": "outline", + "size": "sm" + }, + { + "type": "button", + "label": "πŸ”„ Refresh", + "variant": "outline", + "size": "sm" + }, + { + "type": "button", + "label": "+ New Report", + "size": "sm" + } + ] + } + ] + } + } + }, + { + "type": "div", + "className": "container mx-auto p-6 space-y-8", + "body": [ + { + "type": "div", + "className": "grid gap-4 md:grid-cols-2 lg:grid-cols-4", + "body": [ + { + "type": "card", + "className": "shadow-sm hover:shadow-md transition-shadow border-l-4 border-l-blue-500", + "body": [ + { + "type": "div", + "className": "p-6 pb-2", + "body": { + "type": "div", + "className": "flex items-center gap-2", + "body": [ + { + "type": "text", + "content": "πŸ’°", + "className": "text-xl" + }, + { + "type": "text", + "content": "Total Revenue", + "className": "text-sm font-medium text-muted-foreground" + } + ] + } + }, + { + "type": "div", + "className": "p-6 pt-0", + "body": [ + { + "type": "text", + "content": "$45,231.89", + "className": "text-3xl font-bold text-blue-600" + }, + { + "type": "div", + "className": "flex items-center gap-1 mt-2", + "body": [ + { + "type": "text", + "content": "↑", + "className": "text-green-600 font-bold" + }, + { + "type": "text", + "content": "+20.1% from last month", + "className": "text-xs text-green-600 font-medium" + } + ] + } + ] + } + ] + }, + { + "type": "card", + "className": "shadow-sm hover:shadow-md transition-shadow border-l-4 border-l-green-500", + "body": [ + { + "type": "div", + "className": "p-6 pb-2", + "body": { + "type": "div", + "className": "flex items-center gap-2", + "body": [ + { + "type": "text", + "content": "πŸ‘₯", + "className": "text-xl" + }, + { + "type": "text", + "content": "Active Users", + "className": "text-sm font-medium text-muted-foreground" + } + ] + } + }, + { + "type": "div", + "className": "p-6 pt-0", + "body": [ + { + "type": "text", + "content": "+2,350", + "className": "text-3xl font-bold text-green-600" + }, + { + "type": "div", + "className": "flex items-center gap-1 mt-2", + "body": [ + { + "type": "text", + "content": "↑", + "className": "text-green-600 font-bold" + }, + { + "type": "text", + "content": "+180.1% from last month", + "className": "text-xs text-green-600 font-medium" + } + ] + } + ] + } + ] + }, + { + "type": "card", + "className": "shadow-sm hover:shadow-md transition-shadow border-l-4 border-l-purple-500", + "body": [ + { + "type": "div", + "className": "p-6 pb-2", + "body": { + "type": "div", + "className": "flex items-center gap-2", + "body": [ + { + "type": "text", + "content": "πŸ›’", + "className": "text-xl" + }, + { + "type": "text", + "content": "Total Sales", + "className": "text-sm font-medium text-muted-foreground" + } + ] + } + }, + { + "type": "div", + "className": "p-6 pt-0", + "body": [ + { + "type": "text", + "content": "+12,234", + "className": "text-3xl font-bold text-purple-600" + }, + { + "type": "div", + "className": "flex items-center gap-1 mt-2", + "body": [ + { + "type": "text", + "content": "↑", + "className": "text-green-600 font-bold" + }, + { + "type": "text", + "content": "+19% from last month", + "className": "text-xs text-green-600 font-medium" + } + ] + } + ] + } + ] + }, + { + "type": "card", + "className": "shadow-sm hover:shadow-md transition-shadow border-l-4 border-l-orange-500", + "body": [ + { + "type": "div", + "className": "p-6 pb-2", + "body": { + "type": "div", + "className": "flex items-center gap-2", + "body": [ + { + "type": "text", + "content": "⚑", + "className": "text-xl" + }, + { + "type": "text", + "content": "Active Now", + "className": "text-sm font-medium text-muted-foreground" + } + ] + } + }, + { + "type": "div", + "className": "p-6 pt-0", + "body": [ + { + "type": "text", + "content": "+573", + "className": "text-3xl font-bold text-orange-600" + }, + { + "type": "div", + "className": "flex items-center gap-1 mt-2", + "body": [ + { + "type": "text", + "content": "↑", + "className": "text-green-600 font-bold" + }, + { + "type": "text", + "content": "+201 since last hour", + "className": "text-xs text-green-600 font-medium" + } + ] + } + ] + } + ] + } + ] + }, + { + "type": "div", + "className": "grid gap-6 lg:grid-cols-2", + "body": [ + { + "type": "card", + "className": "shadow-lg", + "title": "πŸ“ˆ Recent Activity", + "description": "Latest updates and notifications from your team", + "body": { + "type": "div", + "className": "p-6 pt-0 space-y-0", + "body": [ + { + "type": "div", + "className": "flex items-start gap-4 py-4 border-b", + "body": [ + { + "type": "div", + "className": "w-2 h-2 mt-2 rounded-full bg-green-500" + }, + { + "type": "div", + "className": "flex-1 space-y-1", + "body": [ + { + "type": "text", + "content": "New user registration", + "className": "font-medium" + }, + { + "type": "text", + "content": "John Doe signed up for a premium account", + "className": "text-sm text-muted-foreground" + }, + { + "type": "text", + "content": "2 minutes ago", + "className": "text-xs text-muted-foreground" + } + ] + } + ] + }, + { + "type": "div", + "className": "flex items-start gap-4 py-4 border-b", + "body": [ + { + "type": "div", + "className": "w-2 h-2 mt-2 rounded-full bg-blue-500" + }, + { + "type": "div", + "className": "flex-1 space-y-1", + "body": [ + { + "type": "text", + "content": "Payment received", + "className": "font-medium" + }, + { + "type": "text", + "content": "Invoice #1234 has been paid - $5,432.10", + "className": "text-sm text-muted-foreground" + }, + { + "type": "text", + "content": "15 minutes ago", + "className": "text-xs text-muted-foreground" + } + ] + } + ] + }, + { + "type": "div", + "className": "flex items-start gap-4 py-4 border-b", + "body": [ + { + "type": "div", + "className": "w-2 h-2 mt-2 rounded-full bg-purple-500" + }, + { + "type": "div", + "className": "flex-1 space-y-1", + "body": [ + { + "type": "text", + "content": "New order placed", + "className": "font-medium" + }, + { + "type": "text", + "content": "Order #5678 - 5 items, Total: $892.50", + "className": "text-sm text-muted-foreground" + }, + { + "type": "text", + "content": "1 hour ago", + "className": "text-xs text-muted-foreground" + } + ] + } + ] + }, + { + "type": "div", + "className": "flex items-start gap-4 py-4", + "body": [ + { + "type": "div", + "className": "w-2 h-2 mt-2 rounded-full bg-orange-500" + }, + { + "type": "div", + "className": "flex-1 space-y-1", + "body": [ + { + "type": "text", + "content": "System update completed", + "className": "font-medium" + }, + { + "type": "text", + "content": "All services upgraded to version 2.1.0", + "className": "text-sm text-muted-foreground" + }, + { + "type": "text", + "content": "3 hours ago", + "className": "text-xs text-muted-foreground" + } + ] + } + ] + } + ] + } + }, + { + "type": "card", + "className": "shadow-lg", + "title": "🎯 Quick Actions", + "description": "Common tasks and shortcuts", + "body": { + "type": "div", + "className": "p-6 pt-0 space-y-3", + "body": [ + { + "type": "button", + "label": "πŸ“ Create New Report", + "variant": "outline", + "className": "w-full justify-start" + }, + { + "type": "button", + "label": "πŸ‘₯ Invite Team Member", + "variant": "outline", + "className": "w-full justify-start" + }, + { + "type": "button", + "label": "βš™οΈ System Settings", + "variant": "outline", + "className": "w-full justify-start" + }, + { + "type": "button", + "label": "πŸ“Š View Analytics", + "variant": "outline", + "className": "w-full justify-start" + }, + { + "type": "separator", + "className": "my-4" + }, + { + "type": "div", + "className": "bg-gradient-to-r from-indigo-50 to-purple-50 rounded-lg p-4 border border-indigo-200", + "body": [ + { + "type": "text", + "content": "πŸ’‘ Pro Tip", + "className": "font-semibold text-indigo-900 mb-2" + }, + { + "type": "text", + "content": "This dashboard is built entirely from JSON! Edit app.json to customize metrics, colors, and layout.", + "className": "text-sm text-indigo-800" + } + ] + } + ] + } + } + ] + } + ] + } + ] +} diff --git a/examples/data-display/README.md b/examples/data-display/README.md new file mode 100644 index 0000000000..51643c3e93 --- /dev/null +++ b/examples/data-display/README.md @@ -0,0 +1,217 @@ +# Data Display Example + +Showcase of various data display patterns - profiles, lists, progress bars, badges, and more! + +## 🎯 What You'll Learn + +- User profile cards with avatars +- Task lists with status indicators +- Progress bars and statistics +- Achievement badges +- Status badges and labels +- Hover effects and transitions + +## πŸš€ Quick Start + +From the repository root, run: + +```bash +pnpm objectui serve examples/data-display/app.json +``` + +Or using npx: + +```bash +npx @object-ui/cli serve examples/data-display/app.json +``` + +Then open http://localhost:3000 in your browser. + +## ✨ Features Demonstrated + +- βœ… **User Profiles** - Avatar circles with gradient backgrounds +- βœ… **Status Badges** - Color-coded pills (Active, Premium, etc.) +- βœ… **Task Lists** - Checkboxes with border accents +- βœ… **Progress Bars** - Visual representation of metrics +- βœ… **Achievement Cards** - Badge display with icons +- βœ… **Hover Effects** - Interactive state changes +- βœ… **Color Coding** - Different colors for different states +- βœ… **Responsive Grids** - Adaptive layouts + +## πŸ“Š Component Patterns + +### User Profile Card + +```json +{ + "type": "div", + "className": "flex items-center gap-4 p-4 bg-gradient-to-r from-blue-50 to-cyan-50 rounded-lg", + "body": [ + { + "type": "div", + "className": "w-16 h-16 rounded-full bg-gradient-to-br from-blue-500 to-cyan-500 flex items-center justify-center text-white text-2xl font-bold", + "body": { "type": "text", "content": "JD" } + } + ] +} +``` + +### Status Badge + +```json +{ + "type": "div", + "className": "px-2 py-1 bg-green-100 text-green-700 text-xs font-semibold rounded-full", + "body": { "type": "text", "content": "βœ“ Active" } +} +``` + +### Task Item with Border Accent + +```json +{ + "type": "div", + "className": "flex items-center gap-3 p-3 hover:bg-gray-50 rounded-lg border-l-4 border-l-green-500" +} +``` + +### Progress Bar + +```json +{ + "type": "div", + "className": "space-y-2", + "body": [ + { + "type": "div", + "className": "flex items-center justify-between", + "body": [ + { "type": "text", "content": "Completion Rate", "className": "text-sm font-medium" }, + { "type": "text", "content": "85%", "className": "text-sm font-bold text-green-600" } + ] + }, + { + "type": "progress", + "value": 85, + "className": "h-2" + } + ] +} +``` + +## 🎨 Color Schemes + +### Status Colors + +- **Green** (`green-500`) - Success, completed, active +- **Blue** (`blue-500`) - In progress, information +- **Orange** (`orange-500`) - Warning, pending +- **Red** (`red-500`) - Error, urgent +- **Purple** (`purple-500`) - Premium, special + +### Gradient Backgrounds + +```json +{ + "className": "bg-gradient-to-r from-blue-50 to-cyan-50" +} +``` + +Available gradients: +- `from-blue-50 to-cyan-50` - Cool blue +- `from-purple-50 to-pink-50` - Warm purple +- `from-indigo-50 to-purple-50` - Deep indigo +- `from-yellow-50 to-orange-50` - Warm yellow + +## 🎨 Customization + +### Change Avatar Initials + +```json +{ + "type": "text", + "content": "AB" +} +``` + +### Modify Task Status + +Change the border color and status text: + +```json +{ + "className": "border-l-4 border-l-purple-500" +} +``` + +### Adjust Progress Values + +Change the `value` property (0-100): + +```json +{ + "type": "progress", + "value": 65 +} +``` + +### Add More Profiles + +Duplicate a profile card and modify: + +```json +{ + "type": "div", + "className": "flex items-center gap-4 p-4 bg-gradient-to-r from-green-50 to-emerald-50 rounded-lg border border-green-100", + "body": [ + { + "type": "div", + "className": "w-16 h-16 rounded-full bg-gradient-to-br from-green-500 to-emerald-500 flex items-center justify-center text-white text-2xl font-bold", + "body": { "type": "text", "content": "XY" } + } + ] +} +``` + +## πŸ“š Advanced Techniques + +### Hover Transitions + +```json +{ + "className": "hover:bg-gray-50 transition-colors" +} +``` + +### Box Shadows + +```json +{ + "className": "shadow-xl" +} +``` + +### Border Accents + +```json +{ + "className": "border-l-4 border-l-blue-500" +} +``` + +## πŸ“š Learn More + +- [Object UI Documentation](https://www.objectui.org) +- [Progress Component](../../docs/api/components.md#progress) +- [Card Component](../../docs/api/components.md#card) +- [Tailwind CSS Colors](https://tailwindcss.com/docs/customizing-colors) + +## πŸ”— Related Examples + +- [Dashboard](../dashboard) - Metrics and analytics +- [Basic Form](../basic-form) - Form inputs +- [Landing Page](../landing-page) - Marketing content + +--- + +**Built with ❀️ using [Object UI](https://www.objectui.org)** diff --git a/examples/data-display/app.json b/examples/data-display/app.json new file mode 100644 index 0000000000..48a8aa3f08 --- /dev/null +++ b/examples/data-display/app.json @@ -0,0 +1,521 @@ +{ + "type": "div", + "className": "min-h-screen bg-gradient-to-br from-slate-50 to-blue-50 p-6", + "body": { + "type": "div", + "className": "max-w-6xl mx-auto space-y-8", + "body": [ + { + "type": "div", + "className": "text-center space-y-3", + "body": [ + { + "type": "text", + "content": "πŸ“Š Data Display Showcase", + "className": "text-4xl font-extrabold bg-gradient-to-r from-blue-600 to-cyan-600 bg-clip-text text-transparent" + }, + { + "type": "text", + "content": "Explore various ways to display data using Object UI components", + "className": "text-gray-600 text-lg" + } + ] + }, + { + "type": "card", + "className": "shadow-xl", + "title": "πŸ‘€ User Profiles", + "description": "Avatar, badges, and profile information", + "body": { + "type": "div", + "className": "p-6 space-y-6", + "body": [ + { + "type": "div", + "className": "flex items-center gap-4 p-4 bg-gradient-to-r from-blue-50 to-cyan-50 rounded-lg border border-blue-100", + "body": [ + { + "type": "div", + "className": "w-16 h-16 rounded-full bg-gradient-to-br from-blue-500 to-cyan-500 flex items-center justify-center text-white text-2xl font-bold shadow-lg", + "body": { + "type": "text", + "content": "JD" + } + }, + { + "type": "div", + "className": "flex-1 space-y-1", + "body": [ + { + "type": "text", + "content": "John Doe", + "className": "text-xl font-bold" + }, + { + "type": "text", + "content": "Senior Product Manager", + "className": "text-sm text-muted-foreground" + }, + { + "type": "div", + "className": "flex gap-2 mt-2", + "body": [ + { + "type": "div", + "className": "px-2 py-1 bg-green-100 text-green-700 text-xs font-semibold rounded-full", + "body": { + "type": "text", + "content": "βœ“ Active" + } + }, + { + "type": "div", + "className": "px-2 py-1 bg-blue-100 text-blue-700 text-xs font-semibold rounded-full", + "body": { + "type": "text", + "content": "⭐ Premium" + } + } + ] + } + ] + }, + { + "type": "button", + "label": "View Profile", + "size": "sm" + } + ] + }, + { + "type": "div", + "className": "flex items-center gap-4 p-4 bg-gradient-to-r from-purple-50 to-pink-50 rounded-lg border border-purple-100", + "body": [ + { + "type": "div", + "className": "w-16 h-16 rounded-full bg-gradient-to-br from-purple-500 to-pink-500 flex items-center justify-center text-white text-2xl font-bold shadow-lg", + "body": { + "type": "text", + "content": "AS" + } + }, + { + "type": "div", + "className": "flex-1 space-y-1", + "body": [ + { + "type": "text", + "content": "Alice Smith", + "className": "text-xl font-bold" + }, + { + "type": "text", + "content": "Lead Software Engineer", + "className": "text-sm text-muted-foreground" + }, + { + "type": "div", + "className": "flex gap-2 mt-2", + "body": [ + { + "type": "div", + "className": "px-2 py-1 bg-green-100 text-green-700 text-xs font-semibold rounded-full", + "body": { + "type": "text", + "content": "βœ“ Active" + } + }, + { + "type": "div", + "className": "px-2 py-1 bg-purple-100 text-purple-700 text-xs font-semibold rounded-full", + "body": { + "type": "text", + "content": "πŸ”§ Developer" + } + } + ] + } + ] + }, + { + "type": "button", + "label": "View Profile", + "size": "sm" + } + ] + } + ] + } + }, + { + "type": "card", + "className": "shadow-xl", + "title": "πŸ“‹ Task List", + "description": "Organize and track your tasks", + "body": { + "type": "div", + "className": "p-6 pt-0 space-y-2", + "body": [ + { + "type": "div", + "className": "flex items-center gap-3 p-3 hover:bg-gray-50 rounded-lg transition-colors border-l-4 border-l-green-500", + "body": [ + { + "type": "div", + "className": "w-5 h-5 rounded-full bg-green-500 flex items-center justify-center text-white text-xs", + "body": { + "type": "text", + "content": "βœ“" + } + }, + { + "type": "div", + "className": "flex-1", + "body": [ + { + "type": "text", + "content": "Complete project documentation", + "className": "font-medium line-through text-muted-foreground" + }, + { + "type": "text", + "content": "Due: Yesterday", + "className": "text-xs text-muted-foreground" + } + ] + }, + { + "type": "text", + "content": "βœ… Done", + "className": "text-sm font-semibold text-green-600" + } + ] + }, + { + "type": "div", + "className": "flex items-center gap-3 p-3 hover:bg-gray-50 rounded-lg transition-colors border-l-4 border-l-blue-500", + "body": [ + { + "type": "div", + "className": "w-5 h-5 rounded-full border-2 border-blue-500" + }, + { + "type": "div", + "className": "flex-1", + "body": [ + { + "type": "text", + "content": "Review pull requests", + "className": "font-medium" + }, + { + "type": "text", + "content": "Due: Today", + "className": "text-xs text-muted-foreground" + } + ] + }, + { + "type": "text", + "content": "⏳ In Progress", + "className": "text-sm font-semibold text-blue-600" + } + ] + }, + { + "type": "div", + "className": "flex items-center gap-3 p-3 hover:bg-gray-50 rounded-lg transition-colors border-l-4 border-l-orange-500", + "body": [ + { + "type": "div", + "className": "w-5 h-5 rounded-full border-2 border-orange-500" + }, + { + "type": "div", + "className": "flex-1", + "body": [ + { + "type": "text", + "content": "Prepare presentation slides", + "className": "font-medium" + }, + { + "type": "text", + "content": "Due: Tomorrow", + "className": "text-xs text-muted-foreground" + } + ] + }, + { + "type": "text", + "content": "πŸ“… Pending", + "className": "text-sm font-semibold text-orange-600" + } + ] + }, + { + "type": "div", + "className": "flex items-center gap-3 p-3 hover:bg-gray-50 rounded-lg transition-colors border-l-4 border-l-red-500", + "body": [ + { + "type": "div", + "className": "w-5 h-5 rounded-full border-2 border-red-500" + }, + { + "type": "div", + "className": "flex-1", + "body": [ + { + "type": "text", + "content": "Fix critical bug in production", + "className": "font-medium text-red-600" + }, + { + "type": "text", + "content": "Due: ASAP", + "className": "text-xs text-red-600 font-semibold" + } + ] + }, + { + "type": "text", + "content": "🚨 Urgent", + "className": "text-sm font-semibold text-red-600" + } + ] + } + ] + } + }, + { + "type": "div", + "className": "grid gap-6 lg:grid-cols-2", + "body": [ + { + "type": "card", + "className": "shadow-xl", + "title": "πŸ“Š Statistics", + "description": "Key performance indicators", + "body": { + "type": "div", + "className": "p-6 pt-0 space-y-4", + "body": [ + { + "type": "div", + "className": "space-y-2", + "body": [ + { + "type": "div", + "className": "flex items-center justify-between", + "body": [ + { + "type": "text", + "content": "Completion Rate", + "className": "text-sm font-medium" + }, + { + "type": "text", + "content": "85%", + "className": "text-sm font-bold text-green-600" + } + ] + }, + { + "type": "progress", + "value": 85, + "className": "h-2" + } + ] + }, + { + "type": "div", + "className": "space-y-2", + "body": [ + { + "type": "div", + "className": "flex items-center justify-between", + "body": [ + { + "type": "text", + "content": "Team Productivity", + "className": "text-sm font-medium" + }, + { + "type": "text", + "content": "92%", + "className": "text-sm font-bold text-blue-600" + } + ] + }, + { + "type": "progress", + "value": 92, + "className": "h-2" + } + ] + }, + { + "type": "div", + "className": "space-y-2", + "body": [ + { + "type": "div", + "className": "flex items-center justify-between", + "body": [ + { + "type": "text", + "content": "Customer Satisfaction", + "className": "text-sm font-medium" + }, + { + "type": "text", + "content": "78%", + "className": "text-sm font-bold text-orange-600" + } + ] + }, + { + "type": "progress", + "value": 78, + "className": "h-2" + } + ] + } + ] + } + }, + { + "type": "card", + "className": "shadow-xl", + "title": "πŸ† Achievements", + "description": "Milestones and badges earned", + "body": { + "type": "div", + "className": "p-6 pt-0 space-y-4", + "body": [ + { + "type": "div", + "className": "flex items-center gap-3 p-3 bg-yellow-50 rounded-lg border border-yellow-200", + "body": [ + { + "type": "text", + "content": "πŸ…", + "className": "text-3xl" + }, + { + "type": "div", + "className": "flex-1", + "body": [ + { + "type": "text", + "content": "Early Adopter", + "className": "font-semibold" + }, + { + "type": "text", + "content": "Joined in the first month", + "className": "text-xs text-muted-foreground" + } + ] + } + ] + }, + { + "type": "div", + "className": "flex items-center gap-3 p-3 bg-blue-50 rounded-lg border border-blue-200", + "body": [ + { + "type": "text", + "content": "πŸ’Ž", + "className": "text-3xl" + }, + { + "type": "div", + "className": "flex-1", + "body": [ + { + "type": "text", + "content": "Premium Member", + "className": "font-semibold" + }, + { + "type": "text", + "content": "Upgraded to premium tier", + "className": "text-xs text-muted-foreground" + } + ] + } + ] + }, + { + "type": "div", + "className": "flex items-center gap-3 p-3 bg-green-50 rounded-lg border border-green-200", + "body": [ + { + "type": "text", + "content": "🎯", + "className": "text-3xl" + }, + { + "type": "div", + "className": "flex-1", + "body": [ + { + "type": "text", + "content": "Goal Crusher", + "className": "font-semibold" + }, + { + "type": "text", + "content": "Completed 100+ tasks", + "className": "text-xs text-muted-foreground" + } + ] + } + ] + } + ] + } + } + ] + }, + { + "type": "card", + "className": "shadow-xl bg-gradient-to-r from-indigo-50 to-purple-50 border border-indigo-200", + "body": { + "type": "div", + "className": "p-6 space-y-3 text-center", + "body": [ + { + "type": "text", + "content": "✨ Built with Object UI", + "className": "text-2xl font-bold text-indigo-900" + }, + { + "type": "text", + "content": "All these beautiful data displays were created using pure JSON schemas. No React components, no CSS files - just JSON!", + "className": "text-sm text-indigo-800" + }, + { + "type": "div", + "className": "flex items-center justify-center gap-3 pt-4", + "body": [ + { + "type": "button", + "label": "View Source", + "variant": "outline", + "size": "sm" + }, + { + "type": "button", + "label": "Learn More", + "size": "sm" + } + ] + } + ] + } + } + ] + } +} diff --git a/examples/landing-page/README.md b/examples/landing-page/README.md new file mode 100644 index 0000000000..1b95ed3ea7 --- /dev/null +++ b/examples/landing-page/README.md @@ -0,0 +1,236 @@ +# Landing Page Example + +A complete marketing landing page built entirely with JSON - perfect for showcasing products and features! + +## 🎯 What You'll Learn + +- Hero sections with call-to-action buttons +- Feature cards with icons +- Statistics/metrics display +- Code comparison sections +- Gradient backgrounds and effects +- Full-page layouts +- Footer sections + +## πŸš€ Quick Start + +From the repository root, run: + +```bash +pnpm objectui serve examples/landing-page/app.json +``` + +Or using npx: + +```bash +npx @object-ui/cli serve examples/landing-page/app.json +``` + +Then open http://localhost:3000 in your browser. + +## ✨ Features Demonstrated + +- βœ… **Hero Section** - Large header with gradient background +- βœ… **Feature Cards** - 3-column grid with hover effects +- βœ… **Code Comparison** - Before/after code examples +- βœ… **Statistics** - Metrics cards with numbers +- βœ… **CTA Section** - Call-to-action with code snippet +- βœ… **Footer** - Simple footer with links +- βœ… **Gradient Backgrounds** - Multiple gradient styles +- βœ… **Hover Animations** - Scale and shadow effects +- βœ… **Responsive Layout** - Mobile-friendly design + +## πŸ“ Page Structure + +### 1. Hero Section +Gradient background with large heading and CTA buttons + +### 2. Features Section +Three-column grid showcasing benefits + +### 3. Code Comparison +Side-by-side comparison of traditional vs Object UI approach + +### 4. Social Proof +Statistics showing metrics (users, components, coverage, size) + +### 5. CTA Section +Final call-to-action with installation instructions + +### 6. Footer +Links and copyright information + +## 🎨 Customization + +### Change Hero Colors + +Modify the gradient in the hero section: + +```json +{ + "className": "bg-gradient-to-r from-blue-600 via-cyan-600 to-teal-600" +} +``` + +### Update Feature Cards + +Change icons, titles, and descriptions: + +```json +{ + "type": "text", + "content": "🎯", + "className": "text-5xl" +}, +{ + "type": "text", + "content": "Your Feature", + "className": "text-2xl font-bold" +} +``` + +### Modify Statistics + +Update the numbers and labels: + +```json +{ + "type": "text", + "content": "25K+", + "className": "text-4xl font-bold text-blue-600 mb-2" +}, +{ + "type": "text", + "content": "Happy Users", + "className": "text-sm text-muted-foreground" +} +``` + +### Add More Sections + +Insert new sections between existing ones: + +```json +{ + "type": "div", + "className": "container mx-auto px-6 py-20", + "body": [ + { + "type": "card", + "title": "New Section", + "body": { ... } + } + ] +} +``` + +## πŸ“š Design Patterns + +### Full-Width Gradient Header + +```json +{ + "type": "div", + "className": "bg-gradient-to-r from-indigo-600 via-purple-600 to-pink-600", + "body": { + "type": "div", + "className": "container mx-auto px-6 py-20" + } +} +``` + +### Feature Card with Hover Effect + +```json +{ + "type": "card", + "className": "shadow-2xl border-0 bg-gradient-to-br from-blue-50 to-cyan-50 hover:scale-105 transition-transform" +} +``` + +### Code Block Display + +```json +{ + "type": "div", + "className": "bg-gradient-to-r from-green-50 to-emerald-50 p-6 rounded-lg border border-green-200", + "body": { + "type": "div", + "className": "font-mono text-sm space-y-1" + } +} +``` + +### Backdrop Blur Effect + +```json +{ + "className": "bg-black/30 backdrop-blur-lg rounded-2xl p-8 border border-white/20" +} +``` + +## 🎨 Color Themes + +### Primary Gradient (Purple-Pink) +``` +from-indigo-600 via-purple-600 to-pink-600 +``` + +### Feature Card Gradients +- Blue: `from-blue-50 to-cyan-50` +- Purple: `from-purple-50 to-pink-50` +- Green: `from-green-50 to-emerald-50` + +### Background Gradients +- Slate: `from-slate-50 to-gray-100` +- Warm: `from-orange-50 to-red-50` + +## πŸ“Š Sections Breakdown + +### Hero (Lines 1-50) +- Gradient background +- Large heading +- Description text +- Two CTA buttons + +### Features (Lines 51-120) +- Section heading +- 3-column grid +- Feature cards with icons + +### Comparison (Lines 121-180) +- Side-by-side code +- Visual differentiation +- Before/after pattern + +### Stats (Lines 181-220) +- 4-column grid +- Large numbers +- Small labels + +### Final CTA (Lines 221-270) +- Code snippet +- Installation commands +- Action buttons + +### Footer (Lines 271-290) +- Links +- Copyright +- Dark background + +## πŸ“š Learn More + +- [Object UI Documentation](https://www.objectui.org) +- [Protocol Overview](../../docs/protocol/overview.md) +- [Page Components](../../docs/protocol/page.md) +- [Tailwind Gradients](https://tailwindcss.com/docs/gradient-color-stops) + +## πŸ”— Related Examples + +- [Dashboard](../dashboard) - Analytics interface +- [Basic Form](../basic-form) - Contact form +- [Data Display](../data-display) - Lists and cards + +--- + +**Built with ❀️ using [Object UI](https://www.objectui.org)** diff --git a/examples/landing-page/app.json b/examples/landing-page/app.json new file mode 100644 index 0000000000..b8f1362d2d --- /dev/null +++ b/examples/landing-page/app.json @@ -0,0 +1,516 @@ +{ + "type": "div", + "className": "min-h-screen bg-white", + "body": [ + { + "type": "div", + "className": "bg-gradient-to-r from-indigo-600 via-purple-600 to-pink-600", + "body": { + "type": "div", + "className": "container mx-auto px-6 py-20", + "body": [ + { + "type": "div", + "className": "text-center max-w-4xl mx-auto space-y-8", + "body": [ + { + "type": "text", + "content": "πŸš€ Object UI", + "className": "text-6xl font-extrabold text-white drop-shadow-lg" + }, + { + "type": "text", + "content": "Build Beautiful Interfaces with JSON", + "className": "text-3xl font-bold text-white/90" + }, + { + "type": "text", + "content": "The universal, schema-driven UI engine that transforms JSON into stunning React interfaces. No repetitive coding. No complex setup. Just pure productivity.", + "className": "text-xl text-white/80 leading-relaxed max-w-2xl mx-auto" + }, + { + "type": "div", + "className": "flex items-center justify-center gap-4 pt-8", + "body": [ + { + "type": "button", + "label": "🎯 Get Started", + "className": "px-8 py-4 bg-white text-indigo-600 font-semibold text-lg rounded-lg shadow-xl hover:shadow-2xl hover:scale-105 transition-all" + }, + { + "type": "button", + "label": "πŸ“– Documentation", + "variant": "outline", + "className": "px-8 py-4 border-2 border-white text-white font-semibold text-lg rounded-lg hover:bg-white hover:text-indigo-600 transition-all" + } + ] + } + ] + } + ] + } + }, + { + "type": "div", + "className": "container mx-auto px-6 py-20", + "body": [ + { + "type": "div", + "className": "text-center mb-16", + "body": [ + { + "type": "text", + "content": "✨ Why Choose Object UI?", + "className": "text-4xl font-extrabold mb-4" + }, + { + "type": "text", + "content": "Everything you need to build enterprise-grade applications faster", + "className": "text-xl text-muted-foreground" + } + ] + }, + { + "type": "div", + "className": "grid md:grid-cols-3 gap-8", + "body": [ + { + "type": "card", + "className": "shadow-2xl border-0 bg-gradient-to-br from-blue-50 to-cyan-50 hover:scale-105 transition-transform", + "body": { + "type": "div", + "className": "p-8 space-y-4", + "body": [ + { + "type": "text", + "content": "⚑", + "className": "text-5xl" + }, + { + "type": "text", + "content": "Lightning Fast", + "className": "text-2xl font-bold" + }, + { + "type": "text", + "content": "3x faster page loads than traditional low-code platforms. Built on React 18+ with automatic optimizations.", + "className": "text-muted-foreground leading-relaxed" + } + ] + } + }, + { + "type": "card", + "className": "shadow-2xl border-0 bg-gradient-to-br from-purple-50 to-pink-50 hover:scale-105 transition-transform", + "body": { + "type": "div", + "className": "p-8 space-y-4", + "body": [ + { + "type": "text", + "content": "🎨", + "className": "text-5xl" + }, + { + "type": "text", + "content": "Beautiful by Default", + "className": "text-2xl font-bold" + }, + { + "type": "text", + "content": "Professional designs using Tailwind CSS and Shadcn/UI. Fully customizable with utility classes.", + "className": "text-muted-foreground leading-relaxed" + } + ] + } + }, + { + "type": "card", + "className": "shadow-2xl border-0 bg-gradient-to-br from-green-50 to-emerald-50 hover:scale-105 transition-transform", + "body": { + "type": "div", + "className": "p-8 space-y-4", + "body": [ + { + "type": "text", + "content": "πŸ”§", + "className": "text-5xl" + }, + { + "type": "text", + "content": "Developer Friendly", + "className": "text-2xl font-bold" + }, + { + "type": "text", + "content": "TypeScript-first with complete type definitions. Zero learning curve if you know React.", + "className": "text-muted-foreground leading-relaxed" + } + ] + } + } + ] + } + ] + }, + { + "type": "div", + "className": "bg-gradient-to-r from-slate-50 to-gray-100 py-20", + "body": { + "type": "div", + "className": "container mx-auto px-6", + "body": [ + { + "type": "div", + "className": "text-center mb-16", + "body": [ + { + "type": "text", + "content": "🎯 Simple Yet Powerful", + "className": "text-4xl font-extrabold mb-4" + }, + { + "type": "text", + "content": "See how easy it is to build interfaces with JSON", + "className": "text-xl text-muted-foreground" + } + ] + }, + { + "type": "div", + "className": "max-w-4xl mx-auto", + "body": { + "type": "card", + "className": "shadow-2xl", + "body": { + "type": "div", + "className": "p-8 space-y-6", + "body": [ + { + "type": "text", + "content": "Traditional React: 200+ lines of code", + "className": "text-lg font-semibold text-muted-foreground" + }, + { + "type": "div", + "className": "bg-gradient-to-r from-red-50 to-orange-50 p-6 rounded-lg border border-red-200", + "body": { + "type": "div", + "className": "font-mono text-sm space-y-1", + "body": [ + { + "type": "text", + "content": "function UserForm() {", + "className": "text-gray-700" + }, + { + "type": "text", + "content": " const [state, setState] = useState({})", + "className": "text-gray-700 ml-4" + }, + { + "type": "text", + "content": " // ... 200+ lines of validation, handlers, JSX", + "className": "text-gray-500 ml-4" + }, + { + "type": "text", + "content": "}", + "className": "text-gray-700" + } + ] + } + }, + { + "type": "separator" + }, + { + "type": "text", + "content": "Object UI: 20 lines of JSON ✨", + "className": "text-lg font-semibold text-green-600" + }, + { + "type": "div", + "className": "bg-gradient-to-r from-green-50 to-emerald-50 p-6 rounded-lg border border-green-200", + "body": { + "type": "div", + "className": "font-mono text-sm space-y-1", + "body": [ + { + "type": "text", + "content": "{", + "className": "text-gray-700" + }, + { + "type": "text", + "content": " \"type\": \"form\",", + "className": "text-gray-700 ml-4" + }, + { + "type": "text", + "content": " \"fields\": [...],", + "className": "text-gray-700 ml-4" + }, + { + "type": "text", + "content": " \"validation\": {...}", + "className": "text-gray-700 ml-4" + }, + { + "type": "text", + "content": "}", + "className": "text-gray-700" + } + ] + } + } + ] + } + } + } + ] + } + }, + { + "type": "div", + "className": "container mx-auto px-6 py-20", + "body": [ + { + "type": "div", + "className": "text-center mb-16", + "body": [ + { + "type": "text", + "content": "πŸ† Trusted by Developers", + "className": "text-4xl font-extrabold mb-4" + }, + { + "type": "text", + "content": "Join thousands of developers building better UIs faster", + "className": "text-xl text-muted-foreground" + } + ] + }, + { + "type": "div", + "className": "grid md:grid-cols-4 gap-8 max-w-5xl mx-auto", + "body": [ + { + "type": "card", + "className": "shadow-lg text-center p-8 border-2 border-blue-100", + "body": [ + { + "type": "text", + "content": "10K+", + "className": "text-4xl font-bold text-blue-600 mb-2" + }, + { + "type": "text", + "content": "Active Users", + "className": "text-sm text-muted-foreground" + } + ] + }, + { + "type": "card", + "className": "shadow-lg text-center p-8 border-2 border-green-100", + "body": [ + { + "type": "text", + "content": "50+", + "className": "text-4xl font-bold text-green-600 mb-2" + }, + { + "type": "text", + "content": "Components", + "className": "text-sm text-muted-foreground" + } + ] + }, + { + "type": "card", + "className": "shadow-lg text-center p-8 border-2 border-purple-100", + "body": [ + { + "type": "text", + "content": "85%", + "className": "text-4xl font-bold text-purple-600 mb-2" + }, + { + "type": "text", + "content": "Test Coverage", + "className": "text-sm text-muted-foreground" + } + ] + }, + { + "type": "card", + "className": "shadow-lg text-center p-8 border-2 border-orange-100", + "body": [ + { + "type": "text", + "content": "< 50KB", + "className": "text-4xl font-bold text-orange-600 mb-2" + }, + { + "type": "text", + "content": "Bundle Size", + "className": "text-sm text-muted-foreground" + } + ] + } + ] + } + ] + }, + { + "type": "div", + "className": "bg-gradient-to-r from-indigo-600 via-purple-600 to-pink-600 py-20", + "body": { + "type": "div", + "className": "container mx-auto px-6", + "body": { + "type": "div", + "className": "text-center max-w-3xl mx-auto space-y-8", + "body": [ + { + "type": "text", + "content": "Ready to Get Started?", + "className": "text-5xl font-extrabold text-white drop-shadow-lg" + }, + { + "type": "text", + "content": "Install Object UI CLI and start building in minutes", + "className": "text-xl text-white/90" + }, + { + "type": "div", + "className": "bg-black/30 backdrop-blur-lg rounded-2xl p-8 border border-white/20", + "body": { + "type": "div", + "className": "font-mono text-left space-y-2", + "body": [ + { + "type": "text", + "content": "# Install CLI", + "className": "text-sm text-white/60" + }, + { + "type": "text", + "content": "$ npm install -g @object-ui/cli", + "className": "text-lg text-white font-semibold" + }, + { + "type": "text", + "content": "", + "className": "py-1" + }, + { + "type": "text", + "content": "# Create new app", + "className": "text-sm text-white/60" + }, + { + "type": "text", + "content": "$ objectui init my-app", + "className": "text-lg text-white font-semibold" + }, + { + "type": "text", + "content": "", + "className": "py-1" + }, + { + "type": "text", + "content": "# Start dev server", + "className": "text-sm text-white/60" + }, + { + "type": "text", + "content": "$ objectui serve app.json", + "className": "text-lg text-white font-semibold" + } + ] + } + }, + { + "type": "div", + "className": "flex items-center justify-center gap-4 pt-8", + "body": [ + { + "type": "button", + "label": "πŸš€ Start Building", + "className": "px-8 py-4 bg-white text-indigo-600 font-semibold text-lg rounded-lg shadow-xl hover:shadow-2xl hover:scale-105 transition-all" + }, + { + "type": "button", + "label": "⭐ Star on GitHub", + "variant": "outline", + "className": "px-8 py-4 border-2 border-white text-white font-semibold text-lg rounded-lg hover:bg-white hover:text-indigo-600 transition-all" + } + ] + } + ] + } + } + }, + { + "type": "div", + "className": "bg-gray-900 text-white py-12", + "body": { + "type": "div", + "className": "container mx-auto px-6", + "body": { + "type": "div", + "className": "text-center space-y-4", + "body": [ + { + "type": "text", + "content": "Built with ❀️ by the Object UI Team", + "className": "text-sm text-gray-400" + }, + { + "type": "div", + "className": "flex items-center justify-center gap-6 text-sm text-gray-400", + "body": [ + { + "type": "text", + "content": "Documentation" + }, + { + "type": "text", + "content": "β€’" + }, + { + "type": "text", + "content": "GitHub" + }, + { + "type": "text", + "content": "β€’" + }, + { + "type": "text", + "content": "Examples" + }, + { + "type": "text", + "content": "β€’" + }, + { + "type": "text", + "content": "Blog" + } + ] + }, + { + "type": "text", + "content": "Β© 2026 Object UI. MIT License.", + "className": "text-xs text-gray-500" + } + ] + } + } + } + ] +} From ac5d10ae6349326b07c181297362854163ff135f Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Thu, 15 Jan 2026 03:32:05 +0000 Subject: [PATCH 3/5] Changes before error encountered Co-authored-by: huangyiirene <7665279+huangyiirene@users.noreply.github.com> --- README.md | 31 ++++++++++++++++++++++++++----- examples/basic-form/.gitignore | 17 +++++++++++++++++ examples/dashboard/.gitignore | 17 +++++++++++++++++ examples/data-display/.gitignore | 17 +++++++++++++++++ examples/landing-page/.gitignore | 17 +++++++++++++++++ 5 files changed, 94 insertions(+), 5 deletions(-) create mode 100644 examples/basic-form/.gitignore create mode 100644 examples/dashboard/.gitignore create mode 100644 examples/data-display/.gitignore create mode 100644 examples/landing-page/.gitignore diff --git a/README.md b/README.md index 15a9333473..bd6b5beb21 100644 --- a/README.md +++ b/README.md @@ -292,7 +292,31 @@ Object UI is perfect for: ## πŸ—οΈ Examples -Check out complete example applications: +### JSON Schema Examples (Recommended) πŸš€ + +Explore ready-to-use JSON examples that showcase Object UI's capabilities: + +```bash +# Install CLI +npm install -g @object-ui/cli + +# Try different examples +objectui serve examples/basic-form/app.json # Contact form +objectui serve examples/dashboard/app.json # Analytics dashboard +objectui serve examples/data-display/app.json # Data visualization +objectui serve examples/landing-page/app.json # Marketing page +``` + +**Available Examples:** +- πŸ“ [**Basic Form**](./examples/basic-form) - Contact form with validation +- πŸ“Š [**Dashboard**](./examples/dashboard) - Analytics with metrics and feeds +- πŸ“‹ [**Data Display**](./examples/data-display) - Lists, badges, progress bars +- πŸš€ [**Landing Page**](./examples/landing-page) - Full marketing page +- 🎨 [**CLI Demo**](./examples/cli-demo) - Bilingual form demo + +[**View All Examples β†’**](./examples) + +### Full Application Examples ```bash # Clone the repository @@ -302,12 +326,9 @@ cd objectui # Install dependencies pnpm install -# Run the playground +# Run the interactive playground pnpm playground -# Run the visual designer demo -pnpm designer - # Run the prototype example pnpm prototype ``` diff --git a/examples/basic-form/.gitignore b/examples/basic-form/.gitignore new file mode 100644 index 0000000000..9f1a890ebd --- /dev/null +++ b/examples/basic-form/.gitignore @@ -0,0 +1,17 @@ +# Object UI temp files +.objectui-tmp + +# OS files +.DS_Store +Thumbs.db + +# IDE files +.vscode/ +.idea/ +*.swp +*.swo +*~ + +# Logs +*.log +npm-debug.log* diff --git a/examples/dashboard/.gitignore b/examples/dashboard/.gitignore new file mode 100644 index 0000000000..9f1a890ebd --- /dev/null +++ b/examples/dashboard/.gitignore @@ -0,0 +1,17 @@ +# Object UI temp files +.objectui-tmp + +# OS files +.DS_Store +Thumbs.db + +# IDE files +.vscode/ +.idea/ +*.swp +*.swo +*~ + +# Logs +*.log +npm-debug.log* diff --git a/examples/data-display/.gitignore b/examples/data-display/.gitignore new file mode 100644 index 0000000000..9f1a890ebd --- /dev/null +++ b/examples/data-display/.gitignore @@ -0,0 +1,17 @@ +# Object UI temp files +.objectui-tmp + +# OS files +.DS_Store +Thumbs.db + +# IDE files +.vscode/ +.idea/ +*.swp +*.swo +*~ + +# Logs +*.log +npm-debug.log* diff --git a/examples/landing-page/.gitignore b/examples/landing-page/.gitignore new file mode 100644 index 0000000000..9f1a890ebd --- /dev/null +++ b/examples/landing-page/.gitignore @@ -0,0 +1,17 @@ +# Object UI temp files +.objectui-tmp + +# OS files +.DS_Store +Thumbs.db + +# IDE files +.vscode/ +.idea/ +*.swp +*.swo +*~ + +# Logs +*.log +npm-debug.log* From 0dddf0ee292fd8ec9709e1e18cda76443f713aa7 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Thu, 15 Jan 2026 04:00:53 +0000 Subject: [PATCH 4/5] Fix repository URL inconsistency in examples README Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com> --- examples/README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/examples/README.md b/examples/README.md index 45ef5ef817..f773c96d05 100644 --- a/examples/README.md +++ b/examples/README.md @@ -222,8 +222,8 @@ See [CONTRIBUTING.md](../CONTRIBUTING.md) for guidelines. ## ❓ Need Help? -- [Open an Issue](https://github.com/objectstack-ai/objectui/issues) -- [Join Discussions](https://github.com/objectstack-ai/objectui/discussions) +- [Open an Issue](https://github.com/objectql/objectui/issues) +- [Join Discussions](https://github.com/objectql/objectui/discussions) - [Read the Docs](https://www.objectui.org) ## πŸ“ License From b9464e81818a237d4119f9cf3d38f640cf001f1b Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Thu, 15 Jan 2026 04:02:23 +0000 Subject: [PATCH 5/5] Update documentation to reference new JSON examples Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com> --- docs/CLI_GUIDE.md | 56 +++++++++++++++++++++++++++++++++++++++ docs/guide/quick-start.md | 18 +++++++++---- 2 files changed, 69 insertions(+), 5 deletions(-) diff --git a/docs/CLI_GUIDE.md b/docs/CLI_GUIDE.md index 4f96e68fc0..2c79d51e64 100644 --- a/docs/CLI_GUIDE.md +++ b/docs/CLI_GUIDE.md @@ -388,6 +388,62 @@ You can also define navigation in your main schema using button click handlers: **Note:** Layout support with `app.json` and `_layout.json` is planned for a future release. Currently, all routing is handled at the page level. +## Running Example Projects + +The Object UI repository includes ready-to-use examples that demonstrate various UI patterns and features. You can run them directly using the CLI: + +### Available Examples + +1. **Basic Form** - Contact form with validation + ```bash + objectui serve examples/basic-form/app.json + ``` + +2. **Dashboard** - Analytics dashboard with metrics and activity feeds + ```bash + objectui serve examples/dashboard/app.json + ``` + +3. **Data Display** - User profiles, task lists, progress bars, and badges + ```bash + objectui serve examples/data-display/app.json + ``` + +4. **Landing Page** - Complete marketing page with hero section and CTAs + ```bash + objectui serve examples/landing-page/app.json + ``` + +5. **CLI Demo** - Bilingual form demonstration + ```bash + objectui serve examples/cli-demo/app.schema.json + ``` + +### Exploring Examples + +Each example includes: +- `app.json` - The JSON schema definition +- `README.md` - Detailed documentation and customization guide +- `.gitignore` - Git ignore configuration + +To explore an example: + +```bash +# Clone the repository +git clone https://github.com/objectql/objectui.git +cd objectui/examples + +# View available examples +ls -la + +# Run an example +objectui serve basic-form/app.json +``` + +Then open http://localhost:3000 in your browser and start editing the `app.json` file to see live updates! + +For more details, see the [Examples README](https://github.com/objectql/objectui/tree/main/examples). + ## FAQ ### 1. How to customize styles? diff --git a/docs/guide/quick-start.md b/docs/guide/quick-start.md index bbe1eed5d8..3796ec24c2 100644 --- a/docs/guide/quick-start.md +++ b/docs/guide/quick-start.md @@ -179,11 +179,19 @@ Now that you have the basics: ## Examples -Check out complete examples: - -- [Form Example](https://github.com/objectql/objectui/tree/main/examples/forms) -- [CRUD Example](https://github.com/objectql/objectui/tree/main/examples/crud) -- [Dashboard Example](https://github.com/objectql/objectui/tree/main/examples/dashboard) +Check out our JSON-based examples that you can run immediately: + +- [Basic Form](https://github.com/objectql/objectui/tree/main/examples/basic-form) - Contact form with validation +- [Dashboard](https://github.com/objectql/objectui/tree/main/examples/dashboard) - Analytics dashboard with metrics +- [Data Display](https://github.com/objectql/objectui/tree/main/examples/data-display) - Lists, badges, and progress bars +- [Landing Page](https://github.com/objectql/objectui/tree/main/examples/landing-page) - Complete marketing page +- [All Examples](https://github.com/objectql/objectui/tree/main/examples) - View the full collection + +Run any example with the CLI: +```bash +npm install -g @object-ui/cli +objectui serve examples/basic-form/app.json +``` ## Need Help?