@sikka/hawa 0.0.50 → 0.0.52

package/package.json

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

package/src/blocks/Account/UserProfileForm.js

@@ -1,7 +1,6 @@
 import React from "react";
 import { HawaButton, HawaTextField } from "../../elements";
 import { Controller, FormProvider, useForm } from "react-hook-form";
-import Container from "@mui/material/Container";
 
 export const UserProfileForm = (props) => {
   const methods = useForm();
@@ -13,7 +12,7 @@ export const UserProfileForm = (props) => {
   } = methods;
 
   return (
-    <Container maxWidth="sm">
+    <div className="flex flex-col divide-y divide-gray-300 bg-blue-300 rounded-xl p-4">
       <FormProvider {...methods}>
         <form onSubmit={handleSubmit(props.handleUpdateProfile)}>
           <Controller
@@ -146,7 +145,7 @@ export const UserProfileForm = (props) => {
           </HawaButton>
         </form>
       </FormProvider>
-    </Container>
+    </div>
   );
 };
 

package/src/blocks/Account/UserSettingsForm.js

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

package/src/blocks/Misc/NotFound.js

@@ -1,8 +1,6 @@
 import React from "react";
-import Container from "@mui/material/Container";
 import PropTypes from "prop-types";
-import Typography from "@mui/material/Typography";
-import { Button } from "@mui/material";
+import { HawaButton } from "../../elements";
 
 export const NotFound = (props) => {
   return (
@@ -13,27 +11,14 @@ export const NotFound = (props) => {
         alignItems: "center"
       }}
     >
-      <Typography variant="h2" fontWeight={700}>
-        404
-      </Typography>
-      <Typography variant="h5" fontWeight={700}>
-        Page Not Found
-      </Typography>
-      <Container
-        style={{
-          maxWidth: 300,
-          marginTop: 10,
-          direction: props.lang === "ar" ? "rtl" : "ltr"
-        }}
-        maxWidth="xs"
-      >
-        <Typography textAlign={"center"}>
+      <div className="text-6xl font-bold">404</div>
+      <div className="text-xl m-2 font-bold">Page Not Found</div>
+      <div className="flex w-40 flex-col bg-blue-300 rounded-xl p-4">
+        <div className="text-center">
           If you're lost please contact us help@sikka.io{" "}
-        </Typography>
-        <Button style={{ marginTop: 5 }} variant="contained">
-          Home
-        </Button>
-      </Container>
+        </div>
+        <HawaButton fullWidth>Home</HawaButton>
+      </div>
     </div>
   );
 };

package/src/blocks/Payment/ChargeWalletForm.js

@@ -1,8 +1,6 @@
 import React, { useState } from "react";
 import { HawaButton, HawaTextField } from "../../elements";
 import { Controller, FormProvider, useForm } from "react-hook-form";
-import Container from "@mui/material/Container";
-import Typography from "@mui/material/Typography";
 import PropTypes from "prop-types";
 
 export const ChargeWalletForm = (props) => {
@@ -15,16 +13,11 @@ export const ChargeWalletForm = (props) => {
   } = methods;
 
   return (
-    <Container maxWidth="xs">
-      <Typography
-        align="center"
-        variant="h2"
-        fontWeight={500}
-        style={{ marginBottom: 20 }}
-      >
+    <div className="flex flex-col bg-blue-300 rounded-xl p-4">
+      <div className="text-5xl font-extrabold text-center">
         {Number(walletAmount).toLocaleString("en") || "0"}
-        <Typography>{props.currency || "SAR"}</Typography>
-      </Typography>
+        <div className="text-sm font-normal">{props.currency || "SAR"}</div>
+      </div>
       <FormProvider {...methods}>
         <form onSubmit={handleSubmit(props.handleChargeWallet)}>
           <Controller
@@ -60,7 +53,7 @@ export const ChargeWalletForm = (props) => {
           </HawaButton>
         </form>
       </FormProvider>
-    </Container>
+    </div>
   );
 };
 

package/src/blocks/Payment/CheckoutForm.js

@@ -6,9 +6,6 @@ import {
   HawaButton
 } from "../../elements";
 import { Controller, FormProvider, useForm } from "react-hook-form";
-import Container from "@mui/material/Container";
-import Typography from "@mui/material/Typography";
-import Divider from "@mui/material/Divider";
 import PropTypes from "prop-types";
 
 export const CheckoutForm = (props) => {
@@ -35,217 +32,210 @@ export const CheckoutForm = (props) => {
     }
   };
   return (
-    <Container maxWidth="sm" style={{ direction: isArabic ? "rtl" : "ltr" }}>
-      <Typography
-        align="center"
-        variant="h5"
-        fontWeight={500}
-        style={{ marginBottom: 10 }}
-      >
-        {props.texts.orderDetails}
-      </Typography>
-      <HawaTable
-        lang={props.lang}
-        columns={["Product", "Price"]}
-        rows={props.products}
-        end={["Total", props.total]}
-      />
-      <Divider variant="middle" />
+    <div className="flex flex-col bg-blue-300 rounded-xl p-4">
+      <div>
+        <div className="text-xl text-center font-semibold mb-2">
+          {props.texts.orderDetails}
+        </div>
+        <HawaTable
+          lang={props.lang}
+          columns={["Product", "Price"]}
+          rows={props.products}
+          end={["Total", props.total]}
+        />
+      </div>
 
-      <Typography
-        align="center"
-        variant="h5"
-        fontWeight={500}
-        style={{ marginBottom: 10 }}
-      >
-        {props.texts.billingAddress}
-      </Typography>
+      <div>
+        <div className="text-xl text-center font-semibold my-2">
+          {props.texts.billingAddress}
+        </div>
 
-      <FormProvider {...methods}>
-        <form onSubmit={handleSubmit(props.handlePayNow)}>
-          <Container sx={containerStyle}>
-            <Controller
-              control={control}
-              name="firstName"
-              rules={{ required: props.texts?.required }}
-              render={({ field }) => (
-                <HawaTextField
-                  inForm
-                  fullWidth
-                  type="text"
-                  value={field.value ?? ""}
-                  label={props.texts?.firstNameLabel + " *"}
-                  helperText={errors.firstName?.message}
-                  {...field}
-                />
-              )}
-            />
-            <div style={{ width: 20 }} />
-
-            <Controller
-              control={control}
-              name="lastName"
-              rules={{ required: props.texts?.required }}
-              render={({ field }) => (
-                <HawaTextField
-                  inForm
-                  fullWidth
-                  type="text"
-                  value={field.value ?? ""}
-                  label={props.texts?.lastNameLabel + " *"}
-                  helperText={errors.lastName?.message}
-                  {...field}
-                />
-              )}
-            />
-          </Container>
-          <Controller
-            control={control}
-            name="email"
-            render={({ field }) => (
-              <HawaTextField
-                inForm
-                fullWidth
-                type="text"
-                value={field.value ?? ""}
-                label={props.texts?.emailLabel + " *"}
-                helperText={errors.email?.message}
-                {...field}
+        <FormProvider {...methods}>
+          <form onSubmit={handleSubmit(props.handlePayNow)}>
+            <div>
+              <Controller
+                control={control}
+                name="firstName"
+                rules={{ required: props.texts?.required }}
+                render={({ field }) => (
+                  <HawaTextField
+                    inForm
+                    fullWidth
+                    type="text"
+                    value={field.value ?? ""}
+                    label={props.texts?.firstNameLabel + " *"}
+                    helperText={errors.firstName?.message}
+                    {...field}
+                  />
+                )}
               />
-            )}
-            rules={{
-              required: props.texts?.emailRequiredText,
-              pattern: {
-                value:
-                  /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,
-                message: props.texts?.emailInvalidText
-              }
-            }}
-          />
+              <div style={{ width: 20 }} />
 
-          <Container sx={containerStyle}>
+              <Controller
+                control={control}
+                name="lastName"
+                rules={{ required: props.texts?.required }}
+                render={({ field }) => (
+                  <HawaTextField
+                    inForm
+                    fullWidth
+                    type="text"
+                    value={field.value ?? ""}
+                    label={props.texts?.lastNameLabel + " *"}
+                    helperText={errors.lastName?.message}
+                    {...field}
+                  />
+                )}
+              />
+            </div>
             <Controller
               control={control}
-              name="streetAddress"
-              rules={{ required: props.texts?.required }}
+              name="email"
               render={({ field }) => (
                 <HawaTextField
                   inForm
                   fullWidth
                   type="text"
                   value={field.value ?? ""}
-                  label={props.texts?.streetAddressLabel + " *"}
-                  helperText={errors.streetAddress?.message}
+                  label={props.texts?.emailLabel + " *"}
+                  helperText={errors.email?.message}
                   {...field}
                 />
               )}
+              rules={{
+                required: props.texts?.emailRequiredText,
+                pattern: {
+                  value:
+                    /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,
+                  message: props.texts?.emailInvalidText
+                }
+              }}
             />
-            <div style={{ width: 20 }} />
 
-            <Controller
-              control={control}
-              name="buildingNumber"
-              rules={{ required: props.texts?.required }}
-              render={({ field }) => (
-                <HawaTextField
-                  inForm
-                  fullWidth
-                  type="text"
-                  value={field.value ?? ""}
-                  label={props.texts?.buildingNumberLabel + " *"}
-                  helperText={errors.buildingNumber?.message}
-                  {...field}
-                />
-              )}
-            />
-          </Container>
-          <Container sx={containerStyle}>
-            <Controller
-              control={control}
-              name="province"
-              rules={{ required: props.texts?.required }}
-              render={({ field }) => (
-                <HawaTextField
-                  inForm
-                  fullWidth
-                  type="text"
-                  value={field.value ?? ""}
-                  label={props.texts?.stateLabel + " *"}
-                  helperText={errors.province?.message}
-                  {...field}
-                />
-              )}
-            />
-            <div style={{ width: 20 }} />
+            <div sx={containerStyle}>
+              <Controller
+                control={control}
+                name="streetAddress"
+                rules={{ required: props.texts?.required }}
+                render={({ field }) => (
+                  <HawaTextField
+                    inForm
+                    fullWidth
+                    type="text"
+                    value={field.value ?? ""}
+                    label={props.texts?.streetAddressLabel + " *"}
+                    helperText={errors.streetAddress?.message}
+                    {...field}
+                  />
+                )}
+              />
+              <div style={{ width: 20 }} />
 
-            <Controller
-              control={control}
-              name="city"
-              rules={{ required: props.texts?.required }}
-              render={({ field }) => (
-                <HawaTextField
-                  inForm
-                  fullWidth
-                  type="text"
-                  value={field.value ?? ""}
-                  label={props.texts?.cityLabel + " *"}
-                  helperText={errors.city?.message}
-                  {...field}
-                />
-              )}
-            />
-          </Container>
-          <Container sx={containerStyle}>
-            <Controller
-              control={control}
-              name="zipCode"
-              rules={{ required: props.texts?.required }}
-              render={({ field }) => (
-                <HawaTextField
-                  inForm
-                  fullWidth
-                  type="number"
-                  variant="unscrollable"
-                  value={field.value ?? ""}
-                  label={props.texts?.zipCodeLabel + " *"}
-                  helperText={errors.zipCode?.message}
-                  {...field}
-                />
-              )}
-            />
-            <div style={{ width: 20 }} />
+              <Controller
+                control={control}
+                name="buildingNumber"
+                rules={{ required: props.texts?.required }}
+                render={({ field }) => (
+                  <HawaTextField
+                    inForm
+                    fullWidth
+                    type="text"
+                    value={field.value ?? ""}
+                    label={props.texts?.buildingNumberLabel + " *"}
+                    helperText={errors.buildingNumber?.message}
+                    {...field}
+                  />
+                )}
+              />
+            </div>
+            <div sx={containerStyle}>
+              <Controller
+                control={control}
+                name="province"
+                rules={{ required: props.texts?.required }}
+                render={({ field }) => (
+                  <HawaTextField
+                    inForm
+                    fullWidth
+                    type="text"
+                    value={field.value ?? ""}
+                    label={props.texts?.stateLabel + " *"}
+                    helperText={errors.province?.message}
+                    {...field}
+                  />
+                )}
+              />
+              <div style={{ width: 20 }} />
 
-            <Controller
-              control={control}
-              name="country"
-              rules={{ required: props.texts?.required }}
-              render={({ field }) => (
-                <HawaSelect
-                  fullWidth
-                  native
-                  label={props.texts?.countryLabel + " *"}
-                  variant="standard"
-                  value={field.value ?? ""}
-                  helperText={errors.country?.message}
-                  displayEmpty
-                  disableUnderline
-                  validators={["required"]}
-                  {...field}
-                >
-                  <option></option>
-                  {props.countriesList.map((country, i) => (
-                    <option key={i}>{country}</option>
-                  ))}
-                </HawaSelect>
-              )}
-            />
-          </Container>
-          <HawaButton type="submit" fullWidth>
-            {props.texts.payNow}
-          </HawaButton>
-        </form>
-      </FormProvider>
-    </Container>
+              <Controller
+                control={control}
+                name="city"
+                rules={{ required: props.texts?.required }}
+                render={({ field }) => (
+                  <HawaTextField
+                    inForm
+                    fullWidth
+                    type="text"
+                    value={field.value ?? ""}
+                    label={props.texts?.cityLabel + " *"}
+                    helperText={errors.city?.message}
+                    {...field}
+                  />
+                )}
+              />
+            </div>
+            <div sx={containerStyle}>
+              <Controller
+                control={control}
+                name="zipCode"
+                rules={{ required: props.texts?.required }}
+                render={({ field }) => (
+                  <HawaTextField
+                    inForm
+                    fullWidth
+                    type="number"
+                    variant="unscrollable"
+                    value={field.value ?? ""}
+                    label={props.texts?.zipCodeLabel + " *"}
+                    helperText={errors.zipCode?.message}
+                    {...field}
+                  />
+                )}
+              />
+              <div style={{ width: 20 }} />
+
+              <Controller
+                control={control}
+                name="country"
+                rules={{ required: props.texts?.required }}
+                render={({ field }) => (
+                  <HawaSelect
+                    fullWidth
+                    native
+                    label={props.texts?.countryLabel + " *"}
+                    variant="standard"
+                    value={field.value ?? ""}
+                    helperText={errors.country?.message}
+                    displayEmpty
+                    disableUnderline
+                    validators={["required"]}
+                    {...field}
+                  >
+                    <option></option>
+                    {props.countriesList.map((country, i) => (
+                      <option key={i}>{country}</option>
+                    ))}
+                  </HawaSelect>
+                )}
+              />
+            </div>
+            <HawaButton type="submit" fullWidth>
+              {props.texts.payNow}
+            </HawaButton>
+          </form>
+        </FormProvider>
+      </div>
+    </div>
   );
 };