@sikka/hawa 0.0.27 → 0.0.30

package/src/elements/HawaLogoButton.js

@@ -4,8 +4,10 @@ import GitHubIcon from "@mui/icons-material/GitHub";
 import TwitterIcon from "@mui/icons-material/Twitter";
 import WalletIcon from "@mui/icons-material/AccountBalanceWallet";
 import Typography from "@mui/material/Typography";
+import PropTypes from "prop-types";
 
 export const HawaLogoButton = (props) => {
+  let isArabic = props.lang === "ar";
   let logoElement = "";
   switch (props.logo?.toLowerCase()) {
     case "google":
@@ -79,7 +81,11 @@ export const HawaLogoButton = (props) => {
       break;
   }
   return (
-    <Button {...props} variant="withLogo">
+    <Button
+      style={{ direction: isArabic ? "rtl" : "ltr" }}
+      {...props}
+      variant="withLogo"
+    >
       {logoElement}
       <div style={{ width: 10 }} />
       <Typography
@@ -97,3 +103,26 @@ export const HawaLogoButton = (props) => {
     </Button>
   );
 };
+
+HawaLogoButton.propTypes = {
+  lang: PropTypes.string,
+  /**
+   * The logo/icon of the button
+   */
+  logo: PropTypes.oneOf([
+    "google",
+    "github",
+    "twitter",
+    "wallet",
+    "googlepay",
+    "applepay",
+    "stcpay",
+    "visa/master",
+    "paypal",
+    "mada"
+  ]),
+  /**
+   * The text next to the logo in the button
+   */
+  buttonText: PropTypes.string
+};

package/src/elements/HawaPopMenu.js

@@ -1,4 +1,5 @@
 import { MenuItem, Menu, Typography, useTheme } from "@mui/material";
+import PropTypes from "prop-types";
 
 export const HawaPopMenu = (props) => {
   const theme = useTheme();
@@ -37,3 +38,14 @@ export const HawaPopMenu = (props) => {
     </Menu>
   );
 };
+
+HawaPopMenu.propTypes = {
+  handleClose: PropTypes.func,
+  menuItems: PropTypes.arrayOf(
+    PropTypes.shape({
+      icon: PropTypes.element,
+      label: PropTypes.string,
+      action: PropTypes.func
+    })
+  )
+};

package/src/elements/HawaPricingCard.js

@@ -3,6 +3,8 @@ import Container from "@mui/material/Container";
 import Button from "@mui/material/Button";
 import Typography from "@mui/material/Typography";
 import CheckIcon from "@mui/icons-material/CheckCircleOutlined";
+import PropTypes from "prop-types";
+
 export const HawaPricingCard = (props) => {
   let isArabic = props.lang === "ar";
   let cycleTextsArabic = {
@@ -132,3 +134,15 @@ export const HawaPricingCard = (props) => {
     </Container>
   );
 };
+
+HawaPricingCard.propTypes = {
+  lang: PropTypes.string,
+  buttonText: PropTypes.string,
+  selectedPlan: PropTypes.string,
+  title: PropTypes.string,
+  title_ar: PropTypes.string,
+  subtitle: PropTypes.string,
+  subtitle_ar: PropTypes.string,
+  features: PropTypes.array,
+  features_ar: PropTypes.array
+};

package/src/elements/HawaRadio.js

@@ -1,6 +1,7 @@
 import React, { useState } from "react";
 import Button from "@mui/material/Button";
 import Container from "@mui/material/Container";
+import PropTypes from "prop-types";
 
 export const HawaRadio = (props) => {
   const [value, setValue] = useState(props.defaultValue);
@@ -28,3 +29,15 @@ export const HawaRadio = (props) => {
     </Container>
   );
 };
+HawaRadio.propTypes = {
+  lang: PropTypes.string,
+  options: PropTypes.arrayOf(
+    PropTypes.shape({
+      label: PropTypes.string,
+      value: PropTypes.string
+    })
+  ),
+  defaultValue: PropTypes.string,
+  handleChange: PropTypes.func,
+  location: PropTypes.string
+};

package/src/elements/HawaSearchBar.js

@@ -0,0 +1,17 @@
+import { Search } from "@mui/icons-material";
+import { InputAdornment } from "@mui/material";
+import React from "react";
+import { HawaTextField } from "./HawaTextField";
+
+export const HawaSearchBar = (props) => {
+  return (
+    <HawaTextField
+      endAdornment={
+        <InputAdornment position="start">
+          <Search />
+        </InputAdornment>
+      }
+      {...props}
+    />
+  );
+};

package/src/elements/HawaSettingsRow.js

@@ -1,27 +1,35 @@
 import React from "react";
-
 import PropTypes from "prop-types";
 import Checkbox from "@mui/material/Checkbox";
-import { HawaTypography } from "./HawaTypography";
 import Container from "@mui/material/Container";
+import { HawaTypography } from "./HawaTypography";
 import { HawaTextField } from "./HawaTextField";
 import { HawaRadio } from "./HawaRadio";
 import { HawaSwitch } from "./HawaSwitch";
+import { HawaColorPicker } from "./HawaColorPicker";
+
 export const HawaSettingsRow = (props) => {
   return (
     <Container variant="settingsRow">
       <HawaTypography>{props.settingsLabel}</HawaTypography>
       {props.settingsType === "checkbox" && <Checkbox {...props} />}
       {props.settingsType === "text" && <HawaTextField {...props} />}
+      {props.settingsType === "boolean" && <HawaSwitch {...props} />}
+      {props.settingsType === "color" && <HawaColorPicker {...props} />}
       {props.settingsType === "radio" && (
         <HawaRadio location="inSettings" {...props} />
       )}
-      {props.settingsType === "boolean" && <HawaSwitch {...props} />}
     </Container>
   );
 };
 
 HawaSettingsRow.propTypes = {
-  type: PropTypes.oneOf(["text", "number", "password"]),
-  helperText: PropTypes.string
+  settingsLabel: PropTypes.string,
+  settingsType: PropTypes.oneOf([
+    "checkbox",
+    "text",
+    "radio",
+    "boolean",
+    "color"
+  ])
 };

package/src/elements/{OfflineBanner.js → HawaSnackbar.js}

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

package/src/elements/HawaTable.js

@@ -5,6 +5,7 @@ import TableCell from "@mui/material/TableCell";
 import TableContainer from "@mui/material/TableContainer";
 import TableHead from "@mui/material/TableHead";
 import TableRow from "@mui/material/TableRow";
+import PropTypes from "prop-types";
 
 export const HawaTable = (props) => {
   let isArabic = props.lang === "ar";
@@ -73,3 +74,9 @@ export const HawaTable = (props) => {
     </TableContainer>
   );
 };
+HawaTable.propTypes = {
+  lang: PropTypes.string,
+  columns: PropTypes.array,
+  rows: PropTypes.array,
+  end: PropTypes.array
+};

package/src/elements/index.js

@@ -1,6 +1,6 @@
 export * from "./AdaptiveButton";
 export * from "./ActionButton";
-export * from "./OfflineBanner";
+export * from "./HawaSnackbar";
 export * from "./HawaCheckbox";
 export * from "./HawaRadio";
 export * from "./HawaItemCard";
@@ -15,3 +15,6 @@ export * from "./HawaInputLabel";
 export * from "./HawaTypography";
 export * from "./HawaAlert";
 export * from "./HawaTable";
+export * from "./HawaColorPicker";
+export * from "./HawaSearchBar";
+export * from "./HawaAccordian";

package/src/layout/HawaAppLayout.js

@@ -13,10 +13,11 @@ import ChevronLeftIcon from "@mui/icons-material/ChevronLeft";
 import ChevronRightIcon from "@mui/icons-material/ChevronRight";
 import ListItemButton from "@mui/material/ListItemButton";
 import ListItemText from "@mui/material/ListItemText";
-import Menu from "@mui/material/Menu";
 import Avatar from "@mui/material/Avatar";
 import Tooltip from "@mui/material/Tooltip";
-import MenuItem from "@mui/material/MenuItem";
+import { HawaPopMenu } from "../elements/HawaPopMenu";
+// use this to detect size and change things accordingly
+// import useMediaQuery from '@mui/material/useMediaQuery';
 
 const drawerWidth = 240;
 
@@ -92,32 +93,15 @@ export function HawaAppLayout(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);
-  };
-
-  const handleDrawerOpen = () => {
-    setOpen(true);
-  };
-
-  const handleDrawerClose = () => {
-    setOpen(false);
-  };
+  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
@@ -151,42 +135,14 @@ export function HawaAppLayout(props) {
             <Box>
               <Tooltip title="Open settings">
                 <IconButton onClick={handleOpenUserMenu} sx={{ p: 0 }}>
-                  <Avatar alt="Remy Sharp" src="/static/images/avatar/2.jpg" />
+                  <Avatar />
                 </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}
-                variant="themed"
-                PaperProps={{
-                  style: {
-                    boxShadow: "none",
-                    borderRadius: theme.allBorderRadius,
-                    // borderColor: theme.primaryActionColor,
-                    // borderWidth: 2,
-                    border: `1px solid ${theme.primaryActionColor}`
-                  }
-                }}
-              >
-                {props.accountMenu.map((setting) => (
-                  <MenuItem key={setting.label} onClick={setting.action}>
-                    {setting.icon && <setting.icon />}
-                    <Typography textAlign="center">{setting.label}</Typography>
-                  </MenuItem>
-                ))}
-              </Menu>
+              <HawaPopMenu
+                menuItems={props.accountMenu}
+                anchor={anchorElUser}
+                handleClose={handleCloseUserMenu}
+              />
             </Box>
           </div>
         </Toolbar>

package/storybook-static/iframe.html

@@ -345,4 +345,4 @@
           
       
           
-            window['STORIES'] = [{"titlePrefix":"","directory":"./src","files":"**/*.stories.mdx","importPathMatcher":"^\\.[\\\\/](?:src(?:[\\\\/](?!\\.)(?:(?:(?!(?:^|[\\\\/])\\.).)*?)[\\\\/]|[\\\\/]|$)(?!\\.)(?=.)[^\\\\/]*?\\.stories\\.mdx)$"},{"titlePrefix":"","directory":"./src","files":"**/*.stories.@(js|jsx|ts|tsx)","importPathMatcher":"^\\.[\\\\/](?:src(?:[\\\\/](?!\\.)(?:(?:(?!(?:^|[\\\\/])\\.).)*?)[\\\\/]|[\\\\/]|$)(?!\\.)(?=.)[^\\\\/]*?\\.stories\\.(js|jsx|ts|tsx))$"}];</script><script src="runtime~main.708d7ac1.iframe.bundle.js"></script><script src="vendors~main.b026595c.iframe.bundle.js"></script><script src="main.bc81d4bb.iframe.bundle.js"></script></body></html>
+            window['STORIES'] = [{"titlePrefix":"","directory":"./src","files":"**/*.stories.mdx","importPathMatcher":"^\\.[\\\\/](?:src(?:[\\\\/](?!\\.)(?:(?:(?!(?:^|[\\\\/])\\.).)*?)[\\\\/]|[\\\\/]|$)(?!\\.)(?=.)[^\\\\/]*?\\.stories\\.mdx)$"},{"titlePrefix":"","directory":"./src","files":"**/*.stories.@(js|jsx|ts|tsx)","importPathMatcher":"^\\.[\\\\/](?:src(?:[\\\\/](?!\\.)(?:(?:(?!(?:^|[\\\\/])\\.).)*?)[\\\\/]|[\\\\/]|$)(?!\\.)(?=.)[^\\\\/]*?\\.stories\\.(js|jsx|ts|tsx))$"}];</script><script src="runtime~main.708d7ac1.iframe.bundle.js"></script><script src="vendors~main.8ffaa38a.iframe.bundle.js"></script><script src="main.cbf6de78.iframe.bundle.js"></script></body></html>

package/storybook-static/index.html

@@ -56,4 +56,4 @@
           
       
           
-            window['DOCS_MODE'] = false;</script><script src="runtime~main.c8dac23bc753439736f0.manager.bundle.js"></script><script src="vendors~main.a697e07137d366f95f76.manager.bundle.js"></script><script src="main.ac6e4b72b033097dad76.manager.bundle.js"></script></body></html>
+            window['DOCS_MODE'] = false;</script><script src="runtime~main.c8dac23bc753439736f0.manager.bundle.js"></script><script src="vendors~main.a697e07137d366f95f76.manager.bundle.js"></script><script src="main.9d5968bcf15d21f5487c.manager.bundle.js"></script></body></html>