Generates chart component scaffolding

LiferayCloud · Mar 22, 2018 · b965dcd · b965dcd
1 parent 6933b6c
commit b965dcd
Show file tree

Hide file tree

Showing 11 changed files with 247 additions and 0 deletions.
diff --git a/packages/marble-chart/.babelrc b/packages/marble-chart/.babelrc
@@ -0,0 +1,3 @@
+{
+  "presets": ["metal"]
+}
diff --git a/packages/marble-chart/.gitignore b/packages/marble-chart/.gitignore
@@ -0,0 +1 @@
+build
diff --git a/packages/marble-chart/README.md b/packages/marble-chart/README.md
@@ -0,0 +1,25 @@
+# marble-chart
+
+Marble's Chart component
+
+## Setup
+
+1. Install NodeJS >= [v0.12.0](http://nodejs.org/dist/v0.12.0/), if you don't have it yet.
+
+2. Install local dependencies:
+
+  ```
+  npm install
+  ```
+
+3. Build the code:
+
+  ```
+  npm run build
+  ```
+
+4. Open `demos/index.html` on your browser.
+
+## License
+
+[BSD License](https://github.com/wedeploy/marble/blob/master/LICENSE.md) © Liferay, Inc.
diff --git a/packages/marble-chart/demos/index.html b/packages/marble-chart/demos/index.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Demo: Chart</title>
+
+  <link rel="stylesheet" href="../../marble/build/fonts/galano/galano.css">
+  <link rel="stylesheet" href="../../marble/build/fonts/icon-12/icon-12.css">
+  <link rel="stylesheet" href="../../marble/build/fonts/icon-16/icon-16.css">
+  <link rel="stylesheet" href="../../marble/build/marble.css">
+
+  <script src="../build/globals/marble-chart.js"></script>
+</head>
+<body class="container">
+  <h1 class="page-title">Chart</h1>
+
+  <div id="container"></div>
+
+  <script>
+    new metal.Chart({}, '#container');
+  </script>
+</body>
+</html>
diff --git a/packages/marble-chart/package.json b/packages/marble-chart/package.json
@@ -0,0 +1,43 @@
+{
+  "name": "marble-chart",
+  "version": "0.0.0",
+  "description": "Marble's Chart component",
+  "license": "BSD-3-Clause",
+  "repository": "https://github.com/wedeploy/marble/tree/master/packages/marble-chart",
+  "engines": {
+    "node": ">=0.12.0",
+    "npm": ">=3.0.0"
+  },
+  "main": "lib/Chart.js",
+  "esnext:main": "src/Chart.js",
+  "jsnext:main": "src/Chart.js",
+  "files": [
+    "lib",
+    "src",
+    "test"
+  ],
+  "scripts": {
+    "build": "npm run soy && webpack",
+    "compile": "babel -d lib/ src/",
+    "prepublish": "npm run soy && npm run compile",
+    "soy": "metalsoy"
+  },
+  "keywords": [
+    "marble",
+    "metal"
+  ],
+  "dependencies": {
+    "metal-component": "^2.14.0",
+    "metal-soy": "^2.14.0",
+    "metal-state": "^2.14.0"
+  },
+  "devDependencies": {
+    "babel-cli": "^6.4.5",
+    "babel-loader": "^7.1.2",
+    "babel-plugin-transform-node-env-inline": "^0.2.0",
+    "babel-preset-metal": "^4.0.0",
+    "metal-tools-soy": "^4.2.6",
+    "metal-useragent": "^2.1.1",
+    "webpack": "^3.5.5"
+  }
+}
diff --git a/packages/marble-chart/src/Chart.js b/packages/marble-chart/src/Chart.js
@@ -0,0 +1,29 @@
+import Component from 'metal-component';
+import Soy from 'metal-soy';
+import {Config} from 'metal-state';
+
+import templates from './Chart.soy.js';
+
+/**
+ * Chart component.
+ */
+class Chart extends Component {}
+
+/**
+ * State definition.
+ * @static
+ * @type {!Object}
+ */
+Chart.STATE = {
+  /**
+   * ID to be applied to the element.
+   * @type {!String}
+   * @default example
+   */
+  id: Config.string().value('example'),
+};
+
+Soy.register(Chart, templates);
+
+export {Chart};
+export default Chart;
diff --git a/packages/marble-chart/src/Chart.soy b/packages/marble-chart/src/Chart.soy
@@ -0,0 +1,10 @@
+{namespace Chart}
+
+/**
+ * This renders the component's whole content.
+ */
+{template .render}
+  {@param? id: string}
+
+  <div id="{$id}">Hello World</div>
+{/template}
diff --git a/packages/marble-chart/src/Chart.soy.js b/packages/marble-chart/src/Chart.soy.js
@@ -0,0 +1,67 @@
+/* jshint ignore:start */
+import Component from 'metal-component';
+import Soy from 'metal-soy';
+
+var templates;
+goog.loadModule(function(exports) {
+var soy = goog.require('soy');
+var soydata = goog.require('soydata');
+// This file was automatically generated from Chart.soy.
+// Please don't edit this file by hand.
+
+/**
+ * @fileoverview Templates in namespace Chart.
+ * @public
+ */
+
+goog.module('Chart.incrementaldom');
+
+goog.require('goog.soy.data.SanitizedContent');
+var incrementalDom = goog.require('incrementaldom');
+goog.require('soy.asserts');
+var soyIdom = goog.require('soy.idom');
+
+
+/**
+ * @param {{
+ *  id: (!goog.soy.data.SanitizedContent|null|string|undefined)
+ * }} opt_data
+ * @param {Object<string, *>=} opt_ijData
+ * @param {Object<string, *>=} opt_ijData_deprecated
+ * @return {void}
+ * @suppress {checkTypes}
+ */
+function $render(opt_data, opt_ijData, opt_ijData_deprecated) {
+  opt_ijData = opt_ijData_deprecated || opt_ijData;
+  opt_data = opt_data || {};
+  /** @type {!goog.soy.data.SanitizedContent|null|string|undefined} */
+  var id = soy.asserts.assertType(opt_data.id == null || (goog.isString(opt_data.id) || opt_data.id instanceof goog.soy.data.SanitizedContent), 'id', opt_data.id, '!goog.soy.data.SanitizedContent|null|string|undefined');
+  incrementalDom.elementOpenStart('div');
+      incrementalDom.attr('id', id);
+  incrementalDom.elementOpenEnd();
+    incrementalDom.text('Hello World');
+  incrementalDom.elementClose('div');
+}
+exports.render = $render;
+/**
+ * @typedef {{
+ *  id: (!goog.soy.data.SanitizedContent|null|string|undefined)
+ * }}
+ */
+$render.Params;
+if (goog.DEBUG) {
+  $render.soyTemplateName = 'Chart.render';
+}
+
+exports.render.params = ["id"];
+exports.render.types = {"id":"string"};
+templates = exports;
+return exports;
+
+});
+
+class Chart extends Component {}
+Soy.register(Chart, templates);
+export { Chart, templates };
+export default templates;
+/* jshint ignore:end */
diff --git a/packages/marble-chart/test/Chart.js b/packages/marble-chart/test/Chart.js
@@ -0,0 +1,17 @@
+import Chart from '../src/Chart';
+
+let chart;
+
+describe('Chart', () => {
+  afterEach(() => {
+    if (chart) {
+      chart.dispose();
+    }
+  });
+
+  it('should generate the default markup', () => {
+    chart = new Chart();
+
+    expect(chart).toMatchSnapshot();
+  });
+});
diff --git a/packages/marble-chart/test/__snapshots__/Chart.js.snap b/packages/marble-chart/test/__snapshots__/Chart.js.snap
@@ -0,0 +1 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
diff --git a/packages/marble-chart/webpack.config.js b/packages/marble-chart/webpack.config.js
@@ -0,0 +1,27 @@
+const webpack = require('webpack');
+
+module.exports = {
+  entry: './src/Chart.js',
+  module: {
+    rules: [{
+      test: /\.js$/,
+      exclude: /(node_modules)/,
+      use: {
+        loader: 'babel-loader',
+        options: {
+          compact: false,
+          presets: ['babel-preset-es2015'],
+          plugins: ['babel-plugin-transform-node-env-inline']
+        }
+      }
+    }]
+  },
+  output: {
+    library: 'metal',
+    libraryTarget: 'this',
+    filename: './build/globals/marble-chart.js'
+  },
+  plugins: [
+    new webpack.optimize.ModuleConcatenationPlugin()
+  ]
+};