@sikka/hawa 0.0.58 → 0.0.59

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sikka/hawa",
-  "version": "0.0.58",
+  "version": "0.0.59",
   "description": "UI Kit",
   "main": "lib/index.js",
   "module": "es/index.es.js",
@@ -84,6 +84,7 @@
     "@storybook/manager-webpack4/webpack": "^5"
   },
   "dependencies": {
-    "flowbite": "^1.5.3"
+    "flowbite": "^1.5.3",
+    "react-icons": "^4.6.0"
   }
 }

package/src/blocks/Account/UserProfileForm.js

@@ -1,6 +1,7 @@
 import React from "react";
 import { HawaButton, HawaTextField } from "../../elements";
 import { Controller, FormProvider, useForm } from "react-hook-form";
+import { HawaContainer } from "../../layout";
 
 export const UserProfileForm = (props) => {
   const methods = useForm();
@@ -12,7 +13,8 @@ export const UserProfileForm = (props) => {
   } = methods;
 
   return (
-    <div className="flex flex-col divide-y divide-gray-300 bg-blue-300 rounded-xl p-4">
+    <HawaContainer>
+      {" "}
       <FormProvider {...methods}>
         <form onSubmit={handleSubmit(props.handleUpdateProfile)}>
           <Controller
@@ -140,12 +142,14 @@ export const UserProfileForm = (props) => {
               );
             })}
 
-          <HawaButton fullWidth type="submit">
-            {props.texts.updateProfile}
-          </HawaButton>
+          <HawaButton
+            fullWidth
+            type="submit"
+            text={props.texts.updateProfile}
+          />
         </form>
       </FormProvider>
-    </div>
+    </HawaContainer>
   );
 };
 

package/src/blocks/Account/UserSettingsForm.js

@@ -1,12 +1,17 @@
 import { HawaButton } from "../../elements";
+import { HawaContainer } from "../../layout";
 
 export const UserSettingsForm = (props) => {
   return (
-    <div className="flex flex-col divide-y divide-gray-300 bg-blue-300 rounded-xl p-4">
+    <HawaContainer>
+      {" "}
       {props.children}
-      <HawaButton type="submit" fullWidth onClick={props.handleSaveSettings}>
-        {props.saveSettingsText}
-      </HawaButton>
-    </div>
+      <HawaButton
+        text={props.saveSettingsText}
+        type="submit"
+        fullWidth
+        onClick={props.handleSaveSettings}
+      />
+    </HawaContainer>
   );
 };

package/src/blocks/AuthForms/CodeConfirmation.js

@@ -2,6 +2,7 @@ import React from "react";
 import { HawaTextField, HawaAlert, HawaButton } from "../../elements";
 import { Controller, useForm } from "react-hook-form";
 import PropTypes from "prop-types";
+import { HawaContainer } from "../../layout";
 
 export const CodeConfirmation = (props) => {
   const methods = useForm();
@@ -12,7 +13,8 @@ export const CodeConfirmation = (props) => {
   } = methods;
 
   return (
-    <div className="flex flex-col divide-y divide-gray-300 bg-blue-300 rounded-xl p-4">
+    <HawaContainer>
+      {" "}
       {props.showError && (
         <HawaAlert
           title={props.errorTitle}
@@ -40,11 +42,9 @@ export const CodeConfirmation = (props) => {
           }}
         />
 
-        <HawaButton type="submit" fullWidth>
-          {props.texts.confirmText}
-        </HawaButton>
+        <HawaButton type="submit" fullWidth text={props.texts.confirmText} />
       </form>
-    </div>
+    </HawaContainer>
   );
 };
 CodeConfirmation.propTypes = {

package/src/blocks/AuthForms/NewPasswordForm.js

@@ -2,6 +2,7 @@ import React, { useState } from "react";
 import { HawaTextField, HawaAlert, HawaButton } from "../../elements";
 import { Controller, FormProvider, useForm } from "react-hook-form";
 import PropTypes from "prop-types";
+import { HawaContainer } from "../../layout";
 
 export const NewPasswordForm = (props) => {
   const [matchError, setMatchError] = useState(false);
@@ -22,7 +23,8 @@ export const NewPasswordForm = (props) => {
   };
 
   return (
-    <div className="flex flex-col divide-y divide-gray-300 bg-blue-300 rounded-xl p-4">
+    <HawaContainer>
+      {" "}
       {matchError && (
         <HawaAlert text={props.texts.passwordMatchError} severity="error" />
       )}
@@ -68,13 +70,15 @@ export const NewPasswordForm = (props) => {
               }}
             />
 
-            <HawaButton type="submit" fullWidth>
-              {props.texts.updatePassword}
-            </HawaButton>
+            <HawaButton
+              type="submit"
+              fullWidth
+              text={props.texts.updatePassword}
+            />
           </form>
         </FormProvider>
       )}
-    </div>
+    </HawaContainer>
   );
 };
 NewPasswordForm.propTypes = {

package/src/blocks/AuthForms/ResetPasswordForm.js

@@ -2,6 +2,7 @@ import React from "react";
 import { Controller, useForm } from "react-hook-form";
 import { HawaButton, HawaTextField } from "../../elements";
 import PropTypes from "prop-types";
+import { HawaContainer } from "../../layout";
 
 export const ResetPasswordForm = (props) => {
   const methods = useForm();
@@ -12,7 +13,8 @@ export const ResetPasswordForm = (props) => {
     control
   } = methods;
   return (
-    <div className="flex flex-col divide-y divide-gray-300 bg-blue-300 rounded-xl p-4">
+    <HawaContainer>
+      {" "}
       {!props.sent ? (
         <form onSubmit={handleSubmit(props.handleResetPassword)}>
           <Controller
@@ -38,14 +40,16 @@ export const ResetPasswordForm = (props) => {
               }
             }}
           />
-          <HawaButton fullWidth type="submit">
-            {props.texts.resetPassword}
-          </HawaButton>
+          <HawaButton
+            fullWidth
+            type="submit"
+            text={props.texts.resetPassword}
+          />{" "}
         </form>
       ) : (
         <div className="text-center">{props.texts.emailSentText}</div>
       )}
-    </div>
+    </HawaContainer>
   );
 };
 ResetPasswordForm.propTypes = {

package/src/blocks/AuthForms/SignInForm.js

@@ -7,6 +7,7 @@ import {
 } from "../../elements";
 import { Controller, useForm } from "react-hook-form";
 import PropTypes from "prop-types";
+import { HawaContainer } from "../../layout/HawaContainer";
 
 export const SignInForm = (props) => {
   const methods = useForm();
@@ -17,7 +18,7 @@ export const SignInForm = (props) => {
   } = methods;
 
   return (
-    <div className="flex flex-col divide-y divide-gray-300 bg-blue-300 rounded-xl p-4">
+    <HawaContainer withDividers>
       <form onSubmit={handleSubmit(props.handleSignIn)}>
         {props.showError && (
           <HawaAlert
@@ -49,7 +50,6 @@ export const SignInForm = (props) => {
             }
           }}
         />
-
         <Controller
           control={control}
           name="password"
@@ -67,17 +67,13 @@ export const SignInForm = (props) => {
           )}
           rules={{ required: props.texts.passwordRequiredText }}
         />
-
         <div
-          className="text-xs cursor-pointer w-fit"
+          className="text-xs cursor-pointer w-fit mb-3"
           onClick={props.handleForgotPassword}
         >
           {props.texts.forgotPasswordText}
         </div>
-
-        <HawaButton fullWidth type="submit">
-          {props.texts.signInText}
-        </HawaButton>
+        <HawaButton fullWidth type="submit" text={props.texts.signInText} />{" "}
         <div className="font-semibold p-3 text-center text-sm">
           {props.texts.newUserText}{" "}
           <span
@@ -89,7 +85,6 @@ export const SignInForm = (props) => {
         </div>
       </form>
       {/* <Divider /> */}
-
       {/* <div className="divide-y divide-gray-900"></div> */}
       {props.viaGithub || props.viaGoogle || props.viaTwitter ? (
         <div className="flex flex-col ">
@@ -116,7 +111,7 @@ export const SignInForm = (props) => {
           )}
         </div>
       ) : null}
-    </div>
+    </HawaContainer>
   );
 };
 SignInForm.propTypes = {

package/src/blocks/AuthForms/SignInPhone.js

@@ -2,6 +2,7 @@ import { useState } from "react";
 import { Controller, useForm } from "react-hook-form";
 import { HawaButton } from "../../elements";
 import HawaPhoneInput from "../../elements/HawaPhoneInput";
+import { HawaContainer } from "../../layout";
 
 export const SignInPhone = (props) => {
   const [phone, setPhone] = useState("");
@@ -12,7 +13,7 @@ export const SignInPhone = (props) => {
     control
   } = methods;
   return (
-    <div className="flex flex-col divide-y divide-gray-300 bg-blue-300 rounded-xl p-4">
+    <HawaContainer>
       <form onSubmit={handleSubmit(props.onSubmit)}>
         <Controller
           control={control}
@@ -30,10 +31,8 @@ export const SignInPhone = (props) => {
             />
           )}
         />
-        <HawaButton fullWidth type="submit">
-          {props.SignInButtonText}
-        </HawaButton>
+        <HawaButton fullWidth type="submit" text={props.SignInButtonText} />
       </form>
-    </div>
+    </HawaContainer>
   );
 };

package/src/blocks/AuthForms/SignUpForm.js

@@ -7,6 +7,7 @@ import {
 } from "../../elements";
 import PropTypes from "prop-types";
 import { Controller, FormProvider, useForm } from "react-hook-form";
+import { HawaContainer } from "../../layout/HawaContainer";
 
 export const SignUpForm = (props) => {
   const methods = useForm();
@@ -17,7 +18,7 @@ export const SignUpForm = (props) => {
   } = methods;
 
   return (
-    <div className="flex flex-col divide-y divide-gray-300 bg-blue-300 rounded-xl p-4">
+    <HawaContainer withDividers>
       {props.showError && (
         <HawaAlert
           title={props.errorTitle}
@@ -25,7 +26,6 @@ export const SignUpForm = (props) => {
           severity="error"
         />
       )}
-
       <FormProvider {...methods}>
         <form onSubmit={handleSubmit(props.handleSignUp)}>
           <Controller
@@ -46,7 +46,6 @@ export const SignUpForm = (props) => {
               required: props.texts.fullNameRequiredText
             }}
           />
-
           <Controller
             control={control}
             name="email"
@@ -87,13 +86,9 @@ export const SignUpForm = (props) => {
             )}
             rules={{ required: props.texts.passwordRequiredText }}
           />
-
-          <HawaButton fullWidth type="submit">
-            {props.texts.signUpText}
-          </HawaButton>
+          <HawaButton fullWidth type="submit" text={props.texts.signUpText} />{" "}
         </form>
       </FormProvider>
-
       <div className="font-semibold p-3 text-center text-sm">
         {props.texts.existingUserText}{" "}
         <span
@@ -103,7 +98,6 @@ export const SignUpForm = (props) => {
           {props.texts.signInText}
         </span>
       </div>
-
       {props.viaGithub || props.viaGoogle || props.viaTwitter ? (
         <div style={{ display: "flex", flexDirection: "column" }}>
           {props.viaGoogle && (
@@ -129,7 +123,7 @@ export const SignUpForm = (props) => {
           )}
         </div>
       ) : null}
-    </div>
+    </HawaContainer>
   );
 };
 

package/src/blocks/Misc/NotFound.js

@@ -17,7 +17,7 @@ export const NotFound = (props) => {
         <div className="text-center">
           If you're lost please contact us help@sikka.io{" "}
         </div>
-        <HawaButton fullWidth>Home</HawaButton>
+        <HawaButton fullWidth text={"Home"} />
       </div>
     </div>
   );

package/src/blocks/Payment/ChargeWalletForm.js

@@ -2,6 +2,7 @@ import React, { useState } from "react";
 import { HawaButton, HawaTextField } from "../../elements";
 import { Controller, FormProvider, useForm } from "react-hook-form";
 import PropTypes from "prop-types";
+import { HawaContainer } from "../../layout";
 
 export const ChargeWalletForm = (props) => {
   const [walletAmount, setWalletAmount] = useState(0);
@@ -13,7 +14,8 @@ export const ChargeWalletForm = (props) => {
   } = methods;
 
   return (
-    <div className="flex flex-col bg-blue-300 rounded-xl p-4">
+    <HawaContainer>
+      {" "}
       <div className="text-5xl font-extrabold text-center">
         {Number(walletAmount).toLocaleString("en") || "0"}
         <div className="text-sm font-normal">{props.currency || "SAR"}</div>
@@ -48,12 +50,14 @@ export const ChargeWalletForm = (props) => {
             }}
           />
 
-          <HawaButton type="submit" fullWidth>
-            {props.texts.chargeWallet}
-          </HawaButton>
+          <HawaButton
+            type="submit"
+            fullWidth
+            text={props.texts.chargeWallet}
+          ></HawaButton>
         </form>
       </FormProvider>
-    </div>
+    </HawaContainer>
   );
 };
 

package/src/blocks/Payment/CheckoutForm.js

@@ -7,6 +7,7 @@ import {
 } from "../../elements";
 import { Controller, FormProvider, useForm } from "react-hook-form";
 import PropTypes from "prop-types";
+import { HawaContainer } from "../../layout";
 
 export const CheckoutForm = (props) => {
   let isArabic = props.lang === "ar";
@@ -32,7 +33,8 @@ export const CheckoutForm = (props) => {
     }
   };
   return (
-    <div className="flex flex-col bg-blue-300 rounded-xl p-4">
+    <HawaContainer withDividers>
+      {" "}
       <div>
         <div className="text-xl text-center font-semibold mb-2">
           {props.texts.orderDetails}
@@ -44,7 +46,6 @@ export const CheckoutForm = (props) => {
           end={["Total", props.total]}
         />
       </div>
-
       <div>
         <div className="text-xl text-center font-semibold my-2">
           {props.texts.billingAddress}
@@ -111,7 +112,6 @@ export const CheckoutForm = (props) => {
                 }
               }}
             />
-
             <div sx={containerStyle}>
               <Controller
                 control={control}
@@ -184,7 +184,7 @@ export const CheckoutForm = (props) => {
                 )}
               />
             </div>
-            <div sx={containerStyle}>
+            <div className="mb-3">
               <Controller
                 control={control}
                 name="zipCode"
@@ -229,13 +229,11 @@ export const CheckoutForm = (props) => {
                 )}
               />
             </div>
-            <HawaButton type="submit" fullWidth>
-              {props.texts.payNow}
-            </HawaButton>
+            <HawaButton type="submit" fullWidth text={props.texts.payNow} />{" "}
           </form>
         </FormProvider>
       </div>
-    </div>
+    </HawaContainer>
   );
 };
 

package/src/blocks/Payment/Confirmation.js

@@ -1,12 +1,14 @@
 import React from "react";
 import { HawaButton, HawaTable } from "../../elements";
 import PropTypes from "prop-types";
+import { HawaContainer } from "../../layout";
 
 export const ConfirmationPage = (props) => {
   let isArabic = props.lang === "ar";
 
   return (
-    <div className="flex flex-col divide-gray-300 bg-blue-300 divide-y rounded-xl p-4">
+    <HawaContainer withDividers>
+      {" "}
       <div className="text-3xl font-bold text-center py-5">
         {props.confirmationTitle}
       </div>
@@ -17,7 +19,6 @@ export const ConfirmationPage = (props) => {
         <div className="text-center">{props.texts.yourOrderNumber}</div>
         <div className="font-bold text-center">{props.orderNumber}</div>
       </div>
-
       <div className="py-5">
         <div className="text-xl font-semibold mb-3 text-center">
           {props.texts.orderDetails}
@@ -32,15 +33,21 @@ export const ConfirmationPage = (props) => {
         )}
       </div>
       <div className="flex flex-col py-5 justify-center items-center">
-        <HawaButton fullWidth onClick={props.handlePrint}>
-          {props.texts.print}
-        </HawaButton>
-        <HawaButton fullWidth onClick={props.handleHistory}>
-          {props.texts.history}
-        </HawaButton>
-        <HawaButton fullWidth onClick={props.handleHome}>
-          {props.texts.homePage}
-        </HawaButton>
+        <HawaButton
+          fullWidth
+          onClick={props.handlePrint}
+          text={props.texts.print}
+        />{" "}
+        <HawaButton
+          fullWidth
+          onClick={props.handleHistory}
+          text={props.texts.history}
+        />{" "}
+        <HawaButton
+          fullWidth
+          onClick={props.handleHome}
+          text={props.texts.homePage}
+        />{" "}
         <div className="mt-5 mb-5 text-center text-sm">
           {props.texts.fasterPaymentNote}
         </div>
@@ -51,7 +58,7 @@ export const ConfirmationPage = (props) => {
           {props.texts.refundPolicy}
         </a>
       </div>
-    </div>
+    </HawaContainer>
   );
 };
 

package/src/blocks/Payment/CreditCardForm.js

@@ -1,6 +1,7 @@
 import React from "react";
 import { HawaButton, HawaTextField } from "../../elements";
 import { Controller, useForm } from "react-hook-form";
+import { HawaContainer } from "../../layout";
 
 export const CreditCardForm = (props) => {
   const methods = useForm();
@@ -11,7 +12,8 @@ export const CreditCardForm = (props) => {
   } = methods;
 
   return (
-    <div className="flex flex-col bg-blue-300 rounded-xl p-4">
+    <HawaContainer>
+      {" "}
       <form onSubmit={handleSubmit(props.handle)}>
         <HawaTextField
           fullWidth
@@ -24,7 +26,6 @@ export const CreditCardForm = (props) => {
           }}
           helperText={errors.password?.message}
         />
-
         <Controller
           control={control}
           name="cardName"
@@ -76,15 +77,13 @@ export const CreditCardForm = (props) => {
             />
           )}
         />
-
         <HawaButton
           type="submit"
           fullWidth
           onClick={props.handlePayWithCreditCard}
-        >
-          {"Pay with Credit Card"}
-        </HawaButton>
+          text={"Pay with Credit Card"}
+        />{" "}
       </form>
-    </div>
+    </HawaContainer>
   );
 };

package/src/blocks/Payment/Form/CForm.js

@@ -305,20 +305,10 @@ export default function CForm({
               )}
           </form>
           <HawaButton
-            // color="primary"
             fullWidth
             onClick={handlePayfortForm}
-          >
-            {/* {loading ? (
-              <CircularProgress
-                variant="indeterminate"
-                style={{ color: "white", display: "none" }}
-                size={25}
-              />
-            ) : ( */}
-              <span className="pay-new-btn-txt">{t("pay-now")}</span>
-            {/* )} */}
-          </HawaButton>
+            text={<span className="pay-new-btn-txt">{t("pay-now")}</span>}
+          />{" "}
         </div>
       </div>
     </div>

package/src/blocks/Payment/PayWithWallet.js

@@ -1,16 +1,20 @@
 import React from "react";
 import { HawaButton } from "../../elements";
+import { HawaContainer } from "../../layout";
 
 export const PayWithWallet = (props) => {
   return (
-    <div className="flex flex-col bg-blue-300 rounded-xl p-4">
+    <HawaContainer>
       <div className="text-5xl font-extrabold text-center">
         {props.walletBalance || "0"}
         <div className="text-sm font-normal">{props.currency || "SAR"}</div>
       </div>
-      <HawaButton type="submit" fullWidth onClick={props.handlePayWithWallet}>
-        {"Pay Now"}
-      </HawaButton>
-    </div>
+      <HawaButton
+        type="submit"
+        fullWidth
+        onClick={props.handlePayWithWallet}
+        text={"Pay Now"}
+      />
+    </HawaContainer>
   );
 };

package/src/blocks/Payment/SelectPayment.js

@@ -1,10 +1,12 @@
 import React from "react";
 import PropTypes from "prop-types";
 import { HawaTypography, HawaLogoButton } from "../../elements";
+import { HawaContainer } from "../../layout";
 
 export const SelectPayment = (props) => {
   return (
-    <div className="flex flex-col w-1/3 bg-blue-300 rounded-xl p-4">
+    <HawaContainer>
+      {/* // <div className="flex flex-col w-1/3 bg-blue-300 rounded-xl p-4"> */}
       <HawaTypography align="center">Choose Payment Method</HawaTypography>
       {props.viaWallet && (
         <HawaLogoButton
@@ -55,7 +57,7 @@ export const SelectPayment = (props) => {
           onClick={props.handleApplePay}
         />
       )}
-    </div>
+    </HawaContainer>
   );
 };
 

package/src/elements/DragDropImages.js

@@ -157,9 +157,8 @@ export const DragDropImages = ({
               e.stopPropagation();
               onClearFiles(acceptedFiles);
             }}
-          >
-            Clear All
-          </HawaButton>
+            text={"Clear All"}
+          />
         )}
 
         {thumbs && showPreview ? (