[2024.08.11] Readme Update And 0.0.2 version release (#3)

* 🚧 Create funnel client * 🚧 Createstep api 변경 * 🚧 App router nested example * 🚧 Default step example add * 🚧 Readme update * 🔖 Release funnel 0.0.1 * 🔖 This binding bug fix 0.0.2 version release * 🔖 This binding bug fix 0.0.2 version release * 🚧 Readme update
XionWCFM · Aug 10, 2024 · 8a1c6e8 · 8a1c6e8
1 parent 01219c5
commit 8a1c6e8
Show file tree

Hide file tree

Showing 5 changed files with 149 additions and 8 deletions.
diff --git a/README.md b/README.md
@@ -2,7 +2,16 @@
 
 # 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 +138,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 +172,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 +226,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)

diff --git a/packages/funnel-app-router-adapter/package.json b/packages/funnel-app-router-adapter/package.json
@@ -1,8 +1,9 @@
 {
   "name": "@xionhub/funnel-app-router-adapter",
-  "version": "0.0.0",
-  "private": true,
+  "version": "0.0.2",
+  "private": false,
   "license": "MIT",
+  "main": "./dist/index.js",
   "exports": {
     ".": {
       "import": {
@@ -15,6 +16,7 @@
       }
     }
   },
+  "files": ["dist"],
   "scripts": {
     "build": "tsup"
   },

diff --git a/packages/funnel-client/package.json b/packages/funnel-client/package.json
@@ -1,8 +1,10 @@
 {
   "name": "@xionhub/funnel-client",
-  "version": "0.0.0",
-  "private": true,
+  "version": "0.0.2",
+  "private": false,
   "license": "MIT",
+  "main": "./dist/index.js",
+
   "exports": {
     ".": {
       "import": {
@@ -15,6 +17,8 @@
       }
     }
   },
+  "files": ["dist"],
+
   "scripts": {
     "build": "tsup"
   },

diff --git a/packages/funnel-client/src/external/funnel-client.ts b/packages/funnel-client/src/external/funnel-client.ts
@@ -15,6 +15,13 @@ export class FunnelClient<T extends NonEmptyArray<string>> {
   constructor(props: FunnelOptions<T>) {
     this.funnelId = props.funnelId;
     this.steps = props.steps;
+    this.createStep = this.createStep.bind(this);
+    this.getQueryString = this.getQueryString.bind(this);
+    this.createStepObject = this.createStepObject.bind(this);
+    this.deleteStep = this.deleteStep.bind(this);
+    this.stringifyStep = this.stringifyStep.bind(this);
+    this.parseQueryString = this.parseQueryString.bind(this);
+
   }
 
   createStep(step: T[number], options?: CreateStepOptionsType) {

diff --git a/packages/funnel-core/package.json b/packages/funnel-core/package.json
@@ -1,8 +1,9 @@
 {
   "name": "@xionhub/funnel-core",
-  "version": "0.0.0",
-  "private": true,
+  "version": "0.0.2",
+  "private": false,
   "license": "MIT",
+  "main": "./dist/index.js",
   "exports": {
     ".": {
       "import": {
@@ -15,6 +16,7 @@
       }
     }
   },
+  "files": ["dist"],
   "scripts": {
     "build": "tsup"
   },