Merge pull request #221 from objectstack-ai/copilot/start-implementation-ui-components

Author: hotlong

examples/crm-app/package.json

@@ -29,7 +29,7 @@
     "@vitejs/plugin-react": "^4.3.1",
     "autoprefixer": "^10.4.19",
     "postcss": "^8.4.38",
-    "tailwindcss": "^3.4.4",
+    "tailwindcss": "^4.1.18",
     "typescript": "^5.9.3",
     "vite": "^5.3.1"
   }

examples/crm-app/postcss.config.js

@@ -1,15 +1,14 @@
-import { useEffect, useMemo } from 'react';
-import { BrowserRouter, Routes, Route, Outlet, Link, useLocation, useParams } from 'react-router-dom';
+import { BrowserRouter, Routes, Route, Outlet, useParams } from 'react-router-dom';
 import { SidebarProvider, SidebarInset, SidebarTrigger } from '@object-ui/components';
-import { SchemaRendererProvider, SchemaRenderer, useRenderer } from '@object-ui/react';
+import { SchemaRendererProvider, SchemaRenderer } from '@object-ui/react';
 import { registerFields } from '@object-ui/fields';
 import { registerLayout } from '@object-ui/layout';
 import '@object-ui/plugin-dashboard'; 
 import { registerPlaceholders } from '@object-ui/components';
 import { SidebarNav } from './components/SidebarNav';
 
 // Data & Schemas
-import { mockData, getContact, getOpportunity } from './data';
+import { mockData, getContact } from './data';
 import { dashboardSchema } from './schemas/dashboard';
 import { contactListSchema, contactDetailSchema } from './schemas/contacts';
 import { opportunityListSchema } from './schemas/opportunities';

examples/crm-app/src/App.tsx

@@ -3,7 +3,6 @@ import { BrowserRouter } from 'react-router-dom';
 import { SidebarNav } from './SidebarNav';
 import { describe, it, expect } from 'vitest';
 import { SidebarProvider } from '@object-ui/components';
-import React from 'react';
 
 describe('SidebarNav', () => {
     it('renders without crashing using default items', () => {

examples/crm-app/src/components/SidebarNav.test.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { 
   LayoutDashboard, 
   Users, 

examples/crm-app/src/components/SidebarNav.tsx

@@ -1,7 +1,6 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import 'tailwindcss';
 
+/* CSS custom properties for theme */
 @layer base {
   :root {
     --background: 0 0% 100%;
@@ -64,13 +63,14 @@
     --input: 217.2 32.6% 17.5%;
     --ring: 212.7 26.8% 83.9%;
   }
-}
- 
-@layer base {
-  * {
-    @apply border-border;
+
+  *[class*="border"] {
+    border-color: hsl(var(--border));
   }
+  
   body {
-    @apply bg-background text-foreground;
+    background-color: hsl(var(--background, 0 0% 100%));
+    color: hsl(var(--foreground, 222.2 84% 4.9%));
   }
 }
+

examples/crm-app/src/index.css

@@ -6,7 +6,7 @@ export const dashboardSchema: DashboardSchema = {
     widgets: [
         {
             id: "w1",
-            layout: { w: 1, h: 1 },
+            layout: { x: 0, y: 0, w: 1, h: 1 },
             component: {
                 type: "card",
                 props: { title: "Total Revenue" },
@@ -17,7 +17,7 @@ export const dashboardSchema: DashboardSchema = {
         },
         {
             id: "w2",
-            layout: { w: 1, h: 1 },
+            layout: { x: 1, y: 0, w: 1, h: 1 },
             component: {
                 type: "card",
                 props: { title: "Active Leads" },
@@ -28,7 +28,7 @@ export const dashboardSchema: DashboardSchema = {
         },
         {
             id: "w3",
-            layout: { w: 1, h: 1 },
+            layout: { x: 2, y: 0, w: 1, h: 1 },
             component: {
                 type: "card",
                 props: { title: "Open Deals" },
@@ -39,7 +39,7 @@ export const dashboardSchema: DashboardSchema = {
         },
         {
             id: "w4",
-            layout: { w: 2, h: 2 },
+            layout: { x: 0, y: 1, w: 2, h: 2 },
             title: "Sales Pipeline",
             component: {
                 type: "widget:bar",
@@ -56,7 +56,7 @@ export const dashboardSchema: DashboardSchema = {
         },
         {
             id: "w5",
-            layout: { w: 1, h: 2 },
+            layout: { x: 2, y: 1, w: 1, h: 2 },
             title: "Recent Activity",
             component: {
                 type: "widget:text",

examples/crm-app/src/schemas/dashboard.ts

@@ -5,4 +5,6 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-export { ObjectStackAdapter, createObjectStackAdapter } from './objectstack-adapter';
+
+// export { ObjectStackAdapter, createObjectStackAdapter } from './objectstack-adapter';
+// Adapters have been moved to separate packages (e.g. @object-ui/data-objectstack)

examples/crm-app/tailwind.config.js

@@ -1,8 +1,7 @@
 {
   "extends": "../../tsconfig.json",
   "compilerOptions": {
-    "outDir": "dist",
-    "rootDir": "src"
+    "outDir": "dist"
   },
   "include": ["src"]
 }