Skip to content

Commit 421ba06

Browse files
hotlonghotlong
committed
feat: implement DashboardRenderer component and related configurations for dashboard functionality
1 parent c165cad commit 421ba06

File tree

8 files changed

+180
-26
lines changed

8 files changed

+180
-26
lines changed

‎packages/components/src/index.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,8 @@ import './index.css';
1212
import './renderers';
1313

1414
// Export utils
15-
export * from './lib/utils';
15+
export { cn } from './lib/utils';
16+
export { renderChildren } from './lib/utils';
1617

1718
// Export raw Shadcn UI components
1819
export * from './ui';

‎packages/components/src/renderers/complex/index.ts‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,5 @@ import './scroll-area';
1212
import './resizable';
1313
import './table';
1414
import './data-table';
15-
import './dashboard';
1615

1716

‎packages/plugin-dashboard/package.json‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
{
2+
"name": "@object-ui/plugin-dashboard",
3+
"version": "0.1.0",
4+
"type": "module",
5+
"license": "MIT",
6+
"description": "Dashboard plugin for Object UI",
7+
"main": "dist/index.umd.cjs",
8+
"module": "dist/index.js",
9+
"types": "dist/index.d.ts",
10+
"exports": {
11+
".": {
12+
"types": "./dist/index.d.ts",
13+
"import": "./dist/index.js",
14+
"require": "./dist/index.umd.cjs"
15+
}
16+
},
17+
"scripts": {
18+
"build": "vite build",
19+
"test": "vitest run",
20+
"lint": "eslint ."
21+
},
22+
"dependencies": {
23+
"@object-ui/components": "workspace:*",
24+
"@object-ui/core": "workspace:*",
25+
"@object-ui/react": "workspace:*",
26+
"@object-ui/types": "workspace:*",
27+
"clsx": "^2.1.0",
28+
"react": "^18.2.0",
29+
"react-dom": "^18.2.0",
30+
"tailwind-merge": "^2.2.1"
31+
},
32+
"peerDependencies": {
33+
"react": "^18.0.0",
34+
"react-dom": "^18.0.0"
35+
},
36+
"devDependencies": {
37+
"@vitejs/plugin-react": "^4.7.0",
38+
"typescript": "^5.9.3",
39+
"vite": "^7.3.1",
40+
"vite-plugin-dts": "^4.5.4"
41+
}
42+
}

packages/components/src/renderers/complex/dashboard.tsx renamed to packages/plugin-dashboard/src/DashboardRenderer.tsx

Lines changed: 6 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -9,21 +9,24 @@
99
import { ComponentRegistry } from '@object-ui/core';
1010
import type { DashboardSchema } from '@object-ui/types';
1111
import { SchemaRenderer } from '@object-ui/react';
12+
import { cn } from '@object-ui/components';
1213
import { forwardRef } from 'react';
13-
import { cn } from '../../lib/utils';
1414

15-
const DashboardRenderer = forwardRef<HTMLDivElement, { schema: DashboardSchema; className?: string; [key: string]: any }>(
15+
export const DashboardRenderer = forwardRef<HTMLDivElement, { schema: DashboardSchema; className?: string; [key: string]: any }>(
1616
({ schema, className, ...props }, ref) => {
1717
const columns = schema.columns || 3;
1818
const gap = schema.gap || 4;
1919

20+
// Use style to convert gap number to pixels or use tailwind classes if possible
21+
// Here using inline style for grid gap which maps to 0.25rem * 4 * gap = gap rem
22+
2023
return (
2124
<div
2225
ref={ref}
2326
className={cn("grid", className)}
2427
style={{
2528
gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))`,
26-
gap: gap * 4 // Assuming tailwind scale
29+
gap: `${gap * 0.25}rem`
2730
}}
2831
{...props}
2932
>
@@ -44,22 +47,3 @@ const DashboardRenderer = forwardRef<HTMLDivElement, { schema: DashboardSchema;
4447
);
4548
}
4649
);
47-
48-
ComponentRegistry.register(
49-
'dashboard',
50-
DashboardRenderer,
51-
{
52-
label: 'Dashboard',
53-
category: 'Complex',
54-
icon: 'layout-dashboard',
55-
inputs: [
56-
{ name: 'columns', type: 'number', label: 'Columns', defaultValue: 3 },
57-
{ name: 'gap', type: 'number', label: 'Gap', defaultValue: 4 },
58-
{ name: 'className', type: 'string', label: 'CSS Class' }
59-
],
60-
defaultProps: {
61-
columns: 3,
62-
widgets: []
63-
}
64-
}
65-
);

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

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
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+
import { ComponentRegistry } from '@object-ui/core';
10+
import { DashboardRenderer } from './DashboardRenderer';
11+
12+
export { DashboardRenderer };
13+
14+
// Register dashboard component
15+
ComponentRegistry.register(
16+
'dashboard',
17+
DashboardRenderer,
18+
{
19+
label: 'Dashboard',
20+
category: 'Complex',
21+
icon: 'layout-dashboard',
22+
inputs: [
23+
{ name: 'columns', type: 'number', label: 'Columns', defaultValue: 3 },
24+
{ name: 'gap', type: 'number', label: 'Gap', defaultValue: 4 },
25+
{ name: 'className', type: 'string', label: 'CSS Class' }
26+
],
27+
defaultProps: {
28+
columns: 3,
29+
widgets: []
30+
}
31+
}
32+
);

‎packages/plugin-dashboard/tsconfig.json‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
{
2+
"extends": "../../tsconfig.json",
3+
"compilerOptions": {
4+
"outDir": "./dist",
5+
"rootDir": "./src",
6+
"declaration": true,
7+
"declarationMap": true,
8+
"composite": true,
9+
"jsx": "react-jsx"
10+
},
11+
"include": ["src/**/*"],
12+
"exclude": ["node_modules", "dist", "**/*.test.ts"]
13+
}

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

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
import { defineConfig } from 'vite';
2+
import react from '@vitejs/plugin-react';
3+
import dts from 'vite-plugin-dts';
4+
import { resolve } from 'path';
5+
6+
export default defineConfig({
7+
plugins: [
8+
react(),
9+
dts({
10+
insertTypesEntry: true,
11+
include: ['src'],
12+
}),
13+
],
14+
build: {
15+
lib: {
16+
entry: resolve(__dirname, 'src/index.tsx'),
17+
name: 'ObjectUIPluginDashboard',
18+
fileName: 'index',
19+
},
20+
rollupOptions: {
21+
external: [
22+
'react',
23+
'react-dom',
24+
'@object-ui/components',
25+
'@object-ui/core',
26+
'@object-ui/react',
27+
'@object-ui/types',
28+
'tailwind-merge',
29+
'clsx'
30+
],
31+
output: {
32+
globals: {
33+
react: 'React',
34+
'react-dom': 'ReactDOM',
35+
'@object-ui/components': 'ObjectUIComponents',
36+
'@object-ui/core': 'ObjectUICore',
37+
'@object-ui/react': 'ObjectUIReact',
38+
'@object-ui/types': 'ObjectUITypes',
39+
},
40+
},
41+
},
42+
},
43+
});

‎pnpm-lock.yaml‎

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

0 commit comments

Comments
 (0)