From fa621e2a8c9ab04f2585c5c0c717eee391a993da Mon Sep 17 00:00:00 2001 From: karishmas6 Date: Sun, 16 Jun 2024 14:01:01 +0530 Subject: [PATCH 01/13] fix: del adjusted height & width --- src/components/atoms/Highlighter.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/components/atoms/Highlighter.tsx b/src/components/atoms/Highlighter.tsx index b72cac06..3199b083 100644 --- a/src/components/atoms/Highlighter.tsx +++ b/src/components/atoms/Highlighter.tsx @@ -36,8 +36,6 @@ export const Highlighter = ({ unmodifiedRect, displayedSelector = '', width, hei height: unmodifiedRect.height, }; - const adjustedWidth = Math.min(rect.width, width - rect.left); // Adjust width if it extends beyond canvas boundary - const adjustedHeight = Math.min(rect.height, height - rect.top); // Adjust height if it extends beyond canvas boundary console.log('unmodifiedRect:', unmodifiedRect) console.log('rectangle:', rect) From 590b84e32205c791caab6c54d93b79b8df34fc49 Mon Sep 17 00:00:00 2001 From: karishmas6 Date: Fri, 21 Jun 2024 22:16:05 +0530 Subject: [PATCH 02/13] feat: viewport constants --- src/constants/const.ts | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 src/constants/const.ts diff --git a/src/constants/const.ts b/src/constants/const.ts new file mode 100644 index 00000000..8aec049e --- /dev/null +++ b/src/constants/const.ts @@ -0,0 +1,5 @@ +export const VIEWPORT_W = 1280; +export const VIEWPORT_H = 720; + +export const ONE_PERCENT_OF_VIEWPORT_W = VIEWPORT_W / 100; +export const ONE_PERCENT_OF_VIEWPORT_H = VIEWPORT_H / 100; From dbb5f858bc32a1ebc3ef1f3c86e1e96ca811ecac Mon Sep 17 00:00:00 2001 From: karishmas6 Date: Fri, 21 Jun 2024 22:17:46 +0530 Subject: [PATCH 03/13] feat: socket context --- src/context/socket.tsx | 51 ++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 51 insertions(+) create mode 100644 src/context/socket.tsx diff --git a/src/context/socket.tsx b/src/context/socket.tsx new file mode 100644 index 00000000..c930019d --- /dev/null +++ b/src/context/socket.tsx @@ -0,0 +1,51 @@ +import React, { createContext, useCallback, useContext, useMemo, useState } from 'react'; +import { io, Socket } from 'socket.io-client'; + +const SERVER_ENDPOINT = 'http://localhost:8080'; + +interface SocketState { + socket: Socket | null; + id: string; + setId: (id: string) => void; +}; + +class SocketStore implements Partial{ + socket = null; + id = ''; +}; + +const socketStore = new SocketStore(); +const socketStoreContext = createContext(socketStore as SocketState); + +export const useSocketStore = () => useContext(socketStoreContext); + +export const SocketProvider = ({ children }: { children: JSX.Element }) => { + const [socket, setSocket] = useState(socketStore.socket); + const [id, setActiveId] = useState(socketStore.id); + + const setId = useCallback((id: string) => { + const socket = + io(`${SERVER_ENDPOINT}/${id}`, { + transports: ["websocket"], + rejectUnauthorized: false + }); + + socket.on('connect', () => console.log('connected to socket')); + socket.on("connect_error", (err) => console.log(`connect_error due to ${err.message}`)); + + setSocket(socket); + setActiveId(id); + }, [setSocket]); + + return ( + + {children} + + ); +}; From 4227366f2fa07d2d9fd93e068fd0f9b9bec13786 Mon Sep 17 00:00:00 2001 From: karishmas6 Date: Fri, 21 Jun 2024 22:19:16 +0530 Subject: [PATCH 04/13] chore: docs --- src/context/socket.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/context/socket.tsx b/src/context/socket.tsx index c930019d..93432014 100644 --- a/src/context/socket.tsx +++ b/src/context/socket.tsx @@ -24,6 +24,7 @@ export const SocketProvider = ({ children }: { children: JSX.Element }) => { const [id, setActiveId] = useState(socketStore.id); const setId = useCallback((id: string) => { + // the socket client connection is recomputed whenever id changes -> the new browser has been initialized const socket = io(`${SERVER_ENDPOINT}/${id}`, { transports: ["websocket"], From 7865609caa1bd487e2a1fcee1b5bcf63585980c2 Mon Sep 17 00:00:00 2001 From: karishmas6 Date: Fri, 21 Jun 2024 22:20:08 +0530 Subject: [PATCH 05/13] feat: global info context --- src/context/globalInfo.tsx | 83 ++++++++++++++++++++++++++++++++++++++ 1 file changed, 83 insertions(+) create mode 100644 src/context/globalInfo.tsx diff --git a/src/context/globalInfo.tsx b/src/context/globalInfo.tsx new file mode 100644 index 00000000..766996ce --- /dev/null +++ b/src/context/globalInfo.tsx @@ -0,0 +1,83 @@ +import React, { createContext, useContext, useState } from "react"; +import { AlertSnackbarProps } from "../components/atoms/AlertSnackbar"; + + +interface GlobalInfo { + browserId: string | null; + setBrowserId: (newId: string | null) => void; + lastAction: string; + setLastAction: (action: string ) => void; + notification: AlertSnackbarProps; + notify: (severity: 'error' | 'warning' | 'info' | 'success', message: string) => void; + closeNotify: () => void; + recordings: string[]; + setRecordings: (recordings: string[]) => void; + rerenderRuns: boolean; + setRerenderRuns: (rerenderRuns: boolean) => void; + recordingLength: number; + setRecordingLength: (recordingLength: number) => void; +}; + +class GlobalInfoStore implements Partial{ + browserId = null; + lastAction = ''; + recordingLength = 0; + notification: AlertSnackbarProps = { + severity: 'info', + message: '', + isOpen: false, + }; + recordings: string[] = []; + rerenderRuns = false; +}; + +const globalInfoStore = new GlobalInfoStore(); +const globalInfoContext = createContext(globalInfoStore as GlobalInfo); + +export const useGlobalInfoStore = () => useContext(globalInfoContext); + +export const GlobalInfoProvider = ({ children }: { children: JSX.Element }) => { + const [browserId, setBrowserId] = useState(globalInfoStore.browserId); + const [lastAction, setLastAction] = useState(globalInfoStore.lastAction); + const [notification, setNotification] = useState(globalInfoStore.notification); + const [recordings, setRecordings] = useState(globalInfoStore.recordings); + const [rerenderRuns, setRerenderRuns] = useState(globalInfoStore.rerenderRuns); + const [recordingLength, setRecordingLength] = useState(globalInfoStore.recordingLength); + + const notify = (severity: 'error' | 'warning' | 'info' | 'success', message: string) => { + setNotification({severity, message, isOpen: true}); + } + + const closeNotify = () => { + setNotification( globalInfoStore.notification); + } + + const setBrowserIdWithValidation = (browserId: string | null) => { + setBrowserId(browserId); + if (!browserId) { + setRecordingLength(0); + } + } + + return ( + + {children} + + ); +}; From 2d51a2a3ebd40b2f6077de1b5e4561a01cd41cf7 Mon Sep 17 00:00:00 2001 From: karishmas6 Date: Fri, 21 Jun 2024 22:20:26 +0530 Subject: [PATCH 06/13] chore: lint --- src/context/globalInfo.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/context/globalInfo.tsx b/src/context/globalInfo.tsx index 766996ce..e7eb2ed2 100644 --- a/src/context/globalInfo.tsx +++ b/src/context/globalInfo.tsx @@ -6,7 +6,7 @@ interface GlobalInfo { browserId: string | null; setBrowserId: (newId: string | null) => void; lastAction: string; - setLastAction: (action: string ) => void; + setLastAction: (action: string) => void; notification: AlertSnackbarProps; notify: (severity: 'error' | 'warning' | 'info' | 'success', message: string) => void; closeNotify: () => void; @@ -18,7 +18,7 @@ interface GlobalInfo { setRecordingLength: (recordingLength: number) => void; }; -class GlobalInfoStore implements Partial{ +class GlobalInfoStore implements Partial { browserId = null; lastAction = ''; recordingLength = 0; @@ -45,11 +45,11 @@ export const GlobalInfoProvider = ({ children }: { children: JSX.Element }) => { const [recordingLength, setRecordingLength] = useState(globalInfoStore.recordingLength); const notify = (severity: 'error' | 'warning' | 'info' | 'success', message: string) => { - setNotification({severity, message, isOpen: true}); + setNotification({ severity, message, isOpen: true }); } const closeNotify = () => { - setNotification( globalInfoStore.notification); + setNotification(globalInfoStore.notification); } const setBrowserIdWithValidation = (browserId: string | null) => { From cb41be81158b0a12c2282925d740e90681a41bdd Mon Sep 17 00:00:00 2001 From: karishmas6 Date: Fri, 21 Jun 2024 22:20:38 +0530 Subject: [PATCH 07/13] chore: lint --- src/context/socket.tsx | 24 ++++++++++++------------ 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/src/context/socket.tsx b/src/context/socket.tsx index 93432014..678f5520 100644 --- a/src/context/socket.tsx +++ b/src/context/socket.tsx @@ -9,7 +9,7 @@ interface SocketState { setId: (id: string) => void; }; -class SocketStore implements Partial{ +class SocketStore implements Partial { socket = null; id = ''; }; @@ -38,15 +38,15 @@ export const SocketProvider = ({ children }: { children: JSX.Element }) => { setActiveId(id); }, [setSocket]); - return ( - - {children} - - ); + return ( + + {children} + + ); }; From 947747a5aa64e03214ad704816c18d53fd761def Mon Sep 17 00:00:00 2001 From: karishmas6 Date: Fri, 21 Jun 2024 22:22:13 +0530 Subject: [PATCH 08/13] feat: shared constants --- src/shared/constants.ts | 3 +++ 1 file changed, 3 insertions(+) create mode 100644 src/shared/constants.ts diff --git a/src/shared/constants.ts b/src/shared/constants.ts new file mode 100644 index 00000000..d7ce0bd0 --- /dev/null +++ b/src/shared/constants.ts @@ -0,0 +1,3 @@ +import { WorkflowFile } from "@wbr-project/wbr-interpret"; + +export const emptyWorkflow: WorkflowFile = { workflow: [] }; From 0322d85e5aacb4f115a9cb0f050d6bd319c37715 Mon Sep 17 00:00:00 2001 From: karishmas6 Date: Fri, 21 Jun 2024 22:23:03 +0530 Subject: [PATCH 09/13] feat: global workflow action types --- src/shared/types.ts | 26 ++++++++++++++++++++++++++ 1 file changed, 26 insertions(+) create mode 100644 src/shared/types.ts diff --git a/src/shared/types.ts b/src/shared/types.ts new file mode 100644 index 00000000..72e86a0e --- /dev/null +++ b/src/shared/types.ts @@ -0,0 +1,26 @@ +import { WorkflowFile } from "@wbr-project/wbr-interpret"; +import { Locator } from "playwright"; + +export type Workflow = WorkflowFile["workflow"]; + +export interface ScreenshotSettings { + animations?: "disabled" | "allow"; + caret?: "hide" | "initial"; + clip?: { + x: number; + y: number; + width: number; + height: number; + }; + fullPage?: boolean; + mask?: Locator[]; + omitBackground?: boolean; + // is this still needed? - @wbr-project/wbr-interpret outputs to a binary output + path?: string; + quality?: number; + scale?: "css" | "device"; + timeout?: number; + type?: "jpeg" | "png"; +}; + +export declare type CustomActions = 'scrape' | 'scrapeSchema' | 'scroll' | 'screenshot' | 'script' | 'enqueueLinks' | 'flag'; From 544fc5a8aaa4501e3519086aae49c6b33545d0cc Mon Sep 17 00:00:00 2001 From: karishmas6 Date: Fri, 21 Jun 2024 22:23:35 +0530 Subject: [PATCH 10/13] feat: root --- src/index.tsx | 14 ++++++++++++++ 1 file changed, 14 insertions(+) create mode 100644 src/index.tsx diff --git a/src/index.tsx b/src/index.tsx new file mode 100644 index 00000000..b7688442 --- /dev/null +++ b/src/index.tsx @@ -0,0 +1,14 @@ +import React from 'react'; +import ReactDOM from 'react-dom/client'; +import './index.css'; +import App from './App'; + +const root = ReactDOM.createRoot( + document.getElementById('root') as HTMLElement +); +root.render( + + + +); + From f9934e3965e653e4f174422a44ca5134f62806c5 Mon Sep 17 00:00:00 2001 From: karishmas6 Date: Fri, 21 Jun 2024 22:24:02 +0530 Subject: [PATCH 11/13] feat: global styles --- src/index.css | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) create mode 100644 src/index.css diff --git a/src/index.css b/src/index.css new file mode 100644 index 00000000..21808ea5 --- /dev/null +++ b/src/index.css @@ -0,0 +1,17 @@ +body { + margin: 0; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', + 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', + sans-serif; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +code { + font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', + monospace; +} + +html { + overflow-y:scroll; +} From ff26ef1b1bf4a62c6029d98953ff1be92eb2bcd4 Mon Sep 17 00:00:00 2001 From: karishmas6 Date: Fri, 21 Jun 2024 22:24:27 +0530 Subject: [PATCH 12/13] feat: root App --- src/App.tsx | 15 +++++++++++++++ 1 file changed, 15 insertions(+) create mode 100644 src/App.tsx diff --git a/src/App.tsx b/src/App.tsx new file mode 100644 index 00000000..3e80e017 --- /dev/null +++ b/src/App.tsx @@ -0,0 +1,15 @@ +import React from 'react'; + +import { GlobalInfoProvider } from "./context/globalInfo"; +import { PageWrapper } from "./pages/PageWrappper"; + +function App () { + + return ( + + + + ); +} + +export default App; From 6c199c80a13a49f7f9e7c0334025809677c8a4f8 Mon Sep 17 00:00:00 2001 From: karishmas6 Date: Fri, 21 Jun 2024 22:24:40 +0530 Subject: [PATCH 13/13] chore: lint --- src/App.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index 3e80e017..7f0715a9 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -3,11 +3,11 @@ import React from 'react'; import { GlobalInfoProvider } from "./context/globalInfo"; import { PageWrapper } from "./pages/PageWrappper"; -function App () { +function App() { return ( - + ); }