@sikka/hawa 0.0.137 → 0.0.139

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sikka/hawa",
-  "version": "0.0.137",
+  "version": "0.0.139",
   "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/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/HawaStats.tsx

@@ -11,11 +11,11 @@ type StatTypes = {
   handleClick?: () => void
 }
 export const HawaStats: React.FunctionComponent<StatTypes> = (props) => {
-  let defaultStyle = "flex flex-col gap-1 rounded-lg p-4 text-sm h-fit max-h-fit"
+  let defaultStyle =
+    "flex flex-col gap-1 rounded-lg p-4 text-sm h-fit max-h-fit"
   let statStyles = {
     plain: "",
     contained: "bg-primary-200 w-fit",
-    // outlined: "border-2 border-primary-200 w-fit",
     outlined: "ring-2 w-fit",
   }
   return (
@@ -29,7 +29,7 @@ export const HawaStats: React.FunctionComponent<StatTypes> = (props) => {
       ) : (
         <div className="text-2xl font-bold">{props.number}</div>
       )}{" "}
-      <div className="text-xs">{props.helperText}</div>
+      {props.helperText && <div className="text-xs">{props.helperText}</div>}{" "}
     </div>
   )
 }

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>

package/src/hooks/useBreakpoint.ts

@@ -1,7 +1,7 @@
 import { useState, useEffect } from "react"
 
 const useBreakpoint = () => {
-  const [breakpoint, setBreakpoint] = useState(1200)
+  const [breakpoint, setBreakpoint] = useState(window.innerWidth)
   const resize = () => {
     setBreakpoint(window.innerWidth)
   }

package/src/layout/HawaAppLayout.tsx

@@ -1,8 +1,9 @@
 import clsx from "clsx"
-import React, { useState } from "react"
+import React, { useEffect, useRef, useState } from "react"
 import useDiscloser from "../hooks/useDiscloser"
 import { HawaMenu } from "../elements"
-
+import { HiMenu } from "react-icons/hi"
+import useBreakpoint from "../hooks/useBreakpoint"
 type HawaAppLayoutTypes = {
   drawerItems: { label: string; icon: any; slug: string; action: () => void }[]
   currentPage: string
@@ -28,19 +29,42 @@ export const HawaAppLayout: React.FunctionComponent<HawaAppLayoutTypes> = (
 ) => {
   const [openSideMenu, setOpenSideMenu] = useState(false)
   const { isOpen, onClose, onOpen } = useDiscloser(false)
+  const ref = useRef(null)
+
+  const size = useBreakpoint()
+  console.log("size is ", size)
+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (ref.current && !ref.current.contains(event.target)) {
+        // onClickOutside && onClickOutside()
+        setOpenSideMenu(false)
+      }
+    }
+    document.addEventListener("click", handleClickOutside, true)
+    return () => {
+      document.removeEventListener("click", handleClickOutside, true)
+    }
+  }, [])
 
   return (
     <>
       {props.topBar && (
         <div
           className={clsx(
-            "fixed top-0 z-40 flex h-14 w-1/2 flex-row items-center justify-between bg-primary-400",
-            "w-[calc(100%-3rem)]",
-            "translate-x-[3rem]",
+            "fixed top-0 z-40 flex h-14 flex-row items-center justify-between bg-primary-400",
+            size > 600 ? "w-[calc(100%-3rem)] translate-x-[3rem]" : "w-full",
             "p-2",
             "pr-5"
           )}
         >
+          {size > 600 ? null : (
+            <div
+              onClick={() => setOpenSideMenu(true)}
+              className=" cursor-pointer rounded-lg p-2 transition-all hover:bg-gray-100"
+            >
+              <HiMenu size={30} />
+            </div>
+          )}
           {props.pageTitle ? <div>{props.pageTitle}</div> : <div></div>}
           <HawaMenu
             buttonPosition="top-right"
@@ -69,10 +93,14 @@ export const HawaAppLayout: React.FunctionComponent<HawaAppLayoutTypes> = (
       <div
         onMouseEnter={() => setOpenSideMenu(true)}
         onMouseLeave={() => setOpenSideMenu(false)}
-        className="fixed top-0 left-0 z-50 flex h-full w-12 flex-col overflow-auto bg-primary-400 transition-all hover:w-40"
+        ref={ref}
+        className={clsx(
+          "fixed top-0 left-0 z-50 flex h-full flex-col overflow-auto bg-primary-400 transition-all hover:w-40",
+          size > 600 ? "w-12" : "w-0",
+          openSideMenu ? "w-40" : ""
+        )}
       >
-        <div className="flex flex-row p-2">
-          {/* full logo */}
+        <div className="flex flex-row items-center justify-center bg-red-300 p-2">
           {openSideMenu ? (
             <img
               className={clsx("h-10", !openSideMenu ? "invisible" : "visible")}
@@ -85,6 +113,7 @@ export const HawaAppLayout: React.FunctionComponent<HawaAppLayoutTypes> = (
             />
           )}
         </div>
+
         {props.drawerItems.map((dSection, j) => (
           <div className="flex flex-col items-stretch justify-center">
             {dSection.map((dItem, i) => {

package/src/styles.css

@@ -850,6 +850,9 @@ video {
 .w-12 {
   width: 3rem;
 }
+.w-40 {
+  width: 10rem;
+}
 .w-10\/12 {
   width: 83.333333%;
 }

package/storybook-static/745.4b81597c.iframe.bundle.js

@@ -0,0 +1 @@
+"use strict";(self.webpackChunk_sikka_hawa=self.webpackChunk_sikka_hawa||[]).push([[745],{"./node_modules/react-dom/client.js":(__unused_webpack_module,exports,__webpack_require__)=>{var m=__webpack_require__("./node_modules/react-dom/index.js");exports.createRoot=m.createRoot,exports.hydrateRoot=m.hydrateRoot}}]);