diff --git a/README.md b/README.md index 729631b..fb72d1f 100644 --- a/README.md +++ b/README.md @@ -5,18 +5,13 @@ This is a tool to generate layouts for ngxjs ### Usages -```ngx g --main --toolbar --side-nav ``` +```ngx componany --output --config ``` 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 diff --git a/default-config.js b/default-config.js new file mode 100644 index 0000000..e5974c7 --- /dev/null +++ b/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 +}; diff --git a/generators/grid/index.js b/generators/grid/index.js index d6d534b..579bce6 100644 --- a/generators/grid/index.js +++ b/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; diff --git a/generators/index.js b/generators/index.js new file mode 100644 index 0000000..e0f9266 --- /dev/null +++ b/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); + } + } + + + +} diff --git a/generators/toolbar/index.js b/generators/toolbar/index.js deleted file mode 100644 index 635bb64..0000000 --- a/generators/toolbar/index.js +++ /dev/null @@ -1,22 +0,0 @@ - - NGX - - - - favorite - delete - - - - - - - - -
- - - - -
- diff --git a/index.js b/index.js index a8747db..a814f2e 100755 --- a/index.js +++ b/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(' ') + .option('--config ', 'Config Path') + .option('--output ', 'Output Path') .option('--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'))); +} diff --git a/layouts/base/base.module.js b/layouts/base/base.module.js index a4a1dd9..3a895ac 100644 --- a/layouts/base/base.module.js +++ b/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: [ ] diff --git a/layouts/base/index.js b/layouts/base/index.js index 7b1a549..4a056f1 100644 --- a/layouts/base/index.js +++ b/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'; diff --git a/layouts/grid/grid.layout.html b/layouts/grid/grid.layout.html index 1d5be2d..9b12901 100644 --- a/layouts/grid/grid.layout.html +++ b/layouts/grid/grid.layout.html @@ -3,15 +3,31 @@ {{/if}} {{#if sidenav}} - -{{/if}} + + {{#if sidenav.left}} + +

Sidenav Left

+
+ {{/if}} + + {{#if sidenav.right}} + +

Sidenav Right

+
+ {{/if}} - -{{#times rows}} - - {{#times cols}} - Col {{@index}} - {{/times}} - -{{/times}} - +
+

Main Content

+ + + {{#times rows}} + + {{#times cols}} + Col {{@index}} + {{/times}} + + {{/times}} + +
+
+{{/if}} diff --git a/layouts/grid/grid.layout.js b/layouts/grid/grid.layout.js deleted file mode 100644 index 0e1c460..0000000 --- a/layouts/grid/grid.layout.js +++ /dev/null @@ -1,113 +0,0 @@ -var fs = require('fs'); -var path = require('path'); -var _ = require('lodash'); - -var generate = require('../../utils/generate'); - -function generateGrid(component, rows, cols, toolbar, sidenav, fluid) { - if (!rows) rows = 2; - if (!cols) cols = 2; - - let componentFileName = _.kebabCase(component); - - if (!fs.existsSync(componentFileName)) { - fs.mkdirSync(componentFileName); - fs.mkdirSync(path.join(componentFileName, 'styles')); - fs.mkdirSync(path.join(componentFileName, 'templates')); - fs.mkdirSync(path.join(componentFileName, 'routes')); - } else { - console.log('Folder is exists!'); - - process.exit(); - } - - let files = readFiles(path.resolve(__dirname, path.join('..', 'base'))); - - Object.keys(files).forEach(function (fileName) { - let baseComponentFile = replacePath(fileName, componentFileName); - - let fileContentReplaced = replaceContent(files[fileName], component, componentFileName); - - fs.writeFile(path.join(componentFileName, baseComponentFile), fileContentReplaced, function (err) { - if (err) { - return console.log(err); - } - }); - }) - - generateTemplate(componentFileName, rows, cols, toolbar, sidenav, fluid); - - generateStyle(componentFileName, toolbar, sidenav, fluid); -} - -function generateTemplate(componentFileName, rows, cols, toolbar, sidenav, fluid) { - var sourceHTML = fs.readFileSync(path.resolve(__dirname, 'grid.layout.html'), 'utf-8'); - - var context = { - rows: rows, - cols: cols, - toolbar: toolbar, - sidenav: sidenav, - fluid: fluid, - }; - - var html = generate(sourceHTML, context); - - fs.writeFile(path.join(componentFileName, 'templates', componentFileName + '.component.html'), html, function (err) { - if (err) { - return console.log(err); - } - }); -} - -function generateStyle(componentFileName, toolbar, sidenav, fluid) { - var sourceSCSS = fs.readFileSync(path.resolve(__dirname, 'styles', 'grid.component.scss'), 'utf-8'); - - var context = { - toolbar: toolbar, - sidenav: sidenav, - baseComponentFile: componentFileName - }; - - var scss = generate(sourceSCSS, context); - - fs.writeFile(path.join(componentFileName, 'styles', componentFileName + '.component.scss'), scss, function (err) { - if (err) { - return console.log(err); - } - }); -} - -function readFiles(dirname) { - let files = {}; - - let filenames = fs.readdirSync(dirname); - - filenames.forEach(function (filename) { - let pathFile = path.resolve(dirname, filename); - - if (!fs.lstatSync(pathFile).isDirectory()) { - files[filename] = fs.readFileSync(pathFile, 'utf-8'); - } else { - let 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; \ No newline at end of file diff --git a/package-lock.json b/package-lock.json new file mode 100644 index 0000000..33f2f2c --- /dev/null +++ b/package-lock.json @@ -0,0 +1,158 @@ +{ + "name": "ngxjs-cli", + "version": "0.0.1", + "lockfileVersion": 1, + "dependencies": { + "align-text": { + "version": "0.1.4", + "resolved": "https://registry.npmjs.org/align-text/-/align-text-0.1.4.tgz", + "integrity": "sha1-DNkKVhCT810KmSVsIrcGlDP60Rc=" + }, + "amdefine": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/amdefine/-/amdefine-1.0.1.tgz", + "integrity": "sha1-SlKCrBZHKek2Gbz9OtFR+BfOkfU=" + }, + "async": { + "version": "1.5.2", + "resolved": "https://registry.npmjs.org/async/-/async-1.5.2.tgz", + "integrity": "sha1-7GphrlZIDAw8skHJVhjiCJL5Zyo=" + }, + "camelcase": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-1.2.1.tgz", + "integrity": "sha1-m7UwTS4LVmmLLHWLCKPqqdqlijk=", + "optional": true + }, + "center-align": { + "version": "0.1.3", + "resolved": "https://registry.npmjs.org/center-align/-/center-align-0.1.3.tgz", + "integrity": "sha1-qg0yYptu6XIgBBHL1EYckHvCt60=", + "optional": true + }, + "cliui": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/cliui/-/cliui-2.1.0.tgz", + "integrity": "sha1-S0dXYP+AJkx2LDoXGQMukcf+oNE=", + "optional": true, + "dependencies": { + "wordwrap": { + "version": "0.0.2", + "resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-0.0.2.tgz", + "integrity": "sha1-t5Zpu0LstAn4PVg8rVLKF+qhZD8=", + "optional": true + } + } + }, + "commander": { + "version": "2.10.0", + "resolved": "https://registry.npmjs.org/commander/-/commander-2.10.0.tgz", + "integrity": "sha512-q/r9trjmuikWDRJNTBHAVnWhuU6w+z80KgBq7j9YDclik5E7X4xi0KnlZBNFA1zOQ+SH/vHMWd2mC9QTOz7GpA==" + }, + "decamelize": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/decamelize/-/decamelize-1.2.0.tgz", + "integrity": "sha1-9lNNFRSCabIDUue+4m9QH5oZEpA=", + "optional": true + }, + "graceful-readlink": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/graceful-readlink/-/graceful-readlink-1.0.1.tgz", + "integrity": "sha1-TK+tdrxi8C+gObL5Tpo906ORpyU=" + }, + "handlebars": { + "version": "4.0.10", + "resolved": "https://registry.npmjs.org/handlebars/-/handlebars-4.0.10.tgz", + "integrity": "sha1-PTDHGLCaPZbyPqTMH0A8TTup/08=" + }, + "is-buffer": { + "version": "1.1.5", + "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-1.1.5.tgz", + "integrity": "sha1-Hzsm72E7IUuIy8ojzGwB2Hlh7sw=" + }, + "kind-of": { + "version": "3.2.2", + "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz", + "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=" + }, + "lazy-cache": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/lazy-cache/-/lazy-cache-1.0.4.tgz", + "integrity": "sha1-odePw6UEdMuAhF07O24dpJpEbo4=", + "optional": true + }, + "lodash": { + "version": "4.17.4", + "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.4.tgz", + "integrity": "sha1-eCA6TRwyiuHYbcpkYONptX9AVa4=" + }, + "longest": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/longest/-/longest-1.0.1.tgz", + "integrity": "sha1-MKCy2jj3N3DoKUoNIuZiXtd9AJc=" + }, + "minimist": { + "version": "0.0.10", + "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.10.tgz", + "integrity": "sha1-3j+YVD2/lggr5IrRoMfNqDYwHc8=" + }, + "optimist": { + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/optimist/-/optimist-0.6.1.tgz", + "integrity": "sha1-2j6nRob6IaGaERwybpDrFaAZZoY=" + }, + "repeat-string": { + "version": "1.6.1", + "resolved": "https://registry.npmjs.org/repeat-string/-/repeat-string-1.6.1.tgz", + "integrity": "sha1-jcrkcOHIirwtYA//Sndihtp15jc=" + }, + "right-align": { + "version": "0.1.3", + "resolved": "https://registry.npmjs.org/right-align/-/right-align-0.1.3.tgz", + "integrity": "sha1-YTObci/mo1FWiSENJOFMlhSGE+8=", + "optional": true + }, + "source-map": { + "version": "0.4.4", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.4.4.tgz", + "integrity": "sha1-66T12pwNyZneaAMti092FzZSA2s=" + }, + "uglify-js": { + "version": "2.8.29", + "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-2.8.29.tgz", + "integrity": "sha1-KcVzMUgFe7Th913zW3qcty5qWd0=", + "optional": true, + "dependencies": { + "source-map": { + "version": "0.5.6", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.6.tgz", + "integrity": "sha1-dc449SvwczxafwwRjYEzSiu19BI=", + "optional": true + } + } + }, + "uglify-to-browserify": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/uglify-to-browserify/-/uglify-to-browserify-1.0.2.tgz", + "integrity": "sha1-bgkk1r2mta/jSeOabWMoUKD4grc=", + "optional": true + }, + "window-size": { + "version": "0.1.0", + "resolved": "https://registry.npmjs.org/window-size/-/window-size-0.1.0.tgz", + "integrity": "sha1-VDjNLqk7IC76Ohn+iIeu58lPnJ0=", + "optional": true + }, + "wordwrap": { + "version": "0.0.3", + "resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-0.0.3.tgz", + "integrity": "sha1-o9XabNXAvAAI03I0u68b7WMFkQc=" + }, + "yargs": { + "version": "3.10.0", + "resolved": "https://registry.npmjs.org/yargs/-/yargs-3.10.0.tgz", + "integrity": "sha1-9+572FfdfB0tOMDnTvvWgdFDH9E=", + "optional": true + } + } +}