@tx-angular-design-system/ui-kit 0.1.0 → 0.1.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tx-angular-design-system/ui-kit",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "TraXtion Angular design system — a headless-primitive component library styled entirely through Tailwind CSS v4 design tokens.",
   "keywords": [
     "angular",
@@ -57,4 +57,4 @@
   "module": "fesm2022/tx-angular-design-system-ui-kit.mjs",
   "typings": "types/tx-angular-design-system-ui-kit.d.ts",
   "type": "module"
-}
+}

package/schematics/ng-add/index.js

@@ -1,305 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ngAdd = ngAdd;
-/**
- * `ng add @tx-angular-design-system/ui-kit`
- *
- * Brings a consumer app from zero to rendering ui-kit components correctly:
- *
- *   1. adds the runtime peer dependencies and Tailwind v4
- *   2. writes a PostCSS config wiring in @tailwindcss/postcss
- *   3. adds four directives to the app's global stylesheet — the Tailwind
- *      import, the CDK overlay stylesheet, the kit's theme, and (critically)
- *      an `@source` pointing at the installed package
- *   4. links IBM Plex Sans / IBM Plex Mono / Archivo in index.html
- *
- * Every step is idempotent and refuses to overwrite an existing Tailwind or
- * PostCSS setup — re-running it on a configured app is a no-op.
- *
- * Step 3's `@source` is the load-bearing one. Tailwind's automatic content
- * detection deliberately skips node_modules, so without an explicit @source
- * none of the kit's utility classes are generated from its compiled .mjs
- * templates and every component renders unstyled.
- */
-const schematics_1 = require("@angular-devkit/schematics");
-const tasks_1 = require("@angular-devkit/schematics/tasks");
-const utility_1 = require("@schematics/angular/utility");
-const PACKAGE_NAME = '@tx-angular-design-system/ui-kit';
-/** Kept in step with the library's own peerDependencies. */
-const PEER_VERSIONS = {
-    '@angular/aria': '^22.1.0',
-    '@angular/cdk': '^22.1.0',
-    tailwindcss: '^4.0.0',
-    '@tailwindcss/postcss': '^4.0.0',
-};
-const TAILWIND_IMPORT = `@import 'tailwindcss';`;
-const CDK_IMPORT = `@import '@angular/cdk/overlay-prebuilt.css';`;
-const THEME_IMPORT = `@import '${PACKAGE_NAME}/styles/ui-kit.css';`;
-const FONT_FAMILIES = 'family=Archivo:wght@500;600;700' +
-    '&family=IBM+Plex+Mono:wght@400;500' +
-    '&family=IBM+Plex+Sans:wght@400;500;600';
-const FONT_HREF = `https://fonts.googleapis.com/css2?${FONT_FAMILIES}&display=swap`;
-const POSTCSS_JSON_CANDIDATES = ['.postcssrc.json', '.postcssrc'];
-const POSTCSS_JS_CANDIDATES = [
-    'postcss.config.js',
-    'postcss.config.mjs',
-    'postcss.config.cjs',
-    'postcss.config.ts',
-];
-function ngAdd(options) {
-    return (0, schematics_1.chain)([
-        (0, utility_1.addDependency)('@angular/cdk', PEER_VERSIONS['@angular/cdk'], {
-            type: utility_1.DependencyType.Default,
-            existing: utility_1.ExistingBehavior.Skip,
-            install: utility_1.InstallBehavior.None,
-        }),
-        (0, utility_1.addDependency)('@angular/aria', PEER_VERSIONS['@angular/aria'], {
-            type: utility_1.DependencyType.Default,
-            existing: utility_1.ExistingBehavior.Skip,
-            install: utility_1.InstallBehavior.None,
-        }),
-        (0, utility_1.addDependency)('tailwindcss', PEER_VERSIONS.tailwindcss, {
-            type: utility_1.DependencyType.Dev,
-            existing: utility_1.ExistingBehavior.Skip,
-            install: utility_1.InstallBehavior.None,
-        }),
-        (0, utility_1.addDependency)('@tailwindcss/postcss', PEER_VERSIONS['@tailwindcss/postcss'], {
-            type: utility_1.DependencyType.Dev,
-            existing: utility_1.ExistingBehavior.Skip,
-            install: utility_1.InstallBehavior.None,
-        }),
-        ensurePostcssConfig(),
-        setUpProject(options),
-        scheduleInstall(options),
-    ]);
-}
-/* -------------------------------------------------------------------------- *
- * PostCSS
- * -------------------------------------------------------------------------- */
-function ensurePostcssConfig() {
-    return (tree, context) => {
-        const existingJs = POSTCSS_JS_CANDIDATES.find((p) => tree.exists(p));
-        if (existingJs) {
-            context.logger.info(`  ↷ Found ${existingJs}. Leaving it alone — add '@tailwindcss/postcss' to its plugins yourself.`);
-            return;
-        }
-        const existingJson = POSTCSS_JSON_CANDIDATES.find((p) => tree.exists(p));
-        const path = existingJson ?? '.postcssrc.json';
-        let config = {};
-        if (existingJson) {
-            const raw = tree.readText(existingJson);
-            try {
-                config = JSON.parse(raw);
-            }
-            catch {
-                context.logger.warn(`  ! Could not parse ${existingJson}; add '@tailwindcss/postcss' to its plugins yourself.`);
-                return;
-            }
-        }
-        config.plugins ??= {};
-        if ('@tailwindcss/postcss' in config.plugins) {
-            context.logger.info(`  ✓ ${path} already loads @tailwindcss/postcss.`);
-            return;
-        }
-        config.plugins['@tailwindcss/postcss'] = {};
-        const content = JSON.stringify(config, null, 2) + '\n';
-        if (existingJson) {
-            tree.overwrite(path, content);
-            context.logger.info(`  ✓ Added @tailwindcss/postcss to ${path}.`);
-        }
-        else {
-            tree.create(path, content);
-            context.logger.info(`  ✓ Created ${path}.`);
-        }
-    };
-}
-/* -------------------------------------------------------------------------- *
- * Project wiring
- * -------------------------------------------------------------------------- */
-function setUpProject(options) {
-    return async (tree, context) => {
-        const workspace = await (0, utility_1.readWorkspace)(tree);
-        const projectName = options.project ?? defaultProjectName(workspace);
-        if (!projectName) {
-            throw new schematics_1.SchematicsException('Could not determine which project to set up. Re-run with --project=<name>.');
-        }
-        const project = workspace.projects.get(projectName);
-        if (!project) {
-            throw new schematics_1.SchematicsException(`Project "${projectName}" was not found in the workspace.`);
-        }
-        const build = project.targets.get('build');
-        if (!build) {
-            throw new schematics_1.SchematicsException(`Project "${projectName}" has no "build" target.`);
-        }
-        const buildOptions = (build.options ?? {});
-        const stylesheet = await resolveStylesheet(tree, context, projectName, project.sourceRoot, buildOptions);
-        return (0, schematics_1.chain)([
-            updateStylesheet(stylesheet, context),
-            options.fonts === false
-                ? noop()
-                : updateIndexHtml(buildOptions.index, project.sourceRoot, context),
-        ]);
-    };
-}
-function defaultProjectName(workspace) {
-    for (const [name, project] of workspace.projects) {
-        if (project.extensions['projectType'] === 'application') {
-            return name;
-        }
-    }
-    return undefined;
-}
-/**
- * Finds the app's global stylesheet, creating and registering one if the
- * project has none.
- */
-async function resolveStylesheet(tree, context, projectName, sourceRoot, buildOptions) {
-    const styles = buildOptions.styles ?? [];
-    const first = styles
-        .map((entry) => (typeof entry === 'string' ? entry : entry.input))
-        .find((path) => tree.exists(path));
-    if (first) {
-        if (!first.endsWith('.css')) {
-            context.logger.warn(`  ! ${first} is not plain CSS. Tailwind v4 expects a .css entry point; ` +
-                `the directives were still added, but you may need to migrate this file.`);
-        }
-        return first;
-    }
-    const created = joinPath(sourceRoot ?? `projects/${projectName}/src`, 'styles.css');
-    tree.create(created, '');
-    await (0, utility_1.updateWorkspace)((workspace) => {
-        const target = workspace.projects.get(projectName)?.targets.get('build');
-        if (target) {
-            target.options ??= {};
-            const list = target.options['styles'] ?? [];
-            target.options['styles'] = [...list, created];
-        }
-    })(tree, context);
-    context.logger.info(`  ✓ Created ${created} and registered it as a global stylesheet.`);
-    return created;
-}
-function updateStylesheet(path, context) {
-    return (tree) => {
-        const original = tree.readText(path);
-        // A v3 setup uses @tailwind directives. Adding a v4 `@import 'tailwindcss'`
-        // on top of that would produce a broken hybrid, so leave it be and say so.
-        const hasV3Directives = /^\s*@tailwind\s+(base|components|utilities)\s*;/m.test(original);
-        const hasV4Import = /@import\s+["']tailwindcss["']/.test(original);
-        if (hasV3Directives && !hasV4Import) {
-            context.logger.warn(`  ! ${path} uses Tailwind v3 @tailwind directives. Skipping the Tailwind import — ` +
-                `migrate to v4 (@import 'tailwindcss') and re-run this schematic.`);
-        }
-        const wanted = [];
-        if (!hasV4Import && !hasV3Directives) {
-            wanted.push(TAILWIND_IMPORT);
-        }
-        if (!/@angular\/cdk\/overlay-prebuilt\.css/.test(original)) {
-            wanted.push(CDK_IMPORT);
-        }
-        if (!original.includes(`${PACKAGE_NAME}/styles/ui-kit.css`)) {
-            wanted.push(THEME_IMPORT);
-        }
-        const sourceDirective = buildSourceDirective(path);
-        const hasSource = new RegExp(`@source\\s+["'][^"']*${escapeRegExp(PACKAGE_NAME)}["']`).test(original);
-        if (!hasSource) {
-            wanted.push('', '/* Generates the kit\'s utility classes from its compiled templates.', ' * Tailwind skips node_modules by default, so this line is required. */', sourceDirective);
-        }
-        if (wanted.length === 0) {
-            context.logger.info(`  ✓ ${path} is already configured.`);
-            return;
-        }
-        const block = wanted.join('\n');
-        const eol = original.includes('\r\n') ? '\r\n' : '\n';
-        let updated;
-        if (hasV4Import || hasV3Directives) {
-            // Insert after the existing Tailwind entry so ordering stays correct.
-            const anchor = hasV4Import
-                ? /@import\s+["']tailwindcss["'][^;]*;/
-                : /^\s*@tailwind\s+utilities\s*;/m;
-            const match = original.match(anchor);
-            if (match?.index !== undefined) {
-                const at = match.index + match[0].length;
-                updated = original.slice(0, at) + eol + block + original.slice(at);
-            }
-            else {
-                updated = block + eol + original;
-            }
-        }
-        else {
-            updated = block + eol + (original.trimStart().length ? eol + original : '');
-        }
-        tree.overwrite(path, normaliseEol(updated, eol));
-        context.logger.info(`  ✓ Wired ${path} (${wanted.filter(Boolean).length} directive(s) added).`);
-    };
-}
-/**
- * `@source` paths resolve relative to the stylesheet that declares them, so
- * this walks back up to the workspace root and down into node_modules.
- *
- * Deliberately plain string math: the devkit path helpers require absolute
- * paths, and everything a schematic Tree hands back is workspace-relative.
- */
-function buildSourceDirective(stylesheetPath) {
-    const depth = stylesheetPath.split('/').slice(0, -1).filter(Boolean).length;
-    const prefix = depth === 0 ? './' : '../'.repeat(depth);
-    return `@source '${prefix}node_modules/${PACKAGE_NAME}';`;
-}
-/** Workspace-relative path join that tolerates missing/trailing separators. */
-function joinPath(...segments) {
-    return segments
-        .filter((segment) => !!segment)
-        .map((segment) => segment.replace(/^\/+/, '').replace(/\/+$/, ''))
-        .filter(Boolean)
-        .join('/');
-}
-/* -------------------------------------------------------------------------- *
- * index.html
- * -------------------------------------------------------------------------- */
-function updateIndexHtml(index, sourceRoot, context) {
-    return (tree) => {
-        const path = (typeof index === 'string' ? index : index?.input) ??
-            joinPath(sourceRoot ?? 'src', 'index.html');
-        if (!tree.exists(path)) {
-            context.logger.warn(`  ! ${path} not found; add the font <link> tags yourself.`);
-            return;
-        }
-        const original = tree.readText(path);
-        if (original.includes('IBM+Plex+Sans')) {
-            context.logger.info(`  ✓ ${path} already links IBM Plex Sans.`);
-            return;
-        }
-        const eol = original.includes('\r\n') ? '\r\n' : '\n';
-        const links = [
-            `  <link rel="preconnect" href="https://fonts.googleapis.com">`,
-            `  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>`,
-            `  <link href="${FONT_HREF}" rel="stylesheet">`,
-        ].join(eol);
-        const headClose = original.search(/<\/head>/i);
-        if (headClose === -1) {
-            context.logger.warn(`  ! No </head> in ${path}; add the font <link> tags yourself.`);
-            return;
-        }
-        const updated = original.slice(0, headClose) + links + eol + original.slice(headClose);
-        tree.overwrite(path, updated);
-        context.logger.info(`  ✓ Linked IBM Plex Sans, IBM Plex Mono and Archivo in ${path}.`);
-    };
-}
-/* -------------------------------------------------------------------------- *
- * Helpers
- * -------------------------------------------------------------------------- */
-function scheduleInstall(options) {
-    return (_tree, context) => {
-        if (!options.skipInstall) {
-            context.addTask(new tasks_1.NodePackageInstallTask());
-        }
-    };
-}
-function noop() {
-    return () => { };
-}
-function escapeRegExp(value) {
-    return value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
-}
-function normaliseEol(value, eol) {
-    return eol === '\r\n' ? value.replace(/\r?\n/g, '\r\n') : value;
-}

package/schematics/ng-add/schema.js

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