Skip to content

Commit dff0a48

Browse files
Copilothuangyiirene
Copilot
and
huangyiirene
committed
Add component demo infrastructure and sample component docs
Co-authored-by: huangyiirene <7665279+huangyiirene@users.noreply.github.com>
1 parent 35af516 commit dff0a48

7 files changed

Lines changed: 449 additions & 2 deletions

File tree

‎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: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
'use client';
2+
3+
import { useEffect } from 'react';
4+
import { registerDefaultRenderers } from '@object-ui/components';
5+
6+
export function ObjectUIProvider({ children }: { children: React.ReactNode }) {
7+
useEffect(() => {
8+
// Register all default ObjectUI components
9+
registerDefaultRenderers();
10+
}, []);
11+
12+
return <>{children}</>;
13+
}

‎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/text.mdx‎

Lines changed: 136 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,136 @@
1+
---
2+
title: "Text"
3+
description: "Display text with standardized typography styles"
4+
---
5+
6+
import { ComponentDemo, DemoGrid } from '@/app/components/ComponentDemo';
7+
8+
# Text
9+
10+
The Text component displays text content with predefined typography variants.
11+
12+
## Basic Usage
13+
14+
<ComponentDemo
15+
schema={{
16+
type: 'text',
17+
content: 'Hello, World!'
18+
}}
19+
title="Simple Text"
20+
description="Basic text without any styling"
21+
/>
22+
23+
## Variants
24+
25+
<DemoGrid>
26+
<ComponentDemo
27+
schema={{
28+
type: 'text',
29+
content: 'Heading 1',
30+
variant: 'h1'
31+
}}
32+
title="Heading 1"
33+
/>
34+
<ComponentDemo
35+
schema={{
36+
type: 'text',
37+
content: 'Heading 2',
38+
variant: 'h2'
39+
}}
40+
title="Heading 2"
41+
/>
42+
<ComponentDemo
43+
schema={{
44+
type: 'text',
45+
content: 'Heading 3',
46+
variant: 'h3'
47+
}}
48+
title="Heading 3"
49+
/>
50+
<ComponentDemo
51+
schema={{
52+
type: 'text',
53+
content: 'Paragraph text',
54+
variant: 'p'
55+
}}
56+
title="Paragraph"
57+
/>
58+
<ComponentDemo
59+
schema={{
60+
type: 'text',
61+
content: 'Lead text for introductions',
62+
variant: 'lead'
63+
}}
64+
title="Lead"
65+
/>
66+
<ComponentDemo
67+
schema={{
68+
type: 'text',
69+
content: 'Large text',
70+
variant: 'large'
71+
}}
72+
title="Large"
73+
/>
74+
<ComponentDemo
75+
schema={{
76+
type: 'text',
77+
content: 'Small text',
78+
variant: 'small'
79+
}}
80+
title="Small"
81+
/>
82+
<ComponentDemo
83+
schema={{
84+
type: 'text',
85+
content: 'Muted text',
86+
variant: 'muted'
87+
}}
88+
title="Muted"
89+
/>
90+
</DemoGrid>
91+
92+
## Schema
93+
94+
```typescript
95+
interface TextSchema {
96+
type: 'text';
97+
content: string; // Text content to display
98+
value?: string; // Alias for content
99+
variant?: 'h1' | 'h2' | 'h3' | 'h4' | 'p' | 'lead' | 'large' | 'small' | 'muted';
100+
align?: 'left' | 'center' | 'right' | 'justify';
101+
color?: string; // Tailwind color class
102+
className?: string; // Additional CSS classes
103+
}
104+
```
105+
106+
## Examples
107+
108+
### Colored Text
109+
110+
<ComponentDemo
111+
schema={{
112+
type: 'flex',
113+
gap: 4,
114+
children: [
115+
{ type: 'text', content: 'Primary Text', color: 'text-primary' },
116+
{ type: 'text', content: 'Destructive Text', color: 'text-destructive' },
117+
{ type: 'text', content: 'Muted Text', color: 'text-muted-foreground' }
118+
]
119+
}}
120+
title="Text with Colors"
121+
/>
122+
123+
### Text Alignment
124+
125+
<ComponentDemo
126+
schema={{
127+
type: 'stack',
128+
gap: 4,
129+
children: [
130+
{ type: 'text', content: 'Left aligned text', align: 'left' },
131+
{ type: 'text', content: 'Center aligned text', align: 'center' },
132+
{ type: 'text', content: 'Right aligned text', align: 'right' }
133+
]
134+
}}
135+
title="Text Alignment"
136+
/>

0 commit comments

Comments
 (0)