Merge pull request #1 from Norgate-AV-Solutions-Ltd/develop

Merge latest updates from Develop
Norgate-AV · Mar 26, 2022 · 11776bd · 11776bd
2 parents 5ce0884 + 7e98dad
commit 11776bd
Show file tree

Hide file tree

Showing 10 changed files with 163 additions and 21 deletions.
diff --git a/.editorconfig b/.editorconfig
@@ -0,0 +1,15 @@
+root = true
+
+[*]
+
+charset = utf-8
+end_of_line = lf
+insert_final_newline = true
+indent_style = tab
+indent_size = tab
+tab_width = 4
+trim_trailing_whitespace = true
+
+[*.md]
+
+trim_trailing_whitespace = false
diff --git a/.github/workflows/publish.yml b/.github/workflows/publish.yml
@@ -1,10 +1,8 @@
-name: Node.js CI
+name: Publish
 
 on:
   push:
     branches: [ master ]
-  pull_request:
-    branches: "*"
 
 jobs:
   quality:

diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,19 @@
+{
+    "typescript.validate.enable": true,
+    "editor.defaultFormatter": "esbenp.prettier-vscode",
+    "editor.formatOnSave": true,
+    "editor.formatOnPaste": true,
+    "files.trimTrailingWhitespace": true,
+    "[markdown]": {
+        "files.trimTrailingWhitespace": false
+    },
+    "files.exclude": {
+        "**/.git": true,
+        "**/.svn": true,
+        "**/.hg": true,
+        "**/CVS": true,
+        "**/.DS_Store": true,
+        "**/*.js.map": true,
+        "node_modules": true
+    }
+}
diff --git a/README.md b/README.md
@@ -2,6 +2,8 @@
 
 This is an unofficial third party TypeScript template for [Create React App](https://github.com/facebook/create-react-app) and [Crestron CH5](https://www.npmjs.com/package/@crestron/ch5-crcomlib)
 
+The template is setup to work with Crestron CH5 out of the box so you can get up and running quickly. It also provides packages for page routing, styling using [CSS-in-JS](https://en.wikipedia.org/wiki/CSS-in-JS) (you can still use regular CSS or SCSS 😄), a wide variety of icons, mobile browser console, linting and more... 🚀 🚀 🚀
+
 To use this template, add `--template @norgate-av/crestron-ch5-typescript` when creating a new app.
 
 For example:
@@ -14,7 +16,47 @@ npx create-react-app my-app --template @norgate-av/crestron-ch5-typescript
 yarn create react-app my-app --template @norgate-av/crestron-ch5-typescript
 ```
 
+## What does this template provide?
+
+-   Crestron CH5 CrComLib
+-   Crestron CH5 WebXPanel
+-   Crestron CH5 CLI
+-   [Typescript](https://www.typescriptlang.org/)
+-   [React Router](https://reactrouterdotcom.fly.dev/)
+-   [Styled Components](https://styled-components.com/)
+-   [React Icons](https://react-icons.github.io/react-icons/)
+-   [Eruda](https://eruda.liriliri.io/)
+-   [ESLint](https://eslint.org/)
+-   [Prettier](https://prettier.io/)
+-   [Husky](https://typicode.github.io/husky/#/)
+-   [Lint-Staged](https://github.com/okonet/lint-staged)
+-   [Commitizen](https://commitizen-tools.github.io/commitizen/)
+-   [VSCode Workspace Config](https://code.visualstudio.com/docs/getstarted/settings#_workspace-settings)
+-   [EditorConfig](https://editorconfig.org/)
+
+## Project Setup
+
+To upload to a Crestron touchscreen or control system, you must add the IP address or hostname to the project properties in `package.json`.
+
+```json
+{
+	"crestron": {
+		"project": {
+			"touchscreen": {
+				"url": "Enter IP/Hostname of Crestron Touchpanel here...",
+				"type": "touchscreen"
+			},
+			"web": {
+				"url": "Enter IP/Hostname of Crestron Processor here...",
+				"type": "web"
+			}
+		}
+	}
+}
+```
+
 For more information, please refer to:
 
 -   [Getting Started](https://create-react-app.dev/docs/getting-started) – How to create a new app.
 -   [User Guide](https://create-react-app.dev) – How to develop apps bootstrapped with Create React App.
+-   [Crestron CH5 Documentation](https://sdkcon78221.crestron.com/sdk/Crestron_HTML5UI/Content/Topics/Home.htm)
diff --git a/template.json b/template.json
@@ -8,13 +8,11 @@
             "@testing-library/user-event": "^13.5.0",
             "@types/jest": "^27.4.1",
             "@types/node": "^16.11.26",
-            "@types/node-sass": "^4.11.1",
             "@types/react": "^17.0.40",
             "@types/react-dom": "^17.0.13",
             "@types/react-router-dom": "^5.3.3",
             "@types/styled-components": "^5.1.24",
             "eruda": "^2.4.1",
-            "node-sass": "^6.0.0",
             "react-icons": "^4.3.1",
             "react-router-dom": "^6.2.2",
             "styled-components": "^5.3.3",
@@ -30,8 +28,10 @@
             "serve": "serve -s build",
             "build-and-serve": "yarn build && yarn serve",
             "build:archive": "yarn clean:dist && yarn ch5-cli archive -p $npm_package_name -P samplesource=$npm_package_name -d build -o dist",
-            "build:deploy": "yarn ch5-cli deploy -p -H $npm_package_crestron_project_touchscreen_url -t touchscreen dist/$npm_package_name.ch5z",
-            "build:onestep": "yarn build && yarn build:archive && yarn build:deploy",
+            "build:deploy:touchscreen": "yarn ch5-cli deploy -p -H $npm_package_crestron_project_touchscreen_url -t $npm_package_crestron_project_touchscreen_type dist/$npm_package_name.ch5z",
+            "build:deploy:web": "yarn ch5-cli deploy -p -H $npm_package_crestron_project_web_url -t $npm_package_crestron_project_web_type dist/$npm_package_name.ch5z",
+            "build:onestep:touchscreen": "yarn build && yarn build:archive && yarn build:deploy:touchscreen",
+            "build:onestep:web": "yarn build && yarn build:archive && yarn build:deploy:web",
             "resolve:crcomlib": "jq '.main = \"build_bundles/cjs/cr-com-lib.js\"' $npm_package_crestron_crcomlib_packageJson | sponge $npm_package_crestron_crcomlib_packageJson",
             "lint": "eslint .",
             "lint:fix": "eslint --fix .",
@@ -44,7 +44,12 @@
         "crestron": {
             "project": {
                 "touchscreen": {
-                    "url": ""
+                    "url": "Enter IP/Hostname of Crestron Touchpanel here...",
+                    "type": "touchscreen"
+                },
+                "web": {
+                    "url": "Enter IP/Hostname of Crestron Processor here...",
+                    "type": "web"
                 }
             },
             "crcomlib": {
@@ -62,6 +67,7 @@
         "devDependencies": {
             "@crestron/ch5-utilities-cli": "^0.1.52",
             "@types/ncp": "^2.0.5",
+            "@types/node-sass": "^4.11.2",
             "@types/rimraf": "^3.0.2",
             "@typescript-eslint/eslint-plugin": "^5.14.0",
             "@typescript-eslint/parser": "^5.14.0",
@@ -79,6 +85,7 @@
             "lint-staged": "^12.3.5",
             "ncp": "^2.0.0",
             "node-jq": "^2.1.0",
+            "node-sass": "^7.0.1",
             "prettier": "^2.5.1",
             "rimraf": "^3.0.2",
             "sponge": "^0.1.0"

diff --git a/template/.editorconfig b/template/.editorconfig
@@ -9,3 +9,7 @@ indent_style = tab
 indent_size = tab
 tab_width = 4
 trim_trailing_whitespace = true
+
+[*.md]
+
+trim_trailing_whitespace = false
diff --git a/template/.eslintrc.json b/template/.eslintrc.json
@@ -37,10 +37,18 @@
 				"avoidEscape": true
 			}
 		],
+		"import/no-extraneous-dependencies": [
+			"error",
+			{
+				"devDependencies": true
+			}
+		],
 		"react/jsx-uses-react": ["off"],
 		"react/react-in-jsx-scope": ["off"],
 		"react/jsx-props-no-spreading": ["warn"],
 		"react/jsx-one-expression-per-line": "off",
-		"no-shadow": "off"
+		"no-shadow": "off",
+		"@typescript-eslint/no-shadow": "off",
+		"no-console": "off"
 	}
 }
diff --git a/template/.vscode/settings.json b/template/.vscode/settings.json
@@ -1,6 +1,19 @@
 {
-    "typescript.validate.enable": true,
-    "editor.defaultFormatter": "esbenp.prettier-vscode",
-    "editor.formatOnSave": true,
-    "editor.formatOnPaste": true
+	"typescript.validate.enable": true,
+	"editor.defaultFormatter": "esbenp.prettier-vscode",
+	"editor.formatOnSave": true,
+	"editor.formatOnPaste": true,
+	"files.trimTrailingWhitespace": true,
+	"[markdown]": {
+		"files.trimTrailingWhitespace": false
+	},
+	"files.exclude": {
+		"**/.git": true,
+		"**/.svn": true,
+		"**/.hg": true,
+		"**/CVS": true,
+		"**/.DS_Store": true,
+		"**/*.js.map": true,
+		"node_modules": true
+	}
 }
diff --git a/template/README.md b/template/README.md
@@ -4,11 +4,37 @@ This project was bootstrapped with [Create React App](https://github.com/faceboo
 
 ## Crestron CH5 Specific
 
-`yarn build` will compile the code in src to the build directory.
+`yarn build` will compile the code in src to the build directory.  
 `yarn build:archive` will build a ch5z file from the most recently built build and output to the dist folder.
-`yarn build:deploy` will deploy the ch5z from the dist folder to a touchpanel "panel".
 
-`yarn build:onestep` will execute the above three steps in sequence.
+`yarn build:deploy:touchscreen` will deploy the ch5z from the dist folder to a touchscreen.  
+`yarn build:onestep:touchscreen` will execute the build, archive and deploy steps in sequence.
+
+`yarn build:deploy:web` will deploy the ch5z from the dist folder to a control system.  
+`yarn build:onestep:web` will execute the build, archive and deploy steps in sequence.
+
+To learn more about Crestron CH5, check out the [Crestron CH5 documentation](https://sdkcon78221.crestron.com/sdk/Crestron_HTML5UI/Content/Topics/Home.htm).
+
+## Project Setup
+
+To upload to a Crestron touchscreen or control system, you must add the IP address or hostname to the project properties in `package.json`.
+
+```json
+{
+	"crestron": {
+		"project": {
+			"touchscreen": {
+				"url": "Enter IP/Hostname of Crestron Touchpanel here...",
+				"type": "touchscreen"
+			},
+			"web": {
+				"url": "Enter IP/Hostname of Crestron Processor here...",
+				"type": "web"
+			}
+		}
+	}
+}
+```
 
 ## Available Scripts
 

diff --git a/template/src/index.tsx b/template/src/index.tsx
@@ -1,22 +1,32 @@
 import React from "react";
 import ReactDOM from "react-dom";
+import { HashRouter as Router } from "react-router-dom";
 import "./index.css";
 import {
 	bridgeReceiveIntegerFromNative,
 	bridgeReceiveBooleanFromNative,
 	bridgeReceiveStringFromNative,
 	bridgeReceiveObjectFromNative,
+	isCrestronTouchscreen,
 } from "@crestron/ch5-crcomlib";
 import App from "./App";
 
-(window as any).bridgeReceiveIntegerFromNative = bridgeReceiveIntegerFromNative;
-(window as any).bridgeReceiveBooleanFromNative = bridgeReceiveBooleanFromNative;
-(window as any).bridgeReceiveStringFromNative = bridgeReceiveStringFromNative;
-(window as any).bridgeReceiveObjectFromNative = bridgeReceiveObjectFromNative;
+if (isCrestronTouchscreen()) {
+	(window as any).bridgeReceiveIntegerFromNative =
+		bridgeReceiveIntegerFromNative;
+	(window as any).bridgeReceiveBooleanFromNative =
+		bridgeReceiveBooleanFromNative;
+	(window as any).bridgeReceiveStringFromNative =
+		bridgeReceiveStringFromNative;
+	(window as any).bridgeReceiveObjectFromNative =
+		bridgeReceiveObjectFromNative;
+}
 
 ReactDOM.render(
 	<React.StrictMode>
-		<App />
+		<Router>
+			<App />
+		</Router>
 	</React.StrictMode>,
 	document.getElementById("root"),
 );