ui(component): Tooltip component ui-next (#4635)

Co-authored-by: sedghi <ar.sedghi@gmail.com>

platform/ui-next/src/components/Clipboard/Clipboard.tsx

@@ -0,0 +1,55 @@
+import React, { ReactNode } from 'react';
+import { Button } from '../Button';
+import { Icons } from '../Icons';
+
+interface ClipboardProps {
+  children: ReactNode;
+}
+
+const Clipboard: React.FC<ClipboardProps> = ({ children }) => {
+  const [copyState, setCopyState] = React.useState<'idle' | 'success' | 'error'>('idle');
+  const copyText = React.useMemo(() => {
+    if (typeof children === 'string') {
+      return children.trim();
+    }
+    return '';
+  }, [children]);
+
+  const handleCopy = React.useCallback(async () => {
+    if (!copyText) {
+      return;
+    }
+    try {
+      await navigator.clipboard.writeText(copyText);
+      setCopyState('success');
+    } catch {
+      setCopyState('error');
+    } finally {
+      setTimeout(() => setCopyState('idle'), 1500); // Reset state after feedback
+    }
+  }, [copyText]);
+
+  return (
+    <Button
+      variant="ghost"
+      size="icon"
+      onClick={e => {
+        e.stopPropagation();
+        handleCopy();
+      }}
+      className="text-white"
+      title="Copy"
+    >
+      {copyState === 'idle' && <Icons.Copy className="h-6 w-6" />}
+      {copyState === 'success' && <Icons.FeedbackComplete className="h-6 w-6 text-white" />}
+      {copyState === 'error' && (
+        <Icons.ByName
+          name="Error"
+          className="h-6 w-6 text-white"
+        />
+      )}
+    </Button>
+  );
+};
+
+export { Clipboard };

platform/ui-next/src/components/Clipboard/index.tsx

@@ -0,0 +1,3 @@
+import { Clipboard } from './Clipboard';
+
+export { Clipboard };

platform/ui-next/src/components/Icons/Icons.tsx

@@ -7,6 +7,7 @@ import ChevronOpen from './Sources/ChevronOpen';
 import Code from './Sources/Code';
 import ColorChange from './Sources/ColorChange';
 import Controls from './Sources/Controls';
+import Copy from './Sources/Copy';
 import Delete from './Sources/Delete';
 import DicomTagBrowser from './Sources/DicomTagBrowser';
 import DisplayFillAndOutline from './Sources/DisplayFillAndOutline';
@@ -16,6 +17,7 @@ import Download from './Sources/Download';
 import Export from './Sources/Export';
 import EyeHidden from './Sources/EyeHidden';
 import EyeVisible from './Sources/EyeVisible';
+import FeedbackComplete from './Sources/FeedbackComplete';
 import GearSettings from './Sources/GearSettings';
 import Hide from './Sources/Hide';
 import IconMPR from './Sources/IconMPR';
@@ -418,6 +420,7 @@ export const Icons = {
   Code,
   ColorChange,
   Controls,
+  Copy,
   Delete,
   DicomTagBrowser,
   DisplayFillAndOutline,
@@ -430,6 +433,7 @@ export const Icons = {
   Export,
   EyeHidden,
   EyeVisible,
+  FeedbackComplete,
   GearSettings,
   Hide,
   IconMPR,

platform/ui-next/src/components/Icons/Sources/Copy.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import type { IconProps } from '../types';
+
+export const Copy = (props: IconProps) => (
+  <svg
+    width="24px"
+    height="24px"
+    viewBox="0 0 24 24"
+    {...props}
+  >
+    <g
+      id="Copy"
+      stroke="none"
+      strokeWidth="1"
+      fill="none"
+      fillRule="evenodd"
+    >
+      <rect
+        id="Rectangle"
+        x="0"
+        y="0"
+        width="24"
+        height="24"
+      ></rect>
+      <rect
+        id="Rectangle"
+        stroke="currentColor"
+        x="8.95205173"
+        y="4.5"
+        width="10"
+        height="10"
+        rx="2"
+      ></rect>
+      <path
+        d="M7.05569885,9.5 L5.5,9.5 C4.67157288,9.5 4,10.1715729 4,11 L4,17.8271183 C4,18.6555454 4.67157288,19.3271183 5.5,19.3271183 L12.4520517,19.3271183 C13.2804789,19.3271183 13.9520517,18.6555454 13.9520517,17.8271183 L13.9520517,16.3489489 L13.9520517,16.3489489"
+        id="Path-4"
+        stroke="currentColor"
+        strokeLinecap="round"
+      ></path>
+    </g>
+  </svg>
+);
+
+export default Copy;

platform/ui-next/src/components/Icons/Sources/FeedbackComplete.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import type { IconProps } from '../types';
+
+export const FeedbackComplete = (props: IconProps) => (
+  <svg
+    width="24px"
+    height="24px"
+    viewBox="0 0 24 24"
+    {...props}
+  >
+    <g
+      id="FeedbackComplete"
+      stroke="none"
+      strokeWidth="1"
+      fill="none"
+      fillRule="evenodd"
+    >
+      <rect
+        id="Rectangle"
+        x="0"
+        y="0"
+        width="24"
+        height="24"
+      ></rect>
+      <path
+        d="M6.5,12.5497794 L10.0873523,16.1371317 C10.4778766,16.527656 11.1110415,16.527656 11.5015658,16.1371317 C11.5482206,16.0904769 11.5901435,16.0393192 11.6267216,15.9844066 L17.6113609,7 L17.6113609,7"
+        id="Path-3"
+        stroke="currentColor"
+        strokeLinecap="round"
+      ></path>
+    </g>
+  </svg>
+);
+
+export default FeedbackComplete;

platform/ui-next/src/components/Tooltip/Tooltip.tsx

@@ -17,7 +17,7 @@ const TooltipContent = React.forwardRef<
     ref={ref}
     sideOffset={sideOffset}
     className={cn(
-      'bg-primary-dark border-secondary-light text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 overflow-hidden rounded border px-3 py-1.5 text-sm',
+      'bg-primary-dark border-secondary-light text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 overflow-hidden rounded border px-2 py-1.5 text-sm',
       className
     )}
     {...props}

platform/ui-next/src/components/index.ts

@@ -24,7 +24,7 @@ import {
   DialogDescription,
 } from './Dialog';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from './Select';
-
+import { Clipboard } from './Clipboard';
 import { Combobox } from './Combobox';
 import { Popover, PopoverContent, PopoverTrigger, PopoverAnchor } from './Popover';
 import { Calendar } from './Calendar';
@@ -183,4 +183,5 @@ export {
   CardTitle,
   CardDescription,
   CardContent,
+  Clipboard,
 };

platform/ui-next/src/index.ts

@@ -12,6 +12,7 @@ import {
   Tabs,
   TabsContent,
   TabsList,
+  Clipboard,
   TabsTrigger,
   Toggle,
   toggleVariants,
@@ -99,6 +100,7 @@ export {
   ThemeWrapper,
   Calendar,
   DatePickerWithRange,
+  Clipboard,
   // contextProviders
   NotificationProvider,
   useNotification,