@sikka/hawa 0.0.24 → 0.0.27

package/src/blocks/AuthForms/ResetPasswordForm.js

@@ -18,7 +18,6 @@ export const ResetPasswordForm = (props) => {
     <Container maxWidth="xs" variant="auth">
       {!props.sent ? (
         <form onSubmit={handleSubmit(props.handleResetPassword)}>
-          {console.log("eror ", errors.email?.message)}
           <Controller
             control={control}
             name="email"

package/src/blocks/AuthForms/SignInForm.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { HawaTextField, HawaLogoButton } from "../../elements";
+import { HawaTextField, HawaLogoButton, HawaAlert } from "../../elements";
 import { Controller, useForm } from "react-hook-form";
 import InputAdornment from "@mui/material/InputAdornment";
 import EmailIcon from "@mui/icons-material/MailOutline";
@@ -25,11 +25,12 @@ export const SignInForm = (props) => {
       variant="auth"
       style={{ direction: props.lang === "ar" ? "rtl" : "ltr" }}
     >
-      {props.error && (
-        <Alert severity="error" variant="inContainer">
-          {props.errorTitle && <AlertTitle>{props.errorTitle}</AlertTitle>}
-          {props.errorText}
-        </Alert>
+      {props.showError && (
+        <HawaAlert
+          title={props.errorTitle}
+          text={props.errorText}
+          severity="error"
+        />
       )}
       <form onSubmit={handleSubmit(props.handleSignIn)}>
         <Controller

package/src/elements/HawaAlert.js

@@ -4,7 +4,7 @@ import AlertTitle from "@mui/material/AlertTitle";
 
 export const HawaAlert = (props) => {
   return (
-    <Alert severity={props.severity}>
+    <Alert severity={props.severity} icon={props.hideIcon}>
       {props.title && <AlertTitle>{props.title}</AlertTitle>}
       {props.text}
     </Alert>

package/src/elements/HawaButton.js

@@ -1,47 +1,6 @@
 import React from "react";
-// import { ThemeProvider } from "../themes/HawaProvider";
-// import { styled, darken } from "@mui/material/styles";
 import Button from "@mui/material/Button";
 
 export const HawaButton = (props) => {
-  // 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 <Button {...props}>{props.children}</Button>;
 };

package/src/elements/HawaCheckbox.js

@@ -1,7 +1,6 @@
 import React from "react";
 import FormControlLabel from "@mui/material/FormControlLabel";
 import Checkbox from "@mui/material/Checkbox";
-// import PropTypes from "prop-types";
 
 export const HawaCheckbox = (props) => {
   console.log("props : ", props);

package/src/elements/HawaInputLabel.js

@@ -1,30 +1,8 @@
 import InputLabel from "@mui/material/InputLabel";
 
 export const HawaInputLabel = (props) => {
-  // 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}
-    >
+    <InputLabel>
       <div style={{ fontSize: 15 }}>{props.label}</div>
     </InputLabel>
   );

package/src/elements/HawaItemCard.js

@@ -0,0 +1,56 @@
+import React from "react";
+import Container from "@mui/material/Container";
+import Button from "@mui/material/Button";
+
+export const HawaItemCard = (props) => {
+  let isArabic = props.lang === "ar";
+  const handleParentClick = (e) => {
+    e.stopPropagation();
+    props.onCardClick();
+  };
+  return (
+    <Container
+      onClick={handleParentClick}
+      maxWidth="xs"
+      variant="card-container"
+      dataValue="parent"
+      //   variant={props.selectedPlan ? "selected-plan-card" : "plan-card"}
+      style={{ direction: isArabic ? "rtl" : "ltr" }}
+    >
+      {props.header && (
+        <Container style={{ zIndex: 20 }} variant="card-header">
+          {props.headerActions && (
+            <div
+              style={{
+                margin: 0,
+                marginRight: -20,
+                marginLeft: -20,
+                marginBottom: -20,
+                // backgroundColor: "red",
+                display: "flex",
+                paddingTop: 5,
+                paddingLeft: 5,
+                paddingRight: 5,
+                justifyContent: "flex-end"
+              }}
+            >
+              {props.headerActions}
+            </div>
+          )}
+          {props.header}
+        </Container>
+      )}
+      {props.content && (
+        <Container style={{ zIndex: 20 }} variant="card-content">
+          {props.content}
+        </Container>
+      )}
+
+      {props.actions && (
+        <Container style={{ zIndex: 20 }} variant="card-actions">
+          {props.actions}
+        </Container>
+      )}
+    </Container>
+  );
+};

package/src/elements/HawaTextArea.js

@@ -1,38 +1,26 @@
+import { useTheme } from "@mui/system";
 import React from "react";
-import { Controller, useFormContext } from "react-hook-form";
-import { StyledInputLabel } from ".";
 
 export const HawaTextArea = (props) => {
-  const { control } = useFormContext();
-  const { name, rules, shouldUnregister, inputLabel, helperText } = props;
-
+  const theme = useTheme();
+  console.log("theme is ", theme);
   return (
-    <Controller
-      render={({ field }) => (
-        <label>
-          {inputLabel ? <StyledInputLabel label={inputLabel} /> : null}
-          <textarea
-            style={{
-              color: "black",
-              backgroundColor: props.bgColor || "white",
-              // borderRadius: props.bdRadius || 10,
-              borderBottom: "none",
-              border: "none",
-              width: "100%",
-              padding: 0,
-              margin: 0,
-              marginBottom: 0,
-              resize: props.resize || "vertical"
-            }}
-            value={field.value ?? ""}
-            {...field}
-          />
-        </label>
-      )}
-      name={name}
-      rules={rules}
-      control={control}
-      shouldUnregister={shouldUnregister}
-    />
+    <label>
+      {/* {inputLabel ? <StyledInputLabel label={inputLabel} /> : null} */}
+      <textarea
+        style={{
+          color: "black",
+          backgroundColor: props.bgColor || "white",
+          borderBottom: "none",
+          border: "none",
+          width: "100%",
+          padding: 0,
+          margin: 0,
+          marginBottom: 0,
+          resize: props.resize || "vertical"
+        }}
+        // value={field.value ?? ""}
+      />
+    </label>
   );
 };

package/src/elements/HawaTextField.js

@@ -5,28 +5,24 @@ import Typography from "@mui/material/Typography";
 
 export const HawaTextField = (props) => {
   return (
-    <div
-      style={
-        props.inForm && {
-          width: "100%"
-        }
-      }
-    >
-      <div
-        style={{
-          display: "flex",
-          flexDirection: "row",
-          justifyContent: "space-between",
-          alignItems: "center"
-        }}
-      >
-        {props.label && <InputLabel>{props.label}</InputLabel>}
+    <div style={props.inForm && { width: "100%" }}>
+      <div style={{ width: props.fullWidth ? "100%" : "fit-content" }}>
+        <div
+          style={{
+            display: "flex",
+            flexDirection: "row",
+            justifyContent: "space-between",
+            alignItems: "center"
+          }}
+        >
+          {props.label && <InputLabel>{props.label}</InputLabel>}
 
-        {props.helperText && (
-          <Typography variant="validation">{props.helperText}</Typography>
-        )}
+          {props.helperText && (
+            <Typography variant="validation">{props.helperText}</Typography>
+          )}
+        </div>
+        <Input disableUnderline {...props} />
       </div>
-      <Input disableUnderline {...props} />
     </div>
   );
 };

package/src/elements/TabPanel.js

@@ -8,7 +8,6 @@ const useStyles = makeStyles((theme) => ({
   },
   panel: {
     backgroundColor: "var(--lightGrey)",
-    // borderRadius: "var(--borderR)",
     height: "100%",
     width: "100%",
     padding: 10

package/src/elements/index.js

@@ -1,15 +1,17 @@
 export * from "./AdaptiveButton";
 export * from "./ActionButton";
+export * from "./OfflineBanner";
 export * from "./HawaCheckbox";
 export * from "./HawaRadio";
+export * from "./HawaItemCard";
 export * from "./HawaPricingCard";
 export * from "./HawaSettingsRow";
 export * from "./HawaLogoButton";
 export * from "./HawaButton";
 export * from "./HawaSelect";
 export * from "./HawaTextField";
+export * from "./HawaTextArea";
 export * from "./HawaInputLabel";
 export * from "./HawaTypography";
 export * from "./HawaAlert";
 export * from "./HawaTable";
-export * from "./OfflineBanner";

package/src/layout/Box.js

@@ -1,41 +1,5 @@
 import React from "react";
 
 export const Box = (props) => {
-  // let boxStyle = {};
-
-  // let currentTheme = Object.keys(hawaTheme.layout).find(
-  //   (tName) => tName.toLowerCase() === themeName?.toLowerCase()
-  // );
-  // if (currentTheme) {
-  //   boxStyle = {
-  //     display: "flex",
-  //     flexDirection: props.horizontal ? "row" : "column",
-  //     ...hawaTheme?.layout[currentTheme],
-  //     backgroundColor: props.noColor
-  //       ? "none"
-  //       : hawaTheme.layout[currentTheme].backgroundColor,
-  //     padding: props.noPadding ? 0 : hawaTheme?.layout[currentTheme].padding,
-  //     margin: props.noMargin ? 0 : hawaTheme?.layout[currentTheme].margin,
-  //     maxWidth: props.maxWidth
-  //   };
-  // } else {
-  //   boxStyle = {
-  //     display: "flex",
-  //     flexDirection: props.horizontal ? "row" : "column",
-  //     color: "white",
-  //     marginTop: props.last ? 10 * 2 : 0,
-  //     backgroundColor: props.noColor ? "none" : "lightGrey",
-  //     padding: props.noPadding ? 0 : 10,
-  //     margin: props.noMargin ? 0 : 10,
-  //     maxWidth: props.maxWidth,
-  //   };
-  // }
-
-  return (
-    <div
-    // style={boxStyle}
-    >
-      {props.children}
-    </div>
-  );
+  return <div>{props.children}</div>;
 };