@sikka/hawa 0.0.5 → 0.0.8

package/src/ui/HawaAlert.js

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

@@ -3,7 +3,7 @@ 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

@@ -3,19 +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 = {};
 
-  console.log(Object.keys(theme.actionButton));
-  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

@@ -0,0 +1,138 @@
+import React, { useContext } from "react";
+import { ThemeProvider } from "../themes/HawaProvider";
+import { styled, darken } from "@mui/material/styles";
+import Button from "@mui/material/Button";
+import GitHubIcon from "@mui/icons-material/GitHub";
+import TwitterIcon from "@mui/icons-material/Twitter";
+import WalletIcon from "@mui/icons-material/AccountBalanceWallet";
+
+export const HawaLogoButton = (props) => {
+  const { hawaTheme, themeName } = useContext(ThemeProvider);
+  let buttonStyle = {};
+  let currentTheme = Object.keys(hawaTheme.logoButton).find(
+    (tName) => tName.toLowerCase() === themeName?.toLowerCase()
+  );
+  if (currentTheme) {
+    buttonStyle = {
+      ...hawaTheme.logoButton[currentTheme],
+      backgroundColor: "white",
+      "&:hover": {
+        backgroundColor: darken("#ffffff", 0.1)
+      }
+    };
+  } else {
+    // Default theme
+    buttonStyle = {
+      cursor: "pointer",
+      display: "flex",
+      flexDirection: "row",
+      alignItems: "center",
+      justifyContent: "center",
+      marginTop: 10,
+      height: 50,
+      padding: 30,
+      paddingTop: 0,
+      paddingBottom: 0,
+      border: "1px solid #ced4da",
+      backgroundColor: "white",
+      "&:hover": {
+        backgroundColor: darken("#ffffff", 0.1)
+      }
+    };
+  }
+  const StyledButton = styled(Button)(({ theme }) => {
+    return {
+      ...buttonStyle
+    };
+  });
+  let logoElement = "";
+  switch (props.logo?.toLowerCase()) {
+    case "google":
+      logoElement = (
+        <img
+          src={
+            "https://upload.wikimedia.org/wikipedia/commons/5/53/Google_%22G%22_Logo.svg"
+          }
+        />
+      );
+      break;
+    case "github":
+      logoElement = <GitHubIcon />;
+      break;
+    case "twitter":
+      logoElement = <TwitterIcon />;
+      break;
+    case "mada":
+      logoElement = (
+        <img
+          src="https://sikka-images.s3.ap-southeast-1.amazonaws.com/payments/mada.png"
+          height={20}
+        />
+      );
+      break;
+    case "stcpay":
+      logoElement = (
+        <img
+          src="https://sikka-images.s3.ap-southeast-1.amazonaws.com/payments/stc-pay.png"
+          height={20}
+        />
+      );
+      break;
+    case "visa/master":
+      logoElement = (
+        <img
+          src="https://sikka-images.s3.ap-southeast-1.amazonaws.com/payments/visa-master.png"
+          height={30}
+        />
+      );
+      break;
+    case "paypal":
+      logoElement = (
+        <img
+          src="https://sikka-images.s3.ap-southeast-1.amazonaws.com/payments/paypal.png"
+          height={25}
+        />
+      );
+      break;
+    case "googlepay":
+      logoElement = (
+        <img
+          src="https://sikka-images.s3.ap-southeast-1.amazonaws.com/payments/google-pay.png"
+          height={20}
+        />
+      );
+      break;
+    case "applepay":
+      logoElement = (
+        <img
+          src="https://sikka-images.s3.ap-southeast-1.amazonaws.com/payments/apple-pay.png"
+          height={40}
+        />
+      );
+      break;
+    case "wallet":
+      logoElement = <WalletIcon />;
+      break;
+
+    default:
+      break;
+  }
+  return (
+    <StyledButton {...props}>
+      {logoElement}
+      <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/HawaRadio.js

@@ -0,0 +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 { 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 (
+    <Box horizontal maxWidth={"fit-content"}>
+      {props.options.map((singleOption) => {
+        return (
+          <div
+            key={singleOption.label}
+            onClick={() => {
+              setValue(singleOption.label);
+              if (props.handleChange) {
+                props.handleChange();
+              }
+            }}
+            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"
+            }}
+          >
+            <Typography>{singleOption.text}</Typography>
+          </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";
+import { HawaTypography } from "./HawaTypography";
+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 }}>
+          <HawaTypography>Checkbox Label</HawaTypography> <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

@@ -1,118 +1,107 @@
 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 Typography from "@mui/material/Typography";
+import { styled } from "@mui/material/styles";
 import PropTypes from "prop-types";
 import { ThemeProvider } from "../themes/HawaProvider";
 import { HawaInputLabel } from "./HawaInputLabel";
-// import InputLabel from "@mui/material/InputLabel";
+import { Controller, useFormContext } from "react-hook-form";
 
 export const HawaTextField = (props) => {
-  const theme = useContext(ThemeProvider);
-  const currentTheme = Object.keys(theme.actionButton).find(
-    (themeName) => themeName.toLowerCase() === props.themeType?.toLowerCase()
+  const { control, register } = useFormContext();
+
+  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"
     };
   }
 
-  const BootstrapInput = styled(InputBase)(({ theme }) => {
+  const StyledTextField = styled(InputBase)(({ theme }) => {
     return {
       // "label + &": {
       //   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
-        },
-        borderRadius: 4,
-        position: "relative",
-        border: "1px solid #ced4da",
-        fontSize: 16,
-        // width: "auto",
-        padding: "10px 12px",
-        ...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"
     };
   });
 
   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
-  //         },
+    <Controller
+      render={({ field }) => (
+        <>
+          {props.inputLabel && <HawaInputLabel label={props.inputLabel} />}
 
-  //         disableUnderline: true,
-  //         onWheelCapture: (e) => e.target.blur()
-  //       }}
-  //       value={props.value ? props.value : null}
-  //     />
-  //   </div>
-  // );
+          <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, marginBottom: 0, color: "red" }}
+          >
+            {props.helperText}
+          </Typography>
+        </>
+      )}
+      name={props.name}
+      rules={props.rules}
+      control={control}
+      shouldUnregister={props.shouldUnregister}
+    />
+  );
 };
 
 HawaTextField.propTypes = {
-  type: PropTypes.oneOf(["text", "number"]),
+  type: PropTypes.oneOf(["text", "number", "password"]),
   helperText: PropTypes.string
 };
-
-// StyledTextField.defaultProps = {
-//   type: "text"
-// };

package/src/ui/HawaTypography.js

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

package/src/ui/index.js

@@ -1,22 +1,12 @@
-// export * from "./AdaptiveButton";
+export * from "./AdaptiveButton";
 export * from "./ActionButton";
-// export * from "./Checkbox";
-// export * from "./RadioBox";
-// export * from "./RadioSelector";
-// export * from "./Row";
-// export * from "./SelectedField";
-// export * from "./TabPanel";
-// export * from "./HawaTextArea";
+export * from "./HawaCheckbox";
+export * from "./HawaRadio";
+
+export * from "./HawaSettingsRow";
+export * from "./HawaLogoButton";
+export * from "./HawaButton";
 export * from "./HawaTextField";
 export * from "./HawaInputLabel";
-// export * from "./StyledAlert";
-export * from "./GoogleButton";
-export * from "./GithubButton";
-export * from "./TwitterButton";
-export * from "./VisaMasterButton";
-export * from "./MadaButton";
-export * from "./STCPayButton";
-export * from "./PayPalButton";
-export * from "./ApplePayButton";
-export * from "./GooglePayButton";
-export * from "./WalletButton";
+export * from "./HawaTypography";
+export * from "./HawaAlert";