@sikka/hawa 0.0.13 → 0.0.16

package/src/elements/HawaPricingCard.js

@@ -0,0 +1,133 @@
+import React from "react";
+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: isArabic ? "rtl" : "ltr" }}
+    >
+      <Container variant="plan-header">
+        <Typography variant="h3" fontWeight={500}>
+          {isArabic ? props.title_ar : props.title}
+        </Typography>
+        <Typography variant="caption">
+          {isArabic ? props.subtitle_ar : props.subtitle}
+        </Typography>
+        <br />
+        <Typography
+          variant="h4"
+          fontWeight={500}
+          style={{ display: "flex", alignItems: "center" }}
+        >
+          {props.lang === "ar" ? (
+            <div
+              style={{
+                width: "100%",
+                display: "flex",
+                flexDirection: "column",
+                justifyContent: "center"
+              }}
+            >
+              <div style={{ display: "flex", flexDirection: "row" }}>
+                {props.price}
+                <div style={{ width: 5 }} />
+                {/* <Typography>{props.currency?.toUpperCase()}</Typography> */}
+                <Typography>
+                  {currencyMapping[props.currency?.toLowerCase()]}
+                </Typography>
+              </div>
+              <Typography style={{ fontSize: 14, margin: 5 }}>
+                {isArabic
+                  ? cycleTextsArabic[props.cycleText]
+                  : cycleTextsEnglish[props.cycleText]}
+              </Typography>
+            </div>
+          ) : (
+            <div
+              style={{
+                width: "100%",
+                display: "flex",
+                flexDirection: "column",
+                justifyContent: "center"
+              }}
+            >
+              <div style={{ display: "flex", flexDirection: "row" }}>
+                <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.lang === "ar"
+                  ? cycleTextsArabic[props.cycleText]
+                  : cycleTextsEnglish[props.cycleText]}
+              </Typography>
+            </div>
+          )}
+        </Typography>
+      </Container>
+
+      <div
+        style={{ padding: 20, color: props.selectedPlan ? "white" : "black" }}
+      >
+        {featuresMapping?.map((feature) => {
+          return (
+            <div
+              style={{
+                display: "flex",
+                flexDirection: "row",
+                alignItems: "center",
+                justifyContent: "flex-start",
+                marginTop: 10,
+                width: "100%"
+              }}
+            >
+              <div
+                style={{
+                  display: "flex",
+                  flexDirection: "row",
+                  justifyContent: "flex-end",
+                  width: "10%"
+                }}
+              >
+                <CheckIcon fontSize="small" />
+              </div>
+              <div style={{ width: 10 }} />
+              <Typography variant="subtitle2">{feature}</Typography>
+            </div>
+          );
+        })}
+      </div>
+      <Button
+        onClick={props.selectPlan}
+        variant={props.selectedPlan ? "outlined" : "contained"}
+        style={{ margin: 20 }}
+      >
+        {props.buttonText}
+      </Button>
+    </Container>
+  );
+};

package/src/elements/HawaRadio.js

@@ -5,9 +5,7 @@ import Container from "@mui/material/Container";
 export const HawaRadio = (props) => {
   const [value, setValue] = useState(props.defaultValue);
   return (
-    <Container
-      variant={props.location === "inSettings" ? "inSettings" : "panelTabs"}
-    >
+    <Container variant={props.location || "panelTabs"}>
       {props.options.map((singleOption, i) => {
         return (
           <Button

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,8 +1,10 @@
 export * from "./AdaptiveButton";
 export * from "./ActionButton";
+export * from "./HawaListItem";
+export * from "./HawaAppBar";
 export * from "./HawaCheckbox";
 export * from "./HawaRadio";
-export * from "./HawaCard";
+export * from "./HawaPricingCard";
 export * from "./HawaSettingsRow";
 export * from "./HawaLogoButton";
 export * from "./HawaButton";

package/src/layout/HawaAppLayout.js

@@ -0,0 +1,246 @@
+import React from "react";
+import { styled, useTheme } from "@mui/material/styles";
+import Box from "@mui/material/Box";
+import MuiDrawer from "@mui/material/Drawer";
+import MuiAppBar from "@mui/material/AppBar";
+import Toolbar from "@mui/material/Toolbar";
+import List from "@mui/material/List";
+// import CssBaseline from "@mui/material/CssBaseline";
+import Typography from "@mui/material/Typography";
+import Divider from "@mui/material/Divider";
+import IconButton from "@mui/material/IconButton";
+import MenuIcon from "@mui/icons-material/Menu";
+import ChevronLeftIcon from "@mui/icons-material/ChevronLeft";
+import ChevronRightIcon from "@mui/icons-material/ChevronRight";
+import ListItemButton from "@mui/material/ListItemButton";
+import ListItemIcon from "@mui/material/ListItemIcon";
+import ListItemText from "@mui/material/ListItemText";
+import InboxIcon from "@mui/icons-material/MoveToInbox";
+import MailIcon from "@mui/icons-material/Mail";
+import { HawaListItem } from "../elements";
+import Menu from "@mui/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 drawerWidth = 240;
+
+const openedMixin = (theme) => ({
+  width: drawerWidth,
+  transition: theme.transitions.create("width", {
+    easing: theme.transitions.easing.sharp,
+    duration: theme.transitions.duration.enteringScreen
+  }),
+  overflowX: "hidden"
+});
+
+const closedMixin = (theme) => ({
+  transition: theme.transitions.create("width", {
+    easing: theme.transitions.easing.sharp,
+    duration: theme.transitions.duration.leavingScreen
+  }),
+  overflowX: "hidden",
+  width: `calc(${theme.spacing(7)} + 1px)`,
+  [theme.breakpoints.up("sm")]: {
+    width: `calc(${theme.spacing(8)} + 1px)`
+  }
+});
+
+const DrawerHeader = styled("div")(({ theme }) => ({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "flex-end",
+  padding: theme.spacing(0, 1),
+  // necessary for content to be below app bar
+  ...theme.mixins.toolbar
+}));
+
+const AppBar = styled(MuiAppBar, {
+  shouldForwardProp: (prop) => prop !== "open"
+})(({ theme, open }) => ({
+  zIndex: theme.zIndex.drawer + 1,
+  transition: theme.transitions.create(["width", "margin"], {
+    easing: theme.transitions.easing.sharp,
+    duration: theme.transitions.duration.leavingScreen
+  }),
+  ...(open && {
+    marginLeft: drawerWidth,
+    width: `calc(100% - ${drawerWidth}px)`,
+    transition: theme.transitions.create(["width", "margin"], {
+      easing: theme.transitions.easing.sharp,
+      duration: theme.transitions.duration.enteringScreen
+    })
+  })
+}));
+
+const Drawer = styled(MuiDrawer, {
+  shouldForwardProp: (prop) => prop !== "open"
+})(({ theme, open }) => ({
+  width: drawerWidth,
+  flexShrink: 0,
+  whiteSpace: "nowrap",
+  boxSizing: "border-box",
+  ...(open && {
+    ...openedMixin(theme),
+    "& .MuiDrawer-paper": openedMixin(theme)
+  }),
+  ...(!open && {
+    ...closedMixin(theme),
+    "& .MuiDrawer-paper": closedMixin(theme)
+  })
+}));
+
+export function HawaAppLayout(props) {
+  const theme = useTheme();
+  const [open, setOpen] = React.useState(true);
+
+  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);
+  };
+
+  const handleDrawerOpen = () => {
+    setOpen(true);
+  };
+
+  const handleDrawerClose = () => {
+    setOpen(false);
+  };
+
+  return (
+    <Box sx={{ display: "flex" }}>
+      {/* <CssBaseline /> */}
+      <AppBar variant="appbar" position="fixed" open={open}>
+        <Toolbar variant="appbar">
+          <IconButton
+            color="inherit"
+            aria-label="open drawer"
+            onClick={handleDrawerOpen}
+            edge="start"
+            sx={{
+              marginRight: 5,
+              ...(open && { display: "none" })
+            }}
+          >
+            <MenuIcon />
+          </IconButton>
+
+          <div
+            style={{
+              //   backgroundColor: "red",
+              display: "flex",
+              flexDirection: "row",
+              justifyContent: "space-between",
+              alignItems: "center",
+              width: "100%",
+              margin: 0
+            }}
+          >
+            <Typography variant="h6" noWrap component="div">
+              Page name here
+            </Typography>
+
+            <Box>
+              <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}
+              >
+                {[2, 3, 4].map((setting) => (
+                  <MenuItem key={setting} onClick={handleCloseUserMenu}>
+                    <Typography textAlign="center">{setting}</Typography>
+                  </MenuItem>
+                ))}
+              </Menu>
+            </Box>
+          </div>
+        </Toolbar>
+      </AppBar>
+      <Drawer variant="permanent" open={open}>
+        <DrawerHeader>
+          {props.logo}
+          <IconButton onClick={handleDrawerClose}>
+            {theme.direction === "rtl" ? (
+              <ChevronRightIcon />
+            ) : (
+              <ChevronLeftIcon />
+            )}
+          </IconButton>
+        </DrawerHeader>
+        <Divider />
+        <List>
+          {props.pages.map((t) => {
+            return (
+              <HawaListItem
+                open={open}
+                text={t.text}
+                selected={props.pageName.toLowerCase() === t.text}
+                // icon={<ChevronLeftIcon />}
+                icon={t.icon}
+              />
+            );
+          })}
+        </List>
+        <Divider />
+        <List>
+          {["All mail", "Trash", "Spam"].map((text, index) => (
+            <ListItemButton
+              key={text}
+              sx={{
+                minHeight: 48,
+                justifyContent: open ? "initial" : "center",
+                px: 2.5
+              }}
+            >
+              <ListItemIcon
+                sx={{
+                  minWidth: 0,
+                  mr: open ? 3 : "auto",
+                  justifyContent: "center"
+                }}
+              >
+                {index % 2 === 0 ? <InboxIcon /> : <MailIcon />}
+              </ListItemIcon>
+              <ListItemText primary={text} sx={{ opacity: open ? 1 : 0 }} />
+            </ListItemButton>
+          ))}
+        </List>
+      </Drawer>
+      <Box sx={{ flexGrow: 1, p: 3 }}>
+        <DrawerHeader />
+        {props.children}
+      </Box>
+    </Box>
+  );
+}

package/src/layout/index.js

@@ -1 +1,2 @@
 export * from "./Box";
+export * from "./HawaAppLayout";

package/src/stories/BlocksStories/Account/UserProfile.stories.js

@@ -8,7 +8,31 @@ export default {
 };
 
 const ProfileTemplate = (args) => {
-  return <UserProfileForm {...args} />;
+  return (
+    <UserProfileForm
+      {...args}
+      handleUpdateProfile={(e) => console.log("updating profile", e)}
+      texts={{
+        fullNameLabel: "Full Name",
+        fullNamePlaceholder: "Fulan AlFulani",
+        fullNameRequiredText: "Full Name is required",
+        emailLabel: "Email",
+        emailPlaceholder: "Enter your email",
+        emailRequiredText: "Email is required",
+        emailInvalidText: "Invalid email address",
+        passwordPlaceholder: "Minimum 8 characters",
+        passwordRequiredText: "Password is required",
+        passwordTooShortText: "Password too short",
+
+        updatePassword: "Update Password",
+        passwordLabel: "Choose new password",
+        confirmPasswordPlaceholder: "Confirm password",
+        confirmPasswordLabel: "Confirm",
+        confirmPasswordRequiredText: "Confirmation is required",
+        passwordMatchError: "Password doesn't match"
+      }}
+    />
+  );
 };
 export const UserProfile = ProfileTemplate.bind({});
 UserProfile.args = {

package/src/stories/BlocksStories/Auth/NewPassword.stories.js

@@ -5,7 +5,6 @@ export default {
   title: "Blocks/Auth/New Password",
   component: [NewPasswordForm],
   argTypes: {
-  
     showError: {
       default: false,
       control: "boolean",
@@ -41,6 +40,8 @@ const NewPasswordTemplate = (args) => {
         passwordLabel: "Choose new password",
         confirmPasswordPlaceholder: "Confirm password",
         confirmPasswordLabel: "Confirm",
+        confirmPasswordRequiredText: "Confirmation is required",
+        passwordMatchError: "Password doesn't match",
         forgotPasswordText: "Forgot password?",
         newUserText: "New user?",
         signUpText: "Sign up",

package/src/stories/BlocksStories/Auth/ResetPassword.stories.js

@@ -5,7 +5,6 @@ export default {
   title: "Blocks/Auth/Reset Password",
   component: [ResetPasswordForm],
   argTypes: {
-   
     showError: {
       default: false,
       control: "boolean",
@@ -48,7 +47,7 @@ const ResetPasswordTemplate = (args) => {
         twitterButtonLabel: "Sign in with Twitter"
       }}
       {...args}
-      handleResetPassword={() => console.log("resetting password")}
+      handleResetPassword={(e) => console.log("resetting password,", e)}
     />
   );
 };

package/src/stories/BlocksStories/Auth/SignIn.stories.js

@@ -5,6 +5,13 @@ export default {
   title: "Blocks/Auth/Sign In",
   component: [SignInForm],
   argTypes: {
+    lang: {
+      default: true,
+      control: "select",
+      options: ["ar", "en"],
+      description: "The language of the form",
+      table: { defaultValue: { summary: "en" } }
+    },
     viaGoogle: {
       default: true,
       control: "boolean",
@@ -85,5 +92,6 @@ SignIn.args = {
   viaTwitter: true,
   showError: false,
   errorTitle: "Error",
-  errorText: "Something went wrong"
+  errorText: "Something went wrong",
+  lang: "ar"
 };