From b965dcde28e054c55400e70615523ac179475078 Mon Sep 17 00:00:00 2001 From: Zeno Rocha Date: Thu, 22 Mar 2018 15:41:35 -0700 Subject: [PATCH] Generates chart component scaffolding --- packages/marble-chart/.babelrc | 3 + packages/marble-chart/.gitignore | 1 + packages/marble-chart/README.md | 25 +++++++ packages/marble-chart/demos/index.html | 24 +++++++ packages/marble-chart/package.json | 43 ++++++++++++ packages/marble-chart/src/Chart.js | 29 ++++++++ packages/marble-chart/src/Chart.soy | 10 +++ packages/marble-chart/src/Chart.soy.js | 67 +++++++++++++++++++ packages/marble-chart/test/Chart.js | 17 +++++ .../test/__snapshots__/Chart.js.snap | 1 + packages/marble-chart/webpack.config.js | 27 ++++++++ 11 files changed, 247 insertions(+) create mode 100644 packages/marble-chart/.babelrc create mode 100644 packages/marble-chart/.gitignore create mode 100644 packages/marble-chart/README.md create mode 100644 packages/marble-chart/demos/index.html create mode 100644 packages/marble-chart/package.json create mode 100644 packages/marble-chart/src/Chart.js create mode 100644 packages/marble-chart/src/Chart.soy create mode 100644 packages/marble-chart/src/Chart.soy.js create mode 100644 packages/marble-chart/test/Chart.js create mode 100644 packages/marble-chart/test/__snapshots__/Chart.js.snap create mode 100644 packages/marble-chart/webpack.config.js diff --git a/packages/marble-chart/.babelrc b/packages/marble-chart/.babelrc new file mode 100644 index 0000000..ef2147f --- /dev/null +++ b/packages/marble-chart/.babelrc @@ -0,0 +1,3 @@ +{ + "presets": ["metal"] +} diff --git a/packages/marble-chart/.gitignore b/packages/marble-chart/.gitignore new file mode 100644 index 0000000..378eac2 --- /dev/null +++ b/packages/marble-chart/.gitignore @@ -0,0 +1 @@ +build diff --git a/packages/marble-chart/README.md b/packages/marble-chart/README.md new file mode 100644 index 0000000..81ce569 --- /dev/null +++ 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 new file mode 100644 index 0000000..5963575 --- /dev/null +++ b/packages/marble-chart/demos/index.html @@ -0,0 +1,24 @@ + + + + + + Demo: Chart + + + + + + + + + +

Chart

+ +
+ + + + diff --git a/packages/marble-chart/package.json b/packages/marble-chart/package.json new file mode 100644 index 0000000..5337ce7 --- /dev/null +++ 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 new file mode 100644 index 0000000..7183204 --- /dev/null +++ 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 new file mode 100644 index 0000000..8013696 --- /dev/null +++ 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} + +
Hello World
+{/template} diff --git a/packages/marble-chart/src/Chart.soy.js b/packages/marble-chart/src/Chart.soy.js new file mode 100644 index 0000000..03dad73 --- /dev/null +++ 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=} opt_ijData + * @param {Object=} 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 new file mode 100644 index 0000000..ea1d439 --- /dev/null +++ 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 new file mode 100644 index 0000000..d1e5c85 --- /dev/null +++ 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 new file mode 100644 index 0000000..edb85be --- /dev/null +++ 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() + ] +};