@sikka/hawa 0.0.203 → 0.0.205

package/package.json

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

package/src/blocks/AuthForms/CodeConfirmation.tsx

@@ -1,33 +1,39 @@
-import React from "react"
-import { HawaTextField, HawaAlert, HawaButton } from "../../elements"
+import React, { useState } from "react"
+import {
+  HawaTextField,
+  HawaAlert,
+  HawaButton,
+  HawaPinInput,
+} from "../../elements"
 import { Controller, useForm } from "react-hook-form"
 import { HawaContainer } from "../../layout"
 
-type CodeConfirmationTypes = {
-  showError: any
-  errorTitle: any
-  errorText: any
-  texts: {
+type TConfirmation = {
+  showError?: any
+  errorTitle?: any
+  errorText?: any
+  texts?: {
+    checkYourPhone: string
+    weSentCode: string
+    didntGetCode: string
+    resendCode: string
     codeLabel: string
     codePlaceholder: string
     codeRequiredText: string
-    confirmText: string
+    confirm: string
+    cancel
   }
-  handleSignIn: any
+  phoneNumber?: string
+  submitConfirmation?: any
+  handleSignIn?: any
 }
-export const CodeConfirmation: React.FunctionComponent<
-  CodeConfirmationTypes
-> = (props) => {
-  const methods = useForm()
-  const {
-    formState: { errors },
-    handleSubmit,
-    control,
-  } = methods
 
+export const CodeConfirmation: React.FunctionComponent<TConfirmation> = (
+  props
+) => {
+  const [pins, setPins] = useState(null)
   return (
     <HawaContainer>
-      {" "}
       {props.showError && (
         <HawaAlert
           title={props.errorTitle}
@@ -35,33 +41,38 @@ export const CodeConfirmation: React.FunctionComponent<
           severity="error"
         />
       )}
-      <form onSubmit={handleSubmit(props.handleSignIn)}>
-        <Controller
-          control={control}
-          name="code"
-          render={({ field }) => (
-            <HawaTextField
-              width="full"
-              type="number"
-              label={props.texts.codeLabel}
-              helperText={errors.email?.message}
-              placeholder={props.texts.codePlaceholder}
-              {...field}
-              value={field.value ?? ""}
-            />
-          )}
-          rules={{
-            required: props.texts.codeRequiredText,
-          }}
-        />
-
-        <HawaButton
-          color="primary"
-          // type="submit"
-          width="full"
-        >
-          {props.texts.confirmText}
-        </HawaButton>
+      <div className="mb-4">
+        <div className="text-lg font-bold">
+          {props.texts.checkYourPhone ?? "Please check your phone"}
+        </div>
+        <div className="text-gray-500">
+          <span>{props.texts.weSentCode ?? "We've sent a code to "}</span>
+          <span>{props.phoneNumber}</span>
+        </div>{" "}
+      </div>
+      <form
+        onSubmit={(e) => {
+          e.preventDefault()
+          if (pins) {
+            props.submitConfirmation(pins)
+          }
+        }}
+      >
+        <HawaPinInput width="full" digits={6} getPins={(e) => setPins(e)} />
+        <div className=" py-2 text-center text-xs">
+          <span>{props.texts.didntGetCode ?? "Didn't get the code?"}</span>{" "}
+          <span className="cursor-pointer text-buttonPrimary-500">
+            {props.texts.resendCode ?? "Click to resend"}
+          </span>
+        </div>
+        <div className="mt-4  grid grid-cols-2 gap-2">
+          <HawaButton margins={"none"} variant="outlined" width="full">
+            {props.texts.cancel ?? "Cancel"}
+          </HawaButton>
+          <HawaButton margins={"none"} color="primary" width="full">
+            {props.texts.confirm ?? "Confirm"}
+          </HawaButton>
+        </div>
       </form>
     </HawaContainer>
   )

package/src/blocks/AuthForms/SignInForm.tsx

@@ -9,55 +9,6 @@ import {
 import { Controller, useForm } from "react-hook-form"
 import { HawaContainer } from "../../layout"
 
-type SignInFormTypes = {
-  language?: string
-  showError?: any
-  errorTitle?: string
-  errorText?: string
-  signInType?: "email" | "username" | "phone"
-  texts?: {
-    emailLabel?: string
-    emailPlaceholder?: string
-    emailRequiredText?: string
-    emailInvalidText?: string
-    usernameLabel?: string
-    usernamePlaceholder?: string
-    usernameRequired?: string
-    phoneRequiredText?: string
-    passwordLabel?: string
-    passwordPlaceholder?: string
-    passwordRequiredText?: string
-    forgotPasswordText?: string
-    newUserText?: string
-    signUpText?: string
-    signInText?: string
-    googleButtonLabel?: string
-    githubButtonLabel?: string
-    twitterButtonLabel?: string
-  }
-  withoutResetPassword?: boolean
-  withoutSignUp?: boolean
-  /**
-   *show spinner if true
-   */
-  isLoading?: any
-  viaGoogle?: boolean
-  viaGithub?: boolean
-  viaTwitter?: boolean
-  /**
-   * Handle the sign in .
-   */
-  handleSignIn?: (e: any) => void
-  /**
-   * Handle routing to sign up page
-   */
-  handleRouteToSignUp?: () => void
-  handleForgotPassword?: () => void
-  handleGoogleSignIn?: () => void
-  handleGithubSignIn?: () => void
-  handleTwitterSignIn?: () => void
-}
-
 export const SignInForm: React.FunctionComponent<SignInFormTypes> = (props) => {
   const {
     formState: { errors },
@@ -66,7 +17,7 @@ export const SignInForm: React.FunctionComponent<SignInFormTypes> = (props) => {
   } = useForm()
 
   return (
-    <HawaContainer direction={props.language === "ar" ? "rtl" : "ltr"}>
+    <HawaContainer direction={props.direction}>
       <form onSubmit={handleSubmit((e) => props.handleSignIn(e))}>
         {props.showError && (
           <HawaAlert
@@ -128,29 +79,36 @@ export const SignInForm: React.FunctionComponent<SignInFormTypes> = (props) => {
             rules={{ required: props.texts.phoneRequiredText }}
           />
         )}
-        <Controller
-          control={control}
-          name="password"
-          render={({ field }) => (
-            <HawaTextField
-              width="full"
-              type="password"
-              label={props.texts.passwordLabel}
-              placeholder={props.texts.passwordPlaceholder}
-              helperText={errors.password?.message}
-              onChange={field.onChange}
-              value={field.value ?? ""}
+        {props.signInType !== "phone" && (
+          <>
+            <Controller
+              control={control}
+              name="password"
+              render={({ field }) => (
+                <HawaTextField
+                  width="full"
+                  type="password"
+                  label={props.texts.passwordLabel}
+                  placeholder={props.texts.passwordPlaceholder}
+                  helperText={errors.password?.message}
+                  onChange={field.onChange}
+                  value={field.value ?? ""}
+                />
+              )}
+              rules={{
+                required: props.texts.passwordRequiredText,
+                minLength: 5,
+              }}
             />
-          )}
-          rules={{ required: props.texts.passwordRequiredText, minLength: 5 }}
-        />
-        {!props.withoutResetPassword && (
-          <div
-            className="mb-3 w-fit cursor-pointer text-xs dark:text-gray-300"
-            onClick={props.handleForgotPassword}
-          >
-            {props.texts.forgotPasswordText}
-          </div>
+            {!props.withoutResetPassword && (
+              <div
+                onClick={props.handleForgotPassword}
+                className="mb-3 w-fit cursor-pointer text-xs dark:text-gray-300"
+              >
+                {props.texts.forgotPasswordText}
+              </div>
+            )}
+          </>
         )}
 
         <HawaButton
@@ -159,8 +117,6 @@ export const SignInForm: React.FunctionComponent<SignInFormTypes> = (props) => {
           color="primary"
           size="medium"
           width="full"
-          // type="submit"
-          // onClick={(e) => console.log("clicking")}
         >
           {props.texts.signInText}
         </HawaButton>
@@ -176,8 +132,8 @@ export const SignInForm: React.FunctionComponent<SignInFormTypes> = (props) => {
           </div>
         )}
       </form>
-      {/* <Divider /> */}
-      {/* <div className="divide-y divide-gray-900"></div> */}
+
+      {/* 3rd Party Sign Auth Buttons */}
       {props.viaGithub || props.viaGoogle || props.viaTwitter ? (
         <div className="flex flex-col ">
           {props.viaGoogle && (
@@ -206,3 +162,52 @@ export const SignInForm: React.FunctionComponent<SignInFormTypes> = (props) => {
     </HawaContainer>
   )
 }
+
+type SignInFormTypes = {
+  direction?: "rtl" | "ltr"
+  showError?: any
+  errorTitle?: string
+  errorText?: string
+  signInType?: "email" | "username" | "phone"
+  texts?: {
+    emailLabel?: string
+    emailPlaceholder?: string
+    emailRequiredText?: string
+    emailInvalidText?: string
+    usernameLabel?: string
+    usernamePlaceholder?: string
+    usernameRequired?: string
+    phoneRequiredText?: string
+    passwordLabel?: string
+    passwordPlaceholder?: string
+    passwordRequiredText?: string
+    forgotPasswordText?: string
+    newUserText?: string
+    signUpText?: string
+    signInText?: string
+    googleButtonLabel?: string
+    githubButtonLabel?: string
+    twitterButtonLabel?: string
+  }
+  withoutResetPassword?: boolean
+  withoutSignUp?: boolean
+  /**
+   *show spinner if true
+   */
+  isLoading?: any
+  viaGoogle?: boolean
+  viaGithub?: boolean
+  viaTwitter?: boolean
+  /**
+   * Handle the sign in .
+   */
+  handleSignIn?: (e: any) => void
+  /**
+   * Handle routing to sign up page
+   */
+  handleRouteToSignUp?: () => void
+  handleForgotPassword?: () => void
+  handleGoogleSignIn?: () => void
+  handleGithubSignIn?: () => void
+  handleTwitterSignIn?: () => void
+}

package/src/blocks/AuthForms/SignUpForm.tsx

@@ -11,7 +11,7 @@ import { Controller, FormProvider, useForm } from "react-hook-form"
 import { HawaContainer } from "../../layout/HawaContainer"
 
 type SignUpFormTypes = {
-  language?: string
+  direction?: "rtl" | "ltr"
   texts: {
     fullNameLabel: string
     fullNamePlaceholder: string
@@ -72,7 +72,7 @@ export const SignUpForm: React.FunctionComponent<SignUpFormTypes> = (props) => {
   } = methods
 
   return (
-    <HawaContainer direction={props.language === "ar" ? "rtl" : "ltr"}>
+    <HawaContainer direction={props.direction}>
       <div>
         {props.showError && (
           <HawaAlert

package/src/elements/DragDropImages.tsx

@@ -3,12 +3,6 @@ import { useDropzone } from "react-dropzone"
 import { HawaAlert } from "./HawaAlert"
 import { HawaButton } from "./HawaButton"
 
-const thumbsContainer = {
-  display: "flex",
-  flexDirection: "row",
-  flexWrap: "wrap",
-  marginTop: 10,
-}
 type DragDropImagesTypes = {
   label?: string
   files: [File]
@@ -79,17 +73,14 @@ export const DragDropImages: React.FunctionComponent<DragDropImagesTypes> = ({
       },
       [files]
     )
-
     useEffect(() => {
       setFiles(acceptedFiles)
     }, [acceptedFiles, cmp])
-
     onClearFiles = () => {
       acceptedFiles.length = 0
       acceptedFiles.splice(0, acceptedFiles.length)
       setFiles([])
     }
-
     useEffect(() => {
       if (maxSize > 0) {
         const k = 1024
@@ -111,7 +102,7 @@ export const DragDropImages: React.FunctionComponent<DragDropImagesTypes> = ({
       )
     })
     const thumbs = files?.map((file: any, index: any) => (
-      <div className="relative m-3 rounded">
+      <div className="relative m-3 rounded ">
         <button
           onClick={(e) => {
             e.stopPropagation()
@@ -158,8 +149,6 @@ export const DragDropImages: React.FunctionComponent<DragDropImagesTypes> = ({
       </div>
     ))
 
-    console.log("error", fileRejections)
-
     return (
       <div>
         {label && (
@@ -168,22 +157,17 @@ export const DragDropImages: React.FunctionComponent<DragDropImagesTypes> = ({
           </div>
         )}
         <div
-          // variant="drop-area"
-          {...getRootProps({
-            style: { backgroundColor: isDragActive ? "white" : "inherit" },
-          })}
-          // style={{ backgroundColor: isDragActive ? "white" : "inherit" }}
-          className="mb-2 flex flex-col justify-center rounded border border-dashed border-black"
+          {...getRootProps({})}
+          className="flex flex-col justify-center rounded border border-dashed border-black bg-white transition-all hover:bg-gray-100 "
         >
           <input {...getInputProps()} />
-          <div className="p-1 text-center">{texts.clickHereToUpload}</div>
-          <div className="p-1 text-center">
+          <div className="pt-4 text-center">{texts.clickHereToUpload}</div>
+          <div className="pb-4 text-center text-xs">
             {texts.maxFileSize} {max}
           </div>
           <div className="flex justify-center ">
             {acceptedFiles.length > 0 && (
               <HawaButton
-                // style={{ color: "black" }}
                 onClick={(e) => {
                   e.stopPropagation()
                   onClearFiles(acceptedFiles)

package/src/elements/HawaAccordion.tsx

@@ -21,49 +21,46 @@ const AccordionItem: React.FunctionComponent<AccordionItemTypes> = (props) => {
     "p-5 font-light border border-b-xl rounded-b-xl border-gray-200 dark:border-gray-700 dark:bg-gray-900"
 
   return (
-    <div className="rounded">
-      <h2 id={"accordion-collapse-heading-" + props.count}>
-        <button
-          type="button"
-          className={clsx(
-            // props.count === 0 ? roundedTop : noRounding,
-            "flex w-full items-center justify-between border border-gray-200 bg-gray-100 p-5 text-left font-medium text-gray-900 hover:bg-gray-100 focus:ring-4 focus:ring-gray-200 dark:border-gray-700 dark:bg-gray-800 dark:text-white dark:hover:bg-gray-800 dark:focus:ring-gray-800",
-            !collapse ? "rounded-t-lg" : "rounded"
-          )}
-          onClick={() => setCollapse(!collapse)}
-          data-accordion-target={"#accordion-collapse-body-" + props.count}
-          aria-expanded="true"
-          aria-controls={"accordion-collapse-body-" + props.count}
+    <div>
+      <button
+        id={"accordion-collapse-heading-" + props.count}
+        type="button"
+        className={clsx(
+          // props.count === 0 ? roundedTop : noRounding,
+          collapse ? "rounded" : "rounded-t",
+          "flex w-full items-center justify-between  border border-gray-200 bg-gray-100 p-5 text-left font-medium text-gray-900 hover:bg-gray-100  dark:border-gray-700 dark:bg-gray-800 dark:text-white dark:hover:bg-gray-800 dark:focus:ring-gray-800"
+        )}
+        onClick={() => setCollapse(!collapse)}
+        data-accordion-target={"#accordion-collapse-body-" + props.count}
+        aria-expanded="true"
+        aria-controls={"accordion-collapse-body-" + props.count}
+      >
+        <span>{props.title}</span>
+        <svg
+          data-accordion-icon=""
+          className={`h-6 w-6 ${
+            collapse ? "" : "rotate-180"
+          }  shrink-0 transition-all`}
+          fill="currentColor"
+          viewBox="0 0 20 20"
+          xmlns="http://www.w3.org/2000/svg"
         >
-          <span>{props.title}</span>
-          <svg
-            data-accordion-icon=""
-            className={`h-6 w-6 ${
-              collapse ? "" : "rotate-180"
-            }  shrink-0 transition-all`}
-            fill="currentColor"
-            viewBox="0 0 20 20"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              fillRule="evenodd"
-              d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
-              clipRule="evenodd"
-            ></path>
-          </svg>
-        </button>
-      </h2>
+          <path
+            fillRule="evenodd"
+            d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
+            clipRule="evenodd"
+          ></path>
+        </svg>
+      </button>
       <div
         id={"accordion-collapse-body-" + props.count}
+        aria-labelledby={"accordion-collapse-heading-" + props.count}
         className={clsx(
-          collapse ? "invisible hidden" : "visible",
-          "border-b-xl rounded-b-xl border border-gray-200 p-5 font-light dark:border-gray-700 dark:bg-gray-900"
+          collapse ? "invisible hidden h-0 p-0" : " visible h-full",
+          "rounded-b border border-t-0 border-gray-200 p-5 font-light dark:border-gray-700 dark:bg-gray-900"
         )}
-        aria-labelledby={"accordion-collapse-heading-" + props.count}
       >
-        {/* <div className={props.count === -1 ? accPaperRounded : accPaper}> */}
         <p className="mb-2 text-gray-500 dark:text-gray-400">{props.content}</p>
-        {/* </div> */}
       </div>
     </div>
   )

package/src/elements/HawaButton.tsx

@@ -26,7 +26,7 @@ interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   isLoading?: boolean
 }
 
-const baseStyles = "cursor-pointer font-medium rounded  transition-all"
+const baseStyles = "cursor-pointer font-medium rounded h-full  transition-all"
 
 const sizeStyles = {
   xs: "px-1 py-1",

package/src/elements/HawaPinInput.tsx

@@ -1,55 +1,78 @@
 import clsx from "clsx"
-import React from "react"
+import React, { useEffect, useState } from "react"
 
 type PinInputTypes = {
-  label: string
+  label?: string
   icon?: JSX.Element
-  digits?: number
+  digits: number
+  width?: "normal" | "full"
+  getPins?: any
 }
 export const HawaPinInput: React.FunctionComponent<PinInputTypes> = ({
   label,
   icon,
+  digits,
+  width = "normal",
+  getPins,
+  ...props
 }) => {
-  const validate = (evt) => {
-    var theEvent = evt || window.event
+  const [pin, setPin] = useState(Array.from(Array(digits)))
 
-    // Handle paste
-    if (theEvent.type === "paste") {
-      key = evt.clipboardData.getData("text/plain")
-    } else {
-      // Handle key press
-      var key = theEvent.keyCode || theEvent.which
-      key = String.fromCharCode(key)
+  const handleKeyDown = (e, index) => {
+    let backTo = 0
+    if (e.key === "Backspace") {
+      e.target.value.length === 0 ? (backTo = index - 1) : (backTo = index)
+      const previousInput = document.getElementById(`input-${backTo}`)
+      previousInput?.focus()
     }
-    var regex = /[0-9]|\./
-    if (!regex.test(key)) {
-      theEvent.returnValue = false
-      if (theEvent.preventDefault) theEvent.preventDefault()
+  }
+  useEffect(() => {
+    let unfilled = pin.includes(undefined)
+    if (!unfilled) {
+      getPins(pin)
+    }
+  })
+  const handleChange = (e, index) => {
+    if (!/^\d*$/.test(e.target.value)) {
+      const newPin = [...pin]
+      newPin[index] = ""
+      setPin(newPin)
+      return
+    } else {
+      const newPin = [...pin]
+      newPin[index] = e.target.value
+      setPin(newPin)
+
+      if (e.target.value.length === 1) {
+        const nextInput = document.getElementById(`input-${index + 1}`)
+        nextInput?.focus()
+      } else if (e.target.value.length === 0) {
+        const previousInput = document.getElementById(`input-${index - 1}`)
+        previousInput?.focus()
+      }
     }
   }
+
   return (
-    <div className="flex flex-row gap-2">
-      <SinglePinInput
-        onInput={
-          (v) =>
-            v.target.value.replace(/[^0-9.]/g, "").replace(/(\..*?)\..*/g, "$1")
-          // .replace(/[^0-9.]/g, "")
-          // .replace(/(..*?)..*/g, "$1")
-          // .replace(/^0[^.]/, "0")
-        }
-      />
-      <SinglePinInput />
-      <SinglePinInput />
-      <SinglePinInput />
+    <div className="flex w-full flex-row justify-center gap-2">
+      {pin.map((value, index) => (
+        <input
+          key={index}
+          type="text"
+          maxLength={1}
+          value={value}
+          id={`input-${index}`}
+          pattern="[0-9]*"
+          className={clsx(
+            "h-10 rounded bg-white text-center",
+            width === "full" ? "w-full" : "w-10"
+          )}
+          onChange={(e) => handleChange(e, index)}
+          onKeyDown={(e) => handleKeyDown(e, index)}
+          onFocus={(e) => e.target.select()}
+          {...props}
+        />
+      ))}
     </div>
   )
 }
-
-const SinglePinInput = (props) => (
-  <input
-    type="text"
-    maxLength={1}
-    className="h-10 w-10 bg-gray-200 text-center"
-    {...props}
-  />
-)

package/src/elements/HawaTable.tsx

@@ -339,6 +339,7 @@ export const HawaTable: React.FunctionComponent<TableTypes> = ({
         )}
         {/* Pagination Settings */}
         <div className="w-fit ">
+          {/* TODO: Hide it when props.pagination is true */}
           <select
             value={perPage}
             className="h-6 rounded text-xs"

package/src/elements/HawaTooltip.tsx

@@ -76,7 +76,7 @@ export const HawaTooltip: React.FunctionComponent<THawaToolTip> = ({
       tooltipCoordinates =
         direction === "rtl"
           ? `${tooltipWidth - childrenWidth}px, ${spacing}px`
-          : `-${childrenWidth - tooltipWidth}px, ${spacing}px`
+          : `-${0}px, ${spacing}px`
       break
     case "bottom-left":
       tooltipCoordinates =