@sikka/hawa 0.0.12 → 0.0.15

package/src/{ui → elements}/index.js

@@ -1,8 +1,10 @@
 export * from "./AdaptiveButton";
 export * from "./ActionButton";
+export * from "./HawaListItem";
+export * from "./HawaAppBar";
 export * from "./HawaCheckbox";
 export * from "./HawaRadio";
-
+export * from "./HawaPricingCard";
 export * from "./HawaSettingsRow";
 export * from "./HawaLogoButton";
 export * from "./HawaButton";

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/Account/UserSettings.stories.js

@@ -1,5 +1,6 @@
 import React from "react";
 import { UserSettingsForm } from "../../../blocks/Account";
+import { HawaSettingsRow } from "../../../elements";
 
 export default {
   title: "Blocks/Account/User Settings",
@@ -11,9 +12,42 @@ export default {
     }
   }
 };
-
 export const UserSettings = (args) => {
-  return <UserSettingsForm {...args} />;
+  return (
+    <UserSettingsForm {...args}>
+      <HawaSettingsRow settingsType="checkbox" settingsLabel="Hide Watermark" />
+      <HawaSettingsRow
+        settingsType="text"
+        placeholder="Your handle"
+        settingsLabel="Custom Handle"
+      />
+      <HawaSettingsRow
+        handleChange={(e) => console.log("changing to ", e)}
+        settingsType="radio"
+        defaultValue="sar"
+        options={[
+          { value: "sar", label: "SAR" },
+          { value: "usd", label: "USD" }
+        ]}
+        settingsLabel="Currency"
+      />
+      <HawaSettingsRow
+        handleChange={(e) => console.log("changing to ", e)}
+        settingsType="radio"
+        defaultValue="en"
+        options={[
+          { value: "en", label: "English" },
+          { value: "ar", label: "Arabic" }
+        ]}
+        settingsLabel="Language"
+      />
+        <HawaSettingsRow
+        settingsType="boolean"
+        placeholder="Your handle"
+        settingsLabel="Show Analytics"
+      />
+    </UserSettingsForm>
+  );
 };
 UserSettings.args = {
   theme: "primary",

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

@@ -0,0 +1,63 @@
+import React from "react";
+import { PricingPlans } from "../../../blocks/Pricing/PricingPlans";
+
+export default {
+  title: "Blocks/Pricing/In Billing",
+  component: [PricingPlans],
+  argTypes: {
+    lang: {
+      options: ["ar", "en"],
+      control: { type: "select" }
+    }
+  },
+  args: {
+    lang: "ar"
+  }
+};
+
+export const InBilling = (args) => {
+  return (
+    <PricingPlans
+      {...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_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_ar: ["واحد", "اثنين", "ثلاثة"]
+        },
+        {
+          title: "Pro",
+          title_ar: "تجريبي",
+          subtitle: "For professionals",
+          subtitle_ar: "للعرب",
+          price: 30,
+          currency: "SAR",
+          cycleText: "Monthly",
+          buttonText: "Select Plan",
+          features: ["one", "two", "three"],
+          features_ar: ["واحد", "اثنين", "ثلاثة"]
+        }
+      ]}
+    />
+  );
+};

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

@@ -0,0 +1,63 @@
+import React from "react";
+import { PricingPlans } from "../../../blocks/Pricing/PricingPlans";
+
+export default {
+  title: "Blocks/Pricing/In Landing",
+  component: [PricingPlans],
+  argTypes: {
+    lang: {
+      options: ["ar", "en"],
+      control: { type: "select" }
+    }
+  },
+  args: {
+    lang: "ar"
+  }
+};
+
+export const InLanding = (args) => {
+  return (
+    <PricingPlans
+      {...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_ar: ["واحد", "اثنين", "ثلاثة"]
+        },
+        {
+          title: "Intro",
+          title_ar: "تجريبي",
+          subtitle: "For beginners",
+          subtitle_ar: "للعرب",
+          selectedPlan: false,
+          price: 10,
+          currency: "SAR",
+          cycleText: "Monthly",
+          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_ar: ["واحد", "اثنين", "ثلاثة"]
+        }
+      ]}
+    />
+  );
+};

package/src/stories/ElementsStories/AdaptiveButton.stories.js

@@ -0,0 +1,51 @@
+import { Class } from "@mui/icons-material";
+import React from "react";
+import { AdaptiveButton } from "../../elements";
+
+export default {
+  title: "Elements/Buttons/AdaptiveButton",
+  component: AdaptiveButton,
+  argTypes: {
+    buttonText: {
+      control: "text",
+      description: "The button text",
+      table: {
+        defaultValue: { summary: "Click" }
+      }
+    },
+    showText: {
+      control: "boolean",
+      // default: true,
+      description: "Boolean to show or hide the text",
+      table: {
+        defaultValue: { summary: true },
+        type: {
+          summary: "Use Case",
+          detail:
+            "Set this property to true in large screen and false on mobile"
+        }
+      }
+    }
+  },
+  args: {
+    buttonText: "Click"
+  }
+};
+
+const Template = (args) => {
+  return <AdaptiveButton {...args} />;
+};
+
+export const FullButton = Template.bind({});
+FullButton.args = {
+  showText: true,
+  // buttonText: "Full Button",
+  icon: <Class />
+};
+
+export const IconOnly = Template.bind({});
+IconOnly.args = {
+  showText: false,
+  icon: <Class />,
+  buttonText: "test"
+};

package/src/stories/{UIStories → ElementsStories}/Alert.stories.js

@@ -1,6 +1,6 @@
 import React from "react";
 
-import { HawaAlert } from "../../ui";
+import { HawaAlert } from "../../elements";
 
 const Template = (args) => {
   return (

package/src/stories/{UIStories → ElementsStories}/InputLabel.stories.js

@@ -1,5 +1,5 @@
 import { storiesOf } from "@storybook/react";
-import { HawaInputLabel } from "../../ui";
+import { HawaInputLabel } from "../../elements";
 
 export default {
   title: "Components/InputLabel",

package/src/stories/ElementsStories/ItemCard.stories.js

@@ -0,0 +1,18 @@
+import { Container } from "@mui/material";
+import React from "react";
+import { HawaCard } from "../../elements";
+
+export default {
+  title: "Elements/Cards/Items",
+  component: [HawaCard],
+  argTypes: {
+    buttonLabel: {
+      control: "text",
+      description: "The text next to the logo"
+    }
+  }
+};
+
+export const Items = (args) => {
+  return <HawaCard />;
+};

package/src/stories/{UIStories → ElementsStories}/LogoButtons.stories.js

@@ -1,6 +1,6 @@
 import { Container } from "@mui/material";
 import React from "react";
-import { ActionButton, HawaLogoButton } from "../../ui";
+import { ActionButton, HawaLogoButton } from "../../elements";
 
 export default {
   title: "Elements/Buttons/LogoButtons",

package/src/stories/ElementsStories/PricingCard.stories.js

@@ -0,0 +1,91 @@
+import React from "react";
+import { HawaPricingCard } from "../../elements";
+
+export default {
+  title: "Elements/Cards/Pricing",
+  component: [HawaPricingCard],
+  argTypes: {
+    title: {
+      control: "text",
+      description: "The title of the pricing package"
+    },
+    subtitle: {
+      control: "text",
+      description: "The subtitle of the pricing package"
+    },
+    price: {
+      control: "number",
+      description: "The price of the pricing package"
+    },
+    currency: {
+      control: "text",
+      description: "The currency of the price",
+      table: {
+        type: {
+          summary: "Examples",
+          detail: "$, SAR, ريال, دولار"
+        }
+      }
+    },
+    cycleText: {
+      control: "text",
+      description: "The cycle period of the payment",
+      table: {
+        type: {
+          summary: "Examples",
+          detail: "Monthly, Annually, Quarterly, Every 3 Months, Every 6 Months"
+        }
+      }
+    },
+    features: {
+      control: "array",
+      description: "An Array of strings for the package features"
+    },
+    lang: {
+      control: "text",
+      description: "The language of the card to change the direction",
+      table: {
+        type: {
+          summary: "Options",
+          detail: "ar, en"
+        }
+      }
+    },
+    buttonText: {
+      control: "text",
+      description: "The text of the button"
+    }
+  },
+  args: {
+    title: "Pro",
+    subtitle: "For small businesses",
+    price: 300,
+    currency: "$",
+    cycleText: "Monthly",
+    buttonText: "Select Plan"
+  }
+};
+
+export const LTR = (args) => {
+  return (
+    <HawaPricingCard
+      {...args}
+      features={["Unlimited Menus", "Unlimited Items", "Custom Handle"]}
+    />
+  );
+};
+
+export const RTL = (args) => {
+  return (
+    <HawaPricingCard
+      lang="ar"
+      title="الإحترافي"
+      subtitle="للمنشئات الصغيرة"
+      price="300"
+      currency="ريال"
+      cycleText="كل 6 أشهر"
+      buttonText="إختر الباقة"
+      features={["قوائم لا محدودة", "عناصر لا محدودة", "أسم مخصص"]}
+    />
+  );
+};