Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -43,3 +43,8 @@ docs/.vitepress/cache

# Object UI CLI temporary files
.objectui-tmp

# Fumadocs
apps/site/.next
apps/site/.map.ts
apps/site/.source
32 changes: 32 additions & 0 deletions apps/site/.gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
# Dependencies
/node_modules

# Next.js
/.next/
/out/

# Production
/build

# Misc
.DS_Store
*.pem

# Debug
npm-debug.log*
yarn-debug.log*
yarn-error.log*

# Local env files
.env*.local

# Vercel
.vercel

# TypeScript
*.tsbuildinfo
next-env.d.ts

# Fumadocs
.map.ts
.source
71 changes: 71 additions & 0 deletions apps/site/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,71 @@
# Object UI Documentation Site (Fumadocs Migration - In Progress)

This is the official documentation site for Object UI, being migrated to [Fumadocs](https://fumadocs.vercel.app/).

## Status

🚧 **Work in Progress** - The site structure is complete but there are issues with the fumadocs source API integration that need to be resolved.

### Completed
- ✅ Next.js 15 + TypeScript setup
- ✅ Tailwind CSS configuration
- ✅ Fumadocs UI integration
- ✅ MDX content processing
- ✅ Basic documentation pages created
- ✅ Homepage and layout structure

### Known Issues
- ⚠️ Route generation not working - investigating fumadocs 15.x API changes
- The `.source` output from fumadocs-mdx needs proper integration with loader
- `createMDXSource` API compatibility issue with runtime-processed docs/meta

## Development

```bash
# Install dependencies
pnpm install

# Start development server (NOTE: routes currently return 404)
pnpm dev

# Build for production
pnpm build
```

## Project Structure

```
apps/site/
├── app/ # Next.js app directory
│ ├── docs/ # Documentation pages
│ ├── layout.tsx # Root layout
│ └── page.tsx # Homepage
├── content/ # MDX documentation content
│ └── docs/ # Documentation markdown files
├── lib/ # Library code
│ └── source.ts # Fumadocs source configuration
├── public/ # Static assets
├── next.config.mjs # Next.js configuration
├── tailwind.config.ts # Tailwind CSS configuration
└── source.config.ts # Fumadocs MDX configuration
```

## Technical Notes

The fumadocs-mdx compiler generates a `.source` directory with processed docs and meta exports. These are wrapped by `_runtime.doc()` and `_runtime.meta()` functions. The correct integration with fumadocs-core's `loader` and `createMDXSource` needs investigation based on fumadocs 15.x API.

## Next Steps

1. Investigate correct fumadocs 15.x API for integrating `.source` exports
2. Fix route generation to resolve 404 errors
3. Add search functionality
4. Migrate remaining documentation content
5. Set up deployment

## Tech Stack

- [Next.js 15](https://nextjs.org/) - React framework
- [Fumadocs](https://fumadocs.vercel.app/) - Documentation framework
- [Tailwind CSS](https://tailwindcss.com/) - Styling
- [TypeScript](https://www.typescriptlang.org/) - Type safety

50 changes: 50 additions & 0 deletions apps/site/app/docs/[[...slug]]/page.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
import { source } from '@/lib/source';
import type { Metadata } from 'next';
import {
DocsPage,
DocsBody,
DocsDescription,
DocsTitle,
} from 'fumadocs-ui/page';
import { notFound } from 'next/navigation';

export default async function Page({
params,
}: {
params: Promise<{ slug?: string[] }>;
}) {
const { slug } = await params;
const page = source.getPage(slug);
if (!page) notFound();

// Type assertion needed due to custom data mapping
const MDX = (page.data as any).body;
Copy link

Copilot AI Jan 20, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Type assertion to any removes type safety. Define a proper interface for the page data structure to maintain type safety throughout the component.

Copilot uses AI. Check for mistakes.

return (
<DocsPage toc={(page.data as any).toc} full={(page.data as any).full}>
Copy link

Copilot AI Jan 20, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Multiple type assertions to any in the same expression reduces type safety. Define an interface for the expected page data structure with properties like toc, full, title, description, and body.

Copilot uses AI. Check for mistakes.
<DocsTitle>{page.data.title}</DocsTitle>
<DocsDescription>{page.data.description}</DocsDescription>
<DocsBody>
<MDX />
</DocsBody>
</DocsPage>
);
}

export async function generateStaticParams() {
return source.generateParams();
}

export async function generateMetadata(props: {
params: Promise<{ slug?: string[] }>;
}): Promise<Metadata> {
const params = await props.params;
const page = source.getPage(params.slug);
if (!page) notFound();

return {
title: page.data.title,
description: page.data.description,
};
}

11 changes: 11 additions & 0 deletions apps/site/app/docs/layout.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
import { source } from '@/lib/source';
import type { ReactNode } from 'react';
import { DocsLayout } from 'fumadocs-ui/layouts/docs';

export default function Layout({ children }: { children: ReactNode }) {
return (
<DocsLayout tree={source.pageTree} nav={{ title: 'Object UI' }}>
{children}
</DocsLayout>
);
}
3 changes: 3 additions & 0 deletions apps/site/app/global.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
13 changes: 13 additions & 0 deletions apps/site/app/layout.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
import './global.css';
import { RootProvider } from 'fumadocs-ui/provider';
import type { ReactNode } from 'react';

export default function Layout({ children }: { children: ReactNode }) {
return (
<html lang="en" suppressHydrationWarning>
<body>
<RootProvider>{children}</RootProvider>
</body>
</html>
);
}
20 changes: 20 additions & 0 deletions apps/site/app/page.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
import Link from 'next/link';

export default function HomePage() {
return (
<main className="flex min-h-screen flex-col items-center justify-center p-24">
<div className="text-center">
<h1 className="mb-4 text-4xl font-bold">Object UI</h1>
<p className="mb-8 text-xl text-muted-foreground">
A Universal, Schema-Driven UI Engine built on React, Tailwind, and Shadcn UI.
</p>
<Link
href="/docs"
className="inline-flex items-center justify-center rounded-md bg-primary px-8 py-3 text-sm font-medium text-primary-foreground hover:bg-primary/90"
>
Get Started
</Link>
</div>
</main>
);
}
52 changes: 52 additions & 0 deletions apps/site/content/docs/index.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
---
title: Introduction
description: Welcome to Object UI - A Universal, Schema-Driven UI Engine
---

# Introduction

**Object UI** is a Universal, Schema-Driven UI Engine built on React, Tailwind CSS, and Shadcn UI. It allows you to build enterprise-grade interfaces from JSON schema definitions.

## Key Features

- 🚀 **Schema-Driven**: Define your entire UI using JSON schemas
- 🎨 **Beautiful by Default**: Built on Tailwind CSS and Shadcn UI
- 🔌 **Plugin Architecture**: Extensible through a powerful plugin system
- 📱 **Responsive**: Mobile-first design approach
- ♿ **Accessible**: WCAG 2.1 AA compliant
- 🌗 **Theme Support**: Light and dark mode out of the box

## Quick Start

```bash
# Install dependencies
pnpm install @object-ui/react @object-ui/components

# Start building with JSON
import { ObjectUIRenderer } from '@object-ui/react';
Copy link

Copilot AI Jan 20, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The component name ObjectUIRenderer does not align with the architectural guideline that references <SchemaRenderer> as the primary runtime component. Consider using SchemaRenderer for consistency with the documented architecture.

Copilot generated this review using guidance from repository custom instructions.

const schema = {
type: 'Container',
children: [
{ type: 'Text', props: { value: 'Hello World' } }
]
};

<ObjectUIRenderer schema={schema} />
```

## Architecture

Object UI follows a multi-package architecture:

- **@object-ui/types**: Core type definitions and protocols
- **@object-ui/core**: Schema registry and validation engine
- **@object-ui/react**: React runtime and renderer
- **@object-ui/components**: UI component library
- **@object-ui/designer**: Visual schema designer

## Next Steps

- [Quick Start Guide](/docs/quick-start)
- [Installation](/docs/installation)
- [Component Reference](/docs/components)
87 changes: 87 additions & 0 deletions apps/site/content/docs/installation.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,87 @@
---
title: Installation
description: How to install and set up Object UI in your project
---

# Installation

## Prerequisites

- Node.js 18 or higher
- pnpm 9 or higher (recommended)

## Package Installation

Object UI is distributed as multiple packages. Install the ones you need:

### Core Packages

```bash
# Essential packages
pnpm add @object-ui/react @object-ui/components

# Optional: If you need type definitions
pnpm add -D @object-ui/types
```

### Plugin Packages

```bash
# Charts support
pnpm add @object-ui/plugin-charts

# Kanban board
pnpm add @object-ui/plugin-kanban

# Rich text editor
pnpm add @object-ui/plugin-editor

# Markdown renderer
pnpm add @object-ui/plugin-markdown
```

## Setup

### 1. Configure Tailwind CSS

Add Object UI to your Tailwind config:

```js
// tailwind.config.js
module.exports = {
content: [
'./src/**/*.{js,ts,jsx,tsx}',
'./node_modules/@object-ui/**/*.{js,ts,jsx,tsx}',
],
// ... rest of config
};
```

### 2. Import Styles

```tsx
// app/layout.tsx or main entry file
import '@object-ui/components/styles.css';
```

### 3. Start Using

```tsx
import { ObjectUIRenderer } from '@object-ui/react';
Copy link

Copilot AI Jan 20, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The component name ObjectUIRenderer does not align with the architectural guideline that references <SchemaRenderer> as the primary runtime component. Consider using SchemaRenderer for consistency with the documented architecture.

Copilot generated this review using guidance from repository custom instructions.

const schema = { /* your schema */ };

export default function App() {
return <ObjectUIRenderer schema={schema} />;
}
```

## Verify Installation

Run your development server and check that everything works:

```bash
pnpm dev
```

You should see your Object UI components rendering correctly!
8 changes: 8 additions & 0 deletions apps/site/content/docs/meta.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
{
"title": "Documentation",
"pages": [
"index",
"quick-start",
"installation"
]
}
Loading