@sikka/hawa 0.0.4 → 0.0.5

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

@@ -0,0 +1,111 @@
+import React from "react";
+import { SelectPayment, CreditCardForm } 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,
+    viaApplePay: true,
+    viaGooglePay: true,
+    viaSTCPay: true,
+    viaCreditCard: true,
+    viaPayPal: true
+  }
+};
+
+export const PaymentSelection = (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>
+  );
+};
+
+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")}
+      />
+    </HawaProvider>
+  );
+};
+export const PayViaCreditCard = (args) => {
+  return (
+    <HawaProvider theme={{ ...defaultTheme }}>
+      <CreditCardForm />
+    </HawaProvider>
+  );
+};
+
+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>
+  );
+};

package/src/stories/{UserAccount.stories.js → BlocksStories/UserAccount.stories.js}

@@ -1,8 +1,8 @@
 import React from "react";
 import {
   UserProfile
-} from "../blocks/Account";
-import { defaultTheme, HawaProvider } from "../themes/HawaProvider";
+} from "../../blocks/Account";
+import { defaultTheme, HawaProvider } from "../../themes/HawaProvider";
 
 export default {
   title: "Blocks/UserProfile",

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) => {

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

@@ -0,0 +1,56 @@
+import React from "react";
+import { Box } from "../../layout";
+import { HawaProvider, defaultTheme } from "../../themes/HawaProvider";
+const theme = {
+  ...defaultTheme
+};
+
+const Template = (args) => {
+  return (
+    <HawaProvider size={args.size} theme={{ ...defaultTheme, ...args.theme }}>
+      <Box themeType="primary">Box 1</Box>
+      <Box themeType="secondary">
+        <div style={{ backgroundColor: "white", padding: 10, color: "black" }}>
+          testing box in box
+        </div>
+      </Box>
+      <Box themeType="secondary">Box 3</Box>
+    </HawaProvider>
+  );
+};
+export default {
+  title: "Layout/Box",
+  component: <Box />,
+  parameters: {
+    backgrounds: {
+      default: "light",
+      values: [
+        { name: "light", value: theme.lightBackground },
+        { name: "dark", value: theme.darkBackground }
+      ]
+    }
+  }
+};
+
+export const Normal = Template.bind({});
+Normal.args = {
+  size: "large",
+  showText: true,
+  buttonLabel: "test",
+  borderRadius: 5,
+  padding: theme.paddings,
+  textColor: "#000000",
+  buttonColor: "#f9f9f9"
+};
+export const Compact = Template.bind({});
+Compact.args = {
+  size: "small",
+  showText: true,
+  buttonLabel: "test",
+  theme: {
+    borderRadius: 5,
+    paddings: theme.paddings / 2,
+    textColor: "#000000",
+    buttonColor: "#f9f9f9"
+  }
+};

package/src/themes/HawaProvider.js

@@ -5,37 +5,79 @@ export const defaultTheme = {
   borderRadius: 10,
   primaryColor: "blue",
   secondaryColor: "grey",
-  primaryActionColor: '#f72585', //Colors of the buttons 
-  secondaryActionColor: '#4cc9f0', //Colors of the buttons 
-  layoutColor: '#d3d4d9', //Colors of boxes and cards
-  textColor: 'black', //Colors of text everywhere
-  inputColor: 'white', //Color of input fields
-  lightBackground: '#FBF5F3',//
-  darkBackground: '#0F0E0E',
-  margins: 10, paddings: 10
-
-};
-//change the heirarchy to something like the one below
-let testTheme = {
+  // primaryActionColor: '#f72585', //Colors of the buttons
+  primaryActionColor: "grey", //Colors of the buttons
+  secondaryActionColor: "#4cc9f0", //Colors of the buttons
+  layoutColor: "#d3d4d9", //Colors of boxes and cards
+  textColor: "black", //Colors of text everywhere
+  inputColor: "white", //Color of input fields
+  lightBackground: "#FBF5F3", //
+  darkBackground: "#0F0E0E",
+  margins: 10,
+  paddings: 10,
+  allBorderRadius: 10,
+  actionButton: {
+    primary: {
+      borderRadius: 10,
+      backgroundColor: "#f90900",
+      color: "white",
+      margin: 10,
+      padding: 10
+    },
+    secondary: {
+      borderRadius: 10,
+      margin: 10,
+      padding: 10,
+      backgroundColor: "#FF8811",
+      color: "black"
+    }
+  },
   layout: {
     primary: {
-      backgroundColor: 'red'
+      backgroundColor: "#d3d4d9",
+      color: "black",
+      margin: 10,
+      padding: 10,
+      borderRadius: 10
     },
     secondary: {
-      backgroundColor: 'blue'
+      backgroundColor: "#001E3C",
+      // backgroundColor: "red",
+      color: "white",
+      margin: 10,
+      padding: 10,
+      borderRadius: 10
+    }
+  },
+  inputFields: {
+    primary: {
+      backgroundColor: "white",
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "flex-start",
+      justifyContent: "flex-start",
+      borderRadius: 10
+    },
+    secondary: {
+      backgroundColor: "white",
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "flex-start",
+      justifyContent: "flex-start",
+      borderRadius: 10
     }
   }
-}
+};
 
 export const ThemeProvider = createContext(defaultTheme);
 
 export const HawaProvider = ({ theme, ...props }) => {
-  if (props.size === 'large') {
+  if (props.size === "large") {
     theme = {
       ...theme,
       paddings: 20,
       margins: 20
-    }
+    };
   }
   return (
     <ThemeProvider.Provider value={theme || defaultTheme}>

package/src/ui/ActionButton.js

@@ -1,15 +1,40 @@
-import Button from "@material-ui/core/Button";
+import Button from "@mui/material/Button";
 import { useContext } from "react";
 import { ThemeProvider } from "../themes/HawaProvider";
+import { styled, darken } from "@mui/material/styles";
 
 export const ActionButton = (props) => {
-    const theme = useContext(ThemeProvider);
-    return (
-        <Button style={{
-            color: theme.textColor,
-            backgroundColor: props.secondary ? theme.secondaryActionColor : theme.primaryActionColor,
-            borderRadius: theme.borderRadius,
-            marginTop: props.last ? theme.margins * 2 : 0
-        }}>{props.text}</Button>
-    );
+  const theme = useContext(ThemeProvider);
+  const currentTheme = Object.keys(theme.actionButton).find(
+    (themeName) => themeName.toLowerCase() === props.themeType?.toLowerCase()
+  );
+  let actionButtonStyle = {};
+
+  if (currentTheme) {
+    actionButtonStyle = {
+      ...theme.actionButton[currentTheme],
+      margin: props.last ? 0 : theme.actionButton[currentTheme].margin,
+      marginTop: props.last ? theme.actionButton[currentTheme].margin * 2 : 0,
+      "&:hover": {
+        backgroundColor: darken(
+          theme.actionButton[currentTheme]?.backgroundColor,
+          0.1
+        )
+      }
+    };
+  } else {
+    actionButtonStyle = {
+      backgroundColor: "black",
+      color: "white",
+      padding: 10,
+      marginTop: props.last ? 10 * 2 : 0
+    };
+  }
+
+  const StyledButton = styled(Button)(({ theme }) => {
+    return {
+      ...actionButtonStyle
+    };
+  });
+  return <StyledButton {...props}>{props.text}</StyledButton>;
 };

package/src/ui/AdaptiveButton.js

@@ -1,6 +1,6 @@
 import React, { useState, useContext } from "react";
-import Button from "@material-ui/core/Button";
-import Tooltip from "@material-ui/core/Tooltip";
+import Button from "@mui/material/Button";
+import Tooltip from "@mui/material/Tooltip";
 import { motion } from "framer-motion";
 import PropTypes from "prop-types";
 import { ThemeProvider } from "../themes/HawaProvider";
@@ -101,30 +101,30 @@ export const AdaptiveButton = (props) => {
             props.hint ? (
               props.hint
             ) : (
-                <div>
-                  <div
-                    style={{
-                      fontSize: 20,
-                      fontWeight: 800,
-                      padding: 10,
-                      paddingBottom: 5,
-                      textAlign: "center"
-                    }}
-                  >
-                    {props.hintTitle}
-                  </div>
-                  <div
-                    style={{
-                      fontSize: 13,
-                      fontWeight: 100,
-                      padding: 10,
-                      textAlign: "center"
-                    }}
-                  >
-                    {props.hintContent}
-                  </div>
+              <div>
+                <div
+                  style={{
+                    fontSize: 20,
+                    fontWeight: 800,
+                    padding: 10,
+                    paddingBottom: 5,
+                    textAlign: "center"
+                  }}
+                >
+                  {props.hintTitle}
                 </div>
-              )
+                <div
+                  style={{
+                    fontSize: 13,
+                    fontWeight: 100,
+                    padding: 10,
+                    textAlign: "center"
+                  }}
+                >
+                  {props.hintContent}
+                </div>
+              </div>
+            )
           }
         >
           <Button
@@ -139,8 +139,8 @@ export const AdaptiveButton = (props) => {
               color: hovered
                 ? "#ffffff"
                 : props.danger
-                  ? "#f50057"
-                  : "var(--blue)"
+                ? "#f50057"
+                : "var(--blue)"
             }}
           >
             {props.buttonLabel}
@@ -197,8 +197,8 @@ export const AdaptiveButton = (props) => {
               color: hovered
                 ? "#ffffff"
                 : props.danger
-                  ? "#f50057"
-                  : "var(--blue)"
+                ? "#f50057"
+                : "var(--blue)"
             }}
           >
             {props.icon}

package/src/ui/ApplePayButton.js

@@ -0,0 +1,94 @@
+import React, { useContext } from "react";
+import { ThemeProvider } from "../themes/HawaProvider";
+import Button from "@mui/material/Button";
+import { styled, darken } from "@mui/material/styles";
+
+import GitHubIcon from "@mui/icons-material/GitHub";
+
+export const ApplePayButton = (props) => {
+  const theme = useContext(ThemeProvider);
+  let buttonStyle = {};
+
+  console.log(Object.keys(theme.actionButton));
+  let currentTheme = Object.keys(theme.actionButton).find(
+    (themeName) => themeName.toLowerCase() === props.themeType?.toLowerCase()
+  );
+  if (currentTheme) {
+    buttonStyle = {
+      cursor: "pointer",
+      display: "flex",
+      flexDirection: "row",
+      alignItems: "center",
+      justifyContent: "center",
+      padding: 0,
+      marginTop: theme.actionButton[currentTheme].margin,
+      border: props.outlined ? "2px solid black" : "none",
+      borderRadius: theme.actionButton[currentTheme].borderRadius,
+      backgroundColor: "white",
+      "&:hover": {
+        backgroundColor: darken("#ffffff", 0.1)
+      }
+    };
+  } else {
+    buttonStyle = {
+      cursor: "pointer",
+      display: "flex",
+      flexDirection: "row",
+      alignItems: "center",
+      justifyContent: "center",
+      marginTop: theme.margins,
+      border: props.outlined ? "2px solid black" : "none",
+      borderRadius: 0,
+      backgroundColor: "white",
+      "&:hover": {
+        backgroundColor: darken("#ffffff", 0.1)
+      }
+    };
+  }
+
+  const StyledButton = styled(Button)(({ theme }) => {
+    return {
+      // "label + &": {
+      //   marginTop: theme.spacing(3)
+      // },
+
+      borderRadius: 4,
+      position: "relative",
+      border: "1px solid #ced4da",
+      fontSize: 16,
+      // width: "auto",
+      height: 50,
+      // padding: "10px 12px",
+      ...buttonStyle,
+      "&:focus": {
+        // boxShadow: `${alpha(theme.palette.primary.main, 0.25)} 0 0 0 0.2rem`,
+        borderColor: theme.palette.primary.main
+      }
+    };
+  });
+
+  return (
+    <StyledButton
+      //  style={buttonStyle}
+      onClick={props.handleClick}
+    >
+      <img
+        src="https://sikka-images.s3.ap-southeast-1.amazonaws.com/payments/apple-pay.png"
+        height={40}
+      />{" "}
+      <div style={{ width: 10 }} />
+      <p
+        style={{
+          color: "black",
+          fontSize: 14,
+          textAlign: "center",
+          letterSpacing: 0.4,
+          fontFamily: "Roboto",
+          fontWeight: 500
+        }}
+      >
+        {props.buttonText}
+      </p>
+    </StyledButton>
+  );
+};

package/src/ui/AutoCompleteField.js

@@ -1,6 +1,5 @@
 import React from "react";
 import { Controller, useFormContext } from "react-hook-form";
-// import Autocomplete from "@material-ui/lab/Autocomplete";
 
 export const AutoCompleteField = (props) => {
   const { control } = useFormContext();

package/src/ui/Checkbox.js

@@ -1,6 +1,6 @@
 import React from "react";
-import FormControlLabel from "@material-ui/core/FormControlLabel";
-import Checkbox from "@material-ui/core/Checkbox";
+import FormControlLabel from "@mui/material/FormControlLabel";
+import Checkbox from "@mui/material/Checkbox";
 // import PropTypes from "prop-types";
 
 export const StyledCheckbox = (props) => {

package/src/ui/DragDropImages.js

@@ -3,8 +3,8 @@ import React, { useEffect, useState } from "react";
 import { getToken } from "../token";
 import { useDropzone } from "react-dropzone";
 import useTranslation from "next-translate/useTranslation";
-import Badge from "@material-ui/core/Badge";
-import CloseIcon from "@material-ui/icons/Close";
+import Badge from "@mui/material/Badge";
+import CloseIcon from "@mui/icons-material/Close";
 import styles from "../styles/Theme.module.css";
 
 const thumbsContainer = {