@sikka/hawa 0.0.6 → 0.0.9

package/src/blocks/AuthForms/SignInForm.js

@@ -2,36 +2,29 @@ import React from "react";
 import {
   HawaTextField,
   ActionButton,
-  GoogleButton,
-  TwitterButton,
-  GithubButton,
-  HawaAlert
+  HawaAlert,
+  HawaTypography,
+  HawaLogoButton
 } from "../../ui";
 import { Box } from "../../layout";
 import { FormProvider, useForm } from "react-hook-form";
-import { TextField } from "@mui/material";
+
+import InputAdornment from "@mui/material/InputAdornment";
+import EmailIcon from "@mui/icons-material/MailOutline";
+import PasswordIcon from "@mui/icons-material/HttpsOutlined";
 
 export const SignInForm = (props) => {
   const methods = useForm();
   const {
     formState: { errors },
-    handleSubmit,
-    getValues,
-    register,
-    watch,
-    reset,
-    setValue
+    handleSubmit
   } = methods;
 
   return (
-    <Box themeType={props.theme} maxWidth={400} noColor noMargin noPadding>
-      <Box themeType={props.theme} noMargin>
+    <Box maxWidth={400} noColor noMargin noPadding>
+      <Box noMargin>
         {props.error && (
-          <HawaAlert
-            themeType={props.theme}
-            text="This is a sign in alert"
-            severity="error"
-          />
+          <HawaAlert text="This is a sign in alert" severity="error" />
         )}
         <FormProvider {...methods}>
           <form onSubmit={handleSubmit(props.handleSignIn)}>
@@ -39,8 +32,12 @@ export const SignInForm = (props) => {
               type="text"
               name="email"
               inputLabel="Email"
-              placeholder="Email"
-              themeType={props.theme}
+              placeholder="Enter your email"
+              startAdornment={
+                <InputAdornment position="start">
+                  <EmailIcon />
+                </InputAdornment>
+              }
               rules={{
                 required: "Email is required",
                 pattern: {
@@ -54,45 +51,76 @@ export const SignInForm = (props) => {
 
             <HawaTextField
               name="password"
-              placeholder="Password"
-              themeType={props.theme}
+              placeholder="Enter password"
               type="password"
               inputLabel="Password"
+              startAdornment={
+                <InputAdornment position="start">
+                  <PasswordIcon />
+                </InputAdornment>
+              }
               rules={{
                 required: "Password is rquired"
               }}
               helperText={errors.password?.message}
             />
+            <HawaTypography
+              style={{
+                cursor: "pointer",
+                marginTop: 5,
+                width: "max-content",
+                padding: 5
+              }}
+              onClick={() => console.log("res")}
+            >
+              Forgot password?
+            </HawaTypography>
             <ActionButton
               type="submit"
               fullWidth
               last={"true"}
               text={"Sign In"}
-              themeType={props.theme}
             />
           </form>
         </FormProvider>
       </Box>
+      <HawaTypography
+        style={{
+          marginTop: 5,
+          // width: "max-content",
+          textAlign: "center",
+          padding: 5
+        }}
+      >
+        New user?{" "}
+        <span
+          onClick={() => console.log("res")}
+          style={{
+            cursor: "pointer",
+            color: "blue",
+            textAlign: "center"
+          }}
+        >
+          Sign up
+        </span>
+      </HawaTypography>
       {props.viaGoogle && (
-        <GoogleButton
-          themeType={props.theme}
-          outlined
+        <HawaLogoButton
+          logo="google"
           buttonText={props.googleButtonLabel}
           handleClick={props.handleGoogleSignIn}
         />
       )}
       {props.viaGithub && (
-        <GithubButton
-          outlined
-          themeType={props.theme}
+        <HawaLogoButton
+          logo="github"
           buttonText={props.githubButtonLabel}
           handleClick={props.handleGithubSignIn}
         />
       )}
       {props.viaTwitter && (
-        <TwitterButton
-          outlined
-          themeType={props.theme}
+        <HawaLogoButton
+          logo="twitter"
           buttonText={props.twitterButtonLabel}
           handleClick={props.handleTwitterSignIn}
         />

package/src/blocks/AuthForms/SignUpForm.js

@@ -3,14 +3,18 @@ import { Box } from "../../layout";
 import {
   HawaTextField,
   ActionButton,
-  GoogleButton,
-  GithubButton,
-  TwitterButton,
-  HawaAlert
+  HawaAlert,
+  HawaTypography,
+  HawaLogoButton
 } from "../../ui";
 import PropTypes from "prop-types";
 import { FormProvider, useForm } from "react-hook-form";
 
+import PersonIcon from "@mui/icons-material/PermIdentityOutlined";
+import InputAdornment from "@mui/material/InputAdornment";
+import EmailIcon from "@mui/icons-material/MailOutline";
+import PasswordIcon from "@mui/icons-material/HttpsOutlined";
+
 export const SignUpForm = (props) => {
   const methods = useForm();
   const {
@@ -24,25 +28,41 @@ export const SignUpForm = (props) => {
   } = methods;
 
   return (
-    <Box themeType={props.theme} maxWidth={400} noColor noMargin noPadding>
-      <Box themeType={props.theme} noMargin>
+    <Box maxWidth={400} noColor noMargin noPadding>
+      <Box noMargin>
         {props.error && (
-          <HawaAlert
-            themeType={props.theme}
-            text="This is a sign in alert"
-            severity="error"
-          />
+          <HawaAlert text="This is a sign in alert" severity="error" />
         )}
         <FormProvider {...methods}>
           <form onSubmit={handleSubmit(props.handleSignUp)}>
             <HawaTextField
-              themeType={props.theme}
+              name="fullName"
+              placeholder="Fulan AlFulani"
+              type="text"
+              inputLabel="Full Name"
+              startAdornment={
+                <InputAdornment position="start">
+                  <PersonIcon />
+                </InputAdornment>
+              }
+              rules={{
+                required: "Full name rquired"
+              }}
+              helperText={errors.fullName?.message}
+            />
+
+            <HawaTextField
               type="text"
               inputLabel="Email"
-              placeholder="Email"
+              placeholder="Enter your email"
               name="email"
+              startAdornment={
+                <InputAdornment position="start">
+                  <EmailIcon />
+                </InputAdornment>
+              }
               rules={{
-                required: "Email is required",
+                required: "Email required",
                 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,}))$/,
@@ -53,56 +73,65 @@ export const SignUpForm = (props) => {
             />
             <HawaTextField
               name="password"
-              placeholder="Password"
-              themeType={props.theme}
+              placeholder="Minimum 8 characters"
               type="password"
               inputLabel="Password"
+              startAdornment={
+                <InputAdornment position="start">
+                  <PasswordIcon />
+                </InputAdornment>
+              }
               rules={{
-                required: "Password is rquired"
+                required: "Password rquired",
+                minLength: {
+                  value: 8,
+                  message: "Password too short"
+                }
               }}
               helperText={errors.password?.message}
             />
-            <HawaTextField
-              name="confirmPassword"
-              placeholder="Password"
-              themeType={props.theme}
-              type="password"
-              inputLabel="Confirm Password"
-              rules={{
-                required: "Password is rquired"
-              }}
-              helperText={errors.confirmPassword?.message}
-            />
-            <ActionButton
-              fullWidth
-              type="submit"
-              text="Sign Up"
-              last
-              themeType={props.theme}
-            />
+
+            <ActionButton fullWidth type="submit" text="Sign Up" last />
           </form>
         </FormProvider>
       </Box>
+      <HawaTypography
+        style={{
+          marginTop: 5,
+          // width: "max-content",
+          textAlign: "center",
+          padding: 5
+        }}
+      >
+        Existing user?{" "}
+        <span
+          onClick={() => console.log("res")}
+          style={{
+            cursor: "pointer",
+            color: "blue",
+            textAlign: "center"
+          }}
+        >
+          Sign in
+        </span>
+      </HawaTypography>
       {props.viaGoogle && (
-        <GoogleButton
-          outlined
-          themeType={props.theme}
+        <HawaLogoButton
+          logo="google"
           buttonText={props.googleButtonLabel}
           handleClick={props.handleGoogleSignIn}
         />
       )}
       {props.viaGithub && (
-        <GithubButton
-          outlined
-          themeType={props.theme}
+        <HawaLogoButton
+          logo="github"
           buttonText={props.githubButtonLabel}
-          handleClick={props.handleGithubSignUp}
+          handleClick={props.handleGithubSignIn}
         />
       )}
       {props.viaTwitter && (
-        <TwitterButton
-          outlined
-          themeType={props.theme}
+        <HawaLogoButton
+          logo="twitter"
           buttonText={props.twitterButtonLabel}
           handleClick={props.handleTwitterSignIn}
         />

package/src/blocks/Payment/ChargeWalletForm.js

@@ -1,31 +1,52 @@
 import React, { useState } from "react";
 import { HawaTextField, ActionButton, HawaTypography } from "../../ui";
 import { Box } from "../../layout";
+import { FormProvider, useForm } from "react-hook-form";
 
 export const ChargeWalletForm = (props) => {
   const [walletAmount, setWalletAmount] = useState(0);
+  const methods = useForm();
+  const {
+    formState: { errors },
+    handleSubmit
+  } = methods;
+
   return (
-    <Box themeType={props.theme} maxWidth={400} noColor noMargin noPadding>
-      <Box themeType={props.theme} noMargin>
-        <HawaTypography variant="h2" align="center" themeType={props.theme}>
-          {walletAmount.toLocaleString("en")}{" "}
+    <Box maxWidth={400} noColor noMargin noPadding>
+      <Box noMargin>
+        <HawaTypography variant="h2" align="center">
+          {Number(walletAmount).toLocaleString("en")}{" "}
           <span style={{ fontSize: 20, letterSpacing: 1 }}>
             {props.currency}
           </span>
         </HawaTypography>
-        <HawaTypography themeType={props.theme}></HawaTypography>
-        <HawaTextField
-          themeType={props.theme}
-          type="number"
-          inputLabel="Amount" //move this to props
-          onChange={(e) => setWalletAmount(e.target.value)}
-        />
-        <ActionButton
-          last
-          text={"Charge Wallet"} //move this to props
-          themeType={props.theme}
-          onClick={props.handleSignIn}
-        />
+        <FormProvider {...methods}>
+          <form
+            onChange={(e) => {
+              e.preventDefault();
+              setWalletAmount(methods.getValues().amount);
+            }}
+            style={{ marginTop: 10 }}
+            onSubmit={handleSubmit(props.handleChargeWallet)}
+          >
+            <HawaTextField
+              name="amount"
+              placeholder="Enter amount"
+              type="number"
+              value={walletAmount}
+              rules={{
+                required: "Password is rquired"
+              }}
+              helperText={errors.amount?.message}
+            />
+            <ActionButton
+              last
+              fullWidth
+              text={"Charge Wallet"} //move this to props
+              onClick={props.handleSignIn}
+            />
+          </form>
+        </FormProvider>
       </Box>
     </Box>
   );

package/src/blocks/Payment/CreditCardForm.js

@@ -1,30 +1,59 @@
 import React from "react";
-import {
-  HawaTextField,
-  ActionButton,
-  GoogleButton,
-  TwitterButton,
-  GithubButton
-} from "../../ui";
+import { HawaTextField, ActionButton } from "../../ui";
 import { Box } from "../../layout";
+import { FormProvider, useForm } from "react-hook-form";
 
 export const CreditCardForm = (props) => {
+  const methods = useForm();
+  const {
+    formState: { errors },
+    handleSubmit
+  } = methods;
+
   return (
-    <Box themeType={props.theme} maxWidth={400} noColor noMargin noPadding>
-      <Box themeType={props.theme} noMargin>
-        <HawaTextField themeType={props.theme} type="text" inputLabel="Email" />
+    <Box maxWidth={400} noColor noMargin noPadding>
+      <Box noMargin>
+        <FormProvider {...methods}>
+          <form onSubmit={handleSubmit(props.handle)}>
+            <HawaTextField
+              name="password"
+              placeholder="Enter password"
+              type="password"
+              inputLabel="Password"
+              // startAdornment={
+              //   <InputAdornment position="start">
+              //     <PasswordIcon />
+              //   </InputAdornment>
+              // }
+              rules={{
+                required: "Password is rquired"
+              }}
+              helperText={errors.password?.message}
+            />
 
-        <HawaTextField
-          themeType={props.theme}
-          type="text"
-          inputLabel="Password"
-        />
-        <ActionButton
-          last
-          text={"Sign In"}
-          themeType={props.theme}
-          onClick={props.handleSignIn}
-        />
+            <HawaTextField
+              name="password"
+              placeholder="Enter password"
+              type="password"
+              inputLabel="Password"
+              // startAdornment={
+              //   <InputAdornment position="start">
+              //     <PasswordIcon />
+              //   </InputAdornment>
+              // }
+              rules={{
+                required: "Password is rquired"
+              }}
+              helperText={errors.password?.message}
+            />
+            <ActionButton
+              last
+              fullWidth
+              text={"Sign In"}
+              onClick={props.handleSignIn}
+            />
+          </form>
+        </FormProvider>
       </Box>
     </Box>
   );

package/src/blocks/Payment/PayWithWallet.js

@@ -1,34 +1,13 @@
 import React from "react";
-import {
-  HawaTextField,
-  ActionButton,
-  GoogleButton,
-  TwitterButton,
-  GithubButton,
-  VisaMasterButton,
-  MadaButton,
-  STCPayButton,
-  PayPalButton,
-  GooglePayButton,
-  ApplePayButton,
-  WalletButton
-} from "../../ui";
+import { ActionButton } from "../../ui";
 import { Box } from "../../layout";
-import PropTypes from "prop-types";
 
 export const PayWithWallet = (props) => {
   return (
-    <Box themeType={props.theme} maxWidth={400} noColor noMargin noPadding>
-      <Box themeType={props.theme} noMargin>
+    <Box maxWidth={400} noColor noMargin noPadding>
+      <Box noMargin>
         <div>Wallet Balance</div>
-        {props.viaWallet && (
-          <WalletButton
-            themeType={props.theme}
-            outlined
-            buttonText={props.walletLabel}
-            handleClick={props.handleWallet}
-          />
-        )}
+        <ActionButton text="Pay now" />
       </Box>
     </Box>
   );

package/src/blocks/Payment/SelectPayment.js

@@ -1,79 +1,58 @@
 import React from "react";
 import PropTypes from "prop-types";
 import { Box } from "../../layout";
-import {
-  HawaTextField,
-  VisaMasterButton,
-  MadaButton,
-  STCPayButton,
-  PayPalButton,
-  GooglePayButton,
-  ApplePayButton,
-  WalletButton,
-  HawaTypography
-} from "../../ui";
+import { HawaTextField, HawaTypography, HawaLogoButton } from "../../ui";
 
 export const SelectPayment = (props) => {
   return (
-    <Box themeType={props.theme} maxWidth={400} noColor noMargin noPadding>
-      <Box themeType={props.theme} noMargin>
-        <HawaTypography themeType={props.theme} align="center">
-          Choose Payment
-        </HawaTypography>
+    <Box maxWidth={400} noColor noMargin noPadding>
+      <Box noMargin>
+        <HawaTypography align="center">Choose Payment Method</HawaTypography>
         {props.viaWallet && (
-          <WalletButton
-            outlined
-            themeType={props.theme}
+          <HawaLogoButton
+            logo="wallet"
             buttonText={props.walletLabel}
             onClick={props.handleWallet}
           />
         )}
         {props.viaCreditCard && (
-          <VisaMasterButton
-            outlined
-            themeType={props.theme}
+          <HawaLogoButton
+            logo="visa/master"
             buttonText={props.visaMasterLabel}
             handleClick={props.handleCreditCard}
           />
         )}
         {props.viaMada && (
-          <MadaButton
-            outlined
-            themeType={props.theme}
+          <HawaLogoButton
+            logo="mada"
             buttonText={props.madaLabel}
             handleClick={props.handleMada}
           />
         )}
-
         {props.viaSTCPay && (
-          <STCPayButton
-            outlined
-            themeType={props.theme}
+          <HawaLogoButton
+            logo="stcpay"
             buttonText={props.stcPayLabel}
             handleClick={props.handleSTCPay}
           />
         )}
         {props.viaPayPal && (
-          <PayPalButton
-            outlined
-            themeType={props.theme}
+          <HawaLogoButton
+            logo="paypal"
             buttonText={props.paypalLabel}
             handleClick={props.handlePayPal}
           />
         )}
         {props.viaGooglePay && (
-          <GooglePayButton
-            outlined
-            themeType={props.theme}
+          <HawaLogoButton
+            logo="googlepay"
             buttonText={props.googlePayLabel}
             handleClick={props.handleGooglePay}
           />
         )}
-
         {props.viaApplePay && (
-          <ApplePayButton
-            outlined
-            themeType={props.theme}
+          <HawaLogoButton
+            logo="applepay"
             buttonText={props.applePayLabel}
             handleClick={props.handleApplePay}
           />

package/src/layout/Box.js

@@ -2,28 +2,28 @@ import React, { useContext } from "react";
 import { ThemeProvider } from "../themes/HawaProvider";
 
 export const Box = (props) => {
-  const theme = useContext(ThemeProvider);
+  const { hawaTheme, themeName } = useContext(ThemeProvider);
   let boxStyle = {};
 
-  let currentTheme = Object.keys(theme.actionButton).find(
-    (themeName) => themeName.toLowerCase() === props.themeType?.toLowerCase()
+  let currentTheme = Object.keys(hawaTheme.layout).find(
+    (tName) => tName.toLowerCase() === themeName?.toLowerCase()
   );
   if (currentTheme) {
     boxStyle = {
       display: "flex",
-      flexDirection: "column",
-      ...theme.layout[currentTheme],
+      flexDirection: props.horizontal ? "row" : "column",
+      ...hawaTheme?.layout[currentTheme],
       backgroundColor: props.noColor
         ? "none"
-        : theme.layout[currentTheme].backgroundColor,
-      padding: props.noPadding ? 0 : theme.layout[currentTheme].padding,
-      margin: props.noMargin ? 0 : theme.layout[currentTheme].margin,
+        : hawaTheme.layout[currentTheme].backgroundColor,
+      padding: props.noPadding ? 0 : hawaTheme?.layout[currentTheme].padding,
+      margin: props.noMargin ? 0 : hawaTheme?.layout[currentTheme].margin,
       maxWidth: props.maxWidth
     };
   } else {
     boxStyle = {
       display: "flex",
-      flexDirection: "column",
+      flexDirection: props.horizontal ? "row" : "column",
       color: "white",
       marginTop: props.last ? 10 * 2 : 0,
       backgroundColor: props.noColor ? "none" : "lightGrey",