@sikka/hawa 0.0.31 → 0.0.34

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sikka/hawa",
-  "version": "0.0.31",
+  "version": "0.0.34",
   "description": "UI Kit",
   "main": "lib/index.js",
   "module": "es/index.es.js",

package/rollup.config.js

@@ -1,9 +1,9 @@
-import babel from "rollup-plugin-babel";
 import resolve from "@rollup/plugin-node-resolve";
+import commonjs from "@rollup/plugin-commonjs";
+import babel from "rollup-plugin-babel";
 import external from "rollup-plugin-peer-deps-external";
 import { terser } from "rollup-plugin-terser";
 import postcss from "rollup-plugin-postcss";
-import commonjs from "@rollup/plugin-commonjs";
 
 export default [
   {

package/src/blocks/AuthForms/NewPasswordForm.js

@@ -112,5 +112,9 @@ NewPasswordForm.propTypes = {
     forgotPasswordText: PropTypes.string,
     passwordChanged: PropTypes.string
   }),
+  /**
+   * A boolean to replace the form with a success message
+   */
+  passwordChanged: PropTypes.bool,
   handleNewPassword: PropTypes.func
 };

package/src/blocks/AuthForms/ResetPasswordForm.js

@@ -53,7 +53,7 @@ export const ResetPasswordForm = (props) => {
         </form>
       ) : (
         <HawaTypography style={{ textAlign: "center", margin: 5 }}>
-          {props.emailSentText}
+          {props.texts.emailSentText}
         </HawaTypography>
       )}
     </Container>
@@ -68,8 +68,12 @@ ResetPasswordForm.propTypes = {
     emailPlaceholder: PropTypes.string,
     emailRequiredText: PropTypes.string,
     emailInvalidText: PropTypes.string,
+    emailSentText: PropTypes.string,
     resetPassword: PropTypes.string
   }),
-  emailSentText: PropTypes.string,
+  /**
+   * a boolean to replace the form with a success message
+   */
+  sent: PropTypes.bool,
   handleResetPassword: PropTypes.func
 };

package/src/blocks/AuthForms/SignUpForm.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { HawaTextField, HawaLogoButton } from "../../elements";
+import { HawaTextField, HawaLogoButton, HawaAlert } from "../../elements";
 import PropTypes from "prop-types";
 import { Controller, FormProvider, useForm } from "react-hook-form";
 import PersonIcon from "@mui/icons-material/PermIdentityOutlined";
@@ -10,8 +10,6 @@ import Container from "@mui/material/Container";
 import Divider from "@mui/material/Divider";
 import Typography from "@mui/material/Typography";
 import Button from "@mui/material/Button";
-import Alert from "@mui/material/Alert";
-import AlertTitle from "@mui/material/AlertTitle";
 
 export const SignUpForm = (props) => {
   const methods = useForm();
@@ -27,11 +25,12 @@ export const SignUpForm = (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"
+        />
       )}
 
       <FormProvider {...methods}>
@@ -163,26 +162,6 @@ export const SignUpForm = (props) => {
   );
 };
 
-// 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",
-// passwordLabel: "Password",
-// passwordPlaceholder: "Minimum 8 characters",
-// passwordRequiredText: "Password is required",
-// passwordTooShortText: "Password too short",
-// forgotPasswordText: "Forgot password?",
-// newUserText: "New user?",
-// signUpText: "Sign up",
-// signInText: "Sign in",
-// existingUserText: "Existing User?",
-// googleButtonLabel: "Sign in with Google",
-// githubButtonLabel: "Sign in with Github",
-// twitterButtonLabel: "Sign in with Twitter"
-
 SignUpForm.propTypes = {
   /**
    *  An object of all the texts in the blocks

package/src/blocks/Payment/ChargeWalletForm.js

@@ -48,16 +48,15 @@ export const ChargeWalletForm = (props) => {
                   field.onChange(parseFloat(e.target.value));
                   setWalletAmount(e.target.value);
                 }}
+                helperText={errors.amount?.message}
               />
             )}
+            rules={{
+              required: props.texts.amountRequired
+            }}
           />
 
-          <Button
-            type="submit"
-            fullWidth
-            variant="last"
-            onClick={props.handleSignIn}
-          >
+          <Button type="submit" fullWidth variant="last">
             {props.texts.chargeWallet}
           </Button>
         </form>
@@ -67,9 +66,20 @@ export const ChargeWalletForm = (props) => {
 };
 
 ChargeWalletForm.propTypes = {
+  /**
+   * The texts object for all the texts in the block
+   */
   texts: PropTypes.shape({
     amountLabel: PropTypes.string,
-    chargeWallet: PropTypes.string
+    chargeWallet: PropTypes.string,
+    amountRequired: PropTypes.string
   }),
-  handleChargeWallet: PropTypes.func
+  /**
+   * Function called when charge wallet button is clicked
+   */
+  handleChargeWallet: PropTypes.func,
+  /**
+   * The currency text under the amount
+   */
+  currency: PropTypes.string
 };

package/src/blocks/Payment/Confirmation.js

@@ -100,6 +100,9 @@ export const ConfirmationPage = (props) => {
 };
 
 ConfirmationPage.propTypes = {
+  /**
+   * The texts object for all the texts in the block
+   */
   texts: PropTypes.shape({
     print: PropTypes.string,
     history: PropTypes.string,

package/src/blocks/Payment/CreditCardForm.js

@@ -21,19 +21,12 @@ export const CreditCardForm = (props) => {
           placeholder="Enter password"
           type="tel"
           label="Card Number"
-          // variant="unscrollable"
-          // startAdornment={
-          //   <InputAdornment position="start">
-          //     <PasswordIcon />
-          //   </InputAdornment>
-          // }
           rules={{
             required: "Password is rquired"
           }}
           helperText={errors.password?.message}
         />
 
-       
         <Controller
           control={control}
           name="cardName"
@@ -44,11 +37,6 @@ export const CreditCardForm = (props) => {
               placeholder="Enter password"
               type="password"
               label="Name On Card"
-              // startAdornment={
-              //   <InputAdornment position="start">
-              //     <PasswordIcon />
-              //   </InputAdornment>
-              // }
               rules={{
                 required: "Password is rquired"
               }}
@@ -66,11 +54,6 @@ export const CreditCardForm = (props) => {
               placeholder="Enter password"
               type="password"
               label="Expiry Date"
-              // startAdornment={
-              //   <InputAdornment position="start">
-              //     <PasswordIcon />
-              //   </InputAdornment>
-              // }
               rules={{
                 required: "Password is rquired"
               }}
@@ -88,11 +71,6 @@ export const CreditCardForm = (props) => {
               placeholder="Enter password"
               type="password"
               label="CCV"
-              // startAdornment={
-              //   <InputAdornment position="start">
-              //     <PasswordIcon />
-              //   </InputAdornment>
-              // }
               rules={{
                 required: "Password is rquired"
               }}
@@ -107,7 +85,6 @@ export const CreditCardForm = (props) => {
           variant="last"
           onClick={props.handlePayWithCreditCard}
         >
-          {/* {props.texts.signInText} */}
           {"Pay with Credit Card"}
         </Button>
       </form>

package/src/blocks/Pricing/PricingPlans.js

@@ -58,6 +58,9 @@ export const PricingPlans = (props) => {
 };
 
 PricingPlans.propTypes = {
+  /**
+   * An array of the pricing plans
+   */
   plans: PropTypes.arrayOf(
     PropTypes.shape({
       title: PropTypes.string,

package/src/blocks/Pricing/index.js

@@ -0,0 +1 @@
+export * from "./PricingPlans";

package/src/blocks/index.js

@@ -0,0 +1,4 @@
+export * from "./Account";
+export * from "./AuthForms";
+export * from "./Payment";
+export * from "./Pricing";

package/src/elements/HawaPopMenu.js

@@ -1,4 +1,7 @@
-import { MenuItem, Menu, Typography, useTheme } from "@mui/material";
+import { useTheme } from "@mui/material";
+import Typography from "@mui/material/Typography";
+import Menu from "@mui/material/Menu";
+import MenuItem from "@mui/material/MenuItem";
 import PropTypes from "prop-types";
 
 export const HawaPopMenu = (props) => {
@@ -31,7 +34,7 @@ export const HawaPopMenu = (props) => {
       {props.menuItems.map((item) => (
         <MenuItem key={item.label} onClick={item.action}>
           {item.icon && <item.icon />}
-          <div style={{ width: 10 }} />
+          {item.icon && <div style={{ width: 10 }} />}
           <Typography textAlign="center">{item.label}</Typography>
         </MenuItem>
       ))}
@@ -40,6 +43,7 @@ export const HawaPopMenu = (props) => {
 };
 
 HawaPopMenu.propTypes = {
+  anchor: PropTypes.any,
   handleClose: PropTypes.func,
   menuItems: PropTypes.arrayOf(
     PropTypes.shape({

package/src/elements/HawaPricingCard.js

@@ -4,6 +4,7 @@ import Button from "@mui/material/Button";
 import Typography from "@mui/material/Typography";
 import CheckIcon from "@mui/icons-material/CheckCircleOutlined";
 import PropTypes from "prop-types";
+import Chip from "@mui/material/Chip";
 
 export const HawaPricingCard = (props) => {
   let isArabic = props.lang === "ar";
@@ -24,6 +25,7 @@ export const HawaPricingCard = (props) => {
     sar: isArabic ? "ريال" : "SAR"
   };
   let featuresMapping = isArabic ? props.features_ar : props.features;
+  let chipSpacing = isArabic ? { left: 10 } : { right: 10 };
   return (
     <Container
       maxWidth="xs"
@@ -31,6 +33,19 @@ export const HawaPricingCard = (props) => {
       style={{ direction: isArabic ? "rtl" : "ltr" }}
     >
       <Container variant="plan-header">
+        {props.discount && (
+          <Chip
+            label={props.discount}
+            variant="standard"
+            style={{
+              maxWidth: "fit-content",
+              position: "absolute",
+              bottom: 10,
+              ...chipSpacing
+            }}
+            color="success"
+          />
+        )}
         <Typography variant="h3" fontWeight={500}>
           {isArabic ? props.title_ar : props.title}
         </Typography>
@@ -144,5 +159,7 @@ HawaPricingCard.propTypes = {
   subtitle: PropTypes.string,
   subtitle_ar: PropTypes.string,
   features: PropTypes.array,
-  features_ar: PropTypes.array
+  features_ar: PropTypes.array,
+  currency: PropTypes.oneOf(["sar", "usd"]),
+  cycleText: PropTypes.oneOf(["monthly", "3-months", "6-months", "annually"])
 };

package/src/elements/HawaRange.js

@@ -5,7 +5,7 @@ import PropTypes from "prop-types";
 
 export const HawaRange = (props) => {
   return (
-    <Stack spacing={2} direction="row" alignItems="center">
+    <Stack spacing={2} direction="row" alignItems="center" style={props.style}>
       {props.startElement}
       <Slider
         size="small"
@@ -18,9 +18,14 @@ export const HawaRange = (props) => {
   );
 };
 HawaRange.propTypes = {
+  /**
+   * The element at the side where the range value is 0
+   * Can be an icon
+   */
   startElement: PropTypes.element,
+  /**
+   * The element at the side where the range value is 100
+   */
   endElement: PropTypes.element,
-  defaultValue: PropTypes.string,
-  handleChange: PropTypes.func,
-  location: PropTypes.string
+  handleChange: PropTypes.func
 };

package/src/elements/HawaTextField.js

@@ -16,9 +16,13 @@ export const HawaTextField = (props) => {
           }}
         >
           {props.label && <InputLabel>{props.label}</InputLabel>}
-
           {props.helperText && (
-            <Typography variant="validation">{props.helperText}</Typography>
+            <Typography
+              style={{ marginBottom: !props.label && 10 }}
+              variant="validation"
+            >
+              {props.helperText}
+            </Typography>
           )}
         </div>
         <Input disableUnderline {...props} />

package/src/index.js

@@ -1,5 +1,3 @@
-export * from "./blocks/Account";
-export * from "./blocks/AuthForms";
-export * from "./blocks/Payment";
+export * from "./blocks";
 export * from "./elements";
 export * from "./layout";

package/src/layout/HawaAppBar.js

@@ -3,105 +3,62 @@ 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";
 import { useTheme } from "@mui/material";
 import { HawaPopMenu } from "../elements/HawaPopMenu";
-
-const pages = ["Products", "Pricing", "Blog"];
-const settings = ["Profile", "Account", "Dashboard", "Logout"];
+import PropTypes from "prop-types";
 
 export const HawaAppBar = (props) => {
   const theme = useTheme();
   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 handleOpenNavMenu = (event) => setAnchorElNav(event.currentTarget);
+  const handleOpenUserMenu = (event) => setAnchorElUser(event.currentTarget);
+  const handleCloseNavMenu = () => setAnchorElNav(null);
+  const handleCloseUserMenu = () => setAnchorElUser(null);
 
-  const handleCloseUserMenu = () => {
-    setAnchorElUser(null);
-  };
   console.log("theme is ", theme);
   return (
     <AppBar position="static" variant="appbar">
-      <Container maxWidth="xl" variant="appbar">
+      <Container 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: "none", md: "flex" } }}>
+            {props.logo}
+          </Box>
           <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}
+              onClick={handleOpenNavMenu}
               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>
+            <HawaPopMenu
+              anchor={anchorElNav}
+              handleClose={handleCloseNavMenu}
+              menuItems={props.pages}
+            />
+          </Box>
+
+          <Box sx={{ flexGrow: 1, display: { xs: "flex", md: "none" } }}>
+            {props.logo}
           </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) => (
+            {props.pages.map((page) => (
               <Button
                 key={page}
                 onClick={handleCloseNavMenu}
                 sx={{ my: 2, display: "block" }}
               >
-                {page}
+                {page.label}
               </Button>
             ))}
           </Box>
@@ -123,3 +80,19 @@ export const HawaAppBar = (props) => {
     </AppBar>
   );
 };
+HawaAppBar.propTypes = {
+  pages: PropTypes.arrayOf(
+    PropTypes.shape({
+      icon: PropTypes.element,
+      label: PropTypes.string,
+      action: PropTypes.func
+    })
+  ),
+  accountMenu: PropTypes.arrayOf(
+    PropTypes.shape({
+      icon: PropTypes.element,
+      label: PropTypes.string,
+      action: PropTypes.func
+    })
+  )
+};

package/src/layout/HawaAppLayout.js

@@ -16,8 +16,6 @@ import ListItemText from "@mui/material/ListItemText";
 import Avatar from "@mui/material/Avatar";
 import Tooltip from "@mui/material/Tooltip";
 import { HawaPopMenu } from "../elements/HawaPopMenu";
-// use this to detect size and change things accordingly
-// import useMediaQuery from '@mui/material/useMediaQuery';
 
 const drawerWidth = 240;
 
@@ -36,16 +34,16 @@ const closedMixin = (theme) => ({
     duration: theme.transitions.duration.leavingScreen
   }),
   overflowX: "hidden",
-  width: `calc(${theme.spacing(7)} + 1px)`,
+  width: `calc(${theme.spacing(8)} + 1px)`,
   [theme.breakpoints.up("sm")]: {
     width: `calc(${theme.spacing(8)} + 1px)`
   }
 });
 
-const DrawerHeader = styled("div")(({ theme }) => ({
+const DrawerHeader = styled("div")(({ theme, direction }) => ({
   display: "flex",
   alignItems: "center",
-  justifyContent: "flex-end",
+  justifyContent: direction === "rtl" ? "flex-start" : "flex-end",
   padding: theme.spacing(0, 1),
   // necessary for content to be below app bar
   ...theme.mixins.toolbar
@@ -53,14 +51,16 @@ const DrawerHeader = styled("div")(({ theme }) => ({
 
 const AppBar = styled(MuiAppBar, {
   shouldForwardProp: (prop) => prop !== "open"
-})(({ theme, open }) => ({
+})(({ theme, open, direction }) => ({
   zIndex: theme.zIndex.drawer + 1,
   transition: theme.transitions.create(["width", "margin"], {
     easing: theme.transitions.easing.sharp,
     duration: theme.transitions.duration.leavingScreen
   }),
+
   ...(open && {
-    marginLeft: drawerWidth,
+    marginLeft: direction === "rtl" ? 0 : drawerWidth,
+    marginRight: direction === "rtl" ? drawerWidth : 0,
     width: `calc(100% - ${drawerWidth}px)`,
     transition: theme.transitions.create(["width", "margin"], {
       easing: theme.transitions.easing.sharp,
@@ -89,7 +89,7 @@ const Drawer = styled(MuiDrawer, {
 export function HawaAppLayout(props) {
   const theme = useTheme();
   const [open, setOpen] = React.useState(true);
-
+  const isArabic = props.lang === "ar";
   const [anchorElNav, setAnchorElNav] = React.useState(null);
   const [anchorElUser, setAnchorElUser] = React.useState(null);
 
@@ -101,14 +101,23 @@ export function HawaAppLayout(props) {
   const handleDrawerClose = () => setOpen(false);
 
   return (
-    <Box sx={{ display: "flex" }}>
-      <AppBar variant="appbar" position="fixed" open={open}>
-        <Toolbar variant="appbar">
+    <Box sx={{ display: "flex", direction: isArabic ? "rtl" : "ltr" }}>
+      <AppBar
+        variant="appbar"
+        position="fixed"
+        open={open}
+        direction={isArabic ? "rtl" : "ltr"}
+      >
+        <Toolbar
+          variant="appbar"
+          sx={{ paddingLeft: { xs: 3 }, paddingRight: { xs: 3 } }}
+        >
           <IconButton
             color="inherit"
             aria-label="open drawer"
             onClick={handleDrawerOpen}
             edge="start"
+            s
             sx={{
               marginRight: 5,
               ...(open && { display: "none" })
@@ -134,7 +143,11 @@ export function HawaAppLayout(props) {
 
             <Box>
               <Tooltip title="Open settings">
-                <IconButton onClick={handleOpenUserMenu} sx={{ p: 0 }}>
+                <IconButton
+                  onClick={handleOpenUserMenu}
+                  sx={{ p: 0 }}
+                  size="small"
+                >
                   <Avatar />
                 </IconButton>
               </Tooltip>
@@ -147,8 +160,13 @@ export function HawaAppLayout(props) {
           </div>
         </Toolbar>
       </AppBar>
-      <Drawer variant="permanent" open={open}>
-        <DrawerHeader>
+      <Drawer
+        // anchor="left"
+
+        variant="permanent"
+        open={open}
+      >
+        <DrawerHeader direction={isArabic ? "rtl" : "ltr"}>
           {props.logo}
           <IconButton onClick={handleDrawerClose}>
             {theme.direction === "rtl" ? (