Apply prettier config to all files

packages/ui/components/breadcrumb/breadcrumb.tsx

@@ -1,23 +1,15 @@
 import React from "react";
-import { ChevronLeftIcon, ChevronRightIcon } from "@heroicons/react/20/solid";
 import Link from "next/link";
+import { ChevronLeftIcon, ChevronRightIcon } from "@heroicons/react/20/solid";
 
 export function Breadcrumb(props: any) {
   return (
     <>
       <nav className="sm:hidden" aria-label="Back">
         <Link
-          href={
-            props.items.length > 1
-              ? props.items[props.items.length - 2].href
-              : props.items[0].href
-          }
-          className="flex items-center text-sm font-medium text-gray-500 hover:text-gray-700"
-        >
-          <ChevronLeftIcon
-            className="-ml-1 mr-1 h-5 w-5 flex-shrink-0 text-gray-400"
-            aria-hidden="true"
-          />
+          href={props.items.length > 1 ? props.items[props.items.length - 2].href : props.items[0].href}
+          className="flex items-center text-sm font-medium text-gray-500 hover:text-gray-700">
+          <ChevronLeftIcon className="-ml-1 mr-1 h-5 w-5 flex-shrink-0 text-gray-400" aria-hidden="true" />
           Back
         </Link>
       </nav>
@@ -26,19 +18,13 @@ export function Breadcrumb(props: any) {
           {props?.items.map((item: any, index: number) => (
             <React.Fragment key={item.href}>
               {index > 0 ? (
-                <ChevronRightIcon
-                  className="h-5 w-5 flex-shrink-0 text-gray-400"
-                  aria-hidden="true"
-                />
+                <ChevronRightIcon className="h-5 w-5 flex-shrink-0 text-gray-400" aria-hidden="true" />
               ) : (
                 ""
               )}
               <li>
                 <div className="flex">
-                  <Link
-                    href={item.href}
-                    className="text-sm font-medium text-gray-500 hover:text-gray-700"
-                  >
+                  <Link href={item.href} className="text-sm font-medium text-gray-500 hover:text-gray-700">
                     {item.title}
                   </Link>
                 </div>

packages/ui/components/button/Button.tsx

@@ -1,6 +1,6 @@
-import { classNames } from "@documenso/lib";
-import Link from "next/link";
 import React from "react";
+import Link from "next/link";
+import { classNames } from "@documenso/lib";
 
 export function Button(props: any) {
   const isLink = typeof props.href !== "undefined" && !props.disabled;
@@ -8,8 +8,7 @@ export function Button(props: any) {
   const baseStyles =
     "inline-flex items-center justify-center min-w-[80px] rounded-md border border-transparent px-4 py-2 text-sm font-medium shadow-sm disabled:bg-gray-300";
   const primaryStyles = "text-white bg-neon hover:bg-neon-dark";
-  const secondaryStyles =
-    "border-gray-300 bg-white text-gray-700 hover:bg-gray-50";
+  const secondaryStyles = "border-gray-300 bg-white text-gray-700 hover:bg-gray-50";
 
   return isLink ? (
     <Link
@@ -20,13 +19,9 @@ export function Button(props: any) {
         color === "primary" ? primaryStyles : secondaryStyles,
         props.className
       )}
-      hidden={props.hidden}
-    >
+      hidden={props.hidden}>
       {props.icon ? (
-        <props.icon
-          className="inline h-5 mr-1 text-inherit"
-          aria-hidden="true"
-        ></props.icon>
+        <props.icon className="mr-1 inline h-5 text-inherit" aria-hidden="true"></props.icon>
       ) : (
         ""
       )}
@@ -43,13 +38,9 @@ export function Button(props: any) {
       )}
       onClick={props.onClick}
       disabled={props.disabled || props.loading}
-      hidden={props.hidden}
-    >
+      hidden={props.hidden}>
       {props.icon ? (
-        <props.icon
-          className="inline h-5 mr-1 text-inherit"
-          aria-hidden="true"
-        ></props.icon>
+        <props.icon className="mr-1 inline h-5 text-inherit" aria-hidden="true"></props.icon>
       ) : (
         ""
       )}

packages/ui/components/button/IconButton.tsx

@@ -1,6 +1,6 @@
-import { classNames } from "@documenso/lib";
-import Link from "next/link";
 import React from "react";
+import Link from "next/link";
+import { classNames } from "@documenso/lib";
 
 export function IconButton(props: any) {
   const isLink = typeof props.href !== "undefined";
@@ -18,13 +18,9 @@ export function IconButton(props: any) {
         color === "primary" ? primaryStyles : secondaryStyles,
         props.className
       )}
-      hidden={props.hidden}
-    >
+      hidden={props.hidden}>
       {props.icon ? (
-        <props.icon
-          className="inline text-inherit h-6 mr-1"
-          aria-hidden="true"
-        ></props.icon>
+        <props.icon className="mr-1 inline h-6 text-inherit" aria-hidden="true"></props.icon>
       ) : (
         ""
       )}
@@ -40,13 +36,9 @@ export function IconButton(props: any) {
       )}
       onClick={props.onClick}
       disabled={props.disabled}
-      hidden={props.hidden}
-    >
+      hidden={props.hidden}>
       {props.icon ? (
-        <props.icon
-          className="inline text-inherit h-6 mr-1"
-          aria-hidden="true"
-        ></props.icon>
+        <props.icon className="mr-1 inline h-6 text-inherit" aria-hidden="true"></props.icon>
       ) : (
         ""
       )}

packages/ui/components/dialog/Dialog.tsx

@@ -1,8 +1,8 @@
 import React from "react";
-import { Transition, Dialog as DialogComponent } from "@headlessui/react";
 import { Fragment } from "react";
-import { Button } from "@documenso/ui";
 import { sendSigningRequests } from "@documenso/lib/api";
+import { Button } from "@documenso/ui";
+import { Dialog as DialogComponent, Transition } from "@headlessui/react";
 import { Document as PrismaDocument } from "@prisma/client";
 
 type FormValue = {
@@ -21,18 +21,8 @@ type DialogProps = {
   icon: React.ReactNode;
 };
 
-export function Dialog({
-  title,
-  open,
-  setOpen,
-  document,
-  formValues,
-  setLoading,
-  icon,
-}: DialogProps) {
-  const unsentEmailsLength = formValues.filter(
-    (s: any) => s.email && s.sendStatus != "SENT"
-  ).length;
+export function Dialog({ title, open, setOpen, document, formValues, setLoading, icon }: DialogProps) {
+  const unsentEmailsLength = formValues.filter((s: any) => s.email && s.sendStatus != "SENT").length;
 
   return (
     <Transition.Root show={open} as={Fragment}>
@@ -44,13 +34,12 @@ export function Dialog({
           enterTo="opacity-100"
           leave="ease-in duration-200"
           leaveFrom="opacity-100"
-          leaveTo="opacity-0"
-        >
-          <div className="fixed inset-0 transition-opacity bg-gray-500 bg-opacity-75" />
+          leaveTo="opacity-0">
+          <div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
         </Transition.Child>
 
         <div className="fixed inset-0 z-10 overflow-y-auto">
-          <div className="flex items-end justify-center min-h-full p-4 text-center sm:items-center sm:p-0">
+          <div className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
             <Transition.Child
               as={Fragment}
               enter="ease-out duration-300"
@@ -58,18 +47,14 @@ export function Dialog({
               enterTo="opacity-100 translate-y-0 sm:scale-100"
               leave="ease-in duration-200"
               leaveFrom="opacity-100 translate-y-0 sm:scale-100"
-              leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-            >
-              <DialogComponent.Panel className="relative px-4 pt-5 pb-4 overflow-hidden text-left transition-all transform bg-white rounded-lg shadow-xl sm:my-8 sm:w-full sm:max-w-lg sm:p-6">
+              leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95">
+              <DialogComponent.Panel className="relative transform overflow-hidden rounded-lg bg-white px-4 pt-5 pb-4 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg sm:p-6">
                 <div>
-                  <div className="flex items-center justify-center w-12 h-12 mx-auto bg-green-100 rounded-full">
+                  <div className="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-green-100">
                     {icon}
                   </div>
                   <div className="mt-3 text-center sm:mt-5">
-                    <DialogComponent.Title
-                      as="h3"
-                      className="text-lg font-medium leading-6 text-gray-900"
-                    >
+                    <DialogComponent.Title as="h3" className="text-lg font-medium leading-6 text-gray-900">
                       {title}
                     </DialogComponent.Title>
                     <div className="mt-2">
@@ -79,7 +64,7 @@ export function Dialog({
                     </div>
                   </div>
                 </div>
-                <div className="flex justify-end gap-3 mt-5 sm:mt-6 sm:grid sm:grid-flow-row-dense sm:grid-cols-2 sm:flex-none ">
+                <div className="mt-5 flex justify-end gap-3 sm:mt-6 sm:grid sm:flex-none sm:grid-flow-row-dense sm:grid-cols-2 ">
                   <Button color="secondary" onClick={() => setOpen(false)}>
                     Cancel
                   </Button>
@@ -90,8 +75,7 @@ export function Dialog({
                       sendSigningRequests(document).finally(() => {
                         setLoading(false);
                       });
-                    }}
-                  >
+                    }}>
                     Send
                   </Button>
                 </div>

packages/ui/components/selectBox/SelectBox.tsx

@@ -1,7 +1,7 @@
+import React, { Fragment, useState } from "react";
 import { classNames } from "@documenso/lib";
 import { Listbox, Transition } from "@headlessui/react";
 import { CheckIcon, ChevronUpDownIcon } from "@heroicons/react/24/outline";
-import React, { Fragment, useState } from "react";
 
 export function SelectBox(props: any) {
   return (
@@ -10,21 +10,15 @@ export function SelectBox(props: any) {
         value={props.value}
         onChange={(e) => {
           props.onChange(e);
-        }}
-      >
+        }}>
         {({ open }) => (
           <>
-            <Listbox.Label className="block text-sm font-medium text-gray-700">
-              {props.label}
-            </Listbox.Label>
+            <Listbox.Label className="block text-sm font-medium text-gray-700">{props.label}</Listbox.Label>
             <div className="relative mt-1">
-              <Listbox.Button className="relative w-full cursor-default rounded-md border border-gray-300 bg-white py-2 pl-3 pr-10 text-left shadow-sm focus:border-neon focus:outline-none focus:ring-1 focus:ring-neon sm:text-sm">
+              <Listbox.Button className="focus:border-neon focus:ring-neon relative w-full cursor-default rounded-md border border-gray-300 bg-white py-2 pl-3 pr-10 text-left shadow-sm focus:outline-none focus:ring-1 sm:text-sm">
                 <span className="block truncate">{props?.value?.label}</span>
                 <span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
-                  <ChevronUpDownIcon
-                    className="h-5 w-5 text-gray-400"
-                    aria-hidden="true"
-                  />
+                  <ChevronUpDownIcon className="h-5 w-5 text-gray-400" aria-hidden="true" />
                 </span>
               </Listbox.Button>
 
@@ -33,28 +27,25 @@ export function SelectBox(props: any) {
                 as={Fragment}
                 leave="transition ease-in duration-100"
                 leaveFrom="opacity-100"
-                leaveTo="opacity-0"
-              >
+                leaveTo="opacity-0">
                 <Listbox.Options className="absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm">
                   {props.options.map((option: any) => (
                     <Listbox.Option
                       key={option.value}
                       className={({ active }) =>
                         classNames(
-                          active ? "text-white bg-neon" : "text-gray-900",
+                          active ? "bg-neon text-white" : "text-gray-900",
                           "relative cursor-default select-none py-2 pl-3 pr-9"
                         )
                       }
-                      value={option}
-                    >
+                      value={option}>
                       {({ selected, active }) => (
                         <>
                           <span
                             className={classNames(
                               selected ? "font-semibold" : "font-normal",
                               "block truncate"
-                            )}
-                          >
+                            )}>
                             {option.label}
                           </span>
 
@@ -63,12 +54,8 @@ export function SelectBox(props: any) {
                               className={classNames(
                                 active ? "text-white" : "text-neon",
                                 "absolute inset-y-0 right-0 flex items-center pr-4"
-                              )}
-                            >
-                              <CheckIcon
-                                className="h-5 w-5"
-                                aria-hidden="true"
-                              />
+                              )}>
+                              <CheckIcon className="h-5 w-5" aria-hidden="true" />
                             </span>
                           ) : null}
                         </>