diff --git a/.github/workflows/deploy-docs.yml b/.github/workflows/deploy-docs.yml new file mode 100644 index 000000000..983219dc7 --- /dev/null +++ b/.github/workflows/deploy-docs.yml @@ -0,0 +1,77 @@ +name: Deploy Documentation + +on: + push: + branches: + - main + paths: + - 'docs/**' + - '.github/workflows/deploy-docs.yml' + workflow_dispatch: + +permissions: + contents: read + pages: write + id-token: write + +concurrency: + group: pages + cancel-in-progress: false + +jobs: + build: + runs-on: ubuntu-latest + steps: + - name: Checkout + uses: actions/checkout@v4 + with: + fetch-depth: 0 + + - name: Setup Node + uses: actions/setup-node@v4 + with: + node-version: 20 + + - name: Setup pnpm + uses: pnpm/action-setup@v4 + with: + version: 8 + + - name: Get pnpm store directory + shell: bash + run: | + echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV + + - name: Setup pnpm cache + uses: actions/cache@v4 + with: + path: ${{ env.STORE_PATH }} + key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }} + restore-keys: | + ${{ runner.os }}-pnpm-store- + + - name: Install dependencies + run: pnpm install --frozen-lockfile + + - name: Build documentation + run: pnpm docs:build + + - name: Setup Pages + uses: actions/configure-pages@v4 + + - name: Upload artifact + uses: actions/upload-pages-artifact@v3 + with: + path: docs/.vitepress/dist + + deploy: + environment: + name: github-pages + url: ${{ steps.deployment.outputs.page_url }} + needs: build + runs-on: ubuntu-latest + name: Deploy + steps: + - name: Deploy to GitHub Pages + id: deployment + uses: actions/deploy-pages@v4 diff --git a/.gitignore b/.gitignore index 9d76b7f61..dfd0056a8 100644 --- a/.gitignore +++ b/.gitignore @@ -36,3 +36,7 @@ Thumbs.db # ObjectUI specific *.umd.js *.esm.js + +# VitePress build output +docs/.vitepress/dist +docs/.vitepress/cache diff --git a/README.md b/README.md index c8c3e7b1a..1bd613303 100644 --- a/README.md +++ b/README.md @@ -9,7 +9,7 @@ A high-performance, schema-driven UI system built on **React 18**, **Tailwind CS [![CI](https://github.com/objectql/object-ui/actions/workflows/ci.yml/badge.svg)](https://github.com/objectql/object-ui/actions/workflows/ci.yml) [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT) -[Documentation](https://objectui.org) · [Playground](https://object-ui.org/playground) · [Report Bug](https://github.com/objectql/object-ui/issues) +[Documentation](https://www.objectui.org) · [Playground](https://www.objectui.org/playground) · [Report Bug](https://github.com/objectql/object-ui/issues) diff --git a/docs/.vitepress/config.mts b/docs/.vitepress/config.mts new file mode 100644 index 000000000..53aac67fc --- /dev/null +++ b/docs/.vitepress/config.mts @@ -0,0 +1,84 @@ +import { defineConfig } from 'vitepress' + +// https://vitepress.dev/reference/site-config +export default defineConfig({ + title: "Object UI", + description: "The Modular Interface Engine for the Enterprise", + base: '/', + ignoreDeadLinks: true, + + themeConfig: { + // https://vitepress.dev/reference/default-theme-config + logo: '/logo.svg', + + nav: [ + { text: 'Home', link: '/' }, + { text: 'Guide', link: '/guide/introduction' }, + { text: 'Roadmap', link: '/ROADMAP' }, + { text: 'Protocol', link: '/protocol/overview' }, + { text: 'API', link: '/api/core' } + ], + + sidebar: { + '/guide/': [ + { + text: 'Getting Started', + items: [ + { text: 'Introduction', link: '/guide/introduction' }, + { text: 'Quick Start', link: '/guide/quick-start' }, + { text: 'Installation', link: '/guide/installation' } + ] + }, + { + text: 'Core Concepts', + items: [ + { text: 'Schema Rendering', link: '/guide/schema-rendering' }, + { text: 'Component Registry', link: '/guide/component-registry' }, + { text: 'Expression System', link: '/guide/expressions' } + ] + } + ], + + '/protocol/': [ + { + text: 'Protocol Specifications', + items: [ + { text: 'Overview', link: '/protocol/overview' }, + { text: 'Object', link: '/protocol/object' }, + { text: 'View', link: '/protocol/view' }, + { text: 'Page', link: '/protocol/page' }, + { text: 'Form', link: '/protocol/form' }, + { text: 'Menu', link: '/protocol/menu' }, + { text: 'App', link: '/protocol/app' }, + { text: 'Report', link: '/protocol/report' } + ] + } + ], + + '/api/': [ + { + text: 'API Reference', + items: [ + { text: 'Core', link: '/api/core' }, + { text: 'React', link: '/api/react' }, + { text: 'Components', link: '/api/components' }, + { text: 'Designer', link: '/api/designer' } + ] + } + ] + }, + + socialLinks: [ + { icon: 'github', link: 'https://github.com/objectql/object-ui' } + ], + + footer: { + message: 'Released under the MIT License.', + copyright: 'Copyright © 2024-present ObjectQL' + }, + + search: { + provider: 'local' + } + } +}) diff --git a/docs/README.md b/docs/README.md new file mode 100644 index 000000000..2652665ca --- /dev/null +++ b/docs/README.md @@ -0,0 +1,81 @@ +# Object UI Documentation + +This directory contains the VitePress documentation site for Object UI. + +## Development + +Start the development server: + +```bash +pnpm docs:dev +``` + +Visit `http://localhost:5173` to see the site. + +## Building + +Build the documentation: + +```bash +pnpm docs:build +``` + +The built site will be in `docs/.vitepress/dist/`. + +Preview the built site: + +```bash +pnpm docs:preview +``` + +## Deployment + +The documentation is automatically deployed to GitHub Pages when changes are pushed to the main branch. + +See `.github/workflows/deploy-docs.yml` for the deployment configuration. + +## Structure + +``` +docs/ +├── .vitepress/ +│ ├── config.mts # VitePress configuration +│ └── dist/ # Build output (generated) +├── guide/ # User guides +│ ├── introduction.md +│ ├── quick-start.md +│ └── installation.md +├── protocol/ # Protocol specifications +│ ├── overview.md +│ ├── object.md +│ ├── view.md +│ └── ... +├── api/ # API documentation +│ ├── core.md +│ ├── react.md +│ ├── components.md +│ └── designer.md +├── index.md # Homepage +├── roadmap.md # Public roadmap +└── package.json # Docs workspace config +``` + +## Adding Content + +### New Guide Page + +1. Create a new `.md` file in `guide/` +2. Add it to the sidebar in `.vitepress/config.mts` + +### New Protocol Spec + +1. Create a new `.md` file in `protocol/` +2. Add it to the protocol sidebar section in `.vitepress/config.mts` + +## Customization + +Edit `.vitepress/config.mts` to customize: +- Navigation menu +- Sidebar structure +- Site metadata +- Theme settings diff --git a/docs/ROADMAP.md b/docs/ROADMAP.md new file mode 100644 index 000000000..3a5e7047c --- /dev/null +++ b/docs/ROADMAP.md @@ -0,0 +1,295 @@ +# Object UI Roadmap +## What's Coming Next + +Welcome! This roadmap shows what we're building for Object UI and when you can expect it. We're committed to transparency, so you can plan your projects around our releases. + +**Last Updated**: January 2026 · **Updated Monthly** + +--- + +## 🎯 Our Vision + +Object UI makes building beautiful, performant interfaces as simple as writing JSON. No deep expertise in React, design systems, or CSS required—just describe what you want, and we handle the rest. + +> **"From JSON to world-class UI in minutes"** + +We're building this for developers who want to: +- ⚡ **Build faster**: Stop writing repetitive UI code +- 🎨 **Look better**: Get professional designs out of the box +- 📱 **Work everywhere**: One codebase for web, mobile, and beyond +- 🤝 **Collaborate easily**: Real-time editing and version control built-in + +--- + +## 🚀 What Makes Object UI Different + +### For You as a Developer + +**Faster Development** +- Create complete CRUD interfaces in minutes, not days +- Pre-built components that just work +- AI helps you write the JSON schema + +**Better Performance** +- **3x faster** page loads than traditional low-code platforms +- **6x smaller** bundle sizes (< 50KB vs 300KB+) +- Built on modern React 18+ with automatic optimizations + +**Easy to Learn** +- If you know React, you already know most of Object UI +- Full TypeScript support with autocomplete +- Works with your existing tools and workflows + +**Full Control** +- Extend or customize any component +- Use as much or as little as you need +- Export to standard React code anytime + +--- + +## 📅 Release Timeline + +### Q1 2026: Foundation (Available March 2026) + +#### Core Features You'll Get +✅ **Schema-Driven Rendering** +Write JSON, get beautiful UI instantly: + +```json +{ + "type": "form", + "title": "Contact Us", + "body": [ + { "type": "input", "name": "email", "label": "Your Email" }, + { "type": "textarea", "name": "message", "label": "Message" } + ] +} +``` + +✅ **20+ Production-Ready Components** +Everything you need to build real applications: +- Forms: Input, Select, Checkbox, Radio, DatePicker, File Upload +- Data: Table, List, Card, Tree View +- Layout: Grid, Flex, Container, Tabs +- Feedback: Alerts, Toasts, Dialogs, Loading States + +✅ **Expression System** +Make your UI dynamic with simple expressions: +```javascript +// Show/hide based on conditions +visibleOn: "${user.role === 'admin'}" + +// Format data on the fly +value: "${formatDate(createdAt, 'MMM DD')}" +``` + +✅ **Playground & Docs** +- Interactive playground to try everything +- Complete documentation with examples +- Video tutorials to get started + +**What this means for you**: Start building real applications with Object UI. Perfect for admin panels, dashboards, and internal tools. + +--- + +### Q2 2026: Power Features (Available June 2026) + +#### New Features Coming + +🎯 **Smart Data Management** +- Connect to any REST or GraphQL API +- Automatic caching and pagination +- Optimistic updates for instant UX +- Offline support built-in + +🎯 **Advanced Components** +- Rich Text Editor (like Notion) +- Charts & Visualizations (powered by Recharts) +- Drag-and-Drop Interfaces +- Maps & Geolocation +- Video Players +- Code Editors + +🎯 **Theme System** +- Light/dark mode out of the box +- Customize colors, fonts, spacing +- 5+ professional themes included +- Create your own brand theme in minutes + +**What this means for you**: Build complex, data-driven applications. Perfect for CRMs, analytics dashboards, and content management systems. + +--- + +### Q3 2026: Visual Designer (Available September 2026) + +This is where it gets exciting! Build UIs without writing any code. + +#### The Designer Experience + +🎨 **Drag-and-Drop Canvas** +- Drag components from the palette +- See exactly what you're building +- Edit properties with a visual panel +- Arrange layouts visually + +🎨 **AI-Powered** +Just describe what you want: +> "Create a user profile page with avatar, bio, and recent activity" + +The AI generates the complete schema for you. Edit visually or tweak the JSON. + +🎨 **Real-Time Collaboration** +- Work with your team like in Google Docs +- See cursor positions and changes live +- Comment on specific components +- No more "sending updated files" + +🎨 **Version Control** +- Built-in Git integration +- Create branches for experiments +- Review changes before merging +- Rollback anytime + +**What this means for you**: Non-developers can build UIs. Designers and developers collaborate in real-time. Everyone moves faster. + +--- + +### Q4 2026: Enterprise Ready (Available December 2026) + +Making Object UI ready for your biggest projects. + +#### Enterprise Features + +🏢 **Security & Permissions** +- Role-based access control +- Field-level permissions +- Data masking for sensitive info +- SOC 2 compliant + +🏢 **Performance at Scale** +- Virtual scrolling for huge lists (100K+ items) +- Automatic code splitting +- CDN optimization +- Service Worker caching + +🏢 **Global Ready** +- Support for 20+ languages +- Right-to-left (RTL) layouts +- Timezone handling +- Currency formatting + +🏢 **Audit & Analytics** +- Track who changed what +- Usage analytics dashboard +- Performance monitoring +- Error tracking + +**What this means for you**: Use Object UI for mission-critical applications at any scale. + +--- + +## 🎁 What You Can Do Today + +While we're building the future, you can already: + +### Try the Preview +We have an early preview available! Check out our [Playground](https://objectui.org/playground) to see what's possible. + +### Join the Community +- ⭐ **Star us on GitHub**: [objectql/object-ui](https://github.com/objectql/object-ui) +- 📧 **Email us**: hello@objectui.org + +### Shape the Future +Your feedback matters! Tell us: +- What features do you need most? +- What problems are you trying to solve? +- What would make your life easier? + +Open an issue on GitHub or email us at hello@objectui.org + +--- + +## 🔮 Beyond 2026: The Future + +Here's what we're dreaming about for 2027 and beyond: + +### Multi-Framework Support +Use Object UI with Vue, Svelte, or any framework +``` +React (2026) → Vue (2027) → Svelte (2027) +``` + +### True Cross-Platform +One schema, truly everywhere: +- ✅ Web (responsive) +- 📱 Mobile (React Native) +- 💻 Desktop (Electron) +- 🎯 Mini Programs (WeChat, Alipay) + +### Next-Level AI +- Generate entire applications from descriptions +- Automatically optimize for performance +- Smart accessibility improvements +- Design suggestions based on best practices + +### 3D & Immersive +- WebGL component library +- VR/AR interface building +- 3D data visualizations + +--- + +## ❓ Frequently Asked Questions + +### When will Object UI be production-ready? +**March 2026** for the core features. We have a preview available now that you can evaluate. + +### Will it always be open source? +Yes! The core will always be MIT licensed. We may offer paid enterprise features, but the community edition will be powerful on its own. + +### How does this compare to [other tool]? +We're focused on: +- Modern tech stack (React 18, Tailwind, TypeScript) +- Developer-first experience +- Performance (3x faster, 6x smaller) +- True modularity (use what you need) + +### Can I use this with my existing React app? +Absolutely! Object UI is designed to integrate seamlessly. Use it for one page or your entire app. + +### What if I need a feature not on the roadmap? +Tell us! Open a GitHub issue. For custom features, we can discuss enterprise support. + +### Will my schemas from Q1 work in Q4? +Yes. We're committed to backward compatibility. Your schemas will keep working as we add features. + +--- + +## 📬 Stay Updated + +Want to know when new features launch? Here's how to stay in the loop: + +- ⭐ **Star on GitHub**: Watch releases at [objectql/object-ui](https://github.com/objectql/object-ui) +- 📧 **Email**: Contact us at hello@objectui.org for announcements + +We update this roadmap monthly with our progress. + +--- + +## 🙏 Thank You + +Object UI is built by developers, for developers. Thank you for your interest and support. We can't wait to see what you build! + +**Questions?** Email us at hello@objectui.org + +**Want to contribute?** Open an issue or pull request on [GitHub](https://github.com/objectql/object-ui) + +--- + +
+ +*Building the future of interface development, one JSON schema at a time* 🚀 + +**[GitHub](https://github.com/objectql/object-ui)** · **[Documentation](https://objectui.org)** · **[Playground](https://objectui.org/playground)** + +
diff --git a/docs/api/components.md b/docs/api/components.md new file mode 100644 index 000000000..280a1da63 --- /dev/null +++ b/docs/api/components.md @@ -0,0 +1,115 @@ +# Components API + +The `@object-ui/components` package provides pre-built UI components that implement the Object UI protocol. + +## Installation + +```bash +npm install @object-ui/components +``` + +## Registration + +Register all default components: + +```tsx +import { registerDefaultRenderers } from '@object-ui/components' + +registerDefaultRenderers() +``` + +Or register individual components: + +```tsx +import { Button, Input, Form } from '@object-ui/components' +import { registerRenderer } from '@object-ui/react' + +registerRenderer('button', Button) +registerRenderer('input', Input) +registerRenderer('form', Form) +``` + +## Component List + +### Form Components + +- `input` - Text input field +- `textarea` - Multi-line text input +- `select` - Dropdown select +- `checkbox` - Checkbox input +- `radio` - Radio button +- `date-picker` - Date selection +- `file-upload` - File upload + +### Data Display + +- `table` - Data table with sorting/pagination +- `list` - List view +- `card` - Card container +- `tree` - Tree view + +### Layout + +- `grid` - Grid layout +- `flex` - Flexbox layout +- `container` - Container wrapper +- `tabs` - Tab navigation + +### Feedback + +- `alert` - Alert messages +- `toast` - Toast notifications +- `dialog` - Modal dialog +- `loading` - Loading indicators + +## Customization + +### Styling + +All components accept Tailwind classes: + +```json +{ + "type": "button", + "className": "bg-blue-500 hover:bg-blue-700 text-white" +} +``` + +### Extending Components + +Create custom components: + +```tsx +import { Button } from '@object-ui/components' + +function CustomButton(props) { + return ( +