@sikka/hawa 0.0.211 → 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.211",
+  "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/ComparingPlans.tsx

@@ -1,5 +1,6 @@
 import React, { useState } from "react"
-import { HawaTabs } from "../../elements"
+import { BsExclamationCircleFill } from "react-icons/bs"
+import { HawaTabs, HawaTooltip } from "../../elements"
 
 const CheckMark = () => (
   <svg
@@ -37,7 +38,7 @@ type ComparingPlansTypes = {
   plans: [
     {
       direction: "rtl" | "ltr"
-      features: [{ included: boolean; text: string }]
+      features: [{ included: boolean; text: string; description?: string }]
       price: number
       texts: {
         title: string
@@ -93,8 +94,8 @@ export const ComparingPlans: React.FunctionComponent<ComparingPlansTypes> = (
           }}
         />
       </div>
-      <div className="min-w-max overflow-hidden">
-        <div className="grid grid-cols-4 gap-x-16 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=" 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="flex items-center"></div>
           {props.plans.map((plan: any) => (
             <div>
@@ -125,12 +126,16 @@ export const ComparingPlans: React.FunctionComponent<ComparingPlansTypes> = (
           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="text-gray-500 dark:text-gray-400">
-                  {feature.text} (
-                  <a href="#" className="text-blue-600 hover:underline">
-                    view demo
-                  </a>
-                  )
+                <div className="  flex flex-row items-center gap-2  text-gray-500 dark:text-gray-400">
+                  {feature.text}
+                  {feature.description && (
+                    <HawaTooltip
+                      position="top-right"
+                      content={feature.description}
+                    >
+                      <BsExclamationCircleFill />
+                    </HawaTooltip>
+                  )}
                 </div>
                 <UncheckMark />
                 <CheckMark />

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"