@clary-so/measure 0.4.2

package/src/webapp/components/AppBar.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+import MaterialAppBar from "@mui/material/AppBar";
+
+export const AppBar = ({ children }: { children: React.ReactNode }) => {
+  return (
+    <MaterialAppBar position="relative" className="bg-dark-charcoal">
+      <div
+        style={{
+          flexDirection: "row",
+          display: "flex",
+          alignItems: "center",
+          padding: 10,
+        }}
+      >
+        {children}
+      </div>
+    </MaterialAppBar>
+  );
+};

package/src/webapp/components/BundleIdSelector.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+import { TextField } from "./TextField";
+import { Button } from "@clary-so/web-reporter-ui";
+
+export const BundleIdSelector = ({
+  bundleId,
+  onChange,
+  autodetect,
+}: {
+  bundleId: string | null;
+  onChange: (bundleId: string) => void;
+  autodetect: () => void;
+}) => {
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    onChange(event.target.value);
+  };
+
+  return (
+    <>
+      <Button onClick={autodetect}>Auto-Detect</Button>
+      <div style={{ paddingRight: 5, paddingLeft: 5 }}>
+        <TextField onChange={handleChange} value={bundleId || ""} />
+      </div>
+    </>
+  );
+};

package/src/webapp/components/SocketState.tsx

@@ -0,0 +1,79 @@
+import React, { useEffect, useState } from "react";
+import Dialog from "@mui/material/Dialog";
+import DialogTitle from "@mui/material/DialogTitle";
+import DialogContent from "@mui/material/DialogContent";
+import DialogContentText from "@mui/material/DialogContentText";
+import DialogActions from "@mui/material/DialogActions";
+import Button from "@mui/material/Button";
+import { Logger } from "@clary-so/logger";
+import { socket } from "../socket";
+import { useLogSocketEvents } from "../../common/useLogSocketEvents";
+import { SocketEvents } from "../../server/socket/socketInterface";
+
+const useSocketState = (onError: (error: string) => void) => {
+  useLogSocketEvents(socket);
+  const [isConnected, setIsConnected] = useState(socket.connected);
+
+  useEffect(() => {
+    function onConnect() {
+      setIsConnected(true);
+    }
+
+    function onDisconnect(reason: string) {
+      setIsConnected(false);
+
+      Logger.info(`socket disconnected with reason: ${reason}`);
+
+      if (reason === "transport close" || reason === "transport error") {
+        onError("flashlight CLI command exited. Restart from the CLI.");
+      }
+    }
+
+    socket.on(SocketEvents.CONNECT, onConnect);
+    socket.on(SocketEvents.DISCONNECT, onDisconnect);
+    socket.on(SocketEvents.SEND_ERROR, onError);
+
+    return () => {
+      socket.off(SocketEvents.CONNECT, onConnect);
+      socket.off(SocketEvents.DISCONNECT, onDisconnect);
+      socket.off(SocketEvents.SEND_ERROR, onError);
+    };
+  }, [onError]);
+
+  useEffect(() => {
+    return () => {
+      socket.close();
+    };
+  }, []);
+
+  return { isConnected };
+};
+
+export const SocketState = () => {
+  const [error, setError] = React.useState<string | null>(null);
+  const closeModal = () => setError(null);
+  useSocketState(setError);
+
+  const isModalOpened = error !== null;
+
+  return (
+    <>
+      <Dialog
+        open={isModalOpened}
+        onClose={closeModal}
+        aria-labelledby="alert-dialog-title"
+        aria-describedby="alert-dialog-description"
+      >
+        <DialogTitle id="alert-dialog-title">🚨 Woups, something happened</DialogTitle>
+        <DialogContent>
+          <DialogContentText id="alert-dialog-description">{error}</DialogContentText>
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={closeModal} autoFocus>
+            Close
+          </Button>
+        </DialogActions>
+      </Dialog>
+    </>
+  );
+};

package/src/webapp/components/StartButton.tsx

@@ -0,0 +1,22 @@
+import { PlayArrow, Stop } from "@mui/icons-material";
+import { Button } from "@clary-so/web-reporter-ui";
+import React from "react";
+
+export const StartButton = ({
+  isMeasuring,
+  start,
+  stop,
+}: {
+  isMeasuring: boolean;
+  start: () => void;
+  stop: () => void;
+}) =>
+  isMeasuring ? (
+    <Button onClick={stop} icon={<Stop />}>
+      Stop Measuring
+    </Button>
+  ) : (
+    <Button onClick={start} icon={<PlayArrow />}>
+      Start Measuring
+    </Button>
+  );

package/src/webapp/components/TextField.tsx

@@ -0,0 +1,54 @@
+import * as React from "react";
+import { styled, alpha } from "@mui/material/styles";
+import InputBase from "@mui/material/InputBase";
+import { AndroidRounded } from "@mui/icons-material";
+
+const Search = styled("div")(({ theme }) => ({
+  position: "relative",
+  borderRadius: theme.shape.borderRadius,
+  backgroundColor: alpha(theme.palette.common.white, 0.15),
+  "&:hover": {
+    backgroundColor: alpha(theme.palette.common.white, 0.25),
+  },
+  marginLeft: 0,
+  width: 300,
+}));
+
+const SearchIconWrapper = styled("div")(() => ({
+  paddingLeft: 10,
+  paddingRight: 10,
+  height: "100%",
+  position: "absolute",
+  pointerEvents: "none",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+}));
+
+const StyledInputBase = styled(InputBase)(({ theme }) => ({
+  color: "inherit",
+  "& .MuiInputBase-input": {
+    padding: 10,
+    // vertical padding + font size from searchIcon
+    paddingLeft: 45,
+    transition: theme.transitions.create("width"),
+    width: 300 - 45 - 10,
+  },
+}));
+
+export const TextField = ({
+  onChange,
+  value,
+}: {
+  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  value: string;
+}) => {
+  return (
+    <Search>
+      <SearchIconWrapper>
+        <AndroidRounded />
+      </SearchIconWrapper>
+      <StyledInputBase placeholder="Fill in your app id" onChange={onChange} value={value} />
+    </Search>
+  );
+};

package/src/webapp/globals.d.ts

@@ -0,0 +1,9 @@
+import type { FlashlightData } from "../common/types";
+
+declare global {
+  interface Window {
+    __FLASHLIGHT_DATA__: FlashlightData;
+  }
+}
+
+export {};

package/src/webapp/index.html

@@ -0,0 +1,30 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Flashlight</title>
+    <link rel="icon" href="https://app.flashlight.dev/favicon.ico" />
+    <link rel="stylesheet" href="https://use.typekit.net/onj4oqg.css" />
+  </head>
+  <body>
+    <style>
+      @import "../../../../core/web-reporter-ui/index.css";
+
+      html,
+      body,
+      #app {
+        height: 100%;
+        width: 100%;
+      }
+
+      body {
+        @apply bg-light-charcoal;
+      }
+    </style>
+    <div id="app"></div>
+    <script type="module" src="index.js"></script>
+    <script>
+      window.__FLASHLIGHT_DATA__ = { socketServerUrl: "http://localhost:4000" };
+    </script>
+  </body>
+</html>

package/src/webapp/index.js

@@ -0,0 +1,9 @@
+import React from "react";
+import ReactDOM from "react-dom";
+import { MeasureWebApp } from "./MeasureWebApp";
+
+// TODO: fix eslint errors
+// eslint-disable-next-line no-undef
+const app = document.getElementById("app");
+// eslint-disable-next-line react/no-deprecated
+ReactDOM.render(<MeasureWebApp />, app);

package/src/webapp/socket.ts

@@ -0,0 +1,12 @@
+import { io, Socket } from "socket.io-client";
+import {
+  ServerToClientEvents,
+  ClientToServerEvents,
+  SocketEvents,
+} from "../server/socket/socketInterface";
+
+export const socket: Socket<ServerToClientEvents, ClientToServerEvents> = io(
+  window.__FLASHLIGHT_DATA__.socketServerUrl
+);
+
+socket.on(SocketEvents.DISCONNECT, () => socket.close());

package/src/webapp/useMeasures.ts

@@ -0,0 +1,36 @@
+import { useEffect, useState } from "react";
+import { SocketData, SocketEvents } from "../server/socket/socketInterface";
+import { socket } from "./socket";
+
+export const useMeasures = () => {
+  const [state, setState] = useState<SocketData>();
+
+  useEffect(() => {
+    socket.on(SocketEvents.UPDATE_STATE, setState);
+
+    return () => {
+      socket.off(SocketEvents.UPDATE_STATE, setState);
+    };
+  }, []);
+
+  return {
+    bundleId: state?.bundleId ?? null,
+    autodetect: () => {
+      socket.emit(SocketEvents.AUTODETECT_BUNDLE_ID);
+    },
+    setBundleId: (bundleId: string) => {
+      socket.emit(SocketEvents.SET_BUNDLE_ID, bundleId);
+    },
+    results: state?.results ?? [],
+    isMeasuring: state?.isMeasuring ?? false,
+    start: () => {
+      socket.emit(SocketEvents.START);
+    },
+    stop: () => {
+      socket.emit(SocketEvents.STOP);
+    },
+    reset: () => {
+      socket.emit(SocketEvents.RESET);
+    },
+  };
+};

package/tailwind.config.js

@@ -0,0 +1,7 @@
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const tailwindConfig = require("@clary-so/web-reporter-ui/tailwind.config");
+
+module.exports = {
+  content: [...tailwindConfig.content, "./src/webapp/**/*.tsx"],
+  presets: [tailwindConfig],
+};

package/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "extends": "../../../tsconfig.module.json",
+  "compilerOptions": {
+    "rootDir": "src",
+    "outDir": "./dist"
+  },
+  "include": ["src"]
+}