feat(dashboard): alpha release of dashboard component

.eslintignore

@@ -8,7 +8,7 @@ build
 **/dist/*
 node_modules
 .storybook
-coverage
+**/coverage/*
 stencil-generated
 
 **/amazon-stocks.ts

.eslintrc.js

@@ -18,12 +18,13 @@ module.exports = {
     'eslint:recommended',
     'plugin:@typescript-eslint/eslint-recommended',
     'plugin:@typescript-eslint/recommended',
-    'plugin:react/recommended',
     'plugin:prettier/recommended',
     'plugin:chai-friendly/recommended',
   ],
   plugins: ['prettier', 'chai-friendly', 'react'],
   globals: {
+    module: true,
+    process: true,
     Atomics: 'readonly',
     SharedArrayBuffer: 'readonly',
   },
@@ -40,6 +41,8 @@ module.exports = {
   rules: {
     '@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',
+    'react/jsx-uses-vars': 'error',
   },
   overrides: [
     {

.github/workflows/npm-publish.yml

@@ -68,3 +68,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'

.stylelintignore

@@ -3,5 +3,6 @@ dist/
 www/
 loader/
 node_modules/
-coverage/
 examples/
+**/coverage/*
+coverage/

package.json

@@ -51,7 +51,7 @@
     "@types/classnames": "^2.2.9",
     "@types/color": "^3.0.1",
     "@types/color-string": "^1.5.0",
-    "@types/cypress-image-snapshot": "^3.1.5",
+    "@types/cypress-image-snapshot": "^3.1.6",
     "@types/d3": "^6.7.0",
     "@types/jest": "26.0.24",
     "@types/lodash.isequal": "^4.5.5",
@@ -62,8 +62,8 @@
     "@types/lodash.uniqby": "^4.7.6",
     "@types/puppeteer": "^1.20.2",
     "@types/uuid": "^3.4.6",
-    "@typescript-eslint/eslint-plugin": "^5.23.0",
-    "@typescript-eslint/parser": "5.23.0",
+    "@typescript-eslint/eslint-plugin": "^5.30.6",
+    "@typescript-eslint/parser": "^5.23.0",
     "babel-core": "^6.26.3",
     "babel-loader": "^8.0.6",
     "color": "^3.1.2",

packages/dashboard/.babelrc

@@ -0,0 +1,4 @@
+{
+  "presets": ["@babel/preset-env", "@babel/preset-react", "@babel/preset-typescript"],
+  "plugins": []
+}

packages/dashboard/.storybook/main.js

@@ -0,0 +1,17 @@
+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"
+  ],
+  "framework": "@storybook/react",
+  "core": {
+    "builder": "@storybook/builder-webpack5"
+  }
+}

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/jest.config.ts

@@ -0,0 +1,23 @@
+/*
+ * 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',
+  moduleNameMapper: {
+    '\\.(css|less)$': '<rootDir>/testing/styleMock.js',
+  },
+  testEnvironment: 'jsdom',
+  // setupFilesAfterEnv: ['mutationobserver-shim'],
+  // transform: {
+  //   '.+\\.ts$': 'ts-jest',
+  //   '^.+\\.tsx?$': 'ts-jest',
+  //   '^.+\\.(js|jsx)$': 'babel-jest',
+  // },
+  // transformIgnorePatterns: ['node_modules/(?!@awsui/components-react)/'],
+};

packages/dashboard/package.json

@@ -0,0 +1,70 @@
+{
+  "name": "@iot-app-kit/dashboard",
+  "publishConfig": {
+    "access": "public"
+  },
+  "version": "2.2.0",
+  "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"
+  },
+  "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"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.19.1",
+    "@babel/preset-typescript": "^7.18.6",
+    "@reduxjs/toolkit": "^1.8.6",
+    "@rollup/plugin-commonjs": "^22.0.2",
+    "@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.12",
+    "@storybook/manager-webpack5": "^6.5.12",
+    "@storybook/react": "^6.5.12",
+    "@storybook/testing-library": "^0.0.13",
+    "@types/node": "^18.11.4",
+    "@types/react": "^17.0.38",
+    "babel-loader": "^8.2.5",
+    "dotenv": "^16.0.3",
+    "postcss-import": "^14.0.0",
+    "postcss": "^8.2.4",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-redux": "^8.0.4",
+    "redux": "^4.2.0",
+    "rimraf": "^3.0.2",
+    "rollup": "2.76.0",
+    "rollup-plugin-dts": "^4.2.2",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "rollup-plugin-postcss": "^4.0.2",
+    "rollup-plugin-terser": "^7.0.2",
+    "rollup-plugin-typescript2": "^0.34.1",
+    "tslib": "^2.4.0",
+    "typescript": "^4.8.3"
+  },
+  "dependencies": {
+    "@iot-app-kit/core": "^2.2.0",
+    "@iot-app-kit/source-iotsitewise": "^2.2.0",
+    "@synchro-charts/core": "^4.0.0"
+  },
+  "peerDependencies": {
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2"
+  }
+}

packages/dashboard/rollup.config.js

@@ -0,0 +1,42 @@
+import { nodeResolve } from '@rollup/plugin-node-resolve';
+import commonjs from '@rollup/plugin-commonjs';
+import typescript from 'rollup-plugin-typescript2';
+import dts from 'rollup-plugin-dts';
+import { terser } from 'rollup-plugin-terser';
+import peerDepsExternal from 'rollup-plugin-peer-deps-external';
+import postcss from 'rollup-plugin-postcss';
+
+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: [
+      peerDepsExternal(),
+      nodeResolve(),
+      commonjs(),
+      typescript({ tsconfig: './tsconfig.json' }),
+      postcss(),
+      terser(),
+    ],
+    external: ['react', 'react-dom'],
+  },
+  {
+    input: 'dist/esm/dashboard/src/index.d.ts',
+    output: [{ file: 'dist/index.d.ts', format: 'esm' }],
+    external: [/\.css$/],
+    plugins: [dts()],
+  },
+];

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

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { act } from 'react-dom/test-utils';
+import * as ReactDOM from 'react-dom';
+
+import IotDashboard from './index';
+
+describe('IotDashboard', () => {
+  it('should render', function () {
+    const container = document.createElement('div');
+    document.body.appendChild(container);
+
+    const args = {
+      dashboardConfiguration: {
+        widgets: [],
+        viewport: { duration: '5m' },
+      },
+    };
+
+    act(() => {
+      ReactDOM.render(<IotDashboard {...args} />, container);
+    });
+    const dashboard = container.querySelector('.iot-dashboard');
+    expect(dashboard).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,17 @@
+import React from 'react';
+import { Provider } from 'react-redux';
+
+import InternalIotDashboard from '../internalDashboard';
+
+import { configureDashboardStore } from '../../store';
+import { DashboardState } from '../../store/state';
+
+export type IotDashboardProps = Pick<DashboardState, 'dashboardConfiguration'>;
+
+const IotDashboard = (props: IotDashboardProps) => (
+  <Provider store={configureDashboardStore(props)}>
+    <InternalIotDashboard />
+  </Provider>
+);
+
+export default IotDashboard;

packages/dashboard/src/components/internalDashboard/index.css

@@ -0,0 +1,30 @@
+.iot-dashboard {
+  height: 100vh;
+  width: 100vw;
+  display: grid;
+  grid-template:
+    "toolbar toolbar toolbar" max-content
+    "left-panel grid right-panel" 1fr / 1fr 2fr 1fr;
+}
+
+.iot-dashboard-toolbar {
+  grid-area: toolbar;
+  background-color: red;
+}
+
+.iot-dashboard-grid {
+  grid-area: grid;
+  background-color: yellow;
+}
+
+.iot-resizable-panel {
+  background-color: pink;
+}
+
+.iot-resizable-panel-left {
+  grid-area: left-panel;
+}
+
+.iot-resizable-panel-right {
+  grid-area: right-panel;
+}

packages/dashboard/src/components/internalDashboard/index.test.tsx

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+import { Provider } from 'react-redux';
+
+import { act } from 'react-dom/test-utils';
+
+import InternalIotDashboard from './index';
+import { configureDashboardStore } from '../../store';
+
+describe('InternalIotDashboard', () => {
+  it('should render', function () {
+    const container = document.createElement('div');
+    document.body.appendChild(container);
+
+    const args = {
+      dashboardConfiguration: {
+        widgets: [],
+        viewport: { duration: '5m' },
+      },
+    };
+
+    act(() => {
+      ReactDOM.render(
+        <Provider store={configureDashboardStore(args)}>
+          <InternalIotDashboard />
+        </Provider>,
+        container
+      );
+    });
+    const dashboard = container.querySelector('.iot-dashboard');
+    expect(dashboard).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,41 @@
+import React from 'react';
+import { useDispatch } from 'react-redux';
+
+/**
+ * For developing purposes only.
+ * Will be removed once component palette
+ * and asset explorer are implemented.
+ */
+// import { DEMO_TURBINE_ASSET_1, DEMO_TURBINE_ASSET_1_PROPERTY_4, query } from '../../../testing/siteWiseQueries';
+
+import { onCreateWidgetsAction } from '../../store/actions';
+// import { DashboardState } from '../../store/state';
+
+import './index.css';
+
+const InternalIotDashboard = () => {
+  const dispatch = useDispatch();
+
+  // const widgets = useSelector((state: DashboardState) => state.dashboardConfiguration.widgets);
+
+  const createWidgets = () =>
+    dispatch(
+      onCreateWidgetsAction({
+        widgets: [],
+      })
+    );
+
+  return (
+    <div className="iot-dashboard">
+      <div className="iot-dashboard-toolbar">
+        toolbar
+        <button onClick={createWidgets}>Add widget</button>
+      </div>
+      <div className="iot-resizable-panel iot-resizable-panel-left">left panel</div>
+      <div className="iot-dashboard-grid">grid</div>
+      <div className="iot-resizable-panel iot-resizable-panel-right">right panel</div>
+    </div>
+  );
+};
+
+export default InternalIotDashboard;