@sikka/hawa 0.0.136 → 0.0.138

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sikka/hawa",
-  "version": "0.0.136",
+  "version": "0.0.138",
   "description": "UI Kit",
   "main": "lib/index.js",
   "module": "es/index.es.js",

package/src/blocks/AuthForms/SignInForm.tsx

@@ -22,7 +22,6 @@ type SignInFormTypes = {
     usernameLabel?: string
     usernamePlaceholder?: string
     usernameRequired?: string
-    usernameRequiredText?: string
     phoneRequiredText?: string
     passwordLabel?: string
     passwordPlaceholder?: string
@@ -77,8 +76,8 @@ export const SignInForm: React.FunctionComponent<SignInFormTypes> = (props) => {
                 label={props.texts.emailLabel}
                 helperText={errors.email?.message}
                 placeholder={props.texts.emailPlaceholder}
-                {...field}
                 value={field.value ?? ""}
+                onChange={field.onChange}
               />
             )}
             rules={{
@@ -94,19 +93,21 @@ export const SignInForm: React.FunctionComponent<SignInFormTypes> = (props) => {
           <Controller
             control={control}
             name="username"
-            render={({ field }) => (
-              <HawaTextField
-                width="full"
-                type="text"
-                label={props.texts.usernameLabel}
-                helperText={errors.username?.message}
-                placeholder={props.texts.usernamePlaceholder}
-                {...field}
-                value={field.value ?? ""}
-              />
-            )}
+            render={({ field }) => {
+              return (
+                <HawaTextField
+                  width="full"
+                  type="text"
+                  label={props.texts.usernameLabel}
+                  helperText={errors.username?.message}
+                  placeholder={props.texts.usernamePlaceholder}
+                  onChange={field.onChange}
+                  value={field.value ?? ""}
+                />
+              )
+            }}
             rules={{
-              required: props.texts.usernameRequiredText,
+              required: props.texts.usernameRequired,
             }}
           />
         ) : (
@@ -124,11 +125,10 @@ export const SignInForm: React.FunctionComponent<SignInFormTypes> = (props) => {
             <HawaTextField
               width="full"
               type="password"
-              defaultValue={field.value ?? ""}
               label={props.texts.passwordLabel}
               placeholder={props.texts.passwordPlaceholder}
               helperText={errors.password?.message}
-              {...field}
+              onChange={field.onChange}
               value={field.value ?? ""}
             />
           )}

package/src/blocks/AuthForms/SignUpForm.tsx

@@ -54,6 +54,7 @@ type SignUpFormTypes = {
   handleGoogleSignUp: () => void
   handleGithubSignUp: () => void
   handleTwitterSignUp: () => void
+  handleRouteToTOS: () => void
   showError: any
   errorTitle: any
   errorText: any
@@ -89,7 +90,7 @@ export const SignUpForm: React.FunctionComponent<SignUpFormTypes> = (props) => {
                   label={props.texts.fullNameLabel}
                   placeholder={props.texts.fullNamePlaceholder}
                   helperText={errors.fullName?.message}
-                  {...field}
+                  onChange={field.onChange}
                   value={field.value ?? ""}
                 />
               )}
@@ -108,7 +109,7 @@ export const SignUpForm: React.FunctionComponent<SignUpFormTypes> = (props) => {
                     label={props.texts.emailLabel}
                     helperText={errors.email?.message}
                     placeholder={props.texts.emailPlaceholder}
-                    {...field}
+                    onChange={field.onChange}
                     value={field.value ?? ""}
                   />
                 )}
@@ -132,7 +133,7 @@ export const SignUpForm: React.FunctionComponent<SignUpFormTypes> = (props) => {
                     label={props.texts.usernameLabel}
                     helperText={errors.username?.message}
                     placeholder={props.texts.usernamePlaceholder}
-                    {...field}
+                    onChange={field.onChange}
                     value={field.value ?? ""}
                   />
                 )}
@@ -148,11 +149,11 @@ export const SignUpForm: React.FunctionComponent<SignUpFormTypes> = (props) => {
                 <HawaTextField
                   width="full"
                   type="password"
-                  defaultValue={field.value ?? ""}
+                  // defaultValue={field.value ?? ""}
                   label={props.texts.passwordLabel}
                   placeholder={props.texts.passwordPlaceholder}
                   helperText={errors.password?.message}
-                  {...field}
+                  onChange={field.onChange}
                   value={field.value ?? ""}
                 />
               )}
@@ -165,11 +166,11 @@ export const SignUpForm: React.FunctionComponent<SignUpFormTypes> = (props) => {
                 <HawaTextField
                   width="full"
                   type="password"
-                  defaultValue={field.value ?? ""}
+                  // defaultValue={field.value ?? ""}
                   label={props.texts.confirmPasswordLabel}
                   placeholder={props.texts.confirmPasswordPlaceholder}
                   helperText={errors.confirm_password?.message}
-                  {...field}
+                  onChange={field.onChange}
                   value={field.value ?? ""}
                 />
               )}
@@ -187,8 +188,8 @@ export const SignUpForm: React.FunctionComponent<SignUpFormTypes> = (props) => {
                     label={"Ref Code"}
                     placeholder={props.texts.passwordPlaceholder}
                     helperText={errors.password?.message}
-                    {...field}
                     value={field.value ?? ""}
+                    onChange={field.onChange}
                   />
                 )}
               />
@@ -210,11 +211,9 @@ export const SignUpForm: React.FunctionComponent<SignUpFormTypes> = (props) => {
                         { value: "ad", label: "Advertisement" },
                         { value: "other", label: "Other" },
                       ]}
-                      onInputChange={(e: any, o: any) =>
-                        console.log("changing", e)
-                      }
-                      {...field}
-                      onChange={(e: any, o: any) => console.log("chooo", e)}
+                      onChange={(e: any) => {
+                        field.onChange(e.value)
+                      }}
                     />
                   )}
                 />
@@ -227,17 +226,20 @@ export const SignUpForm: React.FunctionComponent<SignUpFormTypes> = (props) => {
                   name="terms_accepted"
                   render={({ field }) => (
                     <HawaCheckbox
+                      id="terms_accepted"
                       helperText={errors.terms_accepted?.message}
-                      onChange={() => console.log("te")}
+                      onChange={field.onChange}
                       label={
                         <span>
                           {props.texts.iAcceptText}{" "}
-                          <a className="cursor-pointer text-blue-800">
+                          <a
+                            onClick={props.handleRouteToTOS}
+                            className="cursor-pointer text-blue-800"
+                          >
                             {props.texts.termsText}
                           </a>
                         </span>
                       }
-                      {...field}
                     />
                   )}
                   rules={{ required: props.texts.termsRequiredText }}
@@ -251,8 +253,9 @@ export const SignUpForm: React.FunctionComponent<SignUpFormTypes> = (props) => {
                   name="newsletter_accepted"
                   render={({ field }) => (
                     <HawaCheckbox
+                      id="newsletter_accepted"
                       label={props.texts.subscribeToNewsletter}
-                      {...field}
+                      onChange={field.onChange}
                     />
                   )}
                 />

package/src/blocks/Payment/CheckoutForm.tsx

@@ -238,20 +238,11 @@ export const CheckoutForm: React.FunctionComponent<CheckoutFormTypes> = (
                     fullWidth
                     native
                     label={props.texts?.countryLabel + " *"}
-                    // variant="standard"
                     helperText={errors.country?.message}
-                    // displayEmpty
-                    // disableUnderline
-                    // validators={["required"]}
                     options={countries}
                     getOptionLabel={(countries) => countries.country_label}
-                    // options={[
-                    //   { label: "Saudi Arabia", value: "saudi_arabia" },
-                    //   { label: "Saudi Arabia", value: "saudi_arabia" },
-                    //   { label: "Saudi Arabia", value: "saudi_arabia" },
-                    //   { label: "Saudi Arabia", value: "saudi_arabia" },
-                    // ]}
-                    {...field}
+                    // {...field}
+                    onChange={(e) => field.onChange(e.country_label)}
                     value={field.value ?? ""}
                   >
                     <option></option>

package/src/elements/HawaCheckbox.tsx

@@ -1,9 +1,10 @@
-import React, { ReactElement } from "react"
+import React from "react"
 
 type TCheckBoxTypes = {
   centered?: boolean
   label?: any
   helperText?: any
+  id: string
   onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void
 }
 
@@ -17,18 +18,23 @@ export const HawaCheckbox: React.FunctionComponent<TCheckBoxTypes> = (
           ? "flex h-full items-center justify-center"
           : "flex h-full items-start"
       }
+      // onClick={(e: any) => props.onChange(e)}
     >
       <input
         type="checkbox"
         value=""
         onChange={(e) => props.onChange(e)}
         className="mt-0.5 rounded border-gray-300 bg-gray-100 text-blue-600 focus:ring-2 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:ring-offset-gray-800 dark:focus:ring-blue-600"
-        {...props}
+        id={props.id}
+        aria-label={props.label}
       />
       {(props.label || props.helperText) && (
         <div className=" flex flex-col">
           {props.label && (
-            <label className="mx-2 text-sm font-medium text-gray-900 dark:text-gray-300">
+            <label
+              htmlFor={props.id}
+              className="mx-2 text-sm font-medium text-gray-900 dark:text-gray-300"
+            >
               {props.label}
             </label>
           )}

package/src/elements/HawaDrawer.tsx

@@ -1,5 +1,5 @@
 import React, { FC, ReactElement, ReactNode, useEffect, useState } from "react"
-import { FaDailymotion } from "react-icons/fa"
+import { FaChevronLeft, FaChevronRight } from "react-icons/fa"
 import clsx from "clsx"
 
 type TDrawerTypes = {
@@ -8,6 +8,9 @@ type TDrawerTypes = {
   position: any
   heading: any
   children?: ReactNode
+  drawerHeader?: any
+  drawerBody?: any
+  drawerFooter?: any
 }
 
 export const HawaDrawer: React.FunctionComponent<TDrawerTypes> = ({
@@ -19,53 +22,31 @@ export const HawaDrawer: React.FunctionComponent<TDrawerTypes> = ({
   ...props
 }) => {
   const leftDrawer =
-    "w-60 z-50 h-full absolute overflow-x-hidden top-0 left-0 border-r bg-white"
+    "w-60 z-50 h-full absolute overflow-x-clip top-0 left-0 border-r bg-white"
   const rightDrawer =
-    "w-60 z-50 h-full absolute overflow-x-hidden top-0 right-0 border-l bg-white"
-
-  const isFunction = (data: any): data is (...args: any[]) => any =>
-    typeof data === "function"
-  //   useEffect(() => {
-  //     setOpenDrawer(true);
-  //   }, [open]);
-
-  const childrenWithProps = React.Children.map(children, (child) => {
-    if (React.isValidElement(child) && isFunction(child.type)) {
-      switch (child.type.name) {
-        case "DrawerHeader":
-          return (
-            <DrawerHeader setOpen={setOpen} children={child.props.children} />
-          )
-
-        case "DrawerBody":
-          return <DrawerBody children={child.props.children} />
-
-        case "DrawerFooter":
-          return <DrawerFooter children={child.props.children} />
-      }
-      return React.cloneElement(child, {
-        // setOpen: setOpen,
-        // children: child.props.children,
-      })
-    }
-  })
-
-  // const drawerClass =
-  //   open && position == "left"
-  //     ? clsx("block", leftDrawer)
-  //     : open && position == "right"
-  //     ? clsx("block", rightDrawer)
-  //     : "hidden w-0 "
+    "w-60 z-50 h-full absolute overflow-x-clip top-0 right-0 border-l bg-white"
 
   return (
     <div
       className={clsx(
         position == "left" ? leftDrawer : rightDrawer,
-        "overflow-y-clip transition-all",
+        position == "left" ? "flex-row-reverse" : "flex-row",
+        "overflow-x-clip transition-all",
         open ? "w-60" : "w-0"
       )}
     >
-      {childrenWithProps}
+      {props.drawerHeader && (
+        <DrawerHeader direction={position} setOpen={setOpen}>
+          {props.drawerHeader}
+        </DrawerHeader>
+      )}
+
+      {props.drawerBody && (
+        <DrawerBody direction={position}>{props.drawerBody}</DrawerBody>
+      )}
+      {props.drawerFooter && (
+        <DrawerFooter direction={position}>{props.drawerFooter}</DrawerFooter>
+      )}
     </div>
   )
 }
@@ -73,11 +54,17 @@ export const HawaDrawer: React.FunctionComponent<TDrawerTypes> = ({
 type TDrawerHeader = {
   setOpen: any
   children: ReactElement
+  direction: any
 }
 
-export const DrawerHeader: FC<TDrawerHeader> = (props) => {
+const DrawerHeader: FC<TDrawerHeader> = (props) => {
   return (
-    <div className="  flex w-full flex-row items-center justify-between border-b py-4 px-1">
+    <div
+      className={clsx(
+        "flex w-full flex-row items-center justify-between border-b p-4",
+        props.direction == "left" ? "flex-row" : "flex-row-reverse"
+      )}
+    >
       {props.children}
       <div
         className="justify-self-end rounded border p-1 hover:cursor-pointer"
@@ -86,7 +73,11 @@ export const DrawerHeader: FC<TDrawerHeader> = (props) => {
           props.setOpen(false)
         }}
       >
-        <FaDailymotion size={20} strokeWidth={2} />
+        {props.direction == "left" ? (
+          <FaChevronLeft size={20} strokeWidth={2} />
+        ) : (
+          <FaChevronRight size={20} strokeWidth={2} />
+        )}
       </div>
     </div>
   )
@@ -94,50 +85,35 @@ export const DrawerHeader: FC<TDrawerHeader> = (props) => {
 
 type TDrawerBody = {
   children: ReactElement
+  direction: any
 }
-
-export const DrawerBody = (props: TDrawerBody) => {
-  return <div className="p-1">{props.children}</div>
-}
-
-type TDrawerFooter = {
-  children: ReactElement
-}
-
-export const DrawerFooter = (props: TDrawerFooter) => {
+const DrawerBody = (props: TDrawerBody) => {
   return (
-    <div className="absolute bottom-0 w-full border-t py-4 px-1">
+    <div
+      className={clsx(
+        "overflow-clip whitespace-nowrap p-4",
+        props.direction == "left" ? "flex-row" : "flex-row-reverse text-right"
+      )}
+    >
       {props.children}
     </div>
   )
 }
 
-type DrawerItemTypes = {
-  action: any
-  icon?: any
-  text: any
+type TDrawerFooter = {
+  children: ReactElement
+  direction: any
 }
-const HawaDrawerItem: React.FunctionComponent<DrawerItemTypes> = (props) => {
-  let withIcon =
-    "flex items-center p-2 text-base font-normal text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700"
-  let withoutIcon =
-    "flex items-center p-2 text-base font-normal text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700"
 
+const DrawerFooter = (props: TDrawerFooter) => {
   return (
-    <li onClick={props.action}>
-      <div className={props.icon ? withIcon : withoutIcon}>
-        {/* <svg
-          aria-hidden="true"
-          className="w-6 h-6 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
-          fill="currentColor"
-          viewBox="0 0 20 20"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path d="M2 10a8 8 0 018-8v8h8a8 8 0 11-16 0z"></path>
-          <path d="M12 2.252A8.014 8.014 0 0117.748 8H12V2.252z"></path>
-        </svg> */}
-        <span className="ml-3">{props.text}</span>
-      </div>
-    </li>
+    <div
+      className={clsx(
+        "absolute bottom-0 w-full whitespace-nowrap border-t p-4",
+        props.direction == "left" ? "flex-row" : "flex-row-reverse text-right"
+      )}
+    >
+      {props.children}
+    </div>
   )
 }

package/src/elements/HawaLogoButton.tsx

@@ -2,19 +2,17 @@ import React from "react"
 
 type LogoButtonTypes = {
   lang?: any
-  logo?: any
-  //   logo: PropTypes.oneOf([
-  //     "google",
-  //     "github",
-  //     "twitter",
-  //     "wallet",
-  //     "googlepay",
-  //     "applepay",
-  //     "stcpay",
-  //     "visa/master",
-  //     "paypal",
-  //     "mada",
-  //   ]),
+  logo?:
+    | "google"
+    | "github"
+    | "twitter"
+    | "wallet"
+    | "googlepay"
+    | "applepay"
+    | "stcpay"
+    | "visa/master"
+    | "paypal"
+    | "mada"
   onClick?: any
   buttonText?: any
 }
@@ -145,14 +143,13 @@ export const HawaLogoButton: React.FunctionComponent<LogoButtonTypes> = (
         </svg>
       )
       break
-
     default:
       break
   }
   return (
     <button
       style={{ direction: isArabic ? "rtl" : "ltr" }}
-      {...props}
+      onClick={props.onClick}
       className="my-2 flex h-11 w-full flex-row justify-center rounded-xl bg-white align-middle"
     >
       <div className="flex h-full flex-row items-center justify-end">

package/src/elements/HawaSelect.tsx

@@ -109,7 +109,8 @@ export const HawaSelect: React.FunctionComponent<SelectTypes> = (props) => {
           isMulti={props.isMulti}
           isSearchable={props.isSearchable}
           onChange={(newValue: any, action) =>
-            props.onChange(newValue.label, action)
+            // props.onChange(newValue.label, action)
+            props.onChange(newValue, action)
           }
           components={{
             Control,

package/src/elements/HawaTable.tsx

@@ -47,13 +47,14 @@ export const HawaTable: React.FunctionComponent<TableTypes> = ({
               {props.rows ? (
                 props.rows.map((singleRow: any, j: any) => (
                   <tr
-                    className="border-b bg-white dark:border-gray-700 dark:bg-gray-800"
                     key={j}
+                    className="border-b bg-white dark:border-gray-700 dark:bg-gray-800"
                   >
                     {singleRow.map((r: any, i: any) => {
                       if (i === 0) {
                         return (
                           <th
+                            key={i}
                             scope="row"
                             className={clsx(
                               sizeStyles[size],
@@ -64,7 +65,11 @@ export const HawaTable: React.FunctionComponent<TableTypes> = ({
                           </th>
                         )
                       } else {
-                        return <td className={clsx(sizeStyles[size])}>{r}</td>
+                        return (
+                          <td key={i} className={clsx(sizeStyles[size])}>
+                            {r}
+                          </td>
+                        )
                       }
                     })}
                     {props.actions && size !== "small" ? (
@@ -74,8 +79,8 @@ export const HawaTable: React.FunctionComponent<TableTypes> = ({
                         className="flex flex-row gap-1"
                         // variant={isArabic ? "borderedRight" : "borderedLeft"}
                       >
-                        {props.actions.map((act: any) => {
-                          return <TableActionButton action={act} />
+                        {props.actions.map((act: any, s: any) => {
+                          return <TableActionButton key={s} action={act} />
                         })}
                       </td>
                     ) : null}

package/src/elements/HawaTextField.tsx

@@ -16,6 +16,7 @@ type TextFieldTypes = {
   name?: any
   inputProps?: any
   onChange?: any
+  ref?: any
 }
 
 export const HawaTextField: React.FunctionComponent<TextFieldTypes> = ({
@@ -37,6 +38,7 @@ export const HawaTextField: React.FunctionComponent<TextFieldTypes> = ({
   let defaultStyle = "flex h-fit max-h-fit flex-col justify-center"
   return (
     <div
+      // ref={props.ref}
       className={clsx(defaultStyle, marginStyles[margin], widthStyles[width])}
     >
       {props.label && (
@@ -67,7 +69,12 @@ export const HawaTextField: React.FunctionComponent<TextFieldTypes> = ({
       ) : (
         <div>
           <input
-            {...props}
+            onChange={props.onChange}
+            type={props.type}
+            aria-label={props.label}
+            placeholder={props.placeholder}
+            defaultValue={props.defaultValue}
+            value={props.value}
             className="mb-0 block w-full rounded-lg border border-gray-300 bg-gray-50 p-2.5 text-gray-900 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-blue-500 dark:focus:ring-blue-500"
           />
         </div>