@ethlete/components 0.1.0-next.14 → 0.1.0-next.16

package/generators/generators.json

@@ -0,0 +1,9 @@
+{
+  "generators": {
+    "icons": {
+      "factory": "./icons/generator",
+      "schema": "./icons/schema.json",
+      "description": "Generate etIcon IconDefinitions and typed names from an installed SVG icon source (auto-detects Font Awesome)"
+    }
+  }
+}

package/generators/icons/generator.js

@@ -0,0 +1,183 @@
+import { formatFiles, logger, workspaceRoot } from '@nx/devkit';
+import { existsSync, readFileSync } from 'node:fs';
+import { dirname, join } from 'node:path';
+//#endregion
+//#region Constants
+// Known SVG sources, tried in order during auto-detection. All use a `svgs/<variant>/<name>.svg` layout.
+const KNOWN_SOURCES = ['@fortawesome/fontawesome-pro', '@fortawesome/fontawesome-free'];
+const DEFAULT_CONFIG_PATH = 'src/icons.json';
+const DEFAULT_OUTPUT_PATH = 'src/generated/et-icons.ts';
+const DEFAULT_VARIANT = 'solid';
+//#endregion
+export default async function generate(tree, schema) {
+    logger.log('\n🎨 Starting Ethlete icon generator...\n');
+    const configPath = schema.configPath || DEFAULT_CONFIG_PATH;
+    const outputPath = schema.outputPath || DEFAULT_OUTPUT_PATH;
+    const typesOutputPath = schema.typesOutputPath || join(dirname(outputPath), 'et-icon-registry.d.ts');
+    // Step 1: Read the icons config.
+    if (!tree.exists(configPath)) {
+        logger.error(`❌ Icons config not found at: ${configPath}`);
+        logger.log(`\nCreate one, or point to it with --configPath. Example ${configPath}:`);
+        logger.log(`  { "source": "auto", "defaultVariant": "solid", "icons": ["plus", { "name": "shield", "variants": ["light", "solid"] }] }\n`);
+        return;
+    }
+    let config;
+    try {
+        config = JSON.parse(tree.read(configPath, 'utf-8') || '');
+    }
+    catch (error) {
+        logger.error(`❌ Failed to parse ${configPath}: ${error instanceof Error ? error.message : String(error)}`);
+        return;
+    }
+    if (!Array.isArray(config.icons) || config.icons.length === 0) {
+        logger.error(`❌ ${configPath} must contain a non-empty "icons" array.`);
+        return;
+    }
+    const defaultVariant = config.defaultVariant || DEFAULT_VARIANT;
+    // Step 2: Resolve the SVG source package.
+    const requestedSource = schema.source && schema.source !== 'auto' ? schema.source : config.source;
+    const source = resolveSource(requestedSource);
+    if (!source) {
+        logger.error('❌ Could not find an icon source. Install @fortawesome/fontawesome-pro (or -free), or set "source".');
+        return;
+    }
+    logger.log(`📦 Using icon source: ${source.package}`);
+    // Step 3: Read + transform each icon's SVG.
+    const requested = normalizeIcons(config.icons, defaultVariant);
+    const resolved = [];
+    const missing = [];
+    for (const icon of requested) {
+        const svgPath = join(source.svgsDir, icon.variant, `${icon.name}.svg`);
+        if (!existsSync(svgPath)) {
+            missing.push(`${icon.name} (${icon.variant})`);
+            continue;
+        }
+        resolved.push({ ...icon, data: toIconData(readFileSync(svgPath, 'utf-8')) });
+    }
+    if (missing.length) {
+        logger.warn(`⚠️  ${missing.length} icon(s) not found in ${source.package} and skipped:\n   - ${missing.join('\n   - ')}`);
+    }
+    if (resolved.length === 0) {
+        logger.error('❌ No icons could be resolved. Nothing was written.');
+        return;
+    }
+    // Step 4: Write the IconDefinition constants.
+    tree.write(outputPath, generateIconsFile(resolved, schema, source.package));
+    logger.log(`✅ Generated ${resolved.length} icon(s) at: ${outputPath}`);
+    // Step 5: Write the type augmentation so `etIcon`/`variant` are checked against these names.
+    tree.write(typesOutputPath, generateTypesFile(resolved, schema));
+    logger.log(`✅ Generated icon name types at: ${typesOutputPath}`);
+    if (!schema.skipFormat) {
+        await formatFiles(tree);
+    }
+    logger.log('\n✅ Icon generation completed successfully!\n');
+}
+//#region Helpers
+function resolveSource(requested) {
+    const candidates = requested ? [requested] : KNOWN_SOURCES;
+    for (const pkg of candidates) {
+        const svgsDir = join(workspaceRoot, 'node_modules', pkg, 'svgs');
+        if (existsSync(svgsDir)) {
+            return { package: pkg, svgsDir };
+        }
+    }
+    return null;
+}
+function normalizeIcons(entries, defaultVariant) {
+    const seen = new Set();
+    const result = [];
+    const add = (name, variant) => {
+        const key = `${name}::${variant}`;
+        if (!seen.has(key)) {
+            seen.add(key);
+            result.push({ name, variant });
+        }
+    };
+    for (const entry of entries) {
+        if (typeof entry === 'string') {
+            add(entry, defaultVariant);
+            continue;
+        }
+        const variants = entry.variants ?? [entry.variant ?? defaultVariant];
+        for (const variant of variants) {
+            add(entry.name, variant);
+        }
+    }
+    // Stable ordering keeps regeneration diffs minimal.
+    return result.sort((a, b) => `${a.name}::${a.variant}`.localeCompare(`${b.name}::${b.variant}`));
+}
+/** Make a raw SVG etIcon-compatible: fill its host, inherit currentColor, drop the license comment. */
+function toIconData(rawSvg) {
+    return rawSvg
+        .replace(/<!--[\s\S]*?-->/g, '')
+        .replace('<svg ', '<svg width="100%" height="100%" fill="currentColor" ')
+        .replace(/\s+/g, ' ')
+        .trim();
+}
+/** `shield` + `light` -> `SHIELD_LIGHT` */
+function constName(name, variant) {
+    return `${name}_${variant}`.replace(/[^a-z0-9]+/gi, '_').toUpperCase();
+}
+function regenerateCommand(schema) {
+    const parts = ['nx g @ethlete/components:icons'];
+    if (schema.configPath)
+        parts.push(`--configPath=${schema.configPath}`);
+    if (schema.outputPath)
+        parts.push(`--outputPath=${schema.outputPath}`);
+    if (schema.typesOutputPath)
+        parts.push(`--typesOutputPath=${schema.typesOutputPath}`);
+    if (schema.source && schema.source !== 'auto')
+        parts.push(`--source=${schema.source}`);
+    return parts.join(' ');
+}
+function generateIconsFile(icons, schema, source) {
+    const header = `/* eslint-disable */
+// AUTO-GENERATED by @ethlete/components:icons from "${source}" — DO NOT EDIT.
+// Regenerate by running:
+//   ${regenerateCommand(schema)}
+import type { IconDefinition } from '@ethlete/components';
+`;
+    const consts = icons
+        .map((icon) => `export const ${constName(icon.name, icon.variant)}: IconDefinition = {\n` +
+        `  name: '${icon.name}',\n` +
+        `  variant: '${icon.variant}',\n` +
+        `  data: \`${icon.data}\`,\n` +
+        `};`)
+        .join('\n\n');
+    const aggregate = `export const GENERATED_ICONS = [\n${icons
+        .map((icon) => `  ${constName(icon.name, icon.variant)},`)
+        .join('\n')}\n] as const;`;
+    return `${header}\n${consts}\n\n${aggregate}\n`;
+}
+function generateTypesFile(icons, schema) {
+    const names = [...new Set(icons.map((i) => i.name))]
+        .sort()
+        .map((n) => `'${n}'`)
+        .join(' | ');
+    const variants = [...new Set(icons.map((i) => i.variant))]
+        .sort()
+        .map((v) => `'${v}'`)
+        .join(' | ');
+    return `/*
+ * Auto-generated by @ethlete/components:icons
+ * DO NOT EDIT THIS FILE MANUALLY
+ *
+ * Regenerate by running:
+ * ${regenerateCommand(schema)}
+ */
+
+declare module '@ethlete/components' {
+  interface EthleteIconNameRegistry {
+    name: ${names};
+  }
+
+  interface EthleteIconVariantRegistry {
+    name: ${variants};
+  }
+}
+
+export {};
+`;
+}
+//#endregion
+//# sourceMappingURL=generator.js.map

package/generators/icons/schema.json

@@ -0,0 +1,35 @@
+{
+  "$schema": "http://json-schema.org/schema",
+  "$id": "et-icons",
+  "title": "Ethlete Icon Generator",
+  "description": "Generates etIcon IconDefinitions and typed names from an installed SVG icon source. Auto-detects Font Awesome (pro, then free).",
+  "type": "object",
+  "properties": {
+    "configPath": {
+      "type": "string",
+      "description": "Path to the icons config JSON (relative to workspace root). Lists the icons/variants to generate.",
+      "default": "src/icons.json",
+      "x-prompt": "Where is your icons config file?"
+    },
+    "outputPath": {
+      "type": "string",
+      "description": "Where to write the generated IconDefinition constants (.ts).",
+      "default": "src/generated/et-icons.ts"
+    },
+    "typesOutputPath": {
+      "type": "string",
+      "description": "Where to write the generated name/variant type augmentation (.d.ts). Defaults to 'et-icon-registry.d.ts' next to outputPath."
+    },
+    "source": {
+      "type": "string",
+      "description": "Icon source package to read SVGs from (expects a `svgs/<variant>/<name>.svg` layout). 'auto' detects Font Awesome pro then free.",
+      "default": "auto"
+    },
+    "skipFormat": {
+      "type": "boolean",
+      "description": "Skip formatting files after generation.",
+      "default": false
+    }
+  },
+  "required": []
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ethlete/components",
-  "version": "0.1.0-next.14",
+  "version": "0.1.0-next.16",
   "license": "MIT",
   "sideEffects": false,
   "peerDependencies": {
@@ -13,8 +13,15 @@
     "@angular/router": "22.0.5",
     "@ethlete/core": "^5.0.0-beta.11",
     "@floating-ui/dom": "1.7.6",
+    "@nx/devkit": "23.1.0-beta.7",
     "rxjs": "7.8.2"
   },
+  "peerDependenciesMeta": {
+    "@nx/devkit": {
+      "optional": true
+    }
+  },
+  "generators": "./generators/generators.json",
   "module": "fesm2022/ethlete-components.mjs",
   "typings": "types/ethlete-components.d.ts",
   "exports": {