@sikka/hawa 0.0.4 → 0.0.7

package/src/blocks/Payment/SelectPayment.js

@@ -0,0 +1,76 @@
+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";
+
+export const SelectPayment = (props) => {
+  return (
+    <Box maxWidth={400} noColor noMargin noPadding>
+      <Box noMargin>
+        <HawaTypography align="center">Choose Payment Method</HawaTypography>
+        {props.viaWallet && (
+          <WalletButton
+            buttonText={props.walletLabel}
+            onClick={props.handleWallet}
+          />
+        )}
+        {props.viaCreditCard && (
+          <VisaMasterButton
+            buttonText={props.visaMasterLabel}
+            handleClick={props.handleCreditCard}
+          />
+        )}
+        {props.viaMada && (
+          <MadaButton
+            buttonText={props.madaLabel}
+            handleClick={props.handleMada}
+          />
+        )}
+        {props.viaSTCPay && (
+          <STCPayButton
+            buttonText={props.stcPayLabel}
+            handleClick={props.handleSTCPay}
+          />
+        )}
+        {props.viaPayPal && (
+          <PayPalButton
+            buttonText={props.paypalLabel}
+            handleClick={props.handlePayPal}
+          />
+        )}
+        {props.viaGooglePay && (
+          <GooglePayButton
+            buttonText={props.googlePayLabel}
+            handleClick={props.handleGooglePay}
+          />
+        )}
+        {props.viaApplePay && (
+          <ApplePayButton
+            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,18 @@
+// "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";
+export * from "./ChargeWalletForm";
+export * from "./PayWithWallet";

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

@@ -2,24 +2,37 @@ import React, { useContext } from "react";
 import { ThemeProvider } from "../themes/HawaProvider";
 
 export const Box = (props) => {
-  const theme = useContext(ThemeProvider);
-  return (
-    <div
-      style={{
-        display: 'flex',
-        flexDirection: 'column',
-        // justifyContent: 'center',
-        // alignItems: 'center',
+  const { hawaTheme, themeName } = useContext(ThemeProvider);
+  let boxStyle = {};
 
-        backgroundColor: theme.layoutColor,
-        color: theme.textColor,
-        padding: theme.paddings,
-        margin: theme.margins,
-        borderRadius: theme.borderRadius,
-        maxWidth: props.maxWidth
-      }}
-    >
-      {props.children}
-    </div>
+  let currentTheme = Object.keys(hawaTheme.layout).find(
+    (tName) => tName.toLowerCase() === themeName?.toLowerCase()
   );
+  if (currentTheme) {
+    boxStyle = {
+      display: "flex",
+      flexDirection: props.horizontal ? "row" : "column",
+      ...hawaTheme.layout[currentTheme],
+      backgroundColor: props.noColor
+        ? "none"
+        : 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: props.horizontal ? "row" : "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/BlocksStories/AuthForm.stories.js

@@ -0,0 +1,103 @@
+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 themeName={args.theme}>
+      <SignInForm
+        {...args}
+        error={args.showError}
+        handleSignIn={(e) => console.log("singing in via email", e)}
+        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,
+  showError: false,
+  theme: "primary"
+};
+
+const SignUpTemplate = (args) => {
+  return (
+    <HawaProvider themeName={args.theme}>
+      <SignUpForm
+        {...args}
+        error={args.showError}
+        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,
+  showError: false,
+  theme: "primary"
+};
+
+const ResetPasswordTemplate = (args) => {
+  return (
+    <HawaProvider themeName={args.theme}>
+      <ResetPasswordForm error={args.showError} theme={args.theme} {...args} />
+    </HawaProvider>
+  );
+};
+export const ResetPassword = ResetPasswordTemplate.bind({});
+ResetPassword.args = {
+  theme: "primary",
+  showError: false
+};
+const NewPasswordTemplate = (args) => {
+  return (
+    <HawaProvider themeName={args.theme}>
+      <NewPasswordForm error={args.showError} theme={args.theme} {...args} />
+    </HawaProvider>
+  );
+};
+export const NewPassword = NewPasswordTemplate.bind({});
+NewPassword.args = {
+  theme: "primary",
+  showError: false
+};

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

@@ -0,0 +1,86 @@
+import React from "react";
+import {
+  SelectPayment,
+  CreditCardForm,
+  ChargeWalletForm,
+  PayWithWallet
+} from "../../blocks/Payment";
+import { defaultTheme, HawaProvider } from "../../themes/HawaProvider";
+
+export default {
+  title: "Blocks/PaymentBlocks",
+  component: [SelectPayment, CreditCardForm],
+  argTypes: {
+    theme: {
+      options: ["primary", "secondary", "default"],
+      control: { type: "select" }
+    },
+    viaWallet: { control: "boolean" },
+    viaApplePay: { control: "boolean" },
+    viaGooglePay: { control: "boolean" },
+    viaSTCPay: { control: "boolean" },
+    viaCreditCard: { control: "boolean" },
+    viaPayPal: { control: "boolean" }
+  },
+  args: {
+    theme: "primary",
+    viaWallet: true,
+    viaMada: true,
+    viaApplePay: true,
+    viaGooglePay: true,
+    viaSTCPay: true,
+    viaCreditCard: true,
+    viaPayPal: true
+  }
+};
+
+export const PaymentSelection = (args) => {
+  return (
+    <HawaProvider themeName={args.theme}>
+      <SelectPayment
+        {...args}
+        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>
+  );
+};
+
+export const PayViaWallet = (args) => {
+  return (
+    <HawaProvider theme={{ ...defaultTheme }}>
+      <PayWithWallet theme={args.theme} />
+    </HawaProvider>
+  );
+};
+export const PayViaCreditCard = (args) => {
+  return (
+    <HawaProvider theme={{ ...defaultTheme }}>
+      <CreditCardForm />
+    </HawaProvider>
+  );
+};
+
+export const ChargeWallet = (args) => {
+  return (
+    <HawaProvider themeName={args.theme}>
+      <ChargeWalletForm currency="SAR" />
+    </HawaProvider>
+  );
+};
+
+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/GlobalVariables.stories.js

@@ -1,101 +1,44 @@
-import React, { useState } from "react";
-import { storiesOf } from "@storybook/react";
-
-import "../styles.css";
-
-const stories = storiesOf("Test", module);
-
-stories.add("Global Variables", () => {
-  return <div>test</div>;
-});
+import React from "react";
+import PropTypes from "prop-types";
 
 export const GlobalVariables = (args) => {
   //   const methods = useForm();
-  return <div>test</div>;
+  return <div>TESTING COMPONENT</div>;
+};
+export const AnotherComponent = (args) => {
+  //   const methods = useForm();
+  return <div>TESTING COMPONENT</div>;
+};
+AnotherComponent.propTypes = {
+  textLabel: PropTypes.string
 };
 export default {
-  title: "GlobalVariables",
-  component: [
-    StyledCheckBox,
-    StyledTextFieldT,
-    StyledTextAreaT,
-    StyledRadioSeletorT
-  ],
+  title: "TestTitle",
+  component: [GlobalVariables, AnotherComponent],
   argTypes: {
     resize: {
+      description: "overwritten description",
+      table: {
+        type: {
+          summary: "something short"
+        },
+        defaultValue: { summary: "Hello" }
+      },
       options: ["vertical", "horizontal", "both"],
-      control: { type: "radio" }
+      control: { type: "select" }
+    },
+    label: {
+      description: "overwritten description",
+      table: {
+        type: {
+          summary: "something short",
+          detail: "something really really long"
+        },
+        defaultValue: { summary: "Hello" }
+      },
+      control: {
+        type: null
+      }
     }
   }
 };
-
-/****************************/
-// STYLED CHECKBOX TEMPLATE
-// const StyledCheckBoxTemplate = (args) => {
-//   const methods = useForm();
-//   return (
-//     <FormProvider {...methods}>
-//       <StyledCheckbox {...args} />
-//     </FormProvider>
-//   );
-// };
-// export const StyledCheckBox = StyledCheckBoxTemplate.bind({});
-// StyledCheckBox.args = {
-//   name: "checkbox",
-//   label: "CheckBox",
-//   color: "blue",
-//   rules: { required: true },
-//   defaultValue: true
-// };
-/****************************/
-
-/****************************/
-// STYLED TextField TEMPLATE
-// const StyledTextFieldTemplate = (args) => {
-//   const methods = useForm();
-//   return (
-//     <FormProvider {...methods}>
-//       <StyledTextField {...args} />
-//     </FormProvider>
-//   );
-// };
-
-// export const StyledTextFieldT = StyledTextFieldTemplate.bind({});
-// StyledTextFieldT.args = {
-//   name: "styledtextfield",
-//   inputLabel: "Label",
-//   bdRadius: 12,
-//   bgColor: "lightgray",
-//   helperText: "This is HelperText",
-//   type: "text",
-//   placeholder: "exemple ..."
-// };
-
-/****************************/
-// Radio Selector Template
-// const styledRadioSelectorTempalte = (args) => {
-//   const methods = useForm();
-
-//   return (
-//     <FormProvider {...methods}>
-//       <StyledRadioSelector {...args} />
-//     </FormProvider>
-//   );
-// };
-
-// export const StyledRadioSeletorT = styledRadioSelectorTempalte.bind({});
-// StyledRadioSeletorT.args = {
-//   name: "Radio Selector",
-//   shouldUnregister: true,
-//   options: [
-//     { text: "Option 1", label: "option1" },
-//     { text: "Option 2", label: "option2" },
-//     { text: "Option 3", label: "option3" }
-//   ],
-//   selectedColor: "blue",
-//   bdRadius: 12,
-//   defaultValue: "option2",
-//   bgSelectedColor: "red",
-//   textSelectedColor: "black"
-// };
-/****************************/

package/src/stories/HawaProvider.stories.js

@@ -1,5 +1,4 @@
 import React from "react";
-import CastIcon from "@material-ui/icons/Cast";
 import { HawaProvider } from "../themes/HawaProvider";
 
 const Template = (args) => {