@sikka/hawa 0.0.5 → 0.0.8

package/src/blocks/AuthForms/SignInForm.js

@@ -2,50 +2,125 @@ import React from "react";
 import {
   HawaTextField,
   ActionButton,
-  GoogleButton,
-  TwitterButton,
-  GithubButton
+  HawaAlert,
+  HawaTypography,
+  HawaLogoButton
 } from "../../ui";
 import { Box } from "../../layout";
+import { FormProvider, useForm } from "react-hook-form";
+
+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
+  } = 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>
+        {props.error && (
+          <HawaAlert text="This is a sign in alert" severity="error" />
+        )}
+        <FormProvider {...methods}>
+          <form onSubmit={handleSubmit(props.handleSignIn)}>
+            <HawaTextField
+              type="text"
+              name="email"
+              inputLabel="Email"
+              placeholder="Enter your email"
+              startAdornment={
+                <InputAdornment position="start">
+                  <EmailIcon />
+                </InputAdornment>
+              }
+              rules={{
+                required: "Email is 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,}))$/,
+                  message: "Invalid email address"
+                }
+              }}
+              helperText={errors.email?.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}
+            />
+            <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"}
+            />
+          </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,54 +3,135 @@ import { Box } from "../../layout";
 import {
   HawaTextField,
   ActionButton,
-  GoogleButton,
-  GithubButton,
-  TwitterButton
+  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 {
+    formState: { errors },
+    handleSubmit,
+    getValues,
+    register,
+    watch,
+    reset,
+    setValue
+  } = methods;
+
   return (
-    <Box themeType={props.theme} maxWidth={400} noColor noMargin noPadding>
-      <Box themeType={props.theme} noMargin>
-        <HawaTextField themeType={props.theme} type="text" inputLabel="Email" />
-        <HawaTextField
-          themeType={props.theme}
-          type="text"
-          inputLabel="Password"
-        />
-        <HawaTextField
-          themeType={props.theme}
-          type="text"
-          inputLabel="Confirm Password"
-        />
-        <ActionButton
-          text="Sign Up"
-          last
-          themeType={props.theme}
-          onClick={props.handleSignUp}
-        />
+    <Box maxWidth={400} noColor noMargin noPadding>
+      <Box noMargin>
+        {props.error && (
+          <HawaAlert text="This is a sign in alert" severity="error" />
+        )}
+        <FormProvider {...methods}>
+          <form onSubmit={handleSubmit(props.handleSignUp)}>
+            <HawaTextField
+              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="Enter your email"
+              name="email"
+              startAdornment={
+                <InputAdornment position="start">
+                  <EmailIcon />
+                </InputAdornment>
+              }
+              rules={{
+                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,}))$/,
+                  message: "Invalid email address"
+                }
+              }}
+              helperText={errors.email?.message}
+            />
+            <HawaTextField
+              name="password"
+              placeholder="Minimum 8 characters"
+              type="password"
+              inputLabel="Password"
+              startAdornment={
+                <InputAdornment position="start">
+                  <PasswordIcon />
+                </InputAdornment>
+              }
+              rules={{
+                required: "Password rquired",
+                minLength: {
+                  value: 8,
+                  message: "Password too short"
+                }
+              }}
+              helperText={errors.password?.message}
+            />
+
+            <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

@@ -0,0 +1,53 @@
+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 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>
+        <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

@@ -0,0 +1,14 @@
+import React from "react";
+import { ActionButton } from "../../ui";
+import { Box } from "../../layout";
+
+export const PayWithWallet = (props) => {
+  return (
+    <Box maxWidth={400} noColor noMargin noPadding>
+      <Box noMargin>
+        <div>Wallet Balance</div>
+        <ActionButton text="Pay now" />
+      </Box>
+    </Box>
+  );
+};

package/src/blocks/Payment/SelectPayment.js

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

package/src/blocks/Payment/index.js

@@ -14,3 +14,5 @@
 
 export * from "./SelectPayment";
 export * from "./CreditCardForm";
+export * from "./ChargeWalletForm";
+export * from "./PayWithWallet";

package/src/layout/Box.js

@@ -2,29 +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 = {};
 
-  console.log(Object.keys(theme.actionButton));
-  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",