fix: fix review issues regarding css classes naming, comments, consta…

…nts and AssertViewResult component
gemini-testing · May 23, 2024 · 458c6f0 · 458c6f0
1 parent 2570bfe
commit 458c6f0
Show file tree

Hide file tree

Showing 22 changed files with 174 additions and 160 deletions.
diff --git a/src/components/AnimatedPlanet/index.tsx b/src/components/AnimatedPlanet/index.tsx
@@ -56,7 +56,10 @@ export function AnimatedPlanet(props: AnimatedPlanetProps) {
 
     return (
         <div
-            className={clsx("flex aspect-square w-full items-center", props.className)}
+            className={clsx(
+                "animated-planet flex aspect-square w-full items-center",
+                props.className,
+            )}
             ref={boundingBoxRef}
         >
             <div className="relative origin-left" style={{ transform: `scale(${scale})` }}>

diff --git a/src/components/Collapsible/index.tsx b/src/components/Collapsible/index.tsx
@@ -8,8 +8,8 @@ interface CollapsibleProps {
 
 export function Collapsible(props: CollapsibleProps) {
     return (
-        <div>
-            <div>{props.title}</div>
+        <div className="collapsible">
+            {props.title && <div className="collapsible__title">{props.title}</div>}
             {!props.isCollapsed && <div className="pl-3">{props.children}</div>}
         </div>
     );

diff --git a/src/components/FeaturesDemo/AnimatedCursor.tsx b/src/components/FeaturesDemo/AnimatedCursor.tsx
@@ -28,7 +28,7 @@ export const AnimatedCursor = forwardRef(function AnimatedCursorInternal(
         async click(): Promise<void> {
             await Promise.all(
                 api.start({
-                    config: { duration: 300 /*easing: easings.easeInOutQuint*/ },
+                    config: { duration: 300 },
                     to: [
                         { scaleX: 1.2, scaleY: 1.2 },
                         { scaleX: 1, scaleY: 1 },
@@ -39,10 +39,7 @@ export const AnimatedCursor = forwardRef(function AnimatedCursorInternal(
         async setPosition(x, y): Promise<void> {
             await Promise.all(
                 api.start({
-                    config: {
-                        /*duration: 500,*/
-                        /*easing: easings.easeInOutQuint*/
-                    },
+                    config: {},
                     to: [{ top: y, left: x }],
                 }),
             );
@@ -66,7 +63,7 @@ export const AnimatedCursor = forwardRef(function AnimatedCursorInternal(
     }));
 
     return (
-        <div>
+        <div className="animated-cursor">
             {props.children}
             <animated.div
                 className={clsx(

diff --git a/src/components/FeaturesDemo/AnimatedHeading.tsx b/src/components/FeaturesDemo/AnimatedHeading.tsx
@@ -57,7 +57,10 @@ interface AnimatedHeadingProps {
 
 export function AnimatedHeading({ heading, ghostText, className }: AnimatedHeadingProps) {
     return (
-        <TextTransition className={className} ghostElement={<Heading>{ghostText}</Heading>}>
+        <TextTransition
+            className={clsx("animated-heading", className)}
+            ghostElement={<Heading>{ghostText}</Heading>}
+        >
             <Heading>{heading}</Heading>
         </TextTransition>
     );

diff --git a/src/components/FeaturesDemo/CodeEditor/index.tsx b/src/components/FeaturesDemo/CodeEditor/index.tsx
@@ -21,7 +21,12 @@ export interface TabProps {
 
 function Tab(props: TabProps) {
     return (
-        <div className={clsx(styles["tab-item"], "relative ml-5 flex items-center text-nowrap")}>
+        <div
+            className={clsx(
+                styles["tab-item"],
+                "code-editor__tab relative ml-5 flex items-center text-nowrap",
+            )}
+        >
             <div className={clsx({ "text-indigo-200": props.isActive })}>{props.title}</div>
             <div className={clsx("ml-5 size-3", { "fill-indigo-200": props.isActive })}>
                 {props.icon ?? <CloseIcon />}
@@ -50,22 +55,23 @@ export interface FsTreeItem {
 
 function CollapsibleFsTreeItem(props: FsTreeItem) {
     const getItemIcon = (type?: FsTreeItemType) => {
-        if (type === FsTreeItemType.Dir) {
-            return <FolderIcon className="size-3" />;
-        } else if (type === FsTreeItemType.Ts) {
-            return <TypescriptIcon className="size-3" />;
-        } else if (type === FsTreeItemType.Sass) {
-            return <SassIcon className="size-3" />;
-        } else if (type === FsTreeItemType.Testplane) {
-            return <TestplaneIcon className="size-3" />;
-        } else {
-            return <TextIcon className="size-3" />;
+        switch (type) {
+            case FsTreeItemType.Dir:
+                return <FolderIcon className="size-3" />;
+            case FsTreeItemType.Ts:
+                return <TypescriptIcon className="size-3" />;
+            case FsTreeItemType.Sass:
+                return <SassIcon className="size-3" />;
+            case FsTreeItemType.Testplane:
+                return <TestplaneIcon className="size-3" />;
+            default:
+                return <TextIcon className="size-3" />;
         }
     };
 
     const ItemTitle = (
         <div
-            className={clsx("ml-5 flex items-center", {
+            className={clsx("code-editor__fs-tree-item ml-5 flex items-center", {
                 "fill-indigo-400 text-indigo-400": props.isModified,
             })}
         >
@@ -110,7 +116,7 @@ export interface CodeEditorProps {
 
 export function CodeEditor(props: CodeEditorProps): JSX.Element {
     return (
-        <div className={clsx(styles.wrapper, props.className)} style={props.style}>
+        <div className={clsx(styles.wrapper, props.className, "code-editor")} style={props.style}>
             <div
                 className={clsx(
                     styles.editor,

diff --git a/src/components/FeaturesDemo/WebBrowser/AppPage/ProductCard/index.tsx b/src/components/FeaturesDemo/WebBrowser/AppPage/ProductCard/index.tsx
@@ -12,7 +12,7 @@ interface ProductCardProps {
 
 export function ProductCard(props: ProductCardProps) {
     return (
-        <div className={clsx(props.className, "break-inside-avoid")}>
+        <div className={clsx(props.className, "product-card break-inside-avoid")}>
             <div className="relative w-full overflow-hidden rounded-xl after:block after:pb-[80%] after:content-['']">
                 <div
                     className={clsx(

diff --git a/src/components/FeaturesDemo/WebBrowser/AppPage/index.tsx b/src/components/FeaturesDemo/WebBrowser/AppPage/index.tsx
@@ -1,9 +1,7 @@
 import { ForwardedRef, forwardRef, useImperativeHandle, useRef } from "react";
 
 import { ProductCard } from "@site/src/components/FeaturesDemo/WebBrowser/AppPage/ProductCard";
-import HeartIcon from "@site/static/icons/heart.svg";
 import CartIcon from "@site/static/icons/cart.svg";
-import ProfileIcon from "@site/static/icons/profile.svg";
 import TwitterIcon from "@site/static/icons/twitter.svg";
 import FacebookIcon from "@site/static/icons/facebook.svg";
 import InstagramIcon from "@site/static/icons/instagram.svg";
@@ -37,39 +35,37 @@ export const AppPage = forwardRef(function AppPageInternal(
     }));
 
     return (
-        <div className="w-full min-w-0 bg-white">
+        <div className="app-page w-full min-w-0 bg-white">
             <div className="sticky top-0 z-20 flex w-full flex-nowrap justify-between bg-white bg-opacity-35 p-1 align-middle backdrop-blur">
                 <div className="flex items-baseline">
-                    <span className="whitespace-nowrap pl-1 text-lg font-medium italic">
+                    <div className="whitespace-nowrap pl-1 text-lg font-medium italic">
                         Awesome store.
-                    </span>
-                    <span className="ml-3 hidden sm:block">Home</span>
-                    <span className="ml-3 hidden sm:block">Store</span>
-                    <span className="ml-3 hidden sm:block">Sale</span>
+                    </div>
+                    <div className="ml-3 hidden sm:block">Home</div>
+                    <div className="ml-3 hidden sm:block">Store</div>
+                    <div className="ml-3 hidden sm:block">Sale</div>
                 </div>
                 <div className="flex items-center">
-                    <HeartIcon className="@sm:block hidden size-4" />
-                    <ProfileIcon className="@sm:block ml-2 hidden size-4" />
                     <div className="ml-2 flex items-center whitespace-nowrap">
                         <CartIcon className="mr-2 size-4" /> Your cart
-                        <span className="ml-1 font-medium">({props.cartCount})</span>
+                        <div className="ml-1 font-medium">({props.cartCount})</div>
                     </div>
                 </div>
             </div>
             <div className="relative -mt-10 overflow-hidden bg-[#a0b9ff] px-4 pt-10">
                 <div className="flex w-full flex-col items-center justify-center py-14">
-                    <span className="text-center text-2xl font-medium italic">
+                    <div className="text-center text-2xl font-medium italic">
                         Awesome
                         <br />
                         Bookstore Web App.
-                    </span>
+                    </div>
                     <div className="mt-1 flex">
-                        <div className="z-10 rounded-full bg-black px-4 py-1 text-sm font-medium text-white">
+                        <button className="z-10 rounded-full bg-black px-4 py-1 text-sm font-medium text-white">
                             Details
-                        </div>
-                        <div className="z-10 ml-2 rounded-full bg-white px-4 py-1 text-sm font-medium">
+                        </button>
+                        <button className="z-10 ml-2 rounded-full bg-white px-4 py-1 text-sm font-medium">
                             Shop now
-                        </div>
+                        </button>
                     </div>
                 </div>
                 <div className="-z-100 absolute -bottom-14 left-1/2 -translate-x-1/2 whitespace-nowrap text-9xl font-bold italic text-white opacity-30">
@@ -115,9 +111,6 @@ export const AppPage = forwardRef(function AppPageInternal(
                     </div>
                 </div>
             </div>
-
-            {/* Element below is used to force Tailwind to include classes at build time that are applied later at runtime */}
-            <div className="hidden outline outline-2 outline-indigo-300"></div>
         </div>
     );
 });
diff --git a/src/components/FeaturesDemo/WebBrowser/ReportPage/AssertViewResult.tsx b/src/components/FeaturesDemo/WebBrowser/ReportPage/AssertViewResult.tsx
@@ -3,7 +3,9 @@ import React from "react";
 
 import { CollapsibleInfo } from "@site/src/components/FeaturesDemo/WebBrowser/ReportPage/CollapsibleInfo";
 import {
+    AssertViewDiffWithState,
     AssertViewResultWithState,
+    AssertViewSuccessWithState,
     Status,
 } from "@site/src/components/FeaturesDemo/WebBrowser/ReportPage/types";
 import { ActionButton } from "@site/src/components/FeaturesDemo/WebBrowser/ReportPage/ActionButton";
@@ -14,90 +16,107 @@ import CompareIcon from "@site/static/icons/compare.svg";
 import UndoIcon from "@site/static/icons/undo.svg";
 import "./styles.module.scss";
 
-interface AssertViewResultProps {
-    data: AssertViewResultWithState;
+interface AssertViewSuccessProps {
+    data: AssertViewSuccessWithState;
 }
 
-export function AssertViewResult({ data }: AssertViewResultProps) {
-    // TODO: animated diff bubbles
-
+function AssertViewSuccess({ data }: AssertViewSuccessProps) {
     return (
         <CollapsibleInfo
             title={data.stateName}
             isCollapsed={data.isCollapsed}
-            titleClassName={clsx({
-                "text-green-600": data.status === Status.Success,
-                // "text-black": data.status === Status.NotLaunched,
-                "text-red-600": data.status === Status.Diff,
-            })}
+            titleClassName="text-green-600"
         >
             <div className="my-1 flex flex-wrap">
-                {data.status === Status.Diff && (
-                    <>
-                        <ActionButton dataRoleId="accept-button" className="mr-1">
-                            <TickIcon className="mr-1 size-3" />
-                            Accept
-                        </ActionButton>
-                        <ActionButton className="mr-1">
-                            <SearchIcon className="size-3 sm:mr-1" />
-                            <span className="hidden sm:inline">Find same diffs</span>
-                        </ActionButton>
-                        <ActionButton className="mr-1">
-                            <FullscreenIcon className="size-3 sm:mr-1" />
-                            <span className="hidden sm:inline">Fast accept mode</span>
-                        </ActionButton>
-                        <ActionButton className="mr-1 sm:hidden">
-                            <CompareIcon className="size-3" />
-                        </ActionButton>
-                    </>
-                )}
-                {data.status === Status.Success && (
-                    <ActionButton className="my-1 mr-1">
-                        <UndoIcon className="mr-1 size-3" />
-                        Undo
-                    </ActionButton>
-                )}
+                <ActionButton className="my-1 mr-1">
+                    <UndoIcon className="mr-1 size-3" />
+                    Undo
+                </ActionButton>
             </div>
-            {data.status === Status.Diff && (
-                <div className="hidden overflow-x-scroll text-nowrap border-b border-gray-200 py-1 text-center text-sm text-gray-500 sm:block">
-                    3-up | <span className="font-medium">3-up scaled</span> | 3-up scaled to fit |
-                    Only diff | Switch | Swipe | Onion skin
+            <div className="mt-2 flex flex-col sm:flex-row 2xl:w-1/2">
+                <div className="mr-2 basis-1/3">
+                    <div className="text-sm font-medium text-gray-500">Actual</div>
+                    <img src={data.actualSrc} alt="actual" data-role-id="actual-image" />
                 </div>
-            )}
+            </div>
+        </CollapsibleInfo>
+    );
+}
+
+interface AssertViewDiffProps {
+    data: AssertViewDiffWithState;
+}
+
+function AssertViewDiff({ data }: AssertViewDiffProps) {
+    return (
+        <CollapsibleInfo
+            title={data.stateName}
+            isCollapsed={data.isCollapsed}
+            titleClassName="text-red-600"
+        >
+            <div className="my-1 flex flex-wrap">
+                <ActionButton dataRoleId="accept-button" className="mr-1">
+                    <TickIcon className="mr-1 size-3" />
+                    Accept
+                </ActionButton>
+                <ActionButton className="mr-1">
+                    <SearchIcon className="size-3 sm:mr-1" />
+                    <span className="hidden sm:inline">Find same diffs</span>
+                </ActionButton>
+                <ActionButton className="mr-1">
+                    <FullscreenIcon className="size-3 sm:mr-1" />
+                    <span className="hidden sm:inline">Fast accept mode</span>
+                </ActionButton>
+                <ActionButton className="mr-1 sm:hidden">
+                    <CompareIcon className="size-3" />
+                </ActionButton>
+            </div>
+            <div className="hidden overflow-x-scroll text-nowrap border-b border-gray-200 py-1 text-center text-sm text-gray-500 sm:block">
+                3-up | <span className="font-medium">3-up scaled</span> | 3-up scaled to fit | Only
+                diff | Switch | Swipe | Onion skin
+            </div>
             <div className="mt-2 flex flex-col sm:flex-row 2xl:w-1/2">
-                {data.expectedSrc && (
-                    <div className="mr-2 basis-1/3">
-                        <div className="text-sm font-medium text-gray-500">Expected</div>
-                        <img src={data.expectedSrc} alt="expected" data-role-id="expected-image" />
-                    </div>
-                )}
+                <div className="mr-2 basis-1/3">
+                    <div className="text-sm font-medium text-gray-500">Expected</div>
+                    <img src={data.expectedSrc} alt="expected" data-role-id="expected-image" />
+                </div>
                 <div className="mr-2 basis-1/3">
                     <div className="text-sm font-medium text-gray-500">Actual</div>
                     <img src={data.actualSrc} alt="actual" data-role-id="actual-image" />
                 </div>
-                {data.status === Status.Diff && (
-                    <div className="mr-2 basis-1/3">
-                        <div className="text-sm font-medium text-gray-500">Diff</div>
-                        <div className="relative" data-role-id="diff-image">
-                            <div className="h-full w-full">
-                                {data.diffBubbles?.map((bubble, index) => (
-                                    <div
-                                        key={index}
-                                        className={clsx("diff-bubble absolute size-px opacity-0")}
-                                        style={{
-                                            top: bubble.y,
-                                            left: bubble.x /* "--scale": bubble.scale*/,
-                                        }}
-                                    >
-                                        <div className="absolute left-1/2 top-1/2 size-32 -translate-x-1/2 -translate-y-1/2 rounded-full bg-fuchsia-600"></div>
-                                    </div>
-                                ))}
-                            </div>
-                            <img src={data.diffSrc} alt="diff" />
+                <div className="mr-2 basis-1/3">
+                    <div className="text-sm font-medium text-gray-500">Diff</div>
+                    <div className="relative" data-role-id="diff-image">
+                        <div className="h-full w-full">
+                            {data.diffBubbles?.map((bubble, index) => (
+                                <div
+                                    key={index}
+                                    className={clsx("diff-bubble absolute size-px opacity-0")}
+                                    style={{
+                                        top: bubble.y,
+                                        left: bubble.x,
+                                    }}
+                                >
+                                    <div className="absolute left-1/2 top-1/2 size-32 -translate-x-1/2 -translate-y-1/2 rounded-full bg-fuchsia-600"></div>
+                                </div>
+                            ))}
                         </div>
+                        <img src={data.diffSrc} alt="diff" />
                     </div>
-                )}
+                </div>
             </div>
         </CollapsibleInfo>
     );
 }
+
+interface AssertViewResultProps {
+    data: AssertViewResultWithState;
+}
+
+export function AssertViewResult({ data }: AssertViewResultProps) {
+    if (data.status === Status.Success) {
+        return <AssertViewSuccess data={data} />;
+    } else if (data.status === Status.Diff) {
+        return <AssertViewDiff data={data} />;
+    }
+}
diff --git a/src/components/FeaturesDemo/WebBrowser/ReportPage/AttemptPicker.tsx b/src/components/FeaturesDemo/WebBrowser/ReportPage/AttemptPicker.tsx
@@ -11,7 +11,7 @@ interface AttemptPickerProps {
 
 export function AttemptPicker(props: AttemptPickerProps) {
     return (
-        <div className="flex">
+        <div className="attempt-picker flex">
             {props.attempts.map((attempt, index) => (
                 <div
                     key={index}