@sikka/hawa 0.0.38 → 0.0.42

package/src/blocks/AuthForms/CodeConfirmation.js

@@ -0,0 +1,94 @@
+import React from "react";
+import { HawaTextField, HawaLogoButton, HawaAlert } from "../../elements";
+import { Controller, useForm } from "react-hook-form";
+import InputAdornment from "@mui/material/InputAdornment";
+import EmailIcon from "@mui/icons-material/MailOutline";
+import PasswordIcon from "@mui/icons-material/HttpsOutlined";
+import Container from "@mui/material/Container";
+import Typography from "@mui/material/Typography";
+import Button from "@mui/material/Button";
+import PropTypes from "prop-types";
+import Divider from "@mui/material/Divider";
+
+export const CodeConfirmation = (props) => {
+  const methods = useForm();
+  const {
+    formState: { errors },
+    handleSubmit,
+    control
+  } = methods;
+
+  return (
+    <Container
+      maxWidth="xs"
+      variant="auth"
+      style={{ direction: props.lang === "ar" ? "rtl" : "ltr" }}
+    >
+      {props.showError && (
+        <HawaAlert
+          title={props.errorTitle}
+          text={props.errorText}
+          severity="error"
+        />
+      )}
+      <form onSubmit={handleSubmit(props.handleSignIn)}>
+        <Controller
+          control={control}
+          name="code"
+          render={({ field }) => (
+            <HawaTextField
+              fullWidth
+              type="number"
+              value={field.value ?? ""}
+              label={props.texts.codeLabel}
+              helperText={errors.email?.message}
+              placeholder={props.texts.codePlaceholder}
+              // startAdornment={
+              //   <InputAdornment position="start">
+              //     <EmailIcon />
+              //   </InputAdornment>
+              // }
+              {...field}
+            />
+          )}
+          rules={{
+            required: props.texts.codeRequiredText
+          }}
+        />
+
+        <Button type="submit" fullWidth variant="last">
+          {props.texts.confirmText}
+        </Button>
+      </form>
+    </Container>
+  );
+};
+CodeConfirmation.propTypes = {
+  /**
+   *  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,
+    confirmText: PropTypes.string,
+    googleButtonLabel: PropTypes.string,
+    githubButtonLabel: PropTypes.string,
+    twitterButtonLabel: PropTypes.string
+  }),
+  viaGoogle: PropTypes.bool,
+  viaGithub: PropTypes.bool,
+  viaTwitter: PropTypes.bool,
+  handleSignIn: PropTypes.func,
+  handleRouteToSignUp: PropTypes.func,
+  handleGoogleSignIn: PropTypes.func,
+  handleGithubSignIn: PropTypes.func,
+  handleTwitterSignIn: PropTypes.func
+};

package/src/blocks/AuthForms/SignInForm.js

@@ -20,8 +20,8 @@ export const SignInForm = (props) => {
 
   return (
     <Container
-      maxWidth="xs"
       variant="auth"
+      maxWidth="sm"
       style={{ direction: props.lang === "ar" ? "rtl" : "ltr" }}
     >
       {props.showError && (

package/src/blocks/AuthForms/SignInPhone.js

@@ -0,0 +1,43 @@
+import { Button, Container } from "@mui/material";
+import { useState } from "react";
+import { Controller, useForm } from "react-hook-form";
+import HawaPhoneInput from "../../elements/HawaPhoneInput";
+
+export const SignInPhone = (props) => {
+  const [phone, setPhone] = useState("");
+  const methods = useForm();
+  const {
+    formState: { errors },
+    handleSubmit,
+    control
+  } = methods;
+  return (
+    <Container
+      maxWidth="xs"
+      variant="auth"
+      style={{ direction: props.lang === "ar" ? "rtl" : "ltr" }}
+    >
+      <form onSubmit={handleSubmit(props.onSubmit)}>
+        <Controller
+          control={control}
+          name="phone"
+          render={({ field }) => (
+            <HawaPhoneInput
+              country={props.country ?? ""}
+              label={props.label ?? ""}
+              onChange={(e) => {
+                props.onChange(e);
+                setPhone(e);
+              }}
+              value={props.value ?? props.value}
+              {...field}
+            />
+          )}
+        />
+        <Button fullWidth type="submit" variant="last">
+          {props.SignInButtonText}
+        </Button>
+      </form>
+    </Container>
+  );
+};

package/src/blocks/AuthForms/SignUpForm.js

@@ -51,6 +51,7 @@ export const SignUpForm = (props) => {
                     <PersonIcon />
                   </InputAdornment>
                 }
+                {...field}
               />
             )}
             rules={{
@@ -74,6 +75,7 @@ export const SignUpForm = (props) => {
                     <EmailIcon />
                   </InputAdornment>
                 }
+                {...field}
               />
             )}
             rules={{

package/src/blocks/AuthForms/index.js

@@ -2,3 +2,5 @@ export * from "./NewPasswordForm.js";
 export * from "./ResetPasswordForm.js";
 export * from "./SignUpForm.js";
 export * from "./SignInForm.js";
+export * from "./CodeConfirmation.js";
+export * from "./SignInPhone";

package/src/blocks/Misc/NotFound.js

@@ -0,0 +1,47 @@
+import React from "react";
+import Container from "@mui/material/Container";
+import PropTypes from "prop-types";
+import Typography from "@mui/material/Typography";
+import { Button } from "@mui/material";
+
+export const NotFound = (props) => {
+  return (
+    <div
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center"
+      }}
+    >
+      <Typography variant="h2" fontWeight={700}>
+        404
+      </Typography>
+      <Typography variant="h5" fontWeight={700}>
+        Page Not Found
+      </Typography>
+      <Container
+        style={{
+          maxWidth: 300,
+          marginTop: 10,
+          direction: props.lang === "ar" ? "rtl" : "ltr"
+        }}
+        maxWidth="xs"
+      >
+        <Typography textAlign={"center"}>
+          If you're lost please contact us help@sikka.io{" "}
+        </Typography>
+        <Button style={{ marginTop: 5 }} variant="contained">
+          Home
+        </Button>
+      </Container>
+    </div>
+  );
+};
+NotFound.propTypes = {
+  /**
+   *  An object of all the texts in the blocks
+   */
+  texts: PropTypes.shape({
+    emailLabel: PropTypes.string
+  })
+};

package/src/blocks/Misc/index.js

@@ -0,0 +1 @@
+export * from "./NotFound.js";

package/src/blocks/Pricing/PricingPlans.js

@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 import Container from "@mui/material/Container";
-import { HawaPricingCard, HawaRadio } from "../../elements";
+import { HawaPricingCard, HawaPanelTabs } from "../../elements";
 import PropTypes from "prop-types";
 
 export const PricingPlans = (props) => {
@@ -16,7 +16,7 @@ export const PricingPlans = (props) => {
           marginBottom: 10
         }}
       >
-        <HawaRadio
+        <HawaPanelTabs
           location="inPricing"
           handleChange={(e) => setCurrentCycle(e)}
           defaultValue="monthly"
@@ -28,7 +28,7 @@ export const PricingPlans = (props) => {
           ]}
         />
 
-        <HawaRadio
+        <HawaPanelTabs
           location="inPricing"
           handleChange={(e) => {
             setCurrentCurrency(e);

package/src/elements/AdaptiveButton.js

@@ -27,5 +27,5 @@ export const AdaptiveButton = (props) => {
 AdaptiveButton.propTypes = {
   buttonText: PropTypes.string,
   onClick: PropTypes.func,
-  showText: PropTypes.bool
+  showText: PropTypes.bool,
 };

package/src/elements/HawaChip.js

@@ -0,0 +1,6 @@
+import React from "react";
+import Chip from "@mui/material/Chip";
+
+export const HawaChip = (props) => {
+  return <Chip {...props} />;
+};

package/src/elements/{HawaRadio.js → HawaPanelTabs.js}

@@ -3,7 +3,7 @@ import Button from "@mui/material/Button";
 import Container from "@mui/material/Container";
 import PropTypes from "prop-types";
 
-export const HawaRadio = (props) => {
+export const HawaPanelTabs = (props) => {
   const [value, setValue] = useState(props.defaultValue);
   return (
     <Container variant={props.location || "panelTabs"}>
@@ -29,7 +29,8 @@ export const HawaRadio = (props) => {
     </Container>
   );
 };
-HawaRadio.propTypes = {
+
+HawaPanelTabs.propTypes = {
   lang: PropTypes.string,
   options: PropTypes.arrayOf(
     PropTypes.shape({

package/src/elements/HawaPhoneInput.js

@@ -0,0 +1,48 @@
+import PhoneInput from "react-phone-input-2";
+import "react-phone-input-2/lib/material.css";
+import { useTheme } from "@mui/system";
+import { InputLabel } from "@mui/material";
+
+export default function HawaPhoneInput(props) {
+  const {
+    country,
+    onChange,
+    value,
+    onlyContries,
+    preferredCountries,
+    inputProps,
+    required,
+    placeholder,
+    name,
+    label,
+    // onChange,
+    ...rest
+  } = props;
+
+  const theme = useTheme();
+  return (
+    <div>
+      {label && <InputLabel>{props.label}</InputLabel>}
+      <PhoneInput
+        country={country ?? null}
+        onChange={(e) => onChange(e)}
+        value={value ?? value}
+        onlyCountries={onlyContries?.length > 0 ? onlyContries : []}
+        preferredCountries={
+          preferredCountries?.length > 0 ? preferredCountries : []
+        }
+        inputProps={{
+          required: required ?? false,
+          name: name ?? null
+        }}
+        specialLabel={""}
+        placeholder={placeholder ?? ""}
+        inputStyle={{
+          width: "100%",
+          borderRadius: theme.allBorderRadius
+        }}
+        {...rest}
+      />
+    </div>
+  );
+}

package/src/elements/HawaSettingsRow.js

@@ -4,7 +4,7 @@ import Checkbox from "@mui/material/Checkbox";
 import Container from "@mui/material/Container";
 import { HawaTypography } from "./HawaTypography";
 import { HawaTextField } from "./HawaTextField";
-import { HawaRadio } from "./HawaRadio";
+import { HawaPanelTabs } from "./HawaPanelTabs";
 import { HawaSwitch } from "./HawaSwitch";
 import { HawaColorPicker } from "./HawaColorPicker";
 import { HawaRange } from "./HawaRange";
@@ -19,7 +19,7 @@ export const HawaSettingsRow = (props) => {
       {props.settingsType === "range" && <HawaRange {...props} />}
       {props.settingsType === "color" && <HawaColorPicker {...props} />}
       {props.settingsType === "radio" && (
-        <HawaRadio location="inSettings" {...props} />
+        <HawaPanelTabs location="inSettings" {...props} />
       )}
     </Container>
   );

package/src/elements/PinInput.js

@@ -116,6 +116,14 @@ export const HawaPinInputField = (props) => {
       id={"pinInput" + props.index}
       defaultValue={props.defaultValue || ""}
       variant="pin"
+      onKeyDown={(e) => {
+        if (e.key === "Backspace") {
+          let i = document.getElementById("pinInput" + (props.index - 1));
+          if (e) {
+            i.focus();
+          }
+        }
+      }}
       disableUnderline
       inputProps={{ maxLength: 1 }}
       onChange={(e) => {
@@ -128,7 +136,7 @@ export const HawaPinInputField = (props) => {
           e.target.value != ""
         ) {
           let i = document.getElementById("pinInput" + (props.index + 1));
-          if (i) {
+          if (i != null) {
             i.focus();
           }
         }

package/src/elements/index.js

@@ -2,7 +2,8 @@ export * from "./AdaptiveButton";
 export * from "./ActionButton";
 export * from "./HawaSnackbar";
 export * from "./HawaCheckbox";
-export * from "./HawaRadio";
+export * from "./HawaPanelTabs";
+export * from "./HawaChip";
 export * from "./HawaItemCard";
 export * from "./HawaPricingCard";
 export * from "./HawaSettingsRow";
@@ -11,8 +12,6 @@ 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";
@@ -21,3 +20,4 @@ export * from "./HawaSearchBar";
 export * from "./HawaAccordian";
 export * from "./DragDropImages";
 export * from "./DraggableCard";
+export * from "./HawaPhoneInput"

package/src/index.js

@@ -2,3 +2,4 @@ export * from "./blocks";
 export * from "./elements";
 export * from "./layout";
 export * from "./theme";
+export * from "./Hooks"

package/src/layout/HawaAppBar.js

@@ -22,7 +22,6 @@ export const HawaAppBar = (props) => {
   const handleCloseNavMenu = () => setAnchorElNav(null);
   const handleCloseUserMenu = () => setAnchorElUser(null);
 
-  console.log("theme is ", theme);
   return (
     <AppBar position="static" variant="appbar">
       <Container variant="appbar">

package/src/styles.css

@@ -1,3 +1,5 @@
+
+
 .input {
   color: black;
   background-color: var(--light);
@@ -51,7 +53,56 @@
   border-width: 2px;
   cursor: pointer;
 }
-input[type=number]::-webkit-inner-spin-button,
-input[type=number]::-webkit-outer-spin-button { 
-	-webkit-appearance: none;
+input[type="number"]::-webkit-inner-spin-button,
+input[type="number"]::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+}
+
+.phoneInput {
+  padding-top: 10px !important;
+  padding-bottom: 10px !important;
+  padding-right: 10px !important;
+  padding-left: 60px !important;
+  border-radius: var(--borderR) !important;
+  border: none !important;
+  height: 100% !important;
+  width: auto !important;
+}
+
+.phoneInput:hover {
+  border: none;
+  outline-color: transparent;
+}
+
+.phoneInput:focus {
+  /* border: 1px solid !important; */
+  /* border-color: #7f62fc !important; */
+  outline: 1px solid !important;
+  outline-color: #7f62fc !important;
+}
+.phoneInputContainer {
+  height: 43px !important;
+  width: 100% !important;
+  background-color: red !important;
+  max-width: 400px !important;
+  border-radius: var(--borderR) !important;
+}
+
+.phoneInputButton {
+  height: 100% !important;
+  border-radius: var(--borderR) !important;
+  background: none !important;
+}
+
+.react-tel-input .selected-flag {
+  /* background-color: red !important; */
+  /* height: 100% !important; */
+  border-radius: var(--borderR) !important;
+  border: none;
+}
+.phoneInputButton:focus {
+  background: none !important;
+  /* background-color: red !important; */
+  /* height: 100% !important; */
+  border-radius: var(--borderR) !important;
 }

package/src/theme/HawaTheme.js

@@ -1,20 +1,34 @@
 import { createTheme } from "@mui/material";
 import { darken, lighten } from "@mui/material";
 
-export const CreateHawaTheme = (
-  allBorderRadius,
-  primaryActionColor,
-  primaryLayoutColor,
-  primaryActionTextColor,
-  mainFont
-) =>
-  createTheme({
+export const CreateHawaTheme = (optionsObject, breakpointsValues) => {
+  let allBorderRadius = optionsObject.borderRadius;
+  let primaryDangerColor = optionsObject.dangerColor;
+  let primaryActionColor = optionsObject.actionColor;
+  let primaryActionTextColor = optionsObject.actionTextColor;
+  let primaryLayoutColor = optionsObject.layoutColor;
+  let mainFont = optionsObject.font;
+
+  console.log("achra  achraf", breakpointsValues);
+  return createTheme({
+    allBorderRadius: optionsObject.borderRadius,
+    primaryDangerColor: optionsObject.dangerColor,
+    primaryActionColor: optionsObject.actionColor,
+    primaryActionTextColor: optionsObject.actionTextColor,
+    primaryLayoutColor: optionsObject.layoutColor,
+    mainFont: optionsObject.font,
+    test: "something",
     typography: { fontFamily: ["IBMPlex", "Roboto"].join(",") },
     palette: {
       primary: {
         main: primaryActionColor
       }
     },
+    breakpoints: {
+      values: breakpointsValues
+        ? breakpointsValues
+        : { xs: 0, sm: 600, md: 900, lg: 1200, xl: 1536 }
+    },
     components: {
       MuiStack: {
         variants: [
@@ -23,8 +37,6 @@ export const CreateHawaTheme = (
             style: {
               backgroundColor: primaryLayoutColor,
               padding: 15,
-              // paddingLeft: 5,
-              // paddingRight: 5,
               borderRadius: allBorderRadius
             }
           }
@@ -137,7 +149,15 @@ export const CreateHawaTheme = (
             padding: 10,
             ":focus": { border: "none" }
           }
-        }
+        },
+        variants: [
+          {
+            props: { variant: "phone" },
+            style: {
+              backgroundColor: "red"
+            }
+          }
+        ]
       },
       MuiInput: {
         styleOverrides: {
@@ -147,13 +167,13 @@ export const CreateHawaTheme = (
             paddingLeft: 10,
             borderRadius: allBorderRadius,
             "&:hover": { outline: `1px solid ${primaryActionColor}` },
-            "&:focus": { outline: `1px solid ${primaryActionColor}` },
+            "&:focus": { outline: `1px solid ${primaryActionColor}` }
           },
           input: {
             margin: 0,
             border: "none",
             padding: 10,
-            ":focus": { border: "none" },
+            ":focus": { border: "none" }
           }
         },
         variants: [
@@ -164,19 +184,18 @@ export const CreateHawaTheme = (
                 { display: "none" },
               "& input[type=number]": { MozAppearance: "textfield" }
             }
-          }, 
+          },
           {
-            props : {variant : "pin"},
-            style:{
+            props: { variant: "pin" },
+            style: {
               height: 60,
-              width : 50,
-              textAlign:"center",
+              width: 50,
+              textAlign: "center",
               "& input::-webkit-outer-spin-button, & input::-webkit-inner-spin-button":
                 { display: "none" },
               "& input[type=number]": { MozAppearance: "textfield" }
-            },
+            }
           }
-          
         ]
       },
       MuiDialog: {
@@ -197,7 +216,8 @@ export const CreateHawaTheme = (
             borderRadius: allBorderRadius,
             paddingLeft: 20,
             paddingRight: 20,
-            padding: 20
+            padding: 20,
+            maxWidth: 600
           }
         },
         variants: [
@@ -715,34 +735,34 @@ export const CreateHawaTheme = (
         ]
       },
 
-      MuiTextField : {
-        styleOverrides:{
+      MuiTextField: {
+        styleOverrides: {
           root: {
             backgroundColor: "white",
             paddingRight: 10,
             paddingLeft: 10,
             borderRadius: allBorderRadius,
             "&:hover": { outline: `1px solid ${primaryActionColor}` },
-            "&:focus": { outline: `1px solid ${primaryActionColor}` },
-          },
+            "&:focus": { outline: `1px solid ${primaryActionColor}` }
+          }
         },
         variants: [
           {
-            props : {variant : "pinInput"},
-            style:{
+            props: { variant: "pinInput" },
+            style: {
               height: 60,
-              width : 50,
-              textAlign:"center",
+              width: 50,
+              textAlign: "center",
               "& input::-webkit-outer-spin-button, & input::-webkit-inner-spin-button":
                 { display: "none" },
               "& input[type=number]": { MozAppearance: "textfield" }
-            },
+            }
           }
         ]
       }
-
     }
   });
+};
 
 export const UpdateHawaTheme = (
   theme,

package/storybook-static/iframe.html

@@ -361,4 +361,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.9be73be4.iframe.bundle.js"></script><script src="vendors~main.826e89a1.iframe.bundle.js"></script><script src="main.2a7fa838.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.9be73be4.iframe.bundle.js"></script><script src="vendors~main.55d84da5.iframe.bundle.js"></script><script src="main.73b8ca43.iframe.bundle.js"></script></body></html>