@sikka/hawa 0.0.2 → 0.0.5

package/src/ui/GoogleButton.js

@@ -0,0 +1,83 @@
+import React, { useContext } from "react";
+import { ThemeProvider } from "../themes/HawaProvider";
+import { styled, darken } from "@mui/material/styles";
+import Button from "@mui/material/Button";
+
+export const GoogleButton = (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",
+      marginTop: theme.layout[currentTheme].margin,
+      border: props.outlined ? "2px solid black" : "none",
+      borderRadius: theme.layout[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 onClick={props.handleClick}>
+      <img src="https://upload.wikimedia.org/wikipedia/commons/5/53/Google_%22G%22_Logo.svg" />
+      <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/GooglePayButton.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 GooglePayButton = (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/google-pay.png"
+        height={30}
+      />{" "}
+      <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/{components/Hawa/Hawa.jsx → ui/Hawa.js}

@@ -1,3 +1,3 @@
-export const Hawa = (props) => {
-  return <div>test</div>;
-};
+export const Hawa = (props) => {
+  return <div>test</div>;
+};

package/src/ui/HawaInputLabel.js

@@ -0,0 +1,33 @@
+import InputLabel from "@mui/material/InputLabel";
+import { useContext } from "react";
+import { ThemeProvider } from "../themes/HawaProvider";
+
+export const HawaInputLabel = (props) => {
+  const theme = useContext(ThemeProvider);
+  let labelStyle = {};
+
+  console.log(Object.keys(theme.actionButton));
+  let currentTheme = Object.keys(theme.actionButton).find(
+    (themeName) => themeName.toLowerCase() === props.themeType?.toLowerCase()
+  );
+  if (currentTheme) {
+    labelStyle = {
+      margin: 15,
+      marginRight: 5,
+      marginLeft: 5,
+      color: theme.layout[currentTheme].color
+    };
+  } else {
+    labelStyle = {
+      margin: 15,
+      marginRight: 0,
+      marginLeft: 0,
+      color: "black"
+    };
+  }
+  return (
+    <InputLabel style={labelStyle}>
+      <div style={{ fontSize: 15 }}>{props.label}</div>
+    </InputLabel>
+  );
+};

package/src/{components/Hawa/TextArea/TextArea.jsx → ui/HawaTextArea.js}

@@ -1,38 +1,38 @@
-import React from "react";
-import { Controller, useFormContext } from "react-hook-form";
-import { StyledInputLabel } from "../InputLabel";
-
-export const StyledTextArea = (props) => {
-  const { control } = useFormContext();
-  const { name, rules, shouldUnregister, inputLabel, helperText } = props;
-
-  return (
-    <Controller
-      render={({ field }) => (
-        <label>
-          {inputLabel ? <StyledInputLabel label={inputLabel} /> : null}
-          <textarea
-            style={{
-              color: "black",
-              backgroundColor: props.bgColor || "white",
-              borderRadius: props.bdRadius || 10,
-              borderBottom: "none",
-              border: "none",
-              width: "100%",
-              padding: 0,
-              margin: 0,
-              marginBottom: 0,
-              resize: props.resize || "vertical"
-            }}
-            value={field.value ?? ""}
-            {...field}
-          />
-        </label>
-      )}
-      name={name}
-      rules={rules}
-      control={control}
-      shouldUnregister={shouldUnregister}
-    />
-  );
-};
+import React from "react";
+import { Controller, useFormContext } from "react-hook-form";
+import { StyledInputLabel } from ".";
+
+export const HawaTextArea = (props) => {
+  const { control } = useFormContext();
+  const { name, rules, shouldUnregister, inputLabel, helperText } = props;
+
+  return (
+    <Controller
+      render={({ field }) => (
+        <label>
+          {inputLabel ? <StyledInputLabel label={inputLabel} /> : null}
+          <textarea
+            style={{
+              color: "black",
+              backgroundColor: props.bgColor || "white",
+              borderRadius: props.bdRadius || 10,
+              borderBottom: "none",
+              border: "none",
+              width: "100%",
+              padding: 0,
+              margin: 0,
+              marginBottom: 0,
+              resize: props.resize || "vertical"
+            }}
+            value={field.value ?? ""}
+            {...field}
+          />
+        </label>
+      )}
+      name={name}
+      rules={rules}
+      control={control}
+      shouldUnregister={shouldUnregister}
+    />
+  );
+};

package/src/ui/HawaTextField.js

@@ -0,0 +1,118 @@
+import React, { useContext } from "react";
+// import TextField from "@mui/material/TextField";
+import InputBase from "@mui/material/InputBase";
+import { styled, alpha } from "@mui/material/styles";
+import PropTypes from "prop-types";
+import { ThemeProvider } from "../themes/HawaProvider";
+import { HawaInputLabel } from "./HawaInputLabel";
+// import InputLabel from "@mui/material/InputLabel";
+
+export const HawaTextField = (props) => {
+  const theme = useContext(ThemeProvider);
+  const currentTheme = Object.keys(theme.actionButton).find(
+    (themeName) => themeName.toLowerCase() === props.themeType?.toLowerCase()
+  );
+  let textFieldStyle = {};
+
+  if (currentTheme) {
+    textFieldStyle = {
+      ...theme.inputFields[currentTheme],
+      margin: props.last ? 0 : theme.inputFields[currentTheme].margin,
+      marginTop: props.last ? theme.inputFields[currentTheme].margin * 2 : 0
+    };
+  } else {
+    textFieldStyle = {
+      backgroundColor: "white",
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "flex-start",
+      justifyContent: "flex-start"
+    };
+  }
+
+  const BootstrapInput = styled(InputBase)(({ theme }) => {
+    return {
+      // "label + &": {
+      //   marginTop: theme.spacing(3)
+      // },
+      "& .MuiInputBase-input": {
+        backgroundColor: theme.palette.mode === "light" ? "#fcfcfb" : "#2b2b2b",
+        transition: theme.transitions.create([
+          "border-color",
+          "background-color",
+          "box-shadow"
+        ]),
+
+        "&:focus": {
+          boxShadow: `${alpha(theme.palette.primary.main, 0.25)} 0 0 0 0.2rem`,
+          borderColor: theme.palette.primary.main
+        },
+        borderRadius: 4,
+        position: "relative",
+        border: "1px solid #ced4da",
+        fontSize: 16,
+        // width: "auto",
+        padding: "10px 12px",
+        ...textFieldStyle
+      }
+    };
+  });
+
+  return (
+    // <FormControl variant="standard">
+    <>
+      {props.inputLabel ? (
+        <HawaInputLabel themeType={props.themeType} label={props.inputLabel} />
+      ) : null}
+      {/* <InputLabel shrink htmlFor="bootstrap-input">
+        {props.inputLabel}
+      </InputLabel> */}
+      {/* <div>ss</div> */}
+      <BootstrapInput fullWidth aria-label="dws" />
+    </>
+  );
+  // return (
+  //   <div>
+  //     {props.inputLabel ? (
+  //       <HawaInputLabel themeType={props.themeType} label={props.inputLabel} />
+  //     ) : null}
+  //     <TextField
+  //       fullWidth
+  //       style={textFieldStyle}
+  //       helperText={props.helperText}
+  //       type={props.type ? props.type : "text"}
+  //       placeholder={props.placeholder}
+  //       inputProps={
+  //         props.type === "number"
+  //           ? {
+  //               inputMode: "numeric",
+  //               min: "0",
+  //               max: "9999999",
+  //               step: "0.01"
+  //             }
+  //           : {}
+  //       }
+  //       InputProps={{
+  //         style: {
+  //           ...textFieldStyle
+  //           // // height: 50
+  //           // padding: 0
+  //         },
+
+  //         disableUnderline: true,
+  //         onWheelCapture: (e) => e.target.blur()
+  //       }}
+  //       value={props.value ? props.value : null}
+  //     />
+  //   </div>
+  // );
+};
+
+HawaTextField.propTypes = {
+  type: PropTypes.oneOf(["text", "number"]),
+  helperText: PropTypes.string
+};
+
+// StyledTextField.defaultProps = {
+//   type: "text"
+// };

package/src/ui/MadaButton.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 MadaButton = (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/mada.png"
+        height={30}
+      />{" "}
+      <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/PayPalButton.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 PayPalButton = (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/paypal.png"
+        height={30}
+      />{" "}
+      <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/{components/Hawa/RadioBox/RadioBox.jsx → ui/RadioBox.js}

@@ -1,29 +1,29 @@
-import React from "react";
-import { Controller, useFormContext } from "react-hook-form";
-import FormControlLabel from "@material-ui/core/FormControlLabel";
-import Checkbox from "@material-ui/core/Checkbox";
-
-export const StyledRadioBox = (props) => {
-  const { control } = useFormContext();
-  const { name, defaultValue, rules, shouldUnregister } = props;
-
-  return (
-    <React.Fragment>
-      <Controller
-        render={({ field }) => (
-          <FormControlLabel
-            control={<Checkbox />}
-            {...props}
-            {...field}
-            checked={field.value}
-          />
-        )}
-        name={name}
-        rules={rules}
-        control={control}
-        defaultValue={defaultValue}
-        shouldUnregister={shouldUnregister}
-      />
-    </React.Fragment>
-  );
-};
+import React from "react";
+import { Controller, useFormContext } from "react-hook-form";
+import FormControlLabel from "@mui/material/FormControlLabel";
+import Checkbox from "@mui/material/Checkbox";
+
+export const StyledRadioBox = (props) => {
+  const { control } = useFormContext();
+  const { name, defaultValue, rules, shouldUnregister } = props;
+
+  return (
+    <React.Fragment>
+      <Controller
+        render={({ field }) => (
+          <FormControlLabel
+            control={<Checkbox />}
+            {...props}
+            {...field}
+            checked={field.value}
+          />
+        )}
+        name={name}
+        rules={rules}
+        control={control}
+        defaultValue={defaultValue}
+        shouldUnregister={shouldUnregister}
+      />
+    </React.Fragment>
+  );
+};