Prettier

Author: jdolle

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

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

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

@@ -3,9 +3,9 @@ import magnifier from '../../../public/images/figures/magnifier.svg?url';
 import { ProjectType } from '@/gql/graphql';
 import { cn } from '@/lib/utils';
 import { Card } from './card';
+import { Code } from './code';
 import { DocsLink } from './docs-note';
 import { Heading } from './heading';
-import { Code } from './code';
 
 export const EmptyList = ({
   title,
@@ -85,7 +85,7 @@ export const NoSchemaVersion = ({
           )}
           <div className="flex w-full justify-center">
             <Code>
-             {`hive schema:publish ${isDistributed ? '--service <service-name> --url <url> ' : ''}<path/schema.graphql>`}
+              {`hive schema:publish ${isDistributed ? '--service <service-name> --url <url> ' : ''}<path/schema.graphql>`}
             </Code>
           </div>
         </>

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

@@ -1,4 +1,4 @@
-import { useState, useCallback, useRef } from 'react';
+import { useCallback, useRef, useState } from 'react';
 
 export function useHover() {
   const [hovering, setHovering] = useState(false);
@@ -15,14 +15,8 @@ export function useHover() {
   const customRef = useCallback(
     (node: HTMLElement) => {
       if (previousNode.current?.nodeType === Node.ELEMENT_NODE) {
-        previousNode.current.removeEventListener(
-          'mouseenter',
-          handleMouseEnter
-        );
-        previousNode.current.removeEventListener(
-          'mouseleave',
-          handleMouseLeave
-        );
+        previousNode.current.removeEventListener('mouseenter', handleMouseEnter);
+        previousNode.current.removeEventListener('mouseleave', handleMouseLeave);
       }
 
       if (node?.nodeType === Node.ELEMENT_NODE) {
@@ -32,7 +26,7 @@ export function useHover() {
 
       previousNode.current = node;
     },
-    [handleMouseEnter, handleMouseLeave]
+    [handleMouseEnter, handleMouseLeave],
   );
 
   return [customRef, hovering] as const;

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

@@ -4,11 +4,13 @@ export function useTimed(wait: number = 1000) {
   const [timer, setTimer] = useState<NodeJS.Timeout | null>(null);
   const handler = () => {
     if (timer) {
-        clearTimeout(timer);
+      clearTimeout(timer);
     }
-    setTimer(setTimeout(() => {
-      setTimer(null)
-    }, wait));
-  }
+    setTimer(
+      setTimeout(() => {
+        setTimer(null);
+      }, wait),
+    );
+  };
   return [timer !== null, handler] as const;
 }