@tavus/cvi-ui 0.0.1-beta.1

package/prepare-scripts/create-templates.js

@@ -0,0 +1,265 @@
+import fs from 'fs';
+import path from 'path';
+import { parse } from '@babel/parser';
+import traverse from '@babel/traverse';
+import { fileURLToPath } from 'url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+const projectRoot = path.resolve(__dirname, '..');
+
+const SKIP_DEPENDENCIES = new Set(['react', 'react-dom', '@daily-co/daily-react']);
+
+// Function to extract imports from TSX file
+function extractImports(content) {
+	const ast = parse(content, {
+		sourceType: 'module',
+		plugins: ['typescript', 'jsx'],
+	});
+
+	const dependencies = {
+		npm: new Set(),
+		local: new Set(),
+	};
+
+	traverse.default(ast, {
+		ImportDeclaration(path) {
+			const source = path.node.source.value;
+			// Skip default imports
+			if (SKIP_DEPENDENCIES.has(source)) {
+				return;
+			}
+			if (source.endsWith('.css')) {
+				return;
+			}
+			if (source.startsWith('.')) {
+				// Extract only the component name from the path
+				const componentName = source
+					.split('/')
+					.pop()
+					.replace(/\.(tsx|ts|jsx|js)$/, '');
+				dependencies.local.add(componentName);
+			} else {
+				dependencies.npm.add(source);
+			}
+		},
+	});
+
+	return dependencies;
+}
+
+// Function to get type from file path
+function getTypeFromPath(filePath, templatesDir) {
+	const relativePath = path.relative(templatesDir, filePath);
+	const parts = relativePath.split(path.sep);
+	// The type is the first folder after templates
+	return parts[0];
+}
+
+// Function to process a TSX file and its associated CSS
+function processTemplateFile(tsxPath, templatesDir) {
+	const content = fs.readFileSync(tsxPath, 'utf-8');
+	const dirPath = path.dirname(tsxPath);
+	let styles = '';
+
+	// Check if there's a CSS file in the same directory
+	const files = fs.readdirSync(dirPath);
+	const cssFile = files.find((file) => file.endsWith('.css'));
+
+	if (cssFile) {
+		const cssPath = path.join(dirPath, cssFile);
+		styles = fs.readFileSync(cssPath, 'utf-8');
+	}
+
+	const dependencies = extractImports(content);
+	const type = getTypeFromPath(tsxPath, templatesDir);
+
+	// Get component name from file path
+	const fileName = path.basename(tsxPath, path.extname(tsxPath));
+	const componentName = fileName === 'index' ? path.basename(path.dirname(tsxPath)) : fileName;
+
+	// Add cvi-provider to local dependencies for specific components
+	if (componentName === 'hair-check' || componentName === 'conversation') {
+		dependencies.local.add('cvi-provider');
+	}
+
+	const templateData = {
+		type,
+		content,
+		styles,
+		...(dependencies.local.size > 0 && { componentsDependencies: Array.from(dependencies.local) }),
+		...(dependencies.npm.size > 0 && { dependencies: Array.from(dependencies.npm) }),
+	};
+
+	return templateData;
+}
+
+// Function to create components list file
+function createComponentsList(components, outputDir) {
+	const componentsList = components
+		.map((comp) => {
+			const name = path.basename(comp, path.extname(comp));
+			const relativePath = path
+				.relative(outputDir, comp)
+				.replace(/\\/g, '/')
+				.replace('.json', '')
+				.replace(/^tsx\//, '');
+			return `  { name: '${name}', path: '${relativePath}' }`;
+		})
+		.join(',\n');
+
+	const content = `export const components = [\n${componentsList}\n] as const;\n\nexport type Component = typeof components[number];\n`;
+
+	fs.writeFileSync(path.join(outputDir, 'components.ts'), content);
+	console.log('Created components list: components.ts');
+}
+
+// Function to create index file for components
+function createComponentsIndex(components, outputDir) {
+	const exports = components
+		.map((comp) => {
+			const name = path.basename(comp, '.json');
+			const relativePath = path.relative(outputDir, comp).replace(/\\/g, '/');
+			return `export { default as "${name}" } from './${relativePath}';`;
+		})
+		.join('\n');
+
+	const content = `${exports}\n`;
+	const indexPath = path.join(outputDir, `index.ts`);
+	fs.writeFileSync(indexPath, content);
+	console.log(`Created index file: ${indexPath}`);
+}
+
+// Function to create main templates index file
+function createTemplatesIndex(tsxDir, jsxDir, outputDir) {
+	const content = `export * as tsx from './tsx';\nexport * as jsx from './jsx';\n`;
+	const indexPath = path.join(outputDir, 'index.ts');
+	fs.writeFileSync(indexPath, content);
+	console.log(`Created main index file: ${indexPath}`);
+}
+
+// Main function to process all templates
+async function convertTemplates() {
+	const tsxTemplatesDir = path.join(projectRoot, 'dev-components');
+	const jsxTemplatesDir = path.join(projectRoot, 'jsx-templates');
+	const outputDir = path.join(projectRoot, 'src', 'templates');
+	const tsxOutputDir = path.join(outputDir, 'tsx');
+	const jsxOutputDir = path.join(outputDir, 'jsx');
+	const tsxComponents = [];
+	const jsxComponents = [];
+
+	// Create output directories if they don't exist
+	if (!fs.existsSync(tsxOutputDir)) {
+		fs.mkdirSync(tsxOutputDir, { recursive: true });
+	}
+	if (!fs.existsSync(jsxOutputDir)) {
+		fs.mkdirSync(jsxOutputDir, { recursive: true });
+	}
+
+	// Process all TSX files in the dev-components directory
+	async function processTSXDirectory(dir) {
+		const items = fs.readdirSync(dir);
+
+		for (const item of items) {
+			const itemPath = path.join(dir, item);
+			const stat = fs.statSync(itemPath);
+
+			if (stat.isDirectory()) {
+				await processTSXDirectory(itemPath);
+				// TODO: Add support for .ts files
+			} else if (item.endsWith('.tsx')) {
+				const templateData = processTemplateFile(itemPath, tsxTemplatesDir);
+				const relativePath = path.relative(tsxTemplatesDir, itemPath);
+
+				// Check if this is an index file
+				const isIndexFile = path.basename(itemPath, path.extname(itemPath)) === 'index';
+
+				let outputPath;
+				if (isIndexFile) {
+					// For index files, create a file with the folder name instead of creating a folder
+					const parentDir = path.dirname(relativePath);
+					outputPath = path.join(tsxOutputDir, `${parentDir}.json`);
+				} else {
+					// For regular files, use the normal path structure
+					outputPath = path.join(tsxOutputDir, relativePath.replace('.tsx', '.json'));
+				}
+
+				// Ensure the output directory structure exists
+				const outputDirPath = path.dirname(outputPath);
+				if (!fs.existsSync(outputDirPath)) {
+					fs.mkdirSync(outputDirPath, { recursive: true });
+				}
+
+				fs.writeFileSync(outputPath, JSON.stringify(templateData, null, 2));
+				console.log(`Created TSX template: ${outputPath}`);
+
+				// Add to components list
+				tsxComponents.push(outputPath);
+			}
+		}
+	}
+
+	// Process all JSX files in the jsx-templates directory
+	async function processJSXDirectory(dir) {
+		const items = fs.readdirSync(dir);
+
+		for (const item of items) {
+			const itemPath = path.join(dir, item);
+			const stat = fs.statSync(itemPath);
+
+			if (stat.isDirectory()) {
+				await processJSXDirectory(itemPath);
+			} else if (item.endsWith('.jsx')) {
+				const templateData = processTemplateFile(itemPath, jsxTemplatesDir);
+				const relativePath = path.relative(jsxTemplatesDir, itemPath);
+
+				// Check if this is an index file
+				const isIndexFile = path.basename(itemPath, path.extname(itemPath)) === 'index';
+
+				let outputPath;
+				if (isIndexFile) {
+					// For index files, create a file with the folder name instead of creating a folder
+					const parentDir = path.dirname(relativePath);
+					outputPath = path.join(jsxOutputDir, `${parentDir}.json`);
+				} else {
+					// For regular files, use the normal path structure
+					outputPath = path.join(jsxOutputDir, relativePath.replace('.jsx', '.json'));
+				}
+
+				// Ensure the output directory structure exists
+				const outputDirPath = path.dirname(outputPath);
+				if (!fs.existsSync(outputDirPath)) {
+					fs.mkdirSync(outputDirPath, { recursive: true });
+				}
+
+				fs.writeFileSync(outputPath, JSON.stringify(templateData, null, 2));
+				console.log(`Created JSX template: ${outputPath}`);
+
+				// Add to components list
+				jsxComponents.push(outputPath);
+			}
+		}
+	}
+
+	// Process both TSX and JSX templates
+	if (fs.existsSync(tsxTemplatesDir)) {
+		await processTSXDirectory(tsxTemplatesDir);
+		// Create components list file only for TSX components
+		if (tsxComponents.length > 0) {
+			createComponentsList(tsxComponents, outputDir);
+			createComponentsIndex(tsxComponents, tsxOutputDir);
+		}
+	}
+
+	if (fs.existsSync(jsxTemplatesDir)) {
+		await processJSXDirectory(jsxTemplatesDir);
+		if (jsxComponents.length > 0) {
+			createComponentsIndex(jsxComponents, jsxOutputDir);
+		}
+	}
+
+	// Create main templates index file
+	createTemplatesIndex(tsxOutputDir, jsxOutputDir, outputDir);
+}
+
+convertTemplates().catch(console.error);

package/rollup.config.js

@@ -0,0 +1,28 @@
+import resolve from '@rollup/plugin-node-resolve';
+import commonjs from '@rollup/plugin-commonjs';
+import typescript from '@rollup/plugin-typescript';
+import json from '@rollup/plugin-json';
+
+export default {
+  input: 'src/index.ts',
+  output: {
+    dir: 'dist',
+    entryFileNames: 'index.js',
+    format: 'es',
+    banner: '#!/usr/bin/env node',
+  },
+  external: [
+    'react',
+    '@daily-co/daily-js',
+    'daily-js',
+    'npm-run-path',
+    'unicorn-magic',
+    'execa',
+  ],
+  plugins: [
+    json(),
+    resolve({ preferBuiltins: true }),
+    commonjs(),
+    typescript({ tsconfig: './tsconfig.json' }),
+  ],
+};

package/src/cli/add.ts

@@ -0,0 +1,124 @@
+#!/usr/bin/env node
+
+import path from 'node:path';
+import { preFlightAdd } from '@/src/preflights/preflight-add';
+import { handleError } from '@/src/utils/handle-error';
+import { highlighter } from '@/src/components/highlighter';
+import { logger } from '@/src/components/logger';
+import { z } from 'zod';
+import { Command } from 'commander';
+import prompts from 'prompts';
+import * as ERRORS from '@/src/constants/errors';
+import { CONFIG_NAME } from '@/src/constants/config';
+import { runInit } from '@/src/cli/init';
+import { addComponents } from '@/src/utils/add-components';
+import { components as COMPONENTS } from '../templates/components';
+
+export const addOptionsSchema = z.object({
+	components: z.array(z.string()).optional(),
+	overwrite: z.boolean(),
+	cwd: z.string(),
+	// TODO: Add path option
+	// path: z.string().optional(),
+	silent: z.boolean(),
+});
+
+export const add = new Command()
+	.name('add')
+	.description('add a CVI component to your project')
+	.argument('[components...]', 'the components to add.')
+	.option('-o, --overwrite', 'overwrite existing files.', false)
+	.option(
+		'-c, --cwd <cwd>',
+		'the working directory. defaults to the current directory.',
+		process.cwd()
+	)
+	// TODO: Add path option
+	// .option('-p, --path <path>', 'the path to add the component to.')
+	.option('-s, --silent', 'mute output.', false)
+	.action(async (components, opts) => {
+		try {
+			const options = addOptionsSchema.parse({
+				components,
+				cwd: path.resolve(opts.cwd),
+				...opts,
+			});
+
+			if (!options.components?.length) {
+				options.components = await showComponentsPrompt(options);
+			}
+
+			// eslint-disable-next-line @typescript-eslint/no-unused-vars, prefer-const
+			let { errors, config } = await preFlightAdd(options);
+
+			// No cvi-components.json file. Prompt the user to run init.
+			if (errors[ERRORS.MISSING_CONFIG]) {
+				const { proceed } = await prompts({
+					type: 'confirm',
+					name: 'proceed',
+					message: `You need to create a ${highlighter.info(
+						CONFIG_NAME
+					)} file to add components. Proceed?`,
+					initial: true,
+				});
+
+				if (!proceed) {
+					logger.break();
+					process.exit(1);
+				}
+
+				config = await runInit({
+					cwd: options.cwd,
+					components: undefined,
+					silent: options.silent,
+				});
+			}
+
+			if (errors[ERRORS.MISSING_DIR_OR_EMPTY_PROJECT]) {
+				logger.break();
+				process.exit(1);
+			}
+
+			if (!config) {
+				throw new Error(`Failed to read config at ${highlighter.info(options.cwd)}.`);
+			}
+
+			await addComponents(options.components, config, options);
+		} catch (error) {
+			logger.break();
+			handleError(error);
+		}
+	});
+
+async function showComponentsPrompt(options: z.infer<typeof addOptionsSchema>) {
+	if (options.components?.length) {
+		return options.components;
+	}
+
+	const { components } = await prompts({
+		type: 'multiselect',
+		name: 'components',
+		message: 'Which components would you like to add?',
+		hint: 'Space to select. A to toggle all. Enter to submit.',
+		instructions: false,
+		choices: COMPONENTS.map((entry) => ({
+			title: entry.name,
+			value: entry.name,
+			selected: options.components?.includes(entry.name),
+		})),
+	});
+
+	if (!components?.length) {
+		logger.warn('No components selected. Exiting.');
+		logger.info('');
+		process.exit(1);
+	}
+
+	const result = z.array(z.string()).safeParse(components);
+	if (!result.success) {
+		logger.error('');
+		handleError(new Error('Something went wrong. Please try again.'));
+		return [];
+	}
+	return result.data;
+}

package/src/cli/info.ts

@@ -0,0 +1,21 @@
+import { getConfig } from '@/src/utils/get-config';
+import { getProjectInfo } from '@/src/utils/get-project-info';
+import { logger } from '@/src/components/logger';
+import { Command } from 'commander';
+import { CONFIG_NAME } from '../constants/config';
+
+export const info = new Command()
+  .name('info')
+  .description('get information about your project')
+  .option(
+    '-c, --cwd <cwd>',
+    'the working directory. defaults to the current directory.',
+    process.cwd()
+  )
+  .action(async (opts) => {
+    logger.info('> project info');
+    console.log(await getProjectInfo(opts.cwd));
+    logger.break();
+    logger.info(`> ${CONFIG_NAME}`);
+    console.log(await getConfig(opts.cwd));
+  });

package/src/cli/init.ts

@@ -0,0 +1,131 @@
+import { promises as fs } from 'fs';
+import path from 'node:path';
+import { preFlightInit } from '@/src/preflights/preflight-init';
+import { addComponents } from '@/src/utils/add-components';
+import * as ERRORS from '@/src/constants/errors';
+import {
+	getConfig,
+	rawConfigSchema,
+	resolveConfigPaths,
+	type Config,
+} from '@/src/utils/get-config';
+import { ProjectInfo } from '@/src/utils/get-project-info';
+import { handleError } from '@/src/utils/handle-error';
+import { highlighter } from '@/src/components/highlighter';
+import { logger } from '@/src/components/logger';
+import { spinner } from '@/src/components/spinner';
+import { Command } from 'commander';
+import prompts from 'prompts';
+import { z } from 'zod';
+import { CONFIG_NAME, DEFAULT_DEPENDENCIES } from '../constants/config';
+import { updateDependencies } from '../utils/update-dependencies';
+
+export const initOptionsSchema = z.object({
+	cwd: z.string(),
+	silent: z.boolean(),
+	components: z.array(z.string()).optional(),
+});
+
+export const init = new Command()
+	.name('init')
+	.description('initialize your project and install dependencies')
+	.option(
+		'-c, --cwd <cwd>',
+		'the working directory. defaults to the current directory.',
+		process.cwd()
+	)
+	.argument('[components...]', 'the components to add.')
+	.option('-s, --silent', 'mute output.', false)
+	.action(async (components, opts) => {
+		try {
+			const options = initOptionsSchema.parse({
+				cwd: path.resolve(opts.cwd),
+				...opts,
+				components,
+			});
+
+			await runInit(options);
+
+			logger.log(
+				`${highlighter.success(
+					'Success!'
+				)} Project initialization completed.\nYou may now add components.`
+			);
+			logger.break();
+		} catch (error) {
+			logger.break();
+			handleError(error);
+		}
+	});
+
+export async function runInit(options: z.infer<typeof initOptionsSchema>) {
+	let projectInfo;
+	const preflight = await preFlightInit(options);
+	if (preflight.errors[ERRORS.MISSING_DIR_OR_EMPTY_PROJECT]) {
+		process.exit(1);
+	} else {
+		projectInfo = preflight.projectInfo;
+	}
+
+	const config = projectInfo
+		? await promptForMinimalConfig(projectInfo)
+		: await promptForConfig(await getConfig(options.cwd));
+
+	const { proceed } = await prompts({
+		type: 'confirm',
+		name: 'proceed',
+		message: `Write configuration to ${highlighter.info(CONFIG_NAME)}. Proceed?`,
+		initial: true,
+	});
+
+	if (!proceed) {
+		process.exit(0);
+	}
+
+	// Write cvi-components.json.
+	const componentSpinner = spinner(`Writing ${CONFIG_NAME}.`).start();
+	const targetPath = path.resolve(options.cwd, CONFIG_NAME);
+	await fs.writeFile(targetPath, JSON.stringify(config, null, 2), 'utf8');
+	componentSpinner.succeed();
+
+	const fullConfig = await resolveConfigPaths(options.cwd, config);
+
+	// Install default dependencies
+	await updateDependencies(DEFAULT_DEPENDENCIES, fullConfig, {
+		silent: options.silent,
+	});
+
+	// Add components.
+	if (options.components?.length) {
+		await addComponents(options.components, fullConfig, {
+			overwrite: true,
+			silent: options.silent,
+		});
+	}
+
+	return fullConfig;
+}
+
+async function promptForConfig(defaultConfig: Config | null = null) {
+	logger.info('');
+	const options = await prompts([
+		{
+			type: 'toggle',
+			name: 'typescript',
+			message: `Would you like to use ${highlighter.info('TypeScript')} (recommended)?`,
+			initial: defaultConfig?.tsx ?? true,
+			active: 'yes',
+			inactive: 'no',
+		},
+	]);
+
+	return rawConfigSchema.parse({
+		tsx: options.typescript,
+	});
+}
+
+async function promptForMinimalConfig(defaultConfig: ProjectInfo) {
+	return rawConfigSchema.parse({
+		tsx: defaultConfig?.isTsx,
+	});
+}

package/src/components/highlighter.ts

@@ -0,0 +1,8 @@
+import { cyan, green, red, yellow } from "kleur/colors"
+
+export const highlighter = {
+  error: red,
+  warn: yellow,
+  info: cyan,
+  success: green,
+}

package/src/components/logger.ts

@@ -0,0 +1,22 @@
+import { highlighter } from "./highlighter"
+
+export const logger = {
+  error(...args: unknown[]) {
+    console.log(highlighter.error(args.join(" ")))
+  },
+  warn(...args: unknown[]) {
+    console.log(highlighter.warn(args.join(" ")))
+  },
+  info(...args: unknown[]) {
+    console.log(highlighter.info(args.join(" ")))
+  },
+  success(...args: unknown[]) {
+    console.log(highlighter.success(args.join(" ")))
+  },
+  log(...args: unknown[]) {
+    console.log(args.join(" "))
+  },
+  break() {
+    console.log("")
+  },
+}

package/src/components/spinner.ts

@@ -0,0 +1,13 @@
+import ora, { type Options } from "ora"
+
+export function spinner(
+  text: Options["text"],
+  options?: {
+    silent?: boolean
+  }
+) {
+  return ora({
+    text,
+    isSilent: options?.silent,
+  })
+}

package/src/constants/config.ts

@@ -0,0 +1,7 @@
+export const CONFIG = {
+	tsx: true,
+};
+
+export const CONFIG_NAME = 'cvi-components.json';
+
+export const DEFAULT_DEPENDENCIES = ['@daily-co/daily-react', '@daily-co/daily-js', 'jotai'];

package/src/constants/errors.ts

@@ -0,0 +1,5 @@
+export const MISSING_DIR_OR_EMPTY_PROJECT = "1"
+export const EXISTING_CONFIG = "2"
+export const MISSING_CONFIG = "3"
+export const FAILED_CONFIG_READ = "4"
+export const UNSUPPORTED_FRAMEWORK = "7"

package/src/constants/frameworks.ts

@@ -0,0 +1,40 @@
+export const FRAMEWORKS = {
+	'next-app': {
+		name: 'next-app',
+		label: 'Next.js',
+	},
+	'next-pages': {
+		name: 'next-pages',
+		label: 'Next.js',
+	},
+	remix: {
+		name: 'remix',
+		label: 'Remix',
+	},
+	'react-router': {
+		name: 'react-router',
+		label: 'React Router',
+	},
+	vite: {
+		name: 'vite',
+		label: 'Vite',
+	},
+	astro: {
+		name: 'astro',
+		label: 'Astro',
+	},
+	'tanstack-start': {
+		name: 'tanstack-start',
+		label: 'TanStack Start',
+	},
+	gatsby: {
+		name: 'gatsby',
+		label: 'Gatsby',
+	},
+	manual: {
+		name: 'manual',
+		label: 'Manual',
+	},
+} as const;
+
+export type Framework = (typeof FRAMEWORKS)[keyof typeof FRAMEWORKS];

package/src/index.ts

@@ -0,0 +1,26 @@
+import { init } from '@/src/cli/init';
+import { add } from '@/src/cli/add';
+import { info } from '@/src/cli/info';
+import { Command } from 'commander';
+
+import packageJson from '../package.json';
+
+process.on('SIGINT', () => process.exit(0));
+process.on('SIGTERM', () => process.exit(0));
+
+async function main() {
+  const program = new Command()
+    .name('tavus-cvi')
+    .description('A CLI tool for installing and managing CVI components')
+    .version(
+      packageJson.version || '0.0.1',
+      '-v, --version',
+      'display the version number'
+    );
+
+  program.addCommand(init).addCommand(add).addCommand(info);
+
+  program.parse();
+}
+
+main();