diff --git a/README.md b/README.md index 6a6035ce7..d0eab9714 100644 --- a/README.md +++ b/README.md @@ -207,5 +207,3 @@ Licensed under the [MIT License](https://www.google.com/search?q=LICENSE).
Built with ❤️ by the Object Ecosystem Team.
- -``` diff --git a/apps/playground/.gitignore b/apps/playground/.gitignore new file mode 100644 index 000000000..a547bf36d --- /dev/null +++ b/apps/playground/.gitignore @@ -0,0 +1,24 @@ +# Logs +logs +*.log +npm-debug.log* +yarn-debug.log* +yarn-error.log* +pnpm-debug.log* +lerna-debug.log* + +node_modules +dist +dist-ssr +*.local + +# Editor directories and files +.vscode/* +!.vscode/extensions.json +.idea +.DS_Store +*.suo +*.ntvs* +*.njsproj +*.sln +*.sw? diff --git a/apps/playground/README.md b/apps/playground/README.md new file mode 100644 index 000000000..b871400d8 --- /dev/null +++ b/apps/playground/README.md @@ -0,0 +1,69 @@ +# Object UI Playground + +A live, interactive playground to showcase Object UI's schema-driven rendering capabilities. + +## Features + +- **Split View Editor**: JSON editor with syntax validation on the left, live preview on the right +- **Real-time Rendering**: See your changes instantly as you edit JSON schemas +- **Example Gallery**: Curated examples organized by category (Primitives, Layouts, Forms) +- **Responsive Preview**: Toggle between desktop, tablet, and mobile viewports +- **Copy Schema**: One-click copy to clipboard for easy integration +- **Error Highlighting**: Clear JSON syntax error messages + +## Examples Included + +### Primitives +- Simple page layouts +- Input component states (required, disabled, email) +- Button variants (destructive, outline, ghost, etc.) + +### Layouts +- Responsive grid layouts +- Analytics dashboard with KPI cards +- Tabs component demonstration + +### Forms +- User registration form with various input types +- Grid-based form layouts + +## Running the Playground + +From the monorepo root: + +```bash +pnpm install +pnpm --filter @apps/playground dev +``` + +Or from this directory: + +```bash +pnpm install +pnpm dev +``` + +The playground will be available at `http://localhost:5174` + +## Building for Production + +```bash +pnpm build +``` + +## Purpose + +This playground serves as: + +1. **Product Demo**: Show what Object UI can do without any backend +2. **Learning Tool**: Help developers understand schema structure +3. **Testing Ground**: Experiment with different configurations +4. **Documentation**: Live, interactive examples are better than static code samples + +## Key Selling Points Demonstrated + +- ✅ **Tailwind Native**: Edit `className` properties and see instant results +- ✅ **Schema-Driven**: Everything is pure JSON - no JSX needed +- ✅ **Responsive**: Built-in responsive grid layouts +- ✅ **Complete**: From simple buttons to complex dashboards +- ✅ **Standalone**: No backend required - works with any data source diff --git a/apps/playground/index.html b/apps/playground/index.html new file mode 100644 index 000000000..ea85be41d --- /dev/null +++ b/apps/playground/index.html @@ -0,0 +1,13 @@ + + + + + + + Object UI - Live Playground + + +
+ + + diff --git a/apps/playground/package.json b/apps/playground/package.json new file mode 100644 index 000000000..30a8a2490 --- /dev/null +++ b/apps/playground/package.json @@ -0,0 +1,32 @@ +{ + "name": "@apps/playground", + "private": true, + "license": "MIT", + "version": "0.0.0", + "type": "module", + "scripts": { + "dev": "vite", + "build": "tsc -b && vite build", + "lint": "eslint .", + "preview": "vite preview" + }, + "dependencies": { + "@object-ui/components": "workspace:*", + "@object-ui/core": "workspace:*", + "@object-ui/react": "workspace:*", + "lucide-react": "^0.469.0", + "react": "^18.3.1", + "react-dom": "^18.3.1" + }, + "devDependencies": { + "@types/react": "^18.3.12", + "@types/react-dom": "^18.3.1", + "@vitejs/plugin-react": "^5.1.1", + "autoprefixer": "^10.4.23", + "postcss": "^8.5.6", + "tailwindcss": "^3.4.19", + "tailwindcss-animate": "^1.0.7", + "typescript": "~5.9.3", + "vite": "^7.2.4" + } +} diff --git a/apps/playground/postcss.config.js b/apps/playground/postcss.config.js new file mode 100644 index 000000000..2e7af2b7f --- /dev/null +++ b/apps/playground/postcss.config.js @@ -0,0 +1,6 @@ +export default { + plugins: { + tailwindcss: {}, + autoprefixer: {}, + }, +} diff --git a/apps/playground/src/App.tsx b/apps/playground/src/App.tsx new file mode 100644 index 000000000..1b13f23a2 --- /dev/null +++ b/apps/playground/src/App.tsx @@ -0,0 +1,192 @@ +import { useState, useEffect } from 'react'; +import { SchemaRenderer } from '@object-ui/react'; +import '@object-ui/components'; +import { examples, exampleCategories, ExampleKey } from './data/examples'; +import { Monitor, Tablet, Smartphone, Copy, Check, Code2 } from 'lucide-react'; + +type ViewportSize = 'desktop' | 'tablet' | 'mobile'; + +export default function Playground() { + const [selectedExample, setSelectedExample] = useState('dashboard'); + const [code, setCode] = useState(examples['dashboard']); + const [schema, setSchema] = useState(null); + const [jsonError, setJsonError] = useState(null); + const [viewportSize, setViewportSize] = useState('desktop'); + const [copied, setCopied] = useState(false); + + // Real-time JSON parsing + useEffect(() => { + try { + const parsed = JSON.parse(code); + setSchema(parsed); + setJsonError(null); + } catch (e) { + setJsonError((e as Error).message); + // Keep previous schema on error + } + }, [code]); + + const handleExampleChange = (key: ExampleKey) => { + setSelectedExample(key); + setCode(examples[key]); + }; + + const handleCopySchema = async () => { + try { + await navigator.clipboard.writeText(code); + setCopied(true); + setTimeout(() => setCopied(false), 2000); + } catch (err) { + console.error('Failed to copy:', err); + } + }; + + const viewportStyles: Record = { + desktop: 'w-full', + tablet: 'max-w-3xl mx-auto', + mobile: 'max-w-md mx-auto' + }; + + return ( +
+ {/* 1. Sidebar: Example Selector */} + + + {/* 2. Middle: Code Editor */} +
+
+
+ +

JSON Schema

+
+ +
+ + {jsonError && ( +
+ JSON Error: {jsonError} +
+ )} + +
+