Initial commit

.gitignore

@@ -0,0 +1,22 @@
+*.seed
+*.log
+*.csv
+*.dat
+*.out
+*.pid
+*.gz
+*.marko.js
+*.sublime-workspace
+*.sublime-project
+*.original
+
+/lib-cov
+/pids
+/logs
+/results
+/static
+/build
+/.cache
+/node_modules
+
+npm-debug.log

.jshintrc

@@ -0,0 +1,30 @@
+{
+    "node" : true,
+    "es5" : false,
+    "browser" : true,
+    "boss" : false,
+    "curly": false,
+    "debug": false,
+    "devel": false,
+    "eqeqeq": true,
+    "evil": true,
+    "forin": false,
+    "immed": true,
+    "laxbreak": false,
+    "newcap": true,
+    "noarg": true,
+    "noempty": false,
+    "nonew": true,
+    "nomen": false,
+    "onevar": false,
+    "plusplus": false,
+    "regexp": false,
+    "undef": true,
+    "sub": true,
+    "white": false,
+    "eqeqeq": false,
+    "latedef": true,
+    "unused": "vars",
+    "strict": false,
+    "eqnull": true
+}

Procfile

@@ -0,0 +1 @@
+web: npm start

README.md

@@ -0,0 +1,9 @@
+Marko Widgets: UI Components Playground
+==================================
+
+```bash
+git clone https://github.com/marko-js-samples/marko-webpack.git
+cd marko-webpack
+npm install
+npm start
+```

package.json

@@ -0,0 +1,38 @@
+{
+  "name": "marko-webpack",
+  "version": "1.0.0",
+  "description": "Sample app that demonstrates the power of building UI components using Marko and Marko Widgets",
+  "main": "server.js",
+  "scripts": {
+    "build": "webpack",
+    "start": "npm run build && node server.js"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/marko-js-samples/marko-webpack.git"
+  },
+  "author": "Patrick Steele-idem <pnidem@gmail.com>",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/marko-js-samples/marko-webpack/issues"
+  },
+  "homepage": "https://github.com/marko-js-samples/marko-webpack",
+  "dependencies": {
+    "app-module-path": "^1.0.1",
+    "browser-refresh-taglib": "^1.0.2",
+    "compression": "^1.2.0",
+    "css-loader": "^0.26.1",
+    "express": "^4.9.4",
+    "extract-text-webpack-plugin": "^1.0.1",
+    "less": "^2.7.1",
+    "less-loader": "^2.2.3",
+    "marko": "^4.0.0-beta.5",
+    "marko-loader": "^1.0.0",
+    "raptor-pubsub": "^1.0.5",
+    "raptor-util": "^1.0.9",
+    "serve-static": "^1.6.2",
+    "style-loader": "^0.13.1",
+    "svg-url-loader": "^1.1.0",
+    "webpack": "^1.14.0"
+  }
+}

server.js

@@ -0,0 +1,44 @@
+require('app-module-path').addPath(__dirname);
+require('marko/express');
+require('marko/node-require');
+
+function requireNoOp(module, filename) { /* no-op */ }
+
+require.extensions['.less'] = requireNoOp;
+
+
+var express = require('express');
+var compression = require('compression'); // Provides gzip compression for the HTTP response
+var serveStatic = require('serve-static');
+
+// If the process was started using browser-refresh then enable
+// hot reloading for certain types of files to short-circuit
+// a full process restart. You *should* use browser-refresh
+// in development: https://www.npmjs.com/package/browser-refresh
+require('marko/browser-refresh').enable();
+
+var app = express();
+
+var port = process.env.PORT || 8080;
+
+// Enable gzip compression for all HTTP responses
+app.use(compression());
+
+// Allow all of the generated files under "static" to be served up by Express
+app.use('/static', serveStatic(__dirname + '/static'));
+
+// Map the "/" route to the home page
+app.get('/', require('./src/pages/home'));
+
+app.listen(port, function(err) {
+    if (err) {
+        throw err;
+    }
+    console.log('Listening on port %d', port);
+
+    // The browser-refresh module uses this event to know that the
+    // process is ready to serve traffic after the restart
+    if (process.send) {
+        process.send('online');
+    }
+});

src/components/app-button/component.js

@@ -0,0 +1,34 @@
+require('./style.less');
+
+module.exports = {
+    onInput: function(input) {
+        this.state = {
+            size: input.size || 'normal',
+            variant: input.variant || 'primary',
+            className: input['class'],
+            attrs: input['*']
+        };
+    },
+
+    handleClick: function(event) {
+        // Every Widget instance is also an EventEmitter instance.
+        // We will emit a custom "click" event when a DOM click event
+        // is triggered
+        this.emit('click', {
+            event: event // Pass along the DOM event in case it is helpful to others
+        });
+    },
+
+    // Add any other methods here
+    setVariant: function(variant) {
+        this.state.variant = variant;
+    },
+
+    setSize: function(size) {
+        this.state.size = size;
+    },
+
+    setLabel: function(label) {
+        this.state.label = label;
+    }
+};

src/components/app-button/index.marko

@@ -0,0 +1,6 @@
+var variantClassName=(state.variant !== 'primary' && 'app-button-' + state.variant)
+var sizeClassName=(state.size !== 'normal' && 'app-button-' + state.size)
+
+<button class=['app-button', variantClassName, sizeClassName, state.className] ${state.attrs} onClick("handleClick")>
+    <span include(data.label || data.renderBody)/>
+</button>

src/components/app-button/marko-tag.json

@@ -0,0 +1,24 @@
+{
+    "@label": "string",
+    "@href": "string",
+    "@variant": {
+        "type": "string",
+        "enum": [
+            "primary",
+            "secondary"
+        ]
+    },
+    "@size": {
+        "type": "string",
+        "enum": [
+            "small",
+            "normal",
+            "large"
+        ]
+    },
+    "@class": {
+        "type": "string",
+        "description": "Additional CSS class names"
+    },
+    "@*": "string"
+}

src/components/app-button/style.less

@@ -0,0 +1,40 @@
+@import "../../global-style/variables.less";
+
+.app-button {
+    display: inline-block;
+    border-radius: 8px;
+    padding: 12px;
+    background-color: @button-bg;
+    color: @button-fg;
+
+    transition-property: background-color;
+    transition-duration: .3s;
+    transition-timing-function: ease-out;
+}
+
+.app-button:hover {
+    background-color: lighten(@button-bg, 10%);
+}
+
+
+/* Variants */
+.app-button-secondary {
+    background-color: @button-secondary-bg;
+    color: @button-secondary-fg;
+}
+
+.app-button-secondary:hover {
+    background-color: lighten(@button-secondary-bg, 10%);
+}
+
+/* Sizes */
+.app-button-small {
+    font-size: 0.9em;
+    padding-top: 6px;
+    padding-bottom: 6px;
+}
+
+.app-button-large {
+    font-size: 1.2em;
+    font-weight: 100;
+}

src/components/app-checkbox/component.js

@@ -0,0 +1,50 @@
+require('./style.less');
+
+module.exports = {
+    onInput: function(input) {
+        this.state = {
+            checked: input.checked === true,
+            checkboxClassName: input['class'] || input.checkboxClassName,
+            data: input.data
+        };
+    },
+    getInitialBody: function(input) {
+        return input.label || input.renderBody;
+    },
+
+    isChecked: function() {
+        return this.state.checked === true;
+    },
+
+    setChecked: function(newChecked) {
+        if (newChecked !== this.state.checked) {
+            this.setState('checked', !this.state.checked);
+        }
+    },
+
+    toggle: function() {
+        this.setChecked(!this.state.checked);
+    },
+
+    getData: function() {
+        return this.state.data;
+    },
+
+    handleClick: function() {
+        var newChecked = !this.state.checked;
+
+        var defaultPrevented = false;
+
+        this.emit('toggle', {
+            checked: newChecked,
+            data: this.state.data,
+            preventDefault: function() {
+                defaultPrevented = true;
+            }
+        });
+
+        if (!defaultPrevented) {
+            this.setState('checked', newChecked);
+        }
+    }
+};

src/components/app-checkbox/index.marko

@@ -0,0 +1,12 @@
+var classNames=[
+    'app-checkbox',
+    state.checked && 'checked',
+    state.checkboxClassName
+]
+
+<app-button ref="button" class=classNames onClick('handleClick')>
+
+    <span class="app-checkbox-icon"/>
+    <span ref="checkboxLabel" include()/>
+
+</app-button>

src/components/app-checkbox/marko-tag.json

@@ -0,0 +1,6 @@
+{
+    "@label": "string",
+    "@data": "expression",
+    "@checked": "boolean",
+    "@class": "string"
+}

src/components/app-checkbox/style.less

@@ -0,0 +1,27 @@
+@import "../../global-style/variables.less";
+
+.app-button.app-checkbox {
+    background-color: @button-secondary-bg;
+    color: @button-secondary-fg;
+}
+
+.app-button.app-checkbox.checked {
+    background-color: @button-bg;
+    color: @button-fg;
+}
+
+.app-checkbox-icon {
+    background-image: url(./images/unchecked.svg);
+    background-size: contain;
+    width: 18px;
+    height: 18px;
+    display: inline-block;
+    background-repeat: no-repeat;
+    opacity: 0.2;
+    margin-right: 4px;
+}
+
+.app-checkbox.checked .app-checkbox-icon {
+    background-image: url(./images/checked.svg);
+    opacity: 1.0;
+}