initial commit

.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

.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

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2018
+
+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.

package.json

@@ -0,0 +1,24 @@
+{
+  "name": "o-motion",
+  "version": "0.0.1",
+  "description": "Stencil Component Starter",
+  "module": "dist/esm/index.js",
+  "main": "dist/index.js",
+  "unpkg": "dist/ionic.js",
+  "types": "dist/types/components.d.ts",
+  "collection": "dist/collection/collection-manifest.json",
+  "files": [
+    "dist/"
+  ],
+  "scripts": {
+    "build": "stencil build --docs",
+    "start": "stencil build --dev --watch --serve",
+    "test": "stencil test --spec --e2e",
+    "test.watch": "stencil test --spec --e2e --watchAll"
+  },
+  "dependencies": {},
+  "devDependencies": {
+    "@stencil/core": "~0.17.0"
+  },
+  "license": "MIT"
+}

src/components.d.ts

@@ -0,0 +1,78 @@
+/* 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 OMotionSpring {
+    /**
+    * The first name
+    */
+    'first': string;
+    /**
+    * The last name
+    */
+    'last': string;
+    /**
+    * The middle name
+    */
+    'middle': string;
+  }
+  interface OMotionSpringAttributes extends StencilHTMLAttributes {
+    /**
+    * The first name
+    */
+    'first'?: string;
+    /**
+    * The last name
+    */
+    'last'?: string;
+    /**
+    * The middle name
+    */
+    'middle'?: string;
+  }
+}
+
+declare global {
+  interface StencilElementInterfaces {
+    'OMotionSpring': Components.OMotionSpring;
+  }
+
+  interface StencilIntrinsicElements {
+    'o-motion-spring': Components.OMotionSpringAttributes;
+  }
+
+
+  interface HTMLOMotionSpringElement extends Components.OMotionSpring, HTMLStencilElement {}
+  var HTMLOMotionSpringElement: {
+    prototype: HTMLOMotionSpringElement;
+    new (): HTMLOMotionSpringElement;
+  };
+
+  interface HTMLElementTagNameMap {
+    'o-motion-spring': HTMLOMotionSpringElement
+  }
+
+  interface ElementTagNameMap {
+    'o-motion-spring': HTMLOMotionSpringElement;
+  }
+
+
+  export namespace JSX {
+    export interface Element {}
+    export interface IntrinsicElements extends StencilIntrinsicElements {
+      [tagName: string]: any;
+    }
+  }
+  export interface HTMLAttributes extends StencilHTMLAttributes {}
+
+}

src/components/o-motion-spring/o-motion-spring.css

@@ -0,0 +1 @@
+

src/components/o-motion-spring/o-motion-spring.e2e.ts

@@ -0,0 +1,32 @@
+import { newE2EPage } from '@stencil/core/testing';
+
+describe('my-component', () => {
+  it('renders', async () => {
+    const page = await newE2EPage();
+
+    await page.setContent('<my-component></my-component>');
+    const element = await page.find('my-component');
+    expect(element).toHaveClass('hydrated');
+  });
+
+  it('renders changes to the name data', async () => {
+    const page = await newE2EPage();
+
+    await page.setContent('<my-component></my-component>');
+    const component = await page.find('my-component');
+    const element = await page.find('my-component >>> div');
+    expect(element.textContent).toEqual(`Hello, World! I'm `);
+
+    component.setProperty('first', 'James');
+    await page.waitForChanges();
+    expect(element.textContent).toEqual(`Hello, World! I'm James`);
+
+    component.setProperty('last', 'Quincy');
+    await page.waitForChanges();
+    expect(element.textContent).toEqual(`Hello, World! I'm James Quincy`);
+
+    component.setProperty('middle', 'Earl');
+    await page.waitForChanges();
+    expect(element.textContent).toEqual(`Hello, World! I'm James Earl Quincy`);
+  });
+});

src/components/o-motion-spring/o-motion-spring.tsx

@@ -0,0 +1,32 @@
+import { Component, Prop } from '@stencil/core';
+import { format } from '../../utils/utils';
+
+@Component({
+  tag: 'o-motion-spring',
+  styleUrl: 'o-motion-spring.css',
+  shadow: true
+})
+export class OMotionSpringComponent {
+  /**
+   * The first name
+   */
+  @Prop() first: string;
+
+  /**
+   * The middle name
+   */
+  @Prop() middle: string;
+
+  /**
+   * The last name
+   */
+  @Prop() last: string;
+
+  private getText(): string {
+    return format(this.first, this.middle, this.last);
+  }
+
+  render() {
+    return <div>Hello, World! I'm {this.getText()}</div>;
+  }
+}

src/index.html

@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html dir="ltr" lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0">
+  <title>Stencil Component Starter</title>
+  <script src="/build/o-motion.js"></script>
+
+</head>
+<body>
+
+  <o-motion-spring first="Stencil" last="'Don't call me a framework' JS"></o-motion-spring>
+
+</body>
+</html>

src/utils/utils.spec.ts

@@ -0,0 +1,21 @@
+import { format } from './utils';
+
+describe('format', () => {
+  it('returns empty string for no names defined', () => {
+    expect(format(undefined, undefined, undefined)).toEqual('');
+  });
+
+  it('formats just first names', () => {
+    expect(format('Joseph', undefined, undefined)).toEqual('Joseph');
+  });
+
+  it('formats first and last names', () => {
+    expect(format('Joseph', undefined, 'Publique')).toEqual('Joseph Publique');
+  });
+
+  it('formats first, middle and last names', () => {
+    expect(format('Joseph', 'Quincy', 'Publique')).toEqual(
+      'Joseph Quincy Publique'
+    );
+  });
+});

src/utils/utils.ts

@@ -0,0 +1,8 @@
+
+export function format(first: string, middle: string, last: string): string {
+  return (
+    (first || '') +
+    (middle ? ` ${middle}` : '') +
+    (last ? ` ${last}` : '')
+  );
+}

stencil.config.ts

@@ -0,0 +1,13 @@
+import { Config } from '@stencil/core';
+
+export const config: Config = {
+  namespace: 'o-motion',
+  outputTargets:[
+    { type: 'dist' },
+    { type: 'docs' },
+    {
+      type: 'www',
+      serviceWorker: null
+    }
+  ]
+};

tsconfig.json

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "allowSyntheticDefaultImports": true,
+    "allowUnreachableCode": false,
+    "declaration": false,
+    "experimentalDecorators": true,
+    "lib": [
+      "dom",
+      "es2017"
+    ],
+    "moduleResolution": "node",
+    "module": "esnext",
+    "target": "es2017",
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "jsx": "react",
+    "jsxFactory": "h"
+  },
+  "include": [
+    "src",
+    "types/jsx.d.ts"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}