feat: create dashboard files

dev/pages/DashboardLayout.tsx

@@ -0,0 +1,30 @@
+import { DashboardLayout } from '../../packages/react-components-pro/src/DashboardLayout.js';
+import type { CSSProperties } from 'react';
+
+const dashboardLayoutItemStyle = {
+  backgroundColor: '#f5f5f5',
+  border: '1px solid #e0e0e0',
+  borderRadius: '4px',
+  padding: '1em',
+  textAlign: 'center',
+  margin: '0.5em',
+  boxSizing: 'border-box',
+  height: '100px',
+} as CSSProperties;
+
+const dashboardLayoutStyle = {
+  '--vaadin-dashboard-col-min-width': '200px',
+  '--vaadin-dashboard-col-max-width': '300px',
+} as CSSProperties;
+
+export default function () {
+  return (
+    <DashboardLayout style={dashboardLayoutStyle}>
+      <div style={dashboardLayoutItemStyle}>Item 0</div>
+      <div style={dashboardLayoutItemStyle}>Item 1</div>
+      <div style={dashboardLayoutItemStyle}>Item 2</div>
+      <div style={dashboardLayoutItemStyle}>Item 3</div>
+      <div style={dashboardLayoutItemStyle}>Item 4</div>
+    </DashboardLayout>
+  );
+}

packages/react-components-pro/package.json

@@ -30,6 +30,7 @@
     "@vaadin/charts": "24.5.0-alpha8",
     "@vaadin/cookie-consent": "24.5.0-alpha8",
     "@vaadin/crud": "24.5.0-alpha8",
+    "@vaadin/dashboard": "24.6.0-alpha0",
     "@vaadin/grid-pro": "24.5.0-alpha8",
     "@vaadin/map": "24.5.0-alpha8",
     "@vaadin/react-components": "24.5.0-alpha8",
@@ -99,6 +100,18 @@
       "types": "./CrudEditColumn.d.ts",
       "default": "./CrudEditColumn.js"
     },
+    "./Dashboard.js": {
+      "types": "./Dashboard.d.ts",
+      "default": "./Dashboard.js"
+    },
+    "./DashboardLayout.js": {
+      "types": "./DashboardLayout.d.ts",
+      "default": "./DashboardLayout.js"
+    },
+    "./DashboardWidget.js": {
+      "types": "./DashboardWidget.d.ts",
+      "default": "./DashboardWidget.js"
+    },
     "./GridPro.js": {
       "types": "./GridPro.d.ts",
       "default": "./GridPro.js"
@@ -123,6 +136,9 @@
     "./Crud": "./Crud.js",
     "./CrudEdit": "./CrudEdit.js",
     "./CrudEditColumn": "./CrudEditColumn.js",
+    "./Dashboard": "./Dashboard.js",
+    "./DashboardLayout": "./DashboardLayout.js",
+    "./DashboardWidget": "./DashboardWidget.js",
     "./GridPro": "./GridPro.js",
     "./GridProEditColumn": "./GridProEditColumn.js",
     "./Map": "./Map.js",

packages/react-components-pro/src/Dashboard.ts

@@ -0,0 +1 @@
+export * from './generated/Dashboard.js';

packages/react-components-pro/src/DashboardLayout.ts

@@ -0,0 +1 @@
+export * from './generated/DashboardLayout.js';

packages/react-components-pro/src/DashboardWidget.ts

@@ -0,0 +1 @@
+export * from './generated/DashboardWidget.js';