@oicl/openbridge-webcomponents-full-bundle 2.0.0-next.45 → 2.0.0-next.49

package/script/check-css-mixins.ts

@@ -0,0 +1,191 @@
+/**
+ * @module CSSMixinAudit
+ * @description
+ * This script audits CSS mixins within the project's source directory. It performs a comprehensive
+ * scan of all CSS files to match mixin definitions (@define-mixin) against their usages (@mixin).
+ *
+ * Features:
+ * - Scans all CSS files under the src directory (using glob src/\*\* / *.css).
+ * - Identifies unique mixin definitions and their locations.
+ * - Identifies unique mixin usages and their locations.
+ * - Detects duplicate definitions (warning).
+ * - Detects usages of undefined mixins (error).
+ * - Detects unused mixin definitions (warning).
+ * - Exits with code 1 if any undefined mixin usages are found, suitable for CI pipelines.
+ *
+ * Usage Examples:
+ * ```bash
+ * # Run via npm script
+ * npm run lint:mixins
+ *
+ * # Run directly using tsx
+ * tsx script/check-css-mixins.ts
+ * ```
+ *
+ * Expected Output:
+ * ```
+ * CSS mixin audit report
+ * Scanned 73 CSS files under src/
+ * Found 73 unique mixin definitions and 41 unique mixin usages
+ *
+ * Defined mixins
+ *   - font-label (1) => src/mixins/fonts.css:1
+ *   ...
+ *
+ * ✅ CSS mixin audit passed: no undefined mixin usages found.
+ * ```
+ *
+ * Note: This module is intended to be run as a standalone script. It does not export any public utilities.
+ * It utilizes internal functions to process file content using fs, path, and globby.
+ */
+
+import fs from 'fs';
+import path from 'path';
+import {globby} from 'globby';
+
+interface MixinDefinitionLocation {
+  file: string;
+  line: number;
+}
+
+interface MixinUsageLocation {
+  file: string;
+  line: number;
+}
+
+const jsDefinedMixins = new Set(['style']);
+
+function getLineNumber(text: string, index: number): number {
+  return text.slice(0, index).split('\n').length;
+}
+
+function formatLocation(location: {file: string; line: number}): string {
+  return `${path.relative(process.cwd(), location.file)}:${location.line}`;
+}
+
+function printSection(title: string, lines: string[]): void {
+  console.log(`\n${title}`);
+  if (lines.length === 0) {
+    console.log('  - none');
+    return;
+  }
+
+  for (const line of lines) {
+    console.log(`  - ${line}`);
+  }
+}
+
+async function run(): Promise<void> {
+  const cssFiles = await globby('src/**/*.css', {
+    cwd: process.cwd(),
+    absolute: true,
+  });
+
+  const definitions = new Map<string, MixinDefinitionLocation[]>();
+  const usages = new Map<string, MixinUsageLocation[]>();
+
+  for (const file of cssFiles) {
+    const content = fs.readFileSync(file, 'utf8');
+
+    const defineRegex = /@define-mixin\s+([A-Za-z0-9_-]+)/g;
+    for (const match of content.matchAll(defineRegex)) {
+      const name = match[1];
+      const index = match.index;
+      if (index == null) {
+        continue;
+      }
+      const location = {file, line: getLineNumber(content, index)};
+      definitions.set(name, [...(definitions.get(name) ?? []), location]);
+    }
+
+    const usageRegex = /@mixin\s+([A-Za-z0-9_-]+)/g;
+    for (const match of content.matchAll(usageRegex)) {
+      const name = match[1];
+      const index = match.index;
+      if (index == null) {
+        continue;
+      }
+      const location = {file, line: getLineNumber(content, index)};
+      usages.set(name, [...(usages.get(name) ?? []), location]);
+    }
+  }
+
+  const definedNames = [...definitions.keys()].sort();
+  const usedNames = [...usages.keys()].sort();
+
+  const duplicateDefinitions = definedNames.filter(
+    (name) => (definitions.get(name)?.length ?? 0) > 1
+  );
+  const undefinedUsages = usedNames.filter(
+    (name) => !definitions.has(name) && !jsDefinedMixins.has(name)
+  );
+  const unusedDefinitions = definedNames.filter((name) => !usages.has(name));
+
+  const definitionLines = definedNames.map((name) => {
+    const entries = definitions.get(name) ?? [];
+    return `${name} (${entries.length}) => ${entries
+      .map((entry) => formatLocation(entry))
+      .join(', ')}`;
+  });
+
+  const usageLines = usedNames.map((name) => {
+    const entries = usages.get(name) ?? [];
+    return `${name} (${entries.length}) => ${entries
+      .map((entry) => formatLocation(entry))
+      .join(', ')}`;
+  });
+
+  const duplicateDefinitionLines = duplicateDefinitions.map((name) => {
+    const entries = definitions.get(name) ?? [];
+    return `${name} (${entries.length}) => ${entries
+      .map((entry) => formatLocation(entry))
+      .join(', ')}`;
+  });
+
+  const undefinedUsageLines = undefinedUsages.map((name) => {
+    const entries = usages.get(name) ?? [];
+    return `${name} (${entries.length}) => ${entries
+      .map((entry) => formatLocation(entry))
+      .join(', ')}`;
+  });
+
+  const unusedDefinitionLines = unusedDefinitions.map((name) => {
+    const entries = definitions.get(name) ?? [];
+    return `${name} (${entries.length}) => ${entries
+      .map((entry) => formatLocation(entry))
+      .join(', ')}`;
+  });
+
+  console.log('CSS mixin audit report');
+  console.log(`Scanned ${cssFiles.length} CSS files under src/`);
+  console.log(
+    `Found ${definedNames.length} unique mixin definitions and ${usedNames.length} unique mixin usages`
+  );
+
+  printSection('Defined mixins', definitionLines);
+  printSection('Used mixins', usageLines);
+  printSection(
+    'Duplicate mixin definitions (warning)',
+    duplicateDefinitionLines
+  );
+  printSection('Used but undefined mixins (error)', undefinedUsageLines);
+  printSection('Defined but unused mixins (warning)', unusedDefinitionLines);
+
+  if (undefinedUsages.length > 0) {
+    console.error(
+      `\n❌ CSS mixin audit failed: ${undefinedUsages.length} undefined mixin name(s) found.`
+    );
+    process.exitCode = 1;
+    return;
+  }
+
+  console.log('\n✅ CSS mixin audit passed: no undefined mixin usages found.');
+}
+
+run().catch((error: unknown) => {
+  const message = error instanceof Error ? error.message : String(error);
+  console.error(
+    `❌ CSS mixin audit failed with an unexpected error: ${message}`
+  );
+  process.exitCode = 1;
+});

package/script/check-css-variables.ts

@@ -0,0 +1,280 @@
+/**
+ * @module CSSVariableAudit
+ * @description
+ * This script audits CSS variables within the project's source directory. It scans all CSS files
+ * to identify variable definitions (both standard `--var: value;` and `@property` rules)
+ * and their usages via the `var()` function.
+ *
+ * Features:
+ * - Scans all CSS files under the src directory (using glob src/\*\* / *.css).
+ * - Identifies unique variable definitions and their locations.
+ * - Identifies unique variable usages and their locations (including fallback detection).
+ * - Detects duplicate variable definitions (warning).
+ * - Detects usages of undefined variables (error), excluding a predefined set of allowed undefined variables.
+ * - Skips `src/palettes/variables.css` for usage checks as it is considered a definition-only file.
+ * - Exits with code 1 if any undefined variable usages (without fallbacks) are found.
+ *
+ * Usage Examples:
+ * ```bash
+ * # Run via npm script
+ * npm run lint:variables
+ *
+ * # Run directly using tsx
+ * tsx script/check-css-variables.ts
+ * ```
+ *
+ * Expected Output:
+ * ```
+ * CSS variable audit report
+ * Scanned 195 CSS files under src/
+ * Found 2755 unique variable definitions and 1103 unique variable usages
+ *
+ * Defined variables
+ *   - --ob-color-primary (1) => src/palettes/variables.css:10
+ *   ...
+ *
+ * ✅ CSS variable audit passed: no undefined variable usages found.
+ * ```
+ *
+ * Note: This module is intended to be run as a standalone script. It does not export any public utilities.
+ * It utilizes internal functions to process file content using fs, path, and globby.
+ */
+
+import fs from 'fs';
+import path from 'path';
+import {globby} from 'globby';
+
+const allowedUndefinedVariables = new Set([
+  '--alert-components-badge-label-spacing',
+  '--app-components-alert-components-general-notification-item-icon-size-large',
+  '--app-components-badge-border-radius',
+  '--app-components-badge-icon-size',
+  '--app-components-badge-icon-size-flat',
+  '--app-components-badge-icon-size-large',
+  '--app-components-badge-label-spacing',
+  '--app-components-badge-min-size-large',
+  '--app-components-badge-padding',
+  '--app-components-global-alert-item-counter-spacing',
+  '--color-container-background-color',
+  '--course',
+  '--critical-enabled-background-color',
+  '--critical-enabled-border-color',
+  '--critical-focused-background-color',
+  '--critical-focused-border-color',
+  '--critical-hover-background-color',
+  '--critical-hover-border-color',
+  '--critical-pressed-background-color',
+  '--critical-pressed-border-color',
+  '--custom-width',
+  '--enabled-background-color',
+  '--global-size-spacing-list-item-menu-padding-horizonal-list-item',
+  '--grid-columns',
+  '--grid-columns-rest',
+  '--heading',
+  '--image-size',
+  '--menu-navigation-components-date-item-padding-vertical',
+  '--menu-navigation-components-tab-item-divider-height',
+  '--obc-instrument-field-source-width',
+  '--obc-instrument-field-tag-width',
+  '--on-container-active-color',
+  '--percent',
+  '--scale',
+  '--spinner-progress-deg',
+  '--ui-components-icon-toggle-button-horizontal-item-touch-target-size',
+  '--ui-components-keyboard-nummeric-component-height-min',
+  '--ui-components-keyboard-nummeric-touch-target-size',
+]);
+
+interface VariableDefinitionLocation {
+  file: string;
+  line: number;
+}
+
+interface VariableUsageLocation {
+  file: string;
+  line: number;
+  hasFallback: boolean;
+}
+
+function getLineNumber(text: string, index: number): number {
+  return text.slice(0, index).split('\n').length;
+}
+
+function formatLocation(location: {file: string; line: number}): string {
+  return `${path.relative(process.cwd(), location.file)}:${location.line}`;
+}
+
+function printSection(title: string, lines: string[]): void {
+  console.log(`\n${title}`);
+  if (lines.length === 0) {
+    console.log('  - none');
+    return;
+  }
+
+  for (const line of lines) {
+    console.log(`  - ${line}`);
+  }
+}
+
+async function run(): Promise<void> {
+  const cssFiles = await globby('src/**/*.css', {
+    cwd: process.cwd(),
+    absolute: true,
+  });
+
+  const definitions = new Map<string, VariableDefinitionLocation[]>();
+  const usages = new Map<string, VariableUsageLocation[]>();
+
+  for (const file of cssFiles) {
+    const content = fs.readFileSync(file, 'utf8');
+    const isPaletteFile = file.endsWith(
+      `${path.sep}src${path.sep}palettes${path.sep}variables.css`
+    );
+
+    const definitionRegex = /(^|[;{\s])(\-\-[A-Za-z0-9_-]+)\s*:/gm;
+    for (const match of content.matchAll(definitionRegex)) {
+      const name = match[2];
+      const index = match.index;
+      if (index == null) {
+        continue;
+      }
+      const location = {file, line: getLineNumber(content, index)};
+      definitions.set(name, [...(definitions.get(name) ?? []), location]);
+    }
+
+    const propertyDefinitionRegex = /@property\s+(\-\-[A-Za-z0-9_-]+)/g;
+    for (const match of content.matchAll(propertyDefinitionRegex)) {
+      const name = match[1];
+      const index = match.index;
+      if (index == null) {
+        continue;
+      }
+      const location = {file, line: getLineNumber(content, index)};
+      definitions.set(name, [...(definitions.get(name) ?? []), location]);
+    }
+
+    if (isPaletteFile) {
+      continue;
+    }
+
+    let start = 0;
+    while ((start = content.indexOf('var(', start)) !== -1) {
+      let openParens = 1;
+      let end = start + 4;
+      let commaIndex = -1;
+      while (openParens > 0 && end < content.length) {
+        if (content[end] === '(') {
+          openParens++;
+        } else if (content[end] === ')') {
+          openParens--;
+        } else if (content[end] === ',' && openParens === 1) {
+          if (commaIndex === -1) {
+            commaIndex = end;
+          }
+        }
+        end++;
+      }
+
+      if (openParens === 0) {
+        const firstArg =
+          commaIndex !== -1
+            ? content.slice(start + 4, commaIndex)
+            : content.slice(start + 4, end - 1);
+
+        const nameMatch = firstArg.trim().match(/^--[A-Za-z0-9_-]+/);
+        if (nameMatch) {
+          const name = nameMatch[0];
+          const hasFallback = commaIndex !== -1;
+          const location = {
+            file,
+            line: getLineNumber(content, start),
+            hasFallback,
+          };
+          usages.set(name, [...(usages.get(name) ?? []), location]);
+        }
+      }
+      start += 4; // Move past 'var(' to find next occurrence (including nested ones)
+    }
+  }
+
+  const definedNames = [...definitions.keys()].sort();
+  const usedNames = [...usages.keys()].sort();
+
+  const duplicateDefinitions = definedNames.filter(
+    (name) => (definitions.get(name)?.length ?? 0) > 1
+  );
+  const undefinedUsages = usedNames.filter((name) => {
+    if (allowedUndefinedVariables.has(name)) {
+      return false;
+    }
+
+    if (definitions.has(name)) {
+      return false;
+    }
+
+    const entries = usages.get(name) ?? [];
+    return entries.some((entry) => !entry.hasFallback);
+  });
+
+  const definitionLines = definedNames.map((name) => {
+    const entries = definitions.get(name) ?? [];
+    return `${name} (${entries.length}) => ${entries
+      .map((entry) => formatLocation(entry))
+      .join(', ')}`;
+  });
+
+  const usageLines = usedNames.map((name) => {
+    const entries = usages.get(name) ?? [];
+    return `${name} (${entries.length}) => ${entries
+      .map((entry) => formatLocation(entry))
+      .join(', ')}`;
+  });
+
+  const duplicateDefinitionLines = duplicateDefinitions.map((name) => {
+    const entries = definitions.get(name) ?? [];
+    return `${name} (${entries.length}) => ${entries
+      .map((entry) => formatLocation(entry))
+      .join(', ')}`;
+  });
+
+  const undefinedUsageLines = undefinedUsages.map((name) => {
+    const entries = usages.get(name) ?? [];
+    return `${name} (${entries.length}) => ${entries
+      .map((entry) => formatLocation(entry))
+      .join(', ')}`;
+  });
+
+  console.log('CSS variable audit report');
+  console.log(`Scanned ${cssFiles.length} CSS files under src/`);
+  console.log(
+    `Found ${definedNames.length} unique variable definitions and ${usedNames.length} unique variable usages`
+  );
+
+  printSection('Defined variables', definitionLines);
+  printSection('Used variables', usageLines);
+  printSection(
+    'Duplicate variable definitions (warning)',
+    duplicateDefinitionLines
+  );
+  printSection('Used but undefined variables (error)', undefinedUsageLines);
+
+  if (undefinedUsages.length > 0) {
+    console.error(
+      `\n❌ CSS variable audit failed: ${undefinedUsages.length} undefined variable name(s) found.`
+    );
+    process.exitCode = 1;
+    return;
+  }
+
+  console.log(
+    '\n✅ CSS variable audit passed: no undefined variable usages found.'
+  );
+}
+
+run().catch((error: unknown) => {
+  const message = error instanceof Error ? error.message : String(error);
+  console.error(
+    `❌ CSS variable audit failed with an unexpected error: ${message}`
+  );
+  process.exitCode = 1;
+});

package/script/convert-icons.ts

@@ -0,0 +1,202 @@
+import type {Node, RGBA, Style} from '@figma/rest-api-spec';
+import * as dotenv from 'dotenv';
+import * as fs from 'fs';
+import * as path from 'path';
+const __dirname = path.dirname(new URL(import.meta.url).pathname);
+const figmaVariablesPath = path.join(__dirname, 'figmavariables.json');
+const figmaVariables = JSON.parse(fs.readFileSync(figmaVariablesPath, 'utf8'));
+
+dotenv.config();
+
+export interface IconRef {
+  name: string;
+  id: string;
+  javascriptName: string;
+  styles: {[colorCode: string]: {cssClass: string}};
+}
+
+export function getSingleColorIcon(imageData: string, icon: IconRef): string {
+  // replace fill color with currentColor
+  const fillRegex = /fill="[^"]+"/g;
+  const replace = 'fill="currentColor"';
+  let imageDataNew = imageData.replace(fillRegex, replace);
+
+  // remove fillOpacity
+  const fillOpacityRegex = /fill-opacity="[^"]+"/g;
+  imageDataNew = imageDataNew.replace(fillOpacityRegex, '');
+
+  return imageDataNew;
+}
+
+export function getCssColorIcon(imageData: string, icon: IconRef): string {
+  // replace fill color with currentColor
+  const fillRegex = /fill="([^"]+)"/g;
+
+  const replace = (match: string, color: string) => {
+    const cssClass = icon.styles[color];
+    if (cssClass === undefined) {
+      if (color === 'black') return 'fill="currentColor"';
+      if (color === 'none') return 'fill="none"';
+      if (color === 'white') return 'fill="none"';
+      if (color === '#C90000')
+        return 'fill="var(--alarm-enabled-background-color)"';
+      console.warn(
+        'No css class for color',
+        color,
+        icon.name,
+        Object.keys(icon.styles)
+      );
+      return 'fill="currentColor"';
+    }
+    return `style="fill: var(--${cssClass.cssClass})"`;
+  };
+  imageData = imageData.replace(fillRegex, replace);
+
+  // remove fillOpacity
+  const fillOpacityRegex = /fill-opacity="[^"]+"/g;
+  imageData = imageData.replace(fillOpacityRegex, '');
+
+  // replace stroke color with currentColor
+  const strokeRegex = /stroke="([^"]+)"/g;
+  const replaceStroke = (match: string, color: string) => {
+    const cssClass = icon.styles[color];
+    if (cssClass === undefined) {
+      if (color === 'black') return 'stroke="currentColor"';
+      if (color === 'none') return 'stroke="none"';
+      if (color === 'white') return 'stroke="none"';
+      console.warn(
+        'No css class for color',
+        color,
+        icon.name,
+        Object.keys(icon.styles)
+      );
+      return 'stroke="currentColor"';
+    }
+    return `style="stroke: var(--${cssClass.cssClass})"`;
+  };
+  imageData = imageData.replace(strokeRegex, replaceStroke);
+
+  // remove strokeOpacity
+  const strokeOpacityRegex = /stroke-opacity="[^"]+"/g;
+  imageData = imageData.replace(strokeOpacityRegex, '');
+
+  return imageData;
+}
+
+export function kebabToUpperCamelCase(kebabCase: string): string {
+  const words = kebabCase.replace(/ /g, '').split('-');
+  const upperCamelCase = words
+    .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+    .join('');
+  return upperCamelCase;
+}
+
+export function getStylesForNode(
+  node: Node,
+  styles: {[styleId: string]: Style}
+): {[colorCode: string]: {cssClass: string}} {
+  let out = {};
+
+  if ('children' in node) {
+    for (const child of node.children) {
+      out = {...out, ...getStylesForNode(child, styles)};
+      if ('fills' in child) {
+        let fils: string | undefined;
+        child.fills.forEach((fill) => {
+          if (fill.type === 'SOLID') {
+            if (fils !== undefined) {
+              console.warn(
+                'Multiple fills',
+                fils,
+                rgbaToHexOrColorName(fill.color!)
+              );
+            }
+            fils = rgbaToHexOrColorName(fill.color!);
+            if ('boundVariables' in fill) {
+              const variableId = fill.boundVariables.color.id;
+              out[fils] = {cssClass: figmaVariables[variableId]};
+            }
+          }
+        });
+        if (fils !== undefined && child.styles && 'fill' in child.styles) {
+          const styleId = child.styles.fill as string;
+          const figmaStyle = styles[styleId];
+          const cssClass = styleToCssClass(figmaStyle);
+          out[fils] = {cssClass: cssClass};
+        }
+      }
+      if ('strokes' in child) {
+        let strokes: string;
+        child.strokes.forEach((stroke) => {
+          if (stroke.type === 'SOLID') {
+            if (strokes !== undefined) {
+              console.warn(
+                'Multiple strokes',
+                strokes,
+                rgbaToHexOrColorName(stroke.color!)
+              );
+            }
+            strokes = rgbaToHexOrColorName(stroke.color!);
+            if ('boundVariables' in stroke) {
+              const variableId = stroke.boundVariables.color.id;
+              out[strokes] = {cssClass: figmaVariables[variableId]};
+            }
+          }
+        });
+        if (strokes !== undefined && child.styles?.stroke) {
+          const styleId = child.styles.stroke;
+          const figmaStyle = styles[styleId];
+          const cssClass = styleToCssClass(figmaStyle);
+          out[strokes] = {cssClass: cssClass};
+        }
+      }
+      if ('fillOverrideTable' in child) {
+        for (const fill of Object.values(child.fillOverrideTable)) {
+          if (fill === null) continue;
+          if ('fills' in fill) {
+            for (const f of fill.fills) {
+              if (f.type === 'SOLID') {
+                const color = rgbaToHexOrColorName(f.color!);
+                if ('boundVariables' in f) {
+                  const variableId = f.boundVariables.color.id;
+                  out[color] = {cssClass: figmaVariables[variableId]};
+                }
+              }
+            }
+          }
+          if (!('inheritFillStyleId' in fill)) continue;
+          const styleId = fill.inheritFillStyleId;
+          const figmaStyle = styles[styleId];
+          const color = rgbaToHexOrColorName(fill.fills[0].color!);
+          const cssClass = styleToCssClass(figmaStyle);
+          out[color] = {cssClass: cssClass};
+        }
+      }
+    }
+  }
+
+  return out;
+}
+
+function decimalToHex(d: number): string {
+  const v = Math.round(d * 255).toString(16);
+  return v.length === 1 ? `0${v}` : v;
+}
+
+function rgbaToHexOrColorName(rgba: RGBA): string {
+  const isBlack = rgba.r === 0 && rgba.g === 0 && rgba.b === 0 && rgba.a === 1;
+  const isWhite = rgba.r === 1 && rgba.g === 1 && rgba.b === 1 && rgba.a === 1;
+  if (isBlack) {
+    return 'black';
+  } else if (isWhite) {
+    return 'white';
+  } else {
+    return `#${decimalToHex(rgba.r)}${decimalToHex(rgba.g)}${decimalToHex(
+      rgba.b
+    )}`.toUpperCase();
+  }
+}
+
+function styleToCssClass(style: Style): string {
+  return style.name.replace(/[\/ ]/g, '-').toLocaleLowerCase();
+}