@sikka/hawa 0.0.10 → 0.0.13

package/src/stories/UIStories/SettingsRow.stories.js

@@ -1,64 +0,0 @@
-import React from "react";
-import {
-  SelectPayment,
-  CreditCardForm,
-  ChargeWalletForm,
-  PayWithWallet
-} from "../../blocks/Payment";
-import { defaultTheme, HawaProvider } from "../../themes/HawaProvider";
-import { HawaSettingsRow } from "../../ui";
-
-export default {
-  title: "UI/SettingsRow",
-  component: [SelectPayment, CreditCardForm],
-  argTypes: {
-    theme: {
-      options: ["primary", "secondary", "default"],
-      control: { type: "select" }
-    },
-    type: {
-      options: ["checkbox", "text", "default"],
-      control: { type: "select" }
-    }
-  },
-  args: {
-    theme: "primary",
-    type: "checkbox"
-  }
-};
-
-const HawaSettingsRowTemplate = (args) => {
-  return (
-    <HawaProvider themeName={args.theme}>
-      <HawaSettingsRow settingsType={args.type} />
-    </HawaProvider>
-  );
-};
-
-export const Checkbox = HawaSettingsRowTemplate.bind({});
-Checkbox.args = {
-  theme: "primary",
-  type: "checkbox"
-};
-export const Text = (args) => {
-  return (
-    <HawaProvider themeName={args.theme}>
-      <HawaSettingsRow settingsType={args.type} />
-    </HawaProvider>
-  );
-};
-Text.args = {
-  theme: "primary",
-  type: "text"
-};
-export const Radio = (args) => {
-  return (
-    <HawaProvider themeName={args.theme}>
-      <HawaSettingsRow settingsType={args.type} />
-    </HawaProvider>
-  );
-};
-Radio.args = {
-  theme: "primary",
-  type: "radio"
-};

package/src/themes/HawaProvider.js

@@ -1,183 +0,0 @@
-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,
-      "&:focus": {
-        borderColor: "red",
-        borderWidth: 1,
-        border: "1px solid black"
-      },
-      "&:hover": {
-        borderColor: "red",
-        borderWidth: 1,
-        border: "1px solid black"
-      }
-    },
-    secondary: {
-      backgroundColor: "white",
-
-      borderRadius: 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 ThemeProvider = createContext(defaultTheme);
-
-export const HawaProvider = ({ theme, ...props }) => {
-  console.log("theme is ", theme);
-  if (props.size === "large") {
-    theme = {
-      ...theme,
-      paddings: 20,
-      margins: 20
-    };
-  }
-  return (
-    <ThemeProvider.Provider
-      value={{ hawaTheme: defaultTheme, themeName: props.themeName }}
-    >
-      {props.children}
-    </ThemeProvider.Provider>
-  );
-};

package/src/ui/ActionButton.js

@@ -1,41 +0,0 @@
-import Button from "@mui/material/Button";
-import { useContext } from "react";
-import { ThemeProvider } from "../themes/HawaProvider";
-import { styled, darken } from "@mui/material/styles";
-
-export const ActionButton = (props) => {
-  const { hawaTheme, themeName } = useContext(ThemeProvider);
-  const currentTheme = Object.keys(hawaTheme.actionButton).find(
-    (tName) => tName.toLowerCase() === themeName?.toLowerCase()
-  );
-  let actionButtonStyle = {};
-
-  if (currentTheme) {
-    actionButtonStyle = {
-      ...hawaTheme.actionButton[currentTheme],
-      margin: props.last ? 0 : hawaTheme.actionButton[currentTheme].margin,
-      marginTop: props.last
-        ? hawaTheme.actionButton[currentTheme].margin * 2
-        : 0,
-      "&:hover": {
-        backgroundColor: darken(
-          hawaTheme.actionButton[currentTheme]?.backgroundColor,
-          0.1
-        )
-      }
-    };
-  } else {
-    actionButtonStyle = {
-      backgroundColor: "black",
-      color: "white",
-      padding: 10,
-      marginTop: props.last ? 10 * 2 : 0,
-      borderRadius: 0
-    };
-  }
-
-  const StyledButton = styled(Button)(({ theme }) => {
-    return { ...actionButtonStyle };
-  });
-  return <StyledButton {...props}>{props.text}</StyledButton>;
-};

package/src/ui/AdaptiveButton.js

@@ -1,136 +0,0 @@
-import React, { useState, useContext } from "react";
-import Button from "@mui/material/Button";
-import Tooltip from "@mui/material/Tooltip";
-import PropTypes from "prop-types";
-import { ThemeProvider } from "../themes/HawaProvider";
-import { StyledTooltip } from "./StyledTooltip";
-import { getTextColor } from "../util";
-
-export const AdaptiveButton = (props) => {
-  const { showText } = props;
-  const theme = useContext(ThemeProvider);
-  const screenSize = {
-    width: 1500,
-    height: 200
-  };
-  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/HawaAlert.js

@@ -1,37 +0,0 @@
-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

@@ -1,48 +0,0 @@
-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/HawaInputLabel.js

@@ -1,32 +0,0 @@
-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 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}>
-      <div style={{ fontSize: 15 }}>{props.label}</div>
-    </InputLabel>
-  );
-};

package/src/ui/HawaRadio.js

@@ -1,73 +0,0 @@
-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

@@ -1,71 +0,0 @@
-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
-};