Merge pull request #238 from objectstack-ai/copilot/fix-aggrid-docs-style-import

Author: hotlong

apps/site/app/layout.tsx

@@ -1,6 +1,12 @@
 import { RootProvider } from 'fumadocs-ui/provider/next';
 import './global.css';
 import '@object-ui/components/style.css';
+// AG Grid styles - required for plugin-aggrid demos
+import 'ag-grid-community/styles/ag-grid.css';
+import 'ag-grid-community/styles/ag-theme-quartz.css';
+import 'ag-grid-community/styles/ag-theme-alpine.css';
+import 'ag-grid-community/styles/ag-theme-balham.css';
+import 'ag-grid-community/styles/ag-theme-material.css';
 import { Inter } from 'next/font/google';
 import { ObjectUIProvider } from '@/app/components/ObjectUIProvider';
 

apps/site/package.json

@@ -19,16 +19,18 @@
     "@object-ui/plugin-chatbot": "workspace:*",
     "@object-ui/plugin-dashboard": "workspace:*",
     "@object-ui/plugin-editor": "workspace:*",
+    "@object-ui/plugin-form": "workspace:*",
     "@object-ui/plugin-gantt": "workspace:*",
+    "@object-ui/plugin-grid": "workspace:*",
     "@object-ui/plugin-kanban": "workspace:*",
     "@object-ui/plugin-map": "workspace:*",
     "@object-ui/plugin-markdown": "workspace:*",
     "@object-ui/plugin-timeline": "workspace:*",
-    "@object-ui/plugin-form": "workspace:*",
-    "@object-ui/plugin-grid": "workspace:*",
     "@object-ui/plugin-view": "workspace:*",
     "@object-ui/react": "workspace:*",
     "@object-ui/types": "workspace:*",
+    "ag-grid-community": "^32.3.9",
+    "ag-grid-react": "^32.3.9",
     "fumadocs-core": "16.4.8",
     "fumadocs-mdx": "14.2.6",
     "fumadocs-ui": "16.4.8",

packages/plugin-aggrid/README.md

@@ -31,6 +31,21 @@ pnpm add @object-ui/plugin-aggrid ag-grid-community ag-grid-react
 
 Note: `ag-grid-community` and `ag-grid-react` are peer dependencies and must be installed separately.
 
+### Next.js App Router Setup
+
+If you're using Next.js with the App Router and dynamic imports, you may need to import AG Grid CSS in your root layout to ensure styles load correctly:
+
+```typescript
+// app/layout.tsx
+import 'ag-grid-community/styles/ag-grid.css';
+import 'ag-grid-community/styles/ag-theme-quartz.css';
+import 'ag-grid-community/styles/ag-theme-alpine.css';
+import 'ag-grid-community/styles/ag-theme-balham.css';
+import 'ag-grid-community/styles/ag-theme-material.css';
+```
+
+This is necessary when the plugin is loaded dynamically (e.g., via `React.lazy()` or dynamic imports in client components), as Next.js may not properly process CSS imports from dynamically loaded modules.
+
 ## Usage
 
 ### Automatic Registration (Side-Effect Import)