implement new code component

Author: jdolle

packages/web/app/src/components/ui/code.tsx

@@ -0,0 +1,46 @@
+import { CheckIcon, CopyIcon } from './icon';
+import cn from 'clsx'
+import type { ComponentProps, FC } from 'react'
+import { useHover } from '@/lib/hooks/use-hover';
+import { useTimed } from '@/lib/hooks/use-timed';
+
+export const Code: FC<
+  ComponentProps<'code'>
+> = ({ children, className, ...props }) => {
+  const [copied, startCopyTimer] = useTimed(1500);
+  const [ref, hovering] = useHover();
+  return (
+    <span
+      ref={ref}
+      className="flex items-center gap-2 break-all rounded-md bg-black p-4 font-mono text-sm relative pr-14 border border-gray-600"
+    >
+      <code
+        className={cn(
+          'whitespace-pre-line',
+          'cursor-text',
+          className,
+        )}
+        // always show code blocks in ltr
+        dir="ltr"
+        {...props}
+      >
+        {children}
+      </code>
+      <button
+        data-hovering={hovering || copied}
+        className="cursor-pointer opacity-0 data-[hovering=true]:transition-opacity data-[hovering=true]:opacity-100 hover:text-orange-600 absolute right-3 top-2 p-2 border border-gray-600 rounded-md"
+        onClick={async (ev) => {
+          const value = children?.valueOf().toString();
+          if (value) {
+            ev.preventDefault();
+            startCopyTimer();
+            await navigator.clipboard.writeText(value);
+          }
+        }}
+        title="Copy to clipboard"
+      >
+        {copied ? <CheckIcon size={16} /> : <CopyIcon size={16} />}
+      </button>
+    </span>
+  )
+}

packages/web/app/src/components/ui/empty-list.tsx

@@ -2,10 +2,10 @@ import { ReactElement, ReactNode } from 'react';
 import magnifier from '../../../public/images/figures/magnifier.svg?url';
 import { ProjectType } from '@/gql/graphql';
 import { cn } from '@/lib/utils';
-import { InlineCode } from '../v2/inline-code';
 import { Card } from './card';
 import { DocsLink } from './docs-note';
 import { Heading } from './heading';
+import { Code } from './code';
 
 export const EmptyList = ({
   title,
@@ -68,9 +68,9 @@ export const NoSchemaVersion = ({
             registry before publishing.
           </div>
           <div className="flex w-full justify-center">
-            <InlineCode
-              content={`hive schema:check ${isDistributed ? '--service <service-name> --url <url> ' : ''}<path/schema.graphql>`}
-            />
+            <Code>
+              {`hive schema:check ${isDistributed ? '--service <service-name> --url <url> ' : ''}<path/schema.graphql>`}
+            </Code>
           </div>
         </>
       );
@@ -84,9 +84,9 @@ export const NoSchemaVersion = ({
             </div>
           )}
           <div className="flex w-full justify-center">
-            <InlineCode
-              content={`hive schema:publish ${isDistributed ? '--service <service-name> --url <url> ' : ''}<path/schema.graphql>`}
-            />
+            <Code>
+             {`hive schema:publish ${isDistributed ? '--service <service-name> --url <url> ' : ''}<path/schema.graphql>`}
+            </Code>
           </div>
         </>
       );

packages/web/app/src/components/ui/icon.tsx

@@ -231,11 +231,11 @@ export const ArrowDownIcon = ({ className }: IconProps): ReactElement => (
   </svg>
 );
 
-export const CheckIcon = ({ className }: IconProps): ReactElement => (
+export const CheckIcon = ({ className, size }: IconProps & { size?: number }): ReactElement => (
   <svg
     viewBox="0 0 24 24"
-    width="24"
-    height="24"
+    width={size ?? 24}
+    height={size ?? 24}
     stroke="currentColor"
     xmlns="http://www.w3.org/2000/svg"
     className={className}

packages/web/app/src/lib/hooks/use-hover.ts

@@ -0,0 +1,39 @@
+import { useState, useCallback, useRef } from 'react';
+
+export function useHover() {
+  const [hovering, setHovering] = useState(false);
+  const previousNode = useRef<Node | null>(null);
+
+  const handleMouseEnter = useCallback(() => {
+    setHovering(true);
+  }, []);
+
+  const handleMouseLeave = useCallback(() => {
+    setHovering(false);
+  }, []);
+
+  const customRef = useCallback(
+    (node: HTMLElement) => {
+      if (previousNode.current?.nodeType === Node.ELEMENT_NODE) {
+        previousNode.current.removeEventListener(
+          'mouseenter',
+          handleMouseEnter
+        );
+        previousNode.current.removeEventListener(
+          'mouseleave',
+          handleMouseLeave
+        );
+      }
+
+      if (node?.nodeType === Node.ELEMENT_NODE) {
+        node.addEventListener('mouseenter', handleMouseEnter);
+        node.addEventListener('mouseleave', handleMouseLeave);
+      }
+
+      previousNode.current = node;
+    },
+    [handleMouseEnter, handleMouseLeave]
+  );
+
+  return [customRef, hovering] as const;
+}

packages/web/app/src/lib/hooks/use-timed.ts

@@ -0,0 +1,14 @@
+import { useState } from 'react';
+
+export function useTimed(wait: number = 1000) {
+  const [timer, setTimer] = useState<NodeJS.Timeout | null>(null);
+  const handler = () => {
+    if (timer) {
+        clearTimeout(timer);
+    }
+    setTimer(setTimeout(() => {
+      setTimer(null)
+    }, wait));
+  }
+  return [timer !== null, handler] as const;
+}