@alignui/cli 0.0.1-alpha.8 → 0.0.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alignui/cli",
-  "version": "0.0.1-alpha.8",
+  "version": "0.0.2",
   "description": "A command line interface to setup AlignUI",
   "main": "dist/index.js",
   "type": "module",
@@ -23,6 +23,9 @@
     "alignui",
     "design system"
   ],
+  "files": [
+    "dist"
+  ],
   "author": "dgknca",
   "license": "MIT",
   "bugs": {
@@ -33,15 +36,13 @@
     "@antfu/ni": "^0.22.4",
     "@babel/core": "^7.25.2",
     "@babel/parser": "^7.25.3",
-    "chalk": "^5.3.0",
+    "@clack/prompts": "^0.7.0",
     "commander": "^12.1.0",
     "culori": "^4.0.1",
     "execa": "^9.3.1",
     "fast-glob": "^3.3.2",
     "fs-extra": "^11.2.0",
     "lodash.template": "^4.5.0",
-    "ora": "^8.0.1",
-    "prompts": "^2.4.2",
     "ts-morph": "^23.0.0",
     "zod": "^3.23.8"
   },
@@ -65,4 +66,4 @@
     "type-fest": "^4.24.0",
     "typescript": "^5.5.4"
   }
-}
+}

package/.eslintrc.json

@@ -1,11 +0,0 @@
-{
-  "$schema": "https://json.schemastore.org/eslintrc",
-  "root": true,
-  "extends": ["prettier"],
-  "overrides": [
-    {
-      "files": ["*.ts", "*.tsx"],
-      "parser": "@typescript-eslint/parser"
-    }
-  ]
-}

package/.husky/commit-msg

@@ -1,4 +0,0 @@
-#!/bin/sh
-. "$(dirname "$0")/_/husky.sh"
-
-npx commitlint --edit

package/.vscode/settings.json

@@ -1,15 +0,0 @@
-{
-"editor.tabSize": 2,
-  "editor.indentSize": 2,
-  "editor.formatOnSave": true,
-  "editor.defaultFormatter": "esbenp.prettier-vscode",
-  "editor.codeActionsOnSave": {
-    "source.fixAll": "explicit"
-  },
-  "typescript.preferences.importModuleSpecifier": "non-relative",
-  "eslint.workingDirectories": [
-    {
-      "mode": "auto"
-    }
-  ]
-}

package/commitlint.config.js

@@ -1 +0,0 @@
-export default { extends: ['@commitlint/config-conventional'] };

package/prettier.config.mjs

@@ -1,10 +0,0 @@
-const config = {
-  arrowParens: 'always',
-  singleQuote: true,
-  jsxSingleQuote: true,
-  tabWidth: 2,
-  semi: true,
-  printWidth: 80,
-};
-
-export default config;

package/src/commands/tailwind.ts

@@ -1,272 +0,0 @@
-import { existsSync, promises as fs } from 'fs';
-import path from 'path';
-import { handleError } from '@/src/utils/handle-error';
-import { logger } from '@/src/utils/logger';
-import * as templates from '@/src/utils/templates';
-import chalk from 'chalk';
-import { Command } from 'commander';
-import { execa } from 'execa';
-import template from 'lodash.template';
-import ora from 'ora';
-import prompts from 'prompts';
-import { z } from 'zod';
-import {
-  DEFAULT_TAILWIND_CONFIG,
-  DEFAULT_TAILWIND_CSS,
-  rawConfigSchema,
-  resolveConfigPaths,
-  type Config,
-} from '@/src/utils/get-config';
-import { getPackageManager } from '@/src/utils/get-package-manager';
-import { getProjectConfig, preFlight } from '@/src/utils/get-project-info';
-import {
-  rawHexColors,
-  tailwindColorsHex,
-  tailwindColorsHsl,
-  tailwindColorsRgb,
-  borderRadii,
-  texts,
-  shadows,
-  animations,
-} from '@/src/utils/tokens';
-import { prettierFormat } from '@/src/utils/prettier';
-import { formatHslColor, formatRgbColor } from '@/src/utils/color-helpers';
-
-const PROJECT_DEV_DEPENDENCIES = ['tailwindcss-animate'];
-const highlight = (text: string) => chalk.hex('#8c71f6')(text);
-
-const tailwindInitOptionsSchema = z.object({
-  cwd: z.string(),
-});
-
-export const initTailwind = new Command()
-  .name('tailwind')
-  .description('Initialize AlignUI tailwind tokens for your project.')
-  .option(
-    '-c, --cwd <cwd>',
-    'the working directory. defaults to the current directory.',
-    process.cwd(),
-  )
-  .action(async (opts) => {
-    try {
-      const options = tailwindInitOptionsSchema.parse(opts);
-      const cwd = path.resolve(options.cwd);
-
-      // Ensure target directory exists.
-      if (!existsSync(cwd)) {
-        logger.error(`The path ${cwd} does not exist. Please try again.`);
-        process.exit(1);
-      }
-
-      preFlight(cwd);
-
-      const projectConfig = await getProjectConfig(cwd);
-
-      if (projectConfig) {
-        const config = await promptForConfig(cwd, projectConfig);
-        await runInit(cwd, config);
-      }
-
-      logger.break();
-      logger.success('Project initialization completed!');
-      logger.break();
-      logger.white(`Installed the following packages:
-
-${PROJECT_DEV_DEPENDENCIES.map((pkg) => `   - ${pkg}`).join('\n')}`);
-      logger.break();
-    } catch (error) {
-      handleError(error);
-    }
-  });
-
-async function promptForConfig(cwd: string, defaultConfig: Config) {
-  const options = await prompts([
-    {
-      type: 'select',
-      name: 'primaryColor',
-      message: `Which color would you like to use as ${highlight(
-        'primary color',
-      )}?`,
-      choices: [
-        {
-          title: 'Blue',
-          value: 'blue',
-        },
-        {
-          title: 'Purple',
-          value: 'purple',
-        },
-        {
-          title: 'Orange',
-          value: 'orange',
-        },
-        {
-          title: 'Sky',
-          value: 'sky',
-        },
-      ],
-      initial: 0,
-    },
-    {
-      type: 'select',
-      name: 'colorFormat',
-      message: `Which ${highlight('color format')} would you like to use?`,
-      choices: [
-        {
-          title: 'hex',
-          value: 'hex',
-        },
-        {
-          title: 'rgb',
-          value: 'rgb',
-        },
-        {
-          title: 'hsl',
-          value: 'hsl',
-        },
-      ],
-      initial: 0,
-    },
-    {
-      type: 'text',
-      name: 'tailwindPrefix',
-      message: `Would you like to use a custom prefix for AlignUI specific classes? ${highlight('eg. an-')} (Recommended if you want to keep tailwind's default colors, shadows and font-sizes. Leave blank if not)`,
-      initial: '',
-    },
-    {
-      type: 'text',
-      name: 'tailwindConfig',
-      message: `Where is your ${highlight('tailwind config')} file?`,
-      initial: defaultConfig?.tailwind.config ?? DEFAULT_TAILWIND_CONFIG,
-    },
-    {
-      type: 'text',
-      name: 'tailwindCss',
-      message: `Where is your ${highlight('global CSS')} file?`,
-      initial: defaultConfig?.tailwind.css ?? DEFAULT_TAILWIND_CSS,
-    },
-  ]);
-
-  const config = rawConfigSchema.parse({
-    tailwind: {
-      config: options.tailwindConfig,
-      css: options.tailwindCss,
-      primaryColor: options.primaryColor,
-      colorFormat: options.colorFormat,
-      prefix: options.tailwindPrefix,
-    },
-  });
-
-  return await resolveConfigPaths(cwd, config);
-}
-
-function applyPrefixToKeys<T extends Record<string, any>>(
-  obj: T,
-  prefix: string | undefined,
-): T {
-  if (!prefix) return obj;
-
-  return Object.fromEntries(
-    Object.entries(obj).map(([key, value]) => [`${prefix}${key}`, value]),
-  ) as T;
-}
-
-async function runInit(cwd: string, config: Config) {
-  const spinner = ora(`Initializing project...`)?.start();
-
-  // Ensure all resolved paths directories exist.
-  for (const [key, resolvedPath] of Object.entries(config.resolvedPaths)) {
-    // Determine if the path is a file or directory.
-    let dirname = path.extname(resolvedPath)
-      ? path.dirname(resolvedPath)
-      : resolvedPath;
-
-    if (!existsSync(dirname)) {
-      await fs.mkdir(dirname, { recursive: true });
-    }
-  }
-
-  const tailwindConfigTemplate =
-    path.extname(config.resolvedPaths.tailwindConfig) === '.ts'
-      ? templates.TAILWIND_CONFIG_TS
-      : templates.TAILWIND_CONFIG_JS;
-
-  let tailwindColorsInSelectedFormat =
-    config.tailwind.colorFormat === 'rgb'
-      ? tailwindColorsRgb
-      : config.tailwind.colorFormat === 'hsl'
-        ? tailwindColorsHsl
-        : tailwindColorsHex;
-  let textValues: any = texts;
-  let shadowValues: any = shadows;
-
-  if (config.tailwind.prefix) {
-    tailwindColorsInSelectedFormat = applyPrefixToKeys(
-      tailwindColorsInSelectedFormat,
-      config.tailwind.prefix,
-    );
-    textValues = applyPrefixToKeys(texts, config.tailwind.prefix);
-    shadowValues = applyPrefixToKeys(texts, config.tailwind.prefix);
-  }
-
-  // Write tailwind config.
-  await fs.writeFile(
-    config.resolvedPaths.tailwindConfig,
-    await prettierFormat(
-      template(tailwindConfigTemplate)({
-        prefix: config.tailwind.prefix,
-        colors: JSON.stringify(tailwindColorsInSelectedFormat, null, 2),
-        borderRadii: JSON.stringify(borderRadii, null, 2),
-        texts: JSON.stringify(textValues, null, 2),
-        shadows: JSON.stringify(shadowValues, null, 2),
-        animations: JSON.stringify(animations, null, 2),
-      }),
-    ),
-    'utf8',
-  );
-
-  const colorVariables = Object.fromEntries(
-    Object.entries(rawHexColors).map(([colorName, shades]) => [
-      colorName,
-      Object.fromEntries(
-        Object.entries(shades).map(([shade, hex]) => {
-          if (config.tailwind.colorFormat === 'hsl') {
-            return [shade, formatHslColor(hex)];
-          } else if (config.tailwind.colorFormat === 'rgb') {
-            return [shade, formatRgbColor(hex)];
-          }
-          return [shade, hex];
-        }),
-      ),
-    ]),
-  );
-
-  // Write globals.css
-  await fs.writeFile(
-    config.resolvedPaths.tailwindCss,
-    template(templates.GLOBALS_CSS)({
-      primaryColor: config.tailwind.primaryColor,
-      ...colorVariables,
-    }),
-    'utf8',
-  );
-
-  spinner?.succeed();
-
-  // Install dependencies.
-  const dependenciesSpinner = ora(`Installing dependencies...`)?.start();
-  const packageManager = await getPackageManager(cwd);
-
-  await execa(
-    packageManager,
-    [
-      packageManager === 'npm' ? 'i' : 'add',
-      packageManager === 'npm' ? '--save-dev' : '-D',
-      ...PROJECT_DEV_DEPENDENCIES,
-    ],
-    {
-      cwd,
-    },
-  );
-  dependenciesSpinner?.succeed();
-}

package/src/index.ts

@@ -1,27 +0,0 @@
-#!/usr/bin/env node
-
-import { initTailwind } from '@/src/commands/tailwind';
-import { Command } from 'commander';
-
-import { getPackageInfo } from './utils/get-package-info';
-
-process.on('SIGINT', () => process.exit(0));
-process.on('SIGTERM', () => process.exit(0));
-
-async function main() {
-  const packageInfo = await getPackageInfo();
-
-  const program = new Command()
-    .name('alignui-cli')
-    .description(packageInfo.description || '')
-    .version(
-      packageInfo.version || '0.0.1',
-      '-v, --version',
-      'display the version number',
-    );
-
-  program.addCommand(initTailwind);
-  program.parse();
-}
-
-main();

package/src/utils/color-helpers.ts

@@ -1,36 +0,0 @@
-import { converter, formatHsl, formatRgb, type Color } from 'culori';
-
-const rgb = converter('rgb');
-const hsl = converter('hsl');
-const percentageFormat = new Intl.NumberFormat('en-US', { style: 'percent' })
-  .format;
-
-export function formatHslColor(hex: string): string {
-  const color = hsl(hex) as Color;
-  const formattedCssColor = formatHsl(color);
-  let [h, s, l]: any[] = formattedCssColor
-    .replace('hsla(', '')
-    .replace('hsl(', '')
-    .replace(')', '')
-    .split(', ');
-
-  if (color?.alpha) {
-    return `${h} ${s} ${l} / ${percentageFormat(color.alpha)}`;
-  }
-  return `${h} ${s} ${l}`;
-}
-
-export function formatRgbColor(hex: string): string {
-  const color = rgb(hex) as Color;
-  const formattedCssColor = formatRgb(color);
-  let [r, g, b]: any[] = formattedCssColor
-    .replace('rgba(', '')
-    .replace('rgb(', '')
-    .replace(')', '')
-    .split(', ');
-
-  if (color?.alpha) {
-    return `${r} ${g} ${b} / ${percentageFormat(color.alpha)}`;
-  }
-  return `${r} ${g} ${b}`;
-}

package/src/utils/get-config.ts

@@ -1,38 +0,0 @@
-import path from 'path';
-import { z } from 'zod';
-
-export const DEFAULT_TAILWIND_CSS = 'app/globals.css';
-export const DEFAULT_TAILWIND_CONFIG = 'tailwind.config.js';
-
-export const rawConfigSchema = z
-  .object({
-    tailwind: z.object({
-      config: z.string(),
-      css: z.string(),
-      primaryColor: z.enum(['blue', 'purple', 'orange', 'sky']),
-      colorFormat: z.enum(['hex', 'rgb', 'hsl']),
-      prefix: z.string().default('').optional(),
-    }),
-  })
-  .strict();
-
-export type RawConfig = z.infer<typeof rawConfigSchema>;
-
-export const configSchema = rawConfigSchema.extend({
-  resolvedPaths: z.object({
-    tailwindConfig: z.string(),
-    tailwindCss: z.string(),
-  }),
-});
-
-export type Config = z.infer<typeof configSchema>;
-
-export async function resolveConfigPaths(cwd: string, config: RawConfig) {
-  return configSchema.parse({
-    ...config,
-    resolvedPaths: {
-      tailwindConfig: path.resolve(cwd, config.tailwind.config),
-      tailwindCss: path.resolve(cwd, config.tailwind.css),
-    },
-  });
-}

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

@@ -1,9 +0,0 @@
-import path from 'path';
-import fs from 'fs-extra';
-import { type PackageJson } from 'type-fest';
-
-export function getPackageInfo() {
-  const packageJsonPath = path.join('package.json');
-
-  return fs.readJSONSync(packageJsonPath) as PackageJson;
-}

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

@@ -1,13 +0,0 @@
-import { detect } from '@antfu/ni';
-
-export async function getPackageManager(
-  targetDir: string,
-): Promise<'yarn' | 'pnpm' | 'bun' | 'npm'> {
-  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';
-
-  return packageManager ?? 'npm';
-}

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

@@ -1,78 +0,0 @@
-import path from 'path';
-import { Config, RawConfig, resolveConfigPaths } from '@/src/utils/get-config';
-import fg from 'fast-glob';
-import fs, { pathExists } from 'fs-extra';
-
-const PROJECT_SHARED_IGNORE = [
-  '**/node_modules/**',
-  '.next',
-  'public',
-  'dist',
-  'build',
-];
-
-export async function getProjectConfig(cwd: string): Promise<Config | null> {
-  const tailwindCssFile = await getTailwindCssFile(cwd);
-
-  if (!tailwindCssFile) {
-    return null;
-  }
-
-  const isTsx = await isTypeScriptProject(cwd);
-
-  const config: RawConfig = {
-    tailwind: {
-      config: isTsx ? 'tailwind.config.ts' : 'tailwind.config.js',
-      primaryColor: 'blue',
-      colorFormat: 'hex',
-      css: tailwindCssFile,
-      prefix: '',
-    },
-  };
-
-  return await resolveConfigPaths(cwd, config);
-}
-
-export async function getTailwindCssFile(cwd: string) {
-  const files = await fg.glob('**/*.css', {
-    cwd,
-    deep: 3,
-    ignore: PROJECT_SHARED_IGNORE,
-  });
-
-  if (!files.length) {
-    return null;
-  }
-
-  for (const file of files) {
-    const contents = await fs.readFile(path.resolve(cwd, file), 'utf8');
-    // Assume that if the file contains `@tailwind base` it's the main css file.
-    if (contents.includes('@tailwind base')) {
-      return file;
-    }
-  }
-
-  return null;
-}
-
-export async function isTypeScriptProject(cwd: string) {
-  // Check if cwd has a tsconfig.json file.
-  return pathExists(path.resolve(cwd, 'tsconfig.json'));
-}
-
-export async function preFlight(cwd: string) {
-  // We need Tailwind CSS to be configured.
-  const tailwindConfig = await fg.glob('tailwind.config.*', {
-    cwd,
-    deep: 3,
-    ignore: PROJECT_SHARED_IGNORE,
-  });
-
-  if (!tailwindConfig.length) {
-    throw new Error(
-      'Tailwind CSS is not installed. Visit https://tailwindcss.com/docs/installation to get started.',
-    );
-  }
-
-  return true;
-}

package/src/utils/handle-error.ts

@@ -1,16 +0,0 @@
-import { logger } from '@/src/utils/logger';
-
-export function handleError(error: unknown) {
-  if (typeof error === 'string') {
-    logger.error(error);
-    process.exit(1);
-  }
-
-  if (error instanceof Error) {
-    logger.error(error.message);
-    process.exit(1);
-  }
-
-  logger.error('Something went wrong. Please try again.');
-  process.exit(1);
-}

package/src/utils/logger.ts

@@ -1,22 +0,0 @@
-import chalk from 'chalk';
-
-export const logger = {
-  error(...args: unknown[]) {
-    console.log(chalk.red(...args));
-  },
-  warn(...args: unknown[]) {
-    console.log(chalk.yellow(...args));
-  },
-  info(...args: unknown[]) {
-    console.log(chalk.hex('#97dcff')(...args));
-  },
-  white(...args: unknown[]) {
-    console.log(chalk.white(...args));
-  },
-  success(...args: unknown[]) {
-    console.log(chalk.green(...args));
-  },
-  break() {
-    console.log('');
-  },
-};

package/src/utils/prettier.ts

@@ -1,10 +0,0 @@
-import * as prettier from 'prettier';
-
-export const prettierFormat = (src: string) =>
-  prettier.format(src, {
-    singleQuote: true,
-    jsxSingleQuote: true,
-    tabWidth: 2,
-    semi: true,
-    parser: 'typescript',
-  });