Introduces a README and implements the <input-bytestream> Component

package.json

@@ -6,7 +6,7 @@
   "module": "dist/index.mjs",
   "es2015": "dist/esm/index.mjs",
   "es2017": "dist/esm/index.mjs",
-  "types": "dist/types/index.d.ts",
+  "types": "dist/types/components.d.ts",
   "collection": "dist/collection/collection-manifest.json",
   "collection:main": "dist/collection/index.js",
   "unpkg": "dist/browse-everything-components/browse-everything-components.js",
@@ -22,7 +22,12 @@
     "generate": "stencil generate"
   },
   "devDependencies": {
-    "@stencil/core": "^1.3.3"
+    "@stencil/core": "^1.4.0",
+    "@types/jest": "24.0.18",
+    "@types/puppeteer": "1.19.1",
+    "jest": "24.8.0",
+    "jest-cli": "24.8.0",
+    "puppeteer": "1.19.0"
   },
   "license": "MIT"
 }

readme.md

@@ -5,35 +5,24 @@ Web Components developed for the browse-everything Gem using StencilJS.
 
 ## Getting Started
 
-To start building a new web component using Stencil, clone this repo to a new directory:
+Installing the dependencies:
 
 ```bash
-git clone https://github.com/ionic-team/stencil-component-starter.git my-component
-cd my-component
-git remote rm origin
+yarn install
 ```
 
-and run:
+Running the tests:
 
 ```bash
-npm install
-npm start
+yarn run test
 ```
 
-To build the component for production, run:
+Interactively developing the component using the dev. server:
 
 ```bash
-npm run build
+yarn run start
 ```
 
-To run the unit tests for the components, run:
-
-```bash
-npm test
-```
-
-Need help? Check out our docs [here](https://stenciljs.com/docs/my-first-component).
-
 ## Using this component
 
 ### Script tag

src/components.d.ts

@@ -1,3 +1,4 @@
+/* eslint-disable */
 /* tslint:disable */
 /**
  * This is an autogenerated file created by the Stencil compiler.
@@ -9,53 +10,47 @@ import { HTMLStencilElement, JSXBase } from '@stencil/core/internal';
 
 
 export namespace Components {
-  interface MyComponent {
-    /**
-    * The first name
-    */
-    'first': string;
-    /**
-    * The last name
-    */
-    'last': string;
-    /**
-    * The middle name
-    */
-    'middle': string;
+  interface InputBytestream {
+    'checked': boolean;
+    'classes': string;
+    'location': string;
+    'mediaType': string;
+    'mtime': string;
+    'name': string;
+    'onChange': (event: object) => void;
+    'size': number;
+    'uuid': string;
   }
 }
 
 declare global {
 
 
-  interface HTMLMyComponentElement extends Components.MyComponent, HTMLStencilElement {}
-  var HTMLMyComponentElement: {
-    prototype: HTMLMyComponentElement;
-    new (): HTMLMyComponentElement;
+  interface HTMLInputBytestreamElement extends Components.InputBytestream, HTMLStencilElement {}
+  const HTMLInputBytestreamElement: {
+    prototype: HTMLInputBytestreamElement;
+    new (): HTMLInputBytestreamElement;
   };
   interface HTMLElementTagNameMap {
-    'my-component': HTMLMyComponentElement;
+    'input-bytestream': HTMLInputBytestreamElement;
   }
 }
 
 declare namespace LocalJSX {
-  interface MyComponent extends JSXBase.HTMLAttributes<HTMLMyComponentElement> {
-    /**
-    * The first name
-    */
-    'first'?: string;
-    /**
-    * The last name
-    */
-    'last'?: string;
-    /**
-    * The middle name
-    */
-    'middle'?: string;
+  interface InputBytestream {
+    'checked'?: boolean;
+    'classes'?: string;
+    'location'?: string;
+    'mediaType'?: string;
+    'mtime'?: string;
+    'name': string;
+    'onChange'?: (event: object) => void;
+    'size'?: number;
+    'uuid'?: string;
   }
 
   interface IntrinsicElements {
-    'my-component': MyComponent;
+    'input-bytestream': InputBytestream;
   }
 }
 
@@ -64,7 +59,9 @@ export { LocalJSX as JSX };
 
 declare module "@stencil/core" {
   export namespace JSX {
-    interface IntrinsicElements extends LocalJSX.IntrinsicElements {}
+    interface IntrinsicElements {
+      'input-bytestream': LocalJSX.InputBytestream & JSXBase.HTMLAttributes<HTMLInputBytestreamElement>;
+    }
   }
 }
 

src/components/input-bytestream/input-bytestream.e2e.ts

@@ -0,0 +1,34 @@
+
+import { newE2EPage } from '@stencil/core/testing';
+
+describe('bytestream', () => {
+  it('renders', async () => {
+    const page = await newE2EPage();
+
+    await page.setContent('<input-bytestream></input-bytestream>');
+    const element = await page.find('input-bytestream');
+    expect(element).toHaveClass('hydrated');
+  });
+
+  it('renders changes to the attribute data', async () => {
+    const page = await newE2EPage();
+
+    await page.setContent('<input-bytestream></input-bytestream>');
+    const component = await page.find('input-bytestream');
+
+    let element = await page.find('input-bytestream >>> .input-bytestream-uuid');
+    component.setProperty('uuid', '2fc883e8-2401-4e46-9680-63350b4bd368');
+    await page.waitForChanges();
+    expect(element.textContent).toEqual(`2fc883e8-2401-4e46-9680-63350b4bd368`);
+
+    element = await page.find('input-bytestream >>> .input-bytestream-location');
+    component.setProperty('location', 'http://cloud.org/my/file');
+    await page.waitForChanges();
+    expect(element.textContent).toEqual(`http://cloud.org/my/file`);
+
+    element = await page.find('input-bytestream >>> .input-bytestream-name');
+    component.setProperty('name', 'file.txt');
+    await page.waitForChanges();
+    expect(element.textContent).toEqual(`file.txt`);
+  });
+});

src/components/input-bytestream/input-bytestream.spec.ts

@@ -0,0 +1,33 @@
+import { newSpecPage } from '@stencil/core/testing';
+import { InputBytestream } from './input-bytestream.tsx';
+
+it('should render my component', async () => {
+  const page = await newSpecPage({
+    components: [InputBytestream],
+    html: `<input-bytestream uuid="2fc883e8-2401-4e46-9680-63350b4bd368"
+                    location="http://cloud.org/file.txt"
+                    name="file.txt"
+                    size="12345"
+                    mtime="1568398946"
+                    media-type="application/octet-stream" />`,
+  });
+
+  expect(page.root).toEqualHtml(`
+    <input-bytestream location="http://cloud.org/file.txt" media-type="application/octet-stream" mtime="1568398946" name="file.txt" size="12345" uuid="2fc883e8-2401-4e46-9680-63350b4bd368">
+      <mock:shadow-root>
+        <div class="input-bytestream">
+          <div>
+            <input class="input-bytestream-checkbox" type="checkbox" id="2fc883e8-2401-4e46-9680-63350b4bd368" name="2fc883e8-2401-4e46-9680-63350b4bd368">
+          </div>
+          <div class="input-bytestream-uuid">2fc883e8-2401-4e46-9680-63350b4bd368</div>
+          <div class="input-bytestream-location">http://cloud.org/file.txt</div>
+          <div class="input-bytestream-name">file.txt</div>
+          <div class="input-bytestream-size">12345</div>
+          <div class="input-bytestream-mtime">1568398946</div>
+          <div class="input-bytestream-media-type">application/octet-stream</div>
+        </div>
+      </mock:shadow-root>
+    </input-bytestream>
+      `);
+
+});

src/components/input-bytestream/input-bytestream.tsx

@@ -0,0 +1,52 @@
+import { Component, Prop, h, Element } from '@stencil/core';
+
+@Component({
+  tag: 'input-bytestream',
+  styleUrl: 'input-bytestream.css'
+})
+export class InputBytestream {
+  @Prop() name!: string;
+  @Prop() classes: string;
+  @Prop() uuid: string;
+  @Prop() location: string;
+  @Prop() size: number;
+  @Prop() mtime: string;
+  @Prop() mediaType: string;
+  @Prop() checked: boolean;
+  @Prop() onChange: (event: object) => void;
+
+  @Element() el: HTMLElement;
+
+  renderDefaultCheckbox() {
+    return(
+      <input
+        id={this.uuid}
+        type="checkbox"
+        class="input-bytestream-checkbox"
+        name={this.uuid}
+        checked={this.checked}
+        onChange={this.onChange}
+        aria-label="file checkbox"
+      />
+    )
+  }
+
+  render() {
+    const defaultClasses: string[] = this.classes.split(' ');
+    const rootClasses: string[]  = ["input-bytestream"].concat(defaultClasses);
+    const rootClassName: string = rootClasses.join(' ');
+
+    return(
+      <div class={rootClassName}>
+        <slot name="checkbox" />
+        <slot name="icon" />
+        <span class="input-bytestream-uuid">{this.uuid}</span>
+        <span class="input-bytestream-location">{this.location}</span>
+        <span class="input-bytestream-name">{this.name}</span>
+        <span class="input-bytestream-size">{this.size}</span>
+        <span class="input-bytestream-mtime">{this.mtime}</span>
+        <span class="input-bytestream-media-type">{this.mediaType}</span>
+      </div>
+    );
+  }
+}

src/components/input-bytestream/readme.md

@@ -0,0 +1,25 @@
+# input-bytestream
+
+
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property            | Attribute    | Description | Type                      | Default     |
+| ------------------- | ------------ | ----------- | ------------------------- | ----------- |
+| `checked`           | `checked`    |             | `boolean`                 | `undefined` |
+| `classes`           | `classes`    |             | `string`                  | `undefined` |
+| `location`          | `location`   |             | `string`                  | `undefined` |
+| `mediaType`         | `media-type` |             | `string`                  | `undefined` |
+| `mtime`             | `mtime`      |             | `string`                  | `undefined` |
+| `name` _(required)_ | `name`       |             | `string`                  | `undefined` |
+| `onChange`          | --           |             | `(event: object) => void` | `undefined` |
+| `size`              | `size`       |             | `number`                  | `undefined` |
+| `uuid`              | `uuid`       |             | `string`                  | `undefined` |
+
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*