site/src/components/ReferenceTable.astro

---
import { readFileSync } from 'node:fs';
import { join } from 'node:path';

interface ReferenceItem {
  class: string;
  styles?: string | string[] | Record<string, string>;
  description?: string;
  comment?: string; // Optional manual comment to append
  [key: string]: any; // Allow additional properties
}

interface Props {
  className?: string;
  columns?: Array<{ label: string; key: string }>;
  data?: Array<any>;
  reference?: Array<ReferenceItem>; // Direct prop for reference data
}

const {
  className = "table reference-table",
  columns,
  data,
  reference
} = Astro.props;

// Use explicit reference prop or data prop
const referenceData = reference || data || [];

// Parse CSS variables from _root.scss at build time
function parseCSSVariables(): Record<string, string> {
  try {
    const projectRoot = process.cwd();
    const rootScssPath = join(projectRoot, 'scss/_root.scss');
    const scssContent = readFileSync(rootScssPath, 'utf-8');

    const cssVarValues: Record<string, string> = {};

    // Match CSS variable declarations: --#{$prefix}variable-name: value;
    // This regex captures the variable name and its value
    const varRegex = /--#\{\$prefix\}([a-z0-9-]+):\s*([^;]+);/gi;
    let match;

    while ((match = varRegex.exec(scssContent)) !== null) {
      const varName = `--bs-${match[1]}`;
      let value = match[2].trim();

      // Clean up SCSS interpolation syntax (e.g., #{$variable})
      value = value.replace(/#\{[^}]+\}/g, '').trim();

      // Remove inline comments
      value = value.replace(/\/\/.*$/gm, '').trim();

      // Only store if we have a clean value (not empty after removing interpolations)
      if (value) {
        cssVarValues[varName] = value;
      }
    }

    return cssVarValues;
  } catch (error) {
    console.warn('Could not parse CSS variables from _root.scss:', error);
    return {};
  }
}

const cssVarValues = parseCSSVariables();

// Function to add CSS variable value comments
function addVarComments(cssValue: string): string {
  const comments: string[] = [];

  // Collect resolved values for all CSS variables
  cssValue.replace(/var\((--[a-z0-9-]+)\)/gi, (match, varName) => {
    const resolvedValue = cssVarValues[varName];
    if (resolvedValue) {
      comments.push(`<span class="fg-3">/* ${resolvedValue} */</span>`);
    }
    return match;
  });

  // Append comments after the last semicolon or at the end
  if (comments.length > 0) {
    const hasSemicolon = cssValue.trimEnd().endsWith(';');
    return `${cssValue}${hasSemicolon ? '' : ';'} ${comments.join(' ')}`;
  }

  return cssValue;
}

// If no explicit columns provided, infer from the first data item
const inferredColumns = columns || (() => {
  if (referenceData.length === 0) {
    return [
      { label: 'Class', key: 'class' },
      { label: 'Styles', key: 'styles' }
    ];
  }

  const firstItem = referenceData[0];
  return Object.keys(firstItem)
    .filter(key => key !== 'comment') // Exclude comment field from columns
    .map(key => ({
      label: key.charAt(0).toUpperCase() + key.slice(1),
      key: key
    }));
})();

// Transform frontmatter format to table format
const tableData = referenceData.map((item: ReferenceItem) => {
  const transformedItem: Record<string, any> = {};

  inferredColumns.forEach(column => {
    const key = column.key;
    let value = item[key];

    if (key === 'class' && typeof value === 'string' && !value.startsWith('.')) {
      value = `.${value}`;
    }

    if (key === 'styles') {
      let processedStyles = '';

      if (typeof value === 'string') {
        processedStyles = addVarComments(value);
      } else if (typeof value === 'object' && !Array.isArray(value)) {
        // Handle object syntax: { prop: value, prop2: value2 }
        processedStyles = Object.entries(value)
          .map(([prop, val]) => {
            const cssLine = `${prop}: ${val};`;
            return addVarComments(cssLine);
          })
          .join('<br/>');
      } else if (Array.isArray(value)) {
        processedStyles = value.map((style: any) => {
          if (typeof style === 'string') {
            const formattedStyle = style.includes(':') ? style + (style.endsWith(';') ? '' : ';') : style;
            return addVarComments(formattedStyle);
          }
          if (typeof style === 'object') {
            const cssLine = Object.entries(style).map(([prop, val]) => `${prop}: ${val};`).join(' ');
            return addVarComments(cssLine);
          }
          return style;
        }).join('<br/>');
      } else {
        processedStyles = value || '';
      }

      // Append manual comment if provided in frontmatter
      if (item.comment) {
        processedStyles += `<br/><span class="color-3">/* ${item.comment} */</span>`;
      }

      transformedItem[key] = processedStyles;
    } else {
      transformedItem[key] = value;
    }
  });

  return transformedItem;
});
---

<div class="table-responsive bd-reference-table">
  <table class={className}>
    <thead>
      <tr>
        {inferredColumns.map(column => (
          <th scope="col">{column.label}</th>
        ))}
      </tr>
    </thead>
    <tbody>
      {tableData.map((row: any) => (
        <tr>
          {inferredColumns.map(column => (
            <td>
              {column.key === 'styles' ? (
                <Fragment set:html={row[column.key]} />
              ) : (
                row[column.key]
              )}
            </td>
          ))}
        </tr>
      ))}
    </tbody>
  </table>
</div>