@sikka/hawa 0.0.212 → 0.0.213

package/lib/layout/AppSidebar.d.ts

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 interface Props {
     isOpen: boolean;
     onClose: () => void;

package/package.json

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

package/src/blocks/AuthForms/CodeConfirmation.tsx

@@ -1,11 +1,5 @@
 import React, { useState } from "react"
-import {
-  HawaTextField,
-  HawaAlert,
-  HawaButton,
-  HawaPinInput,
-} from "../../elements"
-import { Controller, useForm } from "react-hook-form"
+import { HawaAlert, HawaButton, HawaPinInput } from "../../elements"
 import { HawaContainer } from "../../layout"
 
 type TConfirmation = {

package/src/blocks/Misc/EmptyState.tsx

@@ -2,6 +2,7 @@ import React from "react"
 import { HawaButton } from "../../elements"
 import { HawaContainer } from "../../layout"
 import { FaCheck } from "react-icons/fa"
+
 type TEmptyState = {
   variant?: "outlined" | "contained" | "neobrutalism"
 }

package/src/blocks/Misc/Newsletter.tsx

@@ -7,6 +7,7 @@ type TNewsletter = {
   texts: {
     wantToStayUpdated: string
     subscribeToNewsletter: string
+    submit: string
   }
   handleNewsletterSub: (e: string) => void
 }
@@ -19,8 +20,12 @@ export const Newsletter: React.FunctionComponent<TNewsletter> = ({
   return (
     <HawaContainer variant={variant} centered={true}>
       <div className="p-4 pt-0">
-        <h1 className="font-bold">{texts.wantToStayUpdated}</h1>
-        <span>{texts.subscribeToNewsletter}</span>
+        <h1 className="font-bold">
+          {texts.wantToStayUpdated ?? "Want to stay updated?"}
+        </h1>
+        <span>
+          {texts.subscribeToNewsletter ?? "Subscribe to our newsletter"}
+        </span>
       </div>
       <form
         className="flex flex-row gap-2"
@@ -37,7 +42,7 @@ export const Newsletter: React.FunctionComponent<TNewsletter> = ({
           margin="none"
         />
         <HawaButton size="full" margins="none">
-          Submit
+          {texts.submit ?? "Submit"}
         </HawaButton>
       </form>
     </HawaContainer>

package/src/blocks/Misc/NotFound.tsx

@@ -4,21 +4,29 @@ import { HawaContainer } from "../../layout"
 
 type NotFoundTypes = {
   variant?: "outlined" | "contained" | "neobrutalism"
+  texts?: {
+    pageNotFound: string
+    ifLost: string
+    home: string
+  }
 }
 
 export const NotFound: React.FunctionComponent<NotFoundTypes> = ({
   variant,
+  texts,
 }) => {
   return (
     <HawaContainer variant={variant}>
       <div className="flex flex-col items-center dark:text-white">
         <div className="text-center text-6xl font-bold ">404</div>
-        <div className="m-2 text-center text-xl font-bold ">Page Not Found</div>
+        <div className="m-2 text-center text-xl font-bold ">
+          {texts.pageNotFound ?? "Page Not Found"}
+        </div>
         <div className="text-center ">
-          If you're lost please contact us help@sikka.io{" "}
+          {texts.ifLost ?? "If you're lost please contact us help@sikka.io"}
         </div>
         <HawaButton color="primary" width="full">
-          Home
+          {texts.home ?? "Home"}
         </HawaButton>
       </div>
     </HawaContainer>

package/src/blocks/Payment/ChargeWalletForm.tsx

@@ -1,6 +1,5 @@
 import React, { useState } from "react"
-import { HawaButton, HawaTextField } from "../../elements"
-import { Controller, FormProvider, useForm } from "react-hook-form"
+import { HawaButton } from "../../elements"
 import { HawaContainer } from "../../layout"
 
 type ChargeWalletTypes = {
@@ -16,21 +15,28 @@ export const ChargeWalletForm: React.FunctionComponent<ChargeWalletTypes> = (
   props
 ) => {
   const [walletAmount, setWalletAmount] = useState(0)
-  const methods = useForm()
-  const {
-    formState: { errors },
-    handleSubmit,
-    control,
-  } = methods
 
   return (
     <HawaContainer>
-      {" "}
-      <div className="text-center text-5xl font-extrabold">
-        {Number(walletAmount).toLocaleString("en") || "0"}
+      <div className="p-4 text-center">
+        <div className=" text-5xl font-extrabold">
+          {Number(walletAmount).toLocaleString("en") || "0"}
+        </div>
         <div className="text-sm font-normal">{props.currency || "SAR"}</div>
       </div>
-      <FormProvider {...methods}>
+      <div className="mb-2 flex w-full flex-row gap-2 text-center">
+        <div className="w-40 whitespace-nowrap rounded bg-gray-100 p-4">
+          10 SAR
+        </div>
+        <div className="w-40 whitespace-nowrap rounded bg-gray-100 p-4">
+          100 SAR
+        </div>
+        <input
+          placeholder="Custom"
+          className="h-auto rounded bg-gray-100 p-4"
+        />
+      </div>
+      {/* <FormProvider {...methods}>
         <form onSubmit={handleSubmit(props.handleChargeWallet)}>
           <Controller
             control={control}
@@ -67,8 +73,11 @@ export const ChargeWalletForm: React.FunctionComponent<ChargeWalletTypes> = (
           >
             {props.texts.chargeWallet}
           </HawaButton>
-        </form>
-      </FormProvider>
+          </form>
+        </FormProvider> */}
+      <HawaButton color="primary" width="full">
+        {props.texts.chargeWallet}
+      </HawaButton>
     </HawaContainer>
   )
 }

package/src/blocks/Payment/CheckoutForm.tsx

@@ -109,7 +109,6 @@ export const CheckoutForm: React.FunctionComponent<CheckoutFormTypes> = (
                 rules={{ required: props.texts?.required }}
                 render={({ field }) => (
                   <HawaTextField
-                    // inForm
                     width="full"
                     type="text"
                     label={props.texts?.lastNameLabel + " *"}
@@ -125,7 +124,6 @@ export const CheckoutForm: React.FunctionComponent<CheckoutFormTypes> = (
               name="email"
               render={({ field }) => (
                 <HawaTextField
-                  // inForm
                   width="full"
                   type="text"
                   label={props.texts?.emailLabel + " *"}
@@ -150,7 +148,6 @@ export const CheckoutForm: React.FunctionComponent<CheckoutFormTypes> = (
                 rules={{ required: props.texts?.required }}
                 render={({ field }) => (
                   <HawaTextField
-                    // inForm
                     width="full"
                     type="text"
                     label={props.texts?.streetAddressLabel + " *"}
@@ -168,7 +165,6 @@ export const CheckoutForm: React.FunctionComponent<CheckoutFormTypes> = (
                 rules={{ required: props.texts?.required }}
                 render={({ field }) => (
                   <HawaTextField
-                    // inForm
                     width="full"
                     type="text"
                     label={props.texts?.buildingNumberLabel + " *"}
@@ -187,7 +183,6 @@ export const CheckoutForm: React.FunctionComponent<CheckoutFormTypes> = (
                 rules={{ required: props.texts?.required }}
                 render={({ field }) => (
                   <HawaTextField
-                    // inForm
                     width="full"
                     type="text"
                     label={props.texts?.stateLabel + " *"}
@@ -205,7 +200,6 @@ export const CheckoutForm: React.FunctionComponent<CheckoutFormTypes> = (
                 rules={{ required: props.texts?.required }}
                 render={({ field }) => (
                   <HawaTextField
-                    // inForm
                     width="full"
                     type="text"
                     label={props.texts?.cityLabel + " *"}
@@ -223,10 +217,8 @@ export const CheckoutForm: React.FunctionComponent<CheckoutFormTypes> = (
                 rules={{ required: props.texts?.required }}
                 render={({ field }) => (
                   <HawaTextField
-                    // inForm
                     width="full"
                     type="number"
-                    // variant="unscrollable"
                     label={props.texts?.zipCodeLabel + " *"}
                     helperText={errors.zipCode?.message}
                     {...field}
@@ -248,7 +240,6 @@ export const CheckoutForm: React.FunctionComponent<CheckoutFormTypes> = (
                     helperText={errors.country?.message}
                     options={countries}
                     getOptionLabel={(countries) => countries.country_label}
-                    // {...field}
                     onChange={(e) => field.onChange(e.country_label)}
                     value={field.value ?? ""}
                   >
@@ -260,11 +251,7 @@ export const CheckoutForm: React.FunctionComponent<CheckoutFormTypes> = (
                 )}
               />
             </div>
-            <HawaButton
-              color="primary"
-              // type="submit"
-              width="full"
-            >
+            <HawaButton color="primary" width="full">
               {props.texts.payNow}
             </HawaButton>
           </form>

package/src/blocks/Payment/Confirmation.tsx

@@ -70,7 +70,6 @@ export const ConfirmationPage: React.FunctionComponent<
               { hidden: false, value: "Price" },
             ]}
             rows={props.products}
-            // end={["Total", props.total]}
           />
         )}
       </div>

package/src/blocks/Payment/PayWithWallet.tsx

@@ -17,7 +17,6 @@ export const PayWithWallet: React.FunctionComponent<PayWithWalletTypes> = (
         <div className="text-sm font-normal">{props.currency || "SAR"}</div>
       </div>
       <HawaButton
-        // type="submit"
         width="full"
         color="primary"
         onClick={props.handlePayWithWallet}

package/src/blocks/Payment/index.ts

@@ -1,20 +1,6 @@
-// "use strict";
-
-// var _GooglePay = require("./Gateway/GooglePay");
-// var _Payfort = require("./Gateway/Payfort");
-// var _Paypal = require("./Gateway/Paypal");
-// var _Wallet = require("./Gateway/Wallet");
-// var _PaymentMethod = require("./PaymentMethod");
-
-// exports.GooglePay = _GooglePay.default;
-// exports.Payfort = _Payfort.default;
-// exports.Paypal = _Paypal.default;
-// exports.Wallet = _Wallet.default;
-// exports.PaymentMethod = _PaymentMethod.default;
-
-export * from "./SelectPayment";
-export * from "./CreditCardForm";
-export * from "./ChargeWalletForm";
-export * from "./PayWithWallet";
-export * from "./CheckoutForm";
-export * from "./Confirmation";
+export * from "./SelectPayment"
+export * from "./CreditCardForm"
+export * from "./ChargeWalletForm"
+export * from "./PayWithWallet"
+export * from "./CheckoutForm"
+export * from "./Confirmation"

package/src/blocks/Pricing/PricingPlans.tsx

@@ -1,5 +1,6 @@
 import React, { useState } from "react"
 import { HawaPricingCard, HawaTabs } from "../../elements"
+
 // TODO: make lang into direction rtl | ltr
 
 type PricingPlansTypes = {

package/src/blocks/Referral/ReferralAccount.tsx

@@ -1,6 +1,6 @@
 import React from "react"
 import { FaClone } from "react-icons/fa"
-import { HawaAlert, HawaButton, HawaTable, HawaTooltip } from "../../elements"
+import { HawaButton } from "../../elements"
 import { HawaContainer } from "../../layout"
 
 type ReferralAccount = {

package/src/blocks/Referral/ReferralStats.tsx

@@ -1,5 +1,4 @@
 import React from "react"
-import { FaClone } from "react-icons/fa"
 import { HawaAlert, HawaButton } from "../../elements"
 import { HawaContainer } from "../../layout"
 

package/src/elements/DragDropImages.tsx

@@ -29,178 +29,176 @@ export const DragDropImages: React.FunctionComponent<DragDropImagesTypes> = ({
   files,
   setFiles,
   setDeletedFiles,
+  onAcceptedFiles,
+  errorMessages,
   maxFiles,
   accept,
-  onAcceptedFiles,
   showPreview,
   onDeleteFile,
   onClearFiles,
   maxSize,
-  errorMessages,
   label,
-}) =>
-  // props
-  {
-    const [cmp, setCmp] = useState(0)
-    const [max, setMax] = useState<any>(0)
-    //const [thumbs, setThumbs] = useState("");
-    const {
-      getRootProps,
-      getInputProps,
-      fileRejections,
-      acceptedFiles,
-      isDragActive,
-    } = useDropzone({
-      multiple: true,
-      accept: accept,
-      maxSize: maxSize,
-      maxFiles: maxFiles,
-      onDrop: (acceptedFiles) => {
-        setFiles(
-          acceptedFiles.map((file, index) =>
-            Object.assign(file, {
-              preview: URL.createObjectURL(file),
-            })
-          )
+}) => {
+  const [cmp, setCmp] = useState(0)
+  const [max, setMax] = useState<any>(0)
+  //const [thumbs, setThumbs] = useState("");
+  const {
+    getRootProps,
+    getInputProps,
+    fileRejections,
+    acceptedFiles,
+    isDragActive,
+  } = useDropzone({
+    multiple: true,
+    accept: accept,
+    maxSize: maxSize,
+    maxFiles: maxFiles,
+    onDrop: (acceptedFiles) => {
+      setFiles(
+        acceptedFiles.map((file, index) =>
+          Object.assign(file, {
+            preview: URL.createObjectURL(file),
+          })
         )
-      },
-    })
-    useEffect(
-      () => () => {
-        files?.forEach((file: any) => {
-          URL.revokeObjectURL(file.preview)
-        })
-      },
-      [files]
-    )
-    useEffect(() => {
-      setFiles(acceptedFiles)
-    }, [acceptedFiles, cmp])
-    onClearFiles = () => {
-      acceptedFiles.length = 0
-      acceptedFiles.splice(0, acceptedFiles.length)
-      setFiles([])
-    }
-    useEffect(() => {
-      if (maxSize > 0) {
-        const k = 1024
-        const sizes = ["Bytes", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"]
-        const i = Math.floor(Math.log(maxSize) / Math.log(1024))
+      )
+    },
+  })
+  useEffect(
+    () => () => {
+      files?.forEach((file: any) => {
+        URL.revokeObjectURL(file.preview)
+      })
+    },
+    [files]
+  )
+  useEffect(() => {
+    setFiles(acceptedFiles)
+  }, [acceptedFiles, cmp])
+  onClearFiles = () => {
+    acceptedFiles.length = 0
+    acceptedFiles.splice(0, acceptedFiles.length)
+    setFiles([])
+  }
+  useEffect(() => {
+    if (maxSize > 0) {
+      const k = 1024
+      const sizes = ["Bytes", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"]
+      const i = Math.floor(Math.log(maxSize) / Math.log(1024))
 
-        setMax(
-          parseFloat((maxSize / Math.pow(1024, i)).toFixed(2)) + " " + sizes[i]
-        )
-      }
-    }, [maxSize])
-    const errs = fileRejections.map((rej, i) => {
-      return (
-        <HawaAlert
-          text={rej.file.name}
-          title={rej.errors[0].code}
-          severity="error"
-        />
+      setMax(
+        parseFloat((maxSize / Math.pow(1024, i)).toFixed(2)) + " " + sizes[i]
       )
-    })
-    const thumbs = files?.map((file: any, index: any) => (
-      <div className="relative m-3 rounded ">
-        <button
-          onClick={(e) => {
-            e.stopPropagation()
-            acceptedFiles.splice(acceptedFiles.indexOf(file), 1)
-            setCmp(Math.random)
-            onDeleteFile(file)
-          }}
-          type="button"
-          className="absolute left-0 ml-auto inline-flex items-center rounded rounded-tr-none rounded-bl-none bg-gray-900 p-1.5 text-sm text-gray-400 hover:bg-gray-200 hover:text-gray-900 dark:hover:bg-gray-600 dark:hover:text-white"
-          data-modal-toggle="defaultModal"
+    }
+  }, [maxSize])
+  const errs = fileRejections.map((rej, i) => {
+    return (
+      <HawaAlert
+        text={rej.file.name}
+        title={rej.errors[0].code}
+        severity="error"
+      />
+    )
+  })
+  const thumbs = files?.map((file: any, index: any) => (
+    <div className="relative m-3 rounded ">
+      <button
+        onClick={(e) => {
+          e.stopPropagation()
+          acceptedFiles.splice(acceptedFiles.indexOf(file), 1)
+          setCmp(Math.random)
+          onDeleteFile(file)
+        }}
+        type="button"
+        className="absolute left-0 ml-auto inline-flex items-center rounded rounded-tr-none rounded-bl-none bg-gray-900 p-1.5 text-sm text-gray-400 hover:bg-gray-200 hover:text-gray-900 dark:hover:bg-gray-600 dark:hover:text-white"
+        data-modal-toggle="defaultModal"
+      >
+        <svg
+          aria-hidden="true"
+          className="h-5 w-5"
+          fill="currentColor"
+          viewBox="0 0 20 20"
+          xmlns="http://www.w3.org/2000/svg"
         >
-          <svg
-            aria-hidden="true"
-            className="h-5 w-5"
-            fill="currentColor"
-            viewBox="0 0 20 20"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              fillRule="evenodd"
-              d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
-              clipRule="evenodd"
-            ></path>
-          </svg>
-          <span className="sr-only">Close modal</span>
-        </button>
+          <path
+            fillRule="evenodd"
+            d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
+            clipRule="evenodd"
+          ></path>
+        </svg>
+        <span className="sr-only">Close modal</span>
+      </button>
 
-        <div
-          style={{
-            display: "flex",
-            justifyContent: "center",
-            alignItems: "center",
-            overflow: "hidden",
-            height: 100,
-            width: 100,
-            backgroundImage: `url(${file.preview})`,
-            backgroundSize: "cover",
-            backgroundPosition: "center",
-            border: "1px solid black",
-          }}
-          className="rounded-lg"
-          key={file.name}
-        />
-      </div>
-    ))
+      <div
+        style={{
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center",
+          overflow: "hidden",
+          height: 100,
+          width: 100,
+          backgroundImage: `url(${file.preview})`,
+          backgroundSize: "cover",
+          backgroundPosition: "center",
+          border: "1px solid black",
+        }}
+        className="rounded-lg"
+        key={file.name}
+      />
+    </div>
+  ))
 
-    return (
-      <div>
-        {label && (
-          <div className="mb-2 block text-sm font-medium text-gray-900 dark:text-gray-300">
-            {label}
-          </div>
-        )}
-        <div
-          {...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="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
-                onClick={(e) => {
-                  e.stopPropagation()
-                  onClearFiles(acceptedFiles)
-                }}
-              >
-                Clear All
-              </HawaButton>
-            )}
-          </div>
-          {thumbs && showPreview ? (
-            <aside
-              style={{
-                display: "flex",
-                flexDirection: "row",
-                flexWrap: "wrap",
-                // marginTop: 10,
+  return (
+    <div>
+      {label && (
+        <div className="mb-2 block text-sm font-medium text-gray-900 dark:text-gray-300">
+          {label}
+        </div>
+      )}
+      <div
+        {...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="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
+              onClick={(e) => {
+                e.stopPropagation()
+                onClearFiles(acceptedFiles)
               }}
-              className="rounded-lg border-red-500"
             >
-              {thumbs}
-            </aside>
-          ) : null}
-          <div className="px-2">
-            {fileRejections[0]?.errors[0]?.code === "too-many-files" ? (
-              <HawaAlert text={texts.tooManyFiles} severity="error" />
-            ) : fileRejections[0]?.errors[0]?.code === "file-too-large" ? (
-              <HawaAlert text={texts.fileTooLarge} severity="error" />
-            ) : (
-              errs
-            )}
-          </div>
-          {}
+              Clear All
+            </HawaButton>
+          )}
         </div>
+        {thumbs && showPreview ? (
+          <aside
+            style={{
+              display: "flex",
+              flexDirection: "row",
+              flexWrap: "wrap",
+              // marginTop: 10,
+            }}
+            className="rounded-lg border-red-500"
+          >
+            {thumbs}
+          </aside>
+        ) : null}
+        <div className="px-2">
+          {fileRejections[0]?.errors[0]?.code === "too-many-files" ? (
+            <HawaAlert text={texts.tooManyFiles} severity="error" />
+          ) : fileRejections[0]?.errors[0]?.code === "file-too-large" ? (
+            <HawaAlert text={texts.fileTooLarge} severity="error" />
+          ) : (
+            errs
+          )}
+        </div>
+        {}
       </div>
-    )
-  }
+    </div>
+  )
+}