Fix MOC-80 add prefix to tailwindcss classes (#93)

* add prefix to tailwind config * improve handling of empty recordings list * lint * deal with a flakey type * properly call tailwindcss * Apply prefix codemod from https://github.com/Mocksi/tailwind-prefix-codemod * lint * try to fix gha builds * last try * fix manifest.json * keep build broken for now * stop archiving unusable builds
Mocksi · Jul 12, 2024 · e32bfcd · e32bfcd
1 parent 097e30b
commit e32bfcd
Show file tree

Hide file tree

Showing 30 changed files with 3,413 additions and 3,571 deletions.
diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
@@ -39,10 +39,4 @@ jobs:
       - name: Install dependencies
         run: pnpm install --no-frozen-lockfile
       - name: Build artifacts
-        run: pnpm build
-      - name: Archive artifacts
-        uses: actions/upload-artifact@v4
-        with:
-          name: mocksi-lite dist
-          path: |
-            apps/mocksi-lite/dist
+        run: pnpm build
diff --git a/.github/workflows/vitest.yml b/.github/workflows/vitest.yml
@@ -12,7 +12,7 @@ permissions:
   contents: read
 
 jobs:
-  build_extension:
+  vitest_run:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout Code
@@ -41,4 +41,6 @@ jobs:
       - name: Run harlight tests
         run: pnpm --prefix packages/harlight exec vitest run
       - name: Run dodom tests
-        run: pnpm --prefix packages/dodom exec vitest run
+        run: pnpm --prefix packages/dodom exec vitest run
+      - name: Run reactor tests
+        run: pnpm --prefix packages/reactor exec vitest run
diff --git a/apps/mocksi-lite/common/Button.tsx b/apps/mocksi-lite/common/Button.tsx
@@ -16,13 +16,13 @@ interface ButtonProps {
 const getButtonStyles = (variant: Variant) => {
 	switch (variant) {
 		case Variant.primary:
-			return "bg-[#E8F3EC] border-[#E8F3EC] px-6";
+			return "mw-bg-[#E8F3EC] border-[#E8F3EC] mw-px-6";
 		case Variant.icon:
-			return "bg-[#E8F3EC] border-[#E8F3EC] p-3 !max-h-[42px] !h-[42px]";
+			return "mw-bg-[#E8F3EC] border-[#E8F3EC] mw-p-3 !max-h-[42px] !h-[42px]";
 		case Variant.secondary:
-			return "border-[#009875] px-6";
+			return "border-[#009875] mw-px-6";
 		default:
-			return "bg-[#E8F3EC] border-[#E8F3EC] px-6";
+			return "mw-bg-[#E8F3EC] border-[#E8F3EC] mw-px-6";
 	}
 };
 const Button = ({
@@ -36,7 +36,7 @@ const Button = ({
 	return (
 		<div
 			className={`border text-[#009875] w-fit !min-h-[42px] rounded-full flex items-center justify-center ${
-				disabled ? "cursor-not-allowed" : "cursor-pointer"
+				disabled ? "mw-cursor-not-allowed" : "mw-cursor-pointer"
 			} ${styles} ${className ?? ""}`}
 			onClick={!disabled ? onClick : undefined}
 			onKeyUp={(event) => {

diff --git a/apps/mocksi-lite/common/Divider.tsx b/apps/mocksi-lite/common/Divider.tsx
@@ -1,3 +1,3 @@
-const Divider = () => <div className={"h-px bg-[#E5E2E1] w-full"} />;
+const Divider = () => <div className={"mw-h-px mw-bg-[#E5E2E1] mw-w-full"} />;
 
 export default Divider;
diff --git a/apps/mocksi-lite/common/Popup/Footer.tsx b/apps/mocksi-lite/common/Popup/Footer.tsx
@@ -9,34 +9,39 @@ interface FooterProps {
 }
 
 const Footer = ({ email, onChat, onLogout }: FooterProps) => {
+	const buttonClassName =
+		"mw-btn mw-btn-square mw-text-[13px] mw-flex mw-items-center mw-px-2";
+	const iconClassName = "mw-mr-1 mw-w-4 mw-h-4 mw-flex-shrink-0"; // Adjust the icon size and margin as needed
+
 	return (
-		<div className={"h-[36px] flex items-center justify-end pr-3"}>
-			<div className={"text-[13px] text-[#5E5E5E] mr-2"}>{email}</div>
-			<Button
-				className="btn btn-square"
-				variant={Variant.secondary}
-				onClick={onChat}
-			>
-				<svg
-					xmlns="http://www.w3.org/2000/svg"
-					fill="none"
-					viewBox="0 0 24 24"
-					strokeWidth="1.5"
-					stroke="currentColor"
-					className="size-6"
+		<div className="mw-h-[36px] mw-flex mw-items-center mw-justify-end mw-pr-3">
+			<div className="mw-text-[13px] mw-text-[#5E5E5E] mw-mr-2">{email}</div>
+			<div className="mw-text-[13px] mw-text-[#5E5E5E] mw-mr-2 mw-flex mw-items-center">
+				<Button
+					className={buttonClassName}
+					variant={Variant.secondary}
+					onClick={onChat}
 				>
-					<title>Beacon</title>
-					<path
-						strokeLinecap="round"
-						strokeLinejoin="round"
-						d="M9.75 3.104v5.714a2.25 2.25 0 0 1-.659 1.591L5 14.5M9.75 3.104c-.251.023-.501.05-.75.082m.75-.082a24.301 24.301 0 0 1 4.5 0m0 0v5.714c0 .597.237 1.17.659 1.591L19.8 15.3M14.25 3.104c.251.023.501.05.75.082M19.8 15.3l-1.57.393A9.065 9.065 0 0 1 12 15a9.065 9.065 0 0 0-6.23-.693L5 14.5m14.8.8 1.402 1.402c1.232 1.232.65 3.318-1.067 3.611A48.309 48.309 0 0 1 12 21c-2.773 0-5.491-.235-8.135-.687-1.718-.293-2.3-2.379-1.067-3.61L5 14.5"
-					/>
-				</svg>
-
-				<p>Open Mocksi AI</p>
-			</Button>
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						fill="none"
+						viewBox="0 0 24 24"
+						strokeWidth="1.5"
+						stroke="currentColor"
+						className={iconClassName}
+					>
+						<title>Beaker</title>
+						<path
+							strokeLinecap="round"
+							strokeLinejoin="round"
+							d="M9.75 3.104v5.714a2.25 2.25 0 0 1-.659 1.591L5 14.5M9.75 3.104c-.251.023-.501.05-.75.082m.75-.082a24.301 24.301 0 0 1 4.5 0m0 0v5.714c0 .597.237 1.17.659 1.591L19.8 15.3M14.25 3.104c.251.023.501.05.75.082M19.8 15.3l-1.57.393A9.065 9.065 0 0 1 12 15a9.065 9.065 0 0 0-6.23-.693L5 14.5m14.8.8 1.402 1.402c1.232 1.232.65 3.318-1.067 3.611A48.309 48.309 0 0 1 12 21c-2.773 0-5.491-.235-8.135-.687-1.718-.293-2.3-2.379-1.067-3.61L5 14.5"
+						/>
+					</svg>
+					<span>Open Mocksi AI</span>
+				</Button>
+			</div>
 			<div
-				className={"text-[13px] text-[#006C52] underline cursor-pointer"}
+				className="mw-text-[13px] mw-text-[#006C52] mw-underline mw-cursor-pointer"
 				onClick={() => {
 					onLogout();
 				}}

diff --git a/apps/mocksi-lite/common/Popup/Header.tsx b/apps/mocksi-lite/common/Popup/Header.tsx
@@ -17,43 +17,52 @@ interface HeaderProps {
 const Header = ({ subtitle, close, onSettings, onGoBack }: HeaderProps) => {
 	return (
 		<div>
-			<div className={"h-[36px] flex items-center flex-row px-2"}>
+			<div
+				className={"mw-h-[36px] mw-flex mw-items-center mw-flex-row mw-px-2"}
+			>
 				<div
-					className="cursor-pointer"
+					className="mw-cursor-pointer"
 					onClick={close}
 					onKeyUp={(event) => {
 						event.key === "Escape" && close();
 					}}
 				>
 					<img src={closeIcon} alt="closeIcon" />
 				</div>
-				<div className={"w-full mr-[20px] flex justify-center drag-handle"}>
+				<div
+					className={
+						"mw-w-full mw-mr-[20px] mw-flex mw-justify-center drag-handle"
+					}
+				>
 					<img src={menuIcon} draggable="false" alt="menuIcon" />
 				</div>
 			</div>
-
 			<Divider />
-			<div className={"flex justify-center items-center mt-5"}>
+			<div className={"mw-flex mw-justify-center mw-items-center mw-mt-5"}>
 				{onGoBack && (
 					<div
-						className={"absolute left-9 cursor-pointer"}
+						className={"mw-absolute mw-left-9 mw-cursor-pointer"}
 						onClick={onGoBack}
 						onKeyUp={(event) => {
 							event.key === "Enter" && onGoBack();
 						}}
 					>
-						<img src={backIcon} alt={"backIcon"} className={"w-[16px]"} />
+						<img src={backIcon} alt={"backIcon"} className={"mw-w-[16px]"} />
 					</div>
 				)}
-				<div className={"flex flex-col justify-center items-center gap-[5px]"}>
+				<div
+					className={
+						"mw-flex mw-flex-col mw-justify-center mw-items-center mw-gap-[5px]"
+					}
+				>
 					<div>
 						<img src={labeledIcon} alt={"labeledIcon"} />
 					</div>
 					{subtitle && <TextField variant="title">{subtitle}</TextField>}
 				</div>
 				{onSettings && (
 					<div
-						className={"absolute right-9 cursor-pointer"}
+						className={"mw-absolute mw-right-9 mw-cursor-pointer"}
 						onClick={onSettings}
 						onKeyUp={(event) => {
 							event.key === "Enter" && onSettings();

diff --git a/apps/mocksi-lite/common/Popup/index.tsx b/apps/mocksi-lite/common/Popup/index.tsx
@@ -62,11 +62,7 @@ const Popup = ({
 
 	return (
 		<Draggable handle=".drag-handle" position={position} onStop={onDragStop}>
-			<div
-				className={
-					"w-[500px] h-[596px] shadow-lg rounded-lg m-4 bg-white flex flex-col justify-between"
-				}
-			>
+			<div className="mw-w-[500px] mw-h-[596px] shadow-lg mw-rounded-lg mw-m-4 mw-bg-white mw-flex mw-flex-col mw-justify-between mw-border-solid mw-border-black">
 				<Header
 					subtitle={headerSubtitle}
 					close={onClose}

diff --git a/apps/mocksi-lite/common/TextField.tsx b/apps/mocksi-lite/common/TextField.tsx
@@ -5,7 +5,7 @@ interface TextProps {
 }
 
 const TextField = ({ children, variant = "regular", className }: TextProps) => {
-	const title = variant === "title" ? "font-medium" : "font-[380]";
+	const title = variant === "title" ? "mw-font-medium" : "mw-font-[380]";
 	return (
 		<div
 			className={`text-[15px] leading-[18px] text-black ${title} ${

diff --git a/apps/mocksi-lite/content/AppStateContext.tsx b/apps/mocksi-lite/content/AppStateContext.tsx
@@ -117,6 +117,13 @@ export const AppStateProvider: React.FC<{ children: React.ReactNode }> = ({
 		chrome.storage.local.get(
 			[MOCKSI_RECORDING_STATE, "recordings"],
 			(result) => {
+				if (!result || !result.recordings || result.recordings.length < 1) {
+					dispatch({
+						event: AppEvent.SET_INITIAL_STATE,
+						payload: AppState.READYTORECORD,
+					});
+					return;
+				}
 				const recordings = JSON.parse(result.recordings);
 
 				if (

diff --git a/apps/mocksi-lite/content/ContentApp.tsx b/apps/mocksi-lite/content/ContentApp.tsx
@@ -17,6 +17,9 @@ import EditToast from "./Toast/EditToast";
 import PlayToast from "./Toast/PlayToast";
 import RecordingToast from "./Toast/RecordingToast";
 
+import("./content.css");
+import("./base.css");
+
 interface ContentProps {
 	isOpen?: boolean;
 	email?: string;

diff --git a/apps/mocksi-lite/content/CreatePopup/Form.tsx b/apps/mocksi-lite/content/CreatePopup/Form.tsx
@@ -20,31 +20,31 @@ const Form = ({ onCancel, onSubmit }: FormProps) => {
 	};
 
 	return (
-		<div className={"flex-1 mt-3"}>
+		<div className={"mw-flex-1 mw-mt-3"}>
 			<Divider />
-			<div className={"flex h-full flex-col justify-between"}>
-				<div className={"p-4"}>
-					<div className={"mb-8"}>
-						<TextField variant={"title"} className={"mb-1"}>
+			<div className={"mw-flex mw-h-full mw-flex-col mw-justify-between"}>
+				<div className={"mw-p-4"}>
+					<div className={"mw-mb-8"}>
+						<TextField variant={"title"} className={"mw-mb-1"}>
 							Demo Name
 						</TextField>
 						<input
 							value={name}
 							onChange={(e) => setName(e.target.value)}
-							className={"border rounded-lg h-11 px-3 w-full"}
+							className={"mw-border mw-rounded-lg mw-h-11 mw-px-3 mw-w-full"}
 						/>
 					</div>
 					<div>
-						<TextField variant={"title"} className={"mb-1"}>
+						<TextField variant={"title"} className={"mw-mb-1"}>
 							Customer
 						</TextField>
 						<input
 							value={customer}
 							onChange={(e) => setCustomer(e.target.value)}
-							className={"border rounded-lg h-11 px-3 w-full"}
+							className={"mw-border mw-rounded-lg mw-h-11 mw-px-3 mw-w-full"}
 						/>
 					</div>
-					<div className={"mt-[42px] flex justify-end gap-4"}>
+					<div className={"mw-mt-[42px] mw-flex mw-justify-end mw-gap-4"}>
 						<Button onClick={onCancel} variant={Variant.secondary}>
 							Cancel
 						</Button>
@@ -53,7 +53,7 @@ const Form = ({ onCancel, onSubmit }: FormProps) => {
 						</Button>
 					</div>
 				</div>
-				<div className={"flex self-end p-2"}>
+				<div className={"mw-flex self-end mw-p-2"}>
 					<img src={expandIcon} alt={"expandIcon"} />
 				</div>
 			</div>

diff --git a/apps/mocksi-lite/content/EditMode/decorator.ts b/apps/mocksi-lite/content/EditMode/decorator.ts
@@ -12,7 +12,7 @@ export function decorate(
 	} = { onSubmit: undefined, onCancel: undefined },
 ) {
 	const newSpan = document.createElement("span");
-	newSpan.style.position = "relative";
+	newSpan.style.position = "mw-relative";
 	newSpan.id = "mocksiSelectedText";
 	newSpan.appendChild(document.createTextNode(text));
 	const textArea = injectTextArea(
@@ -37,7 +37,7 @@ function injectTextArea(
 		width: width ? "120%" : "150%",
 		height: "100%",
 		border: "1px solid red",
-		position: "absolute",
+		position: "mw-absolute",
 		top: "0",
 		left: "0",
 		zIndex: "999",

diff --git a/apps/mocksi-lite/content/EditMode/highlighter.ts b/apps/mocksi-lite/content/EditMode/highlighter.ts
@@ -90,7 +90,7 @@ const highlight = ({
 }) => {
 	const highlightDiv = document.createElement("div");
 	highlightDiv.className = MOCKSI_HIGHLIGHTER_ID;
-	highlightDiv.style.position = "absolute";
+	highlightDiv.style.position = "mw-absolute";
 	highlightDiv.style.top = `${window.scrollY + y + -2}px`;
 	highlightDiv.style.left = `${window.scrollX + x + -2}px`;
 	// 4px more because we're removing 2px each side because of the border

diff --git a/apps/mocksi-lite/content/ListPopup/DemoItem.tsx b/apps/mocksi-lite/content/ListPopup/DemoItem.tsx
@@ -42,19 +42,19 @@ const DemoItem = ({
 	};
 
 	return (
-		<div className={"flex justify-between px-6"}>
-			<div className={"w-[200px]"}>
+		<div className={"mw-flex mw-justify-between mw-px-6"}>
+			<div className={"mw-w-[200px]"}>
 				<TextField variant={"title"} className={"truncate"}>
 					{demo_name}
 				</TextField>
 				<TextField className={"truncate"}>{customer_name}</TextField>
 				<a href={url} target={"_blank"} rel={"noreferrer"}>
-					<TextField className={"text-xs underline truncate"}>
+					<TextField className={"mw-text-xs mw-underline truncate"}>
 						{domain}
 					</TextField>
 				</a>
 			</div>
-			<div className={"flex gap-3"}>
+			<div className={"mw-flex mw-gap-3"}>
 				<Button
 					variant={Variant.icon}
 					onClick={handleEdit}

diff --git a/apps/mocksi-lite/content/ListPopup/index.tsx b/apps/mocksi-lite/content/ListPopup/index.tsx
@@ -4,8 +4,7 @@ import Button from "../../common/Button";
 import Divider from "../../common/Divider";
 import Popup from "../../common/Popup";
 import { getRecordingsStorage } from "../../utils";
-import { AppEvent, AppState, AppStateContext } from "../AppStateContext";
-import Form from "../CreatePopup/Form";
+import { AppEvent, AppStateContext } from "../AppStateContext";
 import DemoItem from "./DemoItem";
 
 interface ListPopupProps {
@@ -56,19 +55,23 @@ const ListPopup = ({ email, onChat, onClose, onLogout }: ListPopupProps) => {
 			onChat={onChat}
 			onClose={onClose}
 		>
-			<div className={"flex flex-1 flex-col h-[280px] overflow-x-scroll"}>
+			<div
+				className={
+					"mw-flex mw-flex-1 mw-flex-col mw-h-[280px] mw-overflow-x-scroll"
+				}
+			>
 				{recordings.length ? (
 					<div
 						className={
-							"flex-1 flex flex-col py-8 overflow-y-scroll no-scrollbar"
+							"mw-flex-1 mw-flex mw-flex-col mw-py-8 mw-overflow-y-scroll"
 						}
 					>
 						{recordings
 							.filter((record) => record.url)
 							.map((record) => (
 								<Fragment key={`demo-item-${record.uuid}`}>
 									<DemoItem {...record} />
-									<div className={"px-3 w-full my-6"}>
+									<div className={"mw-px-3 mw-w-full mw-my-6"}>
 										<Divider />
 									</div>
 								</Fragment>
@@ -78,7 +81,7 @@ const ListPopup = ({ email, onChat, onClose, onLogout }: ListPopupProps) => {
 				<Button
 					onClick={handleCreateDemoClicked}
 					className={
-						!recordings.length ? "mt-3 self-center" : "my-3 self-center"
+						!recordings.length ? "mw-mt-3 self-center" : "mw-my-3 self-center"
 					}
 				>
 					Create New Demo