@sikka/hawa 0.0.41 → 0.0.42

package/src/blocks/AuthForms/index.js

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

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/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/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

@@ -12,7 +12,6 @@ export * from "./HawaButton";
 export * from "./HawaSelect";
 export * from "./HawaRange";
 export * from "./HawaTextField";
-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/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,16 +1,23 @@
 import { createTheme } from "@mui/material";
 import { darken, lighten } from "@mui/material";
 
-export const CreateHawaTheme = (
-  allBorderRadius,
-  primaryActionColor,
-  primaryLayoutColor,
-  primaryActionTextColor,
-  mainFont,
-  breakpointsValues
-) => {
+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: {
@@ -30,8 +37,6 @@ export const CreateHawaTheme = (
             style: {
               backgroundColor: primaryLayoutColor,
               padding: 15,
-              // paddingLeft: 5,
-              // paddingRight: 5,
               borderRadius: allBorderRadius
             }
           }
@@ -144,7 +149,15 @@ export const CreateHawaTheme = (
             padding: 10,
             ":focus": { border: "none" }
           }
-        }
+        },
+        variants: [
+          {
+            props: { variant: "phone" },
+            style: {
+              backgroundColor: "red"
+            }
+          }
+        ]
       },
       MuiInput: {
         styleOverrides: {
@@ -203,7 +216,8 @@ export const CreateHawaTheme = (
             borderRadius: allBorderRadius,
             paddingLeft: 20,
             paddingRight: 20,
-            padding: 20
+            padding: 20,
+            maxWidth: 600
           }
         },
         variants: [

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.40879e99.iframe.bundle.js"></script><script src="main.066fa5c5.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>