From 81055e38e74d9608e4458fc059a8082637264a3a Mon Sep 17 00:00:00 2001
From: Tomi Virkki <virkki@vaadin.com>
Date: Wed, 14 Aug 2024 15:42:53 +0300
Subject: [PATCH] feat: create dashboard files

---
 dev/pages/DashboardLayout.tsx                 | 30 +++++++++++++++++++
 packages/react-components-pro/package.json    | 16 ++++++++++
 .../react-components-pro/src/Dashboard.ts     |  1 +
 .../src/DashboardLayout.ts                    |  1 +
 .../src/DashboardWidget.ts                    |  1 +
 5 files changed, 49 insertions(+)
 create mode 100644 dev/pages/DashboardLayout.tsx
 create mode 100644 packages/react-components-pro/src/Dashboard.ts
 create mode 100644 packages/react-components-pro/src/DashboardLayout.ts
 create mode 100644 packages/react-components-pro/src/DashboardWidget.ts

diff --git a/dev/pages/DashboardLayout.tsx b/dev/pages/DashboardLayout.tsx
new file mode 100644
index 0000000..d8a7a86
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/packages/react-components-pro/package.json b/packages/react-components-pro/package.json
index 1061f8f..4640c8c 100644
--- a/packages/react-components-pro/package.json
+++ b/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",
diff --git a/packages/react-components-pro/src/Dashboard.ts b/packages/react-components-pro/src/Dashboard.ts
new file mode 100644
index 0000000..7479b1c
--- /dev/null
+++ b/packages/react-components-pro/src/Dashboard.ts
@@ -0,0 +1 @@
+export * from './generated/Dashboard.js';
diff --git a/packages/react-components-pro/src/DashboardLayout.ts b/packages/react-components-pro/src/DashboardLayout.ts
new file mode 100644
index 0000000..359e20a
--- /dev/null
+++ b/packages/react-components-pro/src/DashboardLayout.ts
@@ -0,0 +1 @@
+export * from './generated/DashboardLayout.js';
diff --git a/packages/react-components-pro/src/DashboardWidget.ts b/packages/react-components-pro/src/DashboardWidget.ts
new file mode 100644
index 0000000..4b16502
--- /dev/null
+++ b/packages/react-components-pro/src/DashboardWidget.ts
@@ -0,0 +1 @@
+export * from './generated/DashboardWidget.js';