feat: add ReactApp and Server example to handle camera

tsedio · Apr 1, 2022 · 7d76ce6 · 7d76ce6
1 parent ba64615
commit 7d76ce6
Show file tree

Hide file tree

Showing 123 changed files with 13,280 additions and 213 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -15,6 +15,7 @@
     "es6": true
   },
   "rules": {
+    "@typescript-eslint/no-inferrable-types": "off",
     "@typescript-eslint/no-explicit-any": 0,
     "@typescript-eslint/no-unused-vars": 2,
     "@typescript-eslint/no-var-requires": 0,

diff --git a/README.md b/README.md
@@ -128,6 +128,18 @@ brew install gphoto2
 sudo apt install gphoto2
 ```
 
+## Demo
+
+Run:
+
+```sh
+yarn start
+```
+
+Then open the browser on `http://localhost:3000`
+
+The demo code source is inside `packages/client` and `packages/server`.
+
 ## Usage
 
 Here an example with TypeScript (works also with pure javascript in Node.js):

diff --git a/base.jest.config.js b/base.jest.config.js
@@ -20,7 +20,7 @@ module.exports = (rootDir) => ({
 
   // moduleDirectories: ["node_modules", "packages"],
   // An array of regexp pattern strings used to skip coverage collection
-  coveragePathIgnorePatterns: ["index.ts", "GPUtils.ts", "__mock__"],
+  coveragePathIgnorePatterns: ["index.ts", "GPUtils.ts", "__mock__", "exports.ts", "src/types"],
   moduleNameMapper: {
     "^@tsed/gphoto2-core$": fixPath(join(packageDir, "gphoto2-core/src")),
     "^@tsed/gphoto2-driver$": fixPath(join(packageDir, "gphoto2-driver/src"))

diff --git a/package.json b/package.json
@@ -28,6 +28,7 @@
     "prettier": "prettier '**/*.{ts,js,json,md,yml,yaml}' --write",
     "release": "semantic-release",
     "release:dryRun": "semantic-release --dry-run",
+    "start": "lerna run start --stream",
     "start:abilities": "lerna run start:abilities",
     "start:camera": "lerna run start:camera",
     "start:camera:abilities": "lerna run start:camera:abilities",
@@ -52,6 +53,7 @@
     "@types/node": "16.11.11",
     "@typescript-eslint/eslint-plugin": "^5.5.0",
     "@typescript-eslint/parser": "^5.5.0",
+    "barrelsby": "2.3.3",
     "cross-env": "7.0.3",
     "eslint": "^8.4.0",
     "eslint-config-prettier": "8.3.0",

diff --git a/packages/client/.gitignore b/packages/client/.gitignore
@@ -0,0 +1,25 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+__generated__
diff --git a/packages/client/index.html b/packages/client/index.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/src/favicon.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="prefetch" as="font" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700"/>
+    <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700"/>
+    <title>Vite App</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/packages/client/package.json b/packages/client/package.json
@@ -0,0 +1,35 @@
+{
+  "name": "@tsed/client",
+  "private": true,
+  "version": "3.0.3",
+  "scripts": {
+    "start": "vite --host",
+    "build": "tsc && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "axios": "0.26.1",
+    "classnames": "^2.3.1",
+    "moment": "2.29.1",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-router": "6.2.2",
+    "react-router-dom": "6.2.2",
+    "react-toastify": "8.0.3"
+  },
+  "devDependencies": {
+    "@types/react": "^17.0.33",
+    "@types/react-dom": "^17.0.10",
+    "@types/moment": "2.13.0",
+    "@vitejs/plugin-react": "^1.0.7",
+    "vite-plugin-svgr": "1.1.0",
+    "@types/axios": "0.14.0",
+    "autoprefixer": "10.4.4",
+    "postcss": "8.4.12",
+    "postcss-nested": "5.0.6",
+    "tailwindcss": "3.0.23",
+    "typescript": "^4.5.4",
+    "vite": "^2.8.0"
+  },
+  "peerDependencies": {}
+}
diff --git a/packages/client/postcss.config.js b/packages/client/postcss.config.js
@@ -0,0 +1,7 @@
+module.exports = {
+  plugins: {
+    "tailwindcss/nesting": {},
+    tailwindcss: {},
+    autoprefixer: {}
+  }
+};
diff --git a/packages/client/src/App.tsx b/packages/client/src/App.tsx
@@ -0,0 +1,33 @@
+import React, {Suspense} from "react";
+import {Route, Routes} from "react-router-dom";
+import {routes} from "./routes";
+import {Logo} from "./components/logo/logo.component";
+import {ToastContainer} from "./toastr/toastr.container";
+
+function App() {
+  return (
+    <div className="flex fixed top-0 left-0 w-full h-full z-10 justify-center items-center">
+      <div>
+        <Logo className={"mb-10"} />
+        <main>
+          <Routes>
+            {routes.map(({component: View, ...route}) => (
+              <Route
+                key={route.path}
+                path={route.path}
+                element={
+                  <Suspense fallback={"Loading..."}>
+                    <View {...route} basePath={route.path} />
+                  </Suspense>
+                }
+              />
+            ))}
+          </Routes>
+          <ToastContainer />
+        </main>
+      </div>
+    </div>
+  );
+}
+
+export default App;
diff --git a/packages/client/src/buttons/capture-button.component.tsx b/packages/client/src/buttons/capture-button.component.tsx
@@ -0,0 +1,30 @@
+import {MouseEventHandler} from "react";
+
+export function CaptureButton({onClick}: {onClick: MouseEventHandler}) {
+  return (
+    <button
+      name={"capture-picture"}
+      onClick={onClick}
+      style={{
+        width: "60px",
+        height: "60px"
+      }}
+      className={
+        "reset-button mx-1 block border-2 border-gray-700 bg-white hover:bg-blue-600 hover:text-white hover:fill-white transition-all  rounded-full flex justify-center items-center p-2"
+      }
+    >
+      <svg
+        style={{width: "40px", height: "40px"}}
+        id="Layer_1"
+        version="1.1"
+        viewBox="0 0 24 24"
+        xmlSpace="preserve"
+        xmlns="http://www.w3.org/2000/svg"
+        xmlnsXlink="http://www.w3.org/1999/xlink"
+      >
+        <path d="M19.599,6h-2.323l-0.714-2.015C16.34,3.319,15.719,3,15.017,3H8.983C8.281,3,7.66,3.319,7.438,3.985L6.724,6H4.401  C2.905,6,2,7.247,2,8.743v9.77C2,20.009,2.905,21,4.401,21h15.197C21.095,21,22,20.009,22,18.513v-9.77C22,7.247,21.095,6,19.599,6z   M21,18.513C21,19.411,20.497,20,19.599,20H4.401C3.503,20,3,19.411,3,18.513v-9.77C3,7.846,3.503,7,4.401,7h2.714  C7.349,7,7.556,6.908,7.63,6.687l0.838-2.415C8.542,4.05,8.749,4,8.983,4h6.034c0.234,0,0.441,0.078,0.515,0.301l0.838,2.421  C16.444,6.943,16.651,7,16.885,7h2.714C20.497,7,21,7.846,21,8.743V18.513z" />
+        <path d="M12,7.658c-2.993,0-5.428,2.435-5.428,5.428S9.007,18.513,12,18.513s5.428-2.435,5.428-5.428S14.993,7.658,12,7.658z   M12,17.428c-2.394,0-4.342-1.948-4.342-4.342S9.606,8.743,12,8.743s4.342,1.948,4.342,4.342S14.394,17.428,12,17.428z" />
+      </svg>
+    </button>
+  );
+}
diff --git a/packages/client/src/buttons/flash-button.component.tsx b/packages/client/src/buttons/flash-button.component.tsx
@@ -0,0 +1,21 @@
+import {MouseEventHandler} from "react";
+import {ReactComponent as FlashOn} from "../svg/flash_on.svg";
+import {ReactComponent as FlashOff} from "../svg/flash_off.svg";
+
+export function FlashButton({isActive, onClick}: {isActive: boolean; onClick: MouseEventHandler}) {
+  return (
+    <button
+      name={"live-view"}
+      onClick={onClick}
+      style={{
+        width: "30px",
+        height: "30px"
+      }}
+      className={
+        "reset-button -mb-5 mx-1 block border-2 border-gray-700 bg-white hover:bg-blue-600 hover:text-white hover:fill-white transition-all rounded-full flex justify-center items-center p-2"
+      }
+    >
+      {isActive ? <FlashOn /> : <FlashOff />}
+    </button>
+  );
+}
diff --git a/packages/client/src/buttons/liveview-button.component.tsx b/packages/client/src/buttons/liveview-button.component.tsx
@@ -0,0 +1,20 @@
+import {MouseEventHandler} from "react";
+import {BxIcon} from "../components/icons/bx-icon.component";
+
+export function LiveViewButton({isActive, onClick}: {isActive: boolean; onClick: MouseEventHandler}) {
+  return (
+    <button
+      name={"live-view"}
+      onClick={onClick}
+      style={{
+        width: "30px",
+        height: "30px"
+      }}
+      className={
+        "reset-button -mb-5 mx-1 block border-2 border-gray-700 bg-white hover:bg-blue-600 hover:text-white hover:fill-white transition-all  rounded-full flex justify-center items-center p-2"
+      }
+    >
+      <BxIcon name={!isActive ? "play" : "stop"} />
+    </button>
+  );
+}