@sikka/hawa 0.0.5 → 0.0.6

package/src/blocks/AuthForms/SignUpForm.js

@@ -5,31 +5,83 @@ import {
   ActionButton,
   GoogleButton,
   GithubButton,
-  TwitterButton
+  TwitterButton,
+  HawaAlert
 } from "../../ui";
 import PropTypes from "prop-types";
+import { FormProvider, useForm } from "react-hook-form";
 
 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}
-        />
+        {props.error && (
+          <HawaAlert
+            themeType={props.theme}
+            text="This is a sign in alert"
+            severity="error"
+          />
+        )}
+        <FormProvider {...methods}>
+          <form onSubmit={handleSubmit(props.handleSignUp)}>
+            <HawaTextField
+              themeType={props.theme}
+              type="text"
+              inputLabel="Email"
+              placeholder="Email"
+              name="email"
+              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
+              name="password"
+              placeholder="Password"
+              themeType={props.theme}
+              type="password"
+              inputLabel="Password"
+              rules={{
+                required: "Password is rquired"
+              }}
+              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}
+            />
+          </form>
+        </FormProvider>
       </Box>
       {props.viaGoogle && (
         <GoogleButton

package/src/blocks/Payment/ChargeWalletForm.js

@@ -0,0 +1,32 @@
+import React, { useState } from "react";
+import { HawaTextField, ActionButton, HawaTypography } from "../../ui";
+import { Box } from "../../layout";
+
+export const ChargeWalletForm = (props) => {
+  const [walletAmount, setWalletAmount] = useState(0);
+  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")}{" "}
+          <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}
+        />
+      </Box>
+    </Box>
+  );
+};

package/src/blocks/Payment/PayWithWallet.js

@@ -0,0 +1,35 @@
+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";
+
+export const PayWithWallet = (props) => {
+  return (
+    <Box themeType={props.theme} maxWidth={400} noColor noMargin noPadding>
+      <Box themeType={props.theme} noMargin>
+        <div>Wallet Balance</div>
+        {props.viaWallet && (
+          <WalletButton
+            themeType={props.theme}
+            outlined
+            buttonText={props.walletLabel}
+            handleClick={props.handleWallet}
+          />
+        )}
+      </Box>
+    </Box>
+  );
+};

package/src/blocks/Payment/SelectPayment.js

@@ -1,46 +1,45 @@
 import React from "react";
+import PropTypes from "prop-types";
+import { Box } from "../../layout";
 import {
   HawaTextField,
-  ActionButton,
-  GoogleButton,
-  TwitterButton,
-  GithubButton,
   VisaMasterButton,
   MadaButton,
   STCPayButton,
   PayPalButton,
   GooglePayButton,
   ApplePayButton,
-  WalletButton
+  WalletButton,
+  HawaTypography
 } from "../../ui";
-import { Box } from "../../layout";
-import PropTypes from "prop-types";
 
 export const SelectPayment = (props) => {
   return (
     <Box themeType={props.theme} maxWidth={400} noColor noMargin noPadding>
       <Box themeType={props.theme} noMargin>
-        <div>Choose Payment</div>
+        <HawaTypography themeType={props.theme} align="center">
+          Choose Payment
+        </HawaTypography>
         {props.viaWallet && (
           <WalletButton
-            themeType={props.theme}
             outlined
+            themeType={props.theme}
             buttonText={props.walletLabel}
-            handleClick={props.handleWallet}
+            onClick={props.handleWallet}
           />
         )}
         {props.viaCreditCard && (
           <VisaMasterButton
-            themeType={props.theme}
             outlined
+            themeType={props.theme}
             buttonText={props.visaMasterLabel}
             handleClick={props.handleCreditCard}
           />
         )}
         {props.viaMada && (
           <MadaButton
-            themeType={props.theme}
             outlined
+            themeType={props.theme}
             buttonText={props.madaLabel}
             handleClick={props.handleMada}
           />
@@ -48,24 +47,24 @@ export const SelectPayment = (props) => {
 
         {props.viaSTCPay && (
           <STCPayButton
-            themeType={props.theme}
             outlined
+            themeType={props.theme}
             buttonText={props.stcPayLabel}
             handleClick={props.handleSTCPay}
           />
         )}
         {props.viaPayPal && (
           <PayPalButton
-            themeType={props.theme}
             outlined
+            themeType={props.theme}
             buttonText={props.paypalLabel}
             handleClick={props.handlePayPal}
           />
         )}
         {props.viaGooglePay && (
           <GooglePayButton
-            themeType={props.theme}
             outlined
+            themeType={props.theme}
             buttonText={props.googlePayLabel}
             handleClick={props.handleGooglePay}
           />
@@ -73,8 +72,8 @@ export const SelectPayment = (props) => {
 
         {props.viaApplePay && (
           <ApplePayButton
-            themeType={props.theme}
             outlined
+            themeType={props.theme}
             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

@@ -5,7 +5,6 @@ export const Box = (props) => {
   const theme = useContext(ThemeProvider);
   let boxStyle = {};
 
-  console.log(Object.keys(theme.actionButton));
   let currentTheme = Object.keys(theme.actionButton).find(
     (themeName) => themeName.toLowerCase() === props.themeType?.toLowerCase()
   );

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

@@ -23,8 +23,9 @@ const SignInTemplate = (args) => {
     <HawaProvider theme={{ ...defaultTheme }}>
       <SignInForm
         {...args}
+        error={args.showError}
         theme={args.theme}
-        handleSignIn={() => console.log("singing in via email")}
+        handleSignIn={(e) => console.log("singing in via email", e)}
         viaGoogle={args.viaGoogle}
         googleButtonLabel={"Sign in with Google"}
         handleGoogleSignIn={() => console.log("signing in via google")}
@@ -44,6 +45,7 @@ SignIn.args = {
   viaGoogle: true,
   viaGithub: true,
   viaTwitter: true,
+  showError: false,
   theme: "primary"
 };
 
@@ -53,6 +55,7 @@ const SignUpTemplate = (args) => {
       <SignUpForm
         {...args}
         theme={args.theme}
+        error={args.showError}
         handleSignUp={() => console.log("singing up via email")}
         viaGoogle={args.viaGoogle}
         googleButtonLabel={"Sign up with Google"}
@@ -72,28 +75,31 @@ SignUp.args = {
   viaGoogle: true,
   viaGithub: true,
   viaTwitter: true,
+  showError: false,
   theme: "primary"
 };
 
 const ResetPasswordTemplate = (args) => {
   return (
     <HawaProvider theme={{ ...defaultTheme }}>
-      <ResetPasswordForm theme={args.theme} {...args} />
+      <ResetPasswordForm error={args.showError} theme={args.theme} {...args} />
     </HawaProvider>
   );
 };
 export const ResetPassword = ResetPasswordTemplate.bind({});
 ResetPassword.args = {
-  theme: "primary"
+  theme: "primary",
+  showError: false
 };
 const NewPasswordTemplate = (args) => {
   return (
     <HawaProvider theme={{ ...defaultTheme }}>
-      <NewPasswordForm theme={args.theme} {...args} />
+      <NewPasswordForm error={args.showError} theme={args.theme} {...args} />
     </HawaProvider>
   );
 };
 export const NewPassword = NewPasswordTemplate.bind({});
 NewPassword.args = {
-  theme: "primary"
+  theme: "primary",
+  showError: false
 };

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

@@ -1,5 +1,10 @@
 import React from "react";
-import { SelectPayment, CreditCardForm } from "../../blocks/Payment";
+import {
+  SelectPayment,
+  CreditCardForm,
+  ChargeWalletForm,
+  PayWithWallet
+} from "../../blocks/Payment";
 import { defaultTheme, HawaProvider } from "../../themes/HawaProvider";
 
 export default {
@@ -56,24 +61,7 @@ export const PaymentSelection = (args) => {
 export const PayViaWallet = (args) => {
   return (
     <HawaProvider theme={{ ...defaultTheme }}>
-      <SelectPayment
-        {...args}
-        theme={args.theme}
-        walletLabel="Wallet Balance"
-        handleWallet={() => console.log("paying via wallet")}
-        visaMasterLabel="Credit Card"
-        handleCreditCard={() => console.log("paying via Credit Card")}
-        madaLabel="Mada"
-        handleMada={() => console.log("paying via Mada")}
-        paypalLabel="PayPal"
-        handlePayPal={() => console.log("paying via PayPal")}
-        applePayLabel="Apple Pay"
-        handleApplePay={() => console.log("paying via Apple Pay")}
-        googlePayLabel="Google Pay"
-        handleGooglePay={() => console.log("paying via Google Pay")}
-        stcPayLabel="STC Pay"
-        handleSTCPay={() => console.log("paying via STC Pay")}
-      />
+      <PayWithWallet theme={args.theme} />
     </HawaProvider>
   );
 };
@@ -86,26 +74,9 @@ export const PayViaCreditCard = (args) => {
 };
 
 export const ChargeWallet = (args) => {
-  return (
-    <HawaProvider theme={{ ...defaultTheme }}>
-      <SelectPayment
-        {...args}
-        theme={args.theme}
-        walletLabel="Wallet Balance"
-        handleWallet={() => console.log("paying via wallet")}
-        visaMasterLabel="Credit Card"
-        handleCreditCard={() => console.log("paying via Credit Card")}
-        madaLabel="Mada"
-        handleMada={() => console.log("paying via Mada")}
-        paypalLabel="PayPal"
-        handlePayPal={() => console.log("paying via PayPal")}
-        applePayLabel="Apple Pay"
-        handleApplePay={() => console.log("paying via Apple Pay")}
-        googlePayLabel="Google Pay"
-        handleGooglePay={() => console.log("paying via Google Pay")}
-        stcPayLabel="STC Pay"
-        handleSTCPay={() => console.log("paying via STC Pay")}
-      />
-    </HawaProvider>
-  );
+  return <ChargeWalletForm theme={args.theme} currency="SAR" />;
 };
+
+// ChargeWallet.args = {
+//   theme: "secondary"
+// };

package/src/stories/Introduction.stories.js

@@ -1,16 +1,18 @@
-import { Meta } from '@storybook/addon-docs';
-import Code from './assets/code-brackets.svg';
-import Colors from './assets/colors.svg';
-import Comments from './assets/comments.svg';
-import Direction from './assets/direction.svg';
-import Flow from './assets/flow.svg';
-import Plugin from './assets/plugin.svg';
-import Repo from './assets/repo.svg';
-import StackAlt from './assets/stackalt.svg';
-
-<Meta title="Example/Introduction" />
-
-<style>{`
+import { Meta } from "@storybook/addon-docs";
+// import Code from "./assets/code-brackets.svg";
+// import Colors from "./assets/colors.svg";
+// import Comments from "./assets/comments.svg";
+// import Direction from "./assets/direction.svg";
+// import Flow from "./assets/flow.svg";
+// import Plugin from "./assets/plugin.svg";
+// import Repo from "./assets/repo.svg";
+// import StackAlt from "./assets/stackalt.svg";
+
+<Meta title="Example/Introduction" />;
+
+{
+  /* <style>
+{`
   .subheading {
     --mediumdark: '#999999';
     font-weight: 900;
@@ -112,100 +114,120 @@ import StackAlt from './assets/stackalt.svg';
   }
 
   
-`}</style>
-
-# Welcome to Storybook
-
-Storybook helps you build UI components in isolation from your app's business logic, data, and context.
-That makes it easy to develop hard - to - reach states.Save these UI states as ** stories ** to revisit during development, testing, or QA.
-
-Browse example stories now by navigating to them in the sidebar.
-View their code in the`src/stories` directory to learn how they work.
-We recommend building UIs with a[** component - driven **](https://componentdriven.org) process starting with atomic components and ending with pages.
-
-<div className="subheading">Configure</div>
-
-<div className="link-list">
-  <a
-    className="link-item"
-    href="https://storybook.js.org/docs/react/addons/addon-types"
-    target="_blank"
-  >
-    <img src={Plugin} alt="plugin" />
-    <span>
-      <strong>Presets for popular tools</strong>
-      Easy setup for TypeScript, SCSS and more.
-    </span>
-  </a>
-  <a
-    className="link-item"
-    href="https://storybook.js.org/docs/react/configure/webpack"
-    target="_blank"
-  >
-    <img src={StackAlt} alt="Build" />
-    <span>
-      <strong>Build configuration</strong>
-      How to customize webpack and Babel
-    </span>
-  </a>
-  <a
-    className="link-item"
-    href="https://storybook.js.org/docs/react/configure/styling-and-css"
-    target="_blank"
-  >
-    <img src={Colors} alt="colors" />
-    <span>
-      <strong>Styling</strong>
-      How to load and configure CSS libraries
-    </span>
-  </a>
-  <a
-    className="link-item"
-    href="https://storybook.js.org/docs/react/get-started/setup#configure-storybook-for-your-stack"
-    target="_blank"
-  >
-    <img src={Flow} alt="flow" />
-    <span>
-      <strong>Data</strong>
-      Providers and mocking for data libraries
-    </span>
-  </a>
-</div>
-
-<div className="subheading">Learn</div>
-
-<div className="link-list">
-  <a className="link-item" href="https://storybook.js.org/docs" target="_blank">
-    <img src={Repo} alt="repo" />
-    <span>
-      <strong>Storybook documentation</strong>
-      Configure, customize, and extend
-    </span>
-  </a>
-  <a className="link-item" href="https://storybook.js.org/tutorials/" target="_blank">
-    <img src={Direction} alt="direction" />
-    <span>
-      <strong>In-depth guides</strong>
-      Best practices from leading teams
-    </span>
-  </a>
-  <a className="link-item" href="https://github.com/storybookjs/storybook" target="_blank">
-    <img src={Code} alt="code" />
-    <span>
-      <strong>GitHub project</strong>
-      View the source and add issues
-    </span>
-  </a>
-  <a className="link-item" href="https://discord.gg/storybook" target="_blank">
-    <img src={Comments} alt="comments" />
-    <span>
-      <strong>Discord chat</strong>
-      Chat with maintainers and the community
-    </span>
-  </a>
-</div>
-
-<div className="tip-wrapper">
-  <span className="tip">Tip</span>Edit the Markdown in{' '}
-  <code>src/stories/Introduction.stories.mdx</code>
-</div>
+`}
+</style> */
+}
+
+// # Welcome to Storybook
+
+// Storybook helps you build UI components in isolation from your app's business logic, data, and context.
+// That makes it easy to develop hard - to - reach states.Save these UI states as ** stories ** to revisit during development, testing, or QA.
+
+// Browse example stories now by navigating to them in the sidebar.
+// View their code in the`src/stories` directory to learn how they work.
+// We recommend building UIs with a[** component - driven **](https://componentdriven.org) process starting with atomic components and ending with pages.
+
+<>
+  <div className="subheading">Configure</div>
+
+  <div className="link-list">
+    <a
+      className="link-item"
+      href="https://storybook.js.org/docs/react/addons/addon-types"
+      target="_blank"
+    >
+      {/* <img src={Plugin} alt="plugin" /> */}
+      <span>
+        <strong>Presets for popular tools</strong>
+        Easy setup for TypeScript, SCSS and more.
+      </span>
+    </a>
+    <a
+      className="link-item"
+      href="https://storybook.js.org/docs/react/configure/webpack"
+      target="_blank"
+    >
+      {/* <img src={StackAlt} alt="Build" /> */}
+      <span>
+        <strong>Build configuration</strong>
+        How to customize webpack and Babel
+      </span>
+    </a>
+    <a
+      className="link-item"
+      href="https://storybook.js.org/docs/react/configure/styling-and-css"
+      target="_blank"
+    >
+      {/* <img src={Colors} alt="colors" /> */}
+      <span>
+        <strong>Styling</strong>
+        How to load and configure CSS libraries
+      </span>
+    </a>
+    <a
+      className="link-item"
+      href="https://storybook.js.org/docs/react/get-started/setup#configure-storybook-for-your-stack"
+      target="_blank"
+    >
+      {/* <img src={Flow} alt="flow" /> */}
+      <span>
+        <strong>Data</strong>
+        Providers and mocking for data libraries
+      </span>
+    </a>
+  </div>
+
+  <div className="subheading">Learn</div>
+
+  <div className="link-list">
+    <a
+      className="link-item"
+      href="https://storybook.js.org/docs"
+      target="_blank"
+    >
+      {/* <img src={Repo} alt="repo" /> */}
+      <span>
+        <strong>Storybook documentation</strong>
+        Configure, customize, and extend
+      </span>
+    </a>
+    <a
+      className="link-item"
+      href="https://storybook.js.org/tutorials/"
+      target="_blank"
+    >
+      {/* <img src={Direction} alt="direction" /> */}
+      <span>
+        <strong>In-depth guides</strong>
+        Best practices from leading teams
+      </span>
+    </a>
+    <a
+      className="link-item"
+      href="https://github.com/storybookjs/storybook"
+      target="_blank"
+    >
+      {/* <img src={Code} alt="code" /> */}
+      <span>
+        <strong>GitHub project</strong>
+        View the source and add issues
+      </span>
+    </a>
+    <a
+      className="link-item"
+      href="https://discord.gg/storybook"
+      target="_blank"
+    >
+      {/* <img src={Comments} alt="comments" /> */}
+      <span>
+        <strong>Discord chat</strong>
+        Chat with maintainers and the community
+      </span>
+    </a>
+  </div>
+
+  <div className="tip-wrapper">
+    <span className="tip">Tip</span>Edit the Markdown in{" "}
+    <code>src/stories/Introduction.stories.mdx</code>
+  </div>
+</>;