feat(generator) : add component starter

package.json

@@ -2,6 +2,7 @@
   "name": "o-rango-components",
   "private": true,
   "scripts": {
+    "generate": "node ./scripts/runners/generator.js",
     "init": "lerna bootstrap",
     "clean": "lerna run -- clean",
     "test:ci": "lerna --concurrency 1 exec npm run test:ci",
@@ -21,7 +22,14 @@
     "husky": "^1.1.2",
     "lerna": "^3.4.3",
     "@types/jest": "^23.3.1",
-    "autoprefixer": "^9.0.2"
+    "autoprefixer": "^9.0.2",
+    "chalk": "^2.4.1",
+    "minimist": "^1.2.0",
+    "node-emoji": "^1.8.1",
+    "through2": "^2.0.3",
+    "recursive-copy": "^2.0.9",
+    "validate-element-name": "^2.1.1",
+    "minimist-options": "^3.0.2"
   },
   "commitlint": {
     "extends": [

scripts/runners/generator.js

@@ -0,0 +1,43 @@
+'use strict';
+const argOptions = require('minimist-options');
+const minimist = require('minimist');
+const emoji = require('node-emoji');
+const chalk = require('chalk');
+const validateName = require('validate-element-name');
+const utils = require('./utils');
+
+const options = argOptions({
+  name: {
+    type: 'string',
+    alias: 'n',
+    default: false
+  }
+});
+const args = minimist(process.argv.slice(1), options);
+
+// Templates const
+const REGEX = /o-component-template/g;
+const TEMPLATE = './scripts/templates/o-component-template';
+const DEST = './components/';
+
+const generatorOptions = {
+  REGEX,
+  TEMPLATE,
+  DEST
+};
+
+const validateNameFn = async (name) => {
+  return (await validateName(name).isValid) ? true : Promise.reject(' Invalid Component Name');
+};
+
+
+if (!args.name) {
+  console.log(`${emoji.get('warning')} ${chalk.red(' Missing arguments try :  --name')}`);
+} else {
+  Promise.all([validateNameFn(args.name)])
+    .then(async (result) => await utils.generate(args.name, args.type, generatorOptions))
+    .catch((error) => {
+      console.log(`${emoji.get('warning')} ${chalk.red(error)}`);
+      process.exit(0);
+    })
+}

scripts/runners/utils.js

@@ -0,0 +1,53 @@
+'use strict';
+const path = require('path');
+const emoji = require('node-emoji');
+const chalk = require('chalk');
+//Fs transformers
+const cp = require('recursive-copy');
+const through = require('through2'); // TODO use native streams
+
+const generateComponent = async (name, type, options) => {
+  const { REGEX, TEMPLATE, DEST } = options;
+  const copyOptions = {
+    overwrite: true,
+    expand: true,
+    dot: true,
+    junk: true,
+    rename: function(filePath) {
+      return filePath.replace(REGEX, name);
+    },
+    transform: function(src, dest, stats) {
+      if (
+        ['.tsx', '.ts', '.json', '.md', '.html'].indexOf(path.extname(src)) ===-1
+      ) {
+        return null;
+      }
+      return through(function(chunk, enc, done) {
+        var output = chunk.toString().replace(REGEX, name);
+        done(null, output);
+      });
+    }
+  };
+
+  cp(TEMPLATE, `${DEST}/${name}`, copyOptions)
+    .on(cp.events.COPY_FILE_COMPLETE, function(copyOperation) {
+      console.log(
+        emoji.get('white_check_mark'),
+        chalk.green(` Generated files ${copyOperation.dest} `)
+      );
+    })
+    .then(function(results) {
+      console.log(
+        emoji.get('white_check_mark'),
+        chalk.green(` Done : ${results.length} file(s) copied `)
+      );
+      return Promise.resolve(results);
+    })
+    .catch(function(error) {
+      return Promise.reject(error);
+    });
+};
+
+module.exports = {
+  generate: generateComponent
+};

scripts/templates/o-component-template/.editorconfig

@@ -0,0 +1,15 @@
+# http://editorconfig.org
+
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.md]
+insert_final_newline = false
+trim_trailing_whitespace = false

scripts/templates/o-component-template/.gitignore

@@ -0,0 +1,25 @@
+dist/
+www/
+
+*~
+*.sw[mnpcod]
+*.log
+*.lock
+*.tmp
+*.tmp.*
+log.txt
+*.sublime-project
+*.sublime-workspace
+
+.stencil/
+.idea/
+.vscode/
+.sass-cache/
+.versions/
+node_modules/
+$RECYCLE.BIN/
+
+.DS_Store
+Thumbs.db
+UserInterfaceState.xcuserstate
+.env

scripts/templates/o-component-template/CHANGELOG.md

@@ -0,0 +1,4 @@
+# Change Log @o-rango/o-component-template
+
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

scripts/templates/o-component-template/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2017 Ionic
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

scripts/templates/o-component-template/docs/catalog.md

@@ -0,0 +1,60 @@
+# @o-rango/o-component-template
+Provides feedback messages for  user actions with alert messages.
+
+
+## Install
+First, npm install within the project or use it directly from CDN:
+
+```
+npm install @o-rango/o-component-template --save
+```
+
+```code
+lang: html
+---
+<script src="./node_modules/@o-rango/o-component-template/dist/o-component-template.js"></script>
+// OR
+<script src="https://unpkg.com/@o-rango/o-component-template/dist/o-component-template.js"></script>
+```
+
+## Usage
+
+Demo with line
+
+```html
+<o-component-template line align="left" type="success"></o-component-template>
+```
+
+### Properties
+
+```code
+lang: js
+---
+  @Prop() name?: string;
+  @Prop() align: string = 'center' // left,right,center ;
+  @Prop() type: string = 'default' //default, error, warning , info , success;
+  @Prop() line: boolean= false;
+```
+
+
+### Customization
+
+```code
+lang: css
+---
+ /* Generic Colors variables*/
+ --o-component-template-default: #FAFBFC;
+ --o-component-template-error : #DE350B;
+ --o-component-template-warning:#FFC400;
+ --o-component-template-info:  #0065FF;
+ --o-component-template-success:#36B37E;
+
+ /* Size Style variables  & Font Style variables */
+ --o-component-template-height : 3.5em;
+ --o-component-template-font-size :14px;
+ --o-component-template-font-weight : 600;
+ --o-component-template-font-family : 'San Francisco', -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', 'Helvetica Neue', Helvetica, sans-serif;
+ --o-component-template-font-color-light : #FFFFFF;
+ --o-component-template-font-color-dark : #091E42;
+
+```

scripts/templates/o-component-template/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "@o-rango/o-component-template",
+  "version": "0.0.1",
+  "description": "@o-rango/o-component-template",
+  "module": "dist/esm/index.js",
+  "main": "dist/index.js",
+  "types": "dist/types/components.d.ts",
+  "collection": "dist/collection/collection-manifest.json",
+  "files": [
+    "dist/"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "stencil build",
+    "start": "stencil build --dev --watch --serve",
+    "test": "jest",
+    "test:ci": "jest --ci",
+    "test.watch": "jest --watch"
+  },
+  "devDependencies": {
+    "@stencil/core": "0.15.0-0",
+    "@stencil/postcss": "^0.1.0",
+    "@stencil/sass": "0.1.1",
+    "@types/jest": "^23.3.1",
+    "autoprefixer": "^9.0.2",
+    "jest": "^23.4.2",
+    "workbox-build": "3.4.1"
+  },
+  "author": "@o-rango",
+  "license": "MIT",
+  "homepage": "https://o-rango.github.io/",
+  "jest": {
+    "collectCoverage": true,
+    "transform": {
+      "^.+\\.(ts|tsx)$": "<rootDir>/node_modules/@stencil/core/testing/jest.preprocessor.js"
+    },
+    "testRegex": "(/__tests__/.*|\\.(test|spec))\\.(tsx?|jsx?)$",
+    "moduleFileExtensions": [
+      "ts",
+      "tsx",
+      "js",
+      "json",
+      "jsx"
+    ]
+  },
+  "gitHead": "2936be651042bb20b998bc8bf40418799b604317"
+}

scripts/templates/o-component-template/readme.md

@@ -0,0 +1 @@
+# @o-rango/o-component-template

scripts/templates/o-component-template/src/components.d.ts

@@ -0,0 +1,62 @@
+/* tslint:disable */
+/**
+ * This is an autogenerated file created by the Stencil compiler.
+ * It contains typing information for all components that exist in this project.
+ */
+
+
+import '@stencil/core';
+
+
+
+
+export namespace Components {
+
+  interface OAlert {
+    'alertId'?: string;
+    'align': string;
+    'line': boolean;
+    'type': string;
+  }
+  interface OAlertAttributes extends StencilHTMLAttributes {
+    'alertId'?: string;
+    'align'?: string;
+    'line'?: boolean;
+    'type'?: string;
+  }
+}
+
+declare global {
+  interface StencilElementInterfaces {
+    'OAlert': Components.OAlert;
+  }
+
+  interface StencilIntrinsicElements {
+    'o-component-template': Components.OAlertAttributes;
+  }
+
+
+  interface HTMLOAlertElement extends Components.OAlert, HTMLStencilElement {}
+  var HTMLOAlertElement: {
+    prototype: HTMLOAlertElement;
+    new (): HTMLOAlertElement;
+  };
+
+  interface HTMLElementTagNameMap {
+    'o-component-template': HTMLOAlertElement
+  }
+
+  interface ElementTagNameMap {
+    'o-component-template': HTMLOAlertElement;
+  }
+
+
+  export namespace JSX {
+    export interface Element {}
+    export interface IntrinsicElements extends StencilIntrinsicElements {
+      [tagName: string]: any;
+    }
+  }
+  export interface HTMLAttributes extends StencilHTMLAttributes {}
+
+}