@tavus/cvi-ui 0.0.1-beta.1

package/src/preflights/preflight-add.ts

@@ -0,0 +1,56 @@
+import path from 'node:path';
+import { addOptionsSchema } from '@/src/cli/add';
+import * as ERRORS from '@/src/constants/errors';
+import { getConfig } from '@/src/utils/get-config';
+import { highlighter } from '@/src/components/highlighter';
+import { logger } from '@/src/components/logger';
+import fs from 'fs-extra';
+import { z } from 'zod';
+import { CONFIG_NAME } from '../constants/config';
+
+export async function preFlightAdd(options: z.infer<typeof addOptionsSchema>) {
+  const errors: Record<string, boolean> = {};
+  // Ensure target directory exists.
+  // Check for empty project. if no package.json exists, the project is empty.
+  if (
+    !fs.existsSync(options.cwd) ||
+    !fs.existsSync(path.resolve(options.cwd, 'package.json'))
+  ) {
+    errors[ERRORS.MISSING_DIR_OR_EMPTY_PROJECT] = true;
+    return {
+      errors,
+      config: null,
+    };
+  }
+
+  // Check for existing cvi-components.json file.
+  if (!fs.existsSync(path.resolve(options.cwd, CONFIG_NAME))) {
+    errors[ERRORS.MISSING_CONFIG] = true;
+    return {
+      errors,
+      config: null,
+    };
+  }
+
+  try {
+    const config = await getConfig(options.cwd);
+
+    return {
+      errors,
+      config: config!,
+    };
+  } catch {
+    logger.break();
+    logger.error(
+      `An invalid ${highlighter.info(
+        CONFIG_NAME
+      )} file was found at ${highlighter.info(
+        options.cwd
+      )}.\nBefore you can add components, you must create a valid ${highlighter.info(
+        CONFIG_NAME
+      )} file by running the ${highlighter.info('init')} command.`
+    );
+    logger.break();
+    process.exit(1);
+  }
+}

package/src/preflights/preflight-init.ts

@@ -0,0 +1,77 @@
+import path from 'node:path';
+import { initOptionsSchema } from '@/src/cli/init';
+import * as ERRORS from '@/src/constants/errors';
+import { getProjectInfo } from '@/src/utils/get-project-info';
+import { highlighter } from '@/src/components/highlighter';
+import { logger } from '@/src/components/logger';
+import { spinner } from '@/src/components/spinner';
+import fs from 'fs-extra';
+import { z } from 'zod';
+import { CONFIG_NAME } from '@/src/constants/config';
+
+export async function preFlightInit(options: z.infer<typeof initOptionsSchema>) {
+	const errors: Record<string, boolean> = {};
+
+	// Ensure target directory exists.
+	// Check for empty project. We assume if no package.json exists, the project is empty.
+	if (!fs.existsSync(options.cwd) || !fs.existsSync(path.resolve(options.cwd, 'package.json'))) {
+		errors[ERRORS.MISSING_DIR_OR_EMPTY_PROJECT] = true;
+		return {
+			errors,
+			projectInfo: null,
+		};
+	}
+
+	const projectSpinner = spinner(`Preflight checks.`, {
+		silent: options.silent,
+	}).start();
+
+	if (fs.existsSync(path.resolve(options.cwd, CONFIG_NAME))) {
+		projectSpinner?.fail();
+		logger.break();
+		logger.error(
+			`A ${highlighter.info(CONFIG_NAME)} file already exists at ${highlighter.info(
+				options.cwd
+			)}.\nTo start over, remove the ${highlighter.info(
+				CONFIG_NAME
+			)} file and run ${highlighter.info('init')} again.`
+		);
+		logger.break();
+		process.exit(1);
+	}
+
+	projectSpinner?.succeed();
+
+	const frameworkSpinner = spinner(`Verifying framework.`, {
+		silent: options.silent,
+	}).start();
+	const projectInfo = await getProjectInfo(options.cwd);
+	if (!projectInfo || projectInfo?.framework.name === 'manual') {
+		errors[ERRORS.UNSUPPORTED_FRAMEWORK] = true;
+		frameworkSpinner?.fail();
+		logger.break();
+
+		logger.error(
+			`We could not detect a supported framework at ${highlighter.info(options.cwd)}.\n` +
+				`Visit ${highlighter.info(
+					'https://github.com/Tavus-Engineering/tavus-cvi'
+				)} to manually configure your project.\nOnce configured, you can use the cli to add components.`
+		);
+
+		logger.break();
+		process.exit(1);
+	}
+	frameworkSpinner?.succeed(
+		`Verifying framework. Found ${highlighter.info(projectInfo.framework.label)}.`
+	);
+
+	if (Object.keys(errors).length > 0) {
+		logger.break();
+		process.exit(1);
+	}
+
+	return {
+		errors,
+		projectInfo,
+	};
+}

package/src/utils/add-components.ts

@@ -0,0 +1,52 @@
+import { configSchema, type Config } from '@/src/utils/get-config';
+import { handleError } from '@/src/utils/handle-error';
+import { spinner } from '@/src/components/spinner';
+import { updateDependencies } from '@/src/utils/update-dependencies';
+import { updateFiles } from '@/src/utils/update-files';
+import { resolveComponentsTree } from '@/src/utils/resolve-components-tree';
+import { z } from 'zod';
+
+export async function addComponents(
+	components: string[],
+	config: Config,
+	options: {
+		overwrite?: boolean;
+		silent?: boolean;
+	}
+) {
+	options = {
+		overwrite: false,
+		silent: false,
+		...options,
+	};
+
+	return await addProjectComponents(components, config, options);
+}
+
+async function addProjectComponents(
+	components: string[],
+	config: z.infer<typeof configSchema>,
+	options: {
+		overwrite?: boolean;
+		silent?: boolean;
+	}
+) {
+	const registrySpinner = spinner(`Checking components.`, {
+		silent: options.silent,
+	})?.start();
+	const tree = resolveComponentsTree(components);
+	if (!tree) {
+		registrySpinner?.fail();
+		return handleError(new Error('Failed to fetch components.'));
+	}
+	registrySpinner?.succeed();
+
+	await updateDependencies(tree.dependencies, config, {
+		silent: options.silent,
+	});
+
+	await updateFiles(tree.componentsDependencies, config, {
+		overwrite: options.overwrite,
+		silent: options.silent,
+	});
+}

package/src/utils/get-config.ts

@@ -0,0 +1,60 @@
+import { highlighter } from '@/src/components/highlighter';
+import { cosmiconfig } from 'cosmiconfig';
+import { z } from 'zod';
+import { CONFIG_NAME } from '@/src/constants/config';
+
+const explorer = cosmiconfig('components', {
+	searchPlaces: [CONFIG_NAME],
+});
+
+export const rawConfigSchema = z
+	.object({
+		tsx: z.coerce.boolean().default(true),
+	})
+	.strict();
+
+export type RawConfig = z.infer<typeof rawConfigSchema>;
+
+export const configSchema = rawConfigSchema.extend({
+	resolvedPaths: z.object({
+		cwd: z.string(),
+		components: z.string(),
+	}),
+});
+
+export type Config = z.infer<typeof configSchema>;
+
+export async function getConfig(cwd: string) {
+	const config = await getRawConfig(cwd);
+
+	if (!config) {
+		return null;
+	}
+
+	return await resolveConfigPaths(cwd, config);
+}
+
+export async function resolveConfigPaths(cwd: string, config: RawConfig) {
+	return configSchema.parse({
+		...config,
+		resolvedPaths: {
+			cwd,
+			// TODO: make this configurable
+			components: '/src/components',
+		},
+	});
+}
+
+export async function getRawConfig(cwd: string): Promise<RawConfig | null> {
+	try {
+		const configResult = await explorer.search(cwd);
+		if (!configResult) {
+			return null;
+		}
+
+		return rawConfigSchema.parse(configResult.config);
+	} catch {
+		const componentPath = `${cwd}/${CONFIG_NAME}`;
+		throw new Error(`Invalid configuration found in ${highlighter.info(componentPath)}.`);
+	}
+}

package/src/utils/get-package-info.ts

@@ -0,0 +1,14 @@
+import path from "node:path"
+import fs from "fs-extra"
+import { type PackageJson } from "type-fest"
+
+export function getPackageInfo(
+  cwd: string = "",
+  shouldThrow: boolean = true
+): PackageJson | null {
+  const packageJsonPath = path.join(cwd, "package.json")
+
+  return fs.readJSONSync(packageJsonPath, {
+    throws: shouldThrow,
+  }) as PackageJson
+}

package/src/utils/get-package-manager.ts

@@ -0,0 +1,45 @@
+import { detect } from "@antfu/ni"
+
+export async function getPackageManager(
+  targetDir: string,
+  { withFallback }: { withFallback?: boolean } = {
+    withFallback: false,
+  }
+): Promise<"yarn" | "pnpm" | "bun" | "npm" | "deno"> {
+  const packageManager = await detect({ programmatic: true, cwd: targetDir })
+
+  if (packageManager === "yarn@berry") return "yarn"
+  if (packageManager === "pnpm@6") return "pnpm"
+  if (packageManager === "bun") return "bun"
+  if (packageManager === "deno") return "deno"
+  if (!withFallback) {
+    return packageManager ?? "npm"
+  }
+
+  // Fallback to user agent if not detected.
+  const userAgent = process.env.npm_config_user_agent || ""
+
+  if (userAgent.startsWith("yarn")) {
+    return "yarn"
+  }
+
+  if (userAgent.startsWith("pnpm")) {
+    return "pnpm"
+  }
+
+  if (userAgent.startsWith("bun")) {
+    return "bun"
+  }
+
+  return "npm"
+}
+
+export async function getPackageRunner(cwd: string) {
+  const packageManager = await getPackageManager(cwd)
+
+  if (packageManager === "pnpm") return "pnpm dlx"
+
+  if (packageManager === "bun") return "bunx"
+
+  return "npx"
+}

package/src/utils/get-project-info.ts

@@ -0,0 +1,144 @@
+import path from 'node:path';
+import { FRAMEWORKS, Framework } from '@/src/constants/frameworks';
+import {
+  Config,
+  RawConfig,
+  getConfig,
+  resolveConfigPaths,
+} from '@/src/utils/get-config';
+import { getPackageInfo } from '@/src/utils/get-package-info';
+import fg from 'fast-glob';
+import fs from 'fs-extra';
+
+export type ProjectInfo = {
+  framework: Framework;
+  isTsx: boolean;
+  isSrcDir: boolean;
+};
+
+const PROJECT_SHARED_IGNORE = [
+  '**/node_modules/**',
+  '.next',
+  'public',
+  'dist',
+  'build',
+];
+
+export async function getProjectInfo(cwd: string): Promise<ProjectInfo | null> {
+  const [configFiles, isSrcDir, isTsx, packageJson] = await Promise.all([
+    fg.glob(
+      '**/{next,vite,astro,app}.config.*|gatsby-config.*|composer.json|react-router.config.*',
+      {
+        cwd,
+        deep: 3,
+        ignore: PROJECT_SHARED_IGNORE,
+      }
+    ),
+    fs.pathExists(path.resolve(cwd, 'src')),
+    isTypeScriptProject(cwd),
+    getPackageInfo(cwd, false),
+  ]);
+
+  const isUsingAppDir = await fs.pathExists(
+    path.resolve(cwd, `${isSrcDir ? 'src/' : ''}app`)
+  );
+
+  const type: ProjectInfo = {
+    framework: FRAMEWORKS['manual'],
+    isTsx,
+    isSrcDir,
+  };
+
+  // Next.js.
+  if (configFiles.find((file) => file.startsWith('next.config.'))?.length) {
+    type.framework = isUsingAppDir
+      ? FRAMEWORKS['next-app']
+      : FRAMEWORKS['next-pages'];
+    return type;
+  }
+
+  // Astro.
+  if (configFiles.find((file) => file.startsWith('astro.config.'))?.length) {
+    type.framework = FRAMEWORKS['astro'];
+    return type;
+  }
+
+  // Gatsby.
+  if (configFiles.find((file) => file.startsWith('gatsby-config.'))?.length) {
+    type.framework = FRAMEWORKS['gatsby'];
+    return type;
+  }
+
+  // Remix.
+  if (
+    Object.keys(packageJson?.dependencies ?? {}).find((dep) =>
+      dep.startsWith('@remix-run/')
+    )
+  ) {
+    type.framework = FRAMEWORKS['remix'];
+    return type;
+  }
+
+  // TanStack Start.
+  if (
+    configFiles.find((file) => file.startsWith('app.config.'))?.length &&
+    [
+      ...Object.keys(packageJson?.dependencies ?? {}),
+      ...Object.keys(packageJson?.devDependencies ?? {}),
+    ].find((dep) => dep.startsWith('@tanstack/start'))
+  ) {
+    type.framework = FRAMEWORKS['tanstack-start'];
+    return type;
+  }
+
+  // React Router.
+  if (
+    configFiles.find((file) => file.startsWith('react-router.config.'))?.length
+  ) {
+    type.framework = FRAMEWORKS['react-router'];
+    return type;
+  }
+
+  // Vite.
+  // Some Remix templates also have a vite.config.* file.
+  // We'll assume that it got caught by the Remix check above.
+  if (configFiles.find((file) => file.startsWith('vite.config.'))?.length) {
+    type.framework = FRAMEWORKS['vite'];
+    return type;
+  }
+
+  return type;
+}
+
+export async function isTypeScriptProject(cwd: string) {
+  const files = await fg.glob('tsconfig.*', {
+    cwd,
+    deep: 1,
+    ignore: PROJECT_SHARED_IGNORE,
+  });
+
+  return files.length > 0;
+}
+
+export async function getProjectConfig(
+  cwd: string,
+  defaultProjectInfo: ProjectInfo | null = null
+): Promise<Config | null> {
+  // Check for existing component config.
+  const [existingConfig, projectInfo] = await Promise.all([
+    getConfig(cwd),
+    !defaultProjectInfo
+      ? getProjectInfo(cwd)
+      : Promise.resolve(defaultProjectInfo),
+  ]);
+
+  if (existingConfig) {
+    return existingConfig;
+  }
+
+  const config: RawConfig = {
+    tsx: !!projectInfo?.isTsx,
+  };
+
+  return await resolveConfigPaths(cwd, config);
+}

package/src/utils/handle-error.ts

@@ -0,0 +1,34 @@
+import { highlighter } from '@/src/components/highlighter';
+import { logger } from '@/src/components/logger';
+import { z } from 'zod';
+
+export function handleError(error: unknown) {
+  logger.error(
+    `Something went wrong. Please check the error below for more details.`
+  );
+  logger.error(`If the problem persists, please open an issue on GitHub.`);
+  logger.error('');
+  if (typeof error === 'string') {
+    logger.error(error);
+    logger.break();
+    process.exit(1);
+  }
+
+  if (error instanceof z.ZodError) {
+    logger.error('Validation failed:');
+    for (const [key, value] of Object.entries(error.flatten().fieldErrors)) {
+      logger.error(`- ${highlighter.info(key)}: ${value}`);
+    }
+    logger.break();
+    process.exit(1);
+  }
+
+  if (error instanceof Error) {
+    logger.error(error.message);
+    logger.break();
+    process.exit(1);
+  }
+
+  logger.break();
+  process.exit(1);
+}

package/src/utils/resolve-components-tree.ts

@@ -0,0 +1,35 @@
+import * as templates from '../templates';
+
+type ComponentKey = keyof typeof templates.tsx;
+
+export function resolveComponentsTree(components: string[]) {
+  // npm libraries which should be added to the project
+  const dependencies = new Set<string>();
+  // components which should be added in addition to the component
+  const componentsDependencies = new Set<string>([...components]);
+
+  // Process each component and its dependencies recursively
+  function processComponent(componentName: string) {
+    const component = templates.tsx[componentName as ComponentKey];
+    if (!component) return;
+
+    // Add component's dependencies
+    (component as { dependencies?: string[] }).dependencies?.forEach((dep: string) => dependencies.add(dep));
+
+    // Process component's component dependencies recursively
+    (component as { componentsDependencies?: string[] }).componentsDependencies?.forEach((dep: string) => {
+      componentsDependencies.add(dep);
+      processComponent(dep);
+    });
+  }
+
+  // Process all requested components
+  components.forEach((componentName) => {
+    processComponent(componentName);
+  });
+
+  return {
+    dependencies: Array.from(dependencies),
+    componentsDependencies: Array.from(componentsDependencies),
+  };
+}

package/src/utils/update-dependencies.ts

@@ -0,0 +1,37 @@
+import { Config } from '@/src/utils/get-config';
+import { getPackageManager } from '@/src/utils/get-package-manager';
+import { spinner } from '@/src/components/spinner';
+import { execa } from 'execa';
+
+export async function updateDependencies(
+  dependencies: string[],
+  config: Config,
+  options: {
+    silent?: boolean;
+  }
+) {
+  if (!dependencies?.length) {
+    return;
+  }
+
+  options = {
+    silent: false,
+    ...options,
+  };
+
+  const dependenciesSpinner = spinner(`Installing dependencies.`, {
+    silent: options.silent,
+  })?.start();
+  const packageManager = await getPackageManager(config.resolvedPaths.cwd);
+  dependenciesSpinner?.start();
+
+  await execa(
+    packageManager,
+    [packageManager === 'npm' ? 'install' : 'add', ...dependencies],
+    {
+      cwd: config.resolvedPaths.cwd,
+    }
+  );
+
+  dependenciesSpinner?.succeed();
+}