Generate components

README.md

@@ -5,18 +5,13 @@ This is a tool to generate layouts for ngxjs
 
 
 ### Usages
-```ngx g <Component> --main <layout> --toolbar --side-nav <left|right>```
+```ngx componany <Component> --output <outputPath> --config <configPath>```
 
 Example:
 
-Create ContactUs uses grid layout 4 rows, 3 cols
-
-```ngx g ContactUs --main grid --rows 4 --cols 3```
-
-Create ContactUs uses grid layout 4 rows, 3 cols, and has toolbar and left side nav
-
-```ngx g ContactUs --main grid --rows 4 --cols 3 --toolbar --side-nav left```
+Create ContactUs
 
+```ngx componany ContactUs --output ./demo/ --config ./demo/abc.config.js```
 
 ### Development
 

default-config.js

@@ -0,0 +1,15 @@
+module.exports = {
+  main: {
+    grid: {
+      cols: 3,
+      rows: 3
+    },
+    card: true,
+    list: true
+  },
+  sidenav: {
+    left: "over"
+  },
+  toolbar: true,
+  tabbar: true
+};

generators/grid/index.js

@@ -1,6 +1,122 @@
-function GridGenerator(row, col) {
+var fs = require('fs');
+var path = require('path');
+var _ = require('lodash');
 
+var generate = require('../../utils/generate');
+
+function generateGrid(component, parameters, outputPath) {
+
+  var grid = parameters.main.grid;
+  var cols = grid && grid.cols;
+  var rows = grid && grid.rows;
+
+  var toolbar = parameters.toolbar;
+  var sidenav = parameters.sidenav;
+
+  var componentFileName = _.kebabCase(component);
+
+  if (!fs.existsSync(componentFileName)) {
+    fs.mkdirSync(path.join(outputPath, componentFileName));
+    fs.mkdirSync(path.join(outputPath, componentFileName, 'styles'));
+    fs.mkdirSync(path.join(outputPath, componentFileName, 'templates'));
+    fs.mkdirSync(path.join(outputPath, componentFileName, 'routes'));
+  } else {
+    console.log('Folder is exists!');
+
+    process.exit();
+  }
+
+  var files = readFiles(path.resolve(__dirname, path.join('..', '..', 'layouts', 'base')));
+
+  Object.keys(files).forEach(function (fileName) {
+    var baseComponentFile = replacePath(fileName, componentFileName);
+
+    var fileContentReplaced = replaceContent(files[fileName], component, componentFileName);
+
+    fs.writeFile(path.join(outputPath, componentFileName, baseComponentFile), fileContentReplaced, function (err) {
+      if (err) {
+        return console.log(err);
+      }
+    });
+  });
+
+  generateTemplate(componentFileName, rows, cols, toolbar, sidenav, outputPath);
+
+  generateStyle(componentFileName, toolbar, sidenav, outputPath);
 }
 
+function generateTemplate(componentFileName, rows, cols, toolbar, sidenav, outputPath) {
+
+  var gridPath = path.join('..', '..', 'layouts', 'grid');
 
+  var sourceHTML = fs.readFileSync(path.resolve(__dirname, path.join(gridPath, 'grid.layout.html')), 'utf-8');
+
+  var context = {
+    rows: rows,
+    cols: cols,
+    toolbar: toolbar,
+    sidenav: sidenav
+  };
+
+  var html = generate(sourceHTML, context);
+
+  fs.writeFile(path.join(outputPath, componentFileName, 'templates', componentFileName + '.component.html'), html, function (err) {
+    if (err) {
+      return console.log(err);
+    }
+  });
+}
+
+function generateStyle(componentFileName, toolbar, sidenav, outputPath) {
+  var gridPath = path.join('..', '..', 'layouts', 'grid');
+
+  var sourceSCSS = fs.readFileSync(path.resolve(__dirname, path.join(gridPath, 'styles', 'grid.component.scss')), 'utf-8');
+
+  var context = {
+    toolbar: toolbar,
+    sidenav: sidenav,
+    baseComponentFile: componentFileName
+  };
+
+  var scss = generate(sourceSCSS, context);
+
+  fs.writeFile(path.join(outputPath, componentFileName, 'styles', componentFileName + '.component.scss'), scss, function (err) {
+    if (err) {
+      return console.log(err);
+    }
+  });
+}
+
+function readFiles(dirname) {
+  var files = {};
+
+  var filenames = fs.readdirSync(dirname);
+
+  filenames.forEach(function (filename) {
+    var pathFile = path.resolve(dirname, filename);
+
+    if (!fs.lstatSync(pathFile).isDirectory()) {
+      files[filename] = fs.readFileSync(pathFile, 'utf-8');
+    } else {
+      var filesInDirectory = readFiles(pathFile);
+      Object.keys(filesInDirectory).map(function (file) {
+        files[path.join(filename, file)] = filesInDirectory[file];
+      });
+    }
+  });
+
+  return files;
+}
+
+function replacePath(fileName, componentFile) {
+  return fileName.replace('base', componentFile);
+}
+
+function replaceContent(content, componentName, componentFile, moduleName) {
+  return content
+    .replace(/{{baseComponent}}/g, componentName)
+    .replace(/{{baseComponentFile}}/g, componentFile)
+    .replace(/{{baseModule}}/g, componentName + 'Module');
+}
 
+module.exports = generateGrid;

generators/index.js

@@ -0,0 +1,25 @@
+var grid = require('./grid');
+
+module.exports = function (name, options, outputPath) {
+
+  if (options.main !== undefined) {
+
+    const main = options.main;
+
+    if (main == 'grid' || main.grid) {
+      grid(name, options, outputPath);
+    } else if (main === 'tabbar') {
+    //   console.log('In Process');
+      // generateTabbar('tabbar', component, componentFile);
+    } else if (main === 'list') {
+    //   console.log('In Process');
+      // generateList('list', component, componentFile);
+    } else if (main === 'feed') {
+    //   console.log('In Process');
+    //   // generateFeed('feed', component, componentFile);
+    }
+  }
+
+
+
+}

index.js

@@ -3,43 +3,66 @@
 var program = require('commander');
 var fs = require('fs');
 var path = require('path');
-var generateGrid = require('./layouts/grid/grid.layout');
+var generate = require('./generators');
 
 program
   .arguments('<cmd> <component>')
+  .option('--config <path>', 'Config Path')
+  .option('--output <path>', 'Output Path')
   .option('--main <main>', 'Generator main layout grid|tabbar|list|feed')
   .option('--rows [rows]', 'Rows number')
   .option('--cols [cols]', 'Cols number')
   .option('--fluid [fluid]', 'Use fluid')
-  .option('--side-nav [side-nav]', 'Generator side-nav left or right | Default left')
+  .option('--sidenav [sidenav]', 'Generator sidenav left or right | Default left')
   .option('--toolbar', 'Generator toolbar')
   .action(function (cmd, component) {
 
-    let main = program.main;
-    let sideNav = program.sideNav;
-    let toolbar = program.toolbar;
-    let rows = program.rows;
-    let cols = program.cols;
-    let fluid = program.fluid;
-
-    if (cmd === 'g' || cmd === 'generate') {
-
-      if (main != undefined) {
-        if (main === 'grid') {
-          generateGrid(component, rows, cols, sideNav, toolbar, fluid);
-        } else if (main === 'tabbar') {
-          console.log('In Process');
-          // generateTabbar('tabbar', component, componentFile);
-        } else if (main === 'list') {
-          console.log('In Process');
-          // generateList('list', component, componentFile);
-        } else if (main === 'feed') {
-          console.log('In Process');
-          // generateFeed('feed', component, componentFile);
+    var defaultConfig = getDefaultConfig();
+    var outputPath = path.join(__dirname, program.output || '.');
+
+    var config;
+
+    if (program.config) {
+      config = require(path.resolve(__dirname, path.resolve(__dirname, program.config)));
+    }
+
+    var options = {};
+
+    if (config) {
+      options = {
+        main: {
+          card: config.main && config.main.card,
+          list: config.main && config.main.list,
+        },
+        toolbar: config.toolbar,
+        tabbar: config.tabbar,
+      }
+
+      if (config.sidenav) {
+        if (config.sidenav.left || config.sidenav.right) {
+          options.sidenav = config.sidenav;
+        } else {
+          options.sidenav = defaultConfig.sidenav
+        }
+      }
+
+      if (config.main.grid) {
+        if (config.main.grid.rows || config.main.grid.cols) {
+          options.main.grid = {
+            rows: config.main && config.main.grid.rows || defaultConfig.main.grid.rows,
+            cols: config.main && config.main.grid.cols || defaultConfig.main.grid.cols,
+          }
+        } else {
+          options.main.grid = defaultConfig.main.grid;
         }
       }
     }
 
-    // console.log('cmd: %s; component: %s; main: %s; side-nav: %s; toolbar %s', cmd, component, program.main, program.sideNav, program.toolbar);
+    generate(component, options, outputPath);
   })
   .parse(process.argv);
+
+
+function getDefaultConfig() {
+  return require(path.resolve(__dirname, path.resolve(__dirname, 'default-config.js')));
+}

layouts/base/base.module.js

@@ -1,11 +1,12 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 
+import { NgxjsModule } from 'ngx-core';
 import { {{baseComponent}}Component } from './{{baseComponentFile}}.component';
 import { {{baseComponent}}RouteModule } from './routes';
 
 @NgModule({
-  imports:      [ CommonModule, {{baseComponent}}RouteModule ],
+  imports:      [ CommonModule, {{baseComponent}}RouteModule, NgxjsModule ],
   declarations: [ {{baseComponent}}Component ],
   exports:      [ ],
   providers:    [ ]

layouts/base/index.js

@@ -1,2 +1,2 @@
-export * from './{{baseComponentFile}}.module';
-export * from './{{baseComponentFile}}.component';
+export { {{baseComponent}}Module } from './{{baseComponentFile}}.module';
+export { {{baseComponent}}Component } from './{{baseComponentFile}}.component';

layouts/grid/grid.layout.html

@@ -3,15 +3,31 @@
 {{/if}}
 
 {{#if sidenav}}
-<ngx-side-nav></ngx-side-nav>
-{{/if}}
+<ngx-sidenav-container>
+  {{#if sidenav.left}}
+  <ngx-sidenav type="{{sidenav.left}}" opened="open" align="left">
+    <p>Sidenav Left</p>
+  </ngx-sidenav>
+  {{/if}}
+
+  {{#if sidenav.right}}
+  <ngx-sidenav type="{{sidenav.right}}" opened="open" align="right">
+    <p>Sidenav Right</p>
+  </ngx-sidenav>
+  {{/if}}
 
-<ngx-grid {{#if fluid}}type="fluid"{{/if}}>
-{{#times rows}}
-  <ngx-row>
-    {{#times cols}}
-      <ngx-col>Col {{@index}}</ngx-col>
-    {{/times}}
-  </ngx-row>
-{{/times}}
-</ngx-grid>
+  <main class="main">
+    <h1>Main Content</h1>
+
+    <ngx-grid{{#if fluid}} type="fluid"{{/if}}>
+      {{#times rows}}
+      <ngx-row>
+        {{#times cols}}
+        <ngx-col>Col {{@index}}</ngx-col>
+        {{/times}}
+      </ngx-row>
+      {{/times}}
+    </ngx-grid>
+  </main>
+</ngx-sidenav-container>
+{{/if}}