feat: create dashboard package (#7647)

vaadin · Aug 14, 2024 · 2134205 · 2134205
1 parent 1e227aa
commit 2134205
Show file tree

Hide file tree

Showing 21 changed files with 282 additions and 0 deletions.
diff --git a/dev/dashboard.html b/dev/dashboard.html
@@ -0,0 +1,18 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Dashboard</title>
+    <script type="module" src="./common.js"></script>
+
+    <script type="module">
+      import '@vaadin/dashboard';
+    </script>
+  </head>
+
+  <body>
+    <vaadin-dashboard></vaadin-dashboard>
+  </body>
+</html>
diff --git a/packages/dashboard/LICENSE b/packages/dashboard/LICENSE
@@ -0,0 +1,3 @@
+This program is available under Vaadin Commercial License and Service Terms.
+See https://vaadin.com/commercial-license-and-service-terms for the full
+license.
diff --git a/packages/dashboard/README.md b/packages/dashboard/README.md
@@ -0,0 +1,34 @@
+# @vaadin/dashboard
+
+A responsive, grid-based dashboard layout component
+
+> ℹ️&nbsp; A commercial Vaadin [subscription](https://vaadin.com/pricing) is required to use Dashboard in your project.
+
+[Documentation + Live Demo ↗](https://vaadin.com/docs/latest/components/dashboard)
+
+[![npm version](https://badgen.net/npm/v/@vaadin/dashboard)](https://www.npmjs.com/package/@vaadin/dashboard)
+
+## Installation
+
+Install the component:
+
+```sh
+npm i @vaadin/dashboard
+```
+
+Once installed, import the component in your application:
+
+```js
+import '@vaadin/dashboard';
+```
+
+## Contributing
+
+Read the [contributing guide](https://vaadin.com/docs/latest/contributing) to learn about our development process, how to propose bugfixes and improvements, and how to test your changes to Vaadin components.
+
+## License
+
+This program is available under Vaadin Commercial License and Service Terms. For license terms, see LICENSE.
+
+Vaadin collects usage statistics at development time to improve this product.
+For details and to opt-out, see https://github.com/vaadin/vaadin-usage-statistics.
diff --git a/packages/dashboard/package.json b/packages/dashboard/package.json
@@ -0,0 +1,55 @@
+{
+  "name": "@vaadin/dashboard",
+  "version": "24.6.0-alpha0",
+  "publishConfig": {
+    "access": "public"
+  },
+  "description": "vaadin-dashboard",
+  "license": "SEE LICENSE IN LICENSE",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/vaadin/web-components.git",
+    "directory": "packages/dashboard"
+  },
+  "author": "Vaadin Ltd",
+  "homepage": "https://vaadin.com/components",
+  "bugs": {
+    "url": "https://github.com/vaadin/web-components/issues"
+  },
+  "main": "vaadin-dashboard.js",
+  "module": "vaadin-dashboard.js",
+  "type": "module",
+  "files": [
+    "src",
+    "theme",
+    "vaadin-*.d.ts",
+    "vaadin-*.js",
+    "web-types.json",
+    "web-types.lit.json"
+  ],
+  "keywords": [
+    "Vaadin",
+    "dashboard",
+    "responsive",
+    "layout",
+    "web-components",
+    "web-component"
+  ],
+  "dependencies": {
+    "@open-wc/dedupe-mixin": "^1.3.0",
+    "@vaadin/component-base": "24.5.0-alpha8",
+    "@vaadin/vaadin-lumo-styles": "24.5.0-alpha8",
+    "@vaadin/vaadin-material-styles": "24.5.0-alpha8",
+    "@vaadin/vaadin-themable-mixin": "24.5.0-alpha8",
+    "lit": "^3.0.0"
+  },
+  "devDependencies": {
+    "@vaadin/chai-plugins": "24.5.0-alpha8",
+    "@vaadin/testing-helpers": "^1.0.0"
+  },
+  "cvdlName": "vaadin-dashboard",
+  "web-types": [
+    "web-types.json",
+    "web-types.lit.json"
+  ]
+}
diff --git a/packages/dashboard/src/vaadin-dashboard-widget.d.ts b/packages/dashboard/src/vaadin-dashboard-widget.d.ts
@@ -0,0 +1,24 @@
+/**
+ * @license
+ * Copyright (c) 2000 - 2024 Vaadin Ltd.
+ *
+ * This program is available under Vaadin Commercial License and Service Terms.
+ *
+ *
+ * See https://vaadin.com/commercial-license-and-service-terms for the full
+ * license.
+ */
+import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
+
+/**
+ * A Widget component for use with the Dashboard component
+ */
+declare class DashboardWidget extends ElementMixin(HTMLElement) {}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'vaadin-dashboard-widget': DashboardWidget;
+  }
+}
+
+export { DashboardWidget };
diff --git a/packages/dashboard/src/vaadin-dashboard-widget.js b/packages/dashboard/src/vaadin-dashboard-widget.js
@@ -0,0 +1,36 @@
+/**
+ * @license
+ * Copyright (c) 2000 - 2024 Vaadin Ltd.
+ *
+ * This program is available under Vaadin Commercial License and Service Terms.
+ *
+ *
+ * See https://vaadin.com/commercial-license-and-service-terms for the full
+ * license.
+ */
+import { html, LitElement } from 'lit';
+import { defineCustomElement } from '@vaadin/component-base/src/define.js';
+import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
+import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
+
+/**
+ * A Widget component for use with the Dashboard component
+ *
+ * @customElement
+ * @extends HTMLElement
+ * @mixes ElementMixin
+ */
+class DashboardWidget extends ElementMixin(PolylitMixin(LitElement)) {
+  static get is() {
+    return 'vaadin-dashboard-widget';
+  }
+
+  /** @protected */
+  render() {
+    return html``;
+  }
+}
+
+defineCustomElement(DashboardWidget);
+
+export { DashboardWidget };
diff --git a/packages/dashboard/src/vaadin-dashboard.d.ts b/packages/dashboard/src/vaadin-dashboard.d.ts
@@ -0,0 +1,24 @@
+/**
+ * @license
+ * Copyright (c) 2000 - 2024 Vaadin Ltd.
+ *
+ * This program is available under Vaadin Commercial License and Service Terms.
+ *
+ *
+ * See https://vaadin.com/commercial-license-and-service-terms for the full
+ * license.
+ */
+import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
+
+/**
+ * A responsive, grid-based dashboard layout component
+ */
+declare class Dashboard extends ElementMixin(HTMLElement) {}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'vaadin-dashboard': Dashboard;
+  }
+}
+
+export { Dashboard };
diff --git a/packages/dashboard/src/vaadin-dashboard.js b/packages/dashboard/src/vaadin-dashboard.js
@@ -0,0 +1,41 @@
+/**
+ * @license
+ * Copyright (c) 2000 - 2024 Vaadin Ltd.
+ *
+ * This program is available under Vaadin Commercial License and Service Terms.
+ *
+ *
+ * See https://vaadin.com/commercial-license-and-service-terms for the full
+ * license.
+ */
+import './vaadin-dashboard-widget.js';
+import { html, LitElement } from 'lit';
+import { defineCustomElement } from '@vaadin/component-base/src/define.js';
+import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
+import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
+
+/**
+ * A responsive, grid-based dashboard layout component
+ *
+ * @customElement
+ * @extends HTMLElement
+ * @mixes ElementMixin
+ */
+class Dashboard extends ElementMixin(PolylitMixin(LitElement)) {
+  static get is() {
+    return 'vaadin-dashboard';
+  }
+
+  static get cvdlName() {
+    return 'vaadin-dashboard';
+  }
+
+  /** @protected */
+  render() {
+    return html``;
+  }
+}
+
+defineCustomElement(Dashboard);
+
+export { Dashboard };
diff --git a/packages/dashboard/test/dashboard.test.ts b/packages/dashboard/test/dashboard.test.ts
@@ -0,0 +1,29 @@
+import { expect } from '@vaadin/chai-plugins';
+import { fixtureSync } from '@vaadin/testing-helpers';
+import '../vaadin-dashboard.js';
+import type { CustomElementType } from '@vaadin/component-base/src/define.js';
+import type { Dashboard } from '../vaadin-dashboard.js';
+
+describe('dashboard', () => {
+  let dashboard: Dashboard;
+
+  beforeEach(() => {
+    dashboard = fixtureSync('<vaadin-dashboard></vaadin-dashboard>');
+  });
+
+  describe('custom element definition', () => {
+    let tagName: string;
+
+    beforeEach(() => {
+      tagName = dashboard.tagName.toLowerCase();
+    });
+
+    it('should be defined in custom element registry', () => {
+      expect(customElements.get(tagName)).to.be.ok;
+    });
+
+    it('should have a valid static "is" getter', () => {
+      expect((customElements.get(tagName) as CustomElementType).is).to.equal(tagName);
+    });
+  });
+});
diff --git a/packages/dashboard/theme/lumo/vaadin-dashboard-styles.js b/packages/dashboard/theme/lumo/vaadin-dashboard-styles.js
diff --git a/packages/dashboard/theme/lumo/vaadin-dashboard-widget-styles.js b/packages/dashboard/theme/lumo/vaadin-dashboard-widget-styles.js
diff --git a/packages/dashboard/theme/lumo/vaadin-dashboard-widget.js b/packages/dashboard/theme/lumo/vaadin-dashboard-widget.js
@@ -0,0 +1,2 @@
+import './vaadin-dashboard-widget-styles.js';
+import '../../src/vaadin-dashboard-widget.js';
diff --git a/packages/dashboard/theme/lumo/vaadin-dashboard.js b/packages/dashboard/theme/lumo/vaadin-dashboard.js
@@ -0,0 +1,3 @@
+import './vaadin-dashboard-widget.js';
+import './vaadin-dashboard-styles.js';
+import '../../src/vaadin-dashboard.js';
diff --git a/packages/dashboard/theme/material/vaadin-dashboard-styles.js b/packages/dashboard/theme/material/vaadin-dashboard-styles.js
diff --git a/packages/dashboard/theme/material/vaadin-dashboard-widget-styles.js b/packages/dashboard/theme/material/vaadin-dashboard-widget-styles.js
diff --git a/packages/dashboard/theme/material/vaadin-dashboard-widget.js b/packages/dashboard/theme/material/vaadin-dashboard-widget.js
@@ -0,0 +1,2 @@
+import './vaadin-dashboard-widget-styles.js';
+import '../../src/vaadin-dashboard-widget.js';
diff --git a/packages/dashboard/theme/material/vaadin-dashboard.js b/packages/dashboard/theme/material/vaadin-dashboard.js
@@ -0,0 +1,3 @@
+import './vaadin-dashboard-widget.js';
+import './vaadin-dashboard-styles.js';
+import '../../src/vaadin-dashboard.js';
diff --git a/packages/dashboard/vaadin-dashboard-widget.d.ts b/packages/dashboard/vaadin-dashboard-widget.d.ts
@@ -0,0 +1 @@
+export * from './src/vaadin-dashboard-widget.js';
diff --git a/packages/dashboard/vaadin-dashboard-widget.js b/packages/dashboard/vaadin-dashboard-widget.js
@@ -0,0 +1,3 @@
+import './theme/lumo/vaadin-dashboard-widget.js';
+
+export * from './src/vaadin-dashboard-widget.js';
diff --git a/packages/dashboard/vaadin-dashboard.d.ts b/packages/dashboard/vaadin-dashboard.d.ts
@@ -0,0 +1 @@
+export * from './src/vaadin-dashboard.js';
diff --git a/packages/dashboard/vaadin-dashboard.js b/packages/dashboard/vaadin-dashboard.js
@@ -0,0 +1,3 @@
+import './theme/lumo/vaadin-dashboard.js';
+
+export * from './src/vaadin-dashboard.js';