@eagami/ui 4.5.0 → 4.6.0

package/README.md

@@ -25,6 +25,14 @@
 
 ## Installation
 
+The quickest way is the schematic, which installs the package and registers the global stylesheet and fonts for you:
+
+```bash
+ng add @eagami/ui
+```
+
+Prefer to wire it up by hand? Install the package:
+
 ```bash
 npm install @eagami/ui
 # or
@@ -33,7 +41,7 @@ pnpm add @eagami/ui
 yarn add @eagami/ui
 ```
 
-Add the global stylesheet to your `angular.json`:
+Then add the global stylesheet to your `angular.json`:
 
 ```json
 "styles": ["node_modules/@eagami/ui/src/styles/eagami-ui.scss"]

package/package.json

@@ -1,15 +1,25 @@
 {
   "name": "@eagami/ui",
-  "version": "4.5.0",
-  "description": "Lightweight, accessible Angular UI component library built on CSS custom properties",
+  "version": "4.6.0",
+  "description": "Lightweight, accessible, themeable Angular UI component library and icon set built on CSS custom properties",
   "author": "Michal Wiraszka <michal@eagami.com>",
   "license": "MIT",
   "keywords": [
     "angular",
+    "angular-components",
     "ui",
+    "components",
     "component-library",
     "design-system",
-    "accessible"
+    "accessible",
+    "a11y",
+    "dark-mode",
+    "theming",
+    "icons",
+    "signals",
+    "standalone",
+    "typescript",
+    "css-variables"
   ],
   "homepage": "https://eagami.com/ui",
   "repository": {
@@ -41,5 +51,13 @@
       "default": "./fesm2022/eagami-ui.mjs"
     }
   },
-  "type": "module"
+  "type": "module",
+  "files": [
+    "fesm2022",
+    "types",
+    "src/styles",
+    "schematics",
+    "README.md"
+  ],
+  "schematics": "./schematics/collection.json"
 }

package/schematics/collection.json

@@ -0,0 +1,9 @@
+{
+  "schematics": {
+    "ng-add": {
+      "description": "Set up Eagami UI: register the global stylesheet and fonts in an Angular workspace.",
+      "factory": "./ng-add/index#ngAdd",
+      "schema": "./ng-add/schema.json"
+    }
+  }
+}

package/schematics/ng-add/index.js

@@ -0,0 +1,64 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ngAdd = ngAdd;
+const schematics_1 = require("@angular-devkit/schematics");
+const workspace_1 = require("@schematics/angular/utility/workspace");
+const utils_1 = require("./utils");
+function ngAdd(options) {
+    return (0, schematics_1.chain)([registerStylesheet(options), registerFonts(options), logNextSteps()]);
+}
+function registerStylesheet(options) {
+    return (0, workspace_1.updateWorkspace)(workspace => {
+        const { project } = findProject(workspace, options.project);
+        const build = project.targets.get('build');
+        if (!build) {
+            throw new schematics_1.SchematicsException('No "build" target found; cannot register the Eagami UI stylesheet.');
+        }
+        build.options ??= {};
+        const existing = build.options['styles'];
+        const styles = Array.isArray(existing) ? existing : [];
+        build.options['styles'] = (0, utils_1.withEagamiStyle)(styles);
+    });
+}
+function registerFonts(options) {
+    return async (tree, context) => {
+        const workspace = await (0, workspace_1.getWorkspace)(tree);
+        const { name, project } = findProject(workspace, options.project);
+        const indexPath = (0, utils_1.resolveIndexPath)(project.targets.get('build')?.options?.['index']);
+        if (!indexPath) {
+            context.logger.warn(`No index.html found for project "${name}"; add the Eagami UI fonts manually.`);
+            return;
+        }
+        const current = tree.read(indexPath);
+        if (!current) {
+            context.logger.warn(`Could not read "${indexPath}"; add the Eagami UI fonts manually.`);
+            return;
+        }
+        const html = current.toString('utf-8');
+        const updated = (0, utils_1.withEagamiFonts)(html);
+        if (updated !== html) {
+            tree.overwrite(indexPath, updated);
+        }
+    };
+}
+function logNextSteps() {
+    return (_tree, context) => {
+        context.logger.info('Eagami UI is set up: the global stylesheet and fonts are registered.');
+        context.logger.info('Optional: call provideEagamiUi() in app.config.ts for a custom brand palette or extra locales.');
+    };
+}
+function findProject(workspace, name) {
+    if (name) {
+        const project = workspace.projects.get(name);
+        if (!project) {
+            throw new schematics_1.SchematicsException(`Project "${name}" not found in the workspace.`);
+        }
+        return { name, project };
+    }
+    for (const [projectName, project] of workspace.projects) {
+        if (project.extensions['projectType'] === 'application') {
+            return { name: projectName, project };
+        }
+    }
+    throw new schematics_1.SchematicsException('No application project found to set up Eagami UI.');
+}

package/schematics/ng-add/schema.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/schematics/ng-add/schema.json

@@ -0,0 +1,16 @@
+{
+  "$schema": "http://json-schema.org/schema",
+  "$id": "eagami-ui-ng-add",
+  "title": "Eagami UI ng-add schematic",
+  "type": "object",
+  "properties": {
+    "project": {
+      "type": "string",
+      "description": "The project to set up Eagami UI in.",
+      "$default": {
+        "$source": "projectName"
+      }
+    }
+  },
+  "additionalProperties": false
+}

package/schematics/ng-add/utils.js

@@ -0,0 +1,53 @@
+"use strict";
+// Pure, dependency-free transforms for the ng-add schematic. Kept separate from
+// index.ts (which pulls in @angular-devkit) so the unit tests compile under the
+// Angular test build without dragging Node-only schematics APIs into the bundle.
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EAGAMI_FONT_LINKS = exports.EAGAMI_STYLE_PATH = void 0;
+exports.styleEntryMatches = styleEntryMatches;
+exports.withEagamiStyle = withEagamiStyle;
+exports.hasEagamiFonts = hasEagamiFonts;
+exports.withEagamiFonts = withEagamiFonts;
+exports.resolveIndexPath = resolveIndexPath;
+exports.EAGAMI_STYLE_PATH = 'node_modules/@eagami/ui/src/styles/eagami-ui.scss';
+exports.EAGAMI_FONT_LINKS = [
+    '<link rel="preconnect" href="https://fonts.googleapis.com" />',
+    '<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />',
+    '<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,400&family=Syne:wght@400;500;600;700&display=swap" />',
+];
+// Unique to our Google Fonts request, so it doubles as the idempotency marker
+const FONT_MARKER = 'family=DM+Sans';
+function styleEntryMatches(entry, path) {
+    return typeof entry === 'string' ? entry === path : entry.input === path;
+}
+function withEagamiStyle(styles) {
+    if (styles.some(style => styleEntryMatches(style, exports.EAGAMI_STYLE_PATH))) {
+        return styles;
+    }
+    return [exports.EAGAMI_STYLE_PATH, ...styles];
+}
+function hasEagamiFonts(html) {
+    return html.includes(FONT_MARKER);
+}
+function withEagamiFonts(html) {
+    if (hasEagamiFonts(html)) {
+        return html;
+    }
+    const block = exports.EAGAMI_FONT_LINKS.map(link => `    ${link}`).join('\n');
+    const headClose = /([ \t]*)<\/head>/i;
+    if (headClose.test(html)) {
+        return html.replace(headClose, `${block}\n$1</head>`);
+    }
+    return `${block}\n${html}`;
+}
+// The build target's `index` option is either a path string or a { input, output } object
+function resolveIndexPath(index) {
+    if (typeof index === 'string') {
+        return index;
+    }
+    if (index !== null && typeof index === 'object' && 'input' in index) {
+        const input = index.input;
+        return typeof input === 'string' ? input : undefined;
+    }
+    return undefined;
+}

package/schematics/package.json

@@ -0,0 +1,3 @@
+{
+  "type": "commonjs"
+}