@sikka/hawa 0.0.37 → 0.0.41

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/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/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/HawaSnackbar.js

@@ -6,27 +6,26 @@ import { IconButton } from "@mui/material";
 import CloseIcon from "@mui/icons-material/Close";
 
 export const HawaSnackbar = (props) => {
-
-  const [position, setPosition] = useState({vertical : "", horizontal : ""});
+  const [position, setPosition] = useState({ vertical: "", horizontal: "" });
 
   useEffect(() => {
-    if(props.position){
+    if (props.position) {
       const p = props.position.split("-");
-      setPosition({vertical : p[0], horizontal : p[1]});
+      setPosition({ vertical: p[0], horizontal: p[1] });
     }
-  }, [props.position])
+  }, [props.position]);
 
   return (
     <Snackbar
       open={props.open}
-      autoHideDuration={props.duration ? props.duration : null}
+      autoHideDuration={props.autoHide ? props.duration : null}
       onClose={props.handleClose}
       anchorOrigin={position}
       action={
         <>
           <IconButton
             aria-label="close"
-            style={{color: "black"}}
+            style={{ color: "black" }}
             sx={{ p: 0.5 }}
             onClick={props.handleClose}
           >
@@ -35,7 +34,11 @@ export const HawaSnackbar = (props) => {
         </>
       }
     >
-      <Alert icon={false} severity={props.severity} onClose={props.isClosable ? props.handleClose : null}>
+      <Alert
+        icon={false}
+        severity={props.severity}
+        onClose={props.isClosable ? props.handleClose : null}
+      >
         {props.title && <AlertTitle>{props.title}</AlertTitle>}
         {props.text}
       </Alert>

package/src/elements/PinInput.js

@@ -0,0 +1,141 @@
+import {
+  Input,
+  makeStyles,
+  TextField,
+  InputLabel,
+  Typography,
+  Stack
+} from "@mui/material";
+import { object } from "prop-types";
+import React, { useEffect, useState } from "react";
+import { replaceAt } from "../util";
+
+export const HawaPinInput = ({
+  children,
+  type,
+  defaultValue,
+  onChange,
+  onComplete,
+  ...props
+}) => {
+  const [value, setValue] = useState(
+    defaultValue ? defaultValue.split("") : []
+  );
+  const [pinLength, setPinLength] = useState(0);
+
+  useEffect(() => {
+    let length = 0;
+    React.Children.map(children, (child) => {
+      if (
+        React.isValidElement(child) &&
+        child.type?.displayName &&
+        child.type?.displayName === "HawaPinInputField"
+      ) {
+        length++;
+      }
+    });
+    setPinLength(length);
+  }, []);
+
+  const childrenWithProps = React.Children.map(children, (child, index) => {
+    if (React.isValidElement(child)) {
+      if (
+        child.type?.displayName &&
+        child.type?.displayName === "HawaPinInputField" &&
+        defaultValue &&
+        defaultValue[index]
+      ) {
+        return React.cloneElement(child, {
+          type,
+          defaultValue: defaultValue[index],
+          index: index,
+          setValue: setValue,
+          value: value,
+          onChangeAction: (currentValue) => onChange(currentValue),
+          onCompleteAction: (finalValue) => onComplete(finalValue),
+          pinLength: pinLength
+        });
+      }
+      return React.cloneElement(child, {
+        type,
+        setValue: setValue,
+        value: value,
+        index: index,
+        onChangeAction: (currentValue) => onChange(currentValue),
+        onCompleteAction: (finalValue) => onComplete(finalValue),
+        pinLength: pinLength
+      });
+    }
+    return child;
+  });
+
+  useEffect(() => {
+    if (value.length === pinLength) {
+      onComplete(value);
+    }
+  }, [value]);
+
+  return (
+    <div style={props.inForm && { width: "100%" }}>
+      <div style={{ width: props.fullWidth ? "100%" : "fit-content" }}>
+        <div
+          style={{
+            display: "flex",
+            flexDirection: "row",
+            justifyContent: "space-between",
+            alignItems: "center"
+          }}
+        >
+          {props.label && <InputLabel>{props.label}</InputLabel>}
+          {props.helperText && (
+            <Typography
+              style={{ marginBottom: !props.label && 10 }}
+              variant="validation"
+            >
+              {props.helperText}
+            </Typography>
+          )}
+        </div>
+        <Stack
+          direction={"row"}
+          spacing={2}
+          justifyContent="center"
+          alignItems={"center"}
+        >
+          {childrenWithProps}
+        </Stack>
+      </div>
+    </div>
+  );
+};
+
+export const HawaPinInputField = (props) => {
+  return (
+    <Input
+      type={props.type && props.type == "alphanumeric" ? "text" : "number"}
+      id={"pinInput" + props.index}
+      defaultValue={props.defaultValue || ""}
+      variant="pin"
+      disableUnderline
+      inputProps={{ maxLength: 1 }}
+      onChange={(e) => {
+        let newValue = props.value;
+        newValue[props.index] = e.target.value;
+        props.setValue(newValue);
+        props.onChangeAction(newValue.toString().replaceAll(",", ""));
+        if (
+          parseInt(e.target.attributes["maxlength"].value) >= 1 &&
+          e.target.value != ""
+        ) {
+          let i = document.getElementById("pinInput" + (props.index + 1));
+          if (i) {
+            i.focus();
+          }
+        }
+        if (props.value.length === props.pinLength) {
+          props.onCompleteAction(props.value.toString().replaceAll(",", ""));
+        }
+      }}
+    />
+  );
+};

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

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

@@ -51,3 +51,7 @@
   border-width: 2px;
   cursor: pointer;
 }
+input[type=number]::-webkit-inner-spin-button,
+input[type=number]::-webkit-outer-spin-button { 
+	-webkit-appearance: none;
+}

package/src/styles.scss

@@ -676,4 +676,6 @@
     transform: translateY(4px) scale(2.3);
     filter: blur(0.4px);
     position: relative;
-}
+}
+
+