@sikka/hawa 0.0.11 → 0.0.14

package/src/themes/HawaProvider.js

@@ -1,192 +0,0 @@
-import { createTheme } from "@mui/system";
-// import { createContext } from "react";
-
-// //make the text color of the action buttons different from the text color of the layout
-// let allPrimaryBG = "#f90900";
-// let allPrimaryAction = "#B20D30";
-// export const defaultTheme = {
-//   allPrimaryBG: "#f90900",
-//   allPrimaryAction: "#138A36",
-//   allBorderRadius: 10,
-//   borderRadius: 10,
-//   primaryColor: "blue",
-//   secondaryColor: "grey",
-//   // primaryActionColor: '#f72585', //Colors of the buttons
-//   primaryActionColor: "grey", //Colors of the buttons
-//   secondaryActionColor: "#4cc9f0", //Colors of the buttons
-//   layoutColor: "#d3d4d9", //Colors of boxes and cards
-//   textColor: "black", //Colors of text everywhere
-//   inputColor: "white", //Color of input fields
-//   lightBackground: "#FBF5F3", //
-//   darkBackground: "#0F0E0E",
-//   testcolor: "green",
-//   margins: 10,
-//   paddings: 10,
-//   typography: {
-//     fontFamily: ["IBMPlex"].join(","),
-//     primary: { color: "black" },
-//     secondary: { color: "white" }
-//   },
-//   logoButton: {
-//     primary: {
-//       borderRadius: 10,
-//       backgroundColor: allPrimaryAction,
-//       // margin: 10,
-//       marginTop: 10,
-//       padding: 30,
-//       paddingTop: 0,
-//       paddingBottom: 0,
-//       border: "1px solid #ced4da",
-//       height: 50,
-//       "&:focus": {
-//         borderColor: allPrimaryAction
-//       }
-//     },
-//     secondary: {
-//       borderRadius: 10,
-//       backgroundColor: "#f90900",
-//       marginTop: 10,
-//       padding: 30,
-//       paddingTop: 0,
-//       paddingBottom: 0,
-//       border: "1px solid #ced4da",
-//       height: 50,
-//       "&:focus": {
-//         borderColor: "green"
-//       }
-//     }
-//   },
-//   actionButton: {
-//     primary: {
-//       borderRadius: 10,
-//       // backgroundColor: "#f90900",
-//       backgroundColor: allPrimaryAction,
-//       color: "white",
-//       margin: 10,
-//       padding: 10,
-//       border: "1px solid #ced4da",
-//       fontSize: 16,
-//       height: 50,
-//       "&:focus": {
-//         borderColor: "red"
-//       }
-//     },
-//     secondary: {
-//       borderRadius: 10,
-//       margin: 10,
-//       padding: 10,
-//       backgroundColor: "#FF8811",
-//       color: "black"
-//     }
-//   },
-//   layout: {
-//     primary: {
-//       backgroundColor: "#d3d4d9",
-//       color: "black",
-//       margin: 10,
-//       padding: 10,
-//       borderRadius: 10
-//     },
-//     secondary: {
-//       backgroundColor: "#001E3C",
-//       // backgroundColor: "red",
-//       color: "white",
-//       margin: 10,
-//       padding: 10,
-//       borderRadius: 10
-//     }
-//   },
-//   inputFields: {
-//     primary: {
-//       backgroundColor: "white",
-//       borderRadius: 10,
-//       padding: 10,
-//       "&:hover": {
-//         borderColor: "red",
-//         borderWidth: 1,
-//         outline: "1px solid black"
-//       }
-//     },
-//     secondary: {
-//       backgroundColor: "white",
-//       borderRadius: 10,
-//       padding: 10
-//     }
-//   },
-//   alerts: {
-//     primary: {
-//       marginBottom: 10,
-//       padding: 10,
-//       borderRadius: 10
-//     },
-//     secondary: {
-//       marginBottom: 10,
-//       padding: 10,
-//       borderRadius: 10
-//     }
-//   },
-//   settingsRow: {
-//     primary: {
-//       display: "flex",
-//       flexDirection: "row",
-//       justifyContent: "space-between",
-//       alignItems: "center",
-//       backgroundColor: "#F5F5F5",
-//       margin: 0,
-//       padding: 10,
-//       borderRadius: 10
-//     },
-//     secondary: {
-//       display: "flex",
-//       flexDirection: "row",
-//       justifyContent: "space-between",
-//       alignItems: "center",
-//       backgroundColor: "blue",
-//       margin: 0,
-//       padding: 5,
-//       borderRadius: 10
-//     }
-//   },
-//   radioSelector: {
-//     primary: {
-//       padding: 10,
-//       borderRadius: 10
-//     },
-//     secondary: {
-//       padding: 10,
-//       borderRadius: 10
-//     }
-//   }
-// };
-
-export const QawaimTheme = createTheme({
-  components: {
-    MuiButton: {
-      variants: [
-        {
-          props: { variant: "withLogo" },
-          style: {
-            textTransform: "none",
-            border: `2px solid blue`,
-            backgroundColor: "red"
-          }
-        },
-        {
-          props: { variant: "dashed", color: "secondary" },
-          style: {
-            border: `4px dashed red`
-          }
-        }
-      ]
-    },
-    MuiButton: {
-      styleOverrides: {
-        // Name of the slot
-        root: {
-          // Some CSS
-          fontSize: "3rem"
-        }
-      }
-    }
-  }
-});

package/src/themes/QawaimTheme.js

@@ -1,199 +0,0 @@
-import { createTheme } from "@mui/system";
-// import { createContext } from "react";
-
-// //make the text color of the action buttons different from the text color of the layout
-// let allPrimaryBG = "#f90900";
-// let allPrimaryAction = "#B20D30";
-// export const defaultTheme = {
-//   allPrimaryBG: "#f90900",
-//   allPrimaryAction: "#138A36",
-//   allBorderRadius: 10,
-//   borderRadius: 10,
-//   primaryColor: "blue",
-//   secondaryColor: "grey",
-//   // primaryActionColor: '#f72585', //Colors of the buttons
-//   primaryActionColor: "grey", //Colors of the buttons
-//   secondaryActionColor: "#4cc9f0", //Colors of the buttons
-//   layoutColor: "#d3d4d9", //Colors of boxes and cards
-//   textColor: "black", //Colors of text everywhere
-//   inputColor: "white", //Color of input fields
-//   lightBackground: "#FBF5F3", //
-//   darkBackground: "#0F0E0E",
-//   testcolor: "green",
-//   margins: 10,
-//   paddings: 10,
-//   typography: {
-//     fontFamily: ["IBMPlex"].join(","),
-//     primary: { color: "black" },
-//     secondary: { color: "white" }
-//   },
-//   logoButton: {
-//     primary: {
-//       borderRadius: 10,
-//       backgroundColor: allPrimaryAction,
-//       // margin: 10,
-//       marginTop: 10,
-//       padding: 30,
-//       paddingTop: 0,
-//       paddingBottom: 0,
-//       border: "1px solid #ced4da",
-//       height: 50,
-//       "&:focus": {
-//         borderColor: allPrimaryAction
-//       }
-//     },
-//     secondary: {
-//       borderRadius: 10,
-//       backgroundColor: "#f90900",
-//       marginTop: 10,
-//       padding: 30,
-//       paddingTop: 0,
-//       paddingBottom: 0,
-//       border: "1px solid #ced4da",
-//       height: 50,
-//       "&:focus": {
-//         borderColor: "green"
-//       }
-//     }
-//   },
-//   actionButton: {
-//     primary: {
-//       borderRadius: 10,
-//       // backgroundColor: "#f90900",
-//       backgroundColor: allPrimaryAction,
-//       color: "white",
-//       margin: 10,
-//       padding: 10,
-//       border: "1px solid #ced4da",
-//       fontSize: 16,
-//       height: 50,
-//       "&:focus": {
-//         borderColor: "red"
-//       }
-//     },
-//     secondary: {
-//       borderRadius: 10,
-//       margin: 10,
-//       padding: 10,
-//       backgroundColor: "#FF8811",
-//       color: "black"
-//     }
-//   },
-//   layout: {
-//     primary: {
-//       backgroundColor: "#d3d4d9",
-//       color: "black",
-//       margin: 10,
-//       padding: 10,
-//       borderRadius: 10
-//     },
-//     secondary: {
-//       backgroundColor: "#001E3C",
-//       // backgroundColor: "red",
-//       color: "white",
-//       margin: 10,
-//       padding: 10,
-//       borderRadius: 10
-//     }
-//   },
-//   inputFields: {
-//     primary: {
-//       backgroundColor: "white",
-//       borderRadius: 10,
-//       padding: 10,
-//       "&:hover": {
-//         borderColor: "red",
-//         borderWidth: 1,
-//         outline: "1px solid black"
-//       }
-//     },
-//     secondary: {
-//       backgroundColor: "white",
-//       borderRadius: 10,
-//       padding: 10
-//     }
-//   },
-//   alerts: {
-//     primary: {
-//       marginBottom: 10,
-//       padding: 10,
-//       borderRadius: 10
-//     },
-//     secondary: {
-//       marginBottom: 10,
-//       padding: 10,
-//       borderRadius: 10
-//     }
-//   },
-//   settingsRow: {
-//     primary: {
-//       display: "flex",
-//       flexDirection: "row",
-//       justifyContent: "space-between",
-//       alignItems: "center",
-//       backgroundColor: "#F5F5F5",
-//       margin: 0,
-//       padding: 10,
-//       borderRadius: 10
-//     },
-//     secondary: {
-//       display: "flex",
-//       flexDirection: "row",
-//       justifyContent: "space-between",
-//       alignItems: "center",
-//       backgroundColor: "blue",
-//       margin: 0,
-//       padding: 5,
-//       borderRadius: 10
-//     }
-//   },
-//   radioSelector: {
-//     primary: {
-//       padding: 10,
-//       borderRadius: 10
-//     },
-//     secondary: {
-//       padding: 10,
-//       borderRadius: 10
-//     }
-//   }
-// };
-
-export const QawaimTheme = createTheme({
-  components: {
-    MuiButton: {
-      styleOverrides: {
-        // Name of the slot
-        root: {
-          // Some CSS
-          fontSize: "1rem"
-        }
-      },
-      variants: [
-        {
-          props: { variant: "withLogo" },
-          style: {
-            textTransform: "none",
-            border: `2px solid blue`,
-            backgroundColor: "red"
-          }
-        },
-        {
-          props: { variant: "dashed", color: "secondary" },
-          style: {
-            border: `4px dashed red`
-          }
-        }
-      ]
-    },
-    MuiButton: {
-      styleOverrides: {
-        // Name of the slot
-        root: {
-          // Some CSS
-          fontSize: "3rem"
-        }
-      }
-    }
-  }
-});

package/src/ui/AdaptiveButton.js

@@ -1,131 +0,0 @@
-import React, { useState } from "react";
-import Button from "@mui/material/Button";
-import Tooltip from "@mui/material/Tooltip";
-import PropTypes from "prop-types";
-import { StyledTooltip } from "./StyledTooltip";
-import { getTextColor } from "../util";
-
-export const AdaptiveButton = (props) => {
-  const { showText } = props;
-
-  const [tooltip, setTooltip] = useState(false);
-  const [hovered, setHovered] = useState(false);
-  //full button
-  if (showText) {
-    return (
-      <Button
-        disableRipple
-        disabled={props.disabled}
-        aria-label={props.buttonLabel}
-        color={props.danger ? "secondary" : "primary"}
-        onClick={props.handleClick}
-        style={{
-          backgroundColor: theme.primaryColor,
-          // borderRadius: theme.borderRadius,
-          padding: theme.paddings,
-          color: getTextColor(theme.primaryColor)
-          // color: hovered
-          //   ? "#ffffff"
-          //   : props.danger
-          //   ? "#f50057"
-          //   : "var(--blue)"
-        }}
-      >
-        {props.icon}
-        {props.showText ? (
-          <span style={{ marginLeft: props.icon ? 5 : 0 }}>
-            {props.buttonLabel}
-          </span>
-        ) : null}
-      </Button>
-    );
-  } else if (props.buttonLabelOnly) {
-    return (
-      <>
-        <Tooltip
-          placement={screenSize.width > 400 ? "bottom-center" : "top-center"}
-          enterTouchDelay={100}
-          title={
-            props.hint ? (
-              props.hint
-            ) : (
-              <div>
-                <div
-                  style={{
-                    fontSize: 20,
-                    fontWeight: 800,
-                    padding: 10,
-                    paddingBottom: 5,
-                    textAlign: "center"
-                  }}
-                >
-                  {props.hintTitle}
-                </div>
-                <div
-                  style={{
-                    fontSize: 13,
-                    fontWeight: 100,
-                    padding: 10,
-                    textAlign: "center"
-                  }}
-                >
-                  {props.hintContent}
-                </div>
-              </div>
-            )
-          }
-        >
-          <Button
-            disabled={props.disabled}
-            size="small"
-            disableRipple
-            aria-label={props.buttonLabel}
-            onClick={props.handleClick}
-            color={props.danger ? "secondary" : "primary"}
-            style={{
-              padding: 10,
-              color: hovered
-                ? "#ffffff"
-                : props.danger
-                ? "#f50057"
-                : "var(--blue)"
-            }}
-          >
-            {props.buttonLabel}
-          </Button>
-        </Tooltip>
-      </>
-    );
-  } else {
-    //icon only
-    return (
-      <StyledTooltip hintTitle="Example" hintContent="More explaination here">
-        <Button
-          disabled={props.disabled}
-          size="small"
-          disableRipple
-          aria-label={props.buttonLabel}
-          onClick={props.handleClick}
-          color={props.danger ? "secondary" : "primary"}
-          style={{
-            padding: 10,
-            color: hovered
-              ? "#ffffff"
-              : props.danger
-              ? "#f50057"
-              : "var(--blue)"
-          }}
-        >
-          {props.icon}
-        </Button>
-      </StyledTooltip>
-    );
-  }
-};
-
-AdaptiveButton.propTypes = {
-  buttonLabel: PropTypes.string,
-  danger: PropTypes.bool,
-  disabled: PropTypes.bool,
-  showText: PropTypes.bool
-};

package/src/ui/HawaRadio.js

@@ -1,64 +0,0 @@
-import { Typography } from "@mui/material";
-import React from "react";
-import { Box } from "../layout";
-
-export const HawaRadio = (props) => {
-  // 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

@@ -1,45 +0,0 @@
-import React from "react";
-
-import PropTypes from "prop-types";
-import { Box } from "../layout";
-import Checkbox from "@mui/material/Checkbox";
-import TextField from "@mui/material/TextField";
-import { HawaTypography } from "./HawaTypography";
-export const HawaSettingsRow = (props) => {
-
-
-  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
-};