Skip to content

Commit 8f6fa7a

Browse files
huangyiirenehuangyiirene
authored
Merge pull request #136 from objectstack-ai/copilot/add-component-documentation
2 parents 511eaf8 + baf4137 commit 8f6fa7a

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

47 files changed

+2110
-26
lines changed

‎apps/site/app/components/ComponentDemo.tsx‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
'use client';
2+
3+
import React from 'react';
4+
import { SchemaRenderer } from '@object-ui/react';
5+
import type { SchemaNode } from '@object-ui/core';
6+
7+
interface ComponentDemoProps {
8+
schema: SchemaNode;
9+
title?: string;
10+
description?: string;
11+
}
12+
13+
export function ComponentDemo({ schema, title, description }: ComponentDemoProps) {
14+
return (
15+
<div className="not-prose my-6">
16+
{(title || description) && (
17+
<div className="mb-3">
18+
{title && <h4 className="text-sm font-semibold mb-1">{title}</h4>}
19+
{description && <p className="text-sm text-muted-foreground">{description}</p>}
20+
</div>
21+
)}
22+
<div className="border rounded-lg p-6 bg-background">
23+
<SchemaRenderer schema={schema} />
24+
</div>
25+
</div>
26+
);
27+
}
28+
29+
interface DemoGridProps {
30+
children: React.ReactNode;
31+
}
32+
33+
export function DemoGrid({ children }: DemoGridProps) {
34+
return (
35+
<div className="not-prose grid gap-4 md:grid-cols-2 my-6">
36+
{children}
37+
</div>
38+
);
39+
}
40+
41+
interface CodeDemoProps {
42+
schema: SchemaNode;
43+
code: string;
44+
title?: string;
45+
}
46+
47+
export function CodeDemo({ schema, code, title }: CodeDemoProps) {
48+
return (
49+
<div className="not-prose my-6">
50+
{title && <h4 className="text-sm font-semibold mb-3">{title}</h4>}
51+
<div className="grid gap-4 lg:grid-cols-2">
52+
<div className="border rounded-lg p-6 bg-background">
53+
<SchemaRenderer schema={schema} />
54+
</div>
55+
<div className="border rounded-lg overflow-hidden">
56+
<pre className="p-4 text-xs overflow-auto max-h-96 bg-muted">
57+
<code>{code}</code>
58+
</pre>
59+
</div>
60+
</div>
61+
</div>
62+
);
63+
}

‎apps/site/app/components/ObjectUIProvider.tsx‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
'use client';
2+
3+
// Import components to trigger registration
4+
import '@object-ui/components';
5+
6+
export function ObjectUIProvider({ children }: { children: React.ReactNode }) {
7+
// Components are auto-registered on import
8+
return <>{children}</>;
9+
}

‎apps/site/app/layout.tsx‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,17 @@
11
import './global.css';
22
import { RootProvider } from 'fumadocs-ui/provider/next';
3+
import { ObjectUIProvider } from './components/ObjectUIProvider';
34
import type { ReactNode } from 'react';
45

56
export default function Layout({ children }: { children: ReactNode }) {
67
return (
78
<html lang="en" suppressHydrationWarning>
89
<body>
9-
<RootProvider>{children}</RootProvider>
10+
<RootProvider>
11+
<ObjectUIProvider>
12+
{children}
13+
</ObjectUIProvider>
14+
</RootProvider>
1015
</body>
1116
</html>
1217
);

‎apps/site/mdx-components.tsx‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,9 @@
1-
export { default } from 'fumadocs-ui/mdx'
1+
import defaultComponents from 'fumadocs-ui/mdx';
2+
import { ComponentDemo, DemoGrid, CodeDemo } from './app/components/ComponentDemo';
3+
4+
export default {
5+
...defaultComponents,
6+
ComponentDemo,
7+
DemoGrid,
8+
CodeDemo,
9+
};

‎apps/site/package.json‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,9 +10,14 @@
1010
"lint": "eslint ."
1111
},
1212
"dependencies": {
13+
"@object-ui/components": "workspace:*",
14+
"@object-ui/core": "workspace:*",
15+
"@object-ui/react": "workspace:*",
16+
"@object-ui/types": "workspace:*",
1317
"fumadocs-core": "^16.4.7",
1418
"fumadocs-mdx": "^14.2.6",
1519
"fumadocs-ui": "^16.4.7",
20+
"lucide-react": "^0.468.0",
1621
"next": "^16.1.4",
1722
"react": "19.2.3",
1823
"react-dom": "19.2.3",

‎docs/reference/components/basic/html.mdx‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
---
2+
title: "HTML"
3+
description: "Render raw HTML content safely"
4+
---
5+
6+
import { ComponentDemo, DemoGrid } from '@/app/components/ComponentDemo';
7+
8+
# HTML
9+
10+
Render raw HTML content safely
11+
12+
## Examples
13+
14+
<ComponentDemo
15+
schema={{
16+
type: "html",
17+
html: "<p>This is <strong>HTML</strong> content</p>"
18+
}}
19+
title="Basic HTML"
20+
/>
21+
22+
## Schema
23+
24+
```typescript
25+
interface HtmlSchema {
26+
type: 'html';
27+
html: string;
28+
}
29+
```

‎docs/reference/components/basic/icon.mdx‎

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
---
2+
title: "Icon"
3+
description: "Display icons from the Lucide icon library"
4+
---
5+
6+
import { ComponentDemo, DemoGrid } from '@/app/components/ComponentDemo';
7+
8+
# Icon
9+
10+
Display icons from the Lucide icon library
11+
12+
## Examples
13+
14+
<ComponentDemo
15+
schema={{
16+
type: "icon",
17+
name: "home"
18+
}}
19+
title="Basic Icon"
20+
/>
21+
22+
<ComponentDemo
23+
schema={{
24+
type: "flex",
25+
gap: 4,
26+
align: "center",
27+
children: [
28+
{
29+
type: "icon",
30+
name: "star",
31+
size: "sm"
32+
},
33+
{
34+
type: "icon",
35+
name: "star",
36+
size: "md"
37+
},
38+
{
39+
type: "icon",
40+
name: "star",
41+
size: "lg"
42+
},
43+
{
44+
type: "icon",
45+
name: "star",
46+
size: "xl"
47+
}
48+
]
49+
}}
50+
title="Icon Sizes"
51+
/>
52+
53+
<ComponentDemo
54+
schema={{
55+
type: "flex",
56+
gap: 4,
57+
children: [
58+
{
59+
type: "icon",
60+
name: "heart",
61+
color: "text-red-500"
62+
},
63+
{
64+
type: "icon",
65+
name: "star",
66+
color: "text-yellow-500"
67+
},
68+
{
69+
type: "icon",
70+
name: "check",
71+
color: "text-green-500"
72+
}
73+
]
74+
}}
75+
title="Colored Icons"
76+
/>
77+
78+
## Schema
79+
80+
```typescript
81+
interface IconSchema {
82+
type: 'icon';
83+
name: string; // Lucide icon name (kebab-case)
84+
size?: number | 'sm' | 'md' | 'lg' | 'xl';
85+
color?: string; // Tailwind color class
86+
className?: string;
87+
}
88+
```

‎docs/reference/components/basic/image.mdx‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
---
2+
title: "Image"
3+
description: "Display images with optional fallback"
4+
---
5+
6+
import { ComponentDemo, DemoGrid } from '@/app/components/ComponentDemo';
7+
8+
# Image
9+
10+
Display images with optional fallback
11+
12+
## Examples
13+
14+
<ComponentDemo
15+
schema={{
16+
type: "image",
17+
src: "https://via.placeholder.com/300x200",
18+
alt: "Placeholder"
19+
}}
20+
title="Basic Image"
21+
/>
22+
23+
<ComponentDemo
24+
schema={{
25+
type: "image",
26+
src: "https://via.placeholder.com/400x300",
27+
width: 200,
28+
height: 150,
29+
alt: "Sized Image"
30+
}}
31+
title="With Sizing"
32+
/>
33+
34+
## Schema
35+
36+
```typescript
37+
interface ImageSchema {
38+
type: 'image';
39+
src: string;
40+
alt?: string;
41+
width?: number | string;
42+
height?: number | string;
43+
fallback?: string;
44+
fit?: 'contain' | 'cover' | 'fill' | 'none' | 'scale-down';
45+
}
46+
```

‎docs/reference/components/basic/meta.json‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
{
2+
"title": "Basic",
3+
"pages": [
4+
"text",
5+
"icon",
6+
"image",
7+
"separator",
8+
"html"
9+
]
10+
}

‎docs/reference/components/basic/separator.mdx‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
---
2+
title: "Separator"
3+
description: "Visual divider between content sections"
4+
---
5+
6+
import { ComponentDemo, DemoGrid } from '@/app/components/ComponentDemo';
7+
8+
# Separator
9+
10+
Visual divider between content sections
11+
12+
## Examples
13+
14+
<ComponentDemo
15+
schema={{
16+
type: "stack",
17+
gap: 4,
18+
children: [
19+
{
20+
type: "text",
21+
content: "Content Above"
22+
},
23+
{
24+
type: "separator"
25+
},
26+
{
27+
type: "text",
28+
content: "Content Below"
29+
}
30+
]
31+
}}
32+
title="Horizontal"
33+
/>
34+
35+
<ComponentDemo
36+
schema={{
37+
type: "flex",
38+
gap: 4,
39+
children: [
40+
{
41+
type: "text",
42+
content: "Left"
43+
},
44+
{
45+
type: "separator",
46+
orientation: "vertical"
47+
},
48+
{
49+
type: "text",
50+
content: "Right"
51+
}
52+
]
53+
}}
54+
title="Vertical"
55+
/>
56+
57+
## Schema
58+
59+
```typescript
60+
interface SeparatorSchema {
61+
type: 'separator';
62+
orientation?: 'horizontal' | 'vertical';
63+
className?: string;
64+
}
65+
```

0 commit comments

Comments
 (0)