From 0a9c0c82863792a2452b3eb68a995d03d6c40d3a Mon Sep 17 00:00:00 2001
From: fluid-design-io <2216991777@qq.com>
Date: Thu, 26 Oct 2023 11:23:55 -0500
Subject: [PATCH] fix: performance updates

---
 .../palette/analogous-mono-palettes.tsx       | 60 +++++++-------
 .../palette/base-palette-button.tsx           | 23 +++---
 apps/web/components/palette/color-string.tsx  | 24 +-----
 .../palette/six-thirty-ten-palette.tsx        | 81 +++++++------------
 packages/ui/styles/globals.css                | 17 ++++
 5 files changed, 90 insertions(+), 115 deletions(-)

diff --git a/apps/web/components/palette/analogous-mono-palettes.tsx b/apps/web/components/palette/analogous-mono-palettes.tsx
index 8de2d03..39ff50f 100644
--- a/apps/web/components/palette/analogous-mono-palettes.tsx
+++ b/apps/web/components/palette/analogous-mono-palettes.tsx
@@ -68,39 +68,33 @@ const PillPalette = memo(
           "@md/section-secondary:col-span-1",
         )}
       >
-        <AnimatePresence
-          mode={performance === "high" ? "popLayout" : "wait"}
-          initial={false}
-        >
-          {colors.map((color, i) => {
-            const c = color.toHexString();
-            const isDark = tinycolor(color).isDark();
-            const foregroundColor = isDark
-              ? "text-white/30 hover:text-white/70 focus:text-white/70 contrast-more:text-white/80 contrast-more:hover:text-white contrast-more:font-medium"
-              : "text-black/30 hover:text-black/70 focus:text-black/70 contrast-more:text-black/80 contrast-more:hover:text-black contrast-more:font-medium";
-            return (
-              <motion.button
-                key={`${type}-${c}-${i}`}
-                className={cn(
-                  "group/pill-btn flex h-10 w-full items-center justify-between rounded-full border border-border px-2.5 text-xs transition-colors focus:outline-none focus:ring focus:ring-accent focus:ring-opacity-50",
-                  foregroundColor,
-                )}
-                style={{ backgroundColor: c }}
-                type="button"
-                aria-label={`Copy ${c} to clipboard`}
-                {...textAnimation(shouldReduceMotion, animationDelay(i), {
-                  performance,
-                })}
-                suppressHydrationWarning
-              >
-                <motion.code key={`${type}-${c}-text-${i}`}>
-                  {colorHelper.toColorMode(color, mode)}
-                </motion.code>
-                <Copy className="h-4 w-4 opacity-0 transition-opacity group-hover/pill-btn:opacity-100 group-focus/pill-btn:opacity-100" />
-              </motion.button>
-            );
-          })}
-        </AnimatePresence>
+        {colors.map((color, i) => {
+          const c = color.toHexString();
+          const isDark = tinycolor(color).isDark();
+          const foregroundColor = isDark
+            ? "text-white/30 hover:text-white/70 focus:text-white/70 contrast-more:text-white/80 contrast-more:hover:text-white contrast-more:font-medium"
+            : "text-black/30 hover:text-black/70 focus:text-black/70 contrast-more:text-black/80 contrast-more:hover:text-black contrast-more:font-medium";
+          return (
+            <button
+              key={`${type}-${i}`}
+              className={cn(
+                "group/pill-btn flex h-10 w-full items-center justify-between rounded-full border border-border px-2.5 text-xs transition-colors duration-500 focus:outline-none focus:ring focus:ring-accent focus:ring-opacity-50",
+                foregroundColor,
+              )}
+              style={{
+                backgroundColor: c,
+                transitionDelay: `${0.44 + i * 0.06}s`,
+              }}
+              type="button"
+              aria-label={`Copy ${c} to clipboard`}
+            >
+              <motion.code key={`${type}-text-${i}`} className="animate-text">
+                {colorHelper.toColorMode(color, mode)}
+              </motion.code>
+              <Copy className="h-4 w-4 opacity-0 transition-opacity group-hover/pill-btn:opacity-100 group-focus/pill-btn:opacity-100" />
+            </button>
+          );
+        })}
       </div>
     );
   },
diff --git a/apps/web/components/palette/base-palette-button.tsx b/apps/web/components/palette/base-palette-button.tsx
index f3bd443..bda5850 100644
--- a/apps/web/components/palette/base-palette-button.tsx
+++ b/apps/web/components/palette/base-palette-button.tsx
@@ -12,6 +12,8 @@ import {
   useColorStore,
   useSiteSettingsStore,
 } from "@/store/store";
+import { useToast } from "ui/components/ui/use-toast";
+import ToastCopied from "../ui/toast-copied";
 
 const PaletteButton = ({
   type,
@@ -26,13 +28,14 @@ const PaletteButton = ({
   const [isChanging, setIsChanging] = useState(false);
   const [isMounted, setIsMounted] = useState(false);
   const { colorMode, colorPalettes } = useColorStore();
+  const { toast } = useToast();
   const { performance } = useSiteSettingsStore();
   const color = colorPalettes[type][step].raw;
   const { h, s } = color;
   const shadowSmall = `${h} ${s * 100}% ${theme === "dark" ? 17 : 73}% `;
   const shadowLarge = `${h} ${s * 100}% ${theme === "dark" ? 10 : 80}% `;
   const activeShaodw = `0 4px 14px -2px hsl(${shadowSmall}/var(--shadow-opacity)), 0 12px 24px -2px hsl(${shadowLarge}/var(--shadow-opacity))`;
-
+  const colorString = colorHelper.toColorMode(color, colorMode);
   useEffect(() => {
     if (!isMounted) {
       setIsMounted(true);
@@ -53,19 +56,21 @@ const PaletteButton = ({
   }, [color]);
   return (
     <motion.button
-      onClick={() =>
-        navigator.clipboard.writeText(colorHelper.toColorMode(color, colorMode))
-      }
+      onClick={() => {
+        navigator.clipboard.writeText(colorString);
+        toast({
+          //@ts-ignore
+          title: <ToastCopied color={colorString} />,
+        });
+      }}
       className={cn(
         "rounded-lg border border-border",
         "group",
         "transition-shadow duration-300 [--shadow-opacity:0] hover:[--shadow-opacity:0.8] dark:hover:[--shadow-opacity:0.3]",
       )}
       type="button"
-      aria-label={`Click to copy ${colorHelper.toColorMode(
-        color,
-        colorMode,
-      )} to clipboard`}
+      aria-label={`Click to copy ${colorString} to clipboard`}
+      title={colorString}
       initial={{ scale: 1 }}
       whileHover={{ scale: 1.05 }}
       whileTap={{ scale: 0.95 }}
@@ -82,7 +87,6 @@ const PaletteButton = ({
       style={{
         boxShadow: activeShaodw,
       }}
-      suppressHydrationWarning
     >
       <motion.div
         className={cn(
@@ -101,7 +105,6 @@ const PaletteButton = ({
               }
             : {}
         }
-        suppressHydrationWarning
       >
         <Copy
           color={colorHelper.toForeground(color)}
diff --git a/apps/web/components/palette/color-string.tsx b/apps/web/components/palette/color-string.tsx
index 00e72cf..e17521d 100644
--- a/apps/web/components/palette/color-string.tsx
+++ b/apps/web/components/palette/color-string.tsx
@@ -2,32 +2,16 @@
 
 import { colorHelper } from "@/lib/colorHelper";
 import { useColorStore } from "@/store/store";
-import { BaseColorTypes, RawColor } from "@/types/app";
-import React, { useEffect, useState } from "react";
-import { AnimatePresence, motion } from "framer-motion";
-import { cn } from "@ui/lib/utils";
+import { BaseColorTypes } from "@/types/app";
 
-function ColorString({
-  type,
-  step,
-  animation,
-}: {
-  type: BaseColorTypes;
-  step: number;
-  animation: number;
-}) {
+function ColorString({ type, step }: { type: BaseColorTypes; step: number }) {
   const { colorMode, colorPalettes } = useColorStore();
   const color = colorPalettes[type][step].raw;
   const colorString = colorHelper.toColorMode(color, colorMode);
   return (
-    <motion.code
-      className={cn(
-        "transition-opacity duration-500 [.coloring_&]:opacity-0 [.coloring_&]:duration-200",
-      )}
-      title={colorString}
-    >
+    <code className="animate-text" title={colorString}>
       {colorString}
-    </motion.code>
+    </code>
   );
 }
 
diff --git a/apps/web/components/palette/six-thirty-ten-palette.tsx b/apps/web/components/palette/six-thirty-ten-palette.tsx
index 7e805a6..cb43d46 100644
--- a/apps/web/components/palette/six-thirty-ten-palette.tsx
+++ b/apps/web/components/palette/six-thirty-ten-palette.tsx
@@ -5,13 +5,9 @@ import {
   useColorStore,
   useSiteSettingsStore,
 } from "@/store/store";
-import { BaseColorTypes, ColorValue } from "@/types/app";
-import { AnimatePresence, useReducedMotion } from "framer-motion";
+import { BaseColorTypes } from "@/types/app";
 import React, { memo, useEffect, useState } from "react";
-import { useTheme } from "next-themes";
 import { cn } from "@ui/lib/utils";
-import { motion } from "framer-motion";
-import { textAnimation } from "@/lib/animation";
 
 const getColorNames = async (colors: string[]) => {
   const data = await fetch("/api/color-names", {
@@ -27,9 +23,7 @@ const getColorNames = async (colors: string[]) => {
 };
 function SixtyThirtyTenPalettes({ className }: { className?: string }) {
   const [colorNames, setColorNames] = useState(["", "", ""]);
-  const { colorPalettes, baseColors } = useColorStore();
-  const { performance } = useSiteSettingsStore();
-  const shouldReduceMotion = useReducedMotion();
+  const { colorPalettes } = useColorStore();
 
   useEffect(() => {
     if (Object.values(colorPalettes).every((palette) => palette.length === 0)) {
@@ -46,23 +40,7 @@ function SixtyThirtyTenPalettes({ className }: { className?: string }) {
     });
   }, [colorPalettes]);
 
-  const mainPalettes = Object.values(colorPalettes);
-  const boxStyle = [
-    "border-primary/10 text-primary/30 selection:bg-foreground/10 selection:text-primary contrast-more:text-foreground",
-    "border-secondary/10 text-secondary-foreground/30 selection:bg-foreground/10 selection:text-secondary-foreground contrast-more:text-secondary-foreground",
-    "border-accent/10 text-accent-foreground/30 selection:bg-foreground/10 selection:text-accent-foreground contrast-more:text-accent-foreground",
-    "border-border/10 text-foreground/30 selection:bg-foreground/10 selection:text-foreground contrast-more:text-foreground",
-  ];
-  const animationDelay = (i: number) => {
-    let springDelay = 0;
-    switch (performance) {
-      case Performance.low:
-        springDelay = i;
-      default:
-        springDelay = Math.pow(1.8, i) - 0.6;
-    }
-    return 0.06 * 6 + springDelay * 0.06;
-  };
+  const boxStyle = ["box-primary", "box-secondary", "box-accent", "box-border"];
   return (
     <div
       className={cn(
@@ -72,29 +50,18 @@ function SixtyThirtyTenPalettes({ className }: { className?: string }) {
         className,
       )}
     >
-      <AnimatePresence
-        mode={performance === "high" ? "popLayout" : "wait"}
-        initial={false}
-      >
-        {
-          // map over base colors
-          ["primary", "secondary", "accent", "gray"].map((key, i) => (
-            <motion.div
-              key={`sixty-thirty-ten-palette-${i}-${key}`}
-              {...textAnimation(shouldReduceMotion, animationDelay(i), {
-                performance,
-              })}
-              suppressHydrationWarning
-            >
-              <SixtyThirtyTenPalette
-                type={key as BaseColorTypes}
-                className={boxStyle[i]}
-                colorName={colorNames[i]}
-              />
-            </motion.div>
-          ))
-        }
-      </AnimatePresence>
+      {
+        // map over base colors
+        ["primary", "secondary", "accent", "gray"].map((key, i) => (
+          <div key={`sixty-thirty-ten-palette-${i}-${key}`}>
+            <SixtyThirtyTenPalette
+              type={key as BaseColorTypes}
+              className={boxStyle[i]}
+              colorName={colorNames[i]}
+            />
+          </div>
+        ))
+      }
     </div>
   );
 }
@@ -149,21 +116,31 @@ const SixtyThirtyTenPalette = memo(
       >
         <div
           className={cn(
-            "absolute start-0 top-0 p-4 font-sans text-lg font-extralight text-background/70 transition-colors delay-300 duration-700",
+            "absolute start-0 top-0 p-4 font-sans text-lg font-extralight text-background/70 delay-300 duration-700",
             "contrast-more:font-medium contrast-more:text-foreground/80 contrast-more:hover:text-foreground",
+            "animate-text !transition-all",
           )}
         >
           {colorName}
         </div>
         <div
-          className={cn("flex-[0.6] transition-colors", colorSixty[type])}
+          className={cn(
+            "flex-[0.6] transition-colors delay-300 duration-1000",
+            colorSixty[type],
+          )}
         ></div>
         <div className="flex flex-[0.4] @md/section-secondary:flex-col">
           <div
-            className={cn("flex-[0.75] transition-colors", colorThirty[type])}
+            className={cn(
+              "flex-[0.75] transition-colors delay-500 duration-1000",
+              colorThirty[type],
+            )}
           ></div>
           <div
-            className={cn("flex-[0.25] transition-colors", colorTen[type])}
+            className={cn(
+              "flex-[0.25] transition-colors delay-700 duration-1000",
+              colorTen[type],
+            )}
           ></div>
         </div>
       </div>
diff --git a/packages/ui/styles/globals.css b/packages/ui/styles/globals.css
index d7ece02..57da6b1 100644
--- a/packages/ui/styles/globals.css
+++ b/packages/ui/styles/globals.css
@@ -102,4 +102,21 @@
   .skip-main-wrap .skip-btn {
     @apply outline-none text-muted-foreground rounded px-2 py-1 hover:bg-primary focus:bg-primary hover:text-primary-foreground focus:text-primary-foreground;
   }
+  .animate-text {
+    @apply transition-opacity duration-500 [.coloring_&]:opacity-0 [.coloring_&]:duration-200;
+  }
+
+  /* six-thirty-ten */
+  .box-primary {
+    @apply border-primary/10 text-primary/30 selection:bg-foreground/10 selection:text-primary contrast-more:text-foreground;
+  }
+  .box-secondary {
+    @apply border-secondary/10 text-secondary-foreground/30 selection:bg-foreground/10 selection:text-secondary-foreground contrast-more:text-secondary-foreground;
+  }
+  .box-accent {
+    @apply border-accent/10 text-accent-foreground/30 selection:bg-foreground/10 selection:text-accent-foreground contrast-more:text-accent-foreground;
+  }
+  .box-border {
+    @apply border-border/10 text-foreground/30 selection:bg-foreground/10 selection:text-foreground contrast-more:text-foreground;
+  }
 }