@sikka/hawa 0.0.10 → 0.0.11

package/src/ui/HawaAlert.js

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

package/src/ui/HawaButton.js

@@ -1,48 +1,47 @@
-import React, { useContext } from "react";
-import { ThemeProvider } from "../themes/HawaProvider";
-import { styled, darken } from "@mui/material/styles";
+import React 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>;
+  // 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 <Button {...props}>{props.children}</Button>;
 };

package/src/ui/HawaInputLabel.js

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

package/src/ui/HawaLogoButton.js

@@ -1,50 +1,12 @@
-import React, { useContext } from "react";
-import { ThemeProvider } from "../themes/HawaProvider";
-import { styled, darken } from "@mui/material/styles";
+import React from "react";
+// 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";
+import { Typography } from "@mui/material";
 
 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":
@@ -118,10 +80,10 @@ export const HawaLogoButton = (props) => {
       break;
   }
   return (
-    <StyledButton {...props}>
+    <Button {...props} variant="withLogo">
       {logoElement}
       <div style={{ width: 10 }} />
-      <p
+      <Typography
         style={{
           color: "black",
           fontSize: 14,
@@ -132,7 +94,7 @@ export const HawaLogoButton = (props) => {
         }}
       >
         {props.buttonText}
-      </p>
-    </StyledButton>
+      </Typography>
+    </Button>
   );
 };

package/src/ui/HawaRadio.js

@@ -1,40 +1,31 @@
 import { Typography } from "@mui/material";
-import React, { useState, useContext } from "react";
+import React from "react";
 import { Box } from "../layout";
-import { ThemeProvider } from "../themes/HawaProvider";
 
 export const HawaRadio = (props) => {
-  const [value, setValue] = useState(props.defaultValue);
+  // 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,
 
-  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
-    };
-  }
+  //     backgroundColor: "lightGrey",
+  //     color: "black",
+  //     padding: 10
+  //   };
+  // }
 
   return (
     <Box horizontal maxWidth={"fit-content"}>

package/src/ui/HawaSettingsRow.js

@@ -1,38 +1,12 @@
-import React, { useContext } from "react";
+import React 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>

package/src/ui/HawaTextArea.js

@@ -15,7 +15,7 @@ export const HawaTextArea = (props) => {
             style={{
               color: "black",
               backgroundColor: props.bgColor || "white",
-              borderRadius: props.bdRadius || 10,
+              // borderRadius: props.bdRadius || 10,
               borderBottom: "none",
               border: "none",
               width: "100%",

package/src/ui/HawaTextField.js

@@ -1,107 +1,160 @@
-import React, { useContext } from "react";
-import InputBase from "@mui/material/InputBase";
-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 { Controller, useFormContext } from "react-hook-form";
+import React from "react";
+// import InputBase from "@mui/material/InputBase";
+// import Typography from "@mui/material/Typography";
+// import { styled } from "@mui/material/styles";
+// import PropTypes from "prop-types";
+// import { HawaInputLabel } from "./HawaInputLabel";
+// import { Controller, useFormContext } from "react-hook-form";
+import Input from "@mui/material/Input";
+import InputLabel from "@mui/material/InputLabel";
 
 export const HawaTextField = (props) => {
-  const { control, register } = useFormContext();
+  // const { control, register } = useFormContext();
 
-  const { hawaTheme, themeName } = useContext(ThemeProvider);
-  const currentTheme = Object.keys(hawaTheme.inputFields).find(
-    (tName) => tName.toLowerCase() === themeName?.toLowerCase()
-  );
-  let textFieldStyle = {};
+  // 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 {
+  //     // "& .MuiInputBase-input": {
+  //     //   // border: "1px solid #ced4da",
+  //     //   fontSize: 16,
+  //     //   // padding: "10px 12px",
+  //     //   marginBottom: props.helperText ? 5 : 0,
+  //     //   // paddingLeft: 10,
+  //     //   // paddingRight: 10,
+  //     //   ...textFieldStyle
+  //     // },
+  //     // "& .MuiInputBase-root": {
+  //     //   border: "1px solid #ced4da",
+  //     //   fontSize: 16,
+  //     //   // width: "auto",
+  //     //   // padding: "10px 12px",
+  //     //   marginBottom: props.helperText ? 5 : 0,
+  //     //   // paddingLeft: 10,
+  //     //   // paddingRight: 10,
 
-  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"
-    };
-  }
+  //     //   // ...textFieldStyle,
+  //     //   backgroundColor: "blue"
+  //     //   // "&:focus": {
+  //     //   //   borderColor: "red",
+  //     //   //   borderWidth: 1,
+  //     //   //   outline: "1px solid black",
+  //     //   //   backgroundColor: "red"
+  //     //   // }
+  //     //   // "& input:valid + fieldset": {
+  //     //   //   borderColor: "green",
+  //     //   //   borderWidth: 2
+  //     //   // },
+  //     //   // "& input:invalid + fieldset": {
+  //     //   //   borderColor: "red",
+  //     //   //   borderWidth: 2
+  //     //   // },
+  //     //   // "& input:valid:focus + fieldset": {
+  //     //   //   borderLeftWidth: 6,
+  //     //   //   padding: "4px !important" // override inline-style
+  //     //   // }
+  //     // },
 
-  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"
-        ])
+  //     // "&:hover": {
+  //     //   borderColor: "red",
+  //     //   borderWidth: 1,
+  //     //   outline: "1px solid black"
+  //     // },
 
-        // backgroundColor: "red"
-      },
+  //     // paddingLeft: 10,
+  //     // paddingRight: 10,
+  //     // border: "none"
 
-      // 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"
-    };
-  });
+  //     // position: "relative",
+  //     // backgroundColor: "green"
+  //     ...textFieldStyle
+  //   };
+  // });
 
   return (
-    <Controller
-      render={({ field }) => (
-        <>
-          {props.inputLabel && <HawaInputLabel label={props.inputLabel} />}
+    <>
+      <InputLabel>{props.label}</InputLabel>
+      <Input disableUnderline {...props} />
+    </>
+    // <FormControl variant="hawa" style={{ marginTop: 10 }}>
 
-          <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"
-            //       }
-            //     : {}
-            // }
+    // </FormControl>
+    // <TextField
+    //   fullWidth
+    //   type="text"
+    //   // inputProps={{
+    //   //   shrink: true
+    //   // }}
+    //   // InputProps={{
+    //   //   disableUnderline: true,
+    //   //   shrink: true
+    //   // }}
+    //   InputLabelProps={{
+    //     shrink: true
+    //   }}
+    //   {...props}
+    // />
+    // <Controller
+    //   render={({ field }) => (
+    //     <>
+    //       {props.inputLabel && <InputLabel label={props.inputLabel} />}
 
-            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}
-    />
+    //       <TextField
+    //         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
-};
+// HawaTextField.propTypes = {
+//   type: PropTypes.oneOf(["text", "number", "password"]),
+//   helperText: PropTypes.string
+// };