@sikka/hawa 0.0.14 → 0.0.15

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

package/src/stories/BlocksStories/Auth/NewPassword.stories.js

@@ -5,7 +5,6 @@ export default {
   title: "Blocks/Auth/New Password",
   component: [NewPasswordForm],
   argTypes: {
-  
     showError: {
       default: false,
       control: "boolean",
@@ -41,6 +40,8 @@ const NewPasswordTemplate = (args) => {
         passwordLabel: "Choose new password",
         confirmPasswordPlaceholder: "Confirm password",
         confirmPasswordLabel: "Confirm",
+        confirmPasswordRequiredText: "Confirmation is required",
+        passwordMatchError: "Password doesn't match",
         forgotPasswordText: "Forgot password?",
         newUserText: "New user?",
         signUpText: "Sign up",

package/src/stories/BlocksStories/Auth/ResetPassword.stories.js

@@ -5,7 +5,6 @@ export default {
   title: "Blocks/Auth/Reset Password",
   component: [ResetPasswordForm],
   argTypes: {
-   
     showError: {
       default: false,
       control: "boolean",
@@ -48,7 +47,7 @@ const ResetPasswordTemplate = (args) => {
         twitterButtonLabel: "Sign in with Twitter"
       }}
       {...args}
-      handleResetPassword={() => console.log("resetting password")}
+      handleResetPassword={(e) => console.log("resetting password,", e)}
     />
   );
 };

package/src/stories/BlocksStories/Auth/SignUp.stories.js

@@ -51,6 +51,7 @@ const SignUpTemplate = (args) => {
       texts={{
         fullNameLabel: "Full Name",
         fullNamePlaceholder: "Fulan AlFulani",
+        fullNameRequiredText: "Full Name is required",
         emailLabel: "Email",
         emailPlaceholder: "Enter your email",
         emailRequiredText: "Email is required",

package/src/stories/BlocksStories/Pricing/BillingPlans.stories.js

@@ -4,7 +4,15 @@ import { PricingPlans } from "../../../blocks/Pricing/PricingPlans";
 export default {
   title: "Blocks/Pricing/In Billing",
   component: [PricingPlans],
-  argTypes: {}
+  argTypes: {
+    lang: {
+      options: ["ar", "en"],
+      control: { type: "select" }
+    }
+  },
+  args: {
+    lang: "ar"
+  }
 };
 
 export const InBilling = (args) => {
@@ -14,31 +22,40 @@ export const InBilling = (args) => {
       plans={[
         {
           title: "Free",
+          title_ar: "تجريبي",
           subtitle: "For everyone",
+          subtitle_ar: "للعرب",
           price: 0,
           currency: "SAR",
           cycleText: "Monthly",
           buttonText: "Select Plan",
-          features: ["one", "two", "three"]
+          features: ["one", "two", "three"],
+          features_ar: ["واحد", "اثنين", "ثلاثة"]
         },
         {
           title: "Intro",
+          title_ar: "تجريبي",
           subtitle: "For beginners",
+          subtitle_ar: "للعرب",
           selectedPlan: true,
           price: 10,
           currency: "SAR",
           cycleText: "Monthly",
           buttonText: "Current Plan",
-          features: ["one", "two", "three"]
+          features: ["one", "two", "three"],
+          features_ar: ["واحد", "اثنين", "ثلاثة"]
         },
         {
           title: "Pro",
+          title_ar: "تجريبي",
           subtitle: "For professionals",
+          subtitle_ar: "للعرب",
           price: 30,
           currency: "SAR",
           cycleText: "Monthly",
           buttonText: "Select Plan",
-          features: ["one", "two", "three"]
+          features: ["one", "two", "three"],
+          features_ar: ["واحد", "اثنين", "ثلاثة"]
         }
       ]}
     />

package/src/stories/BlocksStories/Pricing/LandingPlans.stories.js

@@ -4,7 +4,15 @@ import { PricingPlans } from "../../../blocks/Pricing/PricingPlans";
 export default {
   title: "Blocks/Pricing/In Landing",
   component: [PricingPlans],
-  argTypes: {}
+  argTypes: {
+    lang: {
+      options: ["ar", "en"],
+      control: { type: "select" }
+    }
+  },
+  args: {
+    lang: "ar"
+  }
 };
 
 export const InLanding = (args) => {
@@ -14,30 +22,40 @@ export const InLanding = (args) => {
       plans={[
         {
           title: "Free",
+          title_ar: "تجريبي",
           subtitle: "For everyone",
+          subtitle_ar: "للعرب",
           price: 0,
           currency: "SAR",
           cycleText: "Monthly",
           buttonText: "Select Plan",
-          features: ["one", "two", "three"]
+          features: ["one", "two", "three"],
+          features_ar: ["واحد", "اثنين", "ثلاثة"]
         },
         {
           title: "Intro",
+          title_ar: "تجريبي",
           subtitle: "For beginners",
+          subtitle_ar: "للعرب",
+          selectedPlan: false,
           price: 10,
           currency: "SAR",
           cycleText: "Monthly",
-          buttonText: "Select Plan",
-          features: ["one", "two", "three"]
+          buttonText: "Current Plan",
+          features: ["one", "two", "three"],
+          features_ar: ["واحد", "اثنين", "ثلاثة"]
         },
         {
           title: "Pro",
+          title_ar: "تجريبي",
           subtitle: "For professionals",
+          subtitle_ar: "للعرب",
           price: 30,
           currency: "SAR",
           cycleText: "Monthly",
           buttonText: "Select Plan",
-          features: ["one", "two", "three"]
+          features: ["one", "two", "three"],
+          features_ar: ["واحد", "اثنين", "ثلاثة"]
         }
       ]}
     />

package/src/stories/LayoutStories/AppBar.stories.js

@@ -0,0 +1,29 @@
+import React from "react";
+import { HawaAppBar } from "../../elements";
+
+const Template = (args) => {
+  return <HawaAppBar />;
+};
+export default {
+  title: "Layout/AppBar",
+  component: [HawaAppBar],
+  parameters: {
+    backgrounds: {
+      default: "light"
+      // values: [
+      //   { name: "light", value: theme.lightBackground },
+      //   { name: "dark", value: theme.darkBackground }
+      // ]
+    }
+  }
+};
+
+export const Normal = Template.bind({});
+Normal.args = {
+  size: "large",
+  showText: true,
+  buttonLabel: "test",
+  // padding: theme.paddings,
+  textColor: "#000000",
+  buttonColor: "#f9f9f9"
+};

package/src/stories/LayoutStories/AppLayout.stories.js

@@ -0,0 +1,52 @@
+import React from "react";
+import { HawaAppLayout } from "../../layout";
+
+const Template = (args) => {
+  return (
+    <HawaAppLayout
+      pageName="page1"
+      pages={[
+        { text: "page1", icon: "fdd" },
+        { text: "page2", icon: "huhu" },
+        { text: "page3", icon: "test" }
+      ]}
+      //   pages={[
+      //     <HawaListItem text="dd" />,
+      //     <HawaListItem text="dd" />,
+      //     <HawaListItem text="dd" />
+      //   ]}
+      logo={
+        <img
+          height={40}
+          style={{ zIndex: 30, width: "100%" }}
+          src="https://xakher-images.s3.ap-southeast-1.amazonaws.com/sikka-logo.svg"
+        />
+      }
+    >
+      the rest of the app here
+    </HawaAppLayout>
+  );
+};
+export default {
+  title: "Layout/AppLayout",
+  component: [HawaAppLayout],
+  parameters: {
+    backgrounds: {
+      default: "light"
+      // values: [
+      //   { name: "light", value: theme.lightBackground },
+      //   { name: "dark", value: theme.darkBackground }
+      // ]
+    }
+  }
+};
+
+export const Normal = Template.bind({});
+Normal.args = {
+  size: "large",
+  showText: true,
+  buttonLabel: "test",
+  // padding: theme.paddings,
+  textColor: "#000000",
+  buttonColor: "#f9f9f9"
+};

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.f1ebae9b.iframe.bundle.js"></script><script src="vendors~main.5eab66d3.iframe.bundle.js"></script><script src="main.e382d866.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.f1ebae9b.iframe.bundle.js"></script><script src="vendors~main.b4186832.iframe.bundle.js"></script><script src="main.66955578.iframe.bundle.js"></script></body></html>