@sikka/hawa 0.0.2 → 0.0.3

package/src/themes/HawaProvider.js

@@ -0,0 +1,45 @@
+import { createContext } from "react";
+
+//make the text color of the action buttons different from the text color of the layout
+export const defaultTheme = {
+  borderRadius: 10,
+  primaryColor: "blue",
+  secondaryColor: "grey",
+  primaryActionColor: '#f72585', //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',
+  margins: 10, paddings: 10
+
+};
+//change the heirarchy to something like the one below
+let testTheme = {
+  layout: {
+    primary: {
+      backgroundColor: 'red'
+    },
+    secondary: {
+      backgroundColor: 'blue'
+    }
+  }
+}
+
+export const ThemeProvider = createContext(defaultTheme);
+
+export const HawaProvider = ({ theme, ...props }) => {
+  if (props.size === 'large') {
+    theme = {
+      ...theme,
+      paddings: 20,
+      margins: 20
+    }
+  }
+  return (
+    <ThemeProvider.Provider value={theme || defaultTheme}>
+      {props.children}
+    </ThemeProvider.Provider>
+  );
+};

package/src/ui/ActionButton.js

@@ -0,0 +1,15 @@
+import Button from "@material-ui/core/Button";
+import { useContext } from "react";
+import { ThemeProvider } from "../themes/HawaProvider";
+
+export const ActionButton = (props) => {
+    const theme = useContext(ThemeProvider);
+    return (
+        <Button style={{
+            color: theme.textColor,
+            backgroundColor: props.secondary ? theme.secondaryActionColor : theme.primaryActionColor,
+            borderRadius: theme.borderRadius,
+            marginTop: props.last ? theme.margins * 2 : 0
+        }}>{props.text}</Button>
+    );
+};

package/src/{components/Hawa/AdaptiveButton → ui}/AdaptiveButton.js

@@ -1,254 +1,252 @@
-import React, { useState, useContext } from "react";
-import Button from "@material-ui/core/Button";
-import Tooltip from "@material-ui/core/Tooltip";
-import { motion } from "framer-motion";
-import { ThemeProvider } from "../HawaProvider";
-import { StyledTooltip } from "../StyledTooltip";
-import PropTypes from "prop-types";
-import { getTextColor } from "../../../util";
-
-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 (
-      <motion.div
-        transition={{ duration: 0.2 }}
-        whileTap={{ scale: 1.2 }}
-        whileHover={{
-          // backgroundColor: props.hoverColor,
-          borderRadius: theme.borderRadius,
-          color: "red"
-        }}
-        onMouseEnter={() => setHovered(true)}
-        onMouseLeave={() => setHovered(false)}
-        onMouseDown={() => setHovered(true)}
-        onMouseUp={() => setHovered(false)}
-        onMouseOver={() => setHovered(true)}
-        onMouseOut={() => setHovered(false)}
-      >
-        <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>
-      </motion.div>
-    );
-  } else if (props.buttonLabelOnly) {
-    return (
-      <motion.div
-        transition={{ duration: 0.2 }}
-        initial={{
-          width: "fit-content",
-          backgroundColor: props.buttonColor,
-          borderRadius: theme.borderRadius
-        }}
-        whileTap={{ scale: 1.2 }}
-        whileHover={{
-          backgroundColor: props.hoverColor,
-          borderRadius: theme.borderRadius
-        }}
-        onMouseEnter={() => setHovered(true)}
-        onMouseLeave={() => setHovered(false)}
-        onMouseDown={() => {
-          setHovered(true);
-          setTooltip(true);
-        }}
-        onMouseUp={() => {
-          setHovered(false);
-          setTooltip(true);
-        }}
-        onMouseOver={() => {
-          setHovered(true);
-          setTooltip(true);
-        }}
-        onMouseOut={() => {
-          setHovered(false);
-          // setTooltip(true);
-        }}
-      >
-        <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>
-      </motion.div>
-    );
-  } else {
-    //icon only
-    return (
-      <motion.div
-        transition={{ duration: 0.2 }}
-        initial={{
-          width: "fit-content",
-          backgroundColor: props.buttonColor,
-          borderRadius: theme.borderRadius,
-          // padding: 5,
-          margin: 5
-        }}
-        whileTap={{ scale: 1.2 }}
-        whileHover={{
-          backgroundColor: props.hoverColor,
-          borderRadius: theme.borderRadius
-        }}
-        onMouseEnter={() => setHovered(true)}
-        onMouseLeave={() => setHovered(false)}
-        onMouseDown={() => {
-          setHovered(true);
-          setTooltip(true);
-        }}
-        onMouseUp={() => {
-          setHovered(false);
-          setTooltip(true);
-        }}
-        onMouseOver={() => {
-          setHovered(true);
-          setTooltip(true);
-        }}
-        onMouseOut={() => {
-          setHovered(false);
-          // setTooltip(true);
-        }}
-      >
-        <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>
-        {/* <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>
-            )
-          }
-        >
-
-        </Tooltip> */}
-      </motion.div>
-    );
-  }
-};
-
-AdaptiveButton.propTypes = {
-  buttonLabel: PropTypes.string,
-  danger: PropTypes.bool,
-  disabled: PropTypes.bool,
-  showText: PropTypes.bool
-};
-
-export default AdaptiveButton;
+import React, { useState, useContext } from "react";
+import Button from "@material-ui/core/Button";
+import Tooltip from "@material-ui/core/Tooltip";
+import { motion } from "framer-motion";
+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 (
+      <motion.div
+        transition={{ duration: 0.2 }}
+        whileTap={{ scale: 1.2 }}
+        whileHover={{
+          // backgroundColor: props.hoverColor,
+          borderRadius: theme.borderRadius,
+          color: "red"
+        }}
+        onMouseEnter={() => setHovered(true)}
+        onMouseLeave={() => setHovered(false)}
+        onMouseDown={() => setHovered(true)}
+        onMouseUp={() => setHovered(false)}
+        onMouseOver={() => setHovered(true)}
+        onMouseOut={() => setHovered(false)}
+      >
+        <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>
+      </motion.div>
+    );
+  } else if (props.buttonLabelOnly) {
+    return (
+      <motion.div
+        transition={{ duration: 0.2 }}
+        initial={{
+          width: "fit-content",
+          backgroundColor: props.buttonColor,
+          borderRadius: theme.borderRadius
+        }}
+        whileTap={{ scale: 1.2 }}
+        whileHover={{
+          backgroundColor: props.hoverColor,
+          borderRadius: theme.borderRadius
+        }}
+        onMouseEnter={() => setHovered(true)}
+        onMouseLeave={() => setHovered(false)}
+        onMouseDown={() => {
+          setHovered(true);
+          setTooltip(true);
+        }}
+        onMouseUp={() => {
+          setHovered(false);
+          setTooltip(true);
+        }}
+        onMouseOver={() => {
+          setHovered(true);
+          setTooltip(true);
+        }}
+        onMouseOut={() => {
+          setHovered(false);
+          // setTooltip(true);
+        }}
+      >
+        <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>
+      </motion.div>
+    );
+  } else {
+    //icon only
+    return (
+      <motion.div
+        transition={{ duration: 0.2 }}
+        initial={{
+          width: "fit-content",
+          backgroundColor: props.buttonColor,
+          borderRadius: theme.borderRadius,
+          // padding: 5,
+          margin: 5
+        }}
+        whileTap={{ scale: 1.2 }}
+        whileHover={{
+          backgroundColor: props.hoverColor,
+          borderRadius: theme.borderRadius
+        }}
+        onMouseEnter={() => setHovered(true)}
+        onMouseLeave={() => setHovered(false)}
+        onMouseDown={() => {
+          setHovered(true);
+          setTooltip(true);
+        }}
+        onMouseUp={() => {
+          setHovered(false);
+          setTooltip(true);
+        }}
+        onMouseOver={() => {
+          setHovered(true);
+          setTooltip(true);
+        }}
+        onMouseOut={() => {
+          setHovered(false);
+          // setTooltip(true);
+        }}
+      >
+        <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>
+        {/* <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>
+            )
+          }
+        >
+
+        </Tooltip> */}
+      </motion.div>
+    );
+  }
+};
+
+AdaptiveButton.propTypes = {
+  buttonLabel: PropTypes.string,
+  danger: PropTypes.bool,
+  disabled: PropTypes.bool,
+  showText: PropTypes.bool
+};

package/src/{components/Hawa/AutoCompleteField/AutoCompleteField.jsx → ui/AutoCompleteField.js}

@@ -1,33 +1,33 @@
-import React from "react";
-import { Controller, useFormContext } from "react-hook-form";
-// import Autocomplete from "@material-ui/lab/Autocomplete";
-
-export const AutoCompleteField = (props) => {
-  const { control } = useFormContext();
-  const { name, rules, shouldUnregister } = props;
-
-  return (
-    <React.Fragment>
-      <Controller
-        name={name}
-        rules={rules}
-        control={control}
-        shouldUnregister={shouldUnregister}
-        className="theme_form_input"
-        render={({ field: { onChange, value } }) => {
-          return (
-            <input type="text" />
-            // <Autocomplete
-            //   onChange={(e, data) => {
-            //     onChange(data);
-            //   }}
-            //   value={value ?? ""}
-            //   {...props}
-            //   className={"theme_form_input"}
-            // />
-          );
-        }}
-      />
-    </React.Fragment>
-  );
-};
+import React from "react";
+import { Controller, useFormContext } from "react-hook-form";
+// import Autocomplete from "@material-ui/lab/Autocomplete";
+
+export const AutoCompleteField = (props) => {
+  const { control } = useFormContext();
+  const { name, rules, shouldUnregister } = props;
+
+  return (
+    <React.Fragment>
+      <Controller
+        name={name}
+        rules={rules}
+        control={control}
+        shouldUnregister={shouldUnregister}
+        className="theme_form_input"
+        render={({ field: { onChange, value } }) => {
+          return (
+            <input type="text" />
+            // <Autocomplete
+            //   onChange={(e, data) => {
+            //     onChange(data);
+            //   }}
+            //   value={value ?? ""}
+            //   {...props}
+            //   className={"theme_form_input"}
+            // />
+          );
+        }}
+      />
+    </React.Fragment>
+  );
+};

package/src/{components/Hawa/Checkbox/Checkbox.jsx → ui/Checkbox.js}

@@ -1,20 +1,21 @@
-import React from "react";
-import FormControlLabel from "@material-ui/core/FormControlLabel";
-import Checkbox from "@material-ui/core/Checkbox";
-import PropTypes from "prop-types";
-
-export const StyledCheckbox = (props) => {
-  console.log("props : ", props);
-  return (
-    <React.Fragment>
-      <FormControlLabel
-        control={
-          <Checkbox
-            style={{ color: props.color || null }}
-            defaultChecked={props.defaultValue}
-          />
-        }
-      />
-    </React.Fragment>
-  );
-};
+import React from "react";
+import FormControlLabel from "@material-ui/core/FormControlLabel";
+import Checkbox from "@material-ui/core/Checkbox";
+// import PropTypes from "prop-types";
+
+export const StyledCheckbox = (props) => {
+  console.log("props : ", props);
+  return (
+    <React.Fragment>
+      <FormControlLabel
+        label={props.label}
+        control={
+          <Checkbox
+            style={{ color: props.color || null }}
+            defaultChecked={props.defaultValue}
+          />
+        }
+      />
+    </React.Fragment>
+  );
+};