feat(org-chart): support external CSS themes and align documentation

examples/org-chart-react/verify-p11-stories.mjs

@@ -0,0 +1,35 @@
+import fs from 'node:fs/promises';
+import path from 'node:path';
+import assert from 'node:assert/strict';
+import { launchChromium } from '../../scripts/orgchart-browser-runtime.mjs';
+const output = path.resolve('test-results/org-chart-p11');
+const browser = await launchChromium({ headless: true });
+const page = await browser.newPage({ viewport: { width: 1440, height: 900 } });
+const errors = [], checks = [];
+page.on('pageerror', error => errors.push(error.message));
+page.on('console', message => { if (message.type() === 'error') errors.push(message.text()); });
+try {
+  for (const [id, selector] of [
+    ['full-composition', '.hm-orgchart-composition[data-display-mode="readOnly"]'],
+    ['expanded-org-chart', '.hm-orgchart-expanded'],
+    ['department-colors', '.hm-orgchart-department-colors'],
+    ['logo-personnel-summary', '.hm-orgchart-affiliation-mark'],
+  ]) {
+    await page.goto(`http://127.0.0.1:6034/iframe.html?id=orgchart--${id}&viewMode=story`);
+    await page.locator(selector).first().waitFor();
+    await page.evaluate(async () => { await document.fonts.ready; await new Promise(resolve => setTimeout(resolve, 800)); });
+    if (id === 'department-colors') {
+      const gradients = await page.locator('.hm-orgchart-color-preview .hm-orgchart-color-department-name').evaluateAll(headings => headings.map(heading => getComputedStyle(heading).backgroundImage));
+      assert.equal(gradients.length, 6);
+      assert.ok(gradients.every(gradient => gradient !== 'none'));
+      assert.equal(new Set(gradients).size, 6);
+    }
+    await page.screenshot({ path: path.join(output, `storybook-${id}.png`) });
+    checks.push({ name: id, status: 'PASS' });
+  }
+  assert.deepEqual(errors, []);
+} finally {
+  await fs.writeFile(path.join(output, 'storybook-result.json'), JSON.stringify({ checks, errors }, null, 2));
+  await browser.close();
+}
+console.log(`Storybook: ${checks.length} checks, ${errors.length} errors`);