@khaledeltohamy14/token-pipeline-engine 1.0.0

package/generators/theme-generator.js

@@ -0,0 +1,1168 @@
+const {
+  flattenTokens,
+  getTokenValue,
+  getTokenType,
+  isReference,
+  cleanReference,
+  toDartIdentifier,
+  canonicalTokenKey,
+  dartLiteral,
+  dartType,
+} = require('./token-utils');
+
+const PRIMITIVE_CONFIG = {
+  spacing: {
+    className: 'SpacingTokens',
+    importPath:
+      '../spacing/spacing_tokens.dart',
+  },
+
+  radius: {
+    className: 'RadiusTokens',
+    importPath:
+      '../radius/radius_tokens.dart',
+  },
+
+  dimensions: {
+    className: 'DimensionTokens',
+    importPath:
+      '../dimensions/dimensions_tokens.dart',
+  },
+
+  typography: {
+    className: 'TypographyTokens',
+    importPath:
+      '../typography/typography_tokens.dart',
+  },
+
+  shadow: {
+    className: 'ShadowTokens',
+    importPath:
+      '../shadow/shadow_tokens.dart',
+  },
+};
+
+function createResolver({
+  componentTokens = {},
+  aliasTokens = {},
+  globalTokens = {},
+
+  spacingTokens = {},
+  radiusTokens = {},
+  dimensionTokens = {},
+  typographyTokens = {},
+  shadowTokens = {},
+
+  brandTokens = {},
+}) {
+  const base = {
+    component:
+        flattenTokens(
+          componentTokens
+        ),
+
+    alias:
+        flattenTokens(
+          aliasTokens
+        ),
+
+    global:
+        flattenTokens(
+          globalTokens
+        ),
+
+    spacing:
+        flattenTokens(
+          spacingTokens
+        ),
+
+    radius:
+        flattenTokens(
+          radiusTokens
+        ),
+
+    dimensions:
+        flattenTokens(
+          dimensionTokens
+        ),
+
+    typography:
+        flattenTokens(
+          typographyTokens
+        ),
+
+    shadow:
+        flattenTokens(
+          shadowTokens
+        ),
+  };
+
+  const brand = {
+    component:
+        flattenTokens(
+          brandTokens.component ||
+          {}
+        ),
+
+    alias:
+        flattenTokens(
+          brandTokens.alias ||
+          {}
+        ),
+
+    global:
+        flattenTokens(
+          brandTokens.global ||
+          {}
+        ),
+
+    spacing:
+        flattenTokens(
+          brandTokens.spacing ||
+          {}
+        ),
+
+    radius:
+        flattenTokens(
+          brandTokens.radius ||
+          {}
+        ),
+
+    dimensions:
+        flattenTokens(
+          brandTokens.dimensions ||
+          {}
+        ),
+
+    typography:
+        flattenTokens(
+          brandTokens.typography ||
+          {}
+        ),
+
+    shadow:
+        flattenTokens(
+          brandTokens.shadow ||
+          {}
+        ),
+  };
+
+  /*
+  |--------------------------------------------------------------------------
+  | Main semantic hierarchy
+  |--------------------------------------------------------------------------
+  |
+  | Brand Component
+  |      ↓
+  | Base Component
+  |      ↓
+  | Brand Alias
+  |      ↓
+  | Base Alias
+  |      ↓
+  | Brand Global
+  |      ↓
+  | Base Global
+  |
+  |--------------------------------------------------------------------------
+  */
+
+  function findSemantic(
+    tokenPath
+  ) {
+    return (
+      brand.component[tokenPath] ||
+      base.component[tokenPath] ||
+
+      brand.alias[tokenPath] ||
+      base.alias[tokenPath] ||
+
+      brand.global[tokenPath] ||
+      base.global[tokenPath] ||
+
+      null
+    );
+  }
+
+  function primitiveInfo(
+    referencePath
+  ) {
+    const parts =
+        referencePath.split('.');
+
+    if (parts.length < 2) {
+      return null;
+    }
+
+    const first =
+        parts[0];
+
+    const categoryMap = {
+      spacing: 'spacing',
+      space: 'spacing',
+
+      radius: 'radius',
+      radii: 'radius',
+
+      dimension: 'dimensions',
+      dimensions: 'dimensions',
+      size: 'dimensions',
+      sizes: 'dimensions',
+
+      typography: 'typography',
+      type: 'typography',
+
+      shadow: 'shadow',
+      shadows: 'shadow',
+      elevation: 'shadow',
+    };
+
+    const category =
+        categoryMap[first];
+
+    if (!category) {
+      return null;
+    }
+
+    const pathName =
+        parts
+          .slice(1)
+          .join('.');
+
+    return {
+      category,
+      pathName,
+    };
+  }
+
+  function findPrimitive(
+    category,
+    tokenPath
+  ) {
+    return (
+      brand[category]?.[tokenPath] ||
+      base[category]?.[tokenPath] ||
+      null
+    );
+  }
+
+  function resolvePath(
+    tokenPath,
+    fallbackType,
+    stack = []
+  ) {
+    /*
+     * First check semantic hierarchy.
+     */
+    const semanticToken =
+        findSemantic(
+          tokenPath
+        );
+
+    if (semanticToken) {
+      return resolveToken(
+        semanticToken,
+        tokenPath,
+        fallbackType,
+        stack
+      );
+    }
+
+    /*
+     * Then check primitive category.
+     *
+     * Example:
+     *
+     * {spacing.md}
+     * {radius.sm}
+     * {dimensions.icon.md}
+     */
+    const primitive =
+        primitiveInfo(
+          tokenPath
+        );
+
+    if (primitive) {
+      const token =
+          findPrimitive(
+            primitive.category,
+            primitive.pathName
+          );
+
+      if (!token) {
+        throw new Error(
+          `❌ Unresolved primitive token: ` +
+          `${tokenPath}`
+        );
+      }
+
+      return resolveToken(
+        token,
+        tokenPath,
+        fallbackType,
+        stack
+      );
+    }
+
+    throw new Error(
+      `❌ Unresolved theme token: ` +
+      `${tokenPath}`
+    );
+  }
+
+  function resolveToken(
+    token,
+    tokenPath,
+    fallbackType,
+    stack
+  ) {
+    if (
+      stack.includes(tokenPath)
+    ) {
+      throw new Error(
+        `❌ Circular theme reference: ` +
+        `${[
+          ...stack,
+          tokenPath,
+        ].join(' -> ')}`
+      );
+    }
+
+    const type =
+        getTokenType(token) ||
+        fallbackType;
+
+    const value =
+        getTokenValue(token);
+
+    if (!isReference(value)) {
+      return dartLiteral(
+        value,
+        type,
+        tokenPath
+      );
+    }
+
+    const reference =
+        cleanReference(value);
+
+    /*
+     * Resolve reference recursively.
+     */
+    return resolveReference(
+      reference,
+      type,
+      [
+        ...stack,
+        tokenPath,
+      ]
+    );
+  }
+
+  function resolveReference(
+    referencePath,
+    fallbackType,
+    stack
+  ) {
+    /*
+     * Primitive references are direct.
+     */
+    const primitive =
+        primitiveInfo(
+          referencePath
+        );
+
+    if (primitive) {
+      const token =
+          findPrimitive(
+            primitive.category,
+            primitive.pathName
+          );
+
+      if (!token) {
+        throw new Error(
+          `❌ Broken primitive reference: ` +
+          `{${referencePath}}`
+        );
+      }
+
+      /*
+       * Return reference to primitive class
+       * rather than resolving to literal.
+       */
+      const config =
+          PRIMITIVE_CONFIG[
+            primitive.category
+          ];
+
+      const type =
+          getTokenType(token) ||
+          fallbackType;
+
+      return {
+        type: dartType(type),
+        value:
+          `${config.className}.` +
+          `${toDartIdentifier(
+            primitive.pathName
+          )}`,
+        importPath:
+          config.importPath,
+      };
+    }
+
+    /*
+     * Semantic hierarchy.
+     */
+    const token =
+        findSemantic(
+          referencePath
+        );
+
+    if (!token) {
+      throw new Error(
+        `❌ Broken theme reference: ` +
+        `{${referencePath}}`
+      );
+    }
+
+    const type =
+        getTokenType(token) ||
+        fallbackType;
+
+    const value =
+        getTokenValue(token);
+
+    /*
+     * Alias / Component / Global references
+     * are recursively resolved.
+     *
+     * This is what allows:
+     *
+     * Component
+     *     ↓
+     * Brand Alias
+     *     ↓
+     * Global
+     */
+    if (isReference(value)) {
+      return resolveReference(
+        cleanReference(value),
+        type,
+        stack
+      );
+    }
+
+    /*
+     * Final global/base value.
+     *
+     * Instead of embedding:
+     *
+     * Color(0xFF...)
+     *
+     * keep the generated theme connected
+     * to GlobalTokens.
+     */
+    const owner =
+        findOwner(
+          referencePath
+        );
+
+    if (owner) {
+      return {
+        type: dartType(type),
+        value:
+          `${owner.className}.` +
+          `${toDartIdentifier(
+            owner.path
+          )}`,
+        importPath:
+          owner.importPath,
+      };
+    }
+
+    return dartLiteral(
+      value,
+      type,
+      referencePath
+    );
+  }
+
+  function findOwner(
+    tokenPath
+  ) {
+    if (
+      brand.component[tokenPath] ||
+      base.component[tokenPath]
+    ) {
+      return {
+        className: 'ComponentTokens',
+        path: tokenPath,
+        importPath:
+          '../components/component_tokens.dart',
+      };
+    }
+
+    if (
+      brand.alias[tokenPath] ||
+      base.alias[tokenPath]
+    ) {
+      return {
+        className: 'AliasTokens',
+        path: tokenPath,
+        importPath:
+          '../alias/alias_tokens.dart',
+      };
+    }
+
+    if (
+      brand.global[tokenPath] ||
+      base.global[tokenPath]
+    ) {
+      return {
+        className: 'GlobalTokens',
+        path: tokenPath,
+        importPath:
+          '../global/global_tokens.dart',
+      };
+    }
+
+    return null;
+  }
+
+  return {
+    findSemantic,
+    resolvePath,
+    resolveReference,
+    maps: {
+      base,
+      brand,
+    },
+  };
+}
+
+/*
+|--------------------------------------------------------------------------
+| Theme paths
+|--------------------------------------------------------------------------
+*/
+
+function allThemePaths(
+  resolver
+) {
+  const canonical =
+      new Map();
+
+  const paths = [
+    ...Object.keys(
+      resolver.maps.base.alias
+    ),
+
+    ...Object.keys(
+      resolver.maps.base.component
+    ),
+
+    ...Object.keys(
+      resolver.maps.brand.alias
+    ),
+
+    ...Object.keys(
+      resolver.maps.brand.component
+    ),
+  ];
+
+  for (
+    const pathName
+    of paths
+  ) {
+    const key =
+        canonicalTokenKey(
+          pathName
+        );
+
+    /*
+     * Component tokens have priority over
+     * aliases with the same normalized name.
+     */
+    if (
+      !canonical.has(key) ||
+      pathName
+        .toLowerCase()
+        .includes('component')
+    ) {
+      canonical.set(
+        key,
+        pathName
+      );
+    }
+  }
+
+  return [
+    ...canonical.values()
+  ].sort();
+}
+
+/*
+|--------------------------------------------------------------------------
+| Generate individual brand theme
+|--------------------------------------------------------------------------
+*/
+
+function generateTheme({
+  aliasTokens,
+  globalTokens,
+  componentTokens,
+
+  spacingTokens,
+  radiusTokens,
+  dimensionTokens,
+  typographyTokens,
+  shadowTokens,
+
+  brandTokens,
+
+  className,
+}) {
+  const resolver =
+      createResolver({
+        aliasTokens,
+        globalTokens,
+        componentTokens,
+
+        spacingTokens,
+        radiusTokens,
+        dimensionTokens,
+        typographyTokens,
+        shadowTokens,
+
+        brandTokens,
+      });
+
+  const paths =
+      allThemePaths(
+        resolver
+      );
+
+  const body = [];
+  const imports =
+      new Set();
+
+  for (
+    const tokenPath
+    of paths
+  ) {
+    const token =
+        resolver.findSemantic(
+          tokenPath
+        );
+
+    if (!token) {
+      continue;
+    }
+
+    const expression =
+        resolver.resolvePath(
+          tokenPath,
+          getTokenType(token)
+        );
+
+    body.push(
+      `  static const ` +
+      `${expression.type} ` +
+      `${toDartIdentifier(tokenPath)} ` +
+      `= ${expression.value};`,
+      ''
+    );
+
+   if (
+  expression.importPath
+) {
+  imports.add(
+    expression.importPath
+  );
+}
+
+if (
+  expression.type === 'Color'
+) {
+  imports.add('dart:ui');
+}
+  }
+
+  const out = [
+    '// GENERATED FILE - DO NOT EDIT',
+    '',
+  ];
+
+  if (
+    imports.has('dart:ui')
+  ) {
+    out.push(
+      "import 'dart:ui';"
+    );
+
+    imports.delete(
+      'dart:ui'
+    );
+  }
+
+  for (
+    const importPath
+    of [...imports].sort()
+  ) {
+    out.push(
+      `import '${importPath}';`
+    );
+  }
+
+  if (
+    imports.size > 0 ||
+    out.length > 2
+  ) {
+    out.push('');
+  }
+
+  out.push(
+    `class ${className} {`,
+    `  ${className}._();`,
+    '',
+    ...body,
+    '}',
+    ''
+  );
+
+  return out.join('\n');
+}
+
+/*
+|--------------------------------------------------------------------------
+| Generate Base + Brand theme container
+|--------------------------------------------------------------------------
+*/
+
+function generateThemeTokens({
+  aliasTokens,
+  globalTokens,
+  componentTokens,
+
+  spacingTokens,
+  radiusTokens,
+  dimensionTokens,
+  typographyTokens,
+  shadowTokens,
+
+  brands = {},
+
+}) {
+  const baseResolver =
+      createResolver({
+        aliasTokens,
+        globalTokens,
+        componentTokens,
+
+        spacingTokens,
+        radiusTokens,
+        dimensionTokens,
+        typographyTokens,
+        shadowTokens,
+
+        brandTokens: {},
+      });
+
+  const paths =
+      allThemePaths(
+        baseResolver
+      );
+
+  const brandNames =
+      Object.keys(brands);
+
+  const allPaths =
+      new Set(paths);
+
+  for (
+    const brandTokens
+    of Object.values(brands)
+  ) {
+    const resolver =
+        createResolver({
+          aliasTokens,
+          globalTokens,
+          componentTokens,
+
+          spacingTokens,
+          radiusTokens,
+          dimensionTokens,
+          typographyTokens,
+          shadowTokens,
+
+          brandTokens,
+        });
+
+    for (
+      const tokenPath
+      of allThemePaths(
+        resolver
+      )
+    ) {
+      allPaths.add(
+        tokenPath
+      );
+    }
+  }
+
+  const fields =
+      [...allPaths].sort();
+
+  const rendered = {};
+
+  const imports =
+      new Set();
+
+  /*
+   * Always generate base.
+   */
+  rendered.base = {};
+
+  for (
+    const field
+    of fields
+  ) {
+    const token =
+        baseResolver.findSemantic(
+          field
+        );
+
+    if (!token) {
+      continue;
+    }
+
+    const expression =
+        baseResolver.resolvePath(
+          field,
+          getTokenType(token)
+        );
+
+    rendered.base[field] =
+        expression;
+
+  if (
+  expression.importPath
+) {
+  imports.add(
+    expression.importPath
+  );
+}
+
+if (
+  expression.type === 'Color'
+) {
+  imports.add('dart:ui');
+}
+  }
+
+  /*
+   * Optional brands.
+   */
+  for (
+    const brandName
+    of brandNames
+  ) {
+    const resolver =
+        createResolver({
+          aliasTokens,
+          globalTokens,
+          componentTokens,
+
+          spacingTokens,
+          radiusTokens,
+          dimensionTokens,
+          typographyTokens,
+          shadowTokens,
+
+          brandTokens:
+              brands[brandName],
+        });
+
+    rendered[brandName] = {};
+
+    for (
+      const field
+      of fields
+    ) {
+      const token =
+          resolver.findSemantic(
+            field
+          );
+
+      if (!token) {
+        continue;
+      }
+
+      const expression =
+          resolver.resolvePath(
+            field,
+            getTokenType(token)
+          );
+
+      rendered[
+        brandName
+      ][field] = expression;
+if (
+  expression.importPath
+) {
+  imports.add(
+    expression.importPath
+  );
+}
+
+if (
+  expression.type === 'Color'
+) {
+  imports.add('dart:ui');
+}
+    }
+  }
+
+  /*
+   * Determine field types.
+   */
+  const fieldTypes = {};
+
+  for (
+    const field
+    of fields
+  ) {
+    const expression =
+        rendered.base[field] ||
+        Object.values(
+          rendered
+        ).find(
+          values =>
+            values[field]
+        )?.[field];
+
+    if (expression) {
+      fieldTypes[field] =
+          expression.type;
+    }
+  }
+
+  const out = [
+    '// GENERATED FILE - DO NOT EDIT',
+    '',
+  ];
+
+  if (
+    imports.has('dart:ui')
+  ) {
+    out.push(
+      "import 'dart:ui';"
+    );
+
+    imports.delete(
+      'dart:ui'
+    );
+  }
+
+  for (
+    const importPath
+    of [...imports].sort()
+  ) {
+    out.push(
+      `import '${importPath}';`
+    );
+  }
+
+  out.push('');
+
+  /*
+   * Base theme.
+   */
+  out.push(
+    'class BaseThemeTokens {',
+    '  const BaseThemeTokens({'
+  );
+
+  for (
+    const field
+    of fields
+  ) {
+    if (
+      rendered.base[field]
+    ) {
+      out.push(
+        `    required this.${toDartIdentifier(
+          field
+        )},`
+      );
+    }
+  }
+
+  out.push(
+    '  });',
+    ''
+  );
+
+  for (
+    const field
+    of fields
+  ) {
+    if (
+      rendered.base[field]
+    ) {
+      out.push(
+        `  final ${fieldTypes[field]} ` +
+        `${toDartIdentifier(field)};`
+      );
+    }
+  }
+
+  out.push(
+    '}',
+    ''
+  );
+
+  /*
+   * No brands?
+   *
+   * Base is still completely valid.
+   */
+  if (
+    brandNames.length === 0
+  ) {
+    out.push(
+      'class AppThemeTokens {',
+      '  const AppThemeTokens._();',
+      '',
+      '  static const base = BaseThemeTokens('
+    );
+
+    for (
+      const field
+      of fields
+    ) {
+      const value =
+          rendered.base[field];
+
+      if (!value) {
+        continue;
+      }
+
+      out.push(
+        `    ${toDartIdentifier(field)}: ` +
+        `${value.value},`
+      );
+    }
+
+    out.push(
+      '  );',
+      '}',
+      ''
+    );
+  } else {
+    /*
+     * Brand theme objects.
+     */
+    out.push(
+      'class BrandThemeTokens extends BaseThemeTokens {',
+      '  const BrandThemeTokens({'
+    );
+
+    for (
+      const field
+      of fields
+    ) {
+      if (
+        rendered.base[field]
+      ) {
+        out.push(
+          `    required super.${toDartIdentifier(
+            field
+          )},`
+        );
+      }
+    }
+
+    out.push(
+      '  });',
+      '}',
+      ''
+    );
+
+    for (
+      const brandName
+      of brandNames
+    ) {
+      const values =
+          rendered[brandName];
+
+      out.push(
+        `const ${toDartIdentifier(
+          brandName
+        )}ThemeTokens = BrandThemeTokens(`
+      );
+
+      for (
+        const field
+        of fields
+      ) {
+        const value =
+            values[field] ||
+            rendered.base[field];
+
+        if (!value) {
+          continue;
+        }
+
+        out.push(
+          `  ${toDartIdentifier(field)}: ` +
+          `${value.value},`
+        );
+      }
+
+      out.push(
+        ');',
+        ''
+      );
+    }
+
+    out.push(
+      'class AppThemeTokens {',
+      '  const AppThemeTokens._();',
+      '',
+      '  static const base = BaseThemeTokens('
+    );
+
+    for (
+      const field
+      of fields
+    ) {
+      const value =
+          rendered.base[field];
+
+      if (!value) {
+        continue;
+      }
+
+      out.push(
+        `    ${toDartIdentifier(field)}: ` +
+        `${value.value},`
+      );
+    }
+
+    out.push(
+      '  );',
+      '}',
+      ''
+    );
+  }
+
+  return out.join('\n');
+}
+
+module.exports = {
+  createResolver,
+  renderTheme: generateTheme,
+  renderThemeTokens: generateThemeTokens,
+};