@sikka/hawa 0.0.82 → 0.0.83

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sikka/hawa",
-  "version": "0.0.82",
+  "version": "0.0.83",
   "description": "UI Kit",
   "main": "lib/index.js",
   "module": "es/index.es.js",

package/src/blocks/AuthForms/SignInForm.js

@@ -88,12 +88,14 @@ export const SignInForm = (props) => {
           )}
           rules={{ required: props.texts.passwordRequiredText }}
         />
-        <div
-          className="text-xs cursor-pointer w-fit mb-3"
-          onClick={props.handleForgotPassword}
-        >
-          {props.texts.forgotPasswordText}
-        </div>
+        {!props.withoutResetPassword && (
+          <div
+            className="text-xs cursor-pointer w-fit mb-3"
+            onClick={props.handleForgotPassword}
+          >
+            {props.texts.forgotPasswordText}
+          </div>
+        )}
         <HawaButton fullWidth type="submit" text={props.texts.signInText} />{" "}
         {!props.withoutSignUp && (
           <div className="font-semibold p-3 text-center text-sm">
@@ -146,7 +148,7 @@ SignInForm.propTypes = {
     emailPlaceholder: PropTypes.string,
     emailRequiredText: PropTypes.string,
     emailInvalidText: PropTypes.string,
-    usernameLabel:PropTypes.string,
+    usernameLabel: PropTypes.string,
     usernamePlaceholder: PropTypes.string,
     usernameRequired: PropTypes.string,
     passwordLabel: PropTypes.string,

package/src/blocks/AuthForms/SignInPhone.js

@@ -1,7 +1,6 @@
 import { useState } from "react";
 import { Controller, useForm } from "react-hook-form";
-import { HawaButton } from "../../elements";
-import HawaPhoneInput from "../../elements/HawaPhoneInput";
+import { HawaButton, HawaPhoneInput } from "../../elements";
 import { HawaContainer } from "../../layout";
 
 export const SignInPhone = (props) => {

package/src/blocks/AuthForms/SignUpForm.js

@@ -4,7 +4,8 @@ import {
   HawaLogoButton,
   HawaAlert,
   HawaButton,
-  HawaCheckbox
+  HawaCheckbox,
+  HawaSelect
 } from "../../elements";
 import PropTypes from "prop-types";
 import { Controller, FormProvider, useForm } from "react-hook-form";
@@ -48,41 +49,79 @@ export const SignUpForm = (props) => {
                 required: props.texts.fullNameRequiredText
               }}
             />
+            {props.signUpType === "email" ? (
+              <Controller
+                control={control}
+                name="email"
+                render={({ field }) => (
+                  <HawaTextField
+                    fullWidth
+                    type="text"
+                    value={field.value ?? ""}
+                    label={props.texts.emailLabel}
+                    helperText={errors.email?.message}
+                    placeholder={props.texts.emailPlaceholder}
+                    {...field}
+                  />
+                )}
+                rules={{
+                  required: props.texts.emailRequiredText,
+                  pattern: {
+                    value:
+                      /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,
+                    message: props.texts.emailInvalidText
+                  }
+                }}
+              />
+            ) : (
+              <Controller
+                control={control}
+                name="username"
+                render={({ field }) => (
+                  <HawaTextField
+                    fullWidth
+                    type="text"
+                    value={field.value ?? ""}
+                    label={props.texts.usernameLabel}
+                    helperText={errors.username?.message}
+                    placeholder={props.texts.usernamePlaceholder}
+                    {...field}
+                  />
+                )}
+                rules={{
+                  required: props.texts.usernameRequired
+                }}
+              />
+            )}
             <Controller
               control={control}
-              name="email"
+              name="password"
               render={({ field }) => (
                 <HawaTextField
                   fullWidth
-                  type="text"
+                  type="password"
+                  defaultValue={field.value ?? ""}
                   value={field.value ?? ""}
-                  label={props.texts.emailLabel}
-                  helperText={errors.email?.message}
-                  placeholder={props.texts.emailPlaceholder}
+                  label={props.texts.passwordLabel}
+                  placeholder={props.texts.passwordPlaceholder}
+                  helperText={errors.password?.message}
                   {...field}
                 />
               )}
-              rules={{
-                required: props.texts.emailRequiredText,
-                pattern: {
-                  value:
-                    /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,
-                  message: props.texts.emailInvalidText
-                }
-              }}
+              rules={{ required: props.texts.passwordRequiredText }}
             />
             <Controller
               control={control}
-              name="password"
+              name="confirm_password"
               render={({ field }) => (
                 <HawaTextField
                   fullWidth
                   type="password"
                   defaultValue={field.value ?? ""}
                   value={field.value ?? ""}
-                  label={props.texts.passwordLabel}
-                  placeholder={props.texts.passwordPlaceholder}
-                  helperText={errors.password?.message}
+                  label={props.texts.confirmPasswordLabel}
+                  placeholder={props.texts.confirmPasswordPlaceholder}
+                  helperText={errors.confirm_password?.message}
                   {...field}
                 />
               )}
@@ -107,6 +146,24 @@ export const SignUpForm = (props) => {
                 rules={{ required: props.texts.passwordRequiredText }}
               />
             )}
+            {props.showUserSource && (
+              <div className="py-2">
+                <HawaSelect
+                  label="How did you learn about us?"
+                  isCreatable={false}
+                  isMulti={false ?? false}
+                  isSearchable={false}
+                  isClearable={false ?? false}
+                  options={[
+                    { value: "chocolate", label: "Chocolate" },
+                    { value: "strawberry", label: "Strawberry" },
+                    { value: "vanilla", label: "Vanilla" }
+                  ]}
+                  onChange={(e, o) => console.log("chooo", e)}
+                  onInputChange={(e, o) => console.log("changing", e)}
+                />
+              </div>
+            )}
             {props.showTermsOption && (
               <div className="py-2">
                 <HawaCheckbox
@@ -121,7 +178,7 @@ export const SignUpForm = (props) => {
                 />
               </div>
             )}
-            {props.showNewletterOption && (
+            {props.showNewsletterOption && (
               <div className="py-2">
                 <HawaCheckbox label="Subscribe to newsletter?" />
               </div>
@@ -180,10 +237,15 @@ SignUpForm.propTypes = {
     emailPlaceholder: PropTypes.string,
     emailRequiredText: PropTypes.string,
     emailInvalidText: PropTypes.string,
+    usernameLabel: PropTypes.string,
+    usernamePlaceholder: PropTypes.string,
+    usernameRequired: PropTypes.string,
     passwordLabel: PropTypes.string,
     passwordPlaceholder: PropTypes.string,
     passwordRequiredText: PropTypes.string,
     passwordTooShortText: PropTypes.string,
+    confirmPasswordLabel: PropTypes.string,
+    confirmPasswordPlaceholder: PropTypes.string,
     forgotPasswordText: PropTypes.string,
     newUserText: PropTypes.string,
     signUpText: PropTypes.string,
@@ -196,6 +258,9 @@ SignUpForm.propTypes = {
   viaGoogle: PropTypes.bool,
   viaGithub: PropTypes.bool,
   viaTwitter: PropTypes.bool,
+  showNewsletterOption: PropTypes.bool,
+  showRefCode: PropTypes.bool,
+  showTermsOption: PropTypes.bool,
   handleSignUp: PropTypes.func,
   handleRouteToSignIn: PropTypes.func,
   handleGoogleSignUp: PropTypes.func,

package/src/elements/HawaPhoneInput.js

@@ -1,17 +1,25 @@
 import { useState } from "react";
 import Countries from "../../countries";
 import Select from "react-select";
-const Option = ({ cx, children, getStyles, innerRef, ...props }) => (
+const Option = ({
+  cx,
+  children,
+  getStyles,
+  innerProps,
+  innerRef,
+  ...props
+}) => (
   <div
     ref={innerRef}
     className="m-2 p-1 px-3 rounded-lg flex flex-row items-center justify-between hover:bg-blue-200"
+    {...innerProps}
   >
     <img className="h-8 w-8" src={props.data.image}></img>
     {children}
   </div>
 );
 
-export default function HawaPhoneInput({ preferredCountry }) {
+export const HawaPhoneInput = ({ preferredCountry }) => {
   const [code, setCode] = useState(preferredCountry ?? "");
   const [selectedCountry, setSelectedCountry] = useState("+966");
   const [tel, setTel] = useState("");
@@ -54,9 +62,14 @@ export default function HawaPhoneInput({ preferredCountry }) {
             lineHeight: "1.25rem",
             padding: "0.37rem"
           }),
+          singleValue: (base) => ({
+            ...base,
+            fontSize: "0.875rem",
+            textAlign: "right"
+          }),
           control: (base) => ({
             ...base,
-            width: 80,
+            width: 64,
             borderRadius: "0.75rem",
             borderTopRightRadius: 0,
             borderBottomRightRadius: 0
@@ -76,16 +89,19 @@ export default function HawaPhoneInput({ preferredCountry }) {
         isCreatable={false}
         isMulti={false}
         isSearchable={true}
-        isClearable={true}
+        isClearable={false}
         placeholder="+966"
-        // value={selectedCountry}
-        // inputValue={selectedCountry}
+        defaultValue={Countries[0]}
+        onInputChange={() => console.log("changed to")}
         onChange={(newValue, action) => {
           console.log("test n", newValue);
           setSelectedCountry(newValue);
         }}
       />
-      <input className="bg-gray-50 border rounded-l-none border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500 border-l-0" />
+      <input
+        type="number"
+        className="bg-gray-50 appearance-none border rounded-l-none border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500 border-l-0"
+      />
     </div>
   );
-}
+};

package/src/elements/HawaSelect.js

@@ -1,36 +1,177 @@
-import React from "react";
+import Select from "react-select";
+import CreatableSelect from "react-select/creatable";
 
-export const HawaSelect = (props) => {
-  return (
-    <div style={{ width: "100%" }}>
-      <label
-        htmlFor="first_name"
-        className="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
-      >
-        {props.label}
-      </label>
+const Option = ({
+  cx,
+  children,
+  getStyles,
+  innerProps,
+  innerRef,
+  ...props
+}) => (
+  <div
+    ref={innerRef}
+    className="m-2 p-1 px-3 rounded-lg flex flex-row items-center justify-between hover:bg-blue-200"
+    {...innerProps}
+  >
+    {children}
+  </div>
+);
 
-      {/* <div
-        style={{
-          display: "flex",
-          flexDirection: "row",
-          justifyContent: "space-between",
-          alignItems: "center"
-        }}
-      >
+const Control = ({
+  cx,
+  children,
+  getStyles,
+  innerProps,
+  innerRef,
+  ...props
+}) => {
+  return (
+    <div
+      ref={innerRef}
+      className="mb-2
+      flex
+       bg-gray-50 border
+        border-gray-300
+         text-gray-900
+         text-sm rounded-lg
+         h-11
+          focus:ring-blue-500
+           focus:border-blue-500
+             w-full 
+             dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+      {...innerProps}
+      // {...props}
+    >
+      {children}
+    </div>
+  );
+};
+const Menu = ({ cx, children, getStyles, innerProps, innerRef, ...props }) => {
+  return (
+    <div
+      className="bg-white rounded-lg absolute w-full"
+      ref={innerRef}
+      {...innerProps}
+      // {...props}
+    >
+      {children}
+    </div>
+  );
+};
 
-        {props.helperText && (
-          <Typography variant="validation">{props.helperText}</Typography>
-        )}
-      </div> */}
-      {/* <Select {...props}>{props.children}</Select> */}
+export const HawaSelect = (props) => {
+  return (
+    <>
+      {props.label && (
+        <label className="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300">
+          {props.label}
+        </label>
+      )}
+      {!props.isCreatable && (
+        <Select
+          styles={
+            {
+              // input: (base) => ({
+              //   ...base,
+              //   "input:focus": {
+              //     boxShadow: "none"
+              //   }
+              // }),
+              // control: (base) => ({
+              //   ...base,
+              //   borderRadius: "0.75rem"
+              // }),
+              // menu: (base) => ({
+              //   ...base,
+              //   borderRadius: "0.75rem",
+              //   padding: 0,
+              //   display: "flex",
+              //   justifyContent: "center"
+              // }),
+              // menuList: (base) => ({
+              //   ...base,
+              //   display: "flex",
+              //   flexDirection: "column",
+              //   justifyContent: "center",
+              //   alignItems: "center",
+              //   width: "100%"
+              // }),
+              // option: (base) => ({
+              //   ...base,
+              //   borderRadius: "0.75rem",
+              //   margin: 3,
+              //   width: "98%"
+              // }),
+              // multiValue: (base) => ({
+              //   ...base,
+              //   borderRadius: "0.4rem"
+              // })
+            }
+          }
+          options={props.options}
+          isClearable={props.isClearable}
+          isMulti={props.isMulti}
+          isSearchable={props.isSearchable}
+          onChange={(newValue, action) => props.onChange(newValue, action)}
+          components={{
+            Control,
+            Option,
+            Menu
+          }}
+        />
+      )}
+      {props.isCreatable && (
+        <CreatableSelect
+          styles={{
+            input: (base) => ({
+              ...base,
+              "input:focus": {
+                boxShadow: "none"
+              }
+            }),
 
-      <select
-        id="countries"
-        className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
-      >
-        {props.children}
-      </select>
-    </div>
+            control: (base) => ({
+              ...base,
+              borderRadius: "0.75rem"
+            }),
+            menu: (base) => ({
+              ...base,
+              borderRadius: "0.75rem",
+              padding: 0,
+              display: "flex",
+              justifyContent: "center"
+            }),
+            menuList: (base) => ({
+              ...base,
+              display: "flex",
+              flexDirection: "column",
+              justifyContent: "center",
+              alignItems: "center",
+              width: "100%"
+            }),
+            option: (base) => ({
+              ...base,
+              borderRadius: "0.75rem",
+              margin: 3,
+              width: "98%"
+            })
+          }}
+          options={props.options}
+          isClearable={props.isClearable}
+          isMulti={props.isMulti}
+          isSearchable={props.isSearchable}
+          onCreateOption={() => console.log("im changing")}
+          onChange={(newValue, action) => {
+            console.log("this is onChange", newValue);
+            props.onChange(newValue, action);
+          }}
+          onInputChange={(newValue, action) => {
+            console.log("onInputChange====", newValue);
+            props.onInputChange(newValue, action);
+          }}
+        />
+      )}
+    </>
   );
 };

package/src/styles.css

@@ -372,6 +372,11 @@ video {
 [hidden] {
   display: none;
 }
+  input[type="number"]::-webkit-inner-spin-button,
+  input[type="number"]::-webkit-outer-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
 
 *, ::before, ::after {
   --tw-border-spacing-x: 0;

package/src/tailwind.css

@@ -2,6 +2,14 @@
 @import "tailwindcss/components";
 @import "tailwindcss/utilities";
 
+@layer base {
+  input[type="number"]::-webkit-inner-spin-button,
+  input[type="number"]::-webkit-outer-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+}
+
 body {
   font-family: "IBM Plex Sans Arabic";
 }

package/src/elements/HawaSelectInput.js

@@ -1,67 +0,0 @@
-import Select from "react-select";
-import CreatableSelect from "react-select/creatable";
-
-export default function HawaSelectInput(props) {
-  return (
-    <>
-      {!props.isCreatable && (
-        <Select
-          styles={{
-            input: (base) => ({
-              ...base,
-              "input:focus": {
-                boxShadow: "none"
-              }
-            }),
-            control: (base) => ({
-              ...base,
-              borderRadius: "0.75rem",
-              padding: 3
-            }),
-            menu: (base) => ({
-              ...base,
-              borderRadius: "0.75rem"
-            })
-          }}
-          options={props.options}
-          isClearable={props.isClearable}
-          isMulti={props.isMulti}
-          isSearchable={props.isSearchable}
-          onChange={(newValue, action) => props.onChange(newValue, action)}
-          components={props.components}
-        />
-      )}
-      {props.isCreatable && (
-        <CreatableSelect
-          styles={{
-            input: (base) => ({
-              ...base,
-              "input:focus": {
-                padding: 20,
-                boxShadow: "none"
-              }
-            }),
-            control: (base) => ({
-              ...base,
-              borderRadius: "0.75rem",
-              padding: 8
-            })
-          }}
-          options={props.options}
-          isClearable={props.isClearable}
-          isMulti={props.isMulti}
-          isSearchable={props.isSearchable}
-          onCreateOption={() => console.log("im changing")}
-          onChange={(newValue, action) => {
-            console.log("this is onChange", newValue);
-            props.onChange(newValue, action);
-          }}
-          onInputChange={(newValue, action) => {
-            console.log("onInputChange====", newValue);
-            props.onInputChange(newValue, action);
-          }}
-        />
-      )}
-    </>
-  );
-}