frakment 0.1.0 → 0.2.0

package/bin/index.js

@@ -25,6 +25,7 @@ program
 Examples:
   ${chalk.dim("$ frakment init")}
   ${chalk.dim("$ frakment add button")}
+  ${chalk.dim("$ frakment add button bubble")}
   ${chalk.dim("$ frakment list")}
 `
   );
@@ -35,8 +36,8 @@ program
   .action(init);
 
 program
-  .command("add <component>")
-  .description("Add a component from the frakment registry")
+  .command("add <components...>")
+  .description("Add one or more components from the frakment registry")
   .option(
     "--dry-run",
     "Show planned file and dependency changes without writing"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "frakment",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "CLI and design system for the frakment component registry",
   "keywords": [
     "components",

package/src/commands/add.js

@@ -16,6 +16,29 @@ const DEPENDENCY_PATTERN =
   /^(?:@[a-z0-9][a-z0-9._-]*\/)?[a-z0-9][a-z0-9._-]*(?:@[0-9A-Za-z*~^<>=|.+_-]+)?$/u;
 const MAX_REGISTRY_PAYLOAD_BYTES = 10 * 1024 * 1024;
 
+const DEFAULT_ALIASES = {
+  components: "@/components",
+  ui: "@/components/ui",
+  utils: "@/lib/utils",
+};
+
+const normalizeAliases = (input) => {
+  const aliases = input ?? {};
+  const components = aliases.components ?? DEFAULT_ALIASES.components;
+  const ui = aliases.ui ?? `${components}/ui`;
+  const utils = aliases.utils ?? DEFAULT_ALIASES.utils;
+  return { components, ui, utils };
+};
+
+export const rewriteImports = (content, aliases) => {
+  const a = normalizeAliases(aliases);
+  let out = content;
+  out = out.replaceAll("@/components/ui/", `${a.ui}/`);
+  out = out.replaceAll("@/components/", `${a.components}/`);
+  out = out.replace(/@\/lib\/utils\b/g, a.utils);
+  return out;
+};
+
 const isRecord = (value) =>
   typeof value === "object" && value !== null && !Array.isArray(value);
 
@@ -194,7 +217,7 @@ export async function assertSafePath(cwd, relativePath) {
   return target;
 }
 
-async function writeFileSafely(file, cwd, options) {
+async function writeFileSafely(file, cwd, options, aliases) {
   const targetPath = await assertSafePath(cwd, file.path);
   if (existsSync(targetPath) && !options.overwrite) {
     const { overwrite } = await prompts({
@@ -212,12 +235,21 @@ async function writeFileSafely(file, cwd, options) {
   const output =
     file.encoding === "base64"
       ? Buffer.from(file.content, "base64")
-      : file.content.replaceAll("\r\n", "\n");
+      : rewriteImports(file.content, aliases).replaceAll("\r\n", "\n");
   await writeFile(targetPath, output);
   return file.path;
 }
 
-export async function add(componentName, options) {
+export async function add(componentNamesInput, options) {
+  const componentNames = Array.isArray(componentNamesInput)
+    ? [...new Set(componentNamesInput)]
+    : [componentNamesInput];
+  if (componentNames.length === 0) {
+    logger.error(
+      `${chalk.red("Error:")} At least one component name is required.`
+    );
+    process.exit(1);
+  }
   let cwd;
   const preflight = ora("Preflight checks").start();
   try {
@@ -237,7 +269,9 @@ export async function add(componentName, options) {
   let config;
   let registryUrl;
   try {
-    assertComponentName(componentName);
+    for (const name of componentNames) {
+      assertComponentName(name);
+    }
     const configRaw = await readFile(configPath, "utf-8");
     config = JSON.parse(configRaw.replace(/^\uFEFF/u, ""));
     registryUrl = getRegistryUrl(options.registry ?? config.registry);
@@ -249,7 +283,8 @@ export async function add(componentName, options) {
   }
 
   const registrySpinner = ora("Checking registry").start();
-  const queue = [componentName];
+  const roots = new Set(componentNames);
+  const queue = [...roots];
   const fetched = new Map();
   const npmDeps = new Map();
 
@@ -277,6 +312,7 @@ export async function add(componentName, options) {
     }
   }
   registrySpinner.succeed("Checking registry.");
+  const aliases = normalizeAliases(config.aliases);
   const isSrcLayout = config.tailwind?.css?.startsWith("src/") ?? false;
   const resolveTargetPath = (p) => {
     if (!isSrcLayout) {
@@ -288,8 +324,8 @@ export async function add(componentName, options) {
     return `src/${p}`;
   };
 
-  const order = [...fetched.keys()].filter((n) => n !== componentName);
-  order.push(componentName);
+  const order = [...fetched.keys()].filter((n) => !roots.has(n));
+  order.push(...roots);
   const written = [];
 
   const getMissingDependencies = async () => {
@@ -320,7 +356,7 @@ export async function add(componentName, options) {
   for (const name of order) {
     for (const file of fetched.get(name).files ?? []) {
       const targetFile = { ...file, path: resolveTargetPath(file.path) };
-      const result = await writeFileSafely(targetFile, cwd, options);
+      const result = await writeFileSafely(targetFile, cwd, options, aliases);
       if (result) {
         written.push(result);
       }

package/src/commands/add.test.mjs

@@ -1,6 +1,10 @@
 import { describe, expect, it } from "vitest";
 
-import { assertSafePath, validateRegistryPayload } from "./add.js";
+import {
+  assertSafePath,
+  rewriteImports,
+  validateRegistryPayload,
+} from "./add.js";
 
 const unsignedPayload = {
   dependencies: ["@frakment/react@^0.0.3", "motion@^14.10.0"],
@@ -87,3 +91,41 @@ describe("registry target paths", () => {
     ).rejects.toThrow("Absolute path rejected");
   });
 });
+
+describe("rewriteImports", () => {
+  const src = `import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+import { Card } from "@/components/card";
+export { cn, Button, Card };
+`;
+
+  it("is a no-op with default aliases", () => {
+    expect(rewriteImports(src, undefined)).toBe(src);
+    expect(rewriteImports(src, {})).toBe(src);
+  });
+
+  it("rewrites ui, components, and utils prefixes", () => {
+    const out = rewriteImports(src, {
+      components: "~/components",
+      ui: "~/ui",
+      utils: "~/lib/cn",
+    });
+    expect(out).toContain('from "~/ui/button"');
+    expect(out).toContain('from "~/lib/cn"');
+    expect(out).toContain('from "~/components/card"');
+    expect(out).not.toContain("@/components/ui/");
+    expect(out).not.toContain("@/lib/utils");
+  });
+
+  it("derives ui from components when ui is omitted", () => {
+    const out = rewriteImports(src, { components: "~/components" });
+    expect(out).toContain('from "~/components/ui/button"');
+    expect(out).toContain('from "~/components/card"');
+  });
+
+  it("does not rewrite unrelated @/lib paths", () => {
+    const input = 'import { springSoft } from "@/lib/animation";\n';
+    const out = rewriteImports(input, { utils: "~/lib/cn" });
+    expect(out).toBe(input);
+  });
+});

package/src/commands/init.js

@@ -135,28 +135,28 @@ export function cn(...inputs: ClassValue[]) {
     logger.log("  - lib/utils.ts");
   }
 
-  if (!existsSync(path.join(cwd, "lib/animation.ts"))) {
+  if (existsSync(path.join(cwd, "lib/animation.ts"))) {
+    const existing = await readFile(
+      path.join(cwd, "lib/animation.ts"),
+      "utf-8"
+    );
+    if (!existing.includes("parseAnimation")) {
+      logger.warn(
+        "lib/animation.ts is outdated (missing animation DSL parser). Delete it and re-run `frakment init`."
+      );
+    }
+  } else {
     const s = ora("Creating lib/animation.ts").start();
     await mkdir(path.join(cwd, "lib"), { recursive: true });
-    await writeFile(
-      path.join(cwd, "lib/animation.ts"),
-      `export const springSoft = { type: "spring", stiffness: 200, damping: 30 } as const
-
-export const easeInOut = [0.4, 0, 0.2, 1] as const
-export const easeInOutQuad = [0.45, 0, 0.55, 1] as const
-export const easeOutExpo = [0.16, 1, 0.3, 1] as const
-export const easeSmoothOut = [0.32, 0.72, 0, 1] as const
-
-export const durationFast = 0.2
-export const durationNormal = 0.3
-export const durationSlow = 0.45
-
-export const delayTight = 0.02
-`
+    const animation = await readFile(
+      path.join(TEMPLATES_DIR, "lib/animation.ts"),
+      "utf-8"
     );
+    await writeFile(path.join(cwd, "lib/animation.ts"), animation);
     s.succeed("Created 1 file:");
     logger.log("  - lib/animation.ts");
   }
+
   const pkgPath = path.join(cwd, "package.json");
   const pkgRaw = await readFile(pkgPath, "utf-8");
   const pkg = JSON.parse(pkgRaw.replace(/^\uFEFF/u, ""));

package/templates/lib/animation.ts

@@ -1,12 +1,243 @@
-export const SPRING_SMOOTH = {
+// Design tokens
+export const springSoft = {
   damping: 30,
   stiffness: 200,
   type: "spring",
 } as const;
 
-export const EASE_OUT = [0.16, 1, 0.3, 1] as const;
-export const EASE_SMOOTH = [0.32, 0.72, 0, 1] as const;
-export const EASE_IN_OUT = [0.4, 0, 0.2, 1] as const;
+export const easeInOut = [0.4, 0, 0.2, 1] as const;
+export const easeInOutQuad = [0.45, 0, 0.55, 1] as const;
+export const easeOutExpo = [0.16, 1, 0.3, 1] as const;
+export const easeSmoothOut = [0.32, 0.72, 0, 1] as const;
 
-export const DURATION_FAST = 0.2;
-export const DURATION_SMOOTH = 0.45;
+export const durationFast = 0.2;
+export const durationNormal = 0.3;
+export const durationSlow = 0.45;
+
+export const delayTight = 0.02;
+
+// Animation DSL parser
+export interface AnimationKeyframes {
+  times?: number[];
+  values: number[];
+}
+
+export interface AnimationConfig {
+  keyframes?: AnimationKeyframes;
+  transition: Record<string, unknown>;
+}
+
+const NAMED_EASINGS: Record<string, readonly number[]> = {
+  easeInOut,
+  easeInOutQuad,
+  easeOutExpo,
+  easeSmoothOut,
+};
+
+const MOTION_NATIVE_EASINGS = new Set([
+  "linear",
+  "circIn",
+  "circOut",
+  "circInOut",
+  "backIn",
+  "backOut",
+  "backInOut",
+  "anticipate",
+]);
+
+const DURATION_RE = /^(\d+(?:\.\d+)?)(ms|s)?$/;
+const DELAY_RE = /^delay\(([^)]+)\)$/;
+const REPEAT_RE = /^repeat\(([^)]+)\)$/;
+
+function warn(message: string): void {
+  if (typeof console !== "undefined" && typeof console.warn === "function") {
+    console.warn(`[motion-dsl] ${message}`);
+  }
+}
+
+function toSeconds(raw: string): number | null {
+  const m = raw.trim().match(DURATION_RE);
+  if (!m) {
+    return null;
+  }
+  const n = Number.parseFloat(m[1]);
+  if (Number.isNaN(n)) {
+    return null;
+  }
+  return m[2] === "ms" ? n / 1000 : n;
+}
+
+function parseNumbers(raw: string): number[] {
+  return raw.split(",").map((s) => Number.parseFloat(s.trim()));
+}
+
+function tokenize(input: string): string[] {
+  const out: string[] = [];
+  let depth = 0;
+  let cur = "";
+  for (const ch of input) {
+    if (ch === "(" || ch === "[") {
+      depth++;
+    }
+    if (ch === ")" || ch === "]") {
+      depth--;
+    }
+    if (/\s/.test(ch) && depth === 0) {
+      if (cur) {
+        out.push(cur);
+      }
+      cur = "";
+    } else {
+      cur += ch;
+    }
+  }
+  if (cur) {
+    out.push(cur);
+  }
+  return out;
+}
+
+export function parseAnimation(input?: false | string): AnimationConfig | null {
+  if (input === undefined || input === false) {
+    return null;
+  }
+  if (typeof input !== "string") {
+    return null;
+  }
+
+  const trimmed = input.trim();
+  if (!trimmed) {
+    return null;
+  }
+
+  const tokens = tokenize(trimmed);
+  if (tokens.length === 0) {
+    return null;
+  }
+
+  const head = tokens[0];
+  let config: AnimationConfig;
+
+  if (head.startsWith("spring(")) {
+    const args = parseNumbers(head.slice(7, -1));
+    if (args.length !== 2 || args.some(Number.isNaN)) {
+      warn(`invalid spring: "${head}" - expected spring(stiffness, damping)`);
+      return null;
+    }
+    config = {
+      transition: { damping: args[1], stiffness: args[0], type: "spring" },
+    };
+  } else if (head.startsWith("inertia(")) {
+    const args = parseNumbers(head.slice(8, -1));
+    if (args.length !== 2 || args.some(Number.isNaN)) {
+      warn(
+        `invalid inertia: "${head}" - expected inertia(power, timeConstant)`
+      );
+      return null;
+    }
+    config = {
+      transition: { power: args[0], timeConstant: args[1], type: "inertia" },
+    };
+  } else if (head.startsWith("cubic-bezier(")) {
+    const args = parseNumbers(head.slice(13, -1));
+    if (args.length !== 4 || args.some(Number.isNaN)) {
+      warn(`invalid cubic-bezier: "${head}" - expected 4 numbers`);
+      return null;
+    }
+    config = {
+      transition: {
+        ease: args as [number, number, number, number],
+        type: "tween",
+      },
+    };
+  } else if (head.startsWith("steps(")) {
+    const args = parseNumbers(head.slice(6, -1));
+    if (args.length !== 1 || Number.isNaN(args[0])) {
+      warn(`invalid steps: "${head}" - expected steps(count)`);
+      return null;
+    }
+    config = { transition: { ease: "linear", type: "tween" } };
+  } else if (head.startsWith("keyframes(")) {
+    const inner = head.slice(10, -1);
+    const arrays = inner.match(/\[[^\]]*\]/g);
+    if (!arrays || arrays.length === 0) {
+      warn(
+        `invalid keyframes: "${head}" - expected keyframes([values], [times]?)`
+      );
+      return null;
+    }
+    const values = arrays[0]
+      .slice(1, -1)
+      .split(",")
+      .map((s) => Number.parseFloat(s.trim()));
+
+    if (values.some(Number.isNaN)) {
+      warn(`invalid keyframes values: "${arrays[0]}"`);
+      return null;
+    }
+    const times = arrays[1]
+      ? arrays[1]
+          .slice(1, -1)
+          .split(",")
+          .map((s) => Number.parseFloat(s.trim()))
+      : undefined;
+    if (times?.some(Number.isNaN)) {
+      warn(`invalid keyframes times: "${arrays[1]}"`);
+      return null;
+    }
+    config = { keyframes: { times, values }, transition: { type: "tween" } };
+  } else if (head in NAMED_EASINGS) {
+    config = {
+      transition: {
+        ease: [...NAMED_EASINGS[head]] as [number, number, number, number],
+        type: "tween",
+      },
+    };
+  } else if (MOTION_NATIVE_EASINGS.has(head)) {
+    config = { transition: { ease: head, type: "tween" } };
+  } else {
+    warn(`unknown easing or syntax: "${head}"`);
+    return null;
+  }
+
+  const isTween = config.transition.type === "tween";
+
+  for (const token of tokens.slice(1)) {
+    const dur = toSeconds(token);
+    if (dur !== null) {
+      if (isTween) {
+        (config.transition as { duration?: number }).duration = dur;
+      }
+      continue;
+    }
+    const delayMatch = token.match(DELAY_RE);
+    if (delayMatch) {
+      const d = toSeconds(delayMatch[1]);
+      if (d === null) {
+        warn(`invalid delay: "${token}"`);
+        continue;
+      }
+      (config.transition as { delay?: number }).delay = d;
+      continue;
+    }
+    const repeatMatch = token.match(REPEAT_RE);
+    if (repeatMatch) {
+      const v = repeatMatch[1].trim();
+      if (v === "infinite") {
+        (config.transition as { repeat?: number }).repeat =
+          Number.POSITIVE_INFINITY;
+      } else {
+        const n = Number.parseInt(v, 10);
+        if (Number.isNaN(n) || n < 0) {
+          warn(`invalid repeat: "${token}"`);
+          continue;
+        }
+        (config.transition as { repeat?: number }).repeat = n;
+      }
+      continue;
+    }
+    warn(`unexpected token: "${token}"`);
+  }
+
+  return config;
+}