docs: add example clock with react-tv as renderer

raphamorim · Nov 3, 2017 · caf34ee · caf34ee
1 parent 80fe052
commit caf34ee
Show file tree

Hide file tree

Showing 11 changed files with 2,738 additions and 128 deletions.
diff --git a/cli/scripts/webos/run-dev.js b/cli/scripts/webos/run-dev.js
@@ -10,8 +10,6 @@ module.exports = function _runWebOSDev(pathArg) {
   const pathWebOS = path.resolve(pathArg, 'webos');
   const pathNodeModules = path.resolve(pathArg, 'node_modules');
 
-  // build(pathArg, pathWebOS);
-
   app.use('/', express.static(pathWebOS));
   app.use('/node_modules', express.static(pathNodeModules));
 

diff --git a/examples/clock-app-with-react-tv/index.html b/examples/clock-app-with-react-tv/index.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <title>Clock App With React-TV</title>
+    <link rel="stylesheet" href="style.css">
+  </head>
+  <body>
+    <h1>Clock App with React-TV</h1>
+
+    <div id="root"></div>
+    <script src="bundle.js"></script>
+  </body>
+</html>
diff --git a/examples/clock-app-with-react-tv/package.json b/examples/clock-app-with-react-tv/package.json
@@ -0,0 +1,22 @@
+{
+  "name": "clock-app-with-react-tv",
+  "version": "1.0.0",
+  "author": "Raphael Amorim",
+  "license": "MIT",
+  "scripts": {
+    "build": "webpack",
+    "start": "webpack-dev-server --progress --colors"
+  },
+  "dependencies": {
+    "react": "16.0.0-alpha.3",
+    "react-tv": "file:../../"
+  },
+  "devDependencies": {
+    "babel-core": "^6.4.5",
+    "babel-loader": "^6.2.1",
+    "babel-preset-es2015": "^6.3.13",
+    "babel-preset-react": "^6.3.13",
+    "webpack": "^1.12.12",
+    "webpack-dev-server": "^1.12.1"
+  }
+}
diff --git a/examples/clock-app-with-react-tv/src/App.js b/examples/clock-app-with-react-tv/src/App.js
@@ -0,0 +1,21 @@
+import React from 'react'
+import ReactTV, { Platform } from 'react-tv'
+
+class Clock extends React.Component {
+  constructor() {
+    super()
+    this.state = { date: new Date() }
+  }
+
+  render() {
+    if (Platform('webos')) {
+      return (
+        <h1>It is {this.state.date.toLocaleTimeString()}</h1>
+      )
+    }
+
+    return <h2>This App is available only at LG WebOS</h2>
+  }
+}
+
+ReactTV.render(<Clock/>, document.getElementById('root'))
diff --git a/examples/clock-app-with-react-tv/style.css b/examples/clock-app-with-react-tv/style.css
@@ -0,0 +1,13 @@
+body {
+  background: #262626;
+  color: #4AD0EC;
+  font-family: Helvetica;
+  letter-spacing: 0.15em;
+  width: 600px;
+  margin: 0 auto;
+}
+
+h1 {
+  font-weight: 300;
+  color: #FFF;
+}
diff --git a/examples/clock-app-with-react-tv/webpack.config.js b/examples/clock-app-with-react-tv/webpack.config.js
@@ -0,0 +1,19 @@
+var path = require('path');
+var webpack = require('webpack');
+
+module.exports = {
+  entry: './src/App.js',
+  output: { path: __dirname, filename: 'bundle.js' },
+  module: {
+    loaders: [
+      {
+        test: /.jsx?$/,
+        loader: 'babel-loader',
+        exclude: /node_modules/,
+        query: {
+          presets: ['es2015', 'react']
+        }
+      }
+    ]
+  },
+};