first commit

kevinv11n · Jan 25, 2019 · 2b03929 · 2b03929
commit 2b03929
Show file tree

Hide file tree

Showing 16 changed files with 4,760 additions and 0 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -0,0 +1,6 @@
+module.exports = {
+    "extends": "airbnb-base",
+    "rules": {
+        "indent": [2, 4]
+    },
+};
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,3 @@
+node_modules
+.idea
+build
diff --git a/.npmrc b/.npmrc
@@ -0,0 +1 @@
+registry=https://npm.lwcjs.org
diff --git a/Procfile b/Procfile
@@ -0,0 +1 @@
+web: yarn start:heroku
diff --git a/package.json b/package.json
@@ -0,0 +1,34 @@
+{
+    "name": "lwc-app",
+    "version": "0.0.1",
+    "private": true,
+    "author": "Reinier Guerra",
+    "scripts": {
+        "start": "run-p watch serve",
+        "serve": "node server.js",
+        "build": "rollup -c",
+        "watch": "rollup -c -w",
+        "start:heroku": "yarn build && node server.js"
+    },
+    "dependencies": {
+        "@salesforce-ux/design-system": "^2.6.0",
+        "lwc-components-lightning": "1.1.0-alpha",
+        "node-static": "^0.7.11",
+        "rollup-slds-plugin": "0.0.1",
+        "@lwc/compiler": "0.33.25",
+        "@lwc/engine": "0.33.25",
+        "@lwc/rollup-plugin": "0.33.25",
+        "eslint": "^4.19.1",
+        "eslint-config-airbnb-base": "^12.1.0",
+        "eslint-plugin-import": "^2.12.0",
+        "fs-extra": "^6.0.1",
+        "npm-run-all": "^4.1.3",
+        "rollup": "0.57.1",
+        "rollup-plugin-cleaner": "^0.2.0",
+        "rollup-plugin-compat": "0.21.0",
+        "rollup-plugin-copied": "0.0.2",
+        "rollup-plugin-cpy": "^1.0.0",
+        "rollup-plugin-replace": "^2.0.0",
+        "rollup-watch": "^4.3.1"
+    }
+}
diff --git a/readme.md b/readme.md
@@ -0,0 +1,21 @@
+## lwc-app
+
+This an standalone lwc application. That allows out the box:
+
+- Write your components. 
+- Use `ui-lightning-components` in your component templates.
+- Use any SLDS CSS or assets. 
+
+## Usage steps
+
+```sh
+npm install
+npm start
+
+open: http://localhost:3000
+```
+
+## Writing components 
+
+You can write your own component inside of the `/src` folder, You can write as many namespace you want
+
diff --git a/rollup.config.js b/rollup.config.js
@@ -0,0 +1,40 @@
+/* eslint-disable no-console */
+const path = require('path');
+const lwcCompiler = require('@lwc/rollup-plugin');
+const replace = require('rollup-plugin-replace');
+const cleaner = require('rollup-plugin-cleaner');
+const copy = require('rollup-plugin-cpy');
+const copySldsAssets = require('rollup-slds-plugin');
+
+module.exports = {
+    input: path.resolve('src/index.js'),
+    output: {
+        file: path.resolve('build/app.js'),
+        format: 'iife',
+    },
+    plugins: [
+        cleaner({
+            targets: [
+                './build/',
+            ],
+        }),
+        copy({
+            files: ['src/index.html'],
+            dest: 'build',
+            options: {
+                verbose: true,
+            },
+        }),
+        copySldsAssets({ dest: 'build/assets' }),
+        lwcCompiler({
+            mapNamespaceFromPath: true,
+            resolveFromPackages: true,
+        }),
+        replace({
+            'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
+        }),
+    ],
+    watch: {
+        exclude: ['node_modules/**'],
+    },
+};
diff --git a/server.js b/server.js
@@ -0,0 +1,10 @@
+var static = require('node-static');
+var file = new static.Server('./build');
+
+require('http').createServer((request, response) => {
+    request.addListener('end', () => {
+        file.serve(request, response);
+    }).resume();
+}).listen(process.env.PORT || 3000, function() {
+    console.log(`App is listening at ${this.address().port} port!`);
+});
diff --git a/src/index.html b/src/index.html
@@ -0,0 +1,15 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport"
+          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <link rel="stylesheet" href="assets/styles/salesforce-lightning-design-system.css">
+    <title>LWC APP!</title>
+</head>
+<body>
+    <div id="main"></div>
+</body>
+<script src="app.js"></script>
+</html>
diff --git a/src/index.js b/src/index.js
@@ -0,0 +1,6 @@
+import { createElement } from 'lwc';
+import MyApp from 'my/app';
+
+document
+    .querySelector('#main')
+    .appendChild(createElement('my-app', { is: MyApp }))
diff --git a/src/modules/examples/datatable/datatable.html b/src/modules/examples/datatable/datatable.html
@@ -0,0 +1,14 @@
+<template>
+  Rows: {rowsLength}
+  <div class="slds-col" style="height: 400px;">
+    <lightning-datatable
+       columns={columns}
+       data={data}
+       key-field="id"
+       show-row-number-column
+       enable-infinite-loading={enableInfiniteLoading}
+       onloadmore={onLoadMore}
+       is-loading={isLoading}>
+    </lightning-datatable>
+  </div>  
+</template>
diff --git a/src/modules/examples/datatable/datatable.js b/src/modules/examples/datatable/datatable.js
@@ -0,0 +1,39 @@
+import { LightningElement, track } from 'lwc';
+import fetchData from './fetchData';
+
+
+const columns = [
+    { label: 'Label', fieldName: 'name' },
+    { label: 'Website', fieldName: 'website', type: 'url' },
+    { label: 'Phone', fieldName: 'phone', type: 'phone' },
+    { label: 'Balance', fieldName: 'amount', type: 'currency' },
+    { label: 'CloseAt', fieldName: 'closeAt', type: 'date' },
+];
+
+export default class ExamplesDatatable extends LightningElement {
+    @track data = [];
+    @track columns = columns;
+    @track isLoading = false;
+    @track enableInfiniteLoading = true;
+    @track rowsLength = 0;
+
+    async connectedCallback() {
+        this.isLoading = true;
+        const data = await fetchData({ amountOfRecords: 100 });
+        this.data = data;
+        this.isLoading = false;
+        this.rowsLength = this.data.length;
+    }
+
+    async onLoadMore() {
+        this.isLoading = true;
+        this.enableInfiniteLoading = false;
+
+        const data = await fetchData({ amountOfRecords: 100 });
+        this.data = [...this.data, ...data];
+
+        this.isLoading = false;
+        this.enableInfiniteLoading = true;
+        this.rowsLength = this.data.length;
+    }
+}
diff --git a/src/modules/examples/datatable/fetchData.js b/src/modules/examples/datatable/fetchData.js
@@ -0,0 +1,21 @@
+const recordMetadata = {
+    name: 'name',
+    email: 'email',
+    website: 'url',
+    amount: 'currency',
+    phone: 'phoneNumber',
+    closeAt: 'dateInFuture',
+};
+
+export default function fetchDataHelper({ amountOfRecords }) {
+    return fetch('https://data-faker.herokuapp.com/collection', {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json; charset=utf-8',
+        },
+        body: JSON.stringify({
+            amountOfRecords,
+            recordMetadata,
+        }),
+    }).then(response => response.json());
+}
diff --git a/src/modules/my/app/app.html b/src/modules/my/app/app.html
@@ -0,0 +1,6 @@
+<template>
+    <div class="slds-m-around_large">
+        <h1 class="slds-text-heading_large">Lightning datatable</h1>
+        <examples-datatable></examples-datatable>
+    </div>
+</template>
diff --git a/src/modules/my/app/app.js b/src/modules/my/app/app.js
@@ -0,0 +1,5 @@
+import { LightningElement, api, track } from 'lwc';
+
+export default class DemoApp extends LightningElement {
+
+}