Chore: new project structure

bin/combine/components/combine-components.js

@@ -5,43 +5,41 @@ const fs = require("file-system");
  * @description this function is used to combine components in a specific folder.
  * @param {Array} components - array of components to be combined.
  * @param {string} folder - the name or path of folder that combines the components.
- * @version 1.0.0
+ * @version 2.0.0
  * @author [Omar Belghaouti](https://github.com/Omar-Belghaouti)
  */
 exports.combineComponents = (components, folder) => {
   if (components.length <= 1) {
     console.log("Please provide at least 2 components");
     return;
   }
-  let files = [];
+  const path = "src/components/";
+  const _path = `${path}${folder}/`;
+  let folders = [];
   components.forEach((component) => {
-    fs.readdirSync(`src/components/`)
-      .filter((file) => file.startsWith(component.toLowerCase()))
-      .forEach((file) => {
-        files.push(file);
-      });
+    fs.readdirSync(path)
+      .filter((f) => f === component)
+      .forEach((f) => folders.push(f));
   });
-  if (files.length < components.length) {
-    console.log("Check if these components do exist");
+  if (folders.length < components.length) {
+    console.log("Check if all of these components exist");
     return;
   }
-  const path = `src/components/${folder}`;
-  if (!fs.existsSync(path)) {
-    fs.mkdirSync(path);
+  if (!fs.existsSync(_path)) {
+    fs.mkdirSync(_path);
   } else {
-    console.log(`${path} already exist`);
+    console.log(`${_path} already exist`);
     console.log("Writing new files...");
   }
-  files.forEach((file) => {
-    const path = `src/components/${folder}/${file}`;
-    if (fs.existsSync(path)) {
-      console.log(`${path} already exist`);
+  folders.forEach((f) => {
+    if (fs.existsSync(`${_path}${f}/`)) {
+      console.log(`${_path}${f}/ already exist`);
     } else {
-      fs.rename(`src/components/${file}`, path, (err) => {
+      fs.rename(`${path}${f}/`, `${_path}${f}`, (err) => {
         if (err) {
-          console.log(`Cannot move ${file} component`);
+          console.log(`Cannot move ${f} component`);
         } else {
-          console.log(`${file} component moved to src/components/${folder}/`);
+          console.log(`${f} component moved to ${_path}`);
         }
       });
     }

bin/combine/pages/combine-pages.js

@@ -5,46 +5,43 @@ const fs = require("file-system");
  * @description this function is used to combine pages in a specific folder.
  * @param {Array} pages - array of pages to be combined.
  * @param {string} folder - the name or path of folder that combines the pages.
- * @version 1.0.0
+ * @version 2.0.0
  * @author [Omar Belghaouti](https://github.com/Omar-Belghaouti)
  */
 exports.combinePages = (pages, folder) => {
   if (pages.length <= 1) {
     console.log("Please provide at least 2 pages");
     return;
   }
+  const path = "src/pages/";
+  const _path = `${path}${folder}/`;
   let folders = [];
   pages.forEach((page) => {
-    fs.readdirSync(`src/pages/`)
-      .filter((f) => f === page.toLowerCase())
-      .forEach((f) => {
-        folders.push(f);
-      });
+    fs.readdirSync(path)
+      .filter((f) => f === page)
+      .forEach((f) => folders.push(f));
   });
-  if (folders.length < pages.length) {
-    console.log("Check if these pages do exist");
+  if (folders.length < screens.length) {
+    console.log("Check if all of these screens exist");
     return;
   }
-  const path = `src/pages/${folder}`;
-  if (!fs.existsSync(path)) {
-    fs.mkdirSync(path);
+  if (!fs.existsSync(_path)) {
+    fs.mkdirSync(_path);
   } else {
-    console.log(`${path} already exist`);
-    console.log(`Writing new files...`);
+    console.log(`${_path} already exist`);
+    console.log("Writing new files...");
   }
   folders.forEach((f) => {
-    const path = `src/pages/${folder}/${f}/`;
-    if (fs.existsSync(path)) {
-      console.log(`${path} already exist`);
+    if (fs.existsSync(`${_path}${f}`)) {
+      console.log(`${_path}${f}/ already exist`);
     } else {
-      fs.renameSync(`src/pages/${f}/`, path, (err) => {
+      fs.rename(`${path}${f}/`, `${_path}${f}`, (err) => {
         if (err) {
-          console.log(`Cannot move ${f} page`);
+          console.log(`Cannot move ${f} screen`);
         } else {
-          console.log(`${f} page moved to src/pages/${folder}/`);
+          console.log(`${f} screen moved to ${_path}`);
         }
       });
-      console.log(`${f} page moved to src/pages/${folder}/`);
     }
   });
 };

bin/create/component/functions/create-component.js

@@ -1,5 +1,9 @@
 const fs = require("file-system");
-const { componentTemplateJs, componentTemplateTs } = require("../templates");
+const {
+  componentTemplateJs,
+  componentTemplateTs,
+  stylesTemplate,
+} = require("../templates");
 
 /**
  * @function createComponent
@@ -13,11 +17,24 @@ const { componentTemplateJs, componentTemplateTs } = require("../templates");
  * @author [Omar Belghaouti](https://github.com/Omar-Belghaouti)
  */
 exports.createComponent = (componentName, js, ts, folder, template) => {
+  let component =
+    componentName.charAt(0).toUpperCase() + componentName.slice(1);
+  if (componentName.includes("-")) {
+    component = "";
+    let words = componentName.split("-");
+    words.forEach((w) => {
+      component += w.charAt(0).toUpperCase() + w.slice(1);
+    });
+  }
   if (ts) {
     const path =
       folder === ""
-        ? `src/components/${componentName.toLowerCase()}.tsx`
-        : `src/components/${folder}/${componentName.toLowerCase()}.tsx`;
+        ? `src/components/${componentName.toLowerCase()}/index.tsx`
+        : `src/components/${folder}/${componentName.toLowerCase()}/index.tsx`;
+    const stylesPath =
+      folder === ""
+        ? `src/components/${componentName.toLowerCase()}/styles.css`
+        : `src/components/${folder}/${componentName.toLowerCase()}/styles.css`;
     if (fs.existsSync(path)) {
       console.log(`${path} already exist`);
     } else {
@@ -34,30 +51,48 @@ exports.createComponent = (componentName, js, ts, folder, template) => {
           fs.writeFile(path, file, (err) => {
             if (err) {
               console.log(err);
-              console.log(`Unable to create ${componentName} component`);
+              console.log(`Unable to create ${component} component`);
             } else {
               console.log(`${path} created`);
             }
           });
+          fs.writeFile(stylesPath, stylesTemplate(component), (err) => {
+            if (err) {
+              console.log(`Unable to create ${component} component styles`);
+            } else {
+              console.log(`${stylesPath} created`);
+            }
+          });
         } else {
           console.log(`.template/${template} file does not exist`);
         }
       } else {
-        fs.writeFile(path, componentTemplateTs(componentName), (err) => {
+        fs.writeFile(path, componentTemplateTs(component), (err) => {
           if (err) {
             console.log(err);
-            console.log(`Unable to create ${componentName} component`);
+            console.log(`Unable to create ${component} component`);
           } else {
             console.log(`${path} created`);
           }
         });
+        fs.writeFile(stylesPath, stylesTemplate(component), (err) => {
+          if (err) {
+            console.log(`Unable to create ${component} component styles`);
+          } else {
+            console.log(`${stylesPath} created`);
+          }
+        });
       }
     }
   } else {
     const path =
       folder === ""
-        ? `src/components/${componentName.toLowerCase()}.jsx`
-        : `src/components/${folder}/${componentName.toLowerCase()}.jsx`;
+        ? `src/components/${componentName.toLowerCase()}/index.jsx`
+        : `src/components/${folder}/${componentName.toLowerCase()}/index.jsx`;
+    const stylesPath =
+      folder === ""
+        ? `src/components/${componentName.toLowerCase()}/styles.css`
+        : `src/components/${folder}/${componentName.toLowerCase()}/styles.css`;
     if (fs.existsSync(path)) {
       console.log(`${path} already exist`);
     } else {
@@ -74,22 +109,36 @@ exports.createComponent = (componentName, js, ts, folder, template) => {
           fs.writeFile(path, file, (err) => {
             if (err) {
               console.log(err);
-              console.log(`Unable to create ${componentName} component`);
+              console.log(`Unable to create ${component} component`);
             } else {
               console.log(`${path} created`);
             }
           });
+          fs.writeFile(stylesPath, stylesTemplate(component), (err) => {
+            if (err) {
+              console.log(`Unable to create ${component} component styles`);
+            } else {
+              console.log(`${stylesPath} created`);
+            }
+          });
         } else {
           console.log(`.template/${template} file does not exist`);
         }
       } else {
-        fs.writeFile(path, componentTemplateJs(componentName), (err) => {
+        fs.writeFile(path, componentTemplateJs(component), (err) => {
           if (err) {
-            console.log(`Unable to create ${componentName} component`);
+            console.log(`Unable to create ${component} component`);
           } else {
             console.log(`${path} created`);
           }
         });
+        fs.writeFile(stylesPath, stylesTemplate(component), (err) => {
+          if (err) {
+            console.log(`Unable to create ${component} component styles`);
+          } else {
+            console.log(`${stylesPath} created`);
+          }
+        });
       }
     }
   }

bin/create/component/templates/component-template-js.js

@@ -7,12 +7,11 @@
  * @author [Omar Belghaouti](https://github.com/Omar-Belghaouti)
  */
 exports.componentTemplateJs = (componentName) => {
-  let component =
-    componentName.charAt(0).toUpperCase() + componentName.slice(1);
-  return `// export ${component} component
-const ${component} = () => {
-    return <div>${component} component created!</div>;
+  return `import styles from './styles.css';
+
+const ${componentName} = () => {
+    return <div>${componentName} component created!</div>;
 }
-export default ${component};
+export default ${componentName};
 `;
 };

bin/create/component/templates/component-template-ts.js

@@ -7,17 +7,14 @@
  * @author [Omar Belghaouti](https://github.com/Omar-Belghaouti)
  */
 exports.componentTemplateTs = (componentName) => {
-  let component =
-    componentName.charAt(0).toUpperCase() + componentName.slice(1);
   return `import { FC } from "react";
+import styles from "./styles.css";
 
-// define ${component} props interface
-interface ${component}Props {}
+interface ${componentName}Props {}
 
-// export ${component} component
-const ${component}: FC<${component}Props> = ({}: ${component}Props): JSX.Element => {
-    return <div>${component} component created!</div>;
+const ${componentName}: FC<${componentName}Props> = ({}: ${componentName}Props): JSX.Element => {
+    return <div>${componentName} component created!</div>;
 }
-export default ${component};
+export default ${componentName};
 `;
 };

bin/create/component/templates/index.js

@@ -1,5 +1,7 @@
 const { componentTemplateJs } = require("./component-template-js");
 const { componentTemplateTs } = require("./component-template-ts");
+const { stylesTemplate } = require("./styles-template");
 
 exports.componentTemplateJs = componentTemplateJs;
 exports.componentTemplateTs = componentTemplateTs;
+exports.stylesTemplate = stylesTemplate;

bin/create/component/templates/styles-template.js

@@ -0,0 +1,9 @@
+/**
+ * @function stylesTemplate
+ * @description this function returns the default styles template for a component.
+ * @param {string} componentName - name of component.
+ * @author [Omar Belghaouti](https://github.com/Omar-Belghaouti)
+ */
+exports.stylesTemplate = (componentName) => {
+  return `/* ${componentName} styles */`;
+};