@vettvangur/design-system 2.0.46 → 2.0.49

package/dist/index.js

@@ -2193,70 +2193,267 @@ async function generateFile(variables, config) {
   await fs$1.writeFile(outPath, css, 'utf8');
 }
 
-/**
- * design-system :: src/generators/tailwind/buttons.mjs.
- *
- * Design token tooling: pulls from Figma and generates platform outputs (Razor/Astro/Tailwind).
- *
- * These docs are generated from inline JSDoc in the repo and are intended for contributors.
- *
- * @generated
- * @module design-system
- */
-
-/**
- * Normalize utility name.
- *
- * @param key - Value.
- * @returns Result of the operation.
- *
- * @generated
- * @example
- * // design-system (src/tools/javascript/design-system/src/generators/tailwind/buttons.mjs)
- * // import { normalizeUtilityName } from '@vettvangur/design-system'
- *
- * normalizeUtilityName(key)
- */
-function normalizeUtilityName(key) {
-  return String(key).trim().toLowerCase().replace(/\s+/g, '-').replace(/[^a-z0-9-]/g, '-').replace(/-+/g, '-').replace(/^-|-$/g, '');
-}
-
-/**
- * Render utility.
- *
- * @param name - Name or identifier.
- * @returns String result.
- *
- * @generated
- * @example
- * // design-system (src/tools/javascript/design-system/src/generators/tailwind/buttons.mjs)
- * // import { renderUtility } from '@vettvangur/design-system'
- *
- * renderUtility(name)
- */
+const FIGMA_API_BASE_URL = 'https://api.figma.com/v1';
+const FIGMA_PAGE = 'Buttons';
+const assertNonEmptyString = (value, name) => {
+  if (typeof value !== 'string' || value.trim().length === 0) {
+    throw new TypeError(`${name} must be a non-empty string`);
+  }
+};
+const walkFigmaNode = (node, visit) => {
+  if (!node || typeof node !== 'object') {
+    return;
+  }
+  visit(node);
+  const children = node.children;
+  if (!Array.isArray(children)) {
+    return;
+  }
+  for (const child of children) {
+    walkFigmaNode(child, visit);
+  }
+};
+const stripButtonVariantPrefix = name => {
+  if (typeof name !== 'string') {
+    return null;
+  }
+  return name.replace(/^\s*button\s*variant\s*=\s*/i, '');
+};
+const findPageNodeId = (fileResponse, pageName) => {
+  const pages = fileResponse?.document?.children;
+  if (!Array.isArray(pages)) {
+    return null;
+  }
+  const target = String(pageName).trim().toLowerCase();
+  const canvases = pages.filter(child => child?.type === 'CANVAS' && typeof child?.name === 'string');
+  const exact = canvases.find(child => child.name.trim().toLowerCase() === target);
+  if (typeof exact?.id === 'string') {
+    return exact.id;
+  }
+  const partial = canvases.find(child => child.name.trim().toLowerCase().includes(target));
+  return typeof partial?.id === 'string' ? partial.id : null;
+};
+const isButtonComponentSet = node => {
+  if (node?.type !== 'COMPONENT_SET') {
+    return false;
+  }
+  const name = typeof node?.name === 'string' ? node.name : '';
+  return /\bbutton\b/i.test(name);
+};
+const fetchButtonsPageNodes = async (fileKey, pageName = FIGMA_PAGE) => {
+  assertNonEmptyString(fileKey, 'fileKey');
+  assertNonEmptyString(pageName, 'pageName');
+  const fileResponse = await jget(`${FIGMA_API_BASE_URL}/files/${encodeURIComponent(fileKey)}`);
+  const pageNodeId = findPageNodeId(fileResponse, pageName);
+  if (!pageNodeId) {
+    const availablePages = Array.isArray(fileResponse?.document?.children) ? fileResponse.document.children.map(p => p?.name).filter(Boolean) : [];
+    throw new Error(`Page not found: ${pageName}. Available pages: ${availablePages.join(', ')}`);
+  }
+  const nodesResponse = await jget(`${FIGMA_API_BASE_URL}/files/${encodeURIComponent(fileKey)}/nodes?ids=${encodeURIComponent(pageNodeId)}`);
+  return {
+    pageNodeId,
+    nodesResponse
+  };
+};
+const fetchFigmaLocalVariables = async fileKey => {
+  assertNonEmptyString(fileKey, 'fileKey');
+  return jget(`${FIGMA_API_BASE_URL}/files/${encodeURIComponent(fileKey)}/variables/local`);
+};
+const asArray = value => {
+  if (!value) {
+    return [];
+  }
+  if (Array.isArray(value)) {
+    return value;
+  }
+  if (typeof value === 'object') {
+    return Object.values(value);
+  }
+  return [];
+};
+const formatVariableValue = value => {
+  if (value && typeof value === 'object' && typeof value.r === 'number' && typeof value.g === 'number' && typeof value.b === 'number') {
+    return {
+      kind: 'COLOR',
+      hex: colorToHexRgba(value),
+      rgba: rgba255(value),
+      raw: value
+    };
+  }
+  return {
+    kind: 'RAW',
+    raw: value
+  };
+};
+const buildVariableResolver = variablesResponse => {
+  const meta = variablesResponse?.meta ?? variablesResponse;
+  const variablesRaw = meta?.variables ?? {};
+  const collectionsRaw = meta?.variableCollections ?? {};
+  const variablesById = new Map();
+  for (const variable of asArray(variablesRaw)) {
+    if (variable?.id) {
+      variablesById.set(variable.id, variable);
+    }
+  }
+  const collectionsById = new Map();
+  for (const collection of asArray(collectionsRaw)) {
+    if (collection?.id) {
+      collectionsById.set(collection.id, collection);
+    }
+  }
+  const modeNameById = new Map();
+  for (const collection of collectionsById.values()) {
+    for (const mode of asArray(collection?.modes)) {
+      if (mode?.modeId && mode?.name) {
+        modeNameById.set(mode.modeId, mode.name);
+      }
+    }
+  }
+  const resolve = variableId => {
+    const variable = variablesById.get(variableId);
+    if (!variable) {
+      return null;
+    }
+    const collection = variable.variableCollectionId ? collectionsById.get(variable.variableCollectionId) : null;
+    const valuesByMode = variable.valuesByMode && typeof variable.valuesByMode === 'object' ? variable.valuesByMode : {};
+    return {
+      id: variable.id,
+      key: variable.key ?? null,
+      name: variable.name ?? null,
+      nameKebab: toKebab(variable.name),
+      resolvedType: variable.resolvedType ?? null,
+      collection: collection ? {
+        id: collection.id,
+        name: collection.name ?? null
+      } : null,
+      valuesByMode: Object.entries(valuesByMode).map(([modeId, value]) => ({
+        modeId,
+        modeName: modeNameById.get(modeId) ?? null,
+        value: formatVariableValue(value)
+      }))
+    };
+  };
+  return {
+    resolve
+  };
+};
+const enrichVariableAliases = (value, resolveVariable) => {
+  if (!value) {
+    return value;
+  }
+  if (Array.isArray(value)) {
+    return value.map(item => enrichVariableAliases(item, resolveVariable));
+  }
+  if (typeof value !== 'object') {
+    return value;
+  }
+  if (value.type === 'VARIABLE_ALIAS' && typeof value.id === 'string') {
+    return {
+      ...value,
+      variable: resolveVariable(value.id)
+    };
+  }
+  return Object.fromEntries(Object.entries(value).map(([key, child]) => [key, enrichVariableAliases(child, resolveVariable)]));
+};
+const enrichBoundVariablesInNodeTree = (root, resolveVariable) => {
+  walkFigmaNode(root, node => {
+    if (node?.boundVariables && typeof node.boundVariables === 'object') {
+      node.boundVariables = enrichVariableAliases(node.boundVariables, resolveVariable);
+    }
+    const fills = Array.isArray(node?.fills) ? node.fills : null;
+    if (fills) {
+      for (const paint of fills) {
+        if (paint?.boundVariables && typeof paint.boundVariables === 'object') {
+          paint.boundVariables = enrichVariableAliases(paint.boundVariables, resolveVariable);
+        }
+      }
+    }
+  });
+};
+const extractButtonGroupsByComponentSet = (nodesResponse, {
+  pageNodeId
+}) => {
+  const nodes = nodesResponse?.nodes;
+  if (!nodes || typeof nodes !== 'object') {
+    return [];
+  }
+  const pageDocument = nodes?.[pageNodeId]?.document;
+  if (!pageDocument || typeof pageDocument !== 'object') {
+    return [];
+  }
+  const groups = [];
+  walkFigmaNode(pageDocument, node => {
+    if (!isButtonComponentSet(node)) {
+      return;
+    }
+    const variants = Array.isArray(node?.children) ? node.children : [];
+    for (const variant of variants) {
+      if (!variant || typeof variant !== 'object') {
+        continue;
+      }
+      variant.nameKebab = toKebab(stripButtonVariantPrefix(variant?.name));
+    }
+    groups.push({
+      componentSet: {
+        id: typeof node?.id === 'string' ? node.id : null,
+        name: typeof node?.name === 'string' ? node.name : null,
+        nameKebab: toKebab(node?.name),
+        variants
+      }
+    });
+  });
+  return groups;
+};
 function renderUtility(name) {
-  return `@utility ${name} {\n @apply button;\n\n  &:hover {\n    \n  }\n}\n`;
+  return `@utility ${name} {\n @apply button;\n\n    &:not([disabled]):hover {\n    \n  }\n}\n`;
 }
-
-/**
- * Generate buttons.
- *
- * @param components - Value.
- * @param config - Configuration object.
- * @returns Nothing.
- *
- * @example
- * // design-system (src/tools/javascript/design-system/src/generators/tailwind/buttons.mjs)
- * // import { generateButtons } from '@vettvangur/design-system'
- *
- * await generateButtons(components, {})
- */
-async function generateButtons$1(components, config) {
-  const list = Array.isArray(components) ? components : [];
-  const blocks = list.filter(x => x && x.kind === 'COMPONENT' && x.key).map(x => `button-${normalizeUtilityName(x.key)}`).map(renderUtility);
+async function generateButtons$1(_components, config) {
+  message('generating buttons (from figma Buttons page)...');
+  const fileKey = config?.figma?.fileKey;
+  assertNonEmptyString(fileKey, 'config.figma.fileKey');
+  const coreOutDir = path.join(config.paths.styles, 'core');
+  await fs$1.mkdir(coreOutDir, {
+    recursive: true
+  });
+  const {
+    pageNodeId,
+    nodesResponse
+  } = await fetchButtonsPageNodes(fileKey, FIGMA_PAGE);
+  const groups = extractButtonGroupsByComponentSet(nodesResponse, {
+    pageNodeId
+  });
+  const variablesResponse = await fetchFigmaLocalVariables(fileKey);
+  const {
+    resolve
+  } = buildVariableResolver(variablesResponse);
+  for (const group of groups) {
+    for (const variant of group.componentSet?.variants ?? []) {
+      enrichBoundVariablesInNodeTree(variant, resolve);
+    }
+  }
+  const snapshotPath = path.join(coreOutDir, 'button-variants.figma.json');
+  await fs$1.writeFile(snapshotPath, `${JSON.stringify({
+    fileKey,
+    page: FIGMA_PAGE,
+    pageNodeId,
+    groups
+  }, null, 2)}\n`, 'utf8');
+  const utilityNames = [];
+  for (const group of groups) {
+    const setKey = group.componentSet?.nameKebab;
+    for (const variant of group.componentSet?.variants ?? []) {
+      const variantKey = variant?.nameKebab;
+      if (!setKey || !variantKey) {
+        continue;
+      }
+      utilityNames.push(`button-${setKey}-${variantKey}`);
+    }
+  }
+  const blocks = Array.from(new Set(utilityNames)).sort().map(renderUtility);
   const css = `/* AUTO-GENERATED ONCE - Safe to edit */\n${blocks.join('\n')}`;
-  const outPath = path.join(config.paths.styles, 'core', 'button-variants.css');
+  const outPath = path.join(coreOutDir, 'button-variants.css');
   await fs$1.writeFile(outPath, css, 'utf8');
+  message(`finished generating button variants (count=${blocks.length})`);
 }
 
 /**
@@ -3604,11 +3801,12 @@ async function generateScreens(figmaVariables, config) {
     }
   }
   const fluidStyles = `/* AUTO-GENERATED - DO NOT EDIT BY HAND */
+
 @utility fluid-html {
   /* unfortunatelly min-width values in media queries can't come from variables. */
 
   /* mobile */
-  font-size: calc((100 / {extrasUnitless['mobile-design-width']}) * 1vw);
+  font-size: calc((100 / ${extrasUnitless['mobile-design-width']}) * 1vw);
 
   /* this needs to match --breakpoint-desktop-xs */
   @media (min-width: ${BASE_SCREENS['desktop-xs']}px) {
@@ -3618,7 +3816,7 @@ async function generateScreens(figmaVariables, config) {
   /* this needs to match --breakpoint ultrawide-design-width */
   @media (min-width: ${extrasUnitless['ultrawide-design-width']}px) {
     font-size: calc(
-      ((100 / ${extrasUnitless['desktop-design-width']}') * ${extrasUnitless['ultrawide-design-width']} / 16) * 0.01rem
+      ((100 / ${extrasUnitless['desktop-design-width']}) * ${extrasUnitless['ultrawide-design-width']} / 16) * 0.01rem
     );
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vettvangur/design-system",
-  "version": "2.0.46",
+  "version": "2.0.49",
   "description": "",
   "access": "public",
   "type": "module",