@kanda-libs/ks-component-ts 0.2.256 → 0.2.257

package/src/hooks/useMultiStep/constants.ts

@@ -0,0 +1 @@
+export const LOCAL_STORAGE_KEY_PREFIX = "multi-step-form";

package/src/hooks/useMultiStep/helpers.ts

@@ -0,0 +1,27 @@
+import type { MultiStepRouterState } from "./types";
+import { LOCAL_STORAGE_KEY_PREFIX } from "./constants";
+import type { StringIndexedObject } from "~/types";
+
+export const getLocalStorageKey = (name: string) =>
+  [LOCAL_STORAGE_KEY_PREFIX, name].join("-");
+
+export const getInitalData = <T extends StringIndexedObject>(
+  name: string,
+  state: MultiStepRouterState<T>
+) => {
+  const localStorageKey = getLocalStorageKey(name);
+  const localStorageData = localStorage.getItem(localStorageKey);
+  const localStorageDataParsed = localStorageData
+    ? JSON.parse(localStorageData)
+    : {};
+
+  if (localStorageDataParsed) {
+    return localStorageDataParsed as Partial<T>;
+  }
+
+  if (state) {
+    return state.data as Partial<T>;
+  }
+
+  return {} as Partial<T>;
+};

package/src/hooks/useMultiStep/index.tsx

@@ -0,0 +1,119 @@
+import { useCallback, useEffect, useState } from "react";
+import { DeepPartial, useForm, useWatch } from "react-hook-form";
+import { useHistory, useLocation } from "react-router-dom";
+import type { StringIndexedObject } from "~/types";
+import { getInitalData, getLocalStorageKey } from "./helpers";
+import type { MultiStepRouterState } from "./types";
+
+export interface MultiStepHook<T extends StringIndexedObject> {
+  data: T;
+  form: ReturnType<typeof useForm<Partial<T>>>;
+  onNextPage: (data: T) => void;
+  onSubmit: (data: T) => void;
+  formWrapperProps: {
+    name: string;
+    page: keyof T;
+    form: ReturnType<typeof useForm<Partial<T>>>;
+    onSubmit: (data: StringIndexedObject) => void;
+  };
+  handleFormSubmit: (data: StringIndexedObject) => void;
+  isLoading: boolean;
+  isSubmitting: boolean;
+}
+
+export default function useMultiStep<T extends StringIndexedObject>(
+  name: string,
+  currentPage: keyof T,
+  handleSubmit: (data: T, cleanup: () => void) => void,
+  urls: Record<keyof T, string>,
+  isLoading = false,
+  isSubmitting = false
+): MultiStepHook<T> {
+  const localStorageKey = getLocalStorageKey(name);
+  const pages = Object.keys(urls);
+  const currentPageIndex = pages.findIndex((page) => page === currentPage);
+
+  const { push } = useHistory();
+  const { state } = useLocation<MultiStepRouterState<T>>();
+
+  const [data] = useState<Partial<T>>(getInitalData<T>(name, state));
+
+  const form = useForm<Partial<T>>({
+    defaultValues: data as DeepPartial<Partial<T>>,
+  });
+
+  const values = useWatch({
+    control: form.control,
+  });
+
+  useEffect(() => {
+    // Save the data to local storage on change
+    if (values) {
+      localStorage.setItem(localStorageKey, JSON.stringify(values));
+    }
+  }, [values, localStorageKey]);
+
+  const onNextPage = useCallback(
+    (currentData: T) => {
+      const nextPage = urls[pages[currentPageIndex + 1]];
+
+      const formattedData = {
+        ...data,
+        ...currentData,
+      };
+
+      localStorage.setItem(localStorageKey, JSON.stringify(formattedData));
+
+      push(nextPage, {
+        page: currentPage,
+        data: formattedData,
+      });
+    },
+    [currentPage, data, currentPageIndex, localStorageKey, push, urls, pages]
+  );
+
+  const removeItem = useCallback(
+    () => localStorage.removeItem(localStorageKey),
+    [localStorageKey]
+  );
+
+  const onSubmit = useCallback(
+    (finalData: T) => {
+      handleSubmit(finalData, removeItem);
+    },
+    [handleSubmit, removeItem]
+  );
+
+  const handleFormSubmit = useCallback(
+    (currentData: StringIndexedObject) => {
+      const formattedData = currentData as T;
+      const lastItem = currentPageIndex === pages.length - 1;
+
+      if (lastItem) {
+        onSubmit(formattedData);
+        return;
+      }
+
+      onNextPage(formattedData);
+    },
+    [currentPageIndex, pages, onSubmit, onNextPage]
+  );
+
+  const formWrapperProps = {
+    name,
+    form,
+    page: currentPage,
+    onSubmit: handleFormSubmit,
+  };
+
+  return {
+    data: data as T,
+    form,
+    onNextPage,
+    onSubmit,
+    formWrapperProps,
+    handleFormSubmit,
+    isLoading,
+    isSubmitting,
+  };
+}

package/src/hooks/useMultiStep/types.d.ts

@@ -0,0 +1,8 @@
+export interface MultiStepRouterState<T extends StringIndexedObject> {
+  page: keyof T;
+  data: T[keyof T];
+}
+
+export interface FormWrapperProps {
+  children: JSX.Element | JSX.Element[];
+}

package/src/index.ts

@@ -17,6 +17,7 @@ export { makeIsAllowed } from "./field/helpers";
 export { default as Label } from "./field/components/Label";
 export { default as Error } from "./field/components/Error";
 
+export { default as useMultiStep } from "./hooks/useMultiStep";
 export { default as useDownloadPdf } from "./hooks/useDownloadPdf";
 export { default as useDownloadDocument } from "./hooks/useDownloadDocument";
 

package/src/styles/library.css

@@ -797,6 +797,12 @@ input[type="number"]::-webkit-inner-spin-button,
   line-height: 24px;
 }
 
+.text-16-20-em {
+  font-weight: 600;
+  font-size: 16px;
+  line-height: 20px;
+}
+
 .text-16-18 {
   font-weight: 400;
   font-size: 16px;
@@ -827,6 +833,13 @@ input[type="number"]::-webkit-inner-spin-button,
   line-height: 18px;
 }
 
+.text-10-17-em-up {
+  font-weight: 600;
+  font-size: 10px;
+  line-height: 17px;
+  text-transform: uppercase;
+}
+
 .text-10-14-em {
   font-weight: 600;
   font-size: 10px;
@@ -1163,14 +1176,22 @@ input[type="number"]::-webkit-inner-spin-button,
   margin-bottom: 12px;
 }
 
-.mt-6 {
-  margin-top: 24px;
-}
-
 .mb-6 {
   margin-bottom: 24px;
 }
 
+.mr-4 {
+  margin-right: 16px;
+}
+
+.ml-6 {
+  margin-left: 24px;
+}
+
+.mt-6 {
+  margin-top: 24px;
+}
+
 .mt-2 {
   margin-top: 8px;
 }
@@ -1219,10 +1240,6 @@ input[type="number"]::-webkit-inner-spin-button,
   margin-top: -12px;
 }
 
-.mr-4 {
-  margin-right: 16px;
-}
-
 .-mt-1 {
   margin-top: -4px;
 }
@@ -1447,6 +1464,10 @@ input[type="number"]::-webkit-inner-spin-button,
   display: none;
 }
 
+.h-full {
+  height: 100%;
+}
+
 .h-screen {
   height: 100vh;
 }
@@ -1474,10 +1495,6 @@ input[type="number"]::-webkit-inner-spin-button,
   height: 40px;
 }
 
-.h-full {
-  height: 100%;
-}
-
 .h-table {
   height: 696px;
 }
@@ -1590,6 +1607,10 @@ input[type="number"]::-webkit-inner-spin-button,
   max-height: 256px;
 }
 
+.min-h-30 {
+  min-height: 120px;
+}
+
 .min-h-20 {
   min-height: 80px;
 }
@@ -1602,14 +1623,14 @@ input[type="number"]::-webkit-inner-spin-button,
   min-height: 100%;
 }
 
-.w-screen {
-  width: 100vw;
-}
-
 .w-full {
   width: 100%;
 }
 
+.w-screen {
+  width: 100vw;
+}
+
 .w-2\/6 {
   width: 33.333333%;
 }
@@ -1811,6 +1832,10 @@ input[type="number"]::-webkit-inner-spin-button,
   flex-shrink: 1;
 }
 
+.flex-grow {
+  flex-grow: 1;
+}
+
 .basis-1\/3 {
   flex-basis: 33.333333%;
 }
@@ -1995,6 +2020,10 @@ input[type="number"]::-webkit-inner-spin-button,
   align-items: center;
 }
 
+.items-stretch {
+  align-items: stretch;
+}
+
 .justify-start {
   justify-content: flex-start;
 }
@@ -2015,6 +2044,15 @@ input[type="number"]::-webkit-inner-spin-button,
   justify-items: center;
 }
 
+.gap-x-1 {
+  -moz-column-gap: 4px;
+       column-gap: 4px;
+}
+
+.gap-y-1 {
+  row-gap: 4px;
+}
+
 .gap-x-2 {
   -moz-column-gap: 8px;
        column-gap: 8px;
@@ -2064,6 +2102,10 @@ input[type="number"]::-webkit-inner-spin-button,
   word-break: break-all;
 }
 
+.rounded-xl {
+  border-radius: 0.75rem;
+}
+
 .rounded-3xl {
   border-radius: 1.5rem;
 }
@@ -2096,10 +2138,6 @@ input[type="number"]::-webkit-inner-spin-button,
   border-radius: 0.25rem !important;
 }
 
-.rounded-xl {
-  border-radius: 0.75rem;
-}
-
 .rounded-b-xl {
   border-bottom-right-radius: 0.75rem;
   border-bottom-left-radius: 0.75rem;
@@ -2128,14 +2166,14 @@ input[type="number"]::-webkit-inner-spin-button,
   border-bottom-left-radius: 0.5rem;
 }
 
-.border-2 {
-  border-width: 2px;
-}
-
 .border {
   border-width: 1px;
 }
 
+.border-2 {
+  border-width: 2px;
+}
+
 .\!border-0 {
   border-width: 0px !important;
 }
@@ -2176,6 +2214,11 @@ input[type="number"]::-webkit-inner-spin-button,
   border-style: dashed;
 }
 
+.border-neutral-300 {
+  --tw-border-opacity: 1;
+  border-color: rgb(224 231 240 / var(--tw-border-opacity));
+}
+
 .border-turquoise-300 {
   --tw-border-opacity: 1;
   border-color: rgb(39 222 191 / var(--tw-border-opacity));
@@ -2190,11 +2233,6 @@ input[type="number"]::-webkit-inner-spin-button,
   border-color: rgb(233 63 63 / var(--tw-border-opacity));
 }
 
-.border-neutral-300 {
-  --tw-border-opacity: 1;
-  border-color: rgb(224 231 240 / var(--tw-border-opacity));
-}
-
 .border-neutral-200 {
   --tw-border-opacity: 1;
   border-color: rgb(237 241 247 / var(--tw-border-opacity));
@@ -2245,6 +2283,11 @@ input[type="number"]::-webkit-inner-spin-button,
   border-color: rgb(229 245 255 / var(--tw-border-opacity));
 }
 
+.bg-neutral-100 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(247 249 252 / var(--tw-bg-opacity));
+}
+
 .bg-turquoise-200 {
   --tw-bg-opacity: 1;
   background-color: rgb(193 244 233 / var(--tw-bg-opacity));
@@ -2255,11 +2298,6 @@ input[type="number"]::-webkit-inner-spin-button,
   background-color: rgb(39 222 191 / var(--tw-bg-opacity));
 }
 
-.bg-neutral-100 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(247 249 252 / var(--tw-bg-opacity));
-}
-
 .bg-neutral-000 {
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
@@ -2438,6 +2476,10 @@ input[type="number"]::-webkit-inner-spin-button,
      object-fit: contain;
 }
 
+.p-4 {
+  padding: 16px;
+}
+
 .p-2 {
   padding: 8px;
 }
@@ -2450,10 +2492,6 @@ input[type="number"]::-webkit-inner-spin-button,
   padding: 12px;
 }
 
-.p-4 {
-  padding: 16px;
-}
-
 .p-1\.5 {
   padding: 6px;
 }
@@ -2470,6 +2508,11 @@ input[type="number"]::-webkit-inner-spin-button,
   padding: 32px;
 }
 
+.py-4 {
+  padding-top: 16px;
+  padding-bottom: 16px;
+}
+
 .px-4 {
   padding-left: 16px;
   padding-right: 16px;
@@ -2500,11 +2543,6 @@ input[type="number"]::-webkit-inner-spin-button,
   padding-bottom: 4px;
 }
 
-.py-4 {
-  padding-top: 16px;
-  padding-bottom: 16px;
-}
-
 .px-3 {
   padding-left: 12px;
   padding-right: 12px;
@@ -2590,6 +2628,14 @@ input[type="number"]::-webkit-inner-spin-button,
   padding-bottom: 20px;
 }
 
+.pr-4 {
+  padding-right: 16px;
+}
+
+.pb-2 {
+  padding-bottom: 8px;
+}
+
 .pt-1 {
   padding-top: 4px;
 }
@@ -2602,10 +2648,6 @@ input[type="number"]::-webkit-inner-spin-button,
   padding-top: 0;
 }
 
-.pr-4 {
-  padding-right: 16px;
-}
-
 .\!pr-7 {
   padding-right: 28px !important;
 }
@@ -2735,29 +2777,29 @@ input[type="number"]::-webkit-inner-spin-button,
   color: rgb(156 173 196 / var(--tw-text-opacity));
 }
 
-.text-neutral-800 {
+.text-neutral-700 {
   --tw-text-opacity: 1;
-  color: rgb(45 61 83 / var(--tw-text-opacity));
+  color: rgb(71 90 118 / var(--tw-text-opacity));
 }
 
-.text-neutral-900 {
+.text-neutral-600 {
   --tw-text-opacity: 1;
-  color: rgb(13 27 46 / var(--tw-text-opacity));
+  color: rgb(108 129 157 / var(--tw-text-opacity));
 }
 
-.text-red-200 {
+.text-neutral-800 {
   --tw-text-opacity: 1;
-  color: rgb(233 63 63 / var(--tw-text-opacity));
+  color: rgb(45 61 83 / var(--tw-text-opacity));
 }
 
-.text-neutral-600 {
+.text-neutral-900 {
   --tw-text-opacity: 1;
-  color: rgb(108 129 157 / var(--tw-text-opacity));
+  color: rgb(13 27 46 / var(--tw-text-opacity));
 }
 
-.text-neutral-700 {
+.text-red-200 {
   --tw-text-opacity: 1;
-  color: rgb(71 90 118 / var(--tw-text-opacity));
+  color: rgb(233 63 63 / var(--tw-text-opacity));
 }
 
 .text-neutral-200 {
@@ -4324,6 +4366,10 @@ input[type="checkbox"][disabled]:checked ~ .label-checked-disabled\:bg-neutral-3
     width: auto;
   }
 
+  .md\:min-w-96 {
+    min-width: 384px;
+  }
+
   .md\:min-w-20 {
     min-width: 80px;
   }
@@ -4332,6 +4378,10 @@ input[type="checkbox"][disabled]:checked ~ .label-checked-disabled\:bg-neutral-3
     flex-direction: row;
   }
 
+  .md\:border-r {
+    border-right-width: 1px;
+  }
+
   .md\:py-1\.5 {
     padding-top: 6px;
     padding-bottom: 6px;
@@ -4342,6 +4392,10 @@ input[type="checkbox"][disabled]:checked ~ .label-checked-disabled\:bg-neutral-3
     padding-bottom: 4px;
   }
 
+  .md\:pb-0 {
+    padding-bottom: 0;
+  }
+
   .md\:pt-1 {
     padding-top: 4px;
   }