[docs-infra] Change CSS vars generation to be extracted from Enum (#4…

…4587)

packages/api-docs-builder/ApiBuilders/ComponentApiBuilder.ts

@@ -32,7 +32,7 @@ import {
   ParsedProperty,
 } from '../types/ApiBuilder.types';
 import { Slot, ComponentInfo } from '../types/utils.types';
-import extractInfoFromType from '../utils/extractInfoFromType';
+import extractInfoFromEnum from '../utils/extractInfoFromEnum';
 
 const cssComponents = ['Box', 'Grid', 'Typography', 'Stack'];
 
@@ -645,10 +645,10 @@ const attachCssVariables = (reactApi: ComponentReactApi, params: ParsedProperty[
       const deprecation = deprecationTag?.text?.[0]?.text;
 
       const typeTag = propDescriptor.tags?.type;
-      const type = typeTag?.text?.[0]?.text ?? 'string';
+      const type = (typeTag?.text?.[0]?.text ?? 'string').replace(/{|}/g, '');
 
       return {
-        name: `--${kebabCase(propName)}`,
+        name: propName,
         description: propDescriptor.description,
         type,
         deprecated: !!deprecation || undefined,
@@ -820,7 +820,11 @@ export default async function generateComponentApi(
 
   reactApi.deprecated = !!deprecation || undefined;
 
-  const cssVars = await extractInfoFromType(`${componentInfo.name}CssVars`, project);
+  const cssVars = await extractInfoFromEnum(
+    `${componentInfo.name}CssVars`,
+    new RegExp(`${componentInfo.name}(CssVars|Classes)?.tsx?$`, 'i'),
+    project,
+  );
 
   attachPropsTable(reactApi, projectSettings.propsSettings);
   attachCssVariables(reactApi, cssVars);

packages/api-docs-builder/utils/extractInfoFromEnum.ts

@@ -0,0 +1,71 @@
+import { Symbol, isPropertySignature, isEnumDeclaration, forEachChild, Node } from 'typescript';
+import { TypeScriptProject } from './createTypeScriptProject';
+import { ParsedProperty } from '../types/ApiBuilder.types';
+import { getSymbolDescription, getSymbolJSDocTags, stringifySymbol } from '../buildApiUtils';
+
+const parseProperty = async (
+  propertySymbol: Symbol,
+  project: TypeScriptProject,
+  name: string,
+): Promise<ParsedProperty> => ({
+  name,
+  description: getSymbolDescription(propertySymbol, project),
+  tags: getSymbolJSDocTags(propertySymbol),
+  required: !propertySymbol.declarations?.find(isPropertySignature)?.questionToken,
+  typeStr: await stringifySymbol(propertySymbol, project),
+});
+
+const extractInfoFromEnum = async (
+  typeName: string,
+  sourceFileNamePattern: RegExp,
+  project: TypeScriptProject,
+): Promise<ParsedProperty[]> => {
+  // Generate the params
+  let result: ParsedProperty[] = [];
+
+  try {
+    const cssVarDeclarationCandidates = project.program
+      .getSourceFiles()
+      .filter((file) => sourceFileNamePattern.test(file.fileName));
+
+    let enumSymbol: Symbol | null = null;
+    cssVarDeclarationCandidates.forEach((file) => {
+      forEachChild(file, (node: Node) => {
+        if (isEnumDeclaration(node) && node.name.getText() === typeName) {
+          enumSymbol = project.checker.getSymbolAtLocation(node.name)!;
+        }
+      });
+    });
+
+    if (!enumSymbol) {
+      return [];
+    }
+
+    const type = project.checker.getDeclaredTypeOfSymbol(enumSymbol!);
+
+    // @ts-ignore
+    const typeDeclaration = type?.types ?? [type];
+    if (!typeDeclaration) {
+      return [];
+    }
+    const properties: Record<string, ParsedProperty> = {};
+
+    // @ts-ignore
+    await Promise.all(
+      typeDeclaration.map(async (t: any) => {
+        const propertySymbol = t.symbol;
+        properties[t.value] = await parseProperty(propertySymbol, project, t.value);
+      }),
+    );
+
+    result = Object.values(properties)
+      .filter((property) => !property.tags.ignore)
+      .sort((a, b) => a.name.localeCompare(b.name));
+  } catch {
+    console.error(`No declaration for ${typeName}`);
+  }
+
+  return result;
+};
+
+export default extractInfoFromEnum;