Merge pull request #412 from str0yka/cli-case

cli-case 🧊 add case setting in cli

Author: debabin

packages/cli/src/add.ts

@@ -9,10 +9,10 @@ import ora from 'ora';
 import prompts from 'prompts';
 import { createMatchPath, loadConfig } from 'tsconfig-paths';
 
-import type { AddOptionsSchema, Registry } from '@/utils/types';
+import type { AddOptionsSchema, ConfigSchema, Registry } from '@/utils/types';
 
 import { APP_PATH, REPO_URLS } from '@/utils/constants';
-import { getConfig, getPackageManager } from '@/utils/helpers';
+import { getConfig, getPackageManager, toCase } from '@/utils/helpers';
 import { addOptionsSchema } from '@/utils/types';
 
 type FileType = 'hook' | 'package' | 'util';
@@ -45,13 +45,29 @@ const resolveDependencies = (registry: Registry, hooks: string[]): Map<string, F
   return files;
 };
 
-const updateImports = async (filePath: string, utilsPath: string) => {
-  const fileContent = await fs.readFileSync(filePath, 'utf-8');
-  const utilsImportRegex = /import\s+\{([^}]+)\}\s+from\s+['"](@\/utils[^'"]*)['"]/g;
+interface UpdateImportsRules {
+  regex: RegExp;
+  replacer: (...args: string[]) => string;
+}
+
+const updateImports = async (filePath: string, config: ConfigSchema) => {
+  const fileContent = fs.readFileSync(filePath, 'utf-8');
+
+  const rules: UpdateImportsRules[] = [
+    {
+      regex: /import\s+\{([^}]+)\}\s+from\s+['"](@\/utils[^'"]*)['"]/g,
+      replacer: (_, imports) => `import {${imports}} from '${config.aliases.utils}'`
+    },
+    {
+      regex: /import\s+(?:type\s+)?\{([^}]+)\}\s+from\s+['"](\.[^'"]*)['"]/g,
+      replacer: (_, imports, internalPath) =>
+        `import {${imports}} from '${toCase(internalPath, config.case)}'`
+    }
+  ];
 
-  const updatedContent = fileContent.replace(
-    utilsImportRegex,
-    (_, imports) => `import {${imports}} from '${utilsPath}'`
+  const updatedContent = rules.reduce(
+    (acc, { regex, replacer }) => acc.replace(regex, replacer),
+    fileContent
   );
 
   fs.writeFileSync(filePath, updatedContent);
@@ -165,9 +181,11 @@ export const add = {
     const files = Array.from(dependencies.values())
       .map((dependency) => {
         if (dependency.type === 'hook') {
-          const filePath = `${dependency.name}/${dependency.name}`;
+          const filePath = toCase(`${dependency.name}/${dependency.name}`, config.case);
           const directoryPath = `${pathToLoadHooks}/${filePath}.${language}`;
-          const registryPath = `${REPO_URLS[language.toUpperCase() as keyof typeof REPO_URLS]}/hooks/${filePath}.${language}`;
+          const registryPath = `${
+            REPO_URLS[language.toUpperCase() as keyof typeof REPO_URLS]
+          }/hooks/${dependency.name}/${dependency.name}.${language}`;
           const indexPath = `${pathToLoadHooks}/index.${language}`;
           return {
             name: dependency.name,
@@ -180,9 +198,11 @@ export const add = {
         }
 
         if (dependency.type === 'util') {
-          const filePath = `${dependency.name}`;
+          const filePath = toCase(`${dependency.name}`, config.case);
           const directoryPath = `${pathToLoadUtils}/${filePath}.${language}`;
-          const registryPath = `${REPO_URLS[language.toUpperCase() as keyof typeof REPO_URLS]}/utils/helpers/${filePath}.${language}`;
+          const registryPath = `${
+            REPO_URLS[language.toUpperCase() as keyof typeof REPO_URLS]
+          }/utils/helpers/${dependency.name}.${language}`;
           const indexPath = `${pathToLoadUtils}/index.${language}`;
           return {
             name: dependency.name,
@@ -233,9 +253,7 @@ export const add = {
 
       const fileResponse = await fetches.get<Buffer>(registryPath);
       await fs.writeFileSync(directoryPath, fileResponse.data);
-      if (type === 'hook') {
-        await updateImports(directoryPath, config.aliases.utils);
-      }
+      await updateImports(directoryPath, config);
 
       const exportStatement = `export * from './${filePath}';\n`;
 
@@ -247,7 +265,9 @@ export const add = {
 
     const packageManager = await getPackageManager(options.cwd);
 
-    spinner.text = `Installing packages ${chalk.bold(packages.join(', '))} with ${chalk.cyan(packageManager)}`;
+    spinner.text = `Installing packages ${chalk.bold(packages.join(', '))} with ${chalk.cyan(
+      packageManager
+    )}`;
     if (packages.length) {
       await execa(packageManager, [packageManager === 'npm' ? 'install' : 'add', ...packages], {
         cwd: options.cwd

packages/cli/src/init.ts

@@ -43,7 +43,8 @@ export const init = async () => {
       aliases: {
         hooks: '@/shared/hooks',
         utils: '@/utils/lib'
-      }
+      },
+      case: 'camel'
     };
     await fs.writeFileSync(configPath, JSON.stringify(config, null, 2), 'utf8');
     console.log(JSON.stringify(config, null, 2));

packages/cli/src/utils/helpers/index.ts

@@ -1,2 +1,4 @@
-export * from './getConfig';
-export * from './getPackageManager';
+export * from "./getConfig";
+export * from "./getPackageManager";
+export * from "./toKebabCase";
+export * from "./toCase";

packages/cli/src/utils/helpers/toCase.ts

@@ -0,0 +1,4 @@
+import { toKebabCase } from "./toKebabCase";
+
+export const toCase = (string: string, mode: "camel" | "kebab" = "camel") =>
+  mode === "camel" ? string : toKebabCase(string);

packages/cli/src/utils/helpers/toKebabCase.ts

@@ -0,0 +1,5 @@
+export const toKebabCase = (string: string) =>
+  string.replace(
+    /[A-Z]+(?![a-z])|[A-Z]/g,
+    (match, offset) => (offset ? "-" : "") + match.toLowerCase()
+  );

packages/cli/src/utils/types/index.ts

@@ -27,7 +27,8 @@ export const configSchema = z
     aliases: z.object({
       hooks: z.string(),
       utils: z.string()
-    })
+    }),
+    case: z.literal(['camel', 'kebab']).optional()
   })
   .strict();
 

packages/docs/app/reactuse-json.md

@@ -28,7 +28,7 @@ Setting this option to `false` allows hooks to be added as JavaScript with the `
 
 ```json title="reactuse.json"
 {
-  "ts": "true | false"
+  "ts": true | false
 }
 ```
 
@@ -66,3 +66,18 @@ Import alias for your hooks.
   }
 }
 ```
+
+## case
+
+Controls the naming convention for generated files.
+
+There are two options:
+
+- `camel`: All files will be generated in `camelCase` (e.g., `useClickOutside.ts`).
+- `kebab`: All files will be generated in `kebab-case` (e.g., `use-click-outside.ts`).
+
+```json title="reactuse.json"
+{
+  "case": "camel" | "kebab"
+}
+```