Merge branch 'eng-1582-component-id' of https://github.com/unkeyed/unkey

into eng-1582-component-id
unkeyed · Dec 4, 2024 · e09f46c · e09f46c
2 parents 2e1c68d + 937ec49
commit e09f46c
Show file tree

Hide file tree

Showing 6 changed files with 88 additions and 71 deletions.
diff --git a/apps/engineering/app/layout.tsx b/apps/engineering/app/layout.tsx
@@ -4,8 +4,8 @@ import { GeistSans } from "geist/font/sans";
 
 import type { ReactNode } from "react";
 
-import "./global.css";
 import { TooltipProvider } from "@unkey/ui/src/components/tooltip";
+import "./global.css";
 
 export default function Layout({ children }: { children: ReactNode }) {
   return (
@@ -15,7 +15,9 @@ export default function Layout({ children }: { children: ReactNode }) {
       suppressHydrationWarning
     >
       <body>
-        <RootProvider><TooltipProvider>{children}</TooltipProvider></RootProvider>
+        <RootProvider>
+          <TooltipProvider>{children}</TooltipProvider>
+        </RootProvider>
       </body>
     </html>
   );

diff --git a/apps/engineering/content/design/components/id.valueTruncate.tsx b/apps/engineering/content/design/components/id.valueTruncate.tsx
@@ -4,11 +4,11 @@ import { Row } from "@/app/components/row";
 import { Id } from "@unkey/ui";
 
 export const ValueTruncateExample: React.FC = () => (
-    <RenderComponentWithSnippet>
-        <Row>
-            <Id value={"api_zTLSnw1YTqUHRwJTgKWrg"} />
-            <Id value={"api_zTLSnw1YTqUHRwJTgKWrg"} truncate={6} />
-            <Id value={"api_zTLSnw1YTqUHRwJTgKWrg"} truncate={12} />
-        </Row>
-    </RenderComponentWithSnippet>
+  <RenderComponentWithSnippet>
+    <Row>
+      <Id value={"api_zTLSnw1YTqUHRwJTgKWrg"} />
+      <Id value={"api_zTLSnw1YTqUHRwJTgKWrg"} truncate={6} />
+      <Id value={"api_zTLSnw1YTqUHRwJTgKWrg"} truncate={12} />
+    </Row>
+  </RenderComponentWithSnippet>
 );
diff --git a/apps/engineering/content/design/components/tooltip.onHover.tsx b/apps/engineering/content/design/components/tooltip.onHover.tsx
@@ -2,44 +2,63 @@
 import { RenderComponentWithSnippet } from "@/app/components/render";
 import { Row } from "@/app/components/row";
 
-import { Tooltip, TooltipContent, TooltipTrigger } from "@unkey/ui"
+import { Tooltip, TooltipContent, TooltipTrigger } from "@unkey/ui";
 import { InfoIcon } from "lucide-react";
 export const OnHoverExample: React.FC = () => (
-    <RenderComponentWithSnippet>
-        <Row>
-            <Tooltip>
-                <TooltipTrigger >
-                    <p className="inline-flex gap-4 border border-gray-2 px-3 py-1 rounded-lg ">Bottom <span><InfoIcon size={14} className="text-gray-10 self-auto h-full" /></span></p>
-
-                </TooltipTrigger>
-                <TooltipContent className="h-8" side="bottom">
-                    Content
-                </TooltipContent>
-            </Tooltip>
-            <Tooltip>
-                <TooltipTrigger>
-                    <p className="inline-flex gap-4 border border-gray-2 px-3 py-1 rounded-lg ">Top <span><InfoIcon size={14} className="text-gray-10 self-auto h-full" /></span></p>
-                </TooltipTrigger>
-                <TooltipContent className="h-8" side="top">
-                    Content
-                </TooltipContent>
-            </Tooltip>
-            <Tooltip>
-                <TooltipTrigger>
-                    <p className="inline-flex gap-4 border border-gray-2 px-3 py-1 rounded-lg ">Right <span><InfoIcon size={14} className="text-gray-10 self-auto h-full" /></span></p>
-                </TooltipTrigger>
-                <TooltipContent className="h-8" side="right">
-                    Content
-                </TooltipContent>
-            </Tooltip>
-            <Tooltip>
-                <TooltipTrigger>
-                    <p className="inline-flex gap-4 border border-gray-2 px-3 py-1 rounded-lg ">Left <span><InfoIcon size={14} className="text-gray-10 self-auto h-full" /></span></p>
-                </TooltipTrigger>
-                <TooltipContent className="h-8" side="left">
-                    Content
-                </TooltipContent>
-            </Tooltip>
-        </Row>
-    </RenderComponentWithSnippet>
+  <RenderComponentWithSnippet>
+    <Row>
+      <Tooltip>
+        <TooltipTrigger>
+          <p className="inline-flex gap-4 border border-gray-2 px-3 py-1 rounded-lg ">
+            Bottom{" "}
+            <span>
+              <InfoIcon size={14} className="text-gray-10 self-auto h-full" />
+            </span>
+          </p>
+        </TooltipTrigger>
+        <TooltipContent className="h-8" side="bottom">
+          Content
+        </TooltipContent>
+      </Tooltip>
+      <Tooltip>
+        <TooltipTrigger>
+          <p className="inline-flex gap-4 border border-gray-2 px-3 py-1 rounded-lg ">
+            Top{" "}
+            <span>
+              <InfoIcon size={14} className="text-gray-10 self-auto h-full" />
+            </span>
+          </p>
+        </TooltipTrigger>
+        <TooltipContent className="h-8" side="top">
+          Content
+        </TooltipContent>
+      </Tooltip>
+      <Tooltip>
+        <TooltipTrigger>
+          <p className="inline-flex gap-4 border border-gray-2 px-3 py-1 rounded-lg ">
+            Right{" "}
+            <span>
+              <InfoIcon size={14} className="text-gray-10 self-auto h-full" />
+            </span>
+          </p>
+        </TooltipTrigger>
+        <TooltipContent className="h-8" side="right">
+          Content
+        </TooltipContent>
+      </Tooltip>
+      <Tooltip>
+        <TooltipTrigger>
+          <p className="inline-flex gap-4 border border-gray-2 px-3 py-1 rounded-lg ">
+            Left{" "}
+            <span>
+              <InfoIcon size={14} className="text-gray-10 self-auto h-full" />
+            </span>
+          </p>
+        </TooltipTrigger>
+        <TooltipContent className="h-8" side="left">
+          Content
+        </TooltipContent>
+      </Tooltip>
+    </Row>
+  </RenderComponentWithSnippet>
 );
diff --git a/internal/ui/package.json b/internal/ui/package.json
@@ -13,7 +13,6 @@
     "@unkey/tsconfig": "workspace:^",
     "tailwindcss": "^3.4.15",
     "typescript": "^5.5.3"
-
   },
   "dependencies": {
     "@radix-ui/react-tooltip": "^1.0.7",

diff --git a/internal/ui/src/components/id.tsx b/internal/ui/src/components/id.tsx
@@ -1,8 +1,8 @@
 "use client";
+import { TaskChecked, TaskUnchecked } from "@unkey/icons";
 import * as React from "react";
 import { cn } from "../lib/utils";
 import { Tooltip, TooltipContent, TooltipTrigger } from "./tooltip";
-import { TaskUnchecked, TaskChecked } from "@unkey/icons"
 
 type IdProps = {
     /**
@@ -20,25 +20,25 @@ type IdProps = {
 };
 
 export const Id: React.FC<IdProps> = ({ className, value, truncate, ...props }) => {
-    const [isCopied, setIsCopied] = React.useState(false);
-    const copyTextToClipboard = async (value: string) => {
-        try {
-            await navigator.clipboard.writeText(value ?? "");
-            setIsCopied(true);
-        } catch (error) {
-            console.error('Failed to copy: ', error);
-        }
-    };
+  const [isCopied, setIsCopied] = React.useState(false);
+  const copyTextToClipboard = async (value: string) => {
+    try {
+      await navigator.clipboard.writeText(value ?? "");
+      setIsCopied(true);
+    } catch (error) {
+      console.error("Failed to copy: ", error);
+    }
+  };
 
-    React.useEffect(() => {
-        if (!isCopied) {
-            return;
-        }
-        const timer = setTimeout(() => {
-            setIsCopied(false);
-        }, 2000);
-        return () => clearTimeout(timer);
-    }, [isCopied]);
+  React.useEffect(() => {
+    if (!isCopied) {
+      return;
+    }
+    const timer = setTimeout(() => {
+      setIsCopied(false);
+    }, 2000);
+    return () => clearTimeout(timer);
+  }, [isCopied]);
 
     const ellipse = '••••';
     const truncateValue = truncate ? value?.slice(0, truncate) + ellipse : value;
@@ -48,7 +48,7 @@ export const Id: React.FC<IdProps> = ({ className, value, truncate, ...props })
             className={cn("relative inline-flex w-full ring-2 ring-transparent no-underline focus:ring-gray-6 group items-center transition duration-150 justify-center gap-3 whitespace-nowrap tracking-normal rounded-lg font-medium bg-gray-1 w-fit max-w-96 border border-accent-6 hover:border-accent-8 text-gray-12 radius radius-2 font-mono h-8 px-3 py-1 text-xs overflow-hidden", className)}
             onClick={() => copyTextToClipboard(value)}
             aria-label={`Copy ID: ${value}`}  
-            role="link"  
+            role="button"  
             {...props}
         >
             {truncateValue}
@@ -67,5 +67,3 @@ export const Id: React.FC<IdProps> = ({ className, value, truncate, ...props })
         </button>);
 };
 Id.displayName = "Id";
-
-
diff --git a/internal/ui/src/components/tooltip.tsx b/internal/ui/src/components/tooltip.tsx
@@ -27,5 +27,4 @@ const TooltipContent = React.forwardRef<
 ));
 TooltipContent.displayName = TooltipPrimitive.Content.displayName;
 
-
 export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };
Original file line number	Diff line number	Diff line change
Expand Up		@@ -27,5 +27,4 @@ const TooltipContent = React.forwardRef<
		));
		TooltipContent.displayName = TooltipPrimitive.Content.displayName;


		export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };