chore: add custom hook story

paypal · Apr 26, 2024 · bf37f04 · bf37f04
1 parent 6c942c7
commit bf37f04
Showing 1 changed file with 52 additions and 30 deletions.
diff --git a/src/stories/payPalCardFields/usePayPalCardFields.stories.tsx b/src/stories/payPalCardFields/usePayPalCardFields.stories.tsx
@@ -15,12 +15,7 @@ import {
     CREATE_ORDER_URL,
     CAPTURE_ORDER_URL,
 } from "../utils";
-import {
-    COMPONENT_PROPS_CATEGORY,
-    COMPONENT_TYPES,
-    ORDER_ID,
-    ERROR,
-} from "../constants";
+import { COMPONENT_TYPES, ORDER_ID, ERROR } from "../constants";
 
 import type { FC, ReactElement } from "react";
 import type {
@@ -44,6 +39,10 @@ const CREATE_ORDER = "createOrder";
 const SUBMIT_FORM = "submitForm";
 const CAPTURE_ORDER = "captureOrder";
 
+const description = `
+The \`usePayPalCardFields\` custom hook provides access to the state managed by \`<PayPalCardFieldsProvider />\` 
+`;
+
 /**
  * Functional component to submit the hosted fields form
  */
@@ -88,47 +87,70 @@ const SubmitPayment: React.FC<{
 };
 
 export default {
-    title: "PayPal/PayPalCardFields/Form",
-    component: PayPalCardFieldsForm,
+    title: "PayPal/PayPalCardFields/Custom Hooks",
+    // component: usePayPalCardFields,
     parameters: {
         controls: { expanded: true, sort: "requiredFirst" },
         docs: {
             source: { language: "tsx" },
+            description: {
+                component: description,
+            },
         },
     },
     argTypes: {
-        className: {
+        cardFieldsForm: {
             control: false,
-            table: { category: "Props", type: { summary: "string?" } },
-            description:
-                "Classes applied to the form container, not the individual fields.",
-            defaultValue: {
-                summary: "undefined",
+            table: {
+                category: "State",
+                type: { summary: "PayPalCardFieldsComponent" },
             },
-        },
-        style: {
             description:
-                "Custom CSS properties to customize each individual card field",
-            control: { type: "object" },
-            ...{
-                ...COMPONENT_PROPS_CATEGORY,
-                type: { summary: "CSSProperties" },
-            },
+                "Refers to the CardFields instance generated by the &lt;PayPalCardFieldsProvider /&gt;.",
         },
-        inputEvents: {
+        fields: {
             control: false,
-            table: { category: "Props", type: { summary: "InputEvents?" } },
+            table: {
+                category: "State",
+                type: {
+                    summary:
+                        "Record<FieldComponentName, PayPalCardFieldsIndividualField>",
+                },
+            },
             description:
-                "An object containing callbacks that will be applied to each input field.",
+                "An object containing the reference for each field rendered.",
+        },
+        FieldComponentName: {
+            control: false,
+            type: { required: false },
+            description: `<code>"CVVField" | "ExpiryField" | "NumberField" | "NameField"</code>
+            `,
+            table: { category: COMPONENT_TYPES },
+        },
+        PayPalCardFieldsIndividualField: {
+            control: false,
+            type: { required: false },
+            description: `<code>{<br>
+                <b class="code-json">render</b>: (container: string | HTMLElement) => Promise&lt;void&gt; <br>
+                <b class="code-json">addClass</b>: (className: string) => Promise&lt;void&gt; <br>
+                <b class="code-json">clear</b>: () => void; <br>
+                <b class="code-json">focus</b>: () => void; <br>
+                <b class="code-json">removeAtrribute</b>: (name: "aria-invalid" | "aria-required" | "disabled" | "placeholder") => Promise&lt;void&gt; <br>
+                <b class="code-json">removeClass</b>: (className: string) => Promise&lt;void&gt; <br>
+                <b class="code-json">setAttribute</b>: (name: string, value: string) => Promise&lt;void&gt; <br>
+                <b class="code-json">setMessage</b>: (message: string) => void <br>
+                <b class="code-json">close</b>: () => Promise&lt;void&gt; <br>
+            }</code>
+            `,
+            table: { category: COMPONENT_TYPES },
         },
-        InputEvents: {
+        PayPalCardFieldsComponent: {
             control: false,
             type: { required: false },
             description: `<code>{<br>
-                <b class="code-json">onChange</b>: (data: <b>PayPalCardFieldsStateObject</b>) => <b>void</b> <br>
-                <b class="code-json">onBlur</b>: (data: <b>PayPalCardFieldsStateObject</b>) => <b>void</b> <br>
-                <b class="code-json">onFocus</b>: (data: <b>PayPalCardFieldsStateObject</b>) => <b>void</b> <br>
-                <b class="code-json">onInputSubmitRequest</b>: (data: <b>PayPalCardFieldsStateObject</b>) => <b>void</b> <br>
+                <b class="code-json">getState</b>: () => Promise&lt;PayPalCardFieldsStateObject&gt; <br>
+                <b class="code-json">isEligible</b>: () => boolean <br>
+                <b class="code-json">submit</b>: () => Promise&lt;void&gt; <br>
             }</code>
             `,
             table: { category: COMPONENT_TYPES },