@sikka/hawa 0.0.28 → 0.0.31

package/src/blocks/AuthForms/NewPasswordForm.js

@@ -94,6 +94,23 @@ export const NewPasswordForm = (props) => {
   );
 };
 NewPasswordForm.propTypes = {
-  texts: PropTypes.object,
+  /**
+   *  An object of all the texts in the blocks
+   */
+  texts: PropTypes.shape({
+    emailLabel: PropTypes.string,
+    emailPlaceholder: PropTypes.string,
+    emailRequiredText: PropTypes.string,
+    passwordPlaceholder: PropTypes.string,
+    updatePassword: PropTypes.string,
+    passwordRequiredText: PropTypes.string,
+    passwordLabel: PropTypes.string,
+    confirmPasswordPlaceholder: PropTypes.string,
+    confirmPasswordLabel: PropTypes.string,
+    confirmPasswordRequiredText: PropTypes.string,
+    passwordMatchError: PropTypes.string,
+    forgotPasswordText: PropTypes.string,
+    passwordChanged: PropTypes.string
+  }),
   handleNewPassword: PropTypes.func
 };

package/src/blocks/AuthForms/ResetPasswordForm.js

@@ -60,7 +60,16 @@ export const ResetPasswordForm = (props) => {
   );
 };
 ResetPasswordForm.propTypes = {
-  texts: PropTypes.object,
+  /**
+   *  An object of all the texts in the blocks
+   */
+  texts: PropTypes.shape({
+    emailLabel: PropTypes.string,
+    emailPlaceholder: PropTypes.string,
+    emailRequiredText: PropTypes.string,
+    emailInvalidText: PropTypes.string,
+    resetPassword: PropTypes.string
+  }),
   emailSentText: PropTypes.string,
   handleResetPassword: PropTypes.func
 };

package/src/blocks/AuthForms/SignInForm.js

@@ -143,7 +143,25 @@ export const SignInForm = (props) => {
   );
 };
 SignInForm.propTypes = {
-  texts: PropTypes.object,
+  /**
+   *  An object of all the texts in the blocks
+   */
+  texts: PropTypes.shape({
+    emailLabel: PropTypes.string,
+    emailPlaceholder: PropTypes.string,
+    emailRequiredText: PropTypes.string,
+    emailInvalidText: PropTypes.string,
+    passwordLabel: PropTypes.string,
+    passwordPlaceholder: PropTypes.string,
+    passwordRequiredText: PropTypes.string,
+    forgotPasswordText: PropTypes.string,
+    newUserText: PropTypes.string,
+    signUpText: PropTypes.string,
+    signInText: PropTypes.string,
+    googleButtonLabel: PropTypes.string,
+    githubButtonLabel: PropTypes.string,
+    twitterButtonLabel: PropTypes.string
+  }),
   viaGoogle: PropTypes.bool,
   viaGithub: PropTypes.bool,
   viaTwitter: PropTypes.bool,

package/src/blocks/AuthForms/SignUpForm.js

@@ -163,8 +163,51 @@ export const SignUpForm = (props) => {
   );
 };
 
+// fullNameLabel: "Full Name",
+// fullNamePlaceholder: "Fulan AlFulani",
+// fullNameRequiredText: "Full Name is required",
+// emailLabel: "Email",
+// emailPlaceholder: "Enter your email",
+// emailRequiredText: "Email is required",
+// emailInvalidText: "Invalid email address",
+// passwordLabel: "Password",
+// passwordPlaceholder: "Minimum 8 characters",
+// passwordRequiredText: "Password is required",
+// passwordTooShortText: "Password too short",
+// forgotPasswordText: "Forgot password?",
+// newUserText: "New user?",
+// signUpText: "Sign up",
+// signInText: "Sign in",
+// existingUserText: "Existing User?",
+// googleButtonLabel: "Sign in with Google",
+// githubButtonLabel: "Sign in with Github",
+// twitterButtonLabel: "Sign in with Twitter"
+
 SignUpForm.propTypes = {
-  texts: PropTypes.object,
+  /**
+   *  An object of all the texts in the blocks
+   */
+  texts: PropTypes.shape({
+    fullNameLabel: PropTypes.string,
+    fullNamePlaceholder: PropTypes.string,
+    fullNameRequiredText: PropTypes.string,
+    emailLabel: PropTypes.string,
+    emailPlaceholder: PropTypes.string,
+    emailRequiredText: PropTypes.string,
+    emailInvalidText: PropTypes.string,
+    passwordLabel: PropTypes.string,
+    passwordPlaceholder: PropTypes.string,
+    passwordRequiredText: PropTypes.string,
+    passwordTooShortText: PropTypes.string,
+    forgotPasswordText: PropTypes.string,
+    newUserText: PropTypes.string,
+    signUpText: PropTypes.string,
+    signInText: PropTypes.string,
+    existingUserText: PropTypes.string,
+    googleButtonLabel: PropTypes.string,
+    githubButtonLabel: PropTypes.string,
+    twitterButtonLabel: PropTypes.string
+  }),
   viaGoogle: PropTypes.bool,
   viaGithub: PropTypes.bool,
   viaTwitter: PropTypes.bool,

package/src/blocks/Payment/ChargeWalletForm.js

@@ -67,6 +67,9 @@ export const ChargeWalletForm = (props) => {
 };
 
 ChargeWalletForm.propTypes = {
-  texts: PropTypes.object,
+  texts: PropTypes.shape({
+    amountLabel: PropTypes.string,
+    chargeWallet: PropTypes.string
+  }),
   handleChargeWallet: PropTypes.func
 };

package/src/blocks/Payment/CheckoutForm.js

@@ -246,7 +246,23 @@ export const CheckoutForm = (props) => {
 };
 
 CheckoutForm.propTypes = {
-  texts: PropTypes.object,
+  texts: PropTypes.shape({
+    orderDetails: PropTypes.string,
+    billingAddress: PropTypes.string,
+    payNow: PropTypes.string,
+    emailLabel: PropTypes.string,
+    emailRequiredText: PropTypes.string,
+    emailInvalidText: PropTypes.string,
+    firstNameLabel: PropTypes.string,
+    required: PropTypes.string,
+    lastNameLabel: PropTypes.string,
+    streetAddressLabel: PropTypes.string,
+    buildingNumberLabel: PropTypes.string,
+    cityLabel: PropTypes.string,
+    stateLabel: PropTypes.string,
+    countryLabel: PropTypes.string,
+    zipCodeLabel: PropTypes.string
+  }),
   lang: PropTypes.string,
   countriesList: PropTypes.array,
   products: PropTypes.array,

package/src/blocks/Payment/Confirmation.js

@@ -100,7 +100,30 @@ export const ConfirmationPage = (props) => {
 };
 
 ConfirmationPage.propTypes = {
-  texts: PropTypes.object,
+  texts: PropTypes.shape({
+    print: PropTypes.string,
+    history: PropTypes.string,
+    homePage: PropTypes.string,
+    successMessage: PropTypes.string,
+    orderDetails: PropTypes.string,
+    fasterPaymentNote: PropTypes.string,
+    billingAddress: PropTypes.string,
+    payNow: PropTypes.string,
+    yourOrderNumber: PropTypes.string,
+    emailLabel: PropTypes.string,
+    emailRequiredText: PropTypes.string,
+    emailInvalidText: PropTypes.string,
+    firstNameLabel: PropTypes.string,
+    required: PropTypes.string,
+    lastNameLabel: PropTypes.string,
+    streetAddressLabel: PropTypes.string,
+    buildingNumberLabel: PropTypes.string,
+    cityLabel: PropTypes.string,
+    stateLabel: PropTypes.string,
+    countryLabel: PropTypes.string,
+    zipCodeLabel: PropTypes.string,
+    refundPolicy: PropTypes.string
+  }),
   products: PropTypes.array,
   countriesList: PropTypes.array,
   lang: PropTypes.string,

package/src/blocks/Payment/{PaymentMethod.js → Form/PaymentMethod.js}

@@ -85,7 +85,6 @@ const PaymentMethodButton = (props) => {
       {props.imageURL ? (
         <div
           style={{
-            // backgroundColor: "red",
             width: "50%",
             textAlign: "right",
             paddingRight: 20
@@ -93,14 +92,7 @@ const PaymentMethodButton = (props) => {
         >
           <img
             src={props.imageURL}
-            // src={`https://qawaim-images.s3-ap-southeast-1.amazonaws.com/payments/visa.png`}
-            // alt=""
-            // srcset=""
-            // height={"100%"}
-            // width={"30%"}
             style={{
-              // height: "100%",
-              // aspectRatio: "6/4",
               maxWidth: 70,
               maxHeight: 70,
               height: "auto"
@@ -110,7 +102,6 @@ const PaymentMethodButton = (props) => {
       ) : null}
       <div
         style={{
-          // backgroundColor: "blue",
           width: "50%",
           textAlign: props.imageURL ? "left" : "center"
         }}
@@ -130,7 +121,6 @@ const PaymentMethodButton = (props) => {
 };
 
 PaymentMethod.propTypes = {
-  texts: PropTypes.object,
   wallet: PropTypes.bool,
   handlePaymentMethod: PropTypes.func
 };

package/src/blocks/Pricing/PricingPlans.js

@@ -58,6 +58,20 @@ export const PricingPlans = (props) => {
 };
 
 PricingPlans.propTypes = {
-  plans: PropTypes.array,
+  plans: PropTypes.arrayOf(
+    PropTypes.shape({
+      title: PropTypes.string,
+      title_ar: PropTypes.string,
+      subtitle: PropTypes.string,
+      subtitle_ar: PropTypes.string,
+      price: PropTypes.number,
+      currency: PropTypes.string,
+      cycleText: PropTypes.string,
+      buttonText: PropTypes.string,
+      features: PropTypes.array,
+      features_ar: PropTypes.array,
+      selectedPlan: PropTypes.bool
+    })
+  ),
   lang: PropTypes.string
 };

package/src/elements/HawaAccordian.js

@@ -0,0 +1,28 @@
+import React from "react";
+import ExpandMore from "@mui/icons-material/ExpandMore";
+import Typography from "@mui/material/Typography";
+import Accordion from "@mui/material/Accordion";
+import AccordionSummary from "@mui/material/AccordionSummary";
+import AccordionDetails from "@mui/material/AccordionDetails";
+import PropTypes from "prop-types";
+
+export const HawaAccordian = (props) => {
+  return (
+    <Accordion elevation={0}>
+      <AccordionSummary
+        expandIcon={<ExpandMore />}
+        aria-controls="panel1a-content"
+        id="panel1a-header"
+      >
+        <Typography>{props.title}</Typography>
+      </AccordionSummary>
+      <AccordionDetails>
+        <Typography>{props.content} </Typography>
+      </AccordionDetails>
+    </Accordion>
+  );
+};
+HawaAccordian.propTypes = {
+  title: PropTypes.string,
+  content: PropTypes.string
+};

package/src/elements/HawaAlert.js

@@ -12,8 +12,17 @@ export const HawaAlert = (props) => {
   );
 };
 HawaAlert.propTypes = {
-  severity: PropTypes.string,
+  /**
+   * The severity of the alert. This defines the color and icon used.
+   */
+  severity: PropTypes.oneOf(["error", "info", "success", "warning"]),
+  /**
+   * The title of the alert in bold. Can be left empty.
+   */
   title: PropTypes.string,
+  /**
+   * The text of the alert.
+   */
   text: PropTypes.string,
   hideIcon: PropTypes.bool
 };

package/src/elements/HawaColorPicker.js

@@ -0,0 +1,62 @@
+import { useTheme } from "@mui/system";
+import React from "react";
+import styled from "@emotion/styled";
+import PropTypes from "prop-types";
+
+const ColorInput = styled.input`
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  border: none;
+  cursor: pointer;
+  height: 35px;
+  border-radius: ${(props) => props.borderRadius}px;
+  background-color: ${(props) => props.value};
+  &::-webkit-color-swatch {
+    border: none;
+  }
+  &::-moz-color-swatch {
+    border: none;
+  }
+`;
+const ColorText = styled.input`
+  max-width: 70px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  border: none;
+  //   height: 30px;
+  padding: 10px;
+  border-radius: ${(props) => props.borderRadius}px;
+  &::-webkit-color-swatch {
+    border: none;
+  }
+  &::-moz-color-swatch {
+    border: none;
+  }
+`;
+export const HawaColorPicker = (props) => {
+  const theme = useTheme();
+  return (
+    <div style={{ display: "flex", flexDirection: "row" }}>
+      <ColorText
+        type={"text"}
+        value={props.color}
+        borderRadius={theme.allBorderRadius}
+        onChange={props.handleChange}
+      />
+      <div style={{ width: 10 }} />
+      <ColorInput
+        type={"color"}
+        value={props.color}
+        onChange={props.handleChange}
+        borderRadius={theme.allBorderRadius}
+      />
+    </div>
+  );
+};
+
+HawaColorPicker.propTypes = {
+  color: PropTypes.string,
+  handleChange: PropTypes.func
+};

package/src/elements/HawaLogoButton.js

@@ -106,6 +106,23 @@ export const HawaLogoButton = (props) => {
 
 HawaLogoButton.propTypes = {
   lang: PropTypes.string,
-  logo: 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

@@ -41,5 +41,11 @@ export const HawaPopMenu = (props) => {
 
 HawaPopMenu.propTypes = {
   handleClose: PropTypes.func,
-  menuItems: PropTypes.array
+  menuItems: PropTypes.arrayOf(
+    PropTypes.shape({
+      icon: PropTypes.element,
+      label: PropTypes.string,
+      action: PropTypes.func
+    })
+  )
 };

package/src/elements/HawaRadio.js

@@ -31,7 +31,13 @@ export const HawaRadio = (props) => {
 };
 HawaRadio.propTypes = {
   lang: PropTypes.string,
-  options: PropTypes.array,
+  options: PropTypes.arrayOf(
+    PropTypes.shape({
+      label: PropTypes.string,
+      value: PropTypes.string
+    })
+  ),
   defaultValue: PropTypes.string,
+  handleChange: PropTypes.func,
   location: PropTypes.string
 };

package/src/elements/HawaRange.js

@@ -0,0 +1,26 @@
+import React from "react";
+import Slider from "@mui/material/Slider";
+import Stack from "@mui/material/Stack";
+import PropTypes from "prop-types";
+
+export const HawaRange = (props) => {
+  return (
+    <Stack spacing={2} direction="row" alignItems="center">
+      {props.startElement}
+      <Slider
+        size="small"
+        aria-label="Volume"
+        value={props.value}
+        onChange={props.handleChange}
+      />
+      {props.endElement}
+    </Stack>
+  );
+};
+HawaRange.propTypes = {
+  startElement: PropTypes.element,
+  endElement: PropTypes.element,
+  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,37 @@
 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";
+import { HawaRange } from "./HawaRange";
+
 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 === "range" && <HawaRange {...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,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/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,9 +9,13 @@ export * from "./HawaSettingsRow";
 export * from "./HawaLogoButton";
 export * from "./HawaButton";
 export * from "./HawaSelect";
+export * from "./HawaRange";
 export * from "./HawaTextField";
 export * from "./HawaTextArea";
 export * from "./HawaInputLabel";
 export * from "./HawaTypography";
 export * from "./HawaAlert";
 export * from "./HawaTable";
+export * from "./HawaColorPicker";
+export * from "./HawaSearchBar";
+export * from "./HawaAccordian";