@sikka/hawa 0.0.243 → 0.0.244

package/package.json

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

package/src/blocks/Account/HawaApiBox.tsx

@@ -1,13 +1,11 @@
-import React from "react"
+import { FC } from "react"
 
 type HawaApiBoxTypes = {
   lang?: any
   onClick?: any
   buttonText?: any
 }
-export const HawaApiBox: React.FunctionComponent<HawaApiBoxTypes> = (
-  props
-) => {
+export const HawaApiBox: FC<HawaApiBoxTypes> = (props) => {
   let isArabic = props.lang === "ar"
   let logoElement: any = ""
   return <div>test</div>

package/src/blocks/Account/UserProfileForm.tsx

@@ -1,4 +1,4 @@
-import React from "react"
+import { FC } from "react"
 import { HawaButton, HawaPhoneInput, HawaTextField } from "../../elements"
 import { Controller, FormProvider, useForm } from "react-hook-form"
 import { HawaContainer } from "../../layout"
@@ -9,9 +9,7 @@ type UserProfileFormTypes = {
   handleUpdateProfile: any
 }
 
-export const UserProfileForm: React.FunctionComponent<UserProfileFormTypes> = (
-  props
-) => {
+export const UserProfileForm: FC<UserProfileFormTypes> = (props) => {
   const methods = useForm()
   const { inputs } = props
   const {

package/src/blocks/Account/UserSettingsForm.tsx

@@ -1,6 +1,4 @@
-import React from "react"
-import { HawaButton } from "../../elements"
-import { HawaContainer } from "../../layout"
+import { FC } from "react"
 
 type UserSettingsFormTypes = {
   children: any
@@ -9,9 +7,7 @@ type UserSettingsFormTypes = {
   blockTitle?: string
 }
 
-export const UserSettingsForm: React.FunctionComponent<
-  UserSettingsFormTypes
-> = (props) => {
+export const UserSettingsForm: FC<UserSettingsFormTypes> = (props) => {
   return (
     <div>
       <div className="mb-2 text-sm font-bold">{props.blockTitle}</div>

package/src/blocks/AuthForms/AppLanding.tsx

@@ -1,4 +1,4 @@
-import React from "react"
+import { FC } from "react"
 import { HawaButton } from "../../elements"
 import { HawaContainer } from "../../layout/HawaContainer"
 
@@ -13,7 +13,7 @@ type AppLandingTypes = {
   }
   size: "small" | "normal" | "full"
 }
-export const AppLanding: React.FunctionComponent<AppLandingTypes> = (props) => {
+export const AppLanding: FC<AppLandingTypes> = (props) => {
   return (
     <HawaContainer maxWidth={props.size}>
       {props.handleSignIn && (

package/src/blocks/AuthForms/CodeConfirmation.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react"
+import { useState, FC } from "react"
 import { HawaAlert, HawaButton, HawaPinInput } from "../../elements"
 import { HawaContainer } from "../../layout"
 
@@ -22,9 +22,7 @@ type TConfirmation = {
   handleSignIn?: any
 }
 
-export const CodeConfirmation: React.FunctionComponent<TConfirmation> = (
-  props
-) => {
+export const CodeConfirmation: FC<TConfirmation> = (props) => {
   const [pins, setPins] = useState(null)
   return (
     <HawaContainer>

package/src/blocks/AuthForms/NewPasswordForm.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react"
+import { useState, FC } from "react"
 import { HawaTextField, HawaAlert, HawaButton } from "../../elements"
 import { Controller, FormProvider, useForm } from "react-hook-form"
 import { HawaContainer } from "../../layout"
@@ -19,9 +19,7 @@ type NewPasswordTypes = {
   }
 }
 
-export const NewPasswordForm: React.FunctionComponent<NewPasswordTypes> = (
-  props
-) => {
+export const NewPasswordForm: FC<NewPasswordTypes> = (props) => {
   const [matchError, setMatchError] = useState(false)
   const methods = useForm()
   const {

package/src/blocks/AuthForms/ResetPasswordForm.tsx

@@ -1,4 +1,4 @@
-import React from "react"
+import { FC } from "react"
 import { Controller, useForm } from "react-hook-form"
 import { HawaButton, HawaTextField } from "../../elements"
 import { HawaContainer } from "../../layout"
@@ -19,9 +19,7 @@ type ResetPasswordType = {
   }
 }
 
-export const ResetPasswordForm: React.FunctionComponent<ResetPasswordType> = (
-  props
-) => {
+export const ResetPasswordForm: FC<ResetPasswordType> = (props) => {
   const methods = useForm()
   const {
     formState: { errors },

package/src/blocks/AuthForms/SignInForm.tsx

@@ -1,4 +1,4 @@
-import React from "react"
+import { FC } from "react"
 import {
   HawaTextField,
   HawaLogoButton,
@@ -9,7 +9,7 @@ import {
 import { Controller, useForm } from "react-hook-form"
 import { HawaContainer } from "../../layout"
 
-export const SignInForm: React.FunctionComponent<SignInFormTypes> = (props) => {
+export const SignInForm: FC<SignInFormTypes> = (props) => {
   const {
     formState: { errors },
     handleSubmit,

package/src/blocks/AuthForms/SignInPhone.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react"
+import { useState, FC } from "react"
 import { Controller, useForm } from "react-hook-form"
 import { HawaButton, HawaPhoneInput } from "../../elements"
 import { HawaContainer } from "../../layout"
@@ -14,9 +14,7 @@ type SignInPhoneTypes = {
   handleSignIn: any
 }
 
-export const SignInPhone: React.FunctionComponent<SignInPhoneTypes> = (
-  props
-) => {
+export const SignInPhone: FC<SignInPhoneTypes> = (props) => {
   const methods = useForm()
   const {
     formState: { errors },

package/src/blocks/AuthForms/SignUpForm.tsx

@@ -1,4 +1,4 @@
-import React from "react"
+import { FC } from "react"
 import {
   HawaTextField,
   HawaLogoButton,
@@ -63,7 +63,7 @@ type SignUpFormTypes = {
   isLoading?: boolean
 }
 
-export const SignUpForm: React.FunctionComponent<SignUpFormTypes> = (props) => {
+export const SignUpForm: FC<SignUpFormTypes> = (props) => {
   const methods = useForm()
   const {
     formState: { errors },

package/src/blocks/Misc/EmptyState.tsx

@@ -1,4 +1,4 @@
-import React from "react"
+import { FC } from "react"
 import { HawaButton } from "../../elements"
 import { HawaContainer } from "../../layout"
 import { FaCheck } from "react-icons/fa"
@@ -7,9 +7,7 @@ type TEmptyState = {
   variant?: "outlined" | "contained" | "neobrutalism"
 }
 
-export const EmptyState: React.FunctionComponent<TEmptyState> = ({
-  variant = "contained",
-}) => {
+export const EmptyState: FC<TEmptyState> = ({ variant = "contained" }) => {
   return (
     <HawaContainer variant={variant} centered={true}>
       <div className="flex flex-col items-center justify-center text-center dark:text-white">

package/src/blocks/Misc/LeadGenerator.tsx

@@ -1,4 +1,4 @@
-import React from "react"
+import { FC } from "react"
 import { HawaButton, HawaTextField } from "../../elements"
 import { HawaContainer } from "../../layout"
 
@@ -12,14 +12,14 @@ type TLeadGenerator = {
   handleNewsletterSub: (e: string) => void
 }
 
-export const LeadGenerator: React.FunctionComponent<TLeadGenerator> = ({
+export const LeadGenerator: FC<TLeadGenerator> = ({
   variant = "contained",
   texts,
   handleNewsletterSub,
 }) => {
   return (
     <HawaContainer variant={variant}>
-      <div className="p-0 mb-4 pt-0">
+      <div className="mb-4 p-0 pt-0">
         <h1 className="font-bold">{texts?.title}</h1>
         <span>{texts?.subtitle}</span>
       </div>

package/src/blocks/Misc/Newsletter.tsx

@@ -1,4 +1,4 @@
-import React from "react"
+import { FC } from "react"
 import { HawaButton, HawaTextField } from "../../elements"
 import { HawaContainer } from "../../layout"
 
@@ -12,7 +12,7 @@ type TNewsletter = {
   handleNewsletterSub: (e: string) => void
 }
 
-export const Newsletter: React.FunctionComponent<TNewsletter> = ({
+export const Newsletter: FC<TNewsletter> = ({
   variant = "contained",
   texts,
   handleNewsletterSub,

package/src/blocks/Misc/NoPermission.tsx

@@ -1,15 +1,12 @@
-import React from "react"
-import { HawaButton } from "../../elements"
+import { FC } from "react"
 import { HawaContainer } from "../../layout"
-import {  FaLock } from "react-icons/fa"
+import { FaLock } from "react-icons/fa"
 
 type TNoPermission = {
   variant?: "outlined" | "contained" | "neobrutalism"
 }
 
-export const NoPermission: React.FunctionComponent<TNoPermission> = ({
-  variant = "contained",
-}) => {
+export const NoPermission: FC<TNoPermission> = ({ variant = "contained" }) => {
   return (
     <HawaContainer variant={variant} centered={true}>
       <div className="flex flex-col items-center justify-center text-center dark:text-white">

package/src/blocks/Misc/NotFound.tsx

@@ -1,4 +1,4 @@
-import React from "react"
+import { FC } from "react"
 import { HawaButton } from "../../elements"
 import { HawaContainer } from "../../layout"
 
@@ -11,7 +11,7 @@ type NotFoundTypes = {
   }
 }
 
-export const NotFound: React.FunctionComponent<NotFoundTypes> = ({
+export const NotFound: FC<NotFoundTypes> = ({
   variant = "contained",
   texts,
 }) => {

package/src/blocks/Misc/Testimonial.tsx

@@ -1,14 +1,12 @@
-import React from "react"
-import { HawaButton } from "../../elements"
-import { HawaContainer } from "../../layout"
-import { FaCheck } from "react-icons/fa"
+import { FC } from "react"
+// import { HawaButton } from "../../elements"
+// import { HawaContainer } from "../../layout"
+// import { FaCheck } from "react-icons/fa"
 type TEmptyState = {
   variant?: "outlined" | "contained" | "neobrutalism"
 }
 
-export const Testimonial: React.FunctionComponent<TEmptyState> = ({
-  variant = "contained",
-}) => {
+export const Testimonial: FC<TEmptyState> = ({ variant = "contained" }) => {
   return (
     <div
       className="flex flex-col gap-2 rounded border-2 border-gray-200 bg-white p-4"

package/src/blocks/Payment/ChargeWalletForm.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react"
+import { useState, FC } from "react"
 import { HawaButton } from "../../elements"
 import { HawaContainer } from "../../layout"
 
@@ -11,9 +11,7 @@ type ChargeWalletTypes = {
     chargeWallet: string
   }
 }
-export const ChargeWalletForm: React.FunctionComponent<ChargeWalletTypes> = (
-  props
-) => {
+export const ChargeWalletForm: FC<ChargeWalletTypes> = (props) => {
   const [walletAmount, setWalletAmount] = useState(0)
 
   return (

package/src/blocks/Payment/CheckoutForm.tsx

@@ -1,4 +1,4 @@
-import React from "react"
+import { FC } from "react"
 import {
   HawaTextField,
   HawaTable,
@@ -34,9 +34,7 @@ type CheckoutFormTypes = {
   }
 }
 
-export const CheckoutForm: React.FunctionComponent<CheckoutFormTypes> = (
-  props
-) => {
+export const CheckoutForm: FC<CheckoutFormTypes> = (props) => {
   let isArabic = props.lang === "ar"
   const methods = useForm()
   const {

package/src/blocks/Payment/Confirmation.tsx

@@ -1,4 +1,4 @@
-import React from "react"
+import { FC } from "react"
 import { HawaButton, HawaTable } from "../../elements"
 import { HawaContainer } from "../../layout"
 
@@ -40,9 +40,7 @@ type ConfirmationPageTypes = {
   handleRefundPolicyLink: any
 }
 
-export const ConfirmationPage: React.FunctionComponent<
-  ConfirmationPageTypes
-> = (props) => {
+export const ConfirmationPage: FC<ConfirmationPageTypes> = (props) => {
   let isArabic = props.lang === "ar"
 
   return (
@@ -83,7 +81,7 @@ export const ConfirmationPage: React.FunctionComponent<
         <HawaButton color="primary" width="full" onClick={props.handleHome}>
           {props.texts.homePage}
         </HawaButton>
-        <div className="mt-5 mb-5 text-center text-sm">
+        <div className="mb-5 mt-5 text-center text-sm">
           {props.texts.fasterPaymentNote}
         </div>
         <a

package/src/blocks/Payment/CreditCardForm.tsx

@@ -1,4 +1,4 @@
-import React from "react"
+import { FC } from "react"
 import { HawaButton, HawaTextField } from "../../elements"
 import { Controller, useForm } from "react-hook-form"
 import { HawaContainer } from "../../layout"
@@ -8,9 +8,7 @@ type CreditCardFormTypes = {
   handlePayWithCreditCard: any
 }
 
-export const CreditCardForm: React.FunctionComponent<CreditCardFormTypes> = (
-  props
-) => {
+export const CreditCardForm: FC<CreditCardFormTypes> = (props) => {
   const methods = useForm()
   const {
     formState: { errors },

package/src/blocks/Payment/PayWithWallet.tsx

@@ -1,4 +1,4 @@
-import React from "react"
+import { FC } from "react"
 import { HawaButton } from "../../elements"
 import { HawaContainer } from "../../layout"
 
@@ -7,9 +7,7 @@ type PayWithWalletTypes = {
   currency: any
   handlePayWithWallet: any
 }
-export const PayWithWallet: React.FunctionComponent<PayWithWalletTypes> = (
-  props
-) => {
+export const PayWithWallet: FC<PayWithWalletTypes> = (props) => {
   return (
     <HawaContainer>
       <div className="text-center text-5xl font-extrabold">

package/src/blocks/Payment/SelectPayment.tsx

@@ -1,4 +1,4 @@
-import React from "react"
+import { FC } from "react"
 import { HawaTypography, HawaLogoButton } from "../../elements"
 import { HawaContainer } from "../../layout"
 
@@ -26,9 +26,7 @@ type SelectPaymentTypes = {
   handleGooglePay: any
 }
 
-export const SelectPayment: React.FunctionComponent<SelectPaymentTypes> = (
-  props
-) => {
+export const SelectPayment: FC<SelectPaymentTypes> = (props) => {
   return (
     <HawaContainer>
       <HawaTypography>Choose Payment Method</HawaTypography>

package/src/blocks/Pricing/ComparingPlans.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react"
+import { useState, FC } from "react"
 import { BsExclamationCircleFill } from "react-icons/bs"
 import { HawaTabs, HawaTooltip } from "../../elements"
 
@@ -66,9 +66,7 @@ type ComparingPlansTypes = {
   onCurrencyChange?: (e) => void
   direction?: "rtl" | "ltr"
 }
-export const ComparingPlans: React.FunctionComponent<ComparingPlansTypes> = (
-  props
-) => {
+export const ComparingPlans: FC<ComparingPlansTypes> = (props) => {
   const [currentCurrency, setCurrentCurrency] = useState("SAR")
   const [currentCycle, setCurrentCycle] = useState("month")
 
@@ -95,7 +93,7 @@ export const ComparingPlans: React.FunctionComponent<ComparingPlansTypes> = (
         />
       </div>
       <div className=" overflow-hidden rounded">
-        <div className="grid grid-cols-4 gap-x-2 border-t border-b border-gray-200 bg-gray-100 p-4 text-sm font-medium text-gray-900 dark:border-gray-700 dark:bg-gray-800 dark:text-white">
+        <div className="grid grid-cols-4 gap-x-2 border-b border-t border-gray-200 bg-gray-100 p-4 text-sm font-medium text-gray-900 dark:border-gray-700 dark:bg-gray-800 dark:text-white">
           <div className="flex items-center"></div>
           {props.plans.map((plan: any) => (
             <div>
@@ -125,7 +123,7 @@ export const ComparingPlans: React.FunctionComponent<ComparingPlansTypes> = (
         {props.plans?.map((plan) => {
           return plan.features.map((feature) => {
             return (
-              <div className="grid grid-cols-4 gap-x-16 border-b border-gray-200 py-5 px-4 text-sm text-gray-700 dark:border-gray-700">
+              <div className="grid grid-cols-4 gap-x-16 border-b border-gray-200 px-4 py-5 text-sm text-gray-700 dark:border-gray-700">
                 <div className="  flex flex-row items-center gap-2  text-gray-500 dark:text-gray-400">
                   {feature.text}
                   {feature.description && (

package/src/blocks/Pricing/PricingPlans.tsx

@@ -1,4 +1,4 @@
-import React from "react"
+import { FC } from "react"
 import { HawaPricingCard, HawaTabs } from "../../elements"
 
 type PricingPlansTypes = {
@@ -42,9 +42,7 @@ type PricingPlansTypes = {
   onCurrencyChange?: (e) => void
   direction?: "rtl" | "ltr"
 }
-export const PricingPlans: React.FunctionComponent<PricingPlansTypes> = (
-  props
-) => {
+export const PricingPlans: FC<PricingPlansTypes> = (props) => {
   return (
     <div>
       <div className="mb-2 flex w-full justify-between">

package/src/blocks/Referral/ReferralAccount.tsx

@@ -1,4 +1,4 @@
-import React from "react"
+import { FC } from "react"
 import { FaClone } from "react-icons/fa"
 import { HawaButton } from "../../elements"
 import { HawaContainer } from "../../layout"
@@ -8,7 +8,7 @@ type ReferralAccount = {
   referralCode: string
 }
 
-export const ReferralAccount: React.FunctionComponent<ReferralAccount> = ({
+export const ReferralAccount: FC<ReferralAccount> = ({
   referralLink,
   referralCode,
 }) => {

package/src/blocks/Referral/ReferralSettlement.tsx

@@ -1,4 +1,4 @@
-import React from "react"
+import { FC } from "react"
 import { FaTimes } from "react-icons/fa"
 import {
   HawaAlert,
@@ -16,9 +16,11 @@ type TReferralSettlement = {
   withdrawError?: string
 }
 
-export const ReferralSettlement: React.FunctionComponent<
-  TReferralSettlement
-> = ({ referralLink, referralCode, withdrawError }) => {
+export const ReferralSettlement: FC<TReferralSettlement> = ({
+  referralLink,
+  referralCode,
+  withdrawError,
+}) => {
   const methods = useForm()
   const {
     formState: { errors },

package/src/blocks/Referral/ReferralStats.tsx

@@ -1,4 +1,4 @@
-import React from "react"
+import { FC } from "react"
 import { HawaAlert, HawaButton } from "../../elements"
 import { HawaContainer } from "../../layout"
 
@@ -8,7 +8,7 @@ type TReferralStats = {
   withdrawError?: string
 }
 
-export const ReferralStats: React.FunctionComponent<TReferralStats> = ({
+export const ReferralStats: FC<TReferralStats> = ({
   referralLink,
   referralCode,
   withdrawError,

package/src/elements/ArrowCarousel.tsx

@@ -1,5 +1,5 @@
 import clsx from "clsx"
-import { useEffect, useState, FunctionComponent } from "react"
+import { useEffect, useState, FC } from "react"
 
 type Item = {
   label?: string
@@ -41,7 +41,7 @@ const Arrow = (props: {
   )
 }
 
-export const ArrowCarousel: FunctionComponent<ComponentTypes> = (props) => {
+export const ArrowCarousel: FC<ComponentTypes> = (props) => {
   const [index, setIndex] = useState(props.index || 0)
 
   useEffect(() => {

package/src/elements/AutoCompleteField.tsx

@@ -1,4 +1,4 @@
-import React from "react"
+import { FC } from "react"
 import { Controller, useFormContext } from "react-hook-form"
 
 type TAutoCompleteFieldTypes = {
@@ -6,20 +6,18 @@ type TAutoCompleteFieldTypes = {
   rules: any
   shouldUnregister: boolean
 }
-export const AutoCompleteField: React.FunctionComponent<
-  TAutoCompleteFieldTypes
-> = (props) => {
+export const AutoCompleteField: FC<TAutoCompleteFieldTypes> = (props) => {
   const { control } = useFormContext()
   const { name, rules, shouldUnregister } = props
 
   return (
-    <React.Fragment>
+    <>
       <Controller
+        // className="theme_form_input"
         name={name}
         rules={rules}
         control={control}
         shouldUnregister={shouldUnregister}
-        // className="theme_form_input"
         render={({ field: { onChange, value } }) => {
           return (
             <input type="text" />
@@ -34,6 +32,6 @@ export const AutoCompleteField: React.FunctionComponent<
           )
         }}
       />
-    </React.Fragment>
+    </>
   )
 }

package/src/elements/BackToTop.tsx

@@ -1,4 +1,4 @@
-import React, { FunctionComponent, useState, useEffect } from "react"
+import { FC, RefObject, useState, useEffect } from "react"
 import { clsx } from "clsx"
 
 type ComponentTypes = {
@@ -6,10 +6,10 @@ type ComponentTypes = {
   paddingY?: number // Vertical padding relative to the attached corner
   paddingThreshold?: number // Increase to the threshold of the scroll value that has to be passed for the button to appear
   corner?: "top-left" | "top-right" | "bottom-left" | "bottom-right"
-  anchor: React.RefObject<HTMLInputElement>
+  anchor: RefObject<HTMLInputElement>
 }
 
-export const BackToTop: FunctionComponent<ComponentTypes> = ({ ...props }) => {
+export const BackToTop: FC<ComponentTypes> = ({ ...props }) => {
   const [visible, setVisible] = useState<boolean>(false)
 
   const getCoords = () => {

package/src/elements/Breadcrumb.tsx

@@ -1,18 +1,15 @@
-import React, { FC, ReactNode } from "react"
+import { FC, ReactNode } from "react"
 
 type TBreadcrumb = {
-  /**
-   * The array of crumbs, each one with a label and a href link
-   */
+  /** The array of crumbs, each one with a label and a href link */
   breadcrumbLinks: [{ label: string; href: string }]
-  /** The separator between each crumb, can be character or React Node */
+  /** The separator between each crumb, can be character or React Node. The default is ">" */
   separator?: string | ReactNode
 }
 
 const HawaBreadcrumb: FC<TBreadcrumb> = ({
   breadcrumbLinks,
   separator = ">",
-  ...props
 }) => {
   return (
     <div className="flex flex-row items-center gap-2 text-sm">

package/src/elements/DragDropImages.tsx

@@ -2,11 +2,9 @@ import React, { useEffect, useState } from "react"
 import { useDropzone } from "react-dropzone"
 import { HawaAlert } from "./HawaAlert"
 import { HawaButton } from "./HawaButton"
-
+//TODO: This element needs more improvements and testing
 type DragDropImagesTypes = {
-  /**
-   * The text label above the component. Consistant with the other form input fields
-   */
+  /**  The text label above the component. Consistant with the other form input fields   */
   label?: string
   files: [File]
   setFiles: any
@@ -19,9 +17,7 @@ type DragDropImagesTypes = {
   onClearFiles: any
   maxSize: number
   errorMessages: string
-  /**
-   * The translation object, use this to replace the default text with any translated text you want.
-   */
+  /** The translation object, use this to replace the default text with any translated text you want.*/
   texts: {
     clickHereToUpload: string
     maxFileSize: string

package/src/elements/DraggableCard.tsx

@@ -1,12 +1,10 @@
-import React, { ReactElement } from "react"
+import { ReactElement, FC } from "react"
 
 type DraggableCardTypes = {
   children: ReactElement
 }
 
-export const DraggableCard: React.FunctionComponent<DraggableCardTypes> = (
-  props
-) => {
+export const DraggableCard: FC<DraggableCardTypes> = (props) => {
   return (
     <div className="flex flex-row rounded bg-layoutPrimary-500 p-4">
       <button