feat(dashboard): initial dashboard work

.eslintrc.js

@@ -39,6 +39,7 @@ module.exports = {
     },
   },
   rules: {
+    '@typescript-eslint/no-unused-vars': ['error', { argsIgnorePattern: '^_', varsIgnorePattern: '^_' }],
     '@typescript-eslint/no-empty-function': 0,
     'react/react-in-jsx-scope': 'off', // This should always be off as of React 17 and going forward, and we should use the new JSX Transform in Typescript 4.1+ (ref: https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html#removing-unused-react-imports)
     'react/jsx-uses-react': 'error',

.github/workflows/npm-publish.yml

@@ -70,3 +70,10 @@ jobs:
         with:
           package: './packages/scene-composer/package.json'
           token: ${{ secrets.NPM_TOKEN }}
+
+      - name: Publish @iot-app-kit/dashboard
+        uses: JS-DevTools/npm-publish@v1
+        with:
+          package: './packages/dashboard/package.json'
+          token: ${{ secrets.NPM_TOKEN }}
+          tag: 'alpha'

package.json

@@ -25,7 +25,7 @@
     "fix:stylelint": "stylelint '**/*.css' --fix",
     "test": "npm-run-all -p test:unit test:eslint test:stylelint test:git",
     "test:integration": "turbo run test:integration",
-    "test:eslint": "eslint --ext .js,.ts,.tsx . --max-warnings=39",
+    "test:eslint": "eslint --ext .js,.ts,.tsx . --max-warnings=41",
     "test:stylelint": "stylelint '**/*.css' --max-warnings 0",
     "test:unit": "turbo run test",
     "test:git": "git diff --exit-code",

packages/dashboard/.env.example

@@ -0,0 +1,16 @@
+AWS_ACCESS_KEY_ID=xxxxx
+AWS_SECRET_ACCESS_KEY=xxxxx
+AWS_SESSION_TOKEN=xxxxx
+
+REGION=xxxxx
+
+STRING_ASSET_ID=xxxxx
+
+DEMO_TURBINE_ASSET_1=xxxxx
+DEMO_TURBINE_ASSET_1_PROPERTY_1=xxxxx
+DEMO_TURBINE_ASSET_1_PROPERTY_2=xxxxx
+DEMO_TURBINE_ASSET_1_PROPERTY_3=xxxxx
+DEMO_TURBINE_ASSET_1_PROPERTY_4=xxxxx
+
+AGGREGATED_DATA_PROPERTY=xxxxx
+AGGREGATED_DATA_PROPERTY_2=xxxxx

packages/dashboard/.storybook/main.js

@@ -0,0 +1,16 @@
+require('dotenv').config();
+
+module.exports = {
+  stories: ['../stories/**/*.stories.mdx', '../stories/**/*.stories.@(js|jsx|ts|tsx)'],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-interactions',
+    '@storybook/preset-scss',
+  ],
+  framework: '@storybook/react',
+  core: {
+    builder: '@storybook/builder-webpack5',
+  },
+  typescript: { reactDocgen: false },
+};

packages/dashboard/.storybook/preview.js

@@ -0,0 +1,9 @@
+export const parameters = {
+  actions: { argTypesRegex: "^on[A-Z].*" },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+}

packages/dashboard/CHANGELOG.md

@@ -0,0 +1,61 @@
+# Changelog
+
+## [2.4.2](https://github.com/awslabs/iot-app-kit/compare/dashboard-v2.4.1...dashboard-v2.4.2) (2022-11-08)
+
+
+### Miscellaneous Chores
+
+* **dashboard:** Synchronize undefined versions
+
+
+### Dependencies
+
+* The following workspace dependencies were updated
+  * dependencies
+    * @iot-app-kit/core bumped from ^2.4.1 to ^2.4.2
+    * @iot-app-kit/source-iotsitewise bumped from ^2.4.1 to ^2.4.2
+
+## [2.4.1](https://github.com/awslabs/iot-app-kit/compare/dashboard-v2.4.0...dashboard-v2.4.1) (2022-11-07)
+
+
+### Miscellaneous Chores
+
+* **dashboard:** Synchronize undefined versions
+
+
+### Dependencies
+
+* The following workspace dependencies were updated
+  * dependencies
+    * @iot-app-kit/core bumped from ^2.4.0 to ^2.4.1
+    * @iot-app-kit/source-iotsitewise bumped from ^2.4.0 to ^2.4.1
+
+## [2.4.0](https://github.com/awslabs/iot-app-kit/compare/dashboard-v2.3.0...dashboard-v2.4.0) (2022-11-04)
+
+
+### Features
+
+* **dashboard:** add selection and move components and actions ([13aa08e](https://github.com/awslabs/iot-app-kit/commit/13aa08e26c1a6fee6b791851fdd1a233ccc62e81))
+
+
+### Dependencies
+
+* The following workspace dependencies were updated
+  * dependencies
+    * @iot-app-kit/core bumped from ^2.2.0 to ^2.4.0
+    * @iot-app-kit/source-iotsitewise bumped from ^2.2.0 to ^2.4.0
+
+## 2.3.0 (2022-11-02)
+
+
+### Features
+
+* **dashboard:** alpha release of dashboard component ([f13002e](https://github.com/awslabs/iot-app-kit/commit/f13002e9df6e683de4fd88bbde1c55d36630830c))
+
+
+### Dependencies
+
+* The following workspace dependencies were updated
+  * dependencies
+    * @iot-app-kit/core bumped from ^2.2.0 to ^2.3.0
+    * @iot-app-kit/source-iotsitewise bumped from ^2.2.0 to ^2.3.0

packages/dashboard/babel.config.js

@@ -0,0 +1,4 @@
+module.exports = {
+  presets: ['@babel/preset-env', '@babel/preset-react', '@babel/preset-typescript'],
+  plugins: [],
+};

packages/dashboard/jest.config.ts

@@ -0,0 +1,38 @@
+/*
+ * For a detailed explanation regarding each configuration property and type check, visit:
+ * https://jestjs.io/docs/configuration
+ */
+
+export default {
+  // preset: 'ts-jest',
+  // clearMocks: true,
+  // collectCoverage: true,
+  // coverageDirectory: 'coverage',
+  // coverageProvider: 'v8',
+  moduleFileExtensions: ['js', 'ts', 'jsx', 'tsx'],
+  moduleNameMapper: {
+    '\\.(svg|css|less|scss)$': '<rootDir>/testing/styleMock.js',
+  },
+  testEnvironment: 'jsdom',
+  transform: {
+    '.*\\.(tsx?|jsx?)$': [
+      '@swc/jest',
+      {
+        jsc: {
+          transform: {
+            react: {
+              runtime: 'automatic',
+            },
+          },
+        },
+      },
+    ],
+  },
+  setupFilesAfterEnv: ['mutationobserver-shim'],
+  //transform: {
+  //   '.+\\.ts$': 'ts-jest',
+  //   '^.+\\.tsx?$': 'ts-jest',
+  //   '^.+\\.(js|jsx)$': 'babel-jest',
+  // },
+  transformIgnorePatterns: [],
+};

packages/dashboard/package.json

@@ -0,0 +1,111 @@
+{
+  "name": "@iot-app-kit/dashboard",
+  "publishConfig": {
+    "access": "public"
+  },
+  "version": "3.0.0-alpha.3",
+  "description": "A dashboard widget for IoT App Kit components",
+  "homepage": "https://github.com/awslabs/iot-app-kit#readme",
+  "license": "Apache-2.0",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/awslabs/iot-app-kit.git"
+  },
+  "bugs": {
+    "url": "https://github.com/awslabs/iot-app-kit/issues"
+  },
+  "types": "dist/index.d.ts",
+  "main": "dist/cjs/index.js",
+  "module": "dist/esm/index.js",
+  "scripts": {
+    "build": "rimraf dist && rollup -c",
+    "build-storybook": "build-storybook",
+    "clean": "rimraf dist",
+    "start": "start-storybook -p 6006",
+    "storybook": "start-storybook -p 6006",
+    "test": "jest",
+    "test:cypress-ct": "echo \"Error: no cypress tests specified\" && exit 0"
+  },
+  "devDependencies": {
+    "@aws-sdk/client-iotsitewise": "^3.245.0",
+    "@babel/core": "^7.19.1",
+    "@babel/preset-typescript": "^7.18.6",
+    "@cloudscape-design/jest-preset": "^2.0.4",
+    "@reduxjs/toolkit": "^1.8.6",
+    "@rollup/plugin-commonjs": "^22.0.2",
+    "@rollup/plugin-json": "^5.0.1",
+    "@rollup/plugin-node-resolve": "13.3.0",
+    "@storybook/addon-actions": "^6.5.12",
+    "@storybook/addon-essentials": "^6.5.12",
+    "@storybook/addon-interactions": "^6.5.12",
+    "@storybook/addon-links": "^6.5.12",
+    "@storybook/builder-webpack5": "^6.5.15",
+    "@storybook/manager-webpack5": "^6.5.15",
+    "@storybook/preset-scss": "^1.0.3",
+    "@storybook/react": "^6.5.12",
+    "@storybook/testing-library": "^0.0.13",
+    "@swc/core": "^1.3.20",
+    "@swc/jest": "^0.2.23",
+    "@testing-library/dom": "^8.20.0",
+    "@testing-library/react": "^12.1.5",
+    "@types/box-intersect": "^1.0.0",
+    "@types/is-hotkey": "^0.1.7",
+    "@types/lodash": "^4.14.186",
+    "@types/node": "^18.11.4",
+    "@types/react": "^17.0.52",
+    "babel-jest": "^29.3.1",
+    "babel-loader": "^8.2.5",
+    "css-loader": "5.2.6",
+    "dotenv": "^16.0.3",
+    "jest-matcher-utils": "^29.3.1",
+    "lodash": "^4.17.21",
+    "postcss": "^8.2.4",
+    "postcss-import": "^14.0.0",
+    "postcss-url": "^10.1.3",
+    "react": "^17.0.2",
+    "react-dnd-test-backend": "^16.0.1",
+    "react-dnd-test-utils": "^16.0.1",
+    "react-dom": "^17.0.2",
+    "react-redux": "^8.0.4",
+    "redux": "^4.2.0",
+    "redux-saga-test-plan": "^4.0.6",
+    "rimraf": "^3.0.2",
+    "rollup": "2.76.0",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "rollup-plugin-polyfill-node": "^0.11.0",
+    "rollup-plugin-postcss": "^4.0.2",
+    "rollup-plugin-terser": "^7.0.2",
+    "rollup-plugin-typescript2": "^0.34.1",
+    "sass": "^1.57.1",
+    "sass-loader": "10.1.1",
+    "style-loader": "2.0.0",
+    "tslib": "^2.4.0",
+    "typescript": "^4.8.3",
+    "webpack": "^5.75.0"
+  },
+  "dependencies": {
+    "@aws-sdk/client-iotsitewise": "^3.245.0",
+    "@cloudscape-design/components": "^3.0.126",
+    "@cloudscape-design/design-tokens": "^3.0.7",
+    "@cloudscape-design/global-styles": "^1.0.5",
+    "@iot-app-kit/components": "^2.6.4",
+    "@iot-app-kit/core": "^2.6.4",
+    "@iot-app-kit/react-components": "2.5.1",
+    "@iot-app-kit/source-iotsitewise": "^2.6.4",
+    "@popperjs/core": "^2.11.6",
+    "@synchro-charts/core": "^7.1.5",
+    "box-intersect": "^1.0.2",
+    "is-hotkey": "^0.2.0",
+    "node-sass": "^8.0.0",
+    "parse-duration": "^1.0.0",
+    "react-dnd": "^16.0.1",
+    "react-dnd-html5-backend": "^16.0.1",
+    "react-dnd-touch-backend": "^16.0.1",
+    "react-popper": "^2.3.0",
+    "redux-saga": "^1.2.2"
+  },
+  "peerDependencies": {
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2"
+  }
+}

packages/dashboard/rollup.config.js

@@ -0,0 +1,51 @@
+import { nodeResolve } from '@rollup/plugin-node-resolve';
+import commonjs from '@rollup/plugin-commonjs';
+import typescript from 'rollup-plugin-typescript2';
+import { terser } from 'rollup-plugin-terser';
+import peerDepsExternal from 'rollup-plugin-peer-deps-external';
+import postcss from 'rollup-plugin-postcss';
+import json from '@rollup/plugin-json';
+import nodePolyfills from 'rollup-plugin-polyfill-node';
+import url from 'postcss-url';
+
+const packageJson = require('./package.json'); // eslint-disable-line
+
+export default [
+  {
+    input: 'src/index.ts',
+    output: [
+      {
+        file: packageJson.main,
+        format: 'cjs',
+        sourcemap: true,
+      },
+      {
+        file: packageJson.module,
+        format: 'esm',
+        sourcemap: true,
+      },
+    ],
+    plugins: [
+      nodePolyfills({ crypto: true }),
+      peerDepsExternal(),
+      nodeResolve({
+        browser: true,
+        preferBuiltins: false,
+      }),
+      commonjs(),
+      json(),
+      typescript({ tsconfig: './tsconfig.json' }),
+      postcss({
+        plugins: [
+          url({
+            url: 'inline', // enable inline assets using base64 encoding
+            maxSize: 10, // maximum file size to inline (in kilobytes)
+            fallback: 'copy', // fallback method to use if max size is exceeded
+          }),
+        ],
+      }),
+      terser(),
+    ],
+    external: ['react', 'react-dom'],
+  },
+];

packages/dashboard/src/components/actions/index.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+
+import { Button } from '@cloudscape-design/components';
+
+import { DashboardMessages } from '../../messages';
+import { DashboardState, SaveableDashboard } from '../../store/state';
+
+export type ActionsProps = {
+  onSave: (dashboard: SaveableDashboard) => void;
+  messageOverrides: DashboardMessages;
+  grid: DashboardState['grid'];
+  dashboardConfiguration: DashboardState['dashboardConfiguration'];
+  assetsDescriptionMap: DashboardState['assetsDescriptionMap'];
+};
+
+const Actions: React.FC<ActionsProps> = ({
+  onSave,
+  grid,
+  dashboardConfiguration,
+  messageOverrides,
+  assetsDescriptionMap,
+}) => {
+  const handleOnSave = () => {
+    const { height, width, cellSize, stretchToFit } = grid;
+    onSave({
+      grid: { height, width, cellSize, stretchToFit },
+      dashboardConfiguration,
+      assetsDescriptionMap,
+    });
+  };
+
+  return (
+    <div className="actions">
+      <h1 className="iot-dashboard-toolbar-title">{messageOverrides.toolbar.actions.title}</h1>
+      <Button variant="primary" onClick={handleOnSave}>
+        {messageOverrides.toolbar.actions.save}
+      </Button>
+    </div>
+  );
+};
+
+export default Actions;