@sikka/hawa 0.0.14 → 0.0.17

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/HawaTypography.js

@@ -3,24 +3,5 @@ import React from "react";
 import Typography from "@mui/material/Typography";
 
 export const HawaTypography = (props) => {
-  // const currentTheme = Object.keys(hawaTheme.typography).find(
-  //   (tName) => tName.toLowerCase() === themeName?.toLowerCase()
-  // );
-  // let typographyStyle = {};
-
-  // if (currentTheme) {
-  //   typographyStyle = { ...hawaTheme.typography[currentTheme] };
-  // } else {
-  //   typographyStyle = {
-  //     color: "black"
-  //   };
-  // }
-
-  // const StyledTypography = styled(Typography)(({ theme }) => {
-  //   return {
-  //     ...typographyStyle
-  //   };
-  // });
-
   return <Typography {...props}>{props.children}</Typography>;
 };

package/src/elements/OfflineBanner.js

@@ -0,0 +1,19 @@
+import React from "react";
+import Snackbar from "@mui/material/Snackbar";
+import AlertTitle from "@mui/material/AlertTitle";
+import Alert from "@mui/material/Alert";
+
+export const OfflineBanner = (props) => {
+  return (
+    <Snackbar
+      style={{ outline: "1px solid red" }}
+      open={props.open}
+      onClose={props.handleClose}
+    >
+      <Alert icon={false} severity={"error"}>
+        {props.title && <AlertTitle>{props.title}</AlertTitle>}
+        {props.text}
+      </Alert>
+    </Snackbar>
+  );
+};

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";
@@ -10,3 +12,4 @@ export * from "./HawaTextField";
 export * from "./HawaInputLabel";
 export * from "./HawaTypography";
 export * from "./HawaAlert";
+export * from "./OfflineBanner";

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";