@sikka/hawa 0.0.6 → 0.0.7

package/src/blocks/AuthForms/SignUpForm.js

@@ -11,6 +11,11 @@ import {
 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 +29,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 +74,42 @@ 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>
       {props.viaGoogle && (
         <GoogleButton
-          outlined
-          themeType={props.theme}
           buttonText={props.googleButtonLabel}
           handleClick={props.handleGoogleSignIn}
         />
       )}
       {props.viaGithub && (
         <GithubButton
-          outlined
-          themeType={props.theme}
           buttonText={props.githubButtonLabel}
           handleClick={props.handleGithubSignUp}
         />
       )}
       {props.viaTwitter && (
         <TwitterButton
-          outlined
-          themeType={props.theme}
           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, WalletButton } 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

@@ -15,65 +15,47 @@ import {
 
 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}
             buttonText={props.walletLabel}
             onClick={props.handleWallet}
           />
         )}
         {props.viaCreditCard && (
           <VisaMasterButton
-            outlined
-            themeType={props.theme}
             buttonText={props.visaMasterLabel}
             handleClick={props.handleCreditCard}
           />
         )}
         {props.viaMada && (
           <MadaButton
-            outlined
-            themeType={props.theme}
             buttonText={props.madaLabel}
             handleClick={props.handleMada}
           />
         )}
-
         {props.viaSTCPay && (
           <STCPayButton
-            outlined
-            themeType={props.theme}
             buttonText={props.stcPayLabel}
             handleClick={props.handleSTCPay}
           />
         )}
         {props.viaPayPal && (
           <PayPalButton
-            outlined
-            themeType={props.theme}
             buttonText={props.paypalLabel}
             handleClick={props.handlePayPal}
           />
         )}
         {props.viaGooglePay && (
           <GooglePayButton
-            outlined
-            themeType={props.theme}
             buttonText={props.googlePayLabel}
             handleClick={props.handleGooglePay}
           />
         )}
-
         {props.viaApplePay && (
           <ApplePayButton
-            outlined
-            themeType={props.theme}
             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",

package/src/stories/BlocksStories/AuthForm.stories.js

@@ -20,11 +20,10 @@ export default {
 
 const SignInTemplate = (args) => {
   return (
-    <HawaProvider theme={{ ...defaultTheme }}>
+    <HawaProvider themeName={args.theme}>
       <SignInForm
         {...args}
         error={args.showError}
-        theme={args.theme}
         handleSignIn={(e) => console.log("singing in via email", e)}
         viaGoogle={args.viaGoogle}
         googleButtonLabel={"Sign in with Google"}
@@ -51,10 +50,9 @@ SignIn.args = {
 
 const SignUpTemplate = (args) => {
   return (
-    <HawaProvider theme={{ ...defaultTheme }}>
+    <HawaProvider themeName={args.theme}>
       <SignUpForm
         {...args}
-        theme={args.theme}
         error={args.showError}
         handleSignUp={() => console.log("singing up via email")}
         viaGoogle={args.viaGoogle}
@@ -81,7 +79,7 @@ SignUp.args = {
 
 const ResetPasswordTemplate = (args) => {
   return (
-    <HawaProvider theme={{ ...defaultTheme }}>
+    <HawaProvider themeName={args.theme}>
       <ResetPasswordForm error={args.showError} theme={args.theme} {...args} />
     </HawaProvider>
   );
@@ -93,7 +91,7 @@ ResetPassword.args = {
 };
 const NewPasswordTemplate = (args) => {
   return (
-    <HawaProvider theme={{ ...defaultTheme }}>
+    <HawaProvider themeName={args.theme}>
       <NewPasswordForm error={args.showError} theme={args.theme} {...args} />
     </HawaProvider>
   );

package/src/stories/BlocksStories/PaymentForm.stories.js

@@ -25,6 +25,7 @@ export default {
   args: {
     theme: "primary",
     viaWallet: true,
+    viaMada: true,
     viaApplePay: true,
     viaGooglePay: true,
     viaSTCPay: true,
@@ -35,10 +36,9 @@ export default {
 
 export const PaymentSelection = (args) => {
   return (
-    <HawaProvider theme={{ ...defaultTheme }}>
+    <HawaProvider themeName={args.theme}>
       <SelectPayment
         {...args}
-        theme={args.theme}
         walletLabel="Wallet Balance"
         handleWallet={() => console.log("paying via wallet")}
         visaMasterLabel="Credit Card"
@@ -74,9 +74,13 @@ export const PayViaCreditCard = (args) => {
 };
 
 export const ChargeWallet = (args) => {
-  return <ChargeWalletForm theme={args.theme} currency="SAR" />;
+  return (
+    <HawaProvider themeName={args.theme}>
+      <ChargeWalletForm currency="SAR" />
+    </HawaProvider>
+  );
 };
 
-// ChargeWallet.args = {
-//   theme: "secondary"
-// };
+ChargeWallet.args = {
+  theme: "secondary"
+};

package/src/stories/BlocksStories/UserForm.stories.js

@@ -0,0 +1,41 @@
+import React from "react";
+import { UserProfile } from "../../blocks/Account";
+import { defaultTheme, HawaProvider } from "../../themes/HawaProvider";
+
+export default {
+  title: "Blocks/UserBlocks",
+  component: UserProfile,
+  argTypes: {
+    theme: {
+      options: ["primary", "secondary", "default"],
+      control: { type: "select" }
+    }
+  }
+};
+
+const theme = {
+  ...defaultTheme,
+  paddings: 20
+};
+
+export const UserAccount = (args) => {
+  return (
+    <HawaProvider theme={{ ...defaultTheme, ...theme }}>
+      <UserProfile {...args} />
+    </HawaProvider>
+  );
+};
+
+UserAccount.args = {
+  theme: "primary"
+};
+export const UserSettings = (args) => {
+  return (
+    <HawaProvider theme={{ ...defaultTheme, ...theme }}>
+      <UserProfile {...args} />
+    </HawaProvider>
+  );
+};
+UserSettings.args = {
+  theme: "primary"
+};

package/src/stories/LayoutStories/Box.stories.js

@@ -7,14 +7,14 @@ const theme = {
 
 const Template = (args) => {
   return (
-    <HawaProvider size={args.size} theme={{ ...defaultTheme, ...args.theme }}>
-      <Box themeType="primary">Box 1</Box>
-      <Box themeType="secondary">
+    <HawaProvider size={args.size} themeName={"secondary"}>
+      <Box>Box 1</Box>
+      <Box>
         <div style={{ backgroundColor: "white", padding: 10, color: "black" }}>
           testing box in box
         </div>
       </Box>
-      <Box themeType="secondary">Box 3</Box>
+      <Box>Box 3</Box>
     </HawaProvider>
   );
 };

package/src/stories/UIStories/ActionButton.stories.js

@@ -5,8 +5,8 @@ import { ActionButton } from "../../ui";
 
 const Template = (args) => {
   return (
-    <HawaProvider theme={{ ...defaultTheme }}>
-      <ActionButton themeType={args.theme} text={args.buttonLabel} />
+    <HawaProvider themeName={args.theme}>
+      <ActionButton text={args.buttonLabel} />
     </HawaProvider>
   );
 };

package/src/stories/UIStories/Alert.stories.js

@@ -5,28 +5,15 @@ import { HawaAlert } from "../../ui";
 
 const Template = (args) => {
   return (
-    <HawaProvider theme={{ ...defaultTheme }}>
+    <HawaProvider themeName={args.theme}>
       <HawaAlert
-        themeType={args.theme}
         title="What?"
         text="This is a success alert"
         severity="success"
       />
-      <HawaAlert
-        themeType={args.theme}
-        text="This is an info alert"
-        severity="info"
-      />
-      <HawaAlert
-        themeType={args.theme}
-        text="This is a warning alert"
-        severity="warning"
-      />
-      <HawaAlert
-        themeType={args.theme}
-        text="This is an error alert"
-        severity="error"
-      />
+      <HawaAlert text="This is an info alert" severity="info" />
+      <HawaAlert text="This is a warning alert" severity="warning" />
+      <HawaAlert text="This is an error alert" severity="error" />
     </HawaProvider>
   );
 };