@sikka/hawa 0.0.6 → 0.0.9

package/src/stories/UIStories/RadioSelector.stories.js

@@ -2,50 +2,39 @@ import React from "react";
 import { HawaProvider } from "../../themes/HawaProvider";
 import { HawaRadio } from "../../ui";
 
-const Template = (args) => {
-  const theme = {
-    borderRadius: 5,
-    primaryColor: "green",
-    secondaryColor: "red",
-    // margins: "10px",
-    paddings: 10
-  };
-  return (
-    <HawaProvider theme={theme}>
-      <HawaRadio {...args} />
-    </HawaProvider>
-  );
-};
 export default {
   title: "UI/RadioSelector",
   component: HawaRadio,
   argTypes: {
-    options: {
-      control: "array"
+    theme: {
+      options: ["primary", "secondary", "default"],
+      control: { type: "select" }
     }
   },
   args: {
-    options: [
-      { text: "Option 1", label: "option1" },
-      { text: "Option 2", label: "option2" },
-      { text: "Option 3", label: "option3" }
-    ]
+    theme: "primary"
   }
 };
 
+const Template = (args) => {
+  return (
+    <HawaProvider themeName={args.theme}>
+      <HawaRadio
+        defaultValue="option1"
+        options={[
+          { text: "Option 1", label: "option1" },
+          { text: "Option 2", label: "option2" },
+          { text: "Option 3", label: "option3" }
+        ]}
+      />
+    </HawaProvider>
+  );
+};
 export const Light = Template.bind({});
 
 Light.args = {
-  options: [
-    { text: "Option 1", label: "option1" },
-    { text: "Option 2", label: "option2" },
-    { text: "Option 3", label: "option3" }
-  ],
-  selectedColor: "blue",
-  borderRadius: 12,
-  defaultValue: "option2",
-  bgSelectedColor: "red",
-  textSelectedColor: "white",
+  theme: "primary",
+
   handleChange: () => {
     console.log("handleChange goes here");
   }
@@ -57,11 +46,7 @@ Dark.args = {
     { text: "Option 2", label: "option2" },
     { text: "Option 3", label: "option3" }
   ],
-  selectedColor: "blue",
-  borderRadius: 12,
   defaultValue: "option2",
-  bgSelectedColor: "blue",
-  textSelectedColor: "white",
   handleChange: () => {
     console.log("handleChange goes here");
   }

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

@@ -0,0 +1,64 @@
+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,7 +1,12 @@
 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",
@@ -16,27 +21,33 @@ export const defaultTheme = {
   testcolor: "green",
   margins: 10,
   paddings: 10,
-  allBorderRadius: 10,
   typography: {
+    fontFamily: ["IBMPlex"].join(","),
     primary: { color: "black" },
     secondary: { color: "white" }
   },
   logoButton: {
     primary: {
       borderRadius: 10,
-      backgroundColor: "#f90900",
-
-      padding: 10,
+      backgroundColor: allPrimaryAction,
+      // margin: 10,
+      marginTop: 10,
+      padding: 30,
+      paddingTop: 0,
+      paddingBottom: 0,
       border: "1px solid #ced4da",
       height: 50,
       "&:focus": {
-        borderColor: "green"
+        borderColor: allPrimaryAction
       }
     },
     secondary: {
       borderRadius: 10,
       backgroundColor: "#f90900",
-      padding: 10,
+      marginTop: 10,
+      padding: 30,
+      paddingTop: 0,
+      paddingBottom: 0,
       border: "1px solid #ced4da",
       height: 50,
       "&:focus": {
@@ -47,7 +58,8 @@ export const defaultTheme = {
   actionButton: {
     primary: {
       borderRadius: 10,
-      backgroundColor: "#f90900",
+      // backgroundColor: "#f90900",
+      backgroundColor: allPrimaryAction,
       color: "white",
       margin: 10,
       padding: 10,
@@ -86,29 +98,26 @@ export const defaultTheme = {
   inputFields: {
     primary: {
       backgroundColor: "white",
-      display: "flex",
-      flexDirection: "column",
-      alignItems: "flex-start",
-      justifyContent: "flex-start",
       borderRadius: 10,
       "&:focus": {
-        // boxShadow: `${alpha(theme.palette.primary.main, 0.25)} 0 0 0 0.2rem`,
-        // borderColor: theme.palette.primary.main
-        borderColor: "#f90900"
+        borderColor: "red",
+        borderWidth: 1,
+        border: "1px solid black"
+      },
+      "&:hover": {
+        borderColor: "red",
+        borderWidth: 1,
+        border: "1px solid black"
       }
     },
     secondary: {
       backgroundColor: "white",
-      display: "flex",
-      flexDirection: "column",
-      alignItems: "flex-start",
-      justifyContent: "flex-start",
+
       borderRadius: 10
     }
   },
   alerts: {
     primary: {
-      //  marginTop: 10,
       marginBottom: 10,
       padding: 10,
       borderRadius: 10
@@ -118,12 +127,45 @@ export const defaultTheme = {
       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,
@@ -132,7 +174,9 @@ export const HawaProvider = ({ theme, ...props }) => {
     };
   }
   return (
-    <ThemeProvider.Provider value={theme || defaultTheme}>
+    <ThemeProvider.Provider
+      value={{ hawaTheme: defaultTheme, themeName: props.themeName }}
+    >
       {props.children}
     </ThemeProvider.Provider>
   );

package/src/ui/ActionButton.js

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

package/src/ui/AdaptiveButton.js

@@ -1,7 +1,6 @@
 import React, { useState, useContext } from "react";
 import Button from "@mui/material/Button";
 import Tooltip from "@mui/material/Tooltip";
-import { motion } from "framer-motion";
 import PropTypes from "prop-types";
 import { ThemeProvider } from "../themes/HawaProvider";
 import { StyledTooltip } from "./StyledTooltip";
@@ -19,81 +18,35 @@ export const AdaptiveButton = (props) => {
   //full button
   if (showText) {
     return (
-      <motion.div
-        transition={{ duration: 0.2 }}
-        whileTap={{ scale: 1.2 }}
-        whileHover={{
-          // backgroundColor: props.hoverColor,
+      <Button
+        disableRipple
+        disabled={props.disabled}
+        aria-label={props.buttonLabel}
+        color={props.danger ? "secondary" : "primary"}
+        onClick={props.handleClick}
+        style={{
+          backgroundColor: theme.primaryColor,
           borderRadius: theme.borderRadius,
-          color: "red"
+          padding: theme.paddings,
+          color: getTextColor(theme.primaryColor)
+          // color: hovered
+          //   ? "#ffffff"
+          //   : props.danger
+          //   ? "#f50057"
+          //   : "var(--blue)"
         }}
-        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>
+        {props.icon}
+        {props.showText ? (
+          <span style={{ marginLeft: props.icon ? 5 : 0 }}>
+            {props.buttonLabel}
+          </span>
+        ) : null}
+      </Button>
     );
   } 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}
@@ -146,100 +99,31 @@ export const AdaptiveButton = (props) => {
             {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>
-            )
-          }
+      <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)"
+          }}
         >
-
-        </Tooltip> */}
-      </motion.div>
+          {props.icon}
+        </Button>
+      </StyledTooltip>
     );
   }
 };

package/src/ui/HawaAlert.js

@@ -1,20 +1,20 @@
 import React, { useContext } from "react";
 import { ThemeProvider } from "../themes/HawaProvider";
-import { styled, alpha } from "@mui/material/styles";
+import { styled } from "@mui/material/styles";
 
 import Alert from "@mui/material/Alert";
 import AlertTitle from "@mui/material/AlertTitle";
 
 export const HawaAlert = (props) => {
-  const theme = useContext(ThemeProvider);
-  const currentTheme = Object.keys(theme.alerts).find(
-    (themeName) => themeName.toLowerCase() === props.themeType?.toLowerCase()
+  const { hawaTheme, themeName } = useContext(ThemeProvider);
+  const currentTheme = Object.keys(hawaTheme.alerts).find(
+    (tName) => tName.toLowerCase() === themeName?.toLowerCase()
   );
   let alertStyle = {};
 
   if (currentTheme) {
     alertStyle = {
-      ...theme.alerts[currentTheme]
+      ...hawaTheme.alerts[currentTheme]
     };
   } else {
     alertStyle = {
@@ -29,7 +29,7 @@ export const HawaAlert = (props) => {
   });
 
   return (
-    <StyledAlert themeType={props.themeType} {...props}>
+    <StyledAlert {...props}>
       {props.title && <AlertTitle>{props.title}</AlertTitle>}
       {props.text}
     </StyledAlert>

package/src/ui/HawaButton.js

@@ -4,19 +4,19 @@ import { styled, darken } from "@mui/material/styles";
 import Button from "@mui/material/Button";
 
 export const HawaButton = (props) => {
-  const theme = useContext(ThemeProvider);
+  const { hawaTheme, themeName } = useContext(ThemeProvider);
   let buttonStyle = {};
-  let currentTheme = Object.keys(theme.actionButton).find(
-    (themeName) => themeName.toLowerCase() === props.themeType?.toLowerCase()
+  let currentTheme = Object.keys(hawaTheme.actionButton).find(
+    (tName) => tName.toLowerCase() === themeName?.toLowerCase()
   );
   if (currentTheme) {
     buttonStyle = {
-      ...theme.actionButton[currentTheme],
+      ...hawaTheme.actionButton[currentTheme],
       //   marginTop: theme.actionButton[currentTheme].margin,
       border: props.outlined ? "2px solid black" : "none",
       //   borderRadius: theme.actionButton[currentTheme].borderRadius,
       backgroundColor: "white",
-    //   height: 50,
+      //   height: 50,
       "&:hover": {
         backgroundColor: darken("#ffffff", 0.1)
       }
@@ -29,7 +29,7 @@ export const HawaButton = (props) => {
       flexDirection: "row",
       alignItems: "center",
       justifyContent: "center",
-      marginTop: theme.actionButton[currentTheme]?.margin,
+      marginTop: hawaTheme.actionButton[currentTheme]?.margin,
       border: props.outlined ? "2px solid black" : "none",
       borderRadius: 0,
       //backgroundColor: "white",

package/src/ui/HawaInputLabel.js

@@ -3,18 +3,18 @@ import { useContext } from "react";
 import { ThemeProvider } from "../themes/HawaProvider";
 
 export const HawaInputLabel = (props) => {
-  const theme = useContext(ThemeProvider);
+  const { hawaTheme, themeName } = useContext(ThemeProvider);
   let labelStyle = {};
 
-  let currentTheme = Object.keys(theme.actionButton).find(
-    (themeName) => themeName.toLowerCase() === props.themeType?.toLowerCase()
+  let currentTheme = Object.keys(hawaTheme.actionButton).find(
+    (tName) => tName.toLowerCase() === themeName?.toLowerCase()
   );
   if (currentTheme) {
     labelStyle = {
       margin: 15,
       marginRight: 5,
       marginLeft: 5,
-      color: theme.layout[currentTheme].color
+      color: hawaTheme?.layout[currentTheme].color
     };
   } else {
     labelStyle = {