Merge pull request #185 from eqlabs/feat/add-cleaner-ui

Feat/add cleaner UI
2022-05-10 14:43:04 +03:00
parent 77eab8d88d 491e10920b
commit 4378afa9a1
9 changed files with 250 additions and 56 deletions
--- a/components/Popover.tsx
+++ b/components/Popover.tsx
@@ -27,6 +27,7 @@ const StyledContent = styled(PopoverPrimitive.Content, {
  fontSize: 12,
  lineHeight: 1,
  color: "$text",
+  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)": {
@@ -43,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)",
  },
 });

@@ -83,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}
@@ -96,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>
 );
--- a/components/Switch.tsx
+++ b/components/Switch.tsx
@@ -0,0 +1,32 @@
+import { styled } from "../stitches.config";
+import * as SwitchPrimitive from "@radix-ui/react-switch";
+
+const StyledSwitch = styled(SwitchPrimitive.Root, {
+  all: "unset",
+  width: 42,
+  height: 25,
+  backgroundColor: "$mauve9",
+  borderRadius: "9999px",
+  position: "relative",
+  boxShadow: `0 2px 10px $colors$mauve2`,
+  WebkitTapHighlightColor: "rgba(0, 0, 0, 0)",
+  "&:focus": { boxShadow: `0 0 0 2px $colors$mauveA2` },
+  '&[data-state="checked"]': { backgroundColor: "$green11" },
+});
+
+const StyledThumb = styled(SwitchPrimitive.Thumb, {
+  display: "block",
+  width: 21,
+  height: 21,
+  backgroundColor: "white",
+  borderRadius: "9999px",
+  boxShadow: `0 2px 2px $colors$mauveA6`,
+  transition: "transform 100ms",
+  transform: "translateX(2px)",
+  willChange: "transform",
+  '&[data-state="checked"]': { transform: "translateX(19px)" },
+});
+
+// Exports
+export const Switch = StyledSwitch;
+export const SwitchThumb = StyledThumb;
--- 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>
--- a/package.json
+++ b/package.json
@@ -21,6 +21,7 @@
    "@radix-ui/react-id": "^0.1.1",
    "@radix-ui/react-label": "^0.1.5",
    "@radix-ui/react-popover": "^0.1.6",
+    "@radix-ui/react-switch": "^0.1.5",
    "@radix-ui/react-tooltip": "^0.1.7",
    "@stitches/react": "^1.2.6-0",
    "base64-js": "^1.5.1",
--- a/pages/develop/[[...slug]].tsx
+++ b/pages/develop/[[...slug]].tsx
@@ -1,4 +1,5 @@
 import { Label } from "@radix-ui/react-label";
+import { Switch, SwitchThumb } from "../../components/Switch";
 import type { NextPage } from "next";
 import dynamic from "next/dynamic";
 import { Gear, Play } from "phosphor-react";
@@ -12,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,
@@ -21,55 +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" }}>
-      <Label>Optimization level</Label>
-      <ButtonGroup css={{ mt: "$2", fontFamily: "$monospace" }}>
-        <Button
-          css={{ fontFamily: "$monospace" }}
-          outline={snap.compileOptions !== "-O0"}
-          onClick={() => (state.compileOptions = "-O0")}
+    <Flex css={{ minWidth: 200, flexDirection: "column", gap: "$5" }}>
+      <Box>
+        <Label
+          style={{
+            flexDirection: "row",
+            display: "flex",
+          }}
        >
-          -O0
-        </Button>
-        <Button
-          css={{ fontFamily: "$monospace" }}
-          outline={snap.compileOptions !== "-O1"}
-          onClick={() => (state.compileOptions = "-O1")}
+          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.optimizationLevel !== "-O0"}
+            onClick={() => (state.compileOptions.optimizationLevel = "-O0")}
+          >
+            -O0
+          </Button>
+          <Button
+            css={{ fontFamily: "$monospace" }}
+            outline={snap.compileOptions.optimizationLevel !== "-O1"}
+            onClick={() => (state.compileOptions.optimizationLevel = "-O1")}
+          >
+            -O1
+          </Button>
+          <Button
+            css={{ fontFamily: "$monospace" }}
+            outline={snap.compileOptions.optimizationLevel !== "-O2"}
+            onClick={() => (state.compileOptions.optimizationLevel = "-O2")}
+          >
+            -O2
+          </Button>
+          <Button
+            css={{ fontFamily: "$monospace" }}
+            outline={snap.compileOptions.optimizationLevel !== "-O3"}
+            onClick={() => (state.compileOptions.optimizationLevel = "-O3")}
+          >
+            -O3
+          </Button>
+          <Button
+            css={{ fontFamily: "$monospace" }}
+            outline={snap.compileOptions.optimizationLevel !== "-O4"}
+            onClick={() => (state.compileOptions.optimizationLevel = "-O4")}
+          >
+            -O4
+          </Button>
+          <Button
+            css={{ fontFamily: "$monospace" }}
+            outline={snap.compileOptions.optimizationLevel !== "-Os"}
+            onClick={() => (state.compileOptions.optimizationLevel = "-Os")}
+          >
+            -Os
+          </Button>
+        </ButtonGroup>
+      </Box>
+      <Box css={{ flexDirection: "column" }}>
+        <Label
+          style={{
+            flexDirection: "row",
+            display: "flex",
+          }}
        >
-          -O1
-        </Button>
-        <Button
-          css={{ fontFamily: "$monospace" }}
-          outline={snap.compileOptions !== "-O2"}
-          onClick={() => (state.compileOptions = "-O2")}
+          Clean WASM{" "}
+          <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) => {
+            state.compileOptions.strip = checked;
+          }}
        >
-          -O2
-        </Button>
-        <Button
-          css={{ fontFamily: "$monospace" }}
-          outline={snap.compileOptions !== "-O3"}
-          onClick={() => (state.compileOptions = "-O3")}
-        >
-          -O3
-        </Button>
-        <Button
-          css={{ fontFamily: "$monospace" }}
-          outline={snap.compileOptions !== "-O4"}
-          onClick={() => (state.compileOptions = "-O4")}
-        >
-          -O4
-        </Button>
-        <Button
-          css={{ fontFamily: "$monospace" }}
-          outline={snap.compileOptions !== "-Os"}
-          onClick={() => (state.compileOptions = "-Os")}
-        >
-          -Os
-        </Button>
-      </ButtonGroup>
+          <SwitchThumb />
+        </Switch>
+      </Box>
    </Flex>
  );
 };
--- a/state/actions/compileCode.ts
+++ b/state/actions/compileCode.ts
@@ -35,10 +35,11 @@ export const compileCode = async (activeId: number) => {
      body: JSON.stringify({
        output: "wasm",
        compress: true,
+        strip: state.compileOptions.strip,
        files: [
          {
            type: "c",
-            options: state.compileOptions || '-O0',
+            options: state.compileOptions.optimizationLevel || '-O0',
            name: state.files[activeId].name,
            src: state.files[activeId].content,
          },
--- a/state/index.ts
+++ b/state/index.ts
@@ -74,7 +74,10 @@ export interface IState {
  mainModalOpen: boolean;
  mainModalShowed: boolean;
  accounts: IAccount[];
-  compileOptions: '-O0' | '-O1' | '-O2' | '-O3' | '-O4' | '-Os';
+  compileOptions: {
+    optimizationLevel: '-O0' | '-O1' | '-O2' | '-O3' | '-O4' | '-Os';
+    strip: boolean
+  }
 }

 // let localStorageState: null | string = null;
@@ -104,7 +107,10 @@ let initialState: IState = {
  mainModalOpen: false,
  mainModalShowed: false,
  accounts: [],
-  compileOptions: '-O0'
+  compileOptions: {
+    optimizationLevel: '-O0',
+    strip: false
+  }
 };

 let localStorageAccounts: string | null = null;
--- a/stitches.config.ts
+++ b/stitches.config.ts
@@ -9,16 +9,20 @@ import {
  grass,
  slate,
  mauve,
+  mauveA,
  amber,
  purple,
+  green,
  grayDark,
  blueDark,
  crimsonDark,
  grassDark,
  slateDark,
  mauveDark,
+  mauveDarkA,
  amberDark,
  purpleDark,
+  greenDark,
  red,
  redDark,
 } from "@radix-ui/colors";
@@ -41,8 +45,10 @@ export const {
      ...grass,
      ...slate,
      ...mauve,
+      ...mauveA,
      ...amber,
      ...purple,
+      ...green,
      ...red,
      accent: "#9D2DFF",
      background: "$gray1",
@@ -353,8 +359,10 @@ export const darkTheme = createTheme("dark", {
    ...grassDark,
    ...slateDark,
    ...mauveDark,
+    ...mauveDarkA,
    ...amberDark,
    ...purpleDark,
+    ...greenDark,
    ...redDark,
    deep: "rgb(10, 10, 10)",
    // backgroundA: transparentize(0.1, grayDark.gray1),
--- a/yarn.lock
+++ b/yarn.lock
@@ -674,7 +674,7 @@
    "@babel/runtime" "^7.13.10"
    "@radix-ui/react-use-layout-effect" "0.1.0"

-"@radix-ui/react-label@^0.1.5":
+"@radix-ui/react-label@0.1.5", "@radix-ui/react-label@^0.1.5":
  version "0.1.5"
  resolved "https://registry.npmjs.org/@radix-ui/react-label/-/react-label-0.1.5.tgz"
  integrity sha512-Au9+n4/DhvjR0IHhvZ1LPdx/OW+3CGDie30ZyCkbSHIuLp4/CV4oPPGBwJ1vY99Jog3zyQhsGww9MXj8O9Aj/A==
@@ -794,6 +794,21 @@
    "@babel/runtime" "^7.13.10"
    "@radix-ui/react-compose-refs" "0.1.0"

+"@radix-ui/react-switch@^0.1.5":
+  version "0.1.5"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-switch/-/react-switch-0.1.5.tgz#071ffa19a17a47fdc5c5e6f371bd5901c9fef2f4"
+  integrity sha512-ITtslJPK+Yi34iNf7K9LtsPaLD76oRIVzn0E8JpEO5HW8gpRBGb2NNI9mxKtEB30TVqIcdjdL10AmuIfOMwjtg==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/primitive" "0.1.0"
+    "@radix-ui/react-compose-refs" "0.1.0"
+    "@radix-ui/react-context" "0.1.1"
+    "@radix-ui/react-label" "0.1.5"
+    "@radix-ui/react-primitive" "0.1.4"
+    "@radix-ui/react-use-controllable-state" "0.1.0"
+    "@radix-ui/react-use-previous" "0.1.1"
+    "@radix-ui/react-use-size" "0.1.1"
+
 "@radix-ui/react-tooltip@^0.1.7":
  version "0.1.7"
  resolved "https://registry.npmjs.org/@radix-ui/react-tooltip/-/react-tooltip-0.1.7.tgz"