@sikka/hawa 0.0.37 → 0.0.41

package/src/theme/HawaTheme.js

@@ -6,20 +6,27 @@ 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: [
           {
-            props: { variants: "card" },
+            props: { variant: "card" },
             style: {
               backgroundColor: primaryLayoutColor,
               padding: 15,
@@ -75,11 +82,11 @@ export const CreateHawaTheme = (
       MuiTableCell: {
         variants: [
           {
-            props: { variants: "borderedLeft" },
+            props: { variant: "borderedLeft" },
             style: { borderLeft: "1px solid #dddddd" }
           },
           {
-            props: { variants: "borderedRight" },
+            props: { variant: "borderedRight" },
             style: { borderRight: "1px solid #dddddd" }
           }
         ]
@@ -99,7 +106,7 @@ export const CreateHawaTheme = (
       MuiFormControl: {
         variants: [
           {
-            props: { variants: "hawa" },
+            props: { variant: "hawa" },
             style: { width: "100%" }
           }
         ]
@@ -108,7 +115,7 @@ export const CreateHawaTheme = (
         styleOverrides: {},
         variants: [
           {
-            props: { variants: "validation" },
+            props: { variant: "validation" },
             style: {
               textAlign: "start",
               whiteSpace: "nowrap",
@@ -158,12 +165,23 @@ export const CreateHawaTheme = (
         },
         variants: [
           {
-            props: { variants: "unscrollable" },
+            props: { variant: "unscrollable" },
             style: {
               "& input::-webkit-outer-spin-button, & input::-webkit-inner-spin-button":
                 { display: "none" },
               "& input[type=number]": { MozAppearance: "textfield" }
             }
+          },
+          {
+            props: { variant: "pin" },
+            style: {
+              height: 60,
+              width: 50,
+              textAlign: "center",
+              "& input::-webkit-outer-spin-button, & input::-webkit-inner-spin-button":
+                { display: "none" },
+              "& input[type=number]": { MozAppearance: "textfield" }
+            }
           }
         ]
       },
@@ -190,7 +208,7 @@ export const CreateHawaTheme = (
         },
         variants: [
           {
-            props: { variants: "drop-area" },
+            props: { variant: "drop-area" },
             style: {
               display: "flex",
               flexDirection: "column",
@@ -209,7 +227,7 @@ export const CreateHawaTheme = (
             }
           },
           {
-            props: { variants: "page-controls" },
+            props: { variant: "page-controls" },
             style: {
               background: "none",
               fontSize: "2rem",
@@ -219,7 +237,7 @@ export const CreateHawaTheme = (
             }
           },
           {
-            props: { variants: "auth" },
+            props: { variant: "auth" },
             style: {
               backgroundColor: primaryLayoutColor,
               fontSize: "2rem",
@@ -228,12 +246,12 @@ export const CreateHawaTheme = (
             }
           },
           {
-            props: { variants: "plain" },
+            props: { variant: "plain" },
             style: { background: "none" }
           },
 
           {
-            props: { variants: "panelTabs" },
+            props: { variant: "panelTabs" },
             style: {
               display: "flex",
               flexDirection: "row",
@@ -247,7 +265,7 @@ export const CreateHawaTheme = (
             }
           },
           {
-            props: { variants: "pricingTabs" },
+            props: { variant: "pricingTabs" },
             style: {
               display: "flex",
               flexDirection: "row",
@@ -261,7 +279,7 @@ export const CreateHawaTheme = (
             }
           },
           {
-            props: { variants: "inSettings" },
+            props: { variant: "inSettings" },
             style: {
               display: "flex",
               flexDirection: "row",
@@ -275,7 +293,7 @@ export const CreateHawaTheme = (
             }
           },
           {
-            props: { variants: "inPricing" },
+            props: { variant: "inPricing" },
             style: {
               display: "flex",
               flexDirection: "row",
@@ -293,7 +311,7 @@ export const CreateHawaTheme = (
             }
           },
           {
-            props: { variants: "settingsRow" },
+            props: { variant: "settingsRow" },
             style: {
               display: "flex",
               flexDirection: "row",
@@ -308,7 +326,7 @@ export const CreateHawaTheme = (
             }
           },
           {
-            props: { variants: "plan-card" },
+            props: { variant: "plan-card" },
             style: {
               display: "flex",
               flexDirection: "column",
@@ -324,7 +342,7 @@ export const CreateHawaTheme = (
             }
           },
           {
-            props: { variants: "selected-plan-card" },
+            props: { variant: "selected-plan-card" },
             style: {
               display: "flex",
               flexDirection: "column",
@@ -340,7 +358,7 @@ export const CreateHawaTheme = (
             }
           },
           {
-            props: { variants: "plan-header" },
+            props: { variant: "plan-header" },
             style: {
               display: "flex",
               flexDirection: "column",
@@ -355,7 +373,7 @@ export const CreateHawaTheme = (
             }
           },
           {
-            props: { variants: "card-container" },
+            props: { variant: "card-container" },
             style: {
               display: "flex",
               flexDirection: "column",
@@ -366,7 +384,7 @@ export const CreateHawaTheme = (
             }
           },
           {
-            props: { variants: "card-header" },
+            props: { variant: "card-header" },
             style: {
               display: "flex",
               flexDirection: "column",
@@ -382,7 +400,7 @@ export const CreateHawaTheme = (
             }
           },
           {
-            props: { variants: "card-content" },
+            props: { variant: "card-content" },
             style: {
               display: "flex",
               flexDirection: "column",
@@ -397,7 +415,7 @@ export const CreateHawaTheme = (
             }
           },
           {
-            props: { variants: "card-actions" },
+            props: { variant: "card-actions" },
             style: {
               display: "flex",
               flexDirection: "row",
@@ -407,7 +425,7 @@ export const CreateHawaTheme = (
             }
           },
           {
-            props: { variants: "selected-plan-header" },
+            props: { variant: "selected-plan-header" },
             style: {
               display: "flex",
               flexDirection: "column",
@@ -421,7 +439,7 @@ export const CreateHawaTheme = (
             }
           },
           {
-            props: { variants: "pricing" },
+            props: { variant: "pricing" },
             style: {
               display: "flex",
               flexDirection: "row",
@@ -433,7 +451,7 @@ export const CreateHawaTheme = (
             }
           },
           {
-            props: { variants: "appbar" },
+            props: { variant: "appbar" },
             style: {
               boxShadow: "none",
               display: "flex",
@@ -464,7 +482,7 @@ export const CreateHawaTheme = (
         },
         variants: [
           {
-            props: { variants: "layout" },
+            props: { variant: "layout" },
             style: {
               backgroundColor: primaryLayoutColor,
               "&:hover": {
@@ -474,7 +492,7 @@ export const CreateHawaTheme = (
             }
           },
           {
-            props: { variants: "color-picker" },
+            props: { variant: "color-picker" },
             style: ({ theme }) => ({
               ...{
                 height: 40,
@@ -491,21 +509,21 @@ export const CreateHawaTheme = (
             })
           },
           {
-            props: { variants: "danger" },
-            style: ({ palette }) => ({
+            props: { variant: "danger" },
+            style: ({ theme }) => ({
               ...{
-                backgroundColor: palette.error.main,
+                backgroundColor: theme.palette.error.main,
                 color: primaryActionTextColor,
                 borderRadius: allBorderRadius,
                 "&:hover": {
-                  backgroundColor: darken(palette.error.main, 0.5),
+                  backgroundColor: darken(theme.palette.error.main, 0.5),
                   color: "white"
                 }
               }
             })
           },
           {
-            props: { variants: "last" },
+            props: { variant: "last" },
             style: {
               backgroundColor: primaryActionColor,
               color: primaryActionTextColor,
@@ -518,7 +536,7 @@ export const CreateHawaTheme = (
             }
           },
           {
-            props: { variants: "withLogo" },
+            props: { variant: "withLogo" },
             style: {
               textTransform: "none",
               border: `1px solid ${darken(primaryActionColor, 0.1)}`,
@@ -532,7 +550,7 @@ export const CreateHawaTheme = (
             }
           },
           {
-            props: { variants: "selected" },
+            props: { variant: "selected" },
             style: {
               display: "flex",
               flexDirection: "row",
@@ -550,7 +568,7 @@ export const CreateHawaTheme = (
             }
           },
           {
-            props: { variants: "unselected" },
+            props: { variant: "unselected" },
             style: {
               display: "flex",
               flexDirection: "row",
@@ -563,7 +581,7 @@ export const CreateHawaTheme = (
             }
           },
           {
-            props: { variants: "adaptive-dark" },
+            props: { variant: "adaptive-dark" },
             style: {
               backgroundColor: primaryActionColor,
               height: 40,
@@ -576,7 +594,7 @@ export const CreateHawaTheme = (
             }
           },
           {
-            props: { variants: "adaptive-light" },
+            props: { variant: "adaptive-light" },
             style: {
               display: "flex",
               flexDirection: "row",
@@ -641,11 +659,11 @@ export const CreateHawaTheme = (
         },
         variants: [
           {
-            props: { variants: "inContainer" },
+            props: { variant: "inContainer" },
             style: { color: "black", borderRadius: allBorderRadius }
           }
           // {
-          //   props: { variants: "offline" },
+          //   props: { variant: "offline" },
           //   style: ({ theme }) => ({
           //     ...{
           //       backgroundColor: lighten(theme.palette.error.main, 0.8),
@@ -667,7 +685,7 @@ export const CreateHawaTheme = (
         },
         variants: [
           {
-            props: { variants: "clicked" },
+            props: { variant: "clicked" },
             style: { backgroundColor: primaryActionColor, color: "white" }
           }
         ]
@@ -675,7 +693,7 @@ export const CreateHawaTheme = (
       MuiToolbar: {
         variants: [
           {
-            props: { variants: "appbar" },
+            props: { variant: "appbar" },
             style: {
               color: "black",
               height: 60,
@@ -692,7 +710,7 @@ export const CreateHawaTheme = (
         styleOverrides: { root: { boxShadow: "none", color: "black" } },
         variants: [
           {
-            props: { variants: "appbar" },
+            props: { variant: "appbar" },
             style: {
               color: "black",
               margin: 0,
@@ -701,9 +719,36 @@ export const CreateHawaTheme = (
             }
           }
         ]
+      },
+
+      MuiTextField: {
+        styleOverrides: {
+          root: {
+            backgroundColor: "white",
+            paddingRight: 10,
+            paddingLeft: 10,
+            borderRadius: allBorderRadius,
+            "&:hover": { outline: `1px solid ${primaryActionColor}` },
+            "&:focus": { outline: `1px solid ${primaryActionColor}` }
+          }
+        },
+        variants: [
+          {
+            props: { variant: "pinInput" },
+            style: {
+              height: 60,
+              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,
@@ -878,5 +923,5 @@ export const UpdateHawaTheme = (
   ].backgroundColor = primaryActionColor;
   theme.components.MuiListItemButton.variants[0].style.backgroundColor =
     primaryActionColor;
-    return theme;
+  return theme;
 };

package/src/util.js

@@ -16,5 +16,15 @@ const getTextColor = (backColor) => {
     return "#ffffff";
   }
 };
+const replaceAt = function (string, index, replacement) {
+  // if (replacement == "" || replacement == " ") {
+  //   return (
+  //     string.substring(0, index) +
+  //     string.substring(index + replacement.length )
+  //   );
+  // }
+  const replaced = string.substring(0, index) + replacement + string.substring(index + 1)
+  return replaced
+};
 
-export { hexToRgb, getTextColor };
+export { hexToRgb, getTextColor, replaceAt };

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.1a0e1257.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>