From c07e70acc9c0fdcc54ddc28cee7f18667036f09d Mon Sep 17 00:00:00 2001
From: Valtteri Karesto <valtteri.karesto@gmail.com>
Date: Tue, 10 May 2022 11:52:03 +0300
Subject: [PATCH] Add popover descriptions

---
 components/Popover.tsx        |  13 ++--
 components/Tooltip.tsx        |  13 ++--
 pages/develop/[[...slug]].tsx | 142 ++++++++++++++++++++++++++++++----
 3 files changed, 141 insertions(+), 27 deletions(-)

diff --git a/components/Popover.tsx b/components/Popover.tsx
index b35e6d4..65b6231 100644
--- a/components/Popover.tsx
+++ b/components/Popover.tsx
@@ -27,7 +27,7 @@ const StyledContent = styled(PopoverPrimitive.Content, {
   fontSize: 12,
   lineHeight: 1,
   color: "$text",
-  background: "$background",
+  backgroundColor: "$background",
   boxShadow:
     "0px 10px 38px -10px rgba(22, 23, 24, 0.35), 0px 10px 20px -15px rgba(22, 23, 24, 0.2)",
   "@media (prefers-reduced-motion: no-preference)": {
@@ -44,7 +44,7 @@ const StyledContent = styled(PopoverPrimitive.Content, {
   ".dark &": {
     backgroundColor: "$mauve5",
     boxShadow:
-      "0px 10px 38px -10px rgba(22, 23, 24, 0.85), 0px 10px 20px -15px rgba(22, 23, 24, 0.6)",
+      "0px 5px 38px -2px rgba(22, 23, 24, 1), 0px 10px 20px 0px rgba(22, 23, 24, 1)",
   },
 });
 
@@ -84,12 +84,15 @@ interface IPopover {
   onOpenChange?: (open: boolean) => void;
 }
 
-const Popover: React.FC<IPopover> = ({
+const Popover: React.FC<
+  IPopover & React.ComponentProps<typeof PopoverContent>
+> = ({
   children,
   content,
   open,
   defaultOpen = false,
   onOpenChange,
+  ...rest
 }) => (
   <PopoverRoot
     open={open}
@@ -97,8 +100,8 @@ const Popover: React.FC<IPopover> = ({
     onOpenChange={onOpenChange}
   >
     <PopoverTrigger asChild>{children}</PopoverTrigger>
-    <PopoverContent sideOffset={5}>
-      {content} <PopoverArrow />
+    <PopoverContent sideOffset={5} {...rest}>
+      {content} <PopoverArrow offset={5} className="arrow" />
     </PopoverContent>
   </PopoverRoot>
 );
diff --git a/components/Tooltip.tsx b/components/Tooltip.tsx
index b0224f3..e43c5e3 100644
--- a/components/Tooltip.tsx
+++ b/components/Tooltip.tsx
@@ -45,11 +45,11 @@ const StyledContent = styled(TooltipPrimitive.Content, {
   },
   ".dark &": {
     boxShadow:
-      "0px 0px 10px 2px rgba(255,255,255,.15), hsl(206 22% 7% / 35%) 0px 10px 38px -10px, hsl(206 22% 7% / 20%) 0px 10px 20px -15px",
+      "0px 0px 10px 2px rgba(0,0,0,.45), hsl(206 22% 7% / 35%) 0px 10px 38px -10px, hsl(206 22% 7% / 20%) 0px 10px 20px -15px",
   },
   ".light &": {
     boxShadow:
-      "0px 0px 10px 2px rgba(0,0,0,.15), hsl(206 22% 7% / 35%) 0px 10px 38px -10px, hsl(206 22% 7% / 20%) 0px 10px 20px -15px",
+      "0px 0px 10px 2px rgba(0,0,0,.25), hsl(206 22% 7% / 35%) 0px 10px 38px -10px, hsl(206 22% 7% / 20%) 0px 10px 20px -15px",
   },
 });
 
@@ -64,12 +64,15 @@ interface ITooltip {
   onOpenChange?: (open: boolean) => void;
 }
 
-const Tooltip: React.FC<ITooltip> = ({
+const Tooltip: React.FC<
+  React.ComponentProps<typeof StyledContent> & ITooltip
+> = ({
   children,
   content,
   open,
   defaultOpen = false,
   onOpenChange,
+  ...rest
 }) => {
   return (
     <TooltipPrimitive.Root
@@ -78,8 +81,8 @@ const Tooltip: React.FC<ITooltip> = ({
       onOpenChange={onOpenChange}
     >
       <TooltipPrimitive.Trigger asChild>{children}</TooltipPrimitive.Trigger>
-      <StyledContent side="bottom" align="center">
-        {content}
+      <StyledContent side="bottom" align="center" {...rest}>
+        <div dangerouslySetInnerHTML={{ __html: content }} />
         <StyledArrow offset={5} width={11} height={5} />
       </StyledContent>
     </TooltipPrimitive.Root>
diff --git a/pages/develop/[[...slug]].tsx b/pages/develop/[[...slug]].tsx
index 16a6630..0e1c2c4 100644
--- a/pages/develop/[[...slug]].tsx
+++ b/pages/develop/[[...slug]].tsx
@@ -13,6 +13,7 @@ import Popover from "../../components/Popover";
 import state from "../../state";
 import { compileCode } from "../../state/actions";
 import { getSplit, saveSplit } from "../../state/actions/persistSplits";
+import { styled } from "../../stitches.config";
 
 const HooksEditor = dynamic(() => import("../../components/HooksEditor"), {
   ssr: false,
@@ -22,70 +23,177 @@ const LogBox = dynamic(() => import("../../components/LogBox"), {
   ssr: false,
 });
 
+const OptimizationText = () => (
+  <span>
+    Specify which optimization level to use for compiling. For example -O0 means
+    “no optimization”: this level compiles the fastest and generates the most
+    debuggable code. -O2 means moderate level of optimization which enables most
+    optimizations. Read more about the options from{" "}
+    <a
+      className="link"
+      rel="noopener noreferrer"
+      target="_blank"
+      href="https://clang.llvm.org/docs/CommandGuide/clang.html#cmdoption-o0"
+    >
+      clang documentation
+    </a>
+    .
+  </span>
+);
+
+const StyledOptimizationText = styled(OptimizationText, {
+  color: "$mauve12 !important",
+  fontSize: "200px",
+  "span a.link": {
+    color: "red",
+  },
+});
+
 const CompilerSettings = () => {
   const snap = useSnapshot(state);
   return (
     <Flex css={{ minWidth: 200, flexDirection: "column", gap: "$5" }}>
       <Box>
-        <Label>Optimization level</Label>
+        <Label
+          style={{
+            flexDirection: "row",
+            display: "flex",
+          }}
+        >
+          Optimization level{" "}
+          <Popover
+            css={{
+              maxWidth: "240px",
+              lineHeight: "1.3",
+              a: {
+                color: "$purple11",
+              },
+              ".dark &": {
+                backgroundColor: "$black !important",
+
+                ".arrow": {
+                  fill: "$colors$black",
+                },
+              },
+            }}
+            content={<StyledOptimizationText />}
+          >
+            <Flex
+              css={{
+                position: "relative",
+                top: "-1px",
+                ml: "$1",
+                backgroundColor: "$mauve8",
+                borderRadius: "$full",
+                cursor: "pointer",
+                width: "16px",
+                height: "16px",
+                alignItems: "center",
+                justifyContent: "center",
+              }}
+            >
+              ?
+            </Flex>
+          </Popover>
+        </Label>
         <ButtonGroup css={{ mt: "$2", fontFamily: "$monospace" }}>
           <Button
             css={{ fontFamily: "$monospace" }}
-            outline={snap.compileOptions.optimisationLevel !== "-O0"}
-            onClick={() => (state.compileOptions.optimisationLevel = "-O0")}
+            outline={snap.compileOptions.optimizationLevel !== "-O0"}
+            onClick={() => (state.compileOptions.optimizationLevel = "-O0")}
           >
             -O0
           </Button>
           <Button
             css={{ fontFamily: "$monospace" }}
-            outline={snap.compileOptions.optimisationLevel !== "-O1"}
-            onClick={() => (state.compileOptions.optimisationLevel = "-O1")}
+            outline={snap.compileOptions.optimizationLevel !== "-O1"}
+            onClick={() => (state.compileOptions.optimizationLevel = "-O1")}
           >
             -O1
           </Button>
           <Button
             css={{ fontFamily: "$monospace" }}
-            outline={snap.compileOptions.optimisationLevel !== "-O2"}
-            onClick={() => (state.compileOptions.optimisationLevel = "-O2")}
+            outline={snap.compileOptions.optimizationLevel !== "-O2"}
+            onClick={() => (state.compileOptions.optimizationLevel = "-O2")}
           >
             -O2
           </Button>
           <Button
             css={{ fontFamily: "$monospace" }}
-            outline={snap.compileOptions.optimisationLevel !== "-O3"}
-            onClick={() => (state.compileOptions.optimisationLevel = "-O3")}
+            outline={snap.compileOptions.optimizationLevel !== "-O3"}
+            onClick={() => (state.compileOptions.optimizationLevel = "-O3")}
           >
             -O3
           </Button>
           <Button
             css={{ fontFamily: "$monospace" }}
-            outline={snap.compileOptions.optimisationLevel !== "-O4"}
-            onClick={() => (state.compileOptions.optimisationLevel = "-O4")}
+            outline={snap.compileOptions.optimizationLevel !== "-O4"}
+            onClick={() => (state.compileOptions.optimizationLevel = "-O4")}
           >
             -O4
           </Button>
           <Button
             css={{ fontFamily: "$monospace" }}
-            outline={snap.compileOptions.optimisationLevel !== "-Os"}
-            onClick={() => (state.compileOptions.optimisationLevel = "-Os")}
+            outline={snap.compileOptions.optimizationLevel !== "-Os"}
+            onClick={() => (state.compileOptions.optimizationLevel = "-Os")}
           >
             -Os
           </Button>
         </ButtonGroup>
       </Box>
-      <Flex css={{ flexDirection: "column" }}>
-        <Label>Clean code</Label>
+      <Box css={{ flexDirection: "column" }}>
+        <Label
+          style={{
+            flexDirection: "row",
+            display: "flex",
+          }}
+        >
+          Clean code{" "}
+          <Popover
+            css={{
+              maxWidth: "240px",
+              lineHeight: "1.3",
+              a: {
+                color: "$purple11",
+              },
+              ".dark &": {
+                backgroundColor: "$black !important",
+
+                ".arrow": {
+                  fill: "$colors$black",
+                },
+              },
+            }}
+            content="Cleaner removes unwanted compiler-provided exports and functions from a wasm binary to make it (more) suitable for being used as a Hook"
+          >
+            <Flex
+              css={{
+                position: "relative",
+                top: "-1px",
+                mx: "$1",
+                backgroundColor: "$mauve8",
+                borderRadius: "$full",
+                cursor: "pointer",
+                width: "16px",
+                height: "16px",
+                alignItems: "center",
+                justifyContent: "center",
+              }}
+            >
+              ?
+            </Flex>
+          </Popover>
+        </Label>
         <Switch
           css={{ mt: "$2" }}
           checked={snap.compileOptions.strip}
           onCheckedChange={(checked) => {
-            console.log(checked);
             state.compileOptions.strip = checked;
           }}
         >
           <SwitchThumb />
         </Switch>
-      </Flex>
+      </Box>
     </Flex>
   );
 };