[update] add some props

[add] storybook

.storybook/addons.js

@@ -0,0 +1 @@
+import '@storybook/addon-notes/register-panel';

.storybook/config.js

@@ -0,0 +1,3 @@
+import { configure } from '@storybook/html';
+
+configure(require.context('../src/components', true, /\.stories\.js$/), module);

.storybook/preview-head.html

@@ -0,0 +1,6 @@
+<script type="module" src="./remote-table/remote-table.esm.js"></script>
+<script nomodule="" src="./remote-table/remote-table.js"></script>
+
+<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
+<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.css">
+<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.js"></script>

package.json

@@ -1,35 +1,40 @@
 {
-  "name": "remote-table",
-  "version": "0.0.1",
-  "description": "Stencil Component Starter",
-  "main": "dist/index.js",
-  "module": "dist/index.mjs",
-  "es2015": "dist/esm/index.mjs",
-  "es2017": "dist/esm/index.mjs",
-  "types": "dist/types/index.d.ts",
-  "collection": "dist/collection/collection-manifest.json",
-  "collection:main": "dist/collection/index.js",
-  "unpkg": "dist/remote-table/remote-table.js",
-  "files": [
-    "dist/",
-    "loader/"
-  ],
-  "scripts": {
-    "build": "stencil build --docs",
-    "start": "stencil build --dev --watch --serve",
-    "test": "stencil test --spec --e2e",
-    "test.watch": "stencil test --spec --e2e --watchAll",
-    "generate": "stencil generate"
-  },
-  "devDependencies": {
-    "@stencil/core": "^1.8.4"
-  },
-  "license": "MIT",
-  "dependencies": {
-    "@types/datatables.net": "^1.10.18",
-    "@types/jquery": "^3.3.32",
-    "datatables.net": "^1.10.20",
-    "datatables.net-dt": "^1.10.20",
-    "jquery": "^3.4.1"
-  }
+    "name": "remote-table",
+    "version": "0.0.1",
+    "description": "Stencil Component Starter",
+    "main": "dist/index.js",
+    "module": "dist/index.mjs",
+    "es2015": "dist/esm/index.mjs",
+    "es2017": "dist/esm/index.mjs",
+    "types": "dist/types/index.d.ts",
+    "collection": "dist/collection/collection-manifest.json",
+    "collection:main": "dist/collection/index.js",
+    "unpkg": "dist/remote-table/remote-table.js",
+    "files": [
+        "dist/",
+        "loader/"
+    ],
+    "scripts": {
+        "build": "stencil build --docs",
+        "start": "stencil build --dev --watch --serve",
+        "test": "stencil test --spec --e2e",
+        "test.watch": "stencil test --spec --e2e --watchAll",
+        "generate": "stencil generate",
+        "storybook": "start-storybook -s ./dist"
+    },
+    "devDependencies": {
+        "@babel/core": "^7.8.4",
+        "@stencil/core": "^1.8.4",
+        "@storybook/addon-notes": "^5.3.13",
+        "@storybook/html": "^5.3.13",
+        "babel-loader": "^8.0.6"
+    },
+    "license": "MIT",
+    "dependencies": {
+        "@types/datatables.net": "^1.10.18",
+        "@types/jquery": "^3.3.32",
+        "datatables.net": "^1.10.20",
+        "datatables.net-dt": "^1.10.20",
+        "jquery": "^3.4.1"
+    }
 }

readme.md

@@ -1,72 +1,11 @@
 ![Built With Stencil](https://img.shields.io/badge/-Built%20With%20Stencil-16161d.svg?logo=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE5LjIuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MTIgNTEyOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI%2BCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI%2BCgkuc3Qwe2ZpbGw6I0ZGRkZGRjt9Cjwvc3R5bGU%2BCjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik00MjQuNywzNzMuOWMwLDM3LjYtNTUuMSw2OC42LTkyLjcsNjguNkgxODAuNGMtMzcuOSwwLTkyLjctMzAuNy05Mi43LTY4LjZ2LTMuNmgzMzYuOVYzNzMuOXoiLz4KPHBhdGggY2xhc3M9InN0MCIgZD0iTTQyNC43LDI5Mi4xSDE4MC40Yy0zNy42LDAtOTIuNy0zMS05Mi43LTY4LjZ2LTMuNkgzMzJjMzcuNiwwLDkyLjcsMzEsOTIuNyw2OC42VjI5Mi4xeiIvPgo8cGF0aCBjbGFzcz0ic3QwIiBkPSJNNDI0LjcsMTQxLjdIODcuN3YtMy42YzAtMzcuNiw1NC44LTY4LjYsOTIuNy02OC42SDMzMmMzNy45LDAsOTIuNywzMC43LDkyLjcsNjguNlYxNDEuN3oiLz4KPC9zdmc%2BCg%3D%3D&colorA=16161d&style=flat-square)
 
-# Stencil Component Starter
+# Remote Table
 
-This is a starter project for building a standalone Web Component using Stencil.
+This is a web component built using stencil that tries to dynamically load values from api returning `JSON Array`
 
-Stencil is also great for building entire apps. For that, use the [stencil-app-starter](https://github.com/ionic-team/stencil-app-starter) instead.
+How to use :
+1.  Clone the repository
+2.  Run `npm run build`
+3.  Run `npm run storybook` to see the documentation with live example
 
-# Stencil
-
-Stencil is a compiler for building fast web apps using Web Components.
-
-Stencil combines the best concepts of the most popular frontend frameworks into a compile-time rather than run-time tool.  Stencil takes TypeScript, JSX, a tiny virtual DOM layer, efficient one-way data binding, an asynchronous rendering pipeline (similar to React Fiber), and lazy-loading out of the box, and generates 100% standards-based Web Components that run in any browser supporting the Custom Elements v1 spec.
-
-Stencil components are just Web Components, so they work in any major framework or with no framework at all.
-
-## Getting Started
-
-To start building a new web component using Stencil, clone this repo to a new directory:
-
-```bash
-git clone https://github.com/ionic-team/stencil-component-starter.git my-component
-cd my-component
-git remote rm origin
-```
-
-and run:
-
-```bash
-npm install
-npm start
-```
-
-To build the component for production, run:
-
-```bash
-npm run build
-```
-
-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).
-
-
-## Naming Components
-
-When creating new component tags, we recommend _not_ using `stencil` in the component name (ex: `<stencil-datepicker>`). This is because the generated component has little to nothing to do with Stencil; it's just a web component!
-
-Instead, use a prefix that fits your company or any name for a group of related components. For example, all of the Ionic generated web components use the prefix `ion`.
-
-
-## Using this component
-
-### Script tag
-
-- [Publish to NPM](https://docs.npmjs.com/getting-started/publishing-npm-packages)
-- Put a script tag similar to this `<script src='https://unpkg.com/[email protected]/dist/mycomponent.js'></script>` in the head of your index.html
-- Then you can use the element anywhere in your template, JSX, html etc
-
-### Node Modules
-- Run `npm install my-component --save`
-- Put a script tag similar to this `<script src='node_modules/my-component/dist/mycomponent.js'></script>` in the head of your index.html
-- Then you can use the element anywhere in your template, JSX, html etc
-
-### In a stencil-starter app
-- Run `npm install my-component --save`
-- Add an import to the npm packages `import my-component;`
-- Then you can use the element anywhere in your template, JSX, html etc

src/components.d.ts

@@ -10,12 +10,20 @@ import { HTMLStencilElement, JSXBase } from '@stencil/core/internal';
 
 
 export namespace Components {
-  interface RemoteTable {}
+  interface RemoteTable {
+    'footerText': string;
+    'remoteUrl': string;
+    'tableTitle': string;
+  }
   interface RemoteTableContent {
     'remoteUrl': string;
   }
-  interface RemoteTableFooter {}
-  interface RemoteTableHeader {}
+  interface RemoteTableFooter {
+    'footerText': string;
+  }
+  interface RemoteTableHeader {
+    'titleText': string;
+  }
 }
 
 declare global {
@@ -53,13 +61,20 @@ declare global {
 }
 
 declare namespace LocalJSX {
-  interface RemoteTable {}
+  interface RemoteTable {
+    'footerText'?: string;
+    'remoteUrl'?: string;
+    'tableTitle'?: string;
+  }
   interface RemoteTableContent {
     'remoteUrl'?: string;
   }
-  interface RemoteTableFooter {}
+  interface RemoteTableFooter {
+    'footerText'?: string;
+  }
   interface RemoteTableHeader {
     'onSearchEvent'?: (event: CustomEvent<string>) => void;
+    'titleText'?: string;
   }
 
   interface IntrinsicElements {

src/components/remote-table-container/readme.md

@@ -0,0 +1,36 @@
+# remote-table
+
+
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property     | Attribute     | Description | Type     | Default     |
+| ------------ | ------------- | ----------- | -------- | ----------- |
+| `footerText` | `footer-text` |             | `string` | `undefined` |
+| `remoteUrl`  | `remote-url`  |             | `string` | `undefined` |
+| `tableTitle` | `table-title` |             | `string` | `undefined` |
+
+
+## Dependencies
+
+### Depends on
+
+- [remote-table-header](../remote-table-header)
+- [remote-table-content](../remote-table-content)
+- [remote-table-footer](../remote-table-footer)
+
+### Graph
+```mermaid
+graph TD;
+  remote-table --> remote-table-header
+  remote-table --> remote-table-content
+  remote-table --> remote-table-footer
+  style remote-table fill:#f9f,stroke:#333,stroke-width:4px
+```
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*

src/components/remote-table-container/remote-table-container.tsx

@@ -1,4 +1,4 @@
-import { Component, h, State } from '@stencil/core';
+import { Component, h, Prop } from '@stencil/core';
 
 
 @Component({
@@ -7,21 +7,24 @@ import { Component, h, State } from '@stencil/core';
 })
 export class RemoteTableContainer {
 
-    @State() remoteUrl: string;
+    @Prop() remoteUrl: string;
 
-    componentWillLoad() {
-        this.remoteUrl = 'https://raw.githubusercontent.com/aqidd/remote-table/master/db.json'
-    }
+    @Prop() tableTitle: string;
+
+    @Prop() footerText: string;
 
     render() {
         return [
             <remote-table-header
                 onSearchEvent={this.appendSearchQuery.bind(this)}
+                title-text={this.tableTitle}
             ></remote-table-header>,
             <remote-table-content
                 remoteUrl={this.remoteUrl}
             ></remote-table-content>,
-            <remote-table-footer></remote-table-footer>
+            <remote-table-footer
+                footer-text={this.footerText}>
+            </remote-table-footer>
         ];
     }
 

src/components/remote-table-container/remote-table.stories.js

@@ -0,0 +1,12 @@
+import { storiesOf } from '@storybook/html';
+import notes from './readme.md';
+
+storiesOf('RemoteTable', module)
+    .add('Json Typicode API', () => `
+        <remote-table remote-url='https://jsonplaceholder.typicode.com/todos'
+        table-title="Json Typicode Table" footer-text="development on progress..."></remote-table>
+  `, { notes })
+    .add('Given API', () => `
+        <remote-table remote-url='https://raw.githubusercontent.com/aqidd/remote-table/master/db.json'
+        table-title="Remote Table 0.0.1" footer-text="development on progress..."></remote-table>
+  `, { notes });

src/components/remote-table-content/readme.md

@@ -0,0 +1,30 @@
+# remote-table-content
+
+
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property    | Attribute    | Description | Type     | Default     |
+| ----------- | ------------ | ----------- | -------- | ----------- |
+| `remoteUrl` | `remote-url` |             | `string` | `undefined` |
+
+
+## Dependencies
+
+### Used by
+
+ - [remote-table](../remote-table-container)
+
+### Graph
+```mermaid
+graph TD;
+  remote-table --> remote-table-content
+  style remote-table-content fill:#f9f,stroke:#333,stroke-width:4px
+```
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*

src/components/remote-table-footer/readme.md

@@ -0,0 +1,30 @@
+# remote-table-footer
+
+
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property     | Attribute     | Description | Type     | Default     |
+| ------------ | ------------- | ----------- | -------- | ----------- |
+| `footerText` | `footer-text` |             | `string` | `undefined` |
+
+
+## Dependencies
+
+### Used by
+
+ - [remote-table](../remote-table-container)
+
+### Graph
+```mermaid
+graph TD;
+  remote-table --> remote-table-footer
+  style remote-table-footer fill:#f9f,stroke:#333,stroke-width:4px
+```
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*

src/components/remote-table-footer/remote-table-footer.tsx

@@ -1,4 +1,4 @@
-import { Component, h } from '@stencil/core';
+import { Component, h, Prop } from '@stencil/core';
 
 
 @Component({
@@ -7,13 +7,13 @@ import { Component, h } from '@stencil/core';
 })
 export class RemoteTableFooter {
 
-
+    @Prop() footerText: string;
 
     render() {
         return (
             <div>
                 <br/>
-                (c) XX
+                {this.footerText}
             </div>
         )
     }