inai-react-components 1.5.0 → 1.5.1

package/dist/commands/add.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"add.d.ts","sourceRoot":"","sources":["../../src/commands/add.ts"],"names":[],"mappings":"AAKA,OAAO,EAGL,KAAK,iBAAiB,EAEtB,KAAK,kBAAkB,EAExB,MAAM,aAAa,CAAC;AAoBrB,MAAM,WAAW,UAAU;IACzB,kDAAkD;IAClD,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,2CAA2C;IAC3C,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,kDAAkD;IAClD,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,oDAAoD;IACpD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,kDAAkD;IAClD,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,MAAM,WAAW,SAAS;IACxB,KAAK,EAAE,OAAO,CAAC;IACf,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,MAAM,EAAE,CAAC;IAChB,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,YAAY,EAAE,MAAM,EAAE,CAAC;IACvB,2DAA2D;IAC3D,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;IACxB,4DAA4D;IAC5D,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,kEAAkE;IAClE,WAAW,CAAC,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;CACjD;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,MAAM,GAAG;IAChD,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,IAAI,EAAE,MAAM,CAAC;CACd,CAsCA;AAED;;GAEG;AACH,wBAAgB,cAAc,CAC5B,QAAQ,EAAE;IAAE,UAAU,EAAE,iBAAiB,EAAE,CAAC;IAAC,MAAM,EAAE,iBAAiB,EAAE,CAAC;IAAC,SAAS,EAAE,iBAAiB,EAAE,CAAA;CAAE,EAC1G,IAAI,EAAE,MAAM,EACZ,MAAM,EAAE,MAAM,GAAG,IAAI,GACpB,iBAAiB,GAAG,IAAI,CAc1B;AAED;;;GAGG;AACH,wBAAgB,YAAY,CAC1B,SAAS,EAAE,iBAAiB,EAC5B,cAAc,EAAE,kBAAkB,GACjC,MAAM,CAiBR;AA2OD,wBAAsB,MAAM,CAC1B,aAAa,EAAE,MAAM,EACrB,OAAO,EAAE,MAAM,EACf,OAAO,GAAE,UAAe,GACvB,OAAO,CAAC,SAAS,CAAC,CAmMpB;AAqCD,MAAM,WAAW,iBAAkB,SAAQ,UAAU;IACnD,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,wBAAsB,UAAU,CAC9B,aAAa,CAAC,EAAE,MAAM,EACtB,OAAO,CAAC,EAAE,iBAAiB,GAC1B,OAAO,CAAC,IAAI,CAAC,CAqIf"}
+{"version":3,"file":"add.d.ts","sourceRoot":"","sources":["../../src/commands/add.ts"],"names":[],"mappings":"AAKA,OAAO,EAGL,KAAK,iBAAiB,EAEtB,KAAK,kBAAkB,EAExB,MAAM,aAAa,CAAC;AAwBrB,MAAM,WAAW,UAAU;IACzB,kDAAkD;IAClD,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,2CAA2C;IAC3C,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,kDAAkD;IAClD,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,oDAAoD;IACpD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,kDAAkD;IAClD,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,MAAM,WAAW,SAAS;IACxB,KAAK,EAAE,OAAO,CAAC;IACf,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,MAAM,EAAE,CAAC;IAChB,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,YAAY,EAAE,MAAM,EAAE,CAAC;IACvB,2DAA2D;IAC3D,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;IACxB,4DAA4D;IAC5D,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,kEAAkE;IAClE,WAAW,CAAC,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;CACjD;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,MAAM,GAAG;IAChD,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,IAAI,EAAE,MAAM,CAAC;CACd,CAsCA;AAED;;GAEG;AACH,wBAAgB,cAAc,CAC5B,QAAQ,EAAE;IAAE,UAAU,EAAE,iBAAiB,EAAE,CAAC;IAAC,MAAM,EAAE,iBAAiB,EAAE,CAAC;IAAC,SAAS,EAAE,iBAAiB,EAAE,CAAA;CAAE,EAC1G,IAAI,EAAE,MAAM,EACZ,MAAM,EAAE,MAAM,GAAG,IAAI,GACpB,iBAAiB,GAAG,IAAI,CAc1B;AAED;;;GAGG;AACH,wBAAgB,YAAY,CAC1B,SAAS,EAAE,iBAAiB,EAC5B,cAAc,EAAE,kBAAkB,GACjC,MAAM,CAiBR;AA2TD,wBAAsB,MAAM,CAC1B,aAAa,EAAE,MAAM,EACrB,OAAO,EAAE,MAAM,EACf,OAAO,GAAE,UAAe,GACvB,OAAO,CAAC,SAAS,CAAC,CAmMpB;AAqCD,MAAM,WAAW,iBAAkB,SAAQ,UAAU;IACnD,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,wBAAsB,UAAU,CAC9B,aAAa,CAAC,EAAE,MAAM,EACtB,OAAO,CAAC,EAAE,iBAAiB,GAC1B,OAAO,CAAC,IAAI,CAAC,CAqIf"}

package/dist/commands/add.js

@@ -10,7 +10,7 @@ import { saveSnapshot, sha256, } from "../utils/snapshot.js";
 import { fuzzySearchNames } from "../utils/fuzzy-search.js";
 import { normalizeThemeCss, getLocalTailwindCssTemplate, getLegacyTailwindCssTemplate, } from "./init.js";
 import { autoInstallDeps } from "../utils/auto-install.js";
-import { resolveLocalDir, getSourceRoot } from "../utils/paths.js";
+import { resolveLocalDir, getSourceRoot, rewriteCompanyUiImports, } from "../utils/paths.js";
 /**
  * Parse a component spec into its registry namespace, type prefix and name.
  *
@@ -107,10 +107,19 @@ async function installOne(component, registry, componentsJson, registryDir, root
     const baseTargetDir = getTargetDir(component, componentsJson);
     const isMultiFile = component.type === "block" || component.type === "template";
     const targetDir = isMultiFile ? path.join(baseTargetDir, name) : baseTargetDir;
-    // Prefix used by component source files. Stripping it preserves the
-    // component's internal subdirectory structure (e.g. `data-table/context.tsx`
-    // stays inside a `data-table/` subfolder in the user's project).
+    // Prefixes used by source files. Stripping them preserves each
+    // component/block's internal subdirectory structure.
+    //
+    // Components: `packages/ui/src/<name>.tsx` and
+    //             `packages/ui/src/<name>/sub.tsx` → strip `packages/ui/src/`
+    //             so compound subdirs (`data-table/`) land as-is under
+    //             `<componentDir>/`.
+    //
+    // Blocks/templates: `apps/docs/src/registry/blocks/<name>/**` → strip
+    //             `apps/docs/src/registry/blocks/<name>/` so nested `parts/`
+    //             subfolders are preserved under `<blocksDir>/<name>/`.
     const UI_PREFIX = "packages/ui/src/";
+    const BLOCK_PREFIX = `apps/docs/src/registry/blocks/${name}/`;
     const copiedFiles = [];
     const skippedFiles = [];
     // Track captured content for the snapshot (only for files that were
@@ -118,19 +127,19 @@ async function installOne(component, registry, componentsJson, registryDir, root
     const capturedFiles = {};
     for (const filePath of component.files) {
         const registryFilePath = path.join(registryDir, filePath);
-        // Destination path relative to `targetDir`:
-        // - Blocks/templates (multi-file) already nest under `<targetDir>/<name>/`,
-        //   so we take the basename of each file (flat within the block dir).
-        // - Components strip the `packages/ui/src/` prefix so compound components
-        //   like `data-table` keep their internal `data-table/` subfolder.
+        // Destination path relative to `targetDir`. The prefix stripping
+        // preserves intra-component directory structure (compound subdirs,
+        // blocks' `parts/` folders, etc.). Flattening to basename here was
+        // the cause of broken `./parts/*` and `../data` imports in templates.
         let destRel;
-        if (isMultiFile) {
-            destRel = path.basename(filePath);
+        if (isMultiFile && filePath.startsWith(BLOCK_PREFIX)) {
+            destRel = filePath.slice(BLOCK_PREFIX.length);
         }
-        else if (filePath.startsWith(UI_PREFIX)) {
+        else if (!isMultiFile && filePath.startsWith(UI_PREFIX)) {
             destRel = filePath.slice(UI_PREFIX.length);
         }
         else {
+            // Fallback for legacy registry entries without the expected prefix.
             destRel = path.basename(filePath);
         }
         const localFilePath = path.join(rootDir, targetDir, destRel);
@@ -163,7 +172,14 @@ async function installOne(component, registry, componentsJson, registryDir, root
                 throw new Error(`File "${path.relative(rootDir, localFilePath)}" already exists. Use --force to overwrite or --skip-existing to ignore (stdin is not a TTY, cannot prompt).`);
             }
         }
-        const content = fs.readFileSync(registryFilePath, "utf-8");
+        let content = fs.readFileSync(registryFilePath, "utf-8");
+        // Blocks and templates reference sibling components via
+        // `from "@company/ui/<name>"`. Rewrite those to point at the user's
+        // locally-installed components using the project's alias prefix, so
+        // the block compiles without `@company/ui` being in node_modules.
+        if (isMultiFile) {
+            content = rewriteCompanyUiImports(content, componentsJson);
+        }
         if (options.dryRun) {
             console.log(chalk.dim(`  [dry-run] would write ${path.relative(rootDir, localFilePath)}`));
         }
@@ -241,6 +257,61 @@ async function installOne(component, registry, componentsJson, registryDir, root
                 fs.copyFileSync(src, dest);
             }
         }
+        // Some data-heavy blocks (data-table-full, template-admin-dashboard,
+        // detail-panel-table, etc.) import from `../../../lib/api-client` and
+        // `../../../lib/api-types`, which resolves to `<sourceRoot>/lib/`.
+        // These are integration points with the user's backend that can't be
+        // shipped as real code — but we can write minimal stubs so the project
+        // compiles out of the box. Stubs are only written if the file doesn't
+        // already exist; if the user has a real implementation it stays intact.
+        const sourceRoot = getSourceRoot(componentsJson);
+        const userLibDir = path.join(rootDir, sourceRoot, "lib");
+        const stubApiTypes = path.join(userLibDir, "api-types.ts");
+        const stubApiClient = path.join(userLibDir, "api-client.ts");
+        if (!fs.existsSync(stubApiTypes) && !options.dryRun) {
+            fs.mkdirSync(userLibDir, { recursive: true });
+            fs.writeFileSync(stubApiTypes, `// Stub generated by inai-react-components. Replace with your real API types.
+// These types satisfy the shape expected by data-heavy blocks
+// (data-table-full, template-admin-dashboard, detail-panel-table, ...).
+// If you already have a typed API layer, delete this file and point the
+// block imports at your own module instead.
+
+export interface PaginatedResponse<T> {
+  data: T[];
+  total: number;
+  page: number;
+  pageSize: number;
+}
+`);
+        }
+        if (!fs.existsSync(stubApiClient) && !options.dryRun) {
+            fs.mkdirSync(userLibDir, { recursive: true });
+            fs.writeFileSync(stubApiClient, `// Stub generated by inai-react-components. Replace with your real API client.
+// Data-heavy blocks call \`fetchPaginated\` and \`downloadCsv\` at runtime.
+// Without a real implementation the app will throw when you interact with
+// those features — wire these up to your backend (fetch, tRPC, REST, etc.).
+
+import type { PaginatedResponse } from "./api-types.js";
+
+export async function fetchPaginated<T>(
+  endpoint: string,
+  _params: Record<string, unknown>
+): Promise<PaginatedResponse<T>> {
+  throw new Error(
+    \`fetchPaginated stub called for "\${endpoint}". Replace <sourceRoot>/lib/api-client.ts with your real API client.\`
+  );
+}
+
+export async function downloadCsv(
+  endpoint: string,
+  _params: Record<string, unknown>
+): Promise<void> {
+  throw new Error(
+    \`downloadCsv stub called for "\${endpoint}". Replace <sourceRoot>/lib/api-client.ts with your real CSV exporter.\`
+  );
+}
+`);
+        }
     }
     // Update components.json (skipped in dry-run).
     if (!options.dryRun) {

package/dist/index.js

@@ -17,7 +17,7 @@ const program = new Command();
 program
     .name("inai-ui")
     .description("CLI for InAI UI component library")
-    .version("1.5.0");
+    .version("1.5.1");
 program
     .command("init [repo-url]")
     .description("Initialize InAI UI in your project. Optionally pass a Git repo URL to fetch components remotely.")

package/dist/utils/paths.d.ts

@@ -23,4 +23,38 @@ export declare function resolveLocalDir(alias: string, componentsJson: Pick<Comp
  * `components.json` files without a `layout` field.
  */
 export declare function getSourceRoot(componentsJson: Pick<ComponentsJsonFile, "layout">): string;
+/**
+ * Compute the import-alias form of `aliases.components` for use when
+ * rewriting `@company/ui/*` imports in block and template files.
+ *
+ * Rules:
+ * 1. If the stored alias already starts with a known alias prefix
+ *    (`@/`, `~/`, `$/`), return it as-is. Block imports written with
+ *    this prefix will resolve through the user's `tsconfig.json` paths.
+ * 2. Otherwise it's a raw filesystem path (e.g. `app/components/ui`).
+ *    Strip `layout.sourceRoot` and prepend `layout.aliasPrefix` to
+ *    produce an alias form (e.g. `~/components/ui`). This matches what
+ *    the user's tsconfig `paths` maps, so the rewritten imports resolve
+ *    without needing the user to configure anything extra.
+ * 3. If the stored alias doesn't match the layout's sourceRoot, return
+ *    it as-is (the user may have chosen a non-standard location and we
+ *    assume their tsconfig handles it).
+ */
+export declare function getComponentsImportAlias(componentsJson: Pick<ComponentsJsonFile, "aliases" | "layout">): string;
+/**
+ * Rewrite `@company/ui/*` imports in a block or template file to point
+ * at the user's locally-installed components. Without this, block files
+ * that `import { Button } from "@company/ui/button"` would fail at
+ * compile time because `@company/ui` doesn't exist in the consumer project.
+ *
+ * Transformations:
+ * - `from "@company/ui/data-table"`       → `from "~/components/ui/data-table"`
+ * - `from "@company/ui/data-table/sub"`   → `from "~/components/ui/data-table/sub"`
+ * - `from "@company/ui/lib/animations"`   → `from "~/components/ui/lib/animations"`
+ * - `from "@company/ui"` (bare barrel)    → no rewrite (logged as unsupported)
+ *
+ * The alias prefix (`~/`, `@/`, etc.) is derived from the project layout
+ * so it matches the user's `tsconfig.json` paths.
+ */
+export declare function rewriteCompanyUiImports(source: string, componentsJson: Pick<ComponentsJsonFile, "aliases" | "layout">): string;
 //# sourceMappingURL=paths.d.ts.map

package/dist/utils/paths.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"paths.d.ts","sourceRoot":"","sources":["../../src/utils/paths.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAIhE;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,eAAe,CAC7B,KAAK,EAAE,MAAM,EACb,cAAc,EAAE,IAAI,CAAC,kBAAkB,EAAE,QAAQ,CAAC,GACjD,MAAM,CAQR;AAED;;;;GAIG;AACH,wBAAgB,aAAa,CAC3B,cAAc,EAAE,IAAI,CAAC,kBAAkB,EAAE,QAAQ,CAAC,GACjD,MAAM,CAER"}
+{"version":3,"file":"paths.d.ts","sourceRoot":"","sources":["../../src/utils/paths.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAIhE;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,eAAe,CAC7B,KAAK,EAAE,MAAM,EACb,cAAc,EAAE,IAAI,CAAC,kBAAkB,EAAE,QAAQ,CAAC,GACjD,MAAM,CAQR;AAED;;;;GAIG;AACH,wBAAgB,aAAa,CAC3B,cAAc,EAAE,IAAI,CAAC,kBAAkB,EAAE,QAAQ,CAAC,GACjD,MAAM,CAER;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,wBAAwB,CACtC,cAAc,EAAE,IAAI,CAAC,kBAAkB,EAAE,SAAS,GAAG,QAAQ,CAAC,GAC7D,MAAM,CAYR;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,uBAAuB,CACrC,MAAM,EAAE,MAAM,EACd,cAAc,EAAE,IAAI,CAAC,kBAAkB,EAAE,SAAS,GAAG,QAAQ,CAAC,GAC7D,MAAM,CAaR"}

package/dist/utils/paths.js

@@ -33,3 +33,57 @@ export function resolveLocalDir(alias, componentsJson) {
 export function getSourceRoot(componentsJson) {
     return componentsJson.layout?.sourceRoot ?? "src";
 }
+/**
+ * Compute the import-alias form of `aliases.components` for use when
+ * rewriting `@company/ui/*` imports in block and template files.
+ *
+ * Rules:
+ * 1. If the stored alias already starts with a known alias prefix
+ *    (`@/`, `~/`, `$/`), return it as-is. Block imports written with
+ *    this prefix will resolve through the user's `tsconfig.json` paths.
+ * 2. Otherwise it's a raw filesystem path (e.g. `app/components/ui`).
+ *    Strip `layout.sourceRoot` and prepend `layout.aliasPrefix` to
+ *    produce an alias form (e.g. `~/components/ui`). This matches what
+ *    the user's tsconfig `paths` maps, so the rewritten imports resolve
+ *    without needing the user to configure anything extra.
+ * 3. If the stored alias doesn't match the layout's sourceRoot, return
+ *    it as-is (the user may have chosen a non-standard location and we
+ *    assume their tsconfig handles it).
+ */
+export function getComponentsImportAlias(componentsJson) {
+    const raw = componentsJson.aliases.components;
+    // Already in alias form
+    for (const prefix of ["@/", "~/", "$/"]) {
+        if (raw.startsWith(prefix))
+            return raw;
+    }
+    // Raw path — convert to alias form via layout
+    const layout = componentsJson.layout;
+    if (layout && raw.startsWith(`${layout.sourceRoot}/`)) {
+        return `${layout.aliasPrefix}${raw.slice(layout.sourceRoot.length + 1)}`;
+    }
+    return raw;
+}
+/**
+ * Rewrite `@company/ui/*` imports in a block or template file to point
+ * at the user's locally-installed components. Without this, block files
+ * that `import { Button } from "@company/ui/button"` would fail at
+ * compile time because `@company/ui` doesn't exist in the consumer project.
+ *
+ * Transformations:
+ * - `from "@company/ui/data-table"`       → `from "~/components/ui/data-table"`
+ * - `from "@company/ui/data-table/sub"`   → `from "~/components/ui/data-table/sub"`
+ * - `from "@company/ui/lib/animations"`   → `from "~/components/ui/lib/animations"`
+ * - `from "@company/ui"` (bare barrel)    → no rewrite (logged as unsupported)
+ *
+ * The alias prefix (`~/`, `@/`, etc.) is derived from the project layout
+ * so it matches the user's `tsconfig.json` paths.
+ */
+export function rewriteCompanyUiImports(source, componentsJson) {
+    const compImport = getComponentsImportAlias(componentsJson);
+    // Handle subpath imports (@company/ui/xxx)
+    let result = source.replace(/(from\s+["'])@company\/ui\/([^"']+)(["'])/g, (_, pre, sub, post) => `${pre}${compImport}/${sub}${post}`);
+    // Handle side-effect imports like `import "@company/ui/xxx"`
+    result = result.replace(/(import\s+["'])@company\/ui\/([^"']+)(["'])/g, (_, pre, sub, post) => `${pre}${compImport}/${sub}${post}`);
+    return result;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "inai-react-components",
-  "version": "1.5.0",
+  "version": "1.5.1",
   "description": "CLI for InAI UI component library — install components from a private registry into your React project",
   "private": false,
   "type": "module",