From e2273dc267738db18006e282769be5cb716b2543 Mon Sep 17 00:00:00 2001
From: devgiljong <calf-love@naver.com>
Date: Sun, 11 Aug 2024 02:26:22 +0900
Subject: [PATCH] :construction: Readme update

---
 README.md | 129 +++++++++++++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 127 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index b37c2f6..40a8c2e 100644
--- a/README.md
+++ b/README.md
@@ -2,7 +2,15 @@
 
 # useFunnel
 
-Manage your funnels declaratively and explicitly.
+**Freedom From Details** : Instead of relying directly on the router, it provides instructions on where to route.
+
+**Flexible Customization** : We advocate funnel management via queryString, but you can also implement it another way via useCoreFunnel.
+
+**Nested funnel support** : Managing nested funnels is one of the biggest headaches. We offer a way to deal with this
+
+**Guard support** : Provides a way to block access by malicious users.
+
+**Separate declaration and use of funnels** : For flexible design, we separate the part that defines the funnel from the part that uses it.
 
 # Quick Start
 
@@ -129,6 +137,20 @@ declare const useCoreFunnel: <Steps extends NonEmptyArray<string>>(
 ];
 ```
 
+## funnelOptions
+
+```tsx
+type FunnelOptions<T extends NonEmptyArray<string>> = {
+  steps: T;
+  step?: T[number] | undefined;
+  funnelId: string;
+};
+```
+
+`funnelOptions` shares the same concept as queryOptions in tanstack query. Used to create a type-safe option object.
+
+`funnelId` is generally used as the key value of querystring.
+
 ## Guard
 
 ```tsx
@@ -149,6 +171,24 @@ interface GuardProps<T> {
 
 `fallback` is the fallback that will be displayed when the condition is Falsy.
 
+simple Example
+
+```tsx
+ <Funnel.Guard
+    condition={Math.random() > 0.5}
+    onRestrict=() => {
+      router.replace('/home')
+    }}
+  >
+    <FunnelItem
+      setStep={() => {
+        router.push(`/guard?${controller.createStep("c")}`);
+      }}
+      step="b"
+    />
+  </Funnel.Guard>
+```
+
 ## useFunnel For App Router
 
 ```tsx
@@ -185,11 +225,96 @@ createStep(step:string , options:{
     searchParams?: URLSearchParams;
     deleteQueryParams?: string[] | string;
     qsOptions?: QueryString.IStringifyBaseOptions;
-    })
+})
 ```
 
 For deleteQueryParams, enter the key value of queryParams you want to delete. qsOptions uses StringifyBaseOptions from the qs library.
 
+# Nested Funnel Example
+
+```tsx
+export const aFunnelOptions = () =>
+  funnelOptions({
+    funnelId: "sadkl",
+    steps: ["astart", "ado", "aend"] as const,
+  });
+
+export const bFunnelOptions = () =>
+  funnelOptions({
+    funnelId: "sadkl2",
+    steps: ["bstart", "bdo", "bend"] as const,
+  });
+
+export const NestedFunnel = () => {
+  const [AFunnel, aController] = useFunnel(aFunnelOptions());
+  const [BFunnel, bController] = useFunnel(bFunnelOptions());
+  const searchParams = useSearchParams();
+  const router = useRouter();
+
+  return (
+    <div className=" px-16 py-16">
+      <AFunnel>
+        <AFunnel.Step name={"astart"}>
+          <FunnelItem
+            setStep={() => {
+              router.push(`/nested?${aController.createStep("ado")}`);
+            }}
+            step={"astart"}
+          />
+        </AFunnel.Step>
+        <AFunnel.Step name={"ado"}>
+          <FunnelItem
+            setStep={() => {
+              router.push(
+                `/nested?${bController.createStep("bstart", { searchParams, deleteQueryParams: aController.funnelId })}`
+              );
+            }}
+            step={"ado"}
+          />
+        </AFunnel.Step>
+        <AFunnel.Step name={"aend"}>
+          <FunnelItem
+            setStep={() => {
+              router.push(`/nested?${aController.createStep("astart")}`);
+            }}
+            step={"aend"}
+          />
+        </AFunnel.Step>
+      </AFunnel>
+
+      <BFunnel>
+        <BFunnel.Step name={"bstart"}>
+          <FunnelItem
+            setStep={() => {
+              router.push(`/nested?${bController.createStep("bdo")}`);
+            }}
+            step={"bstart"}
+          />
+        </BFunnel.Step>
+        <BFunnel.Step name={"bdo"}>
+          <FunnelItem
+            setStep={() => {
+              router.push(`/nested?${bController.createStep("bend")}`);
+            }}
+            step={"bdo"}
+          />
+        </BFunnel.Step>
+        <BFunnel.Step name={"bend"}>
+          <FunnelItem
+            setStep={() => {
+              router.push(
+                `/nested?${aController.createStep("aend", { searchParams, deleteQueryParams: bController.funnelId })}`
+              );
+            }}
+            step={"bend"}
+          />
+        </BFunnel.Step>
+      </BFunnel>
+    </div>
+  );
+};
+```
+
 # Get More Example
 
 [App Router Example](https://github.com/XionWCFM/funnel/tree/main/apps/app-router-example)