@trineui/cli 0.1.0-beta.1 → 0.1.1

package/README.md

@@ -0,0 +1,41 @@
+# @trineui/cli
+
+Canonical public package:
+
+```bash
+npx @trineui/cli@latest add button
+```
+
+Current v0 command:
+
+```bash
+trine add button --target <app-root>
+```
+
+Notes:
+
+- `button` is the only supported component in this public-style baseline
+- omitting `--target` uses the current directory when it already matches the supported Angular app shape
+- when the current directory is not a supported Angular app target, the CLI auto-detects a single Angular app target under the current directory and proceeds automatically
+- when multiple Angular app targets are found, the CLI stops and asks for `--target <app-root>`
+- external targets can run `trine add button` from the app root or pass an explicit app root such as `--target /absolute/path/to/angular-app`
+- the canonical public package name is `@trineui/cli`
+- the CLI command exposed through the package bin is still `trine`
+- `apps/consumer-fixture` is the first separate-target proof and does not use the demo-only `@trine/ui/*` bridge
+- `/tmp/trine-button-publish-proof` is the latest truly external packaged-proof repo outside the monorepo
+- packaged/public-style proof uses a packed local tarball to simulate `npx @trineui/cli@latest add button`
+- the packaged CLI ships compiled runtime files plus Button templates so it can execute from `node_modules` in a real `npx`-style flow
+- consumer-owned component destination files cause a clear failure
+- existing shared baseline files (`tokens.css` and `trine-consumer.css`) are preserved so a second component can be added into the same target repo
+- the command copies consumer-owned source instead of wiring runtime back to `packages/ui`
+- for `apps/demo`, `@trine/ui` resolves locally for delivered components while `@trine/ui/*` temporarily bridges non-localized components back to the authoring source
+- the delivered shared styling baseline is `tokens.css` + `trine-consumer.css`
+- the current proven target dependency baseline is Angular 21, Tailwind CSS v4, and `class-variance-authority`
+- use a Node LTS line supported by Angular 21 in the target repo; odd-numbered Node releases can build with warnings
+- when `package.json` is present in the target root, the CLI warns if Tailwind CSS v4 or `class-variance-authority` are missing
+
+Local package proof equivalent:
+
+```bash
+npx --yes --package /absolute/path/to/trineui-cli-0.1.0.tgz trine add button
+```

package/bin/trine.js

@@ -0,0 +1,24 @@
+#!/usr/bin/env node
+
+import { spawnSync } from 'node:child_process';
+import { existsSync } from 'node:fs';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const currentDir = path.dirname(fileURLToPath(import.meta.url));
+const distEntryPath = path.resolve(currentDir, '../dist/index.js');
+const sourceEntryPath = path.resolve(currentDir, '../src/index.ts');
+const entryPath = existsSync(distEntryPath) ? distEntryPath : sourceEntryPath;
+const nodeArgs = entryPath.endsWith('.ts')
+  ? ['--experimental-strip-types', entryPath, ...process.argv.slice(2)]
+  : [entryPath, ...process.argv.slice(2)];
+
+const result = spawnSync(process.execPath, nodeArgs, {
+  stdio: 'inherit',
+});
+
+if (result.error) {
+  throw result.error;
+}
+
+process.exit(result.status ?? 1);

package/dist/add-button.js

@@ -0,0 +1,15 @@
+import { addComponent, } from "./add-component.js";
+const BUTTON_SOURCE_FILES = [
+    'button/button.ts',
+    'button/button.html',
+    'button/button.skin.ts',
+];
+export function addButton(options) {
+    return addComponent({
+        componentName: 'button',
+        componentLabel: 'Button',
+        sourceFiles: BUTTON_SOURCE_FILES,
+        barrelLine: "export { ButtonComponent, ButtonComponent as TrineButton } from './button';",
+        uiExportLine: "export * from './button';",
+    }, options);
+}

package/dist/add-component.js

@@ -0,0 +1,317 @@
+import { copyFileSync, existsSync, mkdirSync, readFileSync, writeFileSync } from 'node:fs';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import ts from 'typescript';
+const STYLE_SOURCE_FILES = ['styles/tokens.css', 'styles/trine-consumer.css'];
+const TEMPLATE_ROOT = fileURLToPath(new URL('../templates/', import.meta.url));
+const LOCAL_REPO_DEMO_ROOT = path.resolve(TEMPLATE_ROOT, '../../../apps/demo');
+const STYLE_IMPORT_LINE = "@import './styles/trine-consumer.css';";
+const DEMO_BRIDGE_COMMENT = '// Temporary demo verification bridge: delivered local components resolve locally; other components still re-export from the authoring source.';
+const DEMO_LOCAL_COMPONENTS = [
+    {
+        key: 'button',
+        exportLine: "export * from './button';",
+    },
+];
+const DEMO_PROXY_EXPORT_LINES = [
+    {
+        key: 'button-group',
+        line: "export * from '@trine/ui/src/components/ui/button-group';",
+    },
+    {
+        key: 'checkbox',
+        line: "export * from '@trine/ui/src/components/ui/checkbox';",
+    },
+    {
+        key: 'dialog',
+        line: "export * from '@trine/ui/src/components/ui/dialog';",
+    },
+    {
+        key: 'input',
+        line: "export * from '@trine/ui/src/components/ui/input/input';",
+    },
+    {
+        key: 'popover',
+        line: "export * from '@trine/ui/src/components/ui/popover';",
+    },
+    {
+        key: 'radio',
+        line: "export * from '@trine/ui/src/components/ui/radio';",
+    },
+    {
+        key: 'select',
+        line: "export * from '@trine/ui/src/components/ui/select';",
+    },
+    {
+        key: 'sprint-zero-placeholder',
+        line: "export * from '@trine/ui/src/components/ui/sprint-zero-placeholder/sprint-zero-placeholder';",
+    },
+    {
+        key: 'switch',
+        line: "export * from '@trine/ui/src/components/ui/switch';",
+    },
+    {
+        key: 'textarea',
+        line: "export * from '@trine/ui/src/components/ui/textarea';",
+    },
+    {
+        key: 'tabs',
+        line: "export * from '@trine/ui/src/components/ui/tabs';",
+    },
+];
+export function addComponent(manifest, options) {
+    const targetRoot = path.resolve(options.cwd, options.target);
+    const targetAppDir = path.join(targetRoot, 'src', 'app');
+    const targetStylesEntry = path.join(targetRoot, 'src', 'styles.scss');
+    const targetTsconfig = path.join(targetRoot, 'tsconfig.app.json');
+    assertTargetShape(manifest.componentName, targetRoot, targetAppDir, targetStylesEntry, targetTsconfig);
+    const componentDestDir = path.join(targetRoot, 'src', 'app', 'components', 'ui', manifest.componentName);
+    const stylesDestDir = path.join(targetRoot, 'src', 'styles');
+    const componentCopyTargets = manifest.sourceFiles.map((source) => ({
+        source: path.join(TEMPLATE_ROOT, source),
+        destination: path.join(componentDestDir, path.basename(source)),
+    }));
+    const conflicts = componentCopyTargets
+        .filter(({ destination }) => existsSync(destination))
+        .map(({ destination }) => toTargetRelativePath(targetRoot, destination));
+    if (conflicts.length > 0) {
+        throw new Error([
+            `trine add ${manifest.componentName} aborted because consumer-owned destination files already exist:`,
+            ...conflicts.map((file) => `- ${file}`),
+        ].join('\n'));
+    }
+    mkdirSync(componentDestDir, { recursive: true });
+    mkdirSync(stylesDestDir, { recursive: true });
+    for (const { source, destination } of componentCopyTargets) {
+        copyFileSync(source, destination);
+    }
+    const componentCopiedFiles = componentCopyTargets.map(({ destination }) => toTargetRelativePath(targetRoot, destination));
+    const sharedStylesResult = ensureSharedStyleBaseline(targetRoot, stylesDestDir, manifest.componentLabel);
+    const copiedFiles = [...componentCopiedFiles, ...sharedStylesResult.copiedFiles];
+    const updatedFiles = [];
+    const warnings = [...sharedStylesResult.warnings];
+    const componentBarrelPath = path.join(componentDestDir, 'index.ts');
+    if (ensureLinesFile(componentBarrelPath, [manifest.barrelLine])) {
+        updatedFiles.push(toTargetRelativePath(targetRoot, componentBarrelPath));
+    }
+    const uiRootBarrelPath = path.join(targetRoot, 'src', 'app', 'components', 'ui', 'index.ts');
+    const uiRootUpdated = isDemoTarget(targetRoot)
+        ? rewriteDemoUiRootBarrel(uiRootBarrelPath)
+        : ensureLinesFile(uiRootBarrelPath, [manifest.uiExportLine]);
+    if (uiRootUpdated) {
+        updatedFiles.push(toTargetRelativePath(targetRoot, uiRootBarrelPath));
+    }
+    if (ensureTsconfigAlias(targetTsconfig, targetRoot, options.cwd)) {
+        updatedFiles.push(toTargetRelativePath(targetRoot, targetTsconfig));
+    }
+    const stylesResult = ensureStylesImport(targetStylesEntry);
+    if (stylesResult.updated) {
+        updatedFiles.push(toTargetRelativePath(targetRoot, targetStylesEntry));
+    }
+    if (stylesResult.authoringImportStillPresent) {
+        warnings.push(`${toTargetRelativePath(targetRoot, targetStylesEntry)} still imports @trine/ui/styles/trine.css for the broader demo authoring baseline.`);
+    }
+    if (isDemoTarget(targetRoot)) {
+        warnings.push('apps/demo keeps non-localized components on a temporary @trine/ui/* bridge back to packages/ui so the full demo app can still build while delivered components resolve locally.');
+    }
+    else {
+        warnings.push(...readTargetDependencyWarnings(targetRoot, manifest.componentLabel));
+    }
+    return {
+        componentName: manifest.componentName,
+        copiedFiles,
+        updatedFiles,
+        warnings,
+        targetRoot,
+    };
+}
+function ensureSharedStyleBaseline(targetRoot, stylesDestDir, componentLabel) {
+    const copiedFiles = [];
+    const warnings = [];
+    for (const sourceFile of STYLE_SOURCE_FILES) {
+        const templatePath = path.join(TEMPLATE_ROOT, sourceFile);
+        const destinationPath = path.join(stylesDestDir, path.basename(sourceFile));
+        const relativeDestination = toTargetRelativePath(targetRoot, destinationPath);
+        if (!existsSync(destinationPath)) {
+            copyFileSync(templatePath, destinationPath);
+            copiedFiles.push(relativeDestination);
+            continue;
+        }
+        if (readFileSync(destinationPath, 'utf8') !== readFileSync(templatePath, 'utf8')) {
+            warnings.push(`${relativeDestination} already exists and was preserved. Review it manually if the delivered ${componentLabel} expects newer shared styling baseline content.`);
+        }
+    }
+    return {
+        copiedFiles,
+        warnings,
+    };
+}
+function assertTargetShape(componentName, targetRoot, targetAppDir, targetStylesEntry, targetTsconfig) {
+    const missing = [];
+    if (!existsSync(targetRoot)) {
+        missing.push(targetRoot);
+    }
+    if (!existsSync(targetAppDir)) {
+        missing.push(targetAppDir);
+    }
+    if (!existsSync(targetStylesEntry)) {
+        missing.push(targetStylesEntry);
+    }
+    if (!existsSync(targetTsconfig)) {
+        missing.push(targetTsconfig);
+    }
+    if (missing.length > 0) {
+        throw new Error([
+            `trine add ${componentName} requires an Angular app target with src/app, src/styles.scss, and tsconfig.app.json.`,
+            ...missing.map((file) => `- ${file}`),
+        ].join('\n'));
+    }
+}
+function ensureLinesFile(filePath, lines) {
+    const existing = existsSync(filePath) ? readFileSync(filePath, 'utf8') : '';
+    const normalizedExisting = existing.trimEnd();
+    const currentLines = normalizedExisting === '' ? [] : normalizedExisting.split('\n');
+    let changed = false;
+    for (const line of lines) {
+        if (!currentLines.includes(line)) {
+            currentLines.push(line);
+            changed = true;
+        }
+    }
+    if (!existsSync(filePath)) {
+        changed = true;
+    }
+    if (changed) {
+        mkdirSync(path.dirname(filePath), { recursive: true });
+        writeFileSync(filePath, `${currentLines.join('\n')}\n`);
+    }
+    return changed;
+}
+function rewriteDemoUiRootBarrel(filePath) {
+    const uiRootDir = path.dirname(filePath);
+    const localComponentLines = DEMO_LOCAL_COMPONENTS.filter(({ key }) => existsSync(path.join(uiRootDir, key, 'index.ts')));
+    const localComponentKeys = new Set(localComponentLines.map(({ key }) => key));
+    const nextLines = [
+        DEMO_BRIDGE_COMMENT,
+        ...localComponentLines.map(({ exportLine }) => exportLine),
+        ...DEMO_PROXY_EXPORT_LINES.filter(({ key }) => !localComponentKeys.has(key)).map(({ line }) => line),
+    ];
+    const nextContent = `${nextLines.join('\n')}\n`;
+    const currentContent = existsSync(filePath) ? readFileSync(filePath, 'utf8') : '';
+    if (currentContent === nextContent) {
+        return false;
+    }
+    mkdirSync(path.dirname(filePath), { recursive: true });
+    writeFileSync(filePath, nextContent);
+    return true;
+}
+function ensureTsconfigAlias(tsconfigPath, targetRoot, cwd) {
+    const currentText = readFileSync(tsconfigPath, 'utf8');
+    const parsed = ts.parseConfigFileTextToJson(tsconfigPath, currentText);
+    if (parsed.error) {
+        throw new Error(`Unable to parse ${path.relative(cwd, tsconfigPath)} as JSONC.`);
+    }
+    const config = (parsed.config ?? {});
+    config.compilerOptions ??= {};
+    config.compilerOptions.paths ??= {};
+    const aliasTarget = isDemoTarget(targetRoot)
+        ? toPosixPath(path.relative(process.cwd(), path.join(targetRoot, 'src', 'app', 'components', 'ui', 'index.ts')))
+        : toConfigRelativePath(path.relative(path.dirname(tsconfigPath), path.join(targetRoot, 'src', 'app', 'components', 'ui', 'index.ts')));
+    const wildcardTarget = 'packages/ui/*';
+    const currentAlias = config.compilerOptions.paths['@trine/ui'];
+    const currentWildcardAlias = config.compilerOptions.paths['@trine/ui/*'];
+    const aliasIsCurrent = Array.isArray(currentAlias) && currentAlias.length === 1 && currentAlias[0] === aliasTarget;
+    const wildcardIsCurrent = !isDemoTarget(targetRoot) ||
+        (Array.isArray(currentWildcardAlias) &&
+            currentWildcardAlias.length === 1 &&
+            currentWildcardAlias[0] === wildcardTarget);
+    if (aliasIsCurrent && wildcardIsCurrent) {
+        return false;
+    }
+    config.compilerOptions.paths['@trine/ui'] = [aliasTarget];
+    if (isDemoTarget(targetRoot)) {
+        config.compilerOptions.paths['@trine/ui/*'] = [wildcardTarget];
+    }
+    else if ('@trine/ui/*' in config.compilerOptions.paths) {
+        delete config.compilerOptions.paths['@trine/ui/*'];
+    }
+    writeFileSync(tsconfigPath, `${JSON.stringify(config, null, 2)}\n`);
+    return true;
+}
+function ensureStylesImport(stylesPath) {
+    const current = readFileSync(stylesPath, 'utf8');
+    if (current.includes(STYLE_IMPORT_LINE)) {
+        return {
+            updated: false,
+            authoringImportStillPresent: current.includes("@import '@trine/ui/styles/trine.css';"),
+        };
+    }
+    const lines = current.split('\n');
+    let insertAt = -1;
+    for (let index = 0; index < lines.length; index += 1) {
+        const trimmed = lines[index].trim();
+        if (trimmed.startsWith('@use') || trimmed.startsWith('@import')) {
+            insertAt = index;
+        }
+    }
+    if (insertAt === -1) {
+        lines.unshift(STYLE_IMPORT_LINE, '');
+    }
+    else {
+        lines.splice(insertAt + 1, 0, STYLE_IMPORT_LINE);
+    }
+    writeFileSync(stylesPath, lines.join('\n'));
+    return {
+        updated: true,
+        authoringImportStillPresent: current.includes("@import '@trine/ui/styles/trine.css';"),
+    };
+}
+function isDemoTarget(targetRoot) {
+    return (existsSync(LOCAL_REPO_DEMO_ROOT) &&
+        path.resolve(targetRoot) === path.resolve(LOCAL_REPO_DEMO_ROOT));
+}
+function toPosixPath(filePath) {
+    return filePath.split(path.sep).join(path.posix.sep);
+}
+function toConfigRelativePath(filePath) {
+    const posixPath = toPosixPath(filePath);
+    return posixPath.startsWith('.') ? posixPath : `./${posixPath}`;
+}
+function toTargetRelativePath(targetRoot, filePath) {
+    return toPosixPath(path.relative(targetRoot, filePath));
+}
+function readTargetDependencyWarnings(targetRoot, componentLabel) {
+    const packageJsonPath = path.join(targetRoot, 'package.json');
+    if (!existsSync(packageJsonPath)) {
+        return [
+            'No package.json was found in the target root, so Tailwind CSS v4 and class-variance-authority prerequisites could not be checked automatically.',
+        ];
+    }
+    try {
+        const packageJson = JSON.parse(readFileSync(packageJsonPath, 'utf8'));
+        const deps = {
+            ...(packageJson.dependencies ?? {}),
+            ...(packageJson.devDependencies ?? {}),
+        };
+        const warnings = [];
+        if (!deps['class-variance-authority']) {
+            warnings.push(`class-variance-authority is missing from the target repo. Install it before building the delivered ${componentLabel}.`);
+        }
+        const tailwindRange = deps['tailwindcss'];
+        if (!tailwindRange) {
+            warnings.push(`tailwindcss is missing from the target repo. The current proven ${componentLabel} baseline expects Tailwind CSS v4.`);
+        }
+        else if (!looksLikeTailwindV4(tailwindRange)) {
+            warnings.push(`The target repo declares tailwindcss@${tailwindRange}. The current proven ${componentLabel} baseline expects Tailwind CSS v4.`);
+        }
+        return warnings;
+    }
+    catch {
+        return [
+            `package.json could not be parsed for dependency checks. Verify Tailwind CSS v4 and class-variance-authority manually before building the delivered ${componentLabel}.`,
+        ];
+    }
+}
+function looksLikeTailwindV4(range) {
+    return /(^|[^\d])4(\D|$)/.test(range);
+}