@sikka/hawa 0.0.14 → 0.0.15

package/src/blocks/AuthForms/SignUpForm.js

@@ -1,7 +1,7 @@
 import React from "react";
 import { HawaTextField, HawaLogoButton } from "../../elements";
 import PropTypes from "prop-types";
-import { FormProvider, useForm } from "react-hook-form";
+import { Controller, FormProvider, useForm } from "react-hook-form";
 import PersonIcon from "@mui/icons-material/PermIdentityOutlined";
 import InputAdornment from "@mui/material/InputAdornment";
 import EmailIcon from "@mui/icons-material/MailOutline";
@@ -16,7 +16,8 @@ export const SignUpForm = (props) => {
   const methods = useForm();
   const {
     formState: { errors },
-    handleSubmit
+    handleSubmit,
+    control
   } = methods;
 
   return (
@@ -32,32 +33,47 @@ export const SignUpForm = (props) => {
         )} */}
       <FormProvider {...methods}>
         <form onSubmit={handleSubmit(props.handleSignUp)}>
-          <HawaTextField
-            fullWidth
-            type="text"
-            label={props.texts.fullNameLabel}
+          <Controller
+            control={control}
             name="fullName"
-            placeholder={props.texts.fullNamePlaceholder}
-            inputLabel={props.texts.fullNameLabel}
-            startAdornment={
-              <InputAdornment position="start">
-                <PersonIcon />
-              </InputAdornment>
-            }
-            helperText={errors.fullName?.message}
+            render={({ field }) => (
+              <HawaTextField
+                fullWidth
+                type="text"
+                value={field.value ?? ""}
+                label={props.texts.fullNameLabel}
+                placeholder={props.texts.fullNamePlaceholder}
+                helperText={errors.fullName?.message}
+                startAdornment={
+                  <InputAdornment position="start">
+                    <PersonIcon />
+                  </InputAdornment>
+                }
+              />
+            )}
+            rules={{
+              required: props.texts.fullNameRequiredText
+            }}
           />
 
-          <HawaTextField
-            fullWidth
-            type="text"
-            label={props.texts.emailLabel}
-            placeholder={props.texts.emailPlaceholder}
+          <Controller
+            control={control}
             name="email"
-            startAdornment={
-              <InputAdornment position="start">
-                <EmailIcon />
-              </InputAdornment>
-            }
+            render={({ field }) => (
+              <HawaTextField
+                fullWidth
+                type="text"
+                value={field.value ?? ""}
+                label={props.texts.emailLabel}
+                helperText={errors.email?.message}
+                placeholder={props.texts.emailPlaceholder}
+                startAdornment={
+                  <InputAdornment position="start">
+                    <EmailIcon />
+                  </InputAdornment>
+                }
+              />
+            )}
             rules={{
               required: props.texts.emailRequiredText,
               pattern: {
@@ -66,27 +82,28 @@ export const SignUpForm = (props) => {
                 message: props.texts.emailInvalidText
               }
             }}
-            helperText={errors.email?.message}
           />
-          <HawaTextField
-            fullWidth
+          <Controller
+            control={control}
             name="password"
-            placeholder={props.texts.passwordPlaceholder}
-            type="password"
-            label={props.texts.passwordLabel}
-            startAdornment={
-              <InputAdornment position="start">
-                <PasswordIcon />
-              </InputAdornment>
-            }
-            rules={{
-              required: props.texts.passwordRequiredText,
-              minLength: {
-                value: 8,
-                message: props.texts.passwordTooShortText
-              }
-            }}
-            helperText={errors.password?.message}
+            render={({ field }) => (
+              <HawaTextField
+                fullWidth
+                type="password"
+                defaultValue={field.value ?? ""}
+                value={field.value ?? ""}
+                label={props.texts.passwordLabel}
+                placeholder={props.texts.passwordPlaceholder}
+                helperText={errors.password?.message}
+                startAdornment={
+                  <InputAdornment position="start">
+                    <PasswordIcon />
+                  </InputAdornment>
+                }
+                {...field}
+              />
+            )}
+            rules={{ required: props.texts.passwordRequiredText }}
           />
 
           <Button fullWidth variant="last" type="submit">

package/src/blocks/Pricing/PricingPlans.js

@@ -1,8 +1,10 @@
-import React from "react";
+import React, { useState } from "react";
 import Container from "@mui/material/Container";
 import { HawaPricingCard, HawaRadio } from "../../elements";
 
 export const PricingPlans = (props) => {
+  const [currentCurrency, setCurrentCurrency] = useState("sar");
+  const [currentCycle, setCurrentCycle] = useState("monthly");
   return (
     <Container style={{ width: "fit-content" }} variant="plain">
       <div
@@ -10,26 +12,27 @@ export const PricingPlans = (props) => {
           display: "flex",
           flexDirection: "row",
           justifyContent: "space-between",
-
           marginBottom: 10
         }}
       >
         <HawaRadio
           location="inPricing"
-          handleChange={(e) => console.log("changing to ", e)}
-          defaultValue="usd"
+          handleChange={(e) => setCurrentCycle(e)}
+          defaultValue="monthly"
           options={[
-            { label: `Monthly`, value: `usd` },
+            { label: `Monthly`, value: `monthly` },
             { label: `3 Months`, value: `3-months` },
             { label: `6 Months`, value: `6-months` },
-            { label: `Annually`, value: `annual` }
+            { label: `Annually`, value: `annually` }
           ]}
         />
 
         <HawaRadio
           location="inPricing"
-          handleChange={(e) => console.log("changing to ", e)}
-          defaultValue="usd"
+          handleChange={(e) => {
+            setCurrentCurrency(e);
+          }}
+          defaultValue="sar"
           options={[
             { label: `USD`, value: `usd` },
             { label: `SAR`, value: `sar` }
@@ -39,7 +42,14 @@ export const PricingPlans = (props) => {
 
       <Container variant="pricing">
         {props.plans.map((plan) => {
-          return <HawaPricingCard lang={props.lang} {...plan} />;
+          return (
+            <HawaPricingCard
+              lang={props.lang}
+              {...plan}
+              currency={currentCurrency}
+              cycleText={currentCycle}
+            />
+          );
         })}
       </Container>
     </Container>

package/src/elements/HawaAlert.js

@@ -27,7 +27,7 @@ export const HawaAlert = (props) => {
   // });
 
   return (
-    <Alert>
+    <Alert {...props}>
       {props.title && <AlertTitle>{props.title}</AlertTitle>}
       {props.text}
     </Alert>

package/src/elements/HawaAppBar.js

@@ -0,0 +1,139 @@
+import React from "react";
+import AppBar from "@mui/material/AppBar";
+import Box from "@mui/material/Box";
+import Toolbar from "@mui/material/Toolbar";
+import IconButton from "@mui/material/IconButton";
+import Typography from "@mui/material/Typography";
+import Menu from "@mui/material/Menu";
+import MenuIcon from "@mui/icons-material/Menu";
+import Container from "@mui/material/Container";
+import Avatar from "@mui/material/Avatar";
+import Button from "@mui/material/Button";
+import Tooltip from "@mui/material/Tooltip";
+import MenuItem from "@mui/material/MenuItem";
+
+const pages = ["Products", "Pricing", "Blog"];
+const settings = ["Profile", "Account", "Dashboard", "Logout"];
+
+export const HawaAppBar = (props) => {
+  const [anchorElNav, setAnchorElNav] = React.useState(null);
+  const [anchorElUser, setAnchorElUser] = React.useState(null);
+
+  const handleOpenNavMenu = (event) => {
+    setAnchorElNav(event.currentTarget);
+  };
+  const handleOpenUserMenu = (event) => {
+    setAnchorElUser(event.currentTarget);
+  };
+
+  const handleCloseNavMenu = () => {
+    setAnchorElNav(null);
+  };
+
+  const handleCloseUserMenu = () => {
+    setAnchorElUser(null);
+  };
+
+  return (
+    <AppBar position="static">
+      <Container maxWidth="xl" variant="appbar">
+        <Toolbar disableGutters>
+          <Typography
+            variant="h6"
+            noWrap
+            component="div"
+            sx={{ mr: 2, display: { xs: "none", md: "flex" } }}
+          >
+            LOGO
+          </Typography>
+
+          <Box sx={{ flexGrow: 1, display: { xs: "flex", md: "none" } }}>
+            <IconButton
+              size="large"
+              aria-label="account of current user"
+              aria-controls="menu-appbar"
+              aria-haspopup="true"
+              onClick={props.handleOpenSideMenu}
+              color="inherit"
+            >
+              <MenuIcon />
+            </IconButton>
+            <Menu
+              id="menu-appbar"
+              anchorEl={anchorElNav}
+              anchorOrigin={{
+                vertical: "bottom",
+                horizontal: "left"
+              }}
+              keepMounted
+              transformOrigin={{
+                vertical: "top",
+                horizontal: "left"
+              }}
+              open={Boolean(anchorElNav)}
+              onClose={handleCloseNavMenu}
+              sx={{
+                display: { xs: "block", md: "none" }
+              }}
+            >
+              {pages.map((page) => (
+                <MenuItem key={page} onClick={handleCloseNavMenu}>
+                  <Typography textAlign="center">{page}</Typography>
+                </MenuItem>
+              ))}
+            </Menu>
+          </Box>
+          <Typography
+            variant="h6"
+            noWrap
+            component="div"
+            sx={{ flexGrow: 1, display: { xs: "flex", md: "none" } }}
+          >
+            LOGO
+          </Typography>
+          <Box sx={{ flexGrow: 1, display: { xs: "none", md: "flex" } }}>
+            {pages.map((page) => (
+              <Button
+                key={page}
+                onClick={handleCloseNavMenu}
+                sx={{ my: 2, color: "white", display: "block" }}
+              >
+                {page}
+              </Button>
+            ))}
+          </Box>
+
+          <Box sx={{ flexGrow: 0 }}>
+            <Tooltip title="Open settings">
+              <IconButton onClick={handleOpenUserMenu} sx={{ p: 0 }}>
+                <Avatar alt="Remy Sharp" src="/static/images/avatar/2.jpg" />
+              </IconButton>
+            </Tooltip>
+            <Menu
+              sx={{ mt: "45px" }}
+              id="menu-appbar"
+              anchorEl={anchorElUser}
+              anchorOrigin={{
+                vertical: "top",
+                horizontal: "right"
+              }}
+              keepMounted
+              transformOrigin={{
+                vertical: "top",
+                horizontal: "right"
+              }}
+              open={Boolean(anchorElUser)}
+              onClose={handleCloseUserMenu}
+            >
+              {settings.map((setting) => (
+                <MenuItem key={setting} onClick={handleCloseUserMenu}>
+                  <Typography textAlign="center">{setting}</Typography>
+                </MenuItem>
+              ))}
+            </Menu>
+          </Box>
+        </Toolbar>
+      </Container>
+    </AppBar>
+  );
+};

package/src/elements/HawaListItem.js

@@ -0,0 +1,21 @@
+import React from "react";
+import { ListItemButton, ListItemText } from "@mui/material";
+import InboxIcon from "@mui/icons-material/MoveToInbox";
+
+export const HawaListItem = (props) => {
+  return (
+    <ListItemButton
+      variant={props.selected && "clicked"}
+      key={props.text}
+      sx={{
+        minHeight: 48,
+        justifyContent: props.open ? "initial" : "center",
+        px: 2.5
+      }}
+    >
+      <InboxIcon />
+      <div style={{ width: 20 }} />
+      <ListItemText primary={props.text} sx={{ opacity: props.open ? 1 : 0 }} />
+    </ListItemButton>
+  );
+};

package/src/elements/HawaPricingCard.js

@@ -3,27 +3,42 @@ import Container from "@mui/material/Container";
 import { Button, Typography } from "@mui/material";
 import CheckIcon from "@mui/icons-material/CheckCircleOutlined";
 export const HawaPricingCard = (props) => {
+  let isArabic = props.lang === "ar";
+  let cycleTextsArabic = {
+    monthly: "شهرياً",
+    "3-months": "كل 3 أشهر",
+    "6-months": "كل 6 أشهر",
+    annually: "سنوياً"
+  };
+  let cycleTextsEnglish = {
+    monthly: "Monthly",
+    "3-months": "3 Months",
+    "6-months": "6 Months",
+    annually: "Annually"
+  };
+  let currencyMapping = {
+    usd: isArabic ? "دولار" : "$",
+    sar: isArabic ? "ريال" : "SAR"
+  };
+  let featuresMapping = isArabic ? props.features_ar : props.features;
   return (
     <Container
       maxWidth="xs"
       variant={props.selectedPlan ? "selected-plan-card" : "plan-card"}
-      style={{ direction: props.lang === "ar" ? "rtl" : "ltr" }}
+      style={{ direction: isArabic ? "rtl" : "ltr" }}
     >
       <Container variant="plan-header">
         <Typography variant="h3" fontWeight={500}>
-          {props.title}
+          {isArabic ? props.title_ar : props.title}
+        </Typography>
+        <Typography variant="caption">
+          {isArabic ? props.subtitle_ar : props.subtitle}
         </Typography>
-        <Typography variant="caption">{props.subtitle}</Typography>
         <br />
         <Typography
           variant="h4"
           fontWeight={500}
-          style={{
-            display: "flex",
-            // flexDirection: "column",
-            alignItems: "center"
-            // justifyContent: props.lang === "ar" ? "" : "center"
-          }}
+          style={{ display: "flex", alignItems: "center" }}
         >
           {props.lang === "ar" ? (
             <div
@@ -32,16 +47,20 @@ export const HawaPricingCard = (props) => {
                 display: "flex",
                 flexDirection: "column",
                 justifyContent: "center"
-                // alignItems: "center"
               }}
             >
               <div style={{ display: "flex", flexDirection: "row" }}>
                 {props.price}
                 <div style={{ width: 5 }} />
-                <Typography>{props.currency}</Typography>
+                {/* <Typography>{props.currency?.toUpperCase()}</Typography> */}
+                <Typography>
+                  {currencyMapping[props.currency?.toLowerCase()]}
+                </Typography>
               </div>
               <Typography style={{ fontSize: 14, margin: 5 }}>
-                {props.cycleText}
+                {isArabic
+                  ? cycleTextsArabic[props.cycleText]
+                  : cycleTextsEnglish[props.cycleText]}
               </Typography>
             </div>
           ) : (
@@ -51,32 +70,30 @@ export const HawaPricingCard = (props) => {
                 display: "flex",
                 flexDirection: "column",
                 justifyContent: "center"
-                // alignItems: "center"
               }}
             >
               <div style={{ display: "flex", flexDirection: "row" }}>
-                <Typography>{props.currency}</Typography>
+                <Typography>
+                  {currencyMapping[props.currency?.toLowerCase()]}
+                </Typography>
+                {/* <Typography>{props.currency?.toUpperCase()}</Typography> */}
                 <div style={{ width: 5 }} />
                 {props.price}
               </div>
               <Typography style={{ fontSize: 14, margin: 5 }}>
-                {props.cycleText}
+                {props.lang === "ar"
+                  ? cycleTextsArabic[props.cycleText]
+                  : cycleTextsEnglish[props.cycleText]}
               </Typography>
             </div>
           )}
-          {/* {props.lang === "ar" ? null : (
-            <Typography style={{ fontSize: 14, margin: 5 }}>
-              {" / "}
-              {props.cycleText}
-            </Typography>
-          )} */}
         </Typography>
       </Container>
 
       <div
         style={{ padding: 20, color: props.selectedPlan ? "white" : "black" }}
       >
-        {props.features?.map((feature) => {
+        {featuresMapping?.map((feature) => {
           return (
             <div
               style={{
@@ -105,6 +122,7 @@ export const HawaPricingCard = (props) => {
         })}
       </div>
       <Button
+        onClick={props.selectPlan}
         variant={props.selectedPlan ? "outlined" : "contained"}
         style={{ margin: 20 }}
       >

package/src/elements/HawaTextField.js

@@ -1,160 +1,26 @@
 import React from "react";
-// import InputBase from "@mui/material/InputBase";
-// import Typography from "@mui/material/Typography";
-// import { styled } from "@mui/material/styles";
-// import PropTypes from "prop-types";
-// import { HawaInputLabel } from "./HawaInputLabel";
-// import { Controller, useFormContext } from "react-hook-form";
 import Input from "@mui/material/Input";
 import InputLabel from "@mui/material/InputLabel";
+import { Typography } from "@mui/material";
 
 export const HawaTextField = (props) => {
-  // const { control, register } = useFormContext();
-
-  // const currentTheme = Object.keys(hawaTheme.inputFields).find(
-  //   (tName) => tName.toLowerCase() === themeName?.toLowerCase()
-  // );
-  // let textFieldStyle = {};
-
-  // if (currentTheme) {
-  //   textFieldStyle = {
-  //     ...hawaTheme.inputFields[currentTheme],
-  //     margin: props.last ? 0 : hawaTheme.inputFields[currentTheme].margin,
-  //     marginTop: props.last
-  //       ? hawaTheme.inputFields[currentTheme].margin * 2
-  //       : 0,
-  //   };
-  // } else {
-  //   textFieldStyle = {
-  //     backgroundColor: "white"
-  //   };
-  // }
-
-  // const StyledTextField = styled(InputBase)(({ theme }) => {
-  //   return {
-  //     // "& .MuiInputBase-input": {
-  //     //   // border: "1px solid #ced4da",
-  //     //   fontSize: 16,
-  //     //   // padding: "10px 12px",
-  //     //   marginBottom: props.helperText ? 5 : 0,
-  //     //   // paddingLeft: 10,
-  //     //   // paddingRight: 10,
-  //     //   ...textFieldStyle
-  //     // },
-  //     // "& .MuiInputBase-root": {
-  //     //   border: "1px solid #ced4da",
-  //     //   fontSize: 16,
-  //     //   // width: "auto",
-  //     //   // padding: "10px 12px",
-  //     //   marginBottom: props.helperText ? 5 : 0,
-  //     //   // paddingLeft: 10,
-  //     //   // paddingRight: 10,
-
-  //     //   // ...textFieldStyle,
-  //     //   backgroundColor: "blue"
-  //     //   // "&:focus": {
-  //     //   //   borderColor: "red",
-  //     //   //   borderWidth: 1,
-  //     //   //   outline: "1px solid black",
-  //     //   //   backgroundColor: "red"
-  //     //   // }
-  //     //   // "& input:valid + fieldset": {
-  //     //   //   borderColor: "green",
-  //     //   //   borderWidth: 2
-  //     //   // },
-  //     //   // "& input:invalid + fieldset": {
-  //     //   //   borderColor: "red",
-  //     //   //   borderWidth: 2
-  //     //   // },
-  //     //   // "& input:valid:focus + fieldset": {
-  //     //   //   borderLeftWidth: 6,
-  //     //   //   padding: "4px !important" // override inline-style
-  //     //   // }
-  //     // },
-
-  //     // "&:hover": {
-  //     //   borderColor: "red",
-  //     //   borderWidth: 1,
-  //     //   outline: "1px solid black"
-  //     // },
-
-  //     // paddingLeft: 10,
-  //     // paddingRight: 10,
-  //     // border: "none"
-
-  //     // position: "relative",
-  //     // backgroundColor: "green"
-  //     ...textFieldStyle
-  //   };
-  // });
-
   return (
     <>
-      <InputLabel>{props.label}</InputLabel>
+      <div
+        style={{
+          display: "flex",
+          flexDirection: "row",
+          justifyContent: "space-between",
+          alignItems: "center"
+        }}
+      >
+        <InputLabel>{props.label}</InputLabel>
+
+        {props.helperText && (
+          <Typography variant="validation">{props.helperText}</Typography>
+        )}
+      </div>
       <Input disableUnderline {...props} />
     </>
-    // <FormControl variant="hawa" style={{ marginTop: 10 }}>
-
-    // </FormControl>
-    // <TextField
-    //   fullWidth
-    //   type="text"
-    //   // inputProps={{
-    //   //   shrink: true
-    //   // }}
-    //   // InputProps={{
-    //   //   disableUnderline: true,
-    //   //   shrink: true
-    //   // }}
-    //   InputLabelProps={{
-    //     shrink: true
-    //   }}
-    //   {...props}
-    // />
-    // <Controller
-    //   render={({ field }) => (
-    //     <>
-    //       {props.inputLabel && <InputLabel label={props.inputLabel} />}
-
-    //       <TextField
-    //         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, marginBottom: 0, color: "red" }}
-    //       >
-    //         {props.helperText}
-    //       </Typography>
-    //     </>
-    //   )}
-    //   name={props.name}
-    //   rules={props.rules}
-    //   control={control}
-    //   shouldUnregister={props.shouldUnregister}
-    // />
   );
 };
-
-// HawaTextField.propTypes = {
-//   type: PropTypes.oneOf(["text", "number", "password"]),
-//   helperText: PropTypes.string
-// };

package/src/elements/index.js

@@ -1,5 +1,7 @@
 export * from "./AdaptiveButton";
 export * from "./ActionButton";
+export * from "./HawaListItem";
+export * from "./HawaAppBar";
 export * from "./HawaCheckbox";
 export * from "./HawaRadio";
 export * from "./HawaPricingCard";