xertica-ui 2.5.2 → 2.6.0

package/scripts/a11y-audit.mjs

@@ -1,162 +1,162 @@
-/**
- * Automated Storybook A11y Audit Script
- * Uses Playwright + axe-core to check accessibility violations across all stories.
- * 
- * Usage: node --experimental-vm-modules scripts/a11y-audit.mjs
- * Requires: Storybook running on localhost:6006
- */
-
-import { chromium } from 'playwright';
-import fs from 'fs';
-import path from 'path';
-import { fileURLToPath } from 'url';
-
-const __dirname = path.dirname(fileURLToPath(import.meta.url));
-const STORYBOOK_URL = 'http://localhost:6006';
-const OUTPUT_FILE = path.resolve(__dirname, '..', 'a11y-audit-results.json');
-
-async function main() {
-  console.log('🔍 Starting A11y audit...\n');
-
-  // 1. Fetch story index
-  let stories;
-  try {
-    const res = await fetch(`${STORYBOOK_URL}/index.json`);
-    const data = await res.json();
-    stories = Object.values(data.entries || data.v || {}).filter(
-      (s) => s.type === 'story'
-    );
-  } catch (e) {
-    console.error('❌ Could not fetch story index. Is Storybook running on port 6006?');
-    process.exit(1);
-  }
-
-  console.log(`📖 Found ${stories.length} stories to audit.\n`);
-
-  // 2. Read axe-core source from node_modules
-  const axeCorePath = path.resolve(
-    __dirname, '..', 'node_modules', 'axe-core', 'axe.min.js'
-  );
-  const axeCoreSource = fs.readFileSync(axeCorePath, 'utf-8');
-
-  // 3. Launch browser
-  const browser = await chromium.launch({ headless: true });
-  const context = await browser.newContext();
-
-  const allResults = [];
-  let totalViolations = 0;
-  let storiesWithViolations = 0;
-
-  for (let i = 0; i < stories.length; i++) {
-    const story = stories[i];
-    const storyId = story.id;
-    const storyTitle = story.title;
-    const storyName = story.name;
-    const label = `${storyTitle} / ${storyName}`;
-
-    process.stdout.write(`  [${i + 1}/${stories.length}] ${label}...`);
-
-    const page = await context.newPage();
-    try {
-      const url = `${STORYBOOK_URL}/iframe.html?id=${storyId}&viewMode=story`;
-      await page.goto(url, { waitUntil: 'networkidle', timeout: 15000 });
-
-      // Wait a bit for any dynamic content
-      await page.waitForTimeout(500);
-
-      // Inject axe-core and run
-      await page.evaluate(axeCoreSource);
-      const results = await page.evaluate(async () => {
-        // @ts-ignore
-        return await window.axe.run(document.body, {
-          rules: {
-            // Skip rules that are story-specific / not relevant
-            'page-has-heading-one': { enabled: false },
-            'landmark-one-main': { enabled: false },
-            'region': { enabled: false },
-          }
-        });
-      });
-
-      const violations = results.violations || [];
-      if (violations.length > 0) {
-        storiesWithViolations++;
-        const vCount = violations.reduce((sum, v) => sum + v.nodes.length, 0);
-        totalViolations += vCount;
-        console.log(` ❌ ${violations.length} rules violated (${vCount} nodes)`);
-
-        allResults.push({
-          storyId,
-          title: storyTitle,
-          name: storyName,
-          violations: violations.map((v) => ({
-            id: v.id,
-            impact: v.impact,
-            description: v.description,
-            helpUrl: v.helpUrl,
-            nodes: v.nodes.length,
-            targets: v.nodes.map((n) => n.target?.[0] || n.html?.substring(0, 100)),
-          })),
-        });
-      } else {
-        console.log(` ✅`);
-      }
-    } catch (err) {
-      console.log(` ⚠️  Error: ${err.message?.substring(0, 80)}`);
-    } finally {
-      await page.close();
-    }
-  }
-
-  await browser.close();
-
-  // 4. Write results
-  fs.writeFileSync(OUTPUT_FILE, JSON.stringify(allResults, null, 2), 'utf-8');
-
-  // 5. Print summary
-  console.log('\n' + '='.repeat(70));
-  console.log(`📊 A11y Audit Summary`);
-  console.log('='.repeat(70));
-  console.log(`  Stories audited:        ${stories.length}`);
-  console.log(`  Stories with violations: ${storiesWithViolations}`);
-  console.log(`  Total violation nodes:   ${totalViolations}`);
-  console.log(`  Results saved to:        ${OUTPUT_FILE}`);
-  console.log('='.repeat(70));
-
-  // 6. Print detailed violations grouped by component
-  if (allResults.length > 0) {
-    console.log('\n📋 Violations by Component:\n');
-
-    // Group by title (component)
-    const grouped = {};
-    for (const r of allResults) {
-      if (!grouped[r.title]) grouped[r.title] = [];
-      for (const v of r.violations) {
-        const existing = grouped[r.title].find((x) => x.id === v.id);
-        if (existing) {
-          existing.totalNodes += v.nodes;
-          existing.stories.push(r.name);
-        } else {
-          grouped[r.title].push({
-            id: v.id,
-            impact: v.impact,
-            description: v.description,
-            totalNodes: v.nodes,
-            stories: [r.name],
-          });
-        }
-      }
-    }
-
-    for (const [component, violations] of Object.entries(grouped)) {
-      console.log(`  🔸 ${component}`);
-      for (const v of violations) {
-        console.log(`     ├─ [${v.impact?.toUpperCase()}] ${v.id}: ${v.description}`);
-        console.log(`     │  Nodes: ${v.totalNodes} | Stories: ${v.stories.join(', ')}`);
-      }
-      console.log('');
-    }
-  }
-}
-
-main().catch(console.error);
+/**
+ * Automated Storybook A11y Audit Script
+ * Uses Playwright + axe-core to check accessibility violations across all stories.
+ * 
+ * Usage: node --experimental-vm-modules scripts/a11y-audit.mjs
+ * Requires: Storybook running on localhost:6006
+ */
+
+import { chromium } from 'playwright';
+import fs from 'fs';
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const STORYBOOK_URL = 'http://localhost:6006';
+const OUTPUT_FILE = path.resolve(__dirname, '..', 'a11y-audit-results.json');
+
+async function main() {
+  console.log('🔍 Starting A11y audit...\n');
+
+  // 1. Fetch story index
+  let stories;
+  try {
+    const res = await fetch(`${STORYBOOK_URL}/index.json`);
+    const data = await res.json();
+    stories = Object.values(data.entries || data.v || {}).filter(
+      (s) => s.type === 'story'
+    );
+  } catch (e) {
+    console.error('❌ Could not fetch story index. Is Storybook running on port 6006?');
+    process.exit(1);
+  }
+
+  console.log(`📖 Found ${stories.length} stories to audit.\n`);
+
+  // 2. Read axe-core source from node_modules
+  const axeCorePath = path.resolve(
+    __dirname, '..', 'node_modules', 'axe-core', 'axe.min.js'
+  );
+  const axeCoreSource = fs.readFileSync(axeCorePath, 'utf-8');
+
+  // 3. Launch browser
+  const browser = await chromium.launch({ headless: true });
+  const context = await browser.newContext();
+
+  const allResults = [];
+  let totalViolations = 0;
+  let storiesWithViolations = 0;
+
+  for (let i = 0; i < stories.length; i++) {
+    const story = stories[i];
+    const storyId = story.id;
+    const storyTitle = story.title;
+    const storyName = story.name;
+    const label = `${storyTitle} / ${storyName}`;
+
+    process.stdout.write(`  [${i + 1}/${stories.length}] ${label}...`);
+
+    const page = await context.newPage();
+    try {
+      const url = `${STORYBOOK_URL}/iframe.html?id=${storyId}&viewMode=story`;
+      await page.goto(url, { waitUntil: 'networkidle', timeout: 15000 });
+
+      // Wait a bit for any dynamic content
+      await page.waitForTimeout(500);
+
+      // Inject axe-core and run
+      await page.evaluate(axeCoreSource);
+      const results = await page.evaluate(async () => {
+        // @ts-ignore
+        return await window.axe.run(document.body, {
+          rules: {
+            // Skip rules that are story-specific / not relevant
+            'page-has-heading-one': { enabled: false },
+            'landmark-one-main': { enabled: false },
+            'region': { enabled: false },
+          }
+        });
+      });
+
+      const violations = results.violations || [];
+      if (violations.length > 0) {
+        storiesWithViolations++;
+        const vCount = violations.reduce((sum, v) => sum + v.nodes.length, 0);
+        totalViolations += vCount;
+        console.log(` ❌ ${violations.length} rules violated (${vCount} nodes)`);
+
+        allResults.push({
+          storyId,
+          title: storyTitle,
+          name: storyName,
+          violations: violations.map((v) => ({
+            id: v.id,
+            impact: v.impact,
+            description: v.description,
+            helpUrl: v.helpUrl,
+            nodes: v.nodes.length,
+            targets: v.nodes.map((n) => n.target?.[0] || n.html?.substring(0, 100)),
+          })),
+        });
+      } else {
+        console.log(` ✅`);
+      }
+    } catch (err) {
+      console.log(` ⚠️  Error: ${err.message?.substring(0, 80)}`);
+    } finally {
+      await page.close();
+    }
+  }
+
+  await browser.close();
+
+  // 4. Write results
+  fs.writeFileSync(OUTPUT_FILE, JSON.stringify(allResults, null, 2), 'utf-8');
+
+  // 5. Print summary
+  console.log('\n' + '='.repeat(70));
+  console.log(`📊 A11y Audit Summary`);
+  console.log('='.repeat(70));
+  console.log(`  Stories audited:        ${stories.length}`);
+  console.log(`  Stories with violations: ${storiesWithViolations}`);
+  console.log(`  Total violation nodes:   ${totalViolations}`);
+  console.log(`  Results saved to:        ${OUTPUT_FILE}`);
+  console.log('='.repeat(70));
+
+  // 6. Print detailed violations grouped by component
+  if (allResults.length > 0) {
+    console.log('\n📋 Violations by Component:\n');
+
+    // Group by title (component)
+    const grouped = {};
+    for (const r of allResults) {
+      if (!grouped[r.title]) grouped[r.title] = [];
+      for (const v of r.violations) {
+        const existing = grouped[r.title].find((x) => x.id === v.id);
+        if (existing) {
+          existing.totalNodes += v.nodes;
+          existing.stories.push(r.name);
+        } else {
+          grouped[r.title].push({
+            id: v.id,
+            impact: v.impact,
+            description: v.description,
+            totalNodes: v.nodes,
+            stories: [r.name],
+          });
+        }
+      }
+    }
+
+    for (const [component, violations] of Object.entries(grouped)) {
+      console.log(`  🔸 ${component}`);
+      for (const v of violations) {
+        console.log(`     ├─ [${v.impact?.toUpperCase()}] ${v.id}: ${v.description}`);
+        console.log(`     │  Nodes: ${v.totalNodes} | Stories: ${v.stories.join(', ')}`);
+      }
+      console.log('');
+    }
+  }
+}
+
+main().catch(console.error);

package/scripts/fix-stories.cjs

@@ -1,19 +1,19 @@
-const fs = require('fs');
-const path = require('path');
-
-function walk(dir) {
-    const files = fs.readdirSync(dir);
-    files.forEach(file => {
-        const filePath = path.join(dir, file);
-        if (fs.statSync(filePath).isDirectory()) {
-            walk(filePath);
-        } else if (file.endsWith('.stories.tsx')) {
-            let content = fs.readFileSync(filePath, 'utf8');
-            content = content.replace(/\s*tags: \['autodocs'\],/g, '');
-            fs.writeFileSync(filePath, content, 'utf8');
-            console.log(`Updated ${filePath}`);
-        }
-    });
-}
-
-walk('.');
+const fs = require('fs');
+const path = require('path');
+
+function walk(dir) {
+    const files = fs.readdirSync(dir);
+    files.forEach(file => {
+        const filePath = path.join(dir, file);
+        if (fs.statSync(filePath).isDirectory()) {
+            walk(filePath);
+        } else if (file.endsWith('.stories.tsx')) {
+            let content = fs.readFileSync(filePath, 'utf8');
+            content = content.replace(/\s*tags: \['autodocs'\],/g, '');
+            fs.writeFileSync(filePath, content, 'utf8');
+            console.log(`Updated ${filePath}`);
+        }
+    });
+}
+
+walk('.');

package/styles/globals.css

@@ -10,4 +10,3 @@
 
 /* App Specific Overrides */
 /* @import "./xertica/app-overrides/chat.css"; */
-/* @import "./xertica/app-overrides/scrollbar.css"; */

package/styles/xertica/base.css

@@ -9,6 +9,14 @@
 @custom-variant mobile (@media (max-width: 767px));
 
 @layer base {
+  :root {
+    color-scheme: light;
+  }
+
+  :root.dark {
+    color-scheme: dark;
+  }
+
   * {
     @apply border-border outline-ring/50;
   }