@sikka/hawa 0.0.204 → 0.0.205

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sikka/hawa",
-  "version": "0.0.204",
+  "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/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/styles.css

@@ -775,6 +775,9 @@ video {
 .mt-3 {
   margin-top: 0.75rem;
 }
+.mt-4 {
+  margin-top: 1rem;
+}
 .mt-5 {
   margin-top: 1.25rem;
 }
@@ -1055,6 +1058,9 @@ video {
      -moz-appearance: none;
           appearance: none;
 }
+.grid-cols-2 {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
 .grid-cols-4 {
   grid-template-columns: repeat(4, minmax(0, 1fr));
 }
@@ -1156,10 +1162,6 @@ video {
   --tw-divide-opacity: 1;
   border-color: rgb(243 244 246 / var(--tw-divide-opacity));
 }
-.divide-gray-900 > :not([hidden]) ~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(17 24 39 / var(--tw-divide-opacity));
-}
 .self-center {
   align-self: center;
 }
@@ -1738,6 +1740,9 @@ video {
   --tw-text-opacity: 1;
   color: rgb(30 64 175 / var(--tw-text-opacity));
 }
+.text-buttonPrimary-500 {
+  color: var(--button-primary-500);
+}
 .text-gray-300 {
   --tw-text-opacity: 1;
   color: rgb(209 213 219 / var(--tw-text-opacity));