chore: move dashboard dev env + msw to separate packages for reuse

.github/workflows/validate.yml

@@ -59,6 +59,8 @@ jobs:
             core,
             core-util,
             dashboard,
+            data-mocked,
+            dev-env,
             doc-site,
             react-components,
             scene-composer,
@@ -110,7 +112,7 @@ jobs:
             ${{ runner.os }}-test-lint-${{ matrix.package}}-
 
       - name: Validate
-        run: npx turbo run build:cjs build:es lint test --filter=@iot-app-kit/${{ matrix.package }}
+        run: npx turbo build:cjs build:es lint test --filter=@iot-app-kit/${{ matrix.package }}
 
   playwright:
     needs: repo
@@ -121,10 +123,10 @@ jobs:
       matrix:
         package:
           [
-            { name: 'dashboard', shardIndex: 1, totalShards: 4 },
-            { name: 'dashboard', shardIndex: 2, totalShards: 4 },
-            { name: 'dashboard', shardIndex: 3, totalShards: 4 },
-            { name: 'dashboard', shardIndex: 4, totalShards: 4 },
+            { name: 'dev-env', shardIndex: 1, totalShards: 4 },
+            { name: 'dev-env', shardIndex: 2, totalShards: 4 },
+            { name: 'dev-env', shardIndex: 3, totalShards: 4 },
+            { name: 'dev-env', shardIndex: 4, totalShards: 4 },
             { name: 'react-components', totalShards: 1, shardIndex: 1 },
             { name: 'scene-composer', totalShards: 1, shardIndex: 1 },
           ]
@@ -186,7 +188,7 @@ jobs:
 
       - name: Playwright
         run: |
-          npx turbo run test:ui:ci --filter=@iot-app-kit/${{ matrix.package.name }} -- --shard=${{ matrix.package.shardIndex }}/${{ matrix.package.totalShards }}
+          npx turbo test:ui:ci --filter=@iot-app-kit/${{ matrix.package.name }} -- --shard=${{ matrix.package.shardIndex }}/${{ matrix.package.totalShards }}
 
       - name: Test report
         id: upload-test-report

apps/dev-env/.env.example

@@ -0,0 +1,16 @@
+VITE_AWS_ACCESS_KEY_ID=xxxxx
+VITE_AWS_SECRET_ACCESS_KEY=xxxxx
+VITE_AWS_SESSION_TOKEN=xxxxx
+VITE_AWS_REGION=xxxxx
+VITE_EDGE_GATEWAY_ENDPOINT=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

apps/dev-env/.eslintignore

@@ -0,0 +1,2 @@
+node_modules
+storybook-static

apps/dev-env/.eslintrc.cjs

@@ -0,0 +1,4 @@
+module.exports = {
+  root: true,
+  extends: ['iot-app-kit'],
+};

packages/dashboard/.storybook/preview.js → apps/dev-env/.storybook/preview.js

@@ -1,3 +1,7 @@
+import { worker } from '@iot-app-kit/data-mocked/browser';
+
+worker.start();
+
 export const parameters = {
   controls: {
     matchers: {
@@ -6,4 +10,4 @@ export const parameters = {
     },
   },
 };
-export const tags = ["autodocs"];
+export const tags = ['autodocs'];

packages/dashboard/e2e/tests/configPanel/ConfigPanel.ts → apps/dev-env/e2e/dashboard/configPanel/ConfigPanel.ts

@@ -1,6 +1,8 @@
 import { type Locator, type Page } from '@playwright/test';
+
 const Y_LABEL_PLACEHOLDER_TEXT = 'Input Y-axis label';
 const CHECKBOX_LOCATOR = 'input[type=checkbox]';
+
 export class ConfigPanel {
   readonly page: Page;
   readonly container: Locator;

packages/dashboard/e2e/tests/resourceExplorer/resourceExplorer.spec.ts → apps/dev-env/e2e/dashboard/resourceExplorer/resourceExplorer.spec.ts

@@ -1,14 +1,14 @@
-import { test, expect } from '@playwright/test';
-import { gridUtil } from '../utils/grid';
+import { expect, test } from '@playwright/test';
+import { componentAssetModelName } from '../../../../../packages/data-mocked/src/iot-sitewise/resources/assetModels';
 import {
   ASSET_MODEL_TAB,
   MODELED_TAB,
   TEST_PAGE,
   UNMODELED_TAB,
   WIDGET_EMPTY_STATE_TEXT,
 } from '../constants';
+import { gridUtil } from '../utils/grid';
 import { resourceExplorerUtil } from '../utils/resourceExplorer';
-import { componentAssetModelName } from '../../../src/msw/iot-sitewise/resources/assetModels';
 
 test('can load resource explorer', async ({ page }) => {
   await page.goto(TEST_PAGE);

packages/dashboard/e2e/tests/utils/dragAndDrop.ts → apps/dev-env/e2e/dashboard/utils/dragAndDrop.ts

@@ -1,6 +1,5 @@
 import { type Locator, type Page } from '@playwright/test';
 import zip from 'lodash/zip.js';
-import { isDefined } from '../../../src/util/isDefined';
 import { type BoundingBox, getBoundingBox } from './locator';
 import { center } from './mousePosition';
 
@@ -70,7 +69,9 @@ const subdivide = (points: Point[]) => {
   const midPointsOfPairs = pairPoints(points).map(midPointFromPair);
   // Interleave the original list with the mid points of the pair
   // Remove any undefined entries as the result of interleaving
-  return zip(points, midPointsOfPairs).flat().filter(isDefined);
+  return zip(points, midPointsOfPairs)
+    .flat()
+    .filter((p) => p != null);
 };
 
 /**

packages/dashboard/e2e/tests/utils/grid.ts → apps/dev-env/e2e/dashboard/utils/grid.ts

@@ -1,8 +1,7 @@
 import { type Locator, type Page } from '@playwright/test';
-
 import { type DragPosition, dragAndDrop } from './dragAndDrop';
-import { center } from './mousePosition';
 import { type BoundingBox, getBoundingBox } from './locator';
+import { center } from './mousePosition';
 
 export const GRID_SIZE = 10;
 

apps/dev-env/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "@iot-app-kit/dev-env",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "start": "npm run dev",
+    "clean": "rimraf storybook-static .turbo .cache test-results playwright-report",
+    "clean:nuke": "npm run clean && rimraf node_modules",
+    "dev": "storybook dev -p 6006",
+    "lint": "eslint . --max-warnings=0 --cache --cache-location .cache/eslint/ & tsc --noEmit",
+    "fix": "eslint --fix . --cache --cache-location ./cache/eslint/",
+    "test:ui": "npx playwright test",
+    "test:ui:ci": "npx playwright test",
+    "test:ui:watch": "npx playwright test --ui"
+  },
+  "dependencies": {
+    "@aws-sdk/client-iot-events": "^3.354.0",
+    "@aws-sdk/client-iotsitewise": "^3.696.0",
+    "@aws-sdk/client-iottwinmaker": "^3.354.0",
+    "@cloudscape-design/components": "3.0.693",
+    "@iot-app-kit/core": "*",
+    "@iot-app-kit/core-util": "*",
+    "@iot-app-kit/dashboard": "*",
+    "@iot-app-kit/data-mocked": "*",
+    "@iot-app-kit/ts-config": "*",
+    "@playwright/test": "^1.48.2",
+    "@storybook/addon-essentials": "^8.4.5",
+    "@storybook/addon-interactions": "^8.4.5",
+    "@storybook/addon-links": "^8.4.5",
+    "@storybook/react": "^8.4.5",
+    "@storybook/react-vite": "^8.4.5",
+    "@storybook/test": "^8.4.5",
+    "@types/node": "^18.16.18",
+    "@vitejs/plugin-react": "^4.3.3",
+    "eslint-config-iot-app-kit": "*",
+    "lodash": "^4.17.21",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-hook-form": "^7.46.1",
+    "rimraf": "^5.0.1",
+    "storybook": "^8.4.5",
+    "typescript": "^5.5.4",
+    "uuid": "^9.0.0",
+    "vite": "^5.4.11"
+  },
+  "msw": {
+    "workerDirectory": "public"
+  }
+}

packages/dashboard/stories/dashboard/assistant-dashboard.stories.tsx → apps/dev-env/stories/dashboard/assistant-dashboard.stories.tsx

@@ -1,8 +1,7 @@
 import { registerPlugin } from '@iot-app-kit/core';
+import { Dashboard, type DashboardConfiguration } from '@iot-app-kit/dashboard';
 import type { Meta, StoryObj } from '@storybook/react';
 import { useCallback, useState } from 'react';
-import { Dashboard } from '../../src';
-import { type DashboardConfiguration } from '../../src/types';
 
 registerPlugin('metricsRecorder', {
   provider: () => ({
@@ -59,14 +58,12 @@ type Story = StoryObj<typeof Dashboard>;
 
 export const Main: Story = {
   render: (_story, { args }) => {
-    // eslint-disable-next-line react-hooks/rules-of-hooks
     const [initialViewMode, setInitialViewMode] = useState<'preview' | 'edit'>(
       'edit'
     );
 
     // on save not only updates local storage but forces the dashboard to reload given the updated config
     // this is done to more realistically match the dashboard implementation in iot-application
-    // eslint-disable-next-line react-hooks/rules-of-hooks
     const onSave = useCallback(
       async (
         dashboard: DashboardConfiguration,

packages/dashboard/stories/dashboard/edge-dashboard.stories.tsx → apps/dev-env/stories/dashboard/edge-dashboard.stories.tsx

@@ -2,13 +2,13 @@ import { IoTEventsClient } from '@aws-sdk/client-iot-events';
 import { IoTSiteWise, IoTSiteWiseClient } from '@aws-sdk/client-iotsitewise';
 import { IoTTwinMakerClient } from '@aws-sdk/client-iottwinmaker';
 import { registerPlugin } from '@iot-app-kit/core';
-import type { Meta, StoryObj } from '@storybook/react';
-import { useState } from 'react';
-import { Dashboard } from '../../src';
 import {
+  Dashboard,
   type DashboardClientConfiguration,
   type DashboardConfiguration,
-} from '../../src/types';
+} from '@iot-app-kit/dashboard';
+import type { Meta, StoryObj } from '@storybook/react';
+import { useState } from 'react';
 
 registerPlugin('metricsRecorder', {
   provider: () => ({
@@ -84,11 +84,9 @@ type Story = StoryObj<typeof Dashboard>;
 
 export const Main: Story = {
   render: (_story, { args }) => {
-    // eslint-disable-next-line react-hooks/rules-of-hooks
     const [dashboardConfig, setDashboardConfig] = useState(
       args.dashboardConfiguration
     );
-    // eslint-disable-next-line react-hooks/rules-of-hooks
     const [initialViewMode, setInitialViewMode] = useState<'preview' | 'edit'>(
       'edit'
     );

packages/dashboard/stories/dashboard/mocked-dashboard-custom-toolbar.stories.tsx → apps/dev-env/stories/dashboard/mocked-dashboard-custom-toolbar.stories.tsx

@@ -1,23 +1,23 @@
 import {
   DateRangePicker,
-  type DateRangePickerProps,
   FormField,
+  type DateRangePickerProps,
 } from '@cloudscape-design/components';
-import { type Viewport, registerPlugin } from '@iot-app-kit/core';
+import { registerPlugin, type Viewport } from '@iot-app-kit/core';
 import {
   dateRangeToViewport,
   rangeValidator,
   viewportToDateRange,
 } from '@iot-app-kit/core-util';
+import {
+  Dashboard,
+  DashboardView,
+  type DashboardConfiguration,
+} from '@iot-app-kit/dashboard';
+import { DEFAULT_REGION } from '@iot-app-kit/data-mocked/constants';
 import { type Meta, type StoryObj } from '@storybook/react';
 import { useEffect, useState } from 'react';
 import { Controller, useForm } from 'react-hook-form';
-import DashboardView from '~/components/dashboard/view';
-import { type RefreshRate } from '~/components/refreshRate/types';
-import { DEFAULT_REGION } from '~/msw/constants';
-import { useWorker } from '~/msw/useWorker';
-import { Dashboard } from '../../src/index';
-import { type DashboardConfiguration } from '../../src/types';
 import { MOCK_DASHBOARD_CONFIG } from './mockData';
 
 const displaySettings = {
@@ -26,15 +26,15 @@ const displaySettings = {
 };
 
 const defaultViewport = { duration: '10m' };
-const querySettings = { refreshRate: 5000 as RefreshRate };
+const querySettings = { refreshRate: 5000 } as const;
 
 registerPlugin('metricsRecorder', {
   provider: () => ({
     record: (...args) => console.log('record metric:', ...args),
   }),
 });
 
-export default {
+const meta = {
   title: 'Dashboard/Mocked data with Custom Toolbar',
   component: Dashboard,
   parameters: {
@@ -49,14 +49,8 @@ export default {
       awsRegion: DEFAULT_REGION,
     },
   },
-  // Applies to all stories under Mocked data
-  decorators: [
-    (Story) => {
-      useWorker();
-      return <Story />;
-    },
-  ],
 } satisfies Meta<typeof Dashboard>;
+export default meta;
 
 type Story = StoryObj<typeof Dashboard>;
 

packages/dashboard/stories/dashboard/mocked-dashboard.stories.tsx → apps/dev-env/stories/dashboard/mocked-dashboard.stories.tsx

@@ -1,8 +1,7 @@
 import { registerPlugin } from '@iot-app-kit/core';
+import { Dashboard } from '@iot-app-kit/dashboard';
+import { DEFAULT_REGION } from '@iot-app-kit/data-mocked/constants';
 import { type Meta, type StoryObj } from '@storybook/react';
-import { DEFAULT_REGION } from '~/msw/constants';
-import { useWorker } from '~/msw/useWorker';
-import { Dashboard } from '../../src';
 import { MOCK_DASHBOARD_CONFIG } from './mockData';
 
 registerPlugin('metricsRecorder', {
@@ -40,16 +39,9 @@ const meta = {
   parameters: {
     layout: 'fullscreen',
   },
-  // Applies to all stories under Mocked data
-  decorators: [
-    (Story) => {
-      useWorker();
-      return <Story />;
-    },
-  ],
 } satisfies Meta<typeof Dashboard>;
-
 export default meta;
+
 type Story = StoryObj<typeof Dashboard>;
 
 export const Empty: Story = {};

packages/dashboard/stories/dashboard/sitewise-dashboard.stories.tsx → apps/dev-env/stories/dashboard/sitewise-dashboard.stories.tsx

@@ -1,11 +1,11 @@
 import { registerPlugin } from '@iot-app-kit/core';
-import type { Meta, StoryObj } from '@storybook/react';
-import { useCallback, useState } from 'react';
-import { Dashboard } from '../../src';
 import {
+  Dashboard,
   type DashboardClientConfiguration,
   type DashboardConfiguration,
-} from '../../src/types';
+} from '@iot-app-kit/dashboard';
+import type { Meta, StoryObj } from '@storybook/react';
+import { useCallback, useState } from 'react';
 
 const DASHBOARD_STORAGE_NAMESPACE = 'connected-dashboard';
 

apps/dev-env/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "extends": "@iot-app-kit/ts-config/tsconfig.base.json",
+  "include": [".storybook", "stories", "msw"],
+  "compilerOptions": {
+    "types": ["vite/client"],
+    "moduleResolution": "bundler"
+  }
+}

apps/dev-env/vite.config.ts

@@ -0,0 +1,7 @@
+import react from '@vitejs/plugin-react';
+import { defineConfig } from 'vite';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+});