Skip to content

Commit fc462f7

Browse files
huangyiirenehuangyiirene
authored
Merge pull request #144 from objectstack-ai/copilot/fix-preview-plugin-imports
2 parents ef3c9aa + bbabda1 commit fc462f7

File tree

10 files changed

+187
-56
lines changed

10 files changed

+187
-56
lines changed

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,3 +3,6 @@ export { InteractiveDemo as ComponentDemo, DemoGrid } from './InteractiveDemo';
33

44
// Legacy exports for backward compatibility
55
export { InteractiveDemo, InteractiveDemo as CodeDemo } from './InteractiveDemo';
6+
7+
// Export types for use in MDX files
8+
export type { SchemaNode } from './InteractiveDemo';

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

Lines changed: 48 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,25 @@
11
'use client';
22

3-
import React from 'react';
3+
import React, { useState, useEffect } from 'react';
44
import { SchemaRenderer } from '@object-ui/react';
55
import type { SchemaNode } from '@object-ui/core';
66
import { Tabs, Tab } from 'fumadocs-ui/components/tabs';
77
import { CodeBlock, Pre } from 'fumadocs-ui/components/codeblock';
88

9+
// Re-export SchemaNode type for use in MDX files
10+
export type { SchemaNode } from '@object-ui/core';
11+
12+
// Load plugins promise that we can await
13+
const pluginsLoading = typeof window !== 'undefined'
14+
? Promise.all([
15+
import('@object-ui/plugin-editor'),
16+
import('@object-ui/plugin-charts'),
17+
import('@object-ui/plugin-kanban'),
18+
import('@object-ui/plugin-markdown'),
19+
import('@object-ui/plugin-object'),
20+
])
21+
: Promise.resolve([]);
22+
923
interface InteractiveDemoProps {
1024
schema: SchemaNode;
1125
title?: string;
@@ -26,6 +40,15 @@ export function InteractiveDemo({
2640
description,
2741
examples
2842
}: InteractiveDemoProps) {
43+
const [pluginsLoaded, setPluginsLoaded] = useState(false);
44+
45+
useEffect(() => {
46+
// Wait for plugins to load before rendering
47+
pluginsLoading.then(() => {
48+
setPluginsLoaded(true);
49+
});
50+
}, []);
51+
2952
// If examples are provided, show a multi-example view
3053
if (examples && examples.length > 0) {
3154
return (
@@ -38,23 +61,27 @@ export function InteractiveDemo({
3861
)}
3962
<Tabs items={['Preview', 'Code']} defaultIndex={0}>
4063
<Tab value="Preview">
41-
<div className="space-y-6">
42-
{examples.map((example, index) => (
43-
<div key={index} className="border rounded-lg overflow-hidden">
44-
{example.label && (
45-
<div className="border-b bg-muted px-4 py-2">
46-
<p className="text-sm font-medium">{example.label}</p>
47-
{example.description && (
48-
<p className="text-xs text-muted-foreground mt-0.5">{example.description}</p>
49-
)}
64+
{!pluginsLoaded ? (
65+
<div className="p-6 text-center text-muted-foreground">Loading plugins...</div>
66+
) : (
67+
<div className="space-y-6">
68+
{examples.map((example, index) => (
69+
<div key={index} className="border rounded-lg overflow-hidden">
70+
{example.label && (
71+
<div className="border-b bg-muted px-4 py-2">
72+
<p className="text-sm font-medium">{example.label}</p>
73+
{example.description && (
74+
<p className="text-xs text-muted-foreground mt-0.5">{example.description}</p>
75+
)}
76+
</div>
77+
)}
78+
<div className="p-6 bg-background">
79+
<SchemaRenderer schema={example.schema} />
5080
</div>
51-
)}
52-
<div className="p-6 bg-background">
53-
<SchemaRenderer schema={example.schema} />
5481
</div>
55-
</div>
56-
))}
57-
</div>
82+
))}
83+
</div>
84+
)}
5885
</Tab>
5986
<Tab value="Code">
6087
<div className="space-y-4">
@@ -89,7 +116,11 @@ export function InteractiveDemo({
89116
<Tabs items={['Preview', 'Code']} defaultIndex={0}>
90117
<Tab value="Preview">
91118
<div className="border rounded-lg p-6 bg-background">
92-
<SchemaRenderer schema={schema} />
119+
{!pluginsLoaded ? (
120+
<div className="text-center text-muted-foreground">Loading plugins...</div>
121+
) : (
122+
<SchemaRenderer schema={schema} />
123+
)}
93124
</div>
94125
</Tab>
95126
<Tab value="Code">

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

Lines changed: 15 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,13 +5,25 @@ import { initializeComponents } from '@object-ui/components';
55
import { ComponentRegistry } from '@object-ui/core';
66
import { useEffect } from 'react';
77

8+
// Dynamically import plugins only in browser context (not during SSR)
9+
if (typeof window !== 'undefined') {
10+
import('@object-ui/plugin-editor');
11+
import('@object-ui/plugin-charts');
12+
import('@object-ui/plugin-kanban');
13+
import('@object-ui/plugin-markdown');
14+
import('@object-ui/plugin-object');
15+
}
16+
817
export function ObjectUIProvider({ children }: { children: React.ReactNode }) {
918
// Explicitly call init to ensure components are registered
1019
useEffect(() => {
1120
initializeComponents();
12-
// Log registered components for debugging
13-
const componentTypes = ComponentRegistry.getAllTypes();
14-
console.log('[ObjectUIProvider] Registered components:', componentTypes);
21+
22+
// Wait a bit for plugins to register, then log
23+
setTimeout(() => {
24+
const componentTypes = ComponentRegistry.getAllTypes();
25+
console.log('[ObjectUIProvider] Registered components:', componentTypes);
26+
}, 100);
1527
}, []);
1628

1729
return <>{children}</>;

‎apps/site/mdx-components.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
11
import defaultComponents from 'fumadocs-ui/mdx';
22
import { ComponentDemo, DemoGrid, CodeDemo } from './app/components/ComponentDemo';
33

4+
// Re-export types for use in MDX files
5+
export type { SchemaNode } from './app/components/ComponentDemo';
6+
47
export default {
58
...defaultComponents,
69
ComponentDemo,

‎apps/site/package.json‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,11 @@
1414
"@object-ui/core": "workspace:*",
1515
"@object-ui/react": "workspace:*",
1616
"@object-ui/types": "workspace:*",
17+
"@object-ui/plugin-editor": "workspace:*",
18+
"@object-ui/plugin-charts": "workspace:*",
19+
"@object-ui/plugin-kanban": "workspace:*",
20+
"@object-ui/plugin-markdown": "workspace:*",
21+
"@object-ui/plugin-object": "workspace:*",
1722
"fumadocs-core": "^16.4.7",
1823
"fumadocs-mdx": "^14.2.6",
1924
"fumadocs-ui": "^16.4.7",

‎packages/plugin-object/src/index.ts‎

Lines changed: 0 additions & 34 deletions
This file was deleted.

‎packages/plugin-object/src/index.tsx‎

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
/**
2+
* ObjectUI
3+
* Copyright (c) 2024-present ObjectStack Inc.
4+
*
5+
* This source code is licensed under the MIT license found in the
6+
* LICENSE file in the root directory of this source tree.
7+
*/
8+
9+
/**
10+
* @object-ui/plugin-object
11+
*
12+
* ObjectQL plugin for Object UI.
13+
* Provides seamless integration with ObjectQL backends through smart components
14+
* that automatically generate UI from ObjectQL object schemas.
15+
*
16+
* @packageDocumentation
17+
*/
18+
19+
import React from 'react';
20+
import { ComponentRegistry } from '@object-ui/core';
21+
22+
export { ObjectTable } from './ObjectTable';
23+
export type { ObjectTableProps } from './ObjectTable';
24+
25+
export { ObjectForm } from './ObjectForm';
26+
export type { ObjectFormProps } from './ObjectForm';
27+
28+
export { ObjectView } from './ObjectView';
29+
export type { ObjectViewProps } from './ObjectView';
30+
31+
// Re-export related types from @object-ui/types
32+
export type {
33+
ObjectTableSchema,
34+
ObjectFormSchema,
35+
ObjectViewSchema,
36+
ObjectQLComponentSchema,
37+
} from '@object-ui/types';
38+
39+
// Import components for registration
40+
import { ObjectTable } from './ObjectTable';
41+
import { ObjectForm } from './ObjectForm';
42+
import { ObjectView } from './ObjectView';
43+
44+
// Create renderer wrappers for ComponentRegistry
45+
const ObjectTableRenderer: React.FC<{ schema: any }> = ({ schema }) => {
46+
// For now, render without dataSource since it requires ObjectQL setup
47+
// This allows the component to at least render in documentation
48+
return <ObjectTable schema={schema} dataSource={null as any} />;
49+
};
50+
51+
const ObjectFormRenderer: React.FC<{ schema: any }> = ({ schema }) => {
52+
return <ObjectForm schema={schema} dataSource={null as any} />;
53+
};
54+
55+
const ObjectViewRenderer: React.FC<{ schema: any }> = ({ schema }) => {
56+
return <ObjectView schema={schema} dataSource={null as any} />;
57+
};
58+
59+
// Register components with ComponentRegistry
60+
ComponentRegistry.register('object-table', ObjectTableRenderer, {
61+
label: 'Object Table',
62+
category: 'plugin',
63+
inputs: [
64+
{ name: 'objectName', type: 'string', label: 'Object Name', required: true },
65+
{ name: 'columns', type: 'array', label: 'Columns' },
66+
{ name: 'searchable', type: 'boolean', label: 'Searchable', defaultValue: true },
67+
{ name: 'selectable', type: 'boolean', label: 'Selectable', defaultValue: false },
68+
],
69+
});
70+
71+
ComponentRegistry.register('object-form', ObjectFormRenderer, {
72+
label: 'Object Form',
73+
category: 'plugin',
74+
inputs: [
75+
{ name: 'objectName', type: 'string', label: 'Object Name', required: true },
76+
{ name: 'fields', type: 'array', label: 'Fields' },
77+
{ name: 'mode', type: 'enum', label: 'Mode', enum: ['create', 'edit'], defaultValue: 'create' },
78+
],
79+
});
80+
81+
ComponentRegistry.register('object-view', ObjectViewRenderer, {
82+
label: 'Object View',
83+
category: 'plugin',
84+
inputs: [
85+
{ name: 'objectName', type: 'string', label: 'Object Name', required: true },
86+
{ name: 'fields', type: 'array', label: 'Fields' },
87+
{ name: 'layout', type: 'enum', label: 'Layout', enum: ['vertical', 'horizontal'], defaultValue: 'vertical' },
88+
],
89+
});
90+
91+
// Export for manual use
92+
export const objectComponents = {
93+
'object-table': ObjectTableRenderer,
94+
'object-form': ObjectFormRenderer,
95+
'object-view': ObjectViewRenderer,
96+
};

‎packages/plugin-object/vite.config.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ export default defineConfig({
2121
],
2222
build: {
2323
lib: {
24-
entry: resolve(__dirname, 'src/index.ts'),
24+
entry: resolve(__dirname, 'src/index.tsx'),
2525
name: 'ObjectUIPluginObject',
2626
formats: ['es', 'cjs'],
2727
fileName: (format) => format === 'es' ? 'index.js' : 'index.cjs',

‎packages/types/src/feedback.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515
* @packageDocumentation
1616
*/
1717

18-
import type { BaseSchema, SchemaNode } from './base';
18+
import type { BaseSchema } from './base';
1919

2020
/**
2121
* Loading/Spinner component

‎pnpm-lock.yaml‎

Lines changed: 15 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)