Starting component sets (#25)

* 0.6.0-a2

* somewhat working start of textbox element

* paper textbox

* added dropdown to paper set

* extract setter logger

* improve dropdown readability

* version in header

* fix knobs

* validation

* vaadin

* initial dropdown value

* v0.6.0-a3.0

* vaadin

* better api to replace entire component set

* move lit-any sources

* component set doc

* fix tests

* first tests for paper components

* ignore "bad" imports in test code

* test which import element

* browserstack in place of sauce

* remove sauce connect

* dropdown tests

* stylistic change

.editorconfig

@@ -5,3 +5,6 @@ end_of_line = lf
 insert_final_newline = true
 indent_style = space
 indent_size = 4
+
+[*.json]
+indent_size = 2

.eslintrc.json

@@ -14,11 +14,13 @@
     ],
     "env": {
         "jasmine": true,
-        "browser": true
+        "browser": true,
+        "mocha": true
     },
     "globals": {
         "testHandler": true,
         "sinon": true,
-        "fixture": true
+        "fixture": true,
+        "Polymer": true
     }
 }

.storybook/addons.js

@@ -2,3 +2,4 @@ import '@storybook/addon-storysource/register';
 import '@storybook/addon-knobs/register';
 import '@storybook/addon-options/register';
 import '@storybook/addon-notes/register';
+import '@storybook/addon-actions/register';

.storybook/config.js

@@ -1,8 +1,9 @@
 import { configure, addDecorator } from '@storybook/polymer';
 import { setOptions } from '@storybook/addon-options';
 import { withKnobs } from '@storybook/addon-knobs';
+import '@storybook/addon-console';
 import { withNotes } from '@storybook/addon-notes';
-import litAny from '../package';
+import litAny from '../lit-any/package';
 
 addDecorator(withKnobs);
 addDecorator(withNotes);
@@ -15,7 +16,7 @@ function loadStories() {
 setOptions({
     name: `lit-any ${litAny.version}`,
     addonPanelInRight: true,
-    selectedAddonPanel: 'storybook/notes/panel',
+    selectedAddonPanel: 'storybooks/storybook-addon-knobs',
     url: 'https://github.com/wikibus/lit-any',
     sortStoriesByKind: true,
 });

.storybook/preview-head.html

@@ -0,0 +1 @@
+<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=WebAnimations"></script>

.storybook/webpack.config.js

@@ -4,7 +4,10 @@ module.exports = {
             {
                 test: /\.js$/,
                 use: 'babel-loader',
-                exclude: /node_modules\/@webcomponents/
+                exclude: [
+                    /@webcomponents/,
+                    /react-split-pane/
+                ]
             },
             {
                 test: /\.stories\.jsx?$/,

.travis.yml

@@ -5,5 +5,3 @@ node_js:
 before_script:
   - yarn bower i
   - yarn lint
-addons:
-  sauce_connect: true

bower.json

@@ -4,6 +4,13 @@
   "devDependencies": {
     "paper-input": "polymerelements/paper-input#^2.2.2",
     "web-component-tester": "^6.5.0",
-    "paper-button": "polymerelements/paper-button#^2.1.1"
+    "paper-button": "polymerelements/paper-button#^2.1.1",
+    "zero-md": "^1.1.0",
+    "paper-dropdown-menu": "PolymerElements/paper-dropdown-menu#^2.1.0",
+    "paper-listbox": "PolymerElements/paper-listbox#^2.1.1",
+    "paper-item": "PolymerElements/paper-item#^2.1.1",
+    "vaadin-text-field": "vaadin/vaadin-text-field#^2.0.1",
+    "vaadin-dropdown-menu": "vaadin/vaadin-dropdown-menu#^1.0.0",
+    "vaadin-list-box": "vaadin/vaadin-list-box#^1.0.2"
   }
 }

components/paper-elements/index.js

@@ -0,0 +1,51 @@
+import { html } from 'lit-html/lib/lit-extended';
+import { repeat } from 'lit-html/lib/repeat';
+
+export function textbox({
+    type = 'single line',
+} = { }) {
+    return (f, id, v, set) => {
+        if (type === 'multi line') {
+            return html`<paper-textarea 
+                            label="${f.title}"
+                            value="${v}"
+                            required?="${f.required}"
+                            auto-validate
+                            on-value-changed="${e => set(e.target.value)}" ></paper-textarea>`;
+        }
+
+        return html`<paper-input 
+                        label="${f.title}"
+                        type="text"
+                        value="${v}"
+                        required?="${f.required}"
+                        auto-validate
+                        on-value-changed="${e => set(e.target.value)}" ></paper-input>`;
+    };
+}
+
+export function dropdown({
+    items = [],
+} = {}) {
+    return async (f, id, v, set) => {
+        function setValue(e) {
+            e.target.validate();
+            return set(e.target.querySelector('paper-listbox').selected);
+        }
+
+        let options = items;
+        if (typeof items === 'function') {
+            options = await items(f);
+        }
+
+        return html`<paper-dropdown-menu label="${f.title}" 
+                                         no-animations?="${!window.KeyframeEffect}"
+                                         on-value-changed="${setValue}"
+                                         required?="${f.required}">
+  <paper-listbox slot="dropdown-content" attr-for-selected="value" selected="${v}">
+    ${repeat(options, option =>
+        html`<paper-item value="${option.value}">${option.label}</paper-item>`)}
+  </paper-listbox>
+</paper-dropdown-menu>`;
+    };
+}

components/paper-elements/package.json

@@ -0,0 +1,10 @@
+{
+  "name": "@lit-any/components-paper-elements",
+  "version": "0.6.0-a3.0",
+  "main": "index.js",
+  "license": "MIT",
+  "peerDependencies": {
+    "lit-any": "^0.6.0-a3.0",
+    "lit-html": "^0.10.2"
+  }
+}

components/vaadin/index.js

@@ -0,0 +1,48 @@
+import { html } from 'lit-html/lib/lit-extended';
+import { repeat } from 'lit-html/lib/repeat';
+
+export function textbox({
+    type = 'single line',
+} = { }) {
+    return (f, id, v, set) => {
+        if (type === 'multi line') {
+            return html`<vaadin-text-area 
+                            label="${f.title}"
+                            type="${type}"
+                            value="${v}"
+                            required?="${f.required}"
+                            auto-validate
+                            on-value-changed="${e => set(e.target.value)}" ></vaadin-text-area>`;
+        }
+
+        return html`<vaadin-text-field 
+                        label="${f.title}"
+                        type="${type}"
+                        value="${v}"
+                        required?="${f.required}"
+                        auto-validate
+                        on-value-changed="${e => set(e.target.value)}"></vaadin-text-field>`;
+    };
+}
+
+export function dropdown({
+    items = [],
+} = {}) {
+    return async (f, id, v, set) => {
+        let options = items;
+        if (typeof items === 'function') {
+            options = await items(f);
+        }
+
+        return html`<vaadin-dropdown-menu label="${f.title}" 
+                                         on-value-changed="${e => set(e.target.value)}"
+                                         required?="${f.required}"
+                                         value="${v}">
+  <template>
+    <vaadin-list-box>
+      ${repeat(options, option => `<vaadin-item value$="${option.value}" label$="${option.label}"></vaadin-item>`)}
+    </vaadin-list-box>
+  </template>
+</vaadin-dropdown-menu>`;
+    };
+}

components/vaadin/package.json

@@ -0,0 +1,10 @@
+{
+  "name": "@lit-any/components-vaadin",
+  "version": "0.6.0-a3.0",
+  "main": "index.js",
+  "license": "MIT",
+  "peerDependencies": {
+    "lit-any": "^0.6.0-a3.0",
+    "lit-html": "^0.11.0"
+  }
+}

lerna.json

@@ -0,0 +1,6 @@
+{
+  "lerna": "2.11.0",
+  "useWorkspaces": true,
+  "version": "0.6.0-a3.0",
+  "npmClient": "yarn"
+}

lit-any/components.js

@@ -0,0 +1,13 @@
+export function textbox(options) {
+    return {
+        name: 'textbox',
+        options,
+    };
+}
+
+export function dropdown(options) {
+    return {
+        name: 'dropdown',
+        options,
+    };
+}

src/elements/lit-form.js → lit-any/elements/lit-form.js

@@ -1,7 +1,7 @@
 /* eslint-disable class-methods-use-this */
 import { html } from 'lit-html/lib/lit-extended';
 import contract from './contract-helpers';
-import { FieldTemplates } from '../template-registry';
+import { FieldTemplates } from '../template-registry/index';
 import LitAnyBase from './lit-any-base';
 
 function onSubmit(e) {

src/elements/lit-view.js → lit-any/elements/lit-view.js

@@ -1,7 +1,7 @@
 import { html } from 'lit-html';
-import render from '../render';
+import render from '../render/index';
 import LitAnyBase from './lit-any-base';
-import { ViewTemplates } from '../template-registry';
+import { ViewTemplates } from '../template-registry/index';
 
 export default class LitView extends LitAnyBase {
     constructor() {

lit-any/package.json

@@ -0,0 +1,12 @@
+{
+  "name": "lit-any",
+  "main": "src/index.js",
+  "module": "src/index.js",
+  "version": "0.6.0-a3.0",
+  "dependencies": {
+    "@polymer/lit-element": "^0.5.2",
+    "@polymer/polymer": "^3.0.0-pre.11",
+    "core-js": "^2.5.1",
+    "lit-html": "^0.10.2"
+  }
+}

src/template-registry/TemplateSelectorBuilder.js → lit-any/template-registry/TemplateSelectorBuilder.js

@@ -51,4 +51,17 @@ export class FieldTemplateSelectorBuilder extends TemplateSelectorBuilder {
     _createSelector() {
         return new FieldTemplateSelector();
     }
+
+    rendersComponent(component) {
+        if (!this._registry.components) {
+            throw new Error('No component set configured');
+        }
+
+        return this.renders((...args) => {
+            const componentFunc = this._registry.components[component.name]
+                || this._registry.components.textbox;
+
+            return componentFunc(component.options).call(null, ...args);
+        });
+    }
 }

src/template-registry/template-registry.js → lit-any/template-registry/template-registry.js

@@ -49,4 +49,9 @@ export default class TemplateRegistry {
             name,
         });
     }
+
+    useComponents(components) {
+        this.components = components;
+        return this;
+    }
 }

package.json

@@ -1,20 +1,23 @@
 {
-  "name": "lit-any",
-  "main": "src/index.js",
-  "module": "src/index.js",
-  "version": "0.6.0-a2",
+  "private": true,
+  "workspaces": [
+    "lit-any",
+    "components/*"
+  ],
   "directories": {
     "test": "tests"
   },
   "scripts": {
-    "test": "webpack && wct --plugin sauce",
+    "test": "webpack && wct --plugin browserstack",
     "build-tests": "webpack",
     "lint": "eslint src/**/*.js test/**/*.js",
     "wct": "webpack -w & wct -l chrome -p",
     "storybook": "bower i; start-storybook -p 9001 -c .storybook",
     "build-storybook": "bower i; build-storybook -c .storybook -o docs"
   },
   "devDependencies": {
+    "@storybook/addon-actions": "^3.4.8",
+    "@storybook/addon-console": "^1.0.4",
     "@storybook/addon-knobs": "^4.0.0-alpha.9",
     "@storybook/addon-links": "^4.0.0-alpha.9",
     "@storybook/addon-notes": "^4.0.0-alpha.9",
@@ -37,21 +40,19 @@
     "eslint-plugin-chai": "0.0.1",
     "eslint-plugin-import": "^2.7.0",
     "eslint-plugin-jasmine": "^2.8.4",
+    "eslint-plugin-mocha": "^5.1.0",
     "eslint-plugin-sinon": "^0.2.0",
+    "iso-639-1": "^2.0.3",
+    "lerna": "^2.11.0",
     "markdown-loader": "^3.0.0",
     "moment": "^2.22.2",
     "p-event": "^1.3.0",
     "polymer-webpack-loader": "^2.0.2",
     "raw-loader": "^0.5.1",
-    "wct-sauce": "^2.0.0",
+    "wct-browserstack": "^0.3.0",
     "web-component-tester": "^6.5.0",
+    "web-component-tester-custom-runner": "^6.5.0",
     "webpack": "^3.5.6",
     "webpack-glob-entries": "^1.0.1"
-  },
-  "dependencies": {
-    "@polymer/polymer": "^3.0.0-pre.11",
-    "@polymer/lit-element": "^0.5.2",
-    "core-js": "^2.5.1",
-    "lit-html": "^0.10.2"
   }
 }

storybook/.eslintrc.json

@@ -1,6 +1,7 @@
 {
     "root": false,
     "rules": {
-        "import/no-extraneous-dependencies": false
+        "import/no-extraneous-dependencies": false,
+        "import/first": false
     }
 }