@sikka/hawa 0.0.5 → 0.0.8

package/src/stories/UIStories/LogoButtons.stories.js

@@ -0,0 +1,90 @@
+import React from "react";
+import { HawaProvider } from "../../themes/HawaProvider";
+import { ActionButton, HawaLogoButton } from "../../ui";
+
+export default {
+  title: "Elements/Buttons/LogoButtons",
+  component: ActionButton,
+  argTypes: {
+    theme: {
+      options: ["primary", "secondary", "default"],
+      control: { type: "select" }
+    },
+    buttonLabel: { control: "text" },
+    logo: { control: "text" }
+  },
+  args: {
+    buttonLabel: "test",
+    logo: "google",
+    theme: "primary"
+  }
+};
+const Template = (args) => {
+  return (
+    <HawaProvider themeName={args.theme}>
+      <HawaLogoButton logo={args.logo} buttonText={args.buttonLabel} />
+    </HawaProvider>
+  );
+};
+
+export const Google = Template.bind({});
+Google.args = {
+  buttonLabel: "Sign in via Google",
+  logo: "google",
+  theme: "primary"
+};
+
+export const Twitter = Template.bind({});
+Twitter.args = {
+  buttonLabel: "Sign in via Twitter",
+  logo: "twitter",
+  theme: "primary"
+};
+export const Github = Template.bind({});
+Github.args = {
+  buttonLabel: "Sign in via Github",
+  logo: "github",
+  theme: "primary"
+};
+export const WalletPay = Template.bind({});
+WalletPay.args = {
+  buttonLabel: "Pay with Wallet",
+  logo: "wallet",
+  theme: "primary"
+};
+export const GooglePay = Template.bind({});
+GooglePay.args = {
+  buttonLabel: "Google Pay",
+  logo: "googlepay",
+  theme: "primary"
+};
+export const ApplePay = Template.bind({});
+ApplePay.args = {
+  buttonLabel: "Apple Pay",
+  logo: "applepay",
+  theme: "primary"
+};
+export const STCPay = Template.bind({});
+STCPay.args = {
+  buttonLabel: "STC Pay",
+  logo: "stcpay",
+  theme: "primary"
+};
+export const VisaMasterPay = Template.bind({});
+VisaMasterPay.args = {
+  buttonLabel: "Visa / Mastercard",
+  logo: "visa/master",
+  theme: "primary"
+};
+export const PayPal = Template.bind({});
+PayPal.args = {
+  buttonLabel: "PayPal",
+  logo: "paypal",
+  theme: "primary"
+};
+export const Mada = Template.bind({});
+Mada.args = {
+  buttonLabel: "Mada",
+  logo: "mada",
+  theme: "primary"
+};

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

@@ -0,0 +1,53 @@
+import React from "react";
+import { HawaProvider } from "../../themes/HawaProvider";
+import { HawaRadio } from "../../ui";
+
+export default {
+  title: "UI/RadioSelector",
+  component: HawaRadio,
+  argTypes: {
+    theme: {
+      options: ["primary", "secondary", "default"],
+      control: { type: "select" }
+    }
+  },
+  args: {
+    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 = {
+  theme: "primary",
+
+  handleChange: () => {
+    console.log("handleChange goes here");
+  }
+};
+export const Dark = Template.bind({});
+Dark.args = {
+  options: [
+    { text: "Option 1", label: "option1" },
+    { text: "Option 2", label: "option2" },
+    { text: "Option 3", label: "option3" }
+  ],
+  defaultValue: "option2",
+  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/stories/{TextField.stories.js → UIStories/TextField.stories.js}

@@ -1,14 +1,13 @@
 import React from "react";
-import { StyledTextField } from "../ui";
-import "../styles.css";
+import { HawaTextField } from "../../ui";
 
 const Template = (args) => {
-  return <StyledTextField {...args} />;
+  return <HawaTextField {...args} />;
 };
 
 export default {
-  title: "Components/TextField",
-  component: StyledTextField,
+  title: "UI/TextField",
+  component: HawaTextField,
   argsTypes: {
     type: {
       name: "type",

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",
@@ -13,16 +18,57 @@ export const defaultTheme = {
   inputColor: "white", //Color of input fields
   lightBackground: "#FBF5F3", //
   darkBackground: "#0F0E0E",
+  testcolor: "green",
   margins: 10,
   paddings: 10,
-  allBorderRadius: 10,
-  actionButton: {
+  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
+      padding: 10,
+      border: "1px solid #ced4da",
+      fontSize: 16,
+      height: 50,
+      "&:focus": {
+        borderColor: "red"
+      }
     },
     secondary: {
       borderRadius: 10,
@@ -52,18 +98,65 @@ export const defaultTheme = {
   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: "column",
-      alignItems: "flex-start",
-      justifyContent: "flex-start",
+      flexDirection: "row",
+      justifyContent: "space-between",
+      alignItems: "center",
+      backgroundColor: "#F5F5F5",
+      margin: 0,
+      padding: 10,
       borderRadius: 10
     },
     secondary: {
-      backgroundColor: "white",
       display: "flex",
-      flexDirection: "column",
-      alignItems: "flex-start",
-      justifyContent: "flex-start",
+      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
     }
   }
@@ -72,6 +165,7 @@ export const defaultTheme = {
 export const ThemeProvider = createContext(defaultTheme);
 
 export const HawaProvider = ({ theme, ...props }) => {
+  console.log("theme is ", theme);
   if (props.size === "large") {
     theme = {
       ...theme,
@@ -80,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>
     );
   }
 };