@sikka/hawa 0.0.4 → 0.0.7

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";
+
+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/{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,110 @@
+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";
+
+import { InputAdornment, TextField } from "@mui/material";
+import { MailOutline } from "@mui/icons-material";
+
+export const HawaTextField = (props) => {
+  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 = {
+      ...hawaTheme.inputFields[currentTheme],
+      margin: props.last ? 0 : hawaTheme.inputFields[currentTheme].margin,
+      marginTop: props.last ? hawaTheme.inputFields[currentTheme].margin * 2 : 0
+    };
+  } else {
+    textFieldStyle = {
+      backgroundColor: "white"
+    };
+  }
+
+  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"
+        ])
+
+        // backgroundColor: "red"
+      },
+
+      // 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 (
+    <Controller
+      render={({ field }) => (
+        <>
+          {props.inputLabel && <HawaInputLabel 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, 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", "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 { 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/MadaButton.js

@@ -0,0 +1,26 @@
+import React from "react";
+import { HawaLogoButton } from "./HawaLogoButton";
+
+export const MadaButton = (props) => {
+  return (
+    <HawaLogoButton {...props}>
+      <img
+        src="https://sikka-images.s3.ap-southeast-1.amazonaws.com/payments/mada.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>
+    </HawaLogoButton>
+  );
+};

package/src/ui/PayPalButton.js

@@ -0,0 +1,26 @@
+import React from "react";
+import { HawaLogoButton } from "./HawaLogoButton";
+
+export const PayPalButton = (props) => {
+  return (
+    <HawaLogoButton {...props}>
+      <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>
+    </HawaLogoButton>
+  );
+};

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,26 @@
+import React from "react";
+import { HawaLogoButton } from "./HawaLogoButton";
+
+export const STCPayButton = (props) => {
+  return (
+    <HawaLogoButton {...props}>
+      <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>
+    </HawaLogoButton>
+  );
+};

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: {

package/src/ui/TwitterButton.js

@@ -0,0 +1,27 @@
+import React, { useContext } from "react";
+import { ThemeProvider } from "../themes/HawaProvider";
+import TwitterIcon from "@mui/icons-material/Twitter";
+import Button from "@mui/material/Button";
+import { styled, alpha, darken } from "@mui/material/styles";
+import { HawaLogoButton } from "./HawaLogoButton";
+
+export const TwitterButton = (props) => {
+  return (
+    <HawaLogoButton {...props}>
+      <TwitterIcon />
+      <div style={{ width: 10 }} />
+      <p
+        style={{
+          color: "black",
+          fontSize: 14,
+          textAlign: "center",
+          letterSpacing: 0.4,
+          fontFamily: "Roboto",
+          fontWeight: 500
+        }}
+      >
+        {props.buttonText}
+      </p>
+    </HawaLogoButton>
+  );
+};

package/src/ui/VisaMasterButton.js

@@ -0,0 +1,26 @@
+import React from "react";
+import { HawaLogoButton } from "./HawaLogoButton";
+
+export const VisaMasterButton = (props) => {
+  return (
+    <HawaLogoButton {...props}>
+      <img
+        src="https://sikka-images.s3.ap-southeast-1.amazonaws.com/payments/visa-master.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>
+    </HawaLogoButton>
+  );
+};

package/src/ui/WalletButton.js

@@ -0,0 +1,24 @@
+import React from "react";
+import WalletIcon from "@mui/icons-material/AccountBalanceWallet";
+import { HawaLogoButton } from "./HawaLogoButton";
+
+export const WalletButton = (props) => {
+  return (
+    <HawaLogoButton {...props}>
+      <WalletIcon />
+      <div style={{ width: 10 }} />
+      <p
+        style={{
+          color: "black",
+          fontSize: 14,
+          textAlign: "center",
+          letterSpacing: 0.4,
+          fontFamily: "Roboto",
+          fontWeight: 500
+        }}
+      >
+        {props.buttonText}
+      </p>
+    </HawaLogoButton>
+  );
+};

package/src/ui/index.js

@@ -1,13 +1,25 @@
-// export * from "./HawaProvider";
 export * from "./AdaptiveButton";
-export * from "./Checkbox";
-export * from "./RadioBox";
-export * from "./RadioSelector";
-export * from "./Row";
-export * from "./SelectedField";
-export * from "./TabPanel";
-export * from "./TextArea";
-export * from "./TextField";
-export * from "./StyledAlert";
-export * from "./StyledInputLabel";
 export * from "./ActionButton";
+export * from "./HawaCheckbox";
+export * from "./HawaRadio";
+// export * from "./RadioSelector";
+// export * from "./Row";
+// export * from "./SelectedField";
+export * from "./HawaSettingsRow";
+export * from "./HawaLogoButton";
+export * from "./HawaButton";
+export * from "./HawaTextField";
+export * from "./HawaInputLabel";
+export * from "./HawaTypography";
+export * from "./HawaAlert";
+
+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";