@sikka/hawa 0.0.6 → 0.0.7

package/src/ui/HawaAlert.js

@@ -6,15 +6,15 @@ 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()
+  const { hawaTheme, themeName } = useContext(ThemeProvider);
+  const currentTheme = Object.keys(hawaTheme.alerts).find(
+    (tName) => tName.toLowerCase() === themeName?.toLowerCase()
   );
   let alertStyle = {};
 
   if (currentTheme) {
     alertStyle = {
-      ...theme.alerts[currentTheme]
+      ...hawaTheme.alerts[currentTheme]
     };
   } else {
     alertStyle = {
@@ -29,7 +29,7 @@ export const HawaAlert = (props) => {
   });
 
   return (
-    <StyledAlert themeType={props.themeType} {...props}>
+    <StyledAlert {...props}>
       {props.title && <AlertTitle>{props.title}</AlertTitle>}
       {props.text}
     </StyledAlert>

package/src/ui/HawaButton.js

@@ -4,19 +4,19 @@ import { styled, darken } from "@mui/material/styles";
 import Button from "@mui/material/Button";
 
 export const HawaButton = (props) => {
-  const theme = useContext(ThemeProvider);
+  const { hawaTheme, themeName } = useContext(ThemeProvider);
   let buttonStyle = {};
-  let currentTheme = Object.keys(theme.actionButton).find(
-    (themeName) => themeName.toLowerCase() === props.themeType?.toLowerCase()
+  let currentTheme = Object.keys(hawaTheme.actionButton).find(
+    (tName) => tName.toLowerCase() === themeName?.toLowerCase()
   );
   if (currentTheme) {
     buttonStyle = {
-      ...theme.actionButton[currentTheme],
+      ...hawaTheme.actionButton[currentTheme],
       //   marginTop: theme.actionButton[currentTheme].margin,
       border: props.outlined ? "2px solid black" : "none",
       //   borderRadius: theme.actionButton[currentTheme].borderRadius,
       backgroundColor: "white",
-    //   height: 50,
+      //   height: 50,
       "&:hover": {
         backgroundColor: darken("#ffffff", 0.1)
       }
@@ -29,7 +29,7 @@ export const HawaButton = (props) => {
       flexDirection: "row",
       alignItems: "center",
       justifyContent: "center",
-      marginTop: theme.actionButton[currentTheme]?.margin,
+      marginTop: hawaTheme.actionButton[currentTheme]?.margin,
       border: props.outlined ? "2px solid black" : "none",
       borderRadius: 0,
       //backgroundColor: "white",

package/src/ui/HawaInputLabel.js

@@ -3,18 +3,18 @@ import { useContext } from "react";
 import { ThemeProvider } from "../themes/HawaProvider";
 
 export const HawaInputLabel = (props) => {
-  const theme = useContext(ThemeProvider);
+  const { hawaTheme, themeName } = useContext(ThemeProvider);
   let labelStyle = {};
 
-  let currentTheme = Object.keys(theme.actionButton).find(
-    (themeName) => themeName.toLowerCase() === props.themeType?.toLowerCase()
+  let currentTheme = Object.keys(hawaTheme.actionButton).find(
+    (tName) => tName.toLowerCase() === themeName?.toLowerCase()
   );
   if (currentTheme) {
     labelStyle = {
       margin: 15,
       marginRight: 5,
       marginLeft: 5,
-      color: theme.layout[currentTheme].color
+      color: hawaTheme.layout[currentTheme].color
     };
   } else {
     labelStyle = {

package/src/ui/HawaLogoButton.js

@@ -4,19 +4,15 @@ import { styled, darken } from "@mui/material/styles";
 import Button from "@mui/material/Button";
 
 export const HawaLogoButton = (props) => {
-  const theme = useContext(ThemeProvider);
+  const { hawaTheme, themeName } = useContext(ThemeProvider);
   let buttonStyle = {};
-  let currentTheme = Object.keys(theme.logoButton).find(
-    (themeName) => themeName.toLowerCase() === props.themeType?.toLowerCase()
+  let currentTheme = Object.keys(hawaTheme.logoButton).find(
+    (tName) => tName.toLowerCase() === themeName?.toLowerCase()
   );
   if (currentTheme) {
     buttonStyle = {
-      ...theme.logoButton[currentTheme],
-      //   marginTop: theme.actionButton[currentTheme].margin,
-      border: props.outlined ? "2px solid black" : "none",
-      //   borderRadius: theme.actionButton[currentTheme].borderRadius,
+      ...hawaTheme.logoButton[currentTheme],
       backgroundColor: "white",
-      //   height: 50,
       "&:hover": {
         backgroundColor: darken("#ffffff", 0.1)
       }
@@ -29,10 +25,9 @@ export const HawaLogoButton = (props) => {
       flexDirection: "row",
       alignItems: "center",
       justifyContent: "center",
-      marginTop: theme.logoButton[currentTheme]?.margin,
-      border: props.outlined ? "2px solid black" : "none",
-      //   borderRadius: 0,
+      marginTop: 10,
       height: 50,
+      border: "1px solid #ced4da",
       backgroundColor: "white",
       "&:hover": {
         backgroundColor: darken("#ffffff", 0.1)

package/src/ui/HawaRadio.js

@@ -1,51 +1,73 @@
+import { Typography } from "@mui/material";
 import React, { useState, useContext } from "react";
+import { Box } from "../layout";
 import { ThemeProvider } from "../themes/HawaProvider";
 
 export const HawaRadio = (props) => {
   const [value, setValue] = useState(props.defaultValue);
-  const theme = useContext(ThemeProvider);
+
+  const { hawaTheme, themeName } = useContext(ThemeProvider);
+  const currentTheme = Object.keys(hawaTheme.radioSelector).find(
+    (tName) => tName.toLowerCase() === themeName?.toLowerCase()
+  );
+  let radioSelectorStyle = {};
+
+  if (currentTheme) {
+    radioSelectorStyle = {
+      ...hawaTheme.radioSelector[currentTheme],
+      "-moz-user-select": "-moz-none",
+      "-khtml-user-select": "none",
+      "-webkit-user-select": "none",
+      "-ms-user-select": "none",
+      "user-select": "none"
+    };
+  } else {
+    radioSelectorStyle = {
+      display: "flex",
+      flexDirection: "row",
+      justifyContent: "space-between",
+      alignItems: "center",
+      backgroundColor: "#F5F5F5",
+      margin: 0,
+
+      backgroundColor: "lightGrey",
+      color: "black",
+      padding: 10
+    };
+  }
 
   return (
-    <div
-      style={{
-        backgroundColor: "white",
-        display: "flex",
-        flexDirection: "row",
-        margin: theme.margins,
-        padding: theme.paddings,
-        marginBottom: 10
-      }}
-    >
+    <Box horizontal maxWidth={"fit-content"}>
       {props.options.map((singleOption) => {
         return (
           <div
             key={singleOption.label}
-            className="radio_option"
             onClick={() => {
               setValue(singleOption.label);
               if (props.handleChange) {
                 props.handleChange();
               }
             }}
-            style={
-              value.toLowerCase() === singleOption.label.toLowerCase()
-                ? {
-                    borderRadius: theme.borderRadius,
-                    padding: theme.paddings,
-                    backgroundColor:
-                      theme.primaryColor || props.bgSelectedColor || "blue",
-                    color: props.textSelectedColor || "lightgray"
-                  }
-                : {
-                    borderRadius: theme.borderRadius,
-                    padding: theme.paddings
-                  }
-            }
+            style={{
+              ...radioSelectorStyle,
+              backgroundColor:
+                value.toLowerCase() === singleOption.label.toLowerCase()
+                  ? currentTheme
+                    ? hawaTheme.actionButton[currentTheme]?.backgroundColor
+                    : "black"
+                  : hawaTheme.layout[currentTheme]?.backgroundColor,
+              color:
+                value.toLowerCase() === singleOption.label.toLowerCase()
+                  ? hawaTheme.actionButton[currentTheme]?.color
+                  : currentTheme
+                  ? hawaTheme.layout[currentTheme]?.color
+                  : "black"
+            }}
           >
-            {singleOption.text}
+            <Typography>{singleOption.text}</Typography>
           </div>
         );
       })}
-    </div>
+    </Box>
   );
 };

package/src/ui/HawaSettingsRow.js

@@ -0,0 +1,71 @@
+import React, { useContext } from "react";
+
+import PropTypes from "prop-types";
+import { ThemeProvider } from "../themes/HawaProvider";
+import { Box } from "../layout";
+import Checkbox from "@mui/material/Checkbox";
+import TextField from "@mui/material/TextField";
+
+export const HawaSettingsRow = (props) => {
+  const { hawaTheme, themeName } = useContext(ThemeProvider);
+  const currentTheme = Object.keys(hawaTheme.settingsRow).find(
+    (tName) => tName.toLowerCase() === themeName?.toLowerCase()
+  );
+  let settingsRowStyle = {};
+
+  if (currentTheme) {
+    settingsRowStyle = {
+      ...hawaTheme.settingsRow[currentTheme],
+      margin: props.last ? 0 : hawaTheme.settingsRow[currentTheme].margin,
+      marginTop: props.last ? hawaTheme.settingsRow[currentTheme].margin * 2 : 0
+    };
+  } else {
+    settingsRowStyle = {
+      display: "flex",
+      flexDirection: "row",
+      justifyContent: "space-between",
+      alignItems: "center",
+      backgroundColor: "#F5F5F5",
+      margin: 0,
+
+      backgroundColor: "lightGrey",
+      color: "black",
+      padding: 10
+    };
+  }
+
+  return (
+    <Box noColor>
+      {props.settingsType === "checkbox" && (
+        <div style={{ ...settingsRowStyle }}>
+          Checkbox Label <Checkbox />
+        </div>
+      )}
+      {props.settingsType === "text" && (
+        <div style={{ ...settingsRowStyle }}>
+          Text Label{" "}
+          <TextField
+            InputProps={{
+              style: {
+                ...hawaTheme.inputFields[currentTheme],
+                // borderRadius: 0,
+                // padding: 0,
+                // backgroundColor: "white",
+                height: 40
+              }
+            }}
+            style={{
+              padding: 0
+            }}
+            placeholder="test"
+          />
+        </div>
+      )}
+    </Box>
+  );
+};
+
+HawaSettingsRow.propTypes = {
+  type: PropTypes.oneOf(["text", "number", "password"]),
+  helperText: PropTypes.string
+};

package/src/ui/HawaTextField.js

@@ -7,28 +7,27 @@ import { ThemeProvider } from "../themes/HawaProvider";
 import { HawaInputLabel } from "./HawaInputLabel";
 import { Controller, useFormContext } from "react-hook-form";
 
+import { InputAdornment, TextField } from "@mui/material";
+import { MailOutline } from "@mui/icons-material";
+
 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()
+  const { hawaTheme, themeName } = useContext(ThemeProvider);
+  const currentTheme = Object.keys(hawaTheme.inputFields).find(
+    (tName) => tName.toLowerCase() === themeName?.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
+      ...hawaTheme.inputFields[currentTheme],
+      margin: props.last ? 0 : hawaTheme.inputFields[currentTheme].margin,
+      marginTop: props.last ? hawaTheme.inputFields[currentTheme].margin * 2 : 0
     };
   } else {
     textFieldStyle = {
-      backgroundColor: "white",
-      display: "flex",
-      flexDirection: "column",
-      alignItems: "flex-start",
-      justifyContent: "flex-start"
+      backgroundColor: "white"
     };
   }
 
@@ -38,27 +37,26 @@ export const HawaTextField = (props) => {
       //   marginTop: theme.spacing(3)
       // },
       "& .MuiInputBase-input": {
-        backgroundColor: theme.palette.mode === "light" ? "#fcfcfb" : "#2b2b2b",
+        // backgroundColor: theme.palette.mode === "light" ? "#fcfcfb" : "#2b2b2b",
         transition: theme.transitions.create([
           "border-color",
           "background-color",
           "box-shadow"
-        ]),
+        ])
+
+        // backgroundColor: "red"
+      },
 
-        "&: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
-      }
+      // position: "relative",
+      border: "1px solid #ced4da",
+      fontSize: 16,
+      // width: "auto",
+      padding: "10px 12px",
+      marginBottom: props.helperText ? 5 : 0,
+      paddingLeft: 10,
+      paddingRight: 10,
+      ...textFieldStyle
+      // backgroundColor: "green"
     };
   });
 
@@ -66,12 +64,7 @@ export const HawaTextField = (props) => {
     <Controller
       render={({ field }) => (
         <>
-          {props.inputLabel && (
-            <HawaInputLabel
-              themeType={props.themeType}
-              label={props.inputLabel}
-            />
-          )}
+          {props.inputLabel && <HawaInputLabel label={props.inputLabel} />}
 
           <StyledTextField
             fullWidth={true}
@@ -88,13 +81,17 @@ export const HawaTextField = (props) => {
             //       }
             //     : {}
             // }
+
             defaultValue={props.defaultValue && ""}
             value={props.value && ""}
             {...props}
             // {...field}
             {...register(props.name)}
           />
-          <Typography variant="caption" style={{ margin: 5, color: "red" }}>
+          <Typography
+            variant="caption"
+            style={{ margin: 5, marginBottom: 0, color: "red" }}
+          >
             {props.helperText}
           </Typography>
         </>

package/src/ui/HawaTypography.js

@@ -5,14 +5,14 @@ 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()
+  const { hawaTheme, themeName } = useContext(ThemeProvider);
+  const currentTheme = Object.keys(hawaTheme.typography).find(
+    (tName) => tName.toLowerCase() === themeName?.toLowerCase()
   );
   let typographyStyle = {};
 
   if (currentTheme) {
-    typographyStyle = { ...theme.typography[currentTheme] };
+    typographyStyle = { ...hawaTheme.typography[currentTheme] };
   } else {
     typographyStyle = {
       color: "black"

package/src/ui/MadaButton.js

@@ -1,79 +1,12 @@
-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";
+import React from "react";
+import { HawaLogoButton } from "./HawaLogoButton";
 
 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}
-    >
+    <HawaLogoButton {...props}>
       <img
         src="https://sikka-images.s3.ap-southeast-1.amazonaws.com/payments/mada.png"
-        height={30}
+        height={20}
       />{" "}
       <div style={{ width: 10 }} />
       <p
@@ -88,6 +21,6 @@ export const MadaButton = (props) => {
       >
         {props.buttonText}
       </p>
-    </StyledButton>
+    </HawaLogoButton>
   );
 };

package/src/ui/PayPalButton.js

@@ -1,76 +1,9 @@
-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";
+import React from "react";
+import { HawaLogoButton } from "./HawaLogoButton";
 
 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}
-    >
+    <HawaLogoButton {...props}>
       <img
         src="https://sikka-images.s3.ap-southeast-1.amazonaws.com/payments/paypal.png"
         height={25}
@@ -88,6 +21,6 @@ export const PayPalButton = (props) => {
       >
         {props.buttonText}
       </p>
-    </StyledButton>
+    </HawaLogoButton>
   );
 };