@sikka/hawa 0.0.5 → 0.0.6

package/src/stories/{ActionButton.stories.js → UIStories/ActionButton.stories.js}

@@ -1,7 +1,7 @@
 import React from "react";
 
-import { defaultTheme, HawaProvider } from "../themes/HawaProvider";
-import { ActionButton } from "../ui";
+import { defaultTheme, HawaProvider } from "../../themes/HawaProvider";
+import { ActionButton } from "../../ui";
 
 const Template = (args) => {
   return (

package/src/stories/{AdaptiveButton.stories.js → UIStories/AdaptiveButton.stories.js}

@@ -1,7 +1,7 @@
 import React from "react";
 import CastIcon from "@mui/icons-material/Cast";
-import { HawaProvider } from "../themes/HawaProvider";
-import { AdaptiveButton } from "../ui";
+import { HawaProvider } from "../../themes/HawaProvider";
+import { AdaptiveButton } from "../../ui";
 
 const Template = (args) => {
   const theme = {

package/src/stories/UIStories/Alert.stories.js

@@ -0,0 +1,55 @@
+import React from "react";
+
+import { defaultTheme, HawaProvider } from "../../themes/HawaProvider";
+import { HawaAlert } from "../../ui";
+
+const Template = (args) => {
+  return (
+    <HawaProvider theme={{ ...defaultTheme }}>
+      <HawaAlert
+        themeType={args.theme}
+        title="What?"
+        text="This is a success alert"
+        severity="success"
+      />
+      <HawaAlert
+        themeType={args.theme}
+        text="This is an info alert"
+        severity="info"
+      />
+      <HawaAlert
+        themeType={args.theme}
+        text="This is a warning alert"
+        severity="warning"
+      />
+      <HawaAlert
+        themeType={args.theme}
+        text="This is an error alert"
+        severity="error"
+      />
+    </HawaProvider>
+  );
+};
+//types:
+//error (red)
+//warning (red)
+//notice (blue)
+
+export default {
+  title: "UI/Alert",
+  component: HawaAlert,
+  argTypes: {
+    theme: {
+      options: ["primary", "secondary", "default"],
+      control: { type: "select" }
+    }
+  },
+  args: {
+    theme: "primary"
+  }
+};
+
+export const Default = Template.bind({});
+Default.args = {
+  theme: "primary"
+};

package/src/stories/{CheckBox.stories.js → UIStories/CheckBox.stories.js}

@@ -1,14 +1,13 @@
 import React from "react";
-import { StyledCheckbox } from "../ui";
-import "../styles.css";
+import { HawaCheckbox } from "../../ui";
 
 const Template = (args) => {
-  return <StyledCheckbox {...args} />;
+  return <HawaCheckbox {...args} />;
 };
 
 export default {
   title: "UI/Checkbox",
-  component: Light,
+  component: HawaCheckbox,
   argsTypes: {
     defaultValue: {
       options: [true, false],

package/src/stories/UIStories/InputLabel.stories.js

@@ -0,0 +1,13 @@
+import { storiesOf } from "@storybook/react";
+import { HawaInputLabel } from "../../ui";
+
+export default {
+  title: "Components/InputLabel",
+  component: [HawaInputLabel],
+  argTypes: {
+    resize: {
+      options: ["vertical", "horizontal", "both"],
+      control: { type: "radio" }
+    }
+  }
+};

package/src/stories/{RadioSelector.stories.js → UIStories/RadioSelector.stories.js}

@@ -1,7 +1,6 @@
 import React from "react";
-import { StyledRadioSelector } from "../ui";
-import { HawaProvider } from "../themes/HawaProvider";
-import "../styles.css";
+import { HawaProvider } from "../../themes/HawaProvider";
+import { HawaRadio } from "../../ui";
 
 const Template = (args) => {
   const theme = {
@@ -13,13 +12,13 @@ const Template = (args) => {
   };
   return (
     <HawaProvider theme={theme}>
-      <StyledRadioSelector {...args} />
+      <HawaRadio {...args} />
     </HawaProvider>
   );
 };
 export default {
-  title: "Components/RadioSelector",
-  component: Light,
+  title: "UI/RadioSelector",
+  component: HawaRadio,
   argTypes: {
     options: {
       control: "array"

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

@@ -13,16 +13,50 @@ export const defaultTheme = {
   inputColor: "white", //Color of input fields
   lightBackground: "#FBF5F3", //
   darkBackground: "#0F0E0E",
+  testcolor: "green",
   margins: 10,
   paddings: 10,
   allBorderRadius: 10,
+  typography: {
+    primary: { color: "black" },
+    secondary: { color: "white" }
+  },
+  logoButton: {
+    primary: {
+      borderRadius: 10,
+      backgroundColor: "#f90900",
+
+      padding: 10,
+      border: "1px solid #ced4da",
+      height: 50,
+      "&:focus": {
+        borderColor: "green"
+      }
+    },
+    secondary: {
+      borderRadius: 10,
+      backgroundColor: "#f90900",
+      padding: 10,
+      border: "1px solid #ced4da",
+      height: 50,
+      "&:focus": {
+        borderColor: "green"
+      }
+    }
+  },
   actionButton: {
     primary: {
       borderRadius: 10,
       backgroundColor: "#f90900",
       color: "white",
       margin: 10,
-      padding: 10
+      padding: 10,
+      border: "1px solid #ced4da",
+      fontSize: 16,
+      height: 50,
+      "&:focus": {
+        borderColor: "red"
+      }
     },
     secondary: {
       borderRadius: 10,
@@ -56,7 +90,12 @@ export const defaultTheme = {
       flexDirection: "column",
       alignItems: "flex-start",
       justifyContent: "flex-start",
-      borderRadius: 10
+      borderRadius: 10,
+      "&:focus": {
+        // boxShadow: `${alpha(theme.palette.primary.main, 0.25)} 0 0 0 0.2rem`,
+        // borderColor: theme.palette.primary.main
+        borderColor: "#f90900"
+      }
     },
     secondary: {
       backgroundColor: "white",
@@ -66,6 +105,19 @@ export const defaultTheme = {
       justifyContent: "flex-start",
       borderRadius: 10
     }
+  },
+  alerts: {
+    primary: {
+      //  marginTop: 10,
+      marginBottom: 10,
+      padding: 10,
+      borderRadius: 10
+    },
+    secondary: {
+      marginBottom: 10,
+      padding: 10,
+      borderRadius: 10
+    }
   }
 };
 

package/src/ui/ApplePayButton.js

@@ -9,7 +9,6 @@ export const ApplePayButton = (props) => {
   const theme = useContext(ThemeProvider);
   let buttonStyle = {};
 
-  console.log(Object.keys(theme.actionButton));
   let currentTheme = Object.keys(theme.actionButton).find(
     (themeName) => themeName.toLowerCase() === props.themeType?.toLowerCase()
   );

package/src/ui/GithubButton.js

@@ -9,7 +9,6 @@ export const GithubButton = (props) => {
   const theme = useContext(ThemeProvider);
   let buttonStyle = {};
 
-  console.log(Object.keys(theme.actionButton));
   let currentTheme = Object.keys(theme.actionButton).find(
     (themeName) => themeName.toLowerCase() === props.themeType?.toLowerCase()
   );

package/src/ui/GoogleButton.js

@@ -7,7 +7,6 @@ export const GoogleButton = (props) => {
   const theme = useContext(ThemeProvider);
   let buttonStyle = {};
 
-  console.log(Object.keys(theme.actionButton));
   let currentTheme = Object.keys(theme.actionButton).find(
     (themeName) => themeName.toLowerCase() === props.themeType?.toLowerCase()
   );

package/src/ui/GooglePayButton.js

@@ -9,7 +9,6 @@ export const GooglePayButton = (props) => {
   const theme = useContext(ThemeProvider);
   let buttonStyle = {};
 
-  console.log(Object.keys(theme.actionButton));
   let currentTheme = Object.keys(theme.actionButton).find(
     (themeName) => themeName.toLowerCase() === props.themeType?.toLowerCase()
   );
@@ -74,7 +73,7 @@ export const GooglePayButton = (props) => {
     >
       <img
         src="https://sikka-images.s3.ap-southeast-1.amazonaws.com/payments/google-pay.png"
-        height={30}
+        height={20}
       />{" "}
       <div style={{ width: 10 }} />
       <p

package/src/ui/HawaAlert.js

@@ -0,0 +1,37 @@
+import React, { useContext } from "react";
+import { ThemeProvider } from "../themes/HawaProvider";
+import { styled, alpha } 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()
+  );
+  let alertStyle = {};
+
+  if (currentTheme) {
+    alertStyle = {
+      ...theme.alerts[currentTheme]
+    };
+  } else {
+    alertStyle = {
+      marginBottom: 10
+    };
+  }
+
+  const StyledAlert = styled(Alert)(({ theme }) => {
+    return {
+      ...alertStyle
+    };
+  });
+
+  return (
+    <StyledAlert themeType={props.themeType} {...props}>
+      {props.title && <AlertTitle>{props.title}</AlertTitle>}
+      {props.text}
+    </StyledAlert>
+  );
+};

package/src/ui/HawaButton.js

@@ -0,0 +1,48 @@
+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 theme = useContext(ThemeProvider);
+  let buttonStyle = {};
+  let currentTheme = Object.keys(theme.actionButton).find(
+    (themeName) => themeName.toLowerCase() === props.themeType?.toLowerCase()
+  );
+  if (currentTheme) {
+    buttonStyle = {
+      ...theme.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: theme.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/{Checkbox.js → HawaCheckbox.js}

@@ -3,7 +3,7 @@ import FormControlLabel from "@mui/material/FormControlLabel";
 import Checkbox from "@mui/material/Checkbox";
 // import PropTypes from "prop-types";
 
-export const StyledCheckbox = (props) => {
+export const HawaCheckbox = (props) => {
   console.log("props : ", props);
   return (
     <React.Fragment>

package/src/ui/HawaInputLabel.js

@@ -6,7 +6,6 @@ export const HawaInputLabel = (props) => {
   const theme = useContext(ThemeProvider);
   let labelStyle = {};
 
-  console.log(Object.keys(theme.actionButton));
   let currentTheme = Object.keys(theme.actionButton).find(
     (themeName) => themeName.toLowerCase() === props.themeType?.toLowerCase()
   );

package/src/ui/HawaLogoButton.js

@@ -0,0 +1,48 @@
+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 HawaLogoButton = (props) => {
+  const theme = useContext(ThemeProvider);
+  let buttonStyle = {};
+  let currentTheme = Object.keys(theme.logoButton).find(
+    (themeName) => themeName.toLowerCase() === props.themeType?.toLowerCase()
+  );
+  if (currentTheme) {
+    buttonStyle = {
+      ...theme.logoButton[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: theme.logoButton[currentTheme]?.margin,
+      border: props.outlined ? "2px solid black" : "none",
+      //   borderRadius: 0,
+      height: 50,
+      backgroundColor: "white",
+      "&:hover": {
+        backgroundColor: darken("#ffffff", 0.1)
+      }
+    };
+  }
+  const StyledButton = styled(Button)(({ theme }) => {
+    return {
+      ...buttonStyle
+    };
+  });
+  return <StyledButton {...props}>{props.children}</StyledButton>;
+};

package/src/ui/{RadioSelector.js → HawaRadio.js}

@@ -1,7 +1,7 @@
 import React, { useState, useContext } from "react";
 import { ThemeProvider } from "../themes/HawaProvider";
 
-export const StyledRadioSelector = (props) => {
+export const HawaRadio = (props) => {
   const [value, setValue] = useState(props.defaultValue);
   const theme = useContext(ThemeProvider);
 

package/src/ui/HawaTextField.js

@@ -1,13 +1,15 @@
 import React, { useContext } from "react";
-// import TextField from "@mui/material/TextField";
 import InputBase from "@mui/material/InputBase";
+import Typography from "@mui/material/Typography";
 import { styled, alpha } from "@mui/material/styles";
 import PropTypes from "prop-types";
 import { ThemeProvider } from "../themes/HawaProvider";
 import { HawaInputLabel } from "./HawaInputLabel";
-// import InputLabel from "@mui/material/InputLabel";
+import { Controller, useFormContext } from "react-hook-form";
 
 export const HawaTextField = (props) => {
+  const { control, register } = useFormContext();
+
   const theme = useContext(ThemeProvider);
   const currentTheme = Object.keys(theme.actionButton).find(
     (themeName) => themeName.toLowerCase() === props.themeType?.toLowerCase()
@@ -30,7 +32,7 @@ export const HawaTextField = (props) => {
     };
   }
 
-  const BootstrapInput = styled(InputBase)(({ theme }) => {
+  const StyledTextField = styled(InputBase)(({ theme }) => {
     return {
       // "label + &": {
       //   marginTop: theme.spacing(3)
@@ -44,75 +46,68 @@ export const HawaTextField = (props) => {
         ]),
 
         "&:focus": {
-          boxShadow: `${alpha(theme.palette.primary.main, 0.25)} 0 0 0 0.2rem`,
-          borderColor: theme.palette.primary.main
+          // boxShadow: `${alpha(theme.palette.primary.main, 0.25)} 0 0 0 0.2rem`,
+          // borderColor: theme.palette.primary.main
+          // borderColor: theme.actionButton[currentTheme]?.backgroundColor
         },
         borderRadius: 4,
-        position: "relative",
+        // position: "relative",
         border: "1px solid #ced4da",
         fontSize: 16,
         // width: "auto",
         padding: "10px 12px",
+        marginBottom: props.helperText ? 5 : 0,
         ...textFieldStyle
       }
     };
   });
 
   return (
-    // <FormControl variant="standard">
-    <>
-      {props.inputLabel ? (
-        <HawaInputLabel themeType={props.themeType} label={props.inputLabel} />
-      ) : null}
-      {/* <InputLabel shrink htmlFor="bootstrap-input">
-        {props.inputLabel}
-      </InputLabel> */}
-      {/* <div>ss</div> */}
-      <BootstrapInput fullWidth aria-label="dws" />
-    </>
-  );
-  // return (
-  //   <div>
-  //     {props.inputLabel ? (
-  //       <HawaInputLabel themeType={props.themeType} label={props.inputLabel} />
-  //     ) : null}
-  //     <TextField
-  //       fullWidth
-  //       style={textFieldStyle}
-  //       helperText={props.helperText}
-  //       type={props.type ? props.type : "text"}
-  //       placeholder={props.placeholder}
-  //       inputProps={
-  //         props.type === "number"
-  //           ? {
-  //               inputMode: "numeric",
-  //               min: "0",
-  //               max: "9999999",
-  //               step: "0.01"
-  //             }
-  //           : {}
-  //       }
-  //       InputProps={{
-  //         style: {
-  //           ...textFieldStyle
-  //           // // height: 50
-  //           // padding: 0
-  //         },
+    <Controller
+      render={({ field }) => (
+        <>
+          {props.inputLabel && (
+            <HawaInputLabel
+              themeType={props.themeType}
+              label={props.inputLabel}
+            />
+          )}
 
-  //         disableUnderline: true,
-  //         onWheelCapture: (e) => e.target.blur()
-  //       }}
-  //       value={props.value ? props.value : null}
-  //     />
-  //   </div>
-  // );
+          <StyledTextField
+            fullWidth={true}
+            // helperText={props.helperText}
+            type={props.type ?? "text"}
+            // placeholder={props.placeholder}
+            // inputProps={
+            //   props.type === "number"
+            //     ? {
+            //         inputMode: "numeric",
+            //         min: "0",
+            //         max: "9999999",
+            //         step: "0.01"
+            //       }
+            //     : {}
+            // }
+            defaultValue={props.defaultValue && ""}
+            value={props.value && ""}
+            {...props}
+            // {...field}
+            {...register(props.name)}
+          />
+          <Typography variant="caption" style={{ margin: 5, color: "red" }}>
+            {props.helperText}
+          </Typography>
+        </>
+      )}
+      name={props.name}
+      rules={props.rules}
+      control={control}
+      shouldUnregister={props.shouldUnregister}
+    />
+  );
 };
 
 HawaTextField.propTypes = {
-  type: PropTypes.oneOf(["text", "number"]),
+  type: PropTypes.oneOf(["text", "number", "password"]),
   helperText: PropTypes.string
 };
-
-// StyledTextField.defaultProps = {
-//   type: "text"
-// };

package/src/ui/HawaTypography.js

@@ -0,0 +1,29 @@
+import React, { useContext } from "react";
+import { styled, alpha } from "@mui/material/styles";
+import PropTypes from "prop-types";
+import { ThemeProvider } from "../themes/HawaProvider";
+import Typography from "@mui/material/Typography";
+
+export const HawaTypography = (props) => {
+  const theme = useContext(ThemeProvider);
+  const currentTheme = Object.keys(theme.actionButton).find(
+    (themeName) => themeName.toLowerCase() === props.themeType?.toLowerCase()
+  );
+  let typographyStyle = {};
+
+  if (currentTheme) {
+    typographyStyle = { ...theme.typography[currentTheme] };
+  } else {
+    typographyStyle = {
+      color: "black"
+    };
+  }
+
+  const StyledTypography = styled(Typography)(({ theme }) => {
+    return {
+      ...typographyStyle
+    };
+  });
+
+  return <StyledTypography {...props}>{props.children}</StyledTypography>;
+};

package/src/ui/MadaButton.js

@@ -9,7 +9,6 @@ export const MadaButton = (props) => {
   const theme = useContext(ThemeProvider);
   let buttonStyle = {};
 
-  console.log(Object.keys(theme.actionButton));
   let currentTheme = Object.keys(theme.actionButton).find(
     (themeName) => themeName.toLowerCase() === props.themeType?.toLowerCase()
   );

package/src/ui/PayPalButton.js

@@ -9,7 +9,6 @@ export const PayPalButton = (props) => {
   const theme = useContext(ThemeProvider);
   let buttonStyle = {};
 
-  console.log(Object.keys(theme.actionButton));
   let currentTheme = Object.keys(theme.actionButton).find(
     (themeName) => themeName.toLowerCase() === props.themeType?.toLowerCase()
   );
@@ -74,7 +73,7 @@ export const PayPalButton = (props) => {
     >
       <img
         src="https://sikka-images.s3.ap-southeast-1.amazonaws.com/payments/paypal.png"
-        height={30}
+        height={25}
       />{" "}
       <div style={{ width: 10 }} />
       <p

package/src/ui/STCPayButton.js

@@ -9,7 +9,6 @@ export const STCPayButton = (props) => {
   const theme = useContext(ThemeProvider);
   let buttonStyle = {};
 
-  console.log(Object.keys(theme.actionButton));
   let currentTheme = Object.keys(theme.actionButton).find(
     (themeName) => themeName.toLowerCase() === props.themeType?.toLowerCase()
   );
@@ -74,7 +73,7 @@ export const STCPayButton = (props) => {
     >
       <img
         src="https://sikka-images.s3.ap-southeast-1.amazonaws.com/payments/stc-pay.png"
-        height={30}
+        height={20}
       />{" "}
       <div style={{ width: 10 }} />
       <p