@sikka/hawa 0.0.3 → 0.0.6

package/src/ui/HawaAlert.js

@@ -0,0 +1,37 @@
+import React, { useContext } from "react";
+import { ThemeProvider } from "../themes/HawaProvider";
+import { styled, alpha } from "@mui/material/styles";
+
+import Alert from "@mui/material/Alert";
+import AlertTitle from "@mui/material/AlertTitle";
+
+export const HawaAlert = (props) => {
+  const theme = useContext(ThemeProvider);
+  const currentTheme = Object.keys(theme.alerts).find(
+    (themeName) => themeName.toLowerCase() === props.themeType?.toLowerCase()
+  );
+  let alertStyle = {};
+
+  if (currentTheme) {
+    alertStyle = {
+      ...theme.alerts[currentTheme]
+    };
+  } else {
+    alertStyle = {
+      marginBottom: 10
+    };
+  }
+
+  const StyledAlert = styled(Alert)(({ theme }) => {
+    return {
+      ...alertStyle
+    };
+  });
+
+  return (
+    <StyledAlert themeType={props.themeType} {...props}>
+      {props.title && <AlertTitle>{props.title}</AlertTitle>}
+      {props.text}
+    </StyledAlert>
+  );
+};

package/src/ui/HawaButton.js

@@ -0,0 +1,48 @@
+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 HawaButton = (props) => {
+  const theme = useContext(ThemeProvider);
+  let buttonStyle = {};
+  let currentTheme = Object.keys(theme.actionButton).find(
+    (themeName) => themeName.toLowerCase() === props.themeType?.toLowerCase()
+  );
+  if (currentTheme) {
+    buttonStyle = {
+      ...theme.actionButton[currentTheme],
+      //   marginTop: theme.actionButton[currentTheme].margin,
+      border: props.outlined ? "2px solid black" : "none",
+      //   borderRadius: theme.actionButton[currentTheme].borderRadius,
+      backgroundColor: "white",
+    //   height: 50,
+      "&:hover": {
+        backgroundColor: darken("#ffffff", 0.1)
+      }
+    };
+  } else {
+    // Default theme
+    buttonStyle = {
+      cursor: "pointer",
+      display: "flex",
+      flexDirection: "row",
+      alignItems: "center",
+      justifyContent: "center",
+      marginTop: theme.actionButton[currentTheme]?.margin,
+      border: props.outlined ? "2px solid black" : "none",
+      borderRadius: 0,
+      //backgroundColor: "white",
+      backgroundColor: "red",
+      "&:hover": {
+        backgroundColor: darken("#ffffff", 0.1)
+      }
+    };
+  }
+  const StyledButton = styled(Button)(({ theme }) => {
+    return {
+      ...buttonStyle
+    };
+  });
+  return <StyledButton {...props}>{props.children}</StyledButton>;
+};

package/src/ui/{Checkbox.js → HawaCheckbox.js}

@@ -1,9 +1,9 @@
 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) => {
+export const HawaCheckbox = (props) => {
   console.log("props : ", props);
   return (
     <React.Fragment>

package/src/ui/HawaInputLabel.js

@@ -0,0 +1,32 @@
+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 = {};
+
+  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/ui/HawaLogoButton.js

@@ -0,0 +1,48 @@
+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 HawaLogoButton = (props) => {
+  const theme = useContext(ThemeProvider);
+  let buttonStyle = {};
+  let currentTheme = Object.keys(theme.logoButton).find(
+    (themeName) => themeName.toLowerCase() === props.themeType?.toLowerCase()
+  );
+  if (currentTheme) {
+    buttonStyle = {
+      ...theme.logoButton[currentTheme],
+      //   marginTop: theme.actionButton[currentTheme].margin,
+      border: props.outlined ? "2px solid black" : "none",
+      //   borderRadius: theme.actionButton[currentTheme].borderRadius,
+      backgroundColor: "white",
+      //   height: 50,
+      "&:hover": {
+        backgroundColor: darken("#ffffff", 0.1)
+      }
+    };
+  } else {
+    // Default theme
+    buttonStyle = {
+      cursor: "pointer",
+      display: "flex",
+      flexDirection: "row",
+      alignItems: "center",
+      justifyContent: "center",
+      marginTop: theme.logoButton[currentTheme]?.margin,
+      border: props.outlined ? "2px solid black" : "none",
+      //   borderRadius: 0,
+      height: 50,
+      backgroundColor: "white",
+      "&:hover": {
+        backgroundColor: darken("#ffffff", 0.1)
+      }
+    };
+  }
+  const StyledButton = styled(Button)(({ theme }) => {
+    return {
+      ...buttonStyle
+    };
+  });
+  return <StyledButton {...props}>{props.children}</StyledButton>;
+};

package/src/ui/{RadioSelector.js → HawaRadio.js}

@@ -1,7 +1,7 @@
 import React, { useState, useContext } from "react";
 import { ThemeProvider } from "../themes/HawaProvider";
 
-export const StyledRadioSelector = (props) => {
+export const HawaRadio = (props) => {
   const [value, setValue] = useState(props.defaultValue);
   const theme = useContext(ThemeProvider);
 

package/src/ui/{TextArea.js → HawaTextArea.js}

@@ -1,8 +1,8 @@
 import React from "react";
 import { Controller, useFormContext } from "react-hook-form";
-import { StyledInputLabel } from "../ui";
+import { StyledInputLabel } from ".";
 
-export const StyledTextArea = (props) => {
+export const HawaTextArea = (props) => {
   const { control } = useFormContext();
   const { name, rules, shouldUnregister, inputLabel, helperText } = props;
 

package/src/ui/HawaTextField.js

@@ -0,0 +1,113 @@
+import React, { useContext } from "react";
+import InputBase from "@mui/material/InputBase";
+import Typography from "@mui/material/Typography";
+import { styled, alpha } from "@mui/material/styles";
+import PropTypes from "prop-types";
+import { ThemeProvider } from "../themes/HawaProvider";
+import { HawaInputLabel } from "./HawaInputLabel";
+import { Controller, useFormContext } from "react-hook-form";
+
+export const HawaTextField = (props) => {
+  const { control, register } = useFormContext();
+
+  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 StyledTextField = 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
+          // borderColor: theme.actionButton[currentTheme]?.backgroundColor
+        },
+        borderRadius: 4,
+        // position: "relative",
+        border: "1px solid #ced4da",
+        fontSize: 16,
+        // width: "auto",
+        padding: "10px 12px",
+        marginBottom: props.helperText ? 5 : 0,
+        ...textFieldStyle
+      }
+    };
+  });
+
+  return (
+    <Controller
+      render={({ field }) => (
+        <>
+          {props.inputLabel && (
+            <HawaInputLabel
+              themeType={props.themeType}
+              label={props.inputLabel}
+            />
+          )}
+
+          <StyledTextField
+            fullWidth={true}
+            // helperText={props.helperText}
+            type={props.type ?? "text"}
+            // placeholder={props.placeholder}
+            // inputProps={
+            //   props.type === "number"
+            //     ? {
+            //         inputMode: "numeric",
+            //         min: "0",
+            //         max: "9999999",
+            //         step: "0.01"
+            //       }
+            //     : {}
+            // }
+            defaultValue={props.defaultValue && ""}
+            value={props.value && ""}
+            {...props}
+            // {...field}
+            {...register(props.name)}
+          />
+          <Typography variant="caption" style={{ margin: 5, color: "red" }}>
+            {props.helperText}
+          </Typography>
+        </>
+      )}
+      name={props.name}
+      rules={props.rules}
+      control={control}
+      shouldUnregister={props.shouldUnregister}
+    />
+  );
+};
+
+HawaTextField.propTypes = {
+  type: PropTypes.oneOf(["text", "number", "password"]),
+  helperText: PropTypes.string
+};

package/src/ui/HawaTypography.js

@@ -0,0 +1,29 @@
+import React, { useContext } from "react";
+import { styled, alpha } from "@mui/material/styles";
+import PropTypes from "prop-types";
+import { ThemeProvider } from "../themes/HawaProvider";
+import Typography from "@mui/material/Typography";
+
+export const HawaTypography = (props) => {
+  const theme = useContext(ThemeProvider);
+  const currentTheme = Object.keys(theme.actionButton).find(
+    (themeName) => themeName.toLowerCase() === props.themeType?.toLowerCase()
+  );
+  let typographyStyle = {};
+
+  if (currentTheme) {
+    typographyStyle = { ...theme.typography[currentTheme] };
+  } else {
+    typographyStyle = {
+      color: "black"
+    };
+  }
+
+  const StyledTypography = styled(Typography)(({ theme }) => {
+    return {
+      ...typographyStyle
+    };
+  });
+
+  return <StyledTypography {...props}>{props.children}</StyledTypography>;
+};

package/src/ui/MadaButton.js

@@ -0,0 +1,93 @@
+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 = {};
+
+  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,93 @@
+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 = {};
+
+  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={25}
+      />{" "}
+      <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/RadioBox.js

@@ -1,7 +1,7 @@
 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";
+import FormControlLabel from "@mui/material/FormControlLabel";
+import Checkbox from "@mui/material/Checkbox";
 
 export const StyledRadioBox = (props) => {
   const { control } = useFormContext();

package/src/ui/STCPayButton.js

@@ -0,0 +1,93 @@
+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 STCPayButton = (props) => {
+  const theme = useContext(ThemeProvider);
+  let buttonStyle = {};
+
+  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/stc-pay.png"
+        height={20}
+      />{" "}
+      <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/SelectedField.js

@@ -1,9 +1,9 @@
 import React from "react";
 import { Controller, useFormContext } from "react-hook-form";
-import FormHelperText from "@material-ui/core/FormHelperText";
-import FormControl from "@material-ui/core/FormControl";
-import MenuItem from "@material-ui/core/MenuItem";
-import Select from "@material-ui/core/Select";
+import FormHelperText from "@mui/material/FormHelperText";
+import FormControl from "@mui/material/FormControl";
+import MenuItem from "@mui/material/MenuItem";
+import Select from "@mui/material/Select";
 
 const MuiSelect = (props) => {
   const { name, options, required, error } = props;

package/src/ui/StyledTooltip.js

@@ -1,5 +1,5 @@
 import React, { useState, useContext } from "react";
-import Tooltip from "@material-ui/core/Tooltip";
+import Tooltip from "@mui/material/Tooltip";
 
 export const StyledTooltip = (props) => {
   const screenSize = {

package/src/ui/TabPanel.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { makeStyles } from "@material-ui/core";
+import { makeStyles } from "@mui/material/styles";
 
 const useStyles = makeStyles((theme) => ({
   panelsContainer: {