Add components for WC DataVis and DataVis NITRO

.storybook/main.ts

@@ -1,5 +1,84 @@
+import { existsSync, readFileSync } from 'node:fs';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+
 import type { StorybookConfig } from '@storybook/react-vite';
 
+const storybookDir = path.dirname(fileURLToPath(import.meta.url));
+const workspaceRoot = path.resolve(storybookDir, '..');
+const rootNodeModulesDir = path.join(workspaceRoot, 'node_modules');
+const pnpmVirtualNodeModulesDir = path.join(rootNodeModulesDir, '.pnpm/node_modules');
+
+function escapeRegExp(value: string): string {
+  return value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+}
+
+function readDependencyNames(packageDirName: 'datavis' | 'wcdatavis'): string[] {
+  const packageJsonPath = path.join(rootNodeModulesDir, packageDirName, 'package.json');
+  const packageJson = JSON.parse(readFileSync(packageJsonPath, 'utf8')) as {
+    dependencies?: Record<string, string>;
+  };
+
+  return Object.keys(packageJson.dependencies ?? {});
+}
+
+const datavisDependencyNames = Array.from(
+  new Set([...readDependencyNames('datavis'), ...readDependencyNames('wcdatavis')]),
+);
+
+const missingRootDependencies = datavisDependencyNames.filter(
+  (dependencyName) => !existsSync(path.join(rootNodeModulesDir, dependencyName)),
+);
+
+const datavisDependencyAliases = missingRootDependencies
+  .filter((dependencyName) => existsSync(path.join(pnpmVirtualNodeModulesDir, dependencyName)))
+  .map((dependencyName) => ({
+    find: new RegExp(`^${escapeRegExp(dependencyName)}(\/.*)?$`),
+    replacement: `${path.join(pnpmVirtualNodeModulesDir, dependencyName)}$1`,
+  }));
+
+const localUiAliases = [
+  {
+    find: /^@mieweb\/ui\/components\/(.+)$/,
+    replacement: `${path.join(workspaceRoot, 'src/components')}/$1`,
+  },
+  {
+    find: /^@mieweb\/ui\/styles\.css$/,
+    replacement: path.join(workspaceRoot, 'src/styles/base.css'),
+  },
+  {
+    find: /^@mieweb\/ui$/,
+    replacement: path.join(workspaceRoot, 'src/index.ts'),
+  },
+] as const;
+
+const datavisCjsInteropDependencies = [
+  'underscore',
+  'sprintf-js',
+  'jquery',
+  'bignumber.js',
+  'numeral',
+  'moment',
+  'json-formatter-js',
+  'papaparse',
+  'handlebars',
+] as const;
+
+const datavisLegacySubpathDependencies = [
+  'core-js/es/string/replace-all',
+  'chart.js/auto',
+  'squirrelly/dist/browser/squirrelly.min.js',
+] as const;
+
+const datavisSourceEntries = [
+  'datavis/src/components/DataGrid.tsx',
+  'datavis/src/adapters/colconfig-adapter.ts',
+  'datavis/src/adapters/group-adapter.ts',
+  'datavis/src/adapters/wcdatavis-interop.ts',
+  'datavis/src/adapters/use-data.ts',
+  'datavis/src/components/table/TableRenderer.tsx',
+] as const;
+
 const config: StorybookConfig = {
   stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   addons: [
@@ -16,6 +95,44 @@ const config: StorybookConfig = {
     reactDocgen: 'react-docgen-typescript',
   },
   staticDirs: ['./public'],
+  async viteFinal(config) {
+    config.resolve ??= {};
+    config.resolve.alias = [
+      ...(Array.isArray(config.resolve.alias)
+        ? config.resolve.alias
+        : config.resolve.alias
+          ? [config.resolve.alias]
+          : []),
+      ...localUiAliases,
+      ...datavisDependencyAliases,
+    ];
+
+    config.esbuild = {
+      ...config.esbuild,
+      jsx: 'automatic',
+      jsxImportSource: 'react',
+    };
+
+    config.optimizeDeps ??= {};
+    config.optimizeDeps.force = true;
+    config.optimizeDeps.include = Array.from(
+      new Set([
+        ...(config.optimizeDeps.include ?? []),
+        ...datavisSourceEntries,
+        ...datavisDependencyNames,
+        ...datavisCjsInteropDependencies,
+        ...datavisLegacySubpathDependencies,
+        ...missingRootDependencies,
+      ]),
+    );
+    config.optimizeDeps.esbuildOptions = {
+      ...config.optimizeDeps.esbuildOptions,
+      jsx: 'automatic',
+      jsxImportSource: 'react',
+    };
+
+    return config;
+  },
 };
 
 export default config;

.storybook/preview-head.html

@@ -1,3 +1,8 @@
+<!-- Font Awesome 4 — required by wcdatavis grid icons -->
+<link
+  rel="stylesheet"
+  href="/node_modules/font-awesome/css/font-awesome.min.css"
+/>
 <!-- Microsoft Clarity Analytics - Production only -->
 <script type="text/javascript">
   // Only load Clarity in production (when not on localhost)

.storybook/public/sample-data.json

@@ -0,0 +1,22 @@
+{
+  "typeInfo": [
+    { "field": "id", "type": "number" },
+    { "field": "name", "type": "string" },
+    { "field": "email", "type": "string" },
+    { "field": "department", "type": "string" },
+    { "field": "status", "type": "string" },
+    { "field": "start_date", "type": "string" }
+  ],
+  "data": [
+    { "id": 1, "name": "Alice Johnson", "email": "alice@example.com", "department": "Engineering", "status": "Active", "start_date": "2023-01-15" },
+    { "id": 2, "name": "Bob Smith", "email": "bob@example.com", "department": "Marketing", "status": "Active", "start_date": "2022-06-01" },
+    { "id": 3, "name": "Carol Williams", "email": "carol@example.com", "department": "Engineering", "status": "On Leave", "start_date": "2021-03-20" },
+    { "id": 4, "name": "David Brown", "email": "david@example.com", "department": "Sales", "status": "Active", "start_date": "2023-08-10" },
+    { "id": 5, "name": "Eva Martinez", "email": "eva@example.com", "department": "Engineering", "status": "Active", "start_date": "2020-11-05" },
+    { "id": 6, "name": "Frank Lee", "email": "frank@example.com", "department": "Marketing", "status": "Inactive", "start_date": "2019-04-22" },
+    { "id": 7, "name": "Grace Kim", "email": "grace@example.com", "department": "Sales", "status": "Active", "start_date": "2024-01-08" },
+    { "id": 8, "name": "Henry Chen", "email": "henry@example.com", "department": "Engineering", "status": "Active", "start_date": "2022-09-14" },
+    { "id": 9, "name": "Ivy Patel", "email": "ivy@example.com", "department": "Marketing", "status": "Active", "start_date": "2023-05-30" },
+    { "id": 10, "name": "Jack Wilson", "email": "jack@example.com", "department": "Sales", "status": "On Leave", "start_date": "2021-07-19" }
+  ]
+}