feat: add uninserted field validation

packages/ui/components/field/field-tooltip.tsx

@@ -0,0 +1,63 @@
+import { TooltipArrow } from '@radix-ui/react-tooltip';
+import { VariantProps, cva } from 'class-variance-authority';
+import { createPortal } from 'react-dom';
+
+import { useFieldPageCoords } from '@documenso/lib/client-only/hooks/use-field-page-coords';
+import { cn } from '@documenso/ui/lib/utils';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from '@documenso/ui/primitives/tooltip';
+
+import { Field } from '.prisma/client';
+
+const tooltipVariants = cva('font-semibold', {
+  variants: {
+    color: {
+      default: 'border-2 fill-white',
+      warning: 'border-0 bg-orange-300 fill-orange-300 text-orange-900',
+    },
+  },
+  defaultVariants: {
+    color: 'default',
+  },
+});
+
+interface FieldToolTipProps extends VariantProps<typeof tooltipVariants> {
+  children: React.ReactNode;
+  className?: string;
+  field: Field;
+}
+
+/**
+ * Renders a tooltip for a given field.
+ */
+export function FieldToolTip({ children, color, className = '', field }: FieldToolTipProps) {
+  const coords = useFieldPageCoords(field);
+
+  return createPortal(
+    <div
+      className={cn('absolute')}
+      style={{
+        top: `${coords.y}px`,
+        left: `${coords.x}px`,
+        height: `${coords.height}px`,
+        width: `${coords.width}px`,
+      }}
+    >
+      <TooltipProvider>
+        <Tooltip delayDuration={0} open={!field.inserted}>
+          <TooltipTrigger className="absolute inset-0 w-full"></TooltipTrigger>
+
+          <TooltipContent className={tooltipVariants({ color, className })} sideOffset={2}>
+            {children}
+            <TooltipArrow />
+          </TooltipContent>
+        </Tooltip>
+      </TooltipProvider>
+    </div>,
+    document.body,
+  );
+}

packages/ui/components/field/field.tsx

@@ -0,0 +1,90 @@
+'use client';
+
+import React, { useEffect, useState } from 'react';
+
+import { createPortal } from 'react-dom';
+
+import { useFieldPageCoords } from '@documenso/lib/client-only/hooks/use-field-page-coords';
+import { Field } from '@documenso/prisma/client';
+import { cn } from '@documenso/ui/lib/utils';
+import { Card, CardContent } from '@documenso/ui/primitives/card';
+
+export type FieldRootContainerProps = {
+  field: Field;
+  children: React.ReactNode;
+};
+
+export type FieldContainerPortalProps = {
+  field: Field;
+  className?: string;
+  children: React.ReactNode;
+};
+
+export function FieldContainerPortal({
+  field,
+  children,
+  className = '',
+}: FieldContainerPortalProps) {
+  const coords = useFieldPageCoords(field);
+
+  return createPortal(
+    <div
+      className={cn('absolute', className)}
+      style={{
+        top: `${coords.y}px`,
+        left: `${coords.x}px`,
+        height: `${coords.height}px`,
+        width: `${coords.width}px`,
+      }}
+    >
+      {children}
+    </div>,
+    document.body,
+  );
+}
+
+export function FieldRootContainer({ field, children }: FieldContainerPortalProps) {
+  const [isValidating, setIsValidating] = useState(false);
+
+  const ref = React.useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!ref.current) {
+      return;
+    }
+
+    const observer = new MutationObserver((_mutations) => {
+      if (ref.current) {
+        setIsValidating(ref.current.getAttribute('data-validate') === 'true');
+      }
+    });
+
+    observer.observe(ref.current, {
+      attributes: true,
+    });
+
+    return () => {
+      observer.disconnect();
+    };
+  }, []);
+
+  return (
+    <FieldContainerPortal field={field}>
+      <Card
+        id={`field-${field.id}`}
+        className={cn(
+          'field-card-container bg-background relative z-20 h-full w-full transition-all',
+          {
+            'border-orange-300 ring-1 ring-orange-300': !field.inserted && isValidating,
+          },
+        )}
+        ref={ref}
+        data-inserted={field.inserted ? 'true' : 'false'}
+      >
+        <CardContent className="text-foreground hover:shadow-primary-foreground group flex h-full w-full flex-col items-center justify-center p-2">
+          {children}
+        </CardContent>
+      </Card>
+    </FieldContainerPortal>
+  );
+}