From b4a890e1dcf5cf21f535cac24f22024bb6459694 Mon Sep 17 00:00:00 2001
From: Bennett <hello@vantezzen.io>
Date: Wed, 31 Jan 2024 12:58:21 +0100
Subject: [PATCH] Add information about AutoForm's goal

---
 README.md                                   |  8 ++++++++
 src/components/ui/auto-form/dependencies.ts |  4 ++--
 src/components/ui/tooltip.tsx               | 20 ++++++++++----------
 3 files changed, 20 insertions(+), 12 deletions(-)

diff --git a/README.md b/README.md
index ef08d27..e314743 100644
--- a/README.md
+++ b/README.md
@@ -6,6 +6,14 @@ A live demo can be found at <https://vantezzen.github.io/auto-form/>.
 
 ![AutoForm demo](./demo.png)
 
+## When to use AutoForm?
+
+AutoForm is mostly meant as a drop-in form builder for your internal and low-priority forms with existing zod schemas. For example, if you already have zod schemas for your API and want to create a simple admin panel to edit user profiles, simply pass the schema to AutoForm and you're done.
+
+As forms almost always grow more complex, AutoForm gives you options to customize how forms are rendered (e.g. using the `fieldConfig` options and dependency support) and gives you escape hatches to customize the form even further (e.g. rendering custom parents and adding custom field types).
+
+However, AutoForm does not aim to be a full-featured form builder. It does not aim to support every edge case in your zod schema or allow building complex, multi-page forms. If you need more customization, feel free to customize AutoForm's renderer in your project or use more powerful form builders like [Formik](https://formik.org/) - though those require more specialized configuration instead of simple drop-in support for your zod schema. For an example on how AutoForm can be extended for more powerful, YAML-based, multi-page forms, see [AutoForm YAML](https://github.com/roeyazroel/auto-form).
+
 ## Installation
 
 The component depends on the following components from shadcn/ui:
diff --git a/src/components/ui/auto-form/dependencies.ts b/src/components/ui/auto-form/dependencies.ts
index dbfbbd9..4d9cada 100644
--- a/src/components/ui/auto-form/dependencies.ts
+++ b/src/components/ui/auto-form/dependencies.ts
@@ -7,7 +7,7 @@ export default function resolveDependencies<
 >(
   dependencies: Dependency<SchemaType>[],
   currentFieldName: keyof SchemaType,
-  watch: UseFormWatch<FieldValues>
+  watch: UseFormWatch<FieldValues>,
 ) {
   let isDisabled = false;
   let isHidden = false;
@@ -17,7 +17,7 @@ export default function resolveDependencies<
   const currentFieldValue = watch(currentFieldName as string);
 
   const currentFieldDependencies = dependencies.filter(
-    (dependency) => dependency.targetField === currentFieldName
+    (dependency) => dependency.targetField === currentFieldName,
   );
   for (const dependency of currentFieldDependencies) {
     const watchedValue = watch(dependency.sourceField as string);
diff --git a/src/components/ui/tooltip.tsx b/src/components/ui/tooltip.tsx
index e121f0a..2dece61 100644
--- a/src/components/ui/tooltip.tsx
+++ b/src/components/ui/tooltip.tsx
@@ -1,13 +1,13 @@
-import * as React from "react"
-import * as TooltipPrimitive from "@radix-ui/react-tooltip"
+import * as React from "react";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
-const TooltipProvider = TooltipPrimitive.Provider
+const TooltipProvider = TooltipPrimitive.Provider;
 
-const Tooltip = TooltipPrimitive.Root
+const Tooltip = TooltipPrimitive.Root;
 
-const TooltipTrigger = TooltipPrimitive.Trigger
+const TooltipTrigger = TooltipPrimitive.Trigger;
 
 const TooltipContent = React.forwardRef<
   React.ElementRef<typeof TooltipPrimitive.Content>,
@@ -18,11 +18,11 @@ const TooltipContent = React.forwardRef<
     sideOffset={sideOffset}
     className={cn(
       "z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md 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",
-      className
+      className,
     )}
     {...props}
   />
-))
-TooltipContent.displayName = TooltipPrimitive.Content.displayName
+));
+TooltipContent.displayName = TooltipPrimitive.Content.displayName;
 
-export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };