@sikka/hawa 0.0.4 → 0.0.5

package/src/blocks/AuthForms/NewPasswordForm.js

@@ -1,17 +1,24 @@
 import React, { useContext } from "react";
 import { Box } from "../../layout";
 import { ThemeProvider } from "../../themes/HawaProvider";
-import { StyledTextField, StyledInputLabel } from "../../ui";
+import { ActionButton, HawaTextField, HawaInputLabel } from "../../ui";
 export const NewPasswordForm = (props) => {
   const theme = useContext(ThemeProvider);
   return (
-    <Box maxWidth={400} >
-
-      <StyledInputLabel label="Password" />
-      <StyledTextField type="password" />
-      <StyledInputLabel label="Confirm Password" />
-      <StyledTextField type="password" />
-      {props.children}
+    <Box themeType={props.theme} maxWidth={400} noColor noMargin noPadding>
+      <Box themeType={props.theme} noMargin>
+        <HawaTextField
+          themeType={props.theme}
+          type="password"
+          inputLabel="Password"
+        />
+        <HawaTextField
+          themeType={props.theme}
+          type="password"
+          inputLabel="Confirm Password"
+        />
+        <ActionButton themeType={props.theme} last text="Reset Password" />
+      </Box>
     </Box>
   );
 };

package/src/blocks/AuthForms/ResetPasswordForm.js

@@ -1,14 +1,13 @@
-import React, { useContext } from "react";
+import React from "react";
 import { Box } from "../../layout";
-import { ThemeProvider } from "../../themes/HawaProvider";
-import { StyledTextField, StyledInputLabel } from "../../ui";
+import { HawaTextField, HawaInputLabel, ActionButton } from "../../ui";
 export const ResetPasswordForm = (props) => {
-  const theme = useContext(ThemeProvider);
   return (
-    <Box maxWidth={400} >
-      <StyledInputLabel label="Email" />
-      <StyledTextField type="text" />
-      {props.children}
+    <Box themeType={props.theme} maxWidth={400} noColor noMargin noPadding>
+      <Box themeType={props.theme} noMargin>
+        <HawaTextField themeType={props.theme} type="text" inputLabel="Email" />
+        <ActionButton themeType={props.theme} last text="Reset Password" />
+      </Box>
     </Box>
   );
 };

package/src/blocks/AuthForms/SignInForm.js

@@ -1,19 +1,55 @@
-import React, { useContext } from "react";
-import { ThemeProvider } from "../../themes/HawaProvider";
-import { StyledTextField, StyledInputLabel } from "../../ui";
-import { Box } from '../../layout'
+import React from "react";
+import {
+  HawaTextField,
+  ActionButton,
+  GoogleButton,
+  TwitterButton,
+  GithubButton
+} from "../../ui";
+import { Box } from "../../layout";
+
 export const SignInForm = (props) => {
-  const theme = useContext(ThemeProvider);
   return (
-    <Box maxWidth={400}>
-
-      <StyledInputLabel label="Email" />
-      <StyledTextField type="text" />
-      <StyledInputLabel label="Password" />
-      <StyledTextField type="text" />
-
-      {props.children}
+    <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"
+        />
+        <ActionButton
+          last
+          text={"Sign In"}
+          themeType={props.theme}
+          onClick={props.handleSignIn}
+        />
+      </Box>
+      {props.viaGoogle && (
+        <GoogleButton
+          themeType={props.theme}
+          outlined
+          buttonText={props.googleButtonLabel}
+          handleClick={props.handleGoogleSignIn}
+        />
+      )}
+      {props.viaGithub && (
+        <GithubButton
+          outlined
+          themeType={props.theme}
+          buttonText={props.githubButtonLabel}
+          handleClick={props.handleGithubSignIn}
+        />
+      )}
+      {props.viaTwitter && (
+        <TwitterButton
+          outlined
+          themeType={props.theme}
+          buttonText={props.twitterButtonLabel}
+          handleClick={props.handleTwitterSignIn}
+        />
+      )}
     </Box>
   );
 };

package/src/blocks/AuthForms/SignUpForm.js

@@ -1,20 +1,68 @@
-import React, { useContext } from "react";
+import React from "react";
 import { Box } from "../../layout";
-import { ThemeProvider } from "../../themes/HawaProvider";
-import { StyledTextField, StyledInputLabel } from "../../ui";
+import {
+  HawaTextField,
+  ActionButton,
+  GoogleButton,
+  GithubButton,
+  TwitterButton
+} from "../../ui";
+import PropTypes from "prop-types";
 
 export const SignUpForm = (props) => {
-  const theme = useContext(ThemeProvider);
   return (
-    <Box maxWidth={400}>
-
-      <StyledInputLabel label="Email" />
-      <StyledTextField type="text" />
-      <StyledInputLabel label="Password" />
-      <StyledTextField type="text" />
-      <StyledInputLabel label="Confirm Password" />
-      <StyledTextField type="text" />
-      {props.children}
+    <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>
+      {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}
+        />
+      )}
     </Box>
   );
 };
+
+SignUpForm.propTypes = {
+  theme: PropTypes.oneOf(["secondary", "primary"])
+  // buttonLabel: PropTypes.string,
+  // danger: PropTypes.bool,
+  // disabled: PropTypes.bool,
+  // showText: PropTypes.bool
+};

package/src/blocks/Payment/CreditCardForm.js

@@ -0,0 +1,31 @@
+import React from "react";
+import {
+  HawaTextField,
+  ActionButton,
+  GoogleButton,
+  TwitterButton,
+  GithubButton
+} from "../../ui";
+import { Box } from "../../layout";
+
+export const CreditCardForm = (props) => {
+  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"
+        />
+        <ActionButton
+          last
+          text={"Sign In"}
+          themeType={props.theme}
+          onClick={props.handleSignIn}
+        />
+      </Box>
+    </Box>
+  );
+};

package/src/blocks/Payment/Form/CForm.js

@@ -1,7 +1,7 @@
 import React, { useEffect, useState, useRef } from "react";
 import sha256 from "crypto-js/sha256";
-import Button from "@material-ui/core/Button";
-import CircularProgress from "@material-ui/core/CircularProgress";
+import Button from "@mui/material/Button";
+import CircularProgress from "@mui/material/CircularProgress";
 import useTranslation from "next-translate/useTranslation";
 import axios from "axios";
 
@@ -137,10 +137,8 @@ export default function CForm({
     onUpdateState("isCardFlipped", false);
   };
 
-  const handlePayfortForm = (e) => {
-    
-  };
-  
+  const handlePayfortForm = (e) => {};
+
   // NOTE: Currently the cursor on the card number field gets reset if we remove a number, the code bellow was used
   // in class components, need to transform this to work with functional components.
   // getSnapshotBeforeUpdate() {
@@ -307,7 +305,12 @@ export default function CForm({
                 />
               )}
           </form>
-          <Button variant="contained" color="primary" fullWidth onClick={handlePayfortForm}>
+          <Button
+            variant="contained"
+            color="primary"
+            fullWidth
+            onClick={handlePayfortForm}
+          >
             {loading ? (
               <CircularProgress
                 variant="indeterminate"
@@ -323,4 +326,3 @@ export default function CForm({
     </div>
   );
 }
-

package/src/blocks/Payment/Gateway/Wallet.js

@@ -1,9 +1,9 @@
 import useTranslation from "next-translate/useTranslation";
-import Button from "@material-ui/core/Button";
-import Grid from "@material-ui/core/Grid";
-import Paper from "@material-ui/core/Paper";
-import CircularProgress from "@material-ui/core/CircularProgress";
-import { makeStyles } from "@material-ui/core/styles";
+import Button from "@mui/material/Button";
+import Grid from "@mui/material/Grid";
+import Paper from "@mui/material/Paper";
+import CircularProgress from "@mui/material/CircularProgress";
+import { makeStyles } from "@mui/material/styles";
 
 const useStyles = makeStyles((theme) => ({
   root: {

package/src/blocks/Payment/PaymentMethod.js

@@ -1,6 +1,6 @@
 import useTranslation from "next-translate/useTranslation";
-import Button from "@material-ui/core/Button";
-import Chip from "@material-ui/core/Chip";
+import Button from "@mui/material/Button";
+import Chip from "@mui/material/Chip";
 
 const PaymentMethod = (props) => {
   const { t } = useTranslation("common");

package/src/blocks/Payment/SelectPayment.js

@@ -0,0 +1,95 @@
+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 SelectPayment = (props) => {
+  return (
+    <Box themeType={props.theme} maxWidth={400} noColor noMargin noPadding>
+      <Box themeType={props.theme} noMargin>
+        <div>Choose Payment</div>
+        {props.viaWallet && (
+          <WalletButton
+            themeType={props.theme}
+            outlined
+            buttonText={props.walletLabel}
+            handleClick={props.handleWallet}
+          />
+        )}
+        {props.viaCreditCard && (
+          <VisaMasterButton
+            themeType={props.theme}
+            outlined
+            buttonText={props.visaMasterLabel}
+            handleClick={props.handleCreditCard}
+          />
+        )}
+        {props.viaMada && (
+          <MadaButton
+            themeType={props.theme}
+            outlined
+            buttonText={props.madaLabel}
+            handleClick={props.handleMada}
+          />
+        )}
+
+        {props.viaSTCPay && (
+          <STCPayButton
+            themeType={props.theme}
+            outlined
+            buttonText={props.stcPayLabel}
+            handleClick={props.handleSTCPay}
+          />
+        )}
+        {props.viaPayPal && (
+          <PayPalButton
+            themeType={props.theme}
+            outlined
+            buttonText={props.paypalLabel}
+            handleClick={props.handlePayPal}
+          />
+        )}
+        {props.viaGooglePay && (
+          <GooglePayButton
+            themeType={props.theme}
+            outlined
+            buttonText={props.googlePayLabel}
+            handleClick={props.handleGooglePay}
+          />
+        )}
+
+        {props.viaApplePay && (
+          <ApplePayButton
+            themeType={props.theme}
+            outlined
+            buttonText={props.applePayLabel}
+            handleClick={props.handleApplePay}
+          />
+        )}
+      </Box>
+    </Box>
+  );
+};
+
+HawaTextField.propTypes = {
+  theme: PropTypes.oneOf(["secondary", "primary"]),
+  viaApplePay: PropTypes.bool,
+  viaGooglePay: PropTypes.bool,
+  viaSTCPay: PropTypes.bool,
+  viaCreditCard: PropTypes.bool,
+  viaPayPal: PropTypes.bool,
+  handleApplePay: PropTypes.func
+};

package/src/blocks/Payment/index.js

@@ -0,0 +1,16 @@
+// "use strict";
+
+// var _GooglePay = require("./Gateway/GooglePay");
+// var _Payfort = require("./Gateway/Payfort");
+// var _Paypal = require("./Gateway/Paypal");
+// var _Wallet = require("./Gateway/Wallet");
+// var _PaymentMethod = require("./PaymentMethod");
+
+// exports.GooglePay = _GooglePay.default;
+// exports.Payfort = _Payfort.default;
+// exports.Paypal = _Paypal.default;
+// exports.Wallet = _Wallet.default;
+// exports.PaymentMethod = _PaymentMethod.default;
+
+export * from "./SelectPayment";
+export * from "./CreditCardForm";

package/src/index.js

@@ -1,2 +1,4 @@
-export * from "./blocks";
+export * from "./blocks/Account";
+export * from "./blocks/AuthForms";
+export * from "./blocks/Payment";
 //export * from "./components/Hawa";

package/src/layout/Box.js

@@ -3,23 +3,37 @@ import { ThemeProvider } from "../themes/HawaProvider";
 
 export const Box = (props) => {
   const theme = useContext(ThemeProvider);
-  return (
-    <div
-      style={{
-        display: 'flex',
-        flexDirection: 'column',
-        // justifyContent: 'center',
-        // alignItems: 'center',
+  let boxStyle = {};
 
-        backgroundColor: theme.layoutColor,
-        color: theme.textColor,
-        padding: theme.paddings,
-        margin: theme.margins,
-        borderRadius: theme.borderRadius,
-        maxWidth: props.maxWidth
-      }}
-    >
-      {props.children}
-    </div>
+  console.log(Object.keys(theme.actionButton));
+  let currentTheme = Object.keys(theme.actionButton).find(
+    (themeName) => themeName.toLowerCase() === props.themeType?.toLowerCase()
   );
+  if (currentTheme) {
+    boxStyle = {
+      display: "flex",
+      flexDirection: "column",
+      ...theme.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,
+      maxWidth: props.maxWidth
+    };
+  } else {
+    boxStyle = {
+      display: "flex",
+      flexDirection: "column",
+      color: "white",
+      marginTop: props.last ? 10 * 2 : 0,
+      backgroundColor: props.noColor ? "none" : "lightGrey",
+      padding: props.noPadding ? 0 : 10,
+      margin: props.noMargin ? 0 : 10,
+      maxWidth: props.maxWidth,
+      borderRadius: 0
+    };
+  }
+
+  return <div style={boxStyle}>{props.children}</div>;
 };

package/src/stories/ActionButton.stories.js

@@ -4,18 +4,9 @@ import { defaultTheme, HawaProvider } from "../themes/HawaProvider";
 import { ActionButton } from "../ui";
 
 const Template = (args) => {
-  const theme = {
-    borderRadius: 10,
-    primaryColor: "green",
-    secondaryColor: "red",
-    // margins: "10px",
-    paperColors: "#c6c6c6",
-    paddings: 10,
-    margins: 10
-  };
   return (
-    <HawaProvider theme={{ ...defaultTheme, ...args.theme }}>
-      <ActionButton secondary={args.secondary} text='here' />
+    <HawaProvider theme={{ ...defaultTheme }}>
+      <ActionButton themeType={args.theme} text={args.buttonLabel} />
     </HawaProvider>
   );
 };
@@ -26,24 +17,37 @@ const Template = (args) => {
 
 export default {
   title: "UI/ActionButton",
-  component: ActionButton
+  component: ActionButton,
+  argTypes: {
+    theme: {
+      description: "overwritten description",
+      table: {
+        type: {
+          summary: "something short"
+        },
+        defaultValue: { summary: "Hello" }
+      },
+      options: ["primary", "secondary", "default"],
+      control: { type: "select" }
+    }
+  }
 };
 
+Template.args = {
+  showText: true,
+  buttonLabel: "test",
+  theme: "primary"
+};
 export const Primary = Template.bind({});
 Primary.args = {
   showText: true,
   buttonLabel: "test",
-  borderRadius: 5,
-  textColor: "#000000",
-  buttonColor: "#f9f9f9"
+  theme: "primary"
 };
 
 export const Secondary = Template.bind({});
 Secondary.args = {
-  secondary: true,
   showText: true,
   buttonLabel: "test",
-  borderRadius: 5,
-  textColor: "#000000",
-  buttonColor: "#f9f9f9",
+  theme: "secondary"
 };

package/src/stories/AdaptiveButton.stories.js

@@ -1,5 +1,5 @@
 import React from "react";
-import CastIcon from "@material-ui/icons/Cast";
+import CastIcon from "@mui/icons-material/Cast";
 import { HawaProvider } from "../themes/HawaProvider";
 import { AdaptiveButton } from "../ui";
 

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

@@ -0,0 +1,99 @@
+import React from "react";
+import {
+  NewPasswordForm,
+  ResetPasswordForm,
+  SignInForm,
+  SignUpForm
+} from "../../blocks/AuthForms";
+import { defaultTheme, HawaProvider } from "../../themes/HawaProvider";
+
+export default {
+  title: "Blocks/AuthBlocks",
+  component: [SignInForm, SignUpForm, NewPasswordForm, NewPasswordForm],
+  argTypes: {
+    theme: {
+      options: ["primary", "secondary", "default"],
+      control: { type: "select" }
+    }
+  }
+};
+
+const SignInTemplate = (args) => {
+  return (
+    <HawaProvider theme={{ ...defaultTheme }}>
+      <SignInForm
+        {...args}
+        theme={args.theme}
+        handleSignIn={() => console.log("singing in via email")}
+        viaGoogle={args.viaGoogle}
+        googleButtonLabel={"Sign in with Google"}
+        handleGoogleSignIn={() => console.log("signing in via google")}
+        viaGithub={args.viaGithub}
+        githubButtonLabel={"Sign in with Github"}
+        handleGithubSignIn={() => console.log("signing in via github")}
+        viaTwitter={args.viaTwitter}
+        twitterButtonLabel={"Sign in with Twitter"}
+        handleTwitterSignIn={() => console.log("signing in via Twitter")}
+      />
+    </HawaProvider>
+  );
+};
+
+export const SignIn = SignInTemplate.bind({});
+SignIn.args = {
+  viaGoogle: true,
+  viaGithub: true,
+  viaTwitter: true,
+  theme: "primary"
+};
+
+const SignUpTemplate = (args) => {
+  return (
+    <HawaProvider theme={{ ...defaultTheme }}>
+      <SignUpForm
+        {...args}
+        theme={args.theme}
+        handleSignUp={() => console.log("singing up via email")}
+        viaGoogle={args.viaGoogle}
+        googleButtonLabel={"Sign up with Google"}
+        handleGoogleSignUp={() => console.log("signing up via google")}
+        viaGithub={args.viaGithub}
+        githubButtonLabel={"Sign up with Github"}
+        handleGithubSignUp={() => console.log("signing up via github")}
+        viaTwitter={args.viaTwitter}
+        twitterButtonLabel={"Sign up with Twitter"}
+        handleTwitterSignUp={() => console.log("signing up via Twitter")}
+      />
+    </HawaProvider>
+  );
+};
+export const SignUp = SignUpTemplate.bind({});
+SignUp.args = {
+  viaGoogle: true,
+  viaGithub: true,
+  viaTwitter: true,
+  theme: "primary"
+};
+
+const ResetPasswordTemplate = (args) => {
+  return (
+    <HawaProvider theme={{ ...defaultTheme }}>
+      <ResetPasswordForm theme={args.theme} {...args} />
+    </HawaProvider>
+  );
+};
+export const ResetPassword = ResetPasswordTemplate.bind({});
+ResetPassword.args = {
+  theme: "primary"
+};
+const NewPasswordTemplate = (args) => {
+  return (
+    <HawaProvider theme={{ ...defaultTheme }}>
+      <NewPasswordForm theme={args.theme} {...args} />
+    </HawaProvider>
+  );
+};
+export const NewPassword = NewPasswordTemplate.bind({});
+NewPassword.args = {
+  theme: "primary"
+};