@sikka/hawa 0.0.21 → 0.0.24

package/src/blocks/Payment/CreditCardForm.js

@@ -1,6 +1,6 @@
 import React from "react";
 import { HawaTextField } from "../../elements";
-import { FormProvider, useForm } from "react-hook-form";
+import { Controller, FormProvider, useForm } from "react-hook-form";
 import Button from "@mui/material/Button";
 import Container from "@mui/material/Container";
 
@@ -8,59 +8,109 @@ export const CreditCardForm = (props) => {
   const methods = useForm();
   const {
     formState: { errors },
-    handleSubmit
+    handleSubmit,
+    control
   } = methods;
 
   return (
     <Container maxWidth="xs">
-      <FormProvider {...methods}>
-        <form onSubmit={handleSubmit(props.handle)}>
-          <HawaTextField
-            fullWidth
-            name="password"
-            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}
-          />
+      <form onSubmit={handleSubmit(props.handle)}>
+        <HawaTextField
+          fullWidth
+          name="password"
+          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}
+        />
 
-          <HawaTextField
-            fullWidth
-            name="password"
-            placeholder="Enter password"
-            type="password"
-            label="Name On Card"
-            // startAdornment={
-            //   <InputAdornment position="start">
-            //     <PasswordIcon />
-            //   </InputAdornment>
-            // }
-            rules={{
-              required: "Password is rquired"
-            }}
-            helperText={errors.password?.message}
-          />
+       
+        <Controller
+          control={control}
+          name="cardName"
+          render={({ field }) => (
+            <HawaTextField
+              fullWidth
+              name="password"
+              placeholder="Enter password"
+              type="password"
+              label="Name On Card"
+              // startAdornment={
+              //   <InputAdornment position="start">
+              //     <PasswordIcon />
+              //   </InputAdornment>
+              // }
+              rules={{
+                required: "Password is rquired"
+              }}
+              helperText={errors.password?.message}
+            />
+          )}
+        />
+        <Controller
+          control={control}
+          name="cardName"
+          render={({ field }) => (
+            <HawaTextField
+              fullWidth
+              name="password"
+              placeholder="Enter password"
+              type="password"
+              label="Expiry Date"
+              // startAdornment={
+              //   <InputAdornment position="start">
+              //     <PasswordIcon />
+              //   </InputAdornment>
+              // }
+              rules={{
+                required: "Password is rquired"
+              }}
+              helperText={errors.password?.message}
+            />
+          )}
+        />
+        <Controller
+          control={control}
+          name="cardName"
+          render={({ field }) => (
+            <HawaTextField
+              fullWidth
+              name="password"
+              placeholder="Enter password"
+              type="password"
+              label="CCV"
+              // startAdornment={
+              //   <InputAdornment position="start">
+              //     <PasswordIcon />
+              //   </InputAdornment>
+              // }
+              rules={{
+                required: "Password is rquired"
+              }}
+              helperText={errors.password?.message}
+            />
+          )}
+        />
 
-          <Button
-            type="submit"
-            fullWidth
-            variant="last"
-            onClick={props.handlePayWithCreditCard}
-          >
-            {/* {props.texts.signInText} */}
-            {"Pay with Credit Card"}
-          </Button>
-        </form>
-      </FormProvider>
+        <Button
+          type="submit"
+          fullWidth
+          variant="last"
+          onClick={props.handlePayWithCreditCard}
+        >
+          {/* {props.texts.signInText} */}
+          {"Pay with Credit Card"}
+        </Button>
+      </form>
     </Container>
   );
 };

package/src/elements/HawaPopMenu.js

@@ -0,0 +1,39 @@
+import { MenuItem, Menu, Typography, useTheme } from "@mui/material";
+
+export const HawaPopMenu = (props) => {
+  const theme = useTheme();
+  return (
+    <Menu
+      sx={{ mt: "45px" }}
+      id="menu-appbar"
+      anchorEl={props.anchor}
+      anchorOrigin={{
+        vertical: "top",
+        horizontal: "right"
+      }}
+      keepMounted
+      transformOrigin={{
+        vertical: "top",
+        horizontal: "right"
+      }}
+      open={Boolean(props.anchor)}
+      onClose={props.handleClose}
+      variant="themed"
+      PaperProps={{
+        style: {
+          boxShadow: "none",
+          borderRadius: theme.allBorderRadius,
+          border: `1px solid ${theme.primaryActionColor}`
+        }
+      }}
+    >
+      {props.menuItems.map((item) => (
+        <MenuItem key={item.label} onClick={item.action}>
+          {item.icon && <item.icon />}
+          <div style={{ width: 10 }} />
+          <Typography textAlign="center">{item.label}</Typography>
+        </MenuItem>
+      ))}
+    </Menu>
+  );
+};

package/src/elements/index.js

@@ -1,7 +1,5 @@
 export * from "./AdaptiveButton";
 export * from "./ActionButton";
-export * from "./HawaListItem";
-export * from "./HawaAppBar";
 export * from "./HawaCheckbox";
 export * from "./HawaRadio";
 export * from "./HawaPricingCard";

package/src/index.js

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

package/src/{elements → layout}/HawaAppBar.js

@@ -11,11 +11,14 @@ 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"];
 
 export const HawaAppBar = (props) => {
+  const theme = useTheme();
   const [anchorElNav, setAnchorElNav] = React.useState(null);
   const [anchorElUser, setAnchorElUser] = React.useState(null);
 
@@ -33,9 +36,9 @@ export const HawaAppBar = (props) => {
   const handleCloseUserMenu = () => {
     setAnchorElUser(null);
   };
-
+  console.log("theme is ", theme);
   return (
-    <AppBar position="static">
+    <AppBar position="static" variant="appbar">
       <Container maxWidth="xl" variant="appbar">
         <Toolbar disableGutters>
           <Typography
@@ -96,7 +99,7 @@ export const HawaAppBar = (props) => {
               <Button
                 key={page}
                 onClick={handleCloseNavMenu}
-                sx={{ my: 2, color: "white", display: "block" }}
+                sx={{ my: 2, display: "block" }}
               >
                 {page}
               </Button>
@@ -109,28 +112,11 @@ export const HawaAppBar = (props) => {
                 <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}
-            >
-              {settings.map((setting) => (
-                <MenuItem key={setting} onClick={handleCloseUserMenu}>
-                  <Typography textAlign="center">{setting}</Typography>
-                </MenuItem>
-              ))}
-            </Menu>
+            <HawaPopMenu
+              anchor={anchorElUser}
+              handleClose={(e) => setAnchorElUser(null)}
+              menuItems={props.accountMenu}
+            />
           </Box>
         </Toolbar>
       </Container>

package/src/layout/HawaAppLayout.js

@@ -5,7 +5,6 @@ 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";
@@ -13,15 +12,9 @@ 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";
 
@@ -152,7 +145,7 @@ export function HawaAppLayout(props) {
             }}
           >
             <Typography variant="h6" noWrap component="div">
-              Page name here
+              {props.pageTitle}
             </Typography>
 
             <Box>
@@ -176,10 +169,21 @@ export function HawaAppLayout(props) {
                 }}
                 open={Boolean(anchorElUser)}
                 onClose={handleCloseUserMenu}
+                variant="themed"
+                PaperProps={{
+                  style: {
+                    boxShadow: "none",
+                    borderRadius: theme.allBorderRadius,
+                    // borderColor: theme.primaryActionColor,
+                    // borderWidth: 2,
+                    border: `1px solid ${theme.primaryActionColor}`
+                  }
+                }}
               >
-                {[2, 3, 4].map((setting) => (
-                  <MenuItem key={setting} onClick={handleCloseUserMenu}>
-                    <Typography textAlign="center">{setting}</Typography>
+                {props.accountMenu.map((setting) => (
+                  <MenuItem key={setting.label} onClick={setting.action}>
+                    {setting.icon && <setting.icon />}
+                    <Typography textAlign="center">{setting.label}</Typography>
                   </MenuItem>
                 ))}
               </Menu>
@@ -200,42 +204,39 @@ export function HawaAppLayout(props) {
         </DrawerHeader>
         <Divider />
         <List>
-          {props.pages.map((t) => {
+          {props.pages.map((p, jk) => {
             return (
-              <HawaListItem
-                open={open}
-                text={t.text}
-                selected={props.pageName.toLowerCase() === t.text}
-                // icon={<ChevronLeftIcon />}
-                icon={t.icon}
-              />
+              <Tooltip
+                title={p.text}
+                key={jk}
+                placement={"right"}
+                arrow={true}
+                PopperProps={{ style: { opacity: open ? 0 : 1 } }}
+              >
+                <ListItemButton
+                  variant={
+                    props.pageName?.toLowerCase() === p.slug?.toLowerCase() &&
+                    "clicked"
+                  }
+                  onClick={p.action}
+                  key={p.text}
+                  sx={{
+                    minHeight: 48,
+                    justifyContent: open ? "initial" : "center",
+                    px: 2.5
+                  }}
+                >
+                  <p.icon />
+                  <div style={{ width: 20 }} />
+                  <ListItemText
+                    primary={p.text}
+                    sx={{ opacity: open ? 1 : 0 }}
+                  />
+                </ListItemButton>
+              </Tooltip>
             );
           })}
         </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 />

package/src/layout/index.js

@@ -1,3 +1,4 @@
 export * from "./Box";
 export * from "./HawaAppLayout";
 export * from "./HawaDialog";
+export * from "./HawaAppBar";

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.4ff76500.iframe.bundle.js"></script><script src="main.e1b79522.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.62e56b46.iframe.bundle.js"></script><script src="main.3715c835.iframe.bundle.js"></script></body></html>