Enable variables from json file (#3)

.gitignore

@@ -1,2 +1,3 @@
 node_modules
-build
+build
+moris.json

README.md

@@ -49,8 +49,9 @@ To change Moris default settings create a file <code>moris.json</code> at the ro
 moris.json
 
 {
-    "indexContent": "import React from 'react'\n",
-    "stylesContent": "import styled from 'styled'\n export const AppWrapper = styled.div``\n"
+    "useAbsolutePath": "src",
+    "indexContent": "import React from 'react'\nimport ${name}Wrapper from '${path}${name}'\n",
+    "stylesContent": "import styled from 'styled'\n export const ${name}Wrapper = styled.div``\n"
 }
 ```
 
@@ -59,26 +60,52 @@ moris.json
 <table>
   <tr>
     <th><h3><b>Argument</b></h3></th>
-    <th><h3><b>Type</b></h3></th>
+    <th><h3><b>Usage</b></h3></th>
+    <th><h3><b>Options</b></h3></th>
+  </tr>
+  <tr>
+    <td>useAbsolutePath</td>
+    <td><code>"useAbsolutePath": "src"</code></td>
+    <td><code>"-"</code> path without any suffixes, <code>"anything you want"</code> any suffix you prefer</td>
   </tr>
   <tr>
     <td>indexContent</td>
-    <td>string</td>
+    <td><code>"indexContent": "import React from 'react'\n"</code></td>
   </tr>
   <tr>
     <td>stylesContent</td>
-    <td>string</td>
+    <td><code>"stylesContent": "import styled from 'styled'\n"</code></td>
   </tr>
   <tr>
     <td>hookContent</td>
-    <td>string</td>
+    <td><code>"hookContent": "import { useState, useEffect } from 'react'\n"</code></td>
   </tr>
   <tr>
     <td>typesContent</td>
-    <td>string</td>
+    <td><code>"typesContent": "import AnotherType from 'types/Example'"</code></td>
   </tr>
   <tr>
     <td>constantsContent</td>
-    <td>string</td>
+    <td><code>"constantsContent": "import AnotherConstant from 'constants/Example'"</code></td>
+  </tr>
+</table>
+
+</br>
+
+<h3><b>Variables</b></h3>
+
+
+<table>
+  <tr>
+    <th><h3><b>Variable</b></h3></th>
+    <th><h3><b>Description</b></h3></th>
+  </tr>
+  <tr>
+    <td><code>${name}</code></td>
+    <td>Uses a dynamic name that you pass when creating a component instead of a statically generated</td>
+  </tr>
+  <tr>
+    <td><code>${path}</code></td>
+    <td>Uses a dynamic path that you pass when creating a component instead of a statically generated</td>
   </tr>
-</table>
+</table>

src/helpers.ts

@@ -3,6 +3,17 @@ import fs from 'fs';
 import chalk from 'chalk';
 import { TMorisSettings, TReturnDefaultContent } from './types';
 
+const returnModifiedPath = (
+  pathWithoutSrc: string,
+  useAbsolutePath?: string,
+): string => {
+  const emptyAbsolute = useAbsolutePath === '-' ? '' : useAbsolutePath;
+  const showSlash = emptyAbsolute === '' ? '' : '/';
+  const folderAfterSrc = pathWithoutSrc || 'components';
+
+  return `${emptyAbsolute}${showSlash}${folderAfterSrc}`;
+};
+
 export const logCommandStatus = (
   name: string,
   path: string,
@@ -23,24 +34,56 @@ export const logCommandStatus = (
   console.log(status);
 };
 
-export const returnMorisSettings = (dirname: string): TMorisSettings => {
+export const returnMorisSettings = (
+  dirname: string,
+  componentName: string,
+  pathWithoutSrc: string,
+): TMorisSettings => {
   const morisPath = path.join(dirname, 'moris.json');
   const morisFileExists = fs.existsSync(morisPath);
 
   if (!morisFileExists) return {};
 
   const data = fs.readFileSync(morisPath, 'utf8');
+  const settings = JSON.parse(data);
 
-  return JSON.parse(data);
+  const fileKeys = [
+    'indexContent',
+    'stylesContent',
+    'hookContent',
+    'typesContent',
+    'constantsContent',
+  ];
+
+  for (const key of fileKeys) {
+    if (settings[key]) {
+      settings[key] = settings[key].replace(/\${name}/g, componentName);
+      settings[key] = settings[key].replace(
+        /\${path}/g,
+        returnModifiedPath(pathWithoutSrc, settings.useAbsolutePath),
+      );
+    }
+  }
+
+  return settings;
 };
 
 export const returnDefaultContent = (
   name: string,
   pathWithoutSrc: string,
+  useAbsolutePath?: string,
 ): TReturnDefaultContent => {
   const hookName = `use${name}`;
   const propsName = `${name}Props`;
   const stylesName = `${name}Wrapper`;
+  const modifiedPath = returnModifiedPath(pathWithoutSrc, useAbsolutePath);
+
+  const hookImport = useAbsolutePath
+    ? `${modifiedPath}/${hookName}`
+    : `./${hookName}`;
+
+  const typesImport = useAbsolutePath ? `${modifiedPath}/types` : './types';
+  const stylesImport = useAbsolutePath ? `${modifiedPath}/styles` : './styles';
 
   const defaultTypesContent = `export type ${propsName} = {};\n`;
 
@@ -50,9 +93,9 @@ export const ${stylesName} = styled.div\`\`;\n`;
   const defaultHookContent = `import { useState, useEffect } from 'react';\n
 export const ${hookName} = () => {};\n`;
 
-  const defaultIndexContent = `import { ${hookName} } from '${pathWithoutSrc}/${name}/${hookName}';
-import { ${propsName} } from '${pathWithoutSrc}/${name}/types';
-import { ${stylesName} } from '${pathWithoutSrc}/${name}/styles';\n
+  const defaultIndexContent = `import { ${hookName} } from '${hookImport}';
+import { ${propsName} } from '${typesImport}';
+import { ${stylesName} } from '${stylesImport}';\n
 const ${name} = ({}: ${propsName}) => {
 use${name}();\n
 return <${stylesName}></${stylesName}>;

src/index.ts

@@ -8,16 +8,6 @@ import {
   returnDefaultContent,
 } from './helpers';
 
-const dirname = process.cwd();
-
-const {
-  indexContent,
-  stylesContent,
-  hookContent,
-  typesContent,
-  constantsContent,
-} = returnMorisSettings(dirname);
-
 program.version('1.0.0').description('Custom CLI for React');
 
 program
@@ -28,8 +18,8 @@ program
   .description('Create a new React component')
   .option('-p, --path <path>', 'Specify a custom path')
   .action((name: string, options) => {
+    const dirname = process.cwd();
     const componentPath = options.path || 'src/components';
-
     let componentFolder: string;
     let pathWithoutSrc: string;
 
@@ -41,25 +31,34 @@ program
       pathWithoutSrc = `components`;
     }
 
-    const componentFile = path.join(componentFolder, 'index.tsx');
-    const stylesFile = path.join(componentFolder, 'styles.ts');
-    const typesFile = path.join(componentFolder, 'types.ts');
-    const hookFile = path.join(componentFolder, `use${name}.ts`);
-    const constantsFile = path.join(componentFolder, 'constants.ts');
+    const {
+      indexContent,
+      stylesContent,
+      hookContent,
+      typesContent,
+      constantsContent,
+      useAbsolutePath,
+    } = returnMorisSettings(dirname, name, pathWithoutSrc);
 
     const {
       defaultHookContent,
       defaultIndexContent,
       defaultStylesContent,
       defaultTypesContent,
-    } = returnDefaultContent(name, pathWithoutSrc);
+    } = returnDefaultContent(name, pathWithoutSrc, useAbsolutePath);
 
     const typesFileContent = typesContent || defaultTypesContent;
     const stylesFileContent = stylesContent || defaultStylesContent;
     const hookFileContent = hookContent || defaultHookContent;
     const componentContent = indexContent || defaultIndexContent;
     const constantsFileContent = constantsContent || '';
 
+    const componentFile = path.join(componentFolder, 'index.tsx');
+    const stylesFile = path.join(componentFolder, 'styles.ts');
+    const typesFile = path.join(componentFolder, 'types.ts');
+    const hookFile = path.join(componentFolder, `use${name}.ts`);
+    const constantsFile = path.join(componentFolder, 'constants.ts');
+
     if (fs.existsSync(componentFolder))
       return logCommandStatus(name, componentPath, true);
 

src/types.ts

@@ -4,6 +4,7 @@ export type TMorisSettings = {
   hookContent?: string;
   typesContent?: string;
   constantsContent?: string;
+  useAbsolutePath?: string;
 };
 
 export type TReturnDefaultContent = {