@sikka/hawa 0.0.38 → 0.0.40

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/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/theme/HawaTheme.js

@@ -6,15 +6,22 @@ export const CreateHawaTheme = (
   primaryActionColor,
   primaryLayoutColor,
   primaryActionTextColor,
-  mainFont
-) =>
-  createTheme({
+  mainFont,
+  breakpointsValues
+) => {
+  console.log("achra  achraf", breakpointsValues);
+  return createTheme({
     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: [
@@ -147,13 +154,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 +171,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: {
@@ -715,34 +721,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.40879e99.iframe.bundle.js"></script><script src="main.066fa5c5.iframe.bundle.js"></script></body></html>