@sikka/hawa 0.0.29 → 0.0.32

package/src/elements/HawaTable.js

@@ -5,6 +5,8 @@ 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";
+import { Button } from "@mui/material";
 
 export const HawaTable = (props) => {
   let isArabic = props.lang === "ar";
@@ -25,31 +27,66 @@ export const HawaTable = (props) => {
                 {col}
               </TableCell>
             ))}
+            {props.actions && (
+              <TableCell
+                align={isArabic ? "right" : "left"}
+                style={{ fontWeight: 700 }}
+                variant={isArabic ? "borderedRight" : "borderedLeft"}
+              >
+                Actions
+              </TableCell>
+            )}
           </TableRow>
         </TableHead>
 
         <TableBody>
-          {props.rows.map((singleRow, j) => (
-            <TableRow key={j}>
-              {singleRow.map((r, i) => (
-                <TableCell
-                  align={isArabic ? "right" : "left"}
-                  key={i}
-                  component="th"
-                  scope="row"
-                  variant={
-                    i > 0
-                      ? isArabic
-                        ? "borderedRight"
-                        : "borderedLeft"
-                      : "body"
-                  }
-                >
-                  {r}
-                </TableCell>
-              ))}
+          {props.rows ? (
+            props.rows.map((singleRow, j) => (
+              <TableRow key={j}>
+                {singleRow.map((r, i) => (
+                  <TableCell
+                    align={isArabic ? "right" : "left"}
+                    key={i}
+                    component="th"
+                    scope="row"
+                    variant={
+                      i > 0
+                        ? isArabic
+                          ? "borderedRight"
+                          : "borderedLeft"
+                        : "body"
+                    }
+                  >
+                    {r}
+                  </TableCell>
+                ))}
+                {props.actions && (
+                  <TableCell
+                    align={isArabic ? "right" : "left"}
+                    style={{ fontWeight: 700 }}
+                    variant={isArabic ? "borderedRight" : "borderedLeft"}
+                  >
+                    {props.actions.map((act) => (
+                      <Button
+                        style={{ margin: 2 }}
+                        variant="outlined"
+                        size="small"
+                        onClick={() => props.handleActionClick(singleRow)}
+                      >
+                        {act}
+                      </Button>
+                    ))}
+                  </TableCell>
+                )}
+              </TableRow>
+            ))
+          ) : (
+            <TableRow align="center">
+              <TableCell align={"center"} component="th" colSpan={6}>
+                {props.noDataText}
+              </TableCell>
             </TableRow>
-          ))}
+          )}
         </TableBody>
         {props.end && (
           <TableRow>
@@ -73,3 +110,11 @@ export const HawaTable = (props) => {
     </TableContainer>
   );
 };
+HawaTable.propTypes = {
+  handleActionClick: PropTypes.func,
+  noDataText: PropTypes.string,
+  lang: PropTypes.string,
+  columns: PropTypes.array,
+  rows: PropTypes.array,
+  end: PropTypes.array
+};

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/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";
@@ -9,6 +9,7 @@ export * from "./HawaSettingsRow";
 export * from "./HawaLogoButton";
 export * from "./HawaButton";
 export * from "./HawaSelect";
+export * from "./HawaRange";
 export * from "./HawaTextField";
 export * from "./HawaTextArea";
 export * from "./HawaInputLabel";
@@ -16,3 +17,5 @@ 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,13 @@ 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";
+import { BottomNavigation, BottomNavigationAction } from "@mui/material";
+import { RestoreOutlined } from "@mui/icons-material";
 
 const drawerWidth = 240;
 
@@ -35,7 +38,7 @@ 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)`
   }
@@ -88,36 +91,33 @@ const Drawer = styled(MuiDrawer, {
 export function HawaAppLayout(props) {
   const theme = useTheme();
   const [open, setOpen] = React.useState(true);
+  const matches = useMediaQuery("(max-width:600px)");
 
   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);
-  };
+  console.log("match is ", matches);
+  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 /> */}
+      {matches && (
+        <BottomNavigation
+          showLabels
+          // value={value}
+          // onChange={(event, newValue) => {
+          //   setValue(newValue);
+          // }}
+        >
+          <BottomNavigationAction label="Recents" icon={<RestoreOutlined />} />
+          <BottomNavigationAction label="Favorites" icon={<RestoreOutlined />} />
+          <BottomNavigationAction label="Nearby" icon={<RestoreOutlined />} />
+        </BottomNavigation>
+      )}{" "}
       <AppBar variant="appbar" position="fixed" open={open}>
         <Toolbar variant="appbar">
           <IconButton
@@ -151,42 +151,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.c6115a9b.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.924b4d3c.iframe.bundle.js"></script><script src="main.c86d0451.iframe.bundle.js"></script></body></html>