Merge pull request #39 from Adedoyin-Emmanuel/v1.4.4

V1.4.4

Author: Adedoyin-Emmanuel

README.md

@@ -13,12 +13,16 @@ Methane is a **CLI** tool that helps developers easily create **React components
 
 ## What's New ❓
 
-The patch version **1.4.1** aims to fix issues related to the **components and pages** generation.
+The latest patch version 1.4.8 introduces a crucial fix that enhances the naming conventions for generated components and Next.js pages. This update ensures that hyphenated names are correctly capitalized, providing a more consistent and readable codebase.
 
-1. React Components and Pages as well as NextJs Components, Pages name default to `index.jsx` or `index.tsx` if **generateFolder** configuration is specified. This makes **components and pages** import cleaner and easier to understand. For example, if you generate a component called `Button`, the generated component path would be `Button/index.jsx` or `Button/index.tsx` and you can import it like this `import Button from './components/Button'`. Unlike before where you would have to import it like this `import Button from './components/Button/Button'`.
-2. Fixed component and pages capitalization issue. In previous versions of **Methane**, if you generate a component called `button`, the file name remains `button` but the generated component would be `button` instead of `Button`. This has been fixed in this version.
-3. Gracefully handled potential error that might occur when generating pages or components.
-4. Added a new argument `-d` or `--default` to `methane init` command. This allows developers to easily intialize **Methane** with the default configuration without being prompted to answer questions. This is useful when you want to quickly initialize **Methane** in a new project. **Note** You can always update the **Methane** configuration by running `methane config` command.
+**Component Capitalization Fix:**
+
+When generating components with hyphenated names, **Methane** will now correctly capitalize each segment of the name. For instance, creating a component named `animated-button` will result in a component named `AnimatedButton`. This ensures that components follow standard **PascalCase** naming conventions, enhancing code readability and consistency.
+
+**Next.js Page Capitalization Fix:**
+
+Similarly, generating Next.js pages with hyphenated names will now produce correctly capitalized page names. For example, a page named 2fa-auth will be created as 2FaAuth, user-appointments as UserAppointments, and privacy-policy as PrivacyPolicy. This fix ensures that page names are intuitive and follow common naming practices.
+**Please Note:** Your nextJs page route will not be affected by this change. This change only affects the name of the generated page or component.
 
 ## Installation 💿
 
@@ -320,5 +324,9 @@ Please star this repo if you find it useful. Also share the good news with your
 
 ## Contibutors 👨‍
 
-<a href="https://github.com/adedoyin-emmanuel"> <img src="https://www.npmjs.com/npm-avatar/eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhdmF0YXJVUkwiOiJodHRwczovL3MuZ3JhdmF0YXIuY29tL2F2YXRhci82YjdmNjY1YjY5NzNlMTA5MDY5NWYxNGQ5ZTFjN2FlMT9zaXplPTQ5NiZkZWZhdWx0PXJldHJvIn0.VLsXZqAcYRo73KaG7EmkZtMv67-fHx-8x4Fo_nXv_b4"  style="border-radius:50%" width="30" height="30"/>
-</a>
+<div style="display: flex; flex-wrap: wrap;">
+  <a href="https://github.com/adedoyin-emmanuuel" style="margin-right: 10px;">
+    <img src="https://github.com/adedoyin-emmanuel.png" width="80" height="80" style="border-radius: 50%; border: 2px solid #000;" alt="Adedoyin Emmanuel"/>
+  </a>
+
+</div>

helpers/generators/generateComponent.ts

@@ -3,7 +3,7 @@ import fs from "fs";
 import path from "path";
 import * as readUserConfig from "../utilis/readUserConfig.js";
 import * as componentResolver from "./resolvers/resolveComponentContent.js";
-import { captitalizeWord } from "helpers/utilis/capitalize.js";
+import capititalizeWord from "./../../helpers/utilis/capitalize.js";
 
 const findComponentDirectory = () => {
   const rootDir = process.cwd();
@@ -40,7 +40,7 @@ const generateComponentFile = async (
     componentDir,
     componentResolver.resolveComponentContent(
       readUserConfig,
-      captitalizeWord(name)
+      capititalizeWord(name)
     ),
     (error) => {
       if (error) {
@@ -116,7 +116,7 @@ export const generateComponent = async (name: string) => {
     console.log(
       `${colors.bold(
         colors.green(
-          `${captitalizeWord(name)} component generated successfully 🚀`
+          `${capititalizeWord(name)} component generated successfully 🚀`
         )
       )}`
     );

helpers/generators/generateNextJsComponent.ts

@@ -3,7 +3,7 @@ import fs from "fs";
 import path from "path";
 import * as readUserConfig from "../utilis/readUserConfig.js";
 import * as componentResolver from "./resolvers/resolveNextJsComponentContent.js";
-import { captitalizeWord } from "helpers/utilis/capitalize.js";
+import capititalizeWord from "./../../helpers/utilis/capitalize.js";
 
 const findComponentDirectory = () => {
   const rootDir = process.cwd();
@@ -55,7 +55,7 @@ const generateComponentFile = async (
     componentDir,
     componentResolver.resolveComponentContent(
       readUserConfig,
-      captitalizeWord(name),
+      capititalizeWord(name),
       componentType
     ),
     (error) => {
@@ -128,7 +128,7 @@ export const generateComponent = async (
     console.log(
       `${colors.bold(
         colors.green(
-          `${captitalizeWord(name)} component generated successfully 🚀`
+          `${capititalizeWord(name)} component generated successfully 🚀`
         )
       )}`
     );

helpers/generators/generateNextJsDynamicPage.ts

@@ -3,7 +3,7 @@ import fs from "fs";
 import path from "path";
 import * as readUserConfig from "../utilis/readUserConfig.js";
 import * as pageResolver from "./resolvers/resolveNextJsDynamicPageContent.js";
-import { captitalizeWord } from "helpers/utilis/capitalize.js";
+import capititalizeWord from "./../../helpers/utilis/capitalize.js";
 
 const findPagesDirectory = () => {
   const rootDir = process.cwd();
@@ -71,7 +71,7 @@ const generateDynamicPageFile = async (
     pageResolver.resolveDynamicPageContent(
       dynamicId,
       readUserConfig,
-      captitalizeWord(name),
+      capititalizeWord(name),
       componentType
     )
   );
@@ -122,7 +122,7 @@ export const generatePage = async (
 
     generateDynamicPageFile(
       dynamicId,
-      captitalizeWord(dynamicId),
+      capititalizeWord(dynamicId),
       pageDirName,
       pageResolver,
       componentType
@@ -131,7 +131,7 @@ export const generatePage = async (
     console.log(
       `${colors.bold(
         colors.green(
-          `${captitalizeWord(dynamicId)} page generated successfully 🚀`
+          `${capititalizeWord(dynamicId)} page generated successfully 🚀`
         )
       )}`
     );

helpers/generators/generateNextJsPage.ts

@@ -3,7 +3,8 @@ import fs from "fs";
 import path from "path";
 import * as readUserConfig from "../utilis/readUserConfig.js";
 import * as pageResolver from "./resolvers/resolveNextJsPageContent.js";
-import { captitalizeWord } from "helpers/utilis/capitalize.js";
+import capititalizeWord from "./../../helpers/utilis/capitalize.js";
+
 
 const findPagesDirectory = () => {
   const rootDir = process.cwd();
@@ -72,7 +73,7 @@ const generatePageFile = async (
     pageFilePath,
     pageResolver.resolvePageContent(
       readUserConfig,
-      captitalizeWord(name),
+      capititalizeWord(name),
       componentType
     ),
     (error) => {
@@ -141,7 +142,7 @@ export const generatePage = async (
 
     console.log(
       `${colors.bold(
-        colors.green(`${captitalizeWord(name)} page generated successfully 🚀`)
+        colors.green(`${capititalizeWord(name)} page generated successfully 🚀`)
       )}`
     );
   } catch (error: any) {

helpers/generators/generatePage.ts

@@ -4,7 +4,8 @@ import path from "path";
 import * as readUserConfig from "../utilis/readUserConfig.js";
 import * as pageRegisterer from "./register/registerPage.js";
 import * as pageResolver from "./resolvers/resolvePageContent.js";
-import { captitalizeWord } from "helpers/utilis/capitalize.js";
+import capititalizeWord from "./../../helpers/utilis/capitalize.js";
+
 
 const rootDir = path.join(process.cwd());
 const pageDir = [
@@ -33,7 +34,7 @@ const generatePageFile = async (
 
   await fs.writeFile(
     pageDir,
-    pageResolver.resolvePageContent(readUserConfig, captitalizeWord(name)),
+    pageResolver.resolvePageContent(readUserConfig, capititalizeWord(name)),
     (error) => {
       if (error) {
         console.log(colors.bold(colors.red(error.toString())));
@@ -110,7 +111,7 @@ export const generatePage = async (name: string) => {
 
     console.log(
       `${colors.bold(
-        colors.green(`${captitalizeWord(name)} page generated successfully 🚀`)
+        colors.green(`${capititalizeWord(name)} page generated successfully 🚀`)
       )}`
     );
   } catch (error: any) {

helpers/generators/generateServiceWorker.ts

@@ -26,13 +26,13 @@ const generateServiceWorkerFile = async () => {
       await fs.writeFile(
         path.resolve(SWDir, "serviceWorkerRegistration.js"),
         swResolver.resolveServiceWorkerRegistrationTemplate(),
-        (error:any) => {
+        (error: any) => {
           if (error) {
             console.log(colors.bold(colors.red(error.toString())));
           }
         }
       );
-    } catch (error:any) {
+    } catch (error: any) {
       console.log(colors.bold(colors.red(error)));
     }
   } else {
@@ -47,6 +47,4 @@ const generateServiceWorkerFile = async () => {
   swRegisterer.checkAndImportServiceWorker();
 };
 
-export {
-  generateServiceWorkerFile,
-};
+export { generateServiceWorkerFile };

helpers/utilis/capitalize.ts

@@ -1,6 +1,13 @@
-export const captitalizeWord = (word: string): string => {
-  if (!word) return word;
+const capitalize = (word: string) => {
+  if (!word) return "";
 
   return word.charAt(0).toUpperCase() + word.slice(1);
 };
 
+const capititalizeWord = (word: string): string => {
+  if (!word) return "";
+
+  return word.split("-").map(capitalize).join("");
+};
+
+export default capititalizeWord;

helpers/utilis/packageDescription.ts

@@ -3,7 +3,7 @@ import colors from "colors";
 import { program } from "commander";
 const packageDescription = () => {
   program
-    .version("1.4.1")
+    .version("1.4.8")
     .description(
       colors.cyan(
         "Methane-Cli is a tool for efficient creation of React or NextJs components, pages and Service Worker files."

index.ts

@@ -9,8 +9,6 @@ import { packageGenerator } from "./helpers/utilis/packageGenerator.js";
 import { InitMethaneCLI } from "./helpers/utilis/packageInit.js";
 import { listAllConfig } from "./helpers/utilis/packageListConfiguration.js";
 
-/* Configure Figlet for the package name */
-
 figlet.text(
   "Methane",
   {