@sikka/hawa 0.0.82 → 0.0.84

package/package.json

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

package/src/blocks/AuthForms/AppLanding.js

@@ -0,0 +1,62 @@
+import React from "react";
+import {
+  HawaTextField,
+  HawaLogoButton,
+  HawaAlert,
+  HawaButton
+} from "../../elements";
+import { Controller, useForm } from "react-hook-form";
+import PropTypes from "prop-types";
+import { HawaContainer } from "../../layout/HawaContainer";
+
+export const AppLanding = (props) => {
+  const methods = useForm();
+  const {
+    formState: { errors },
+    handleSubmit,
+    control
+  } = methods;
+
+  return (
+    <HawaContainer>
+      <HawaButton fullWidth text={"Sign In"} />
+      <HawaButton fullWidth text={"Sign Up"} />
+      <HawaButton fullWidth text={"عربي"} />
+    </HawaContainer>
+  );
+};
+AppLanding.propTypes = {
+  /**
+   *  An object of all the texts in the blocks
+   */
+  texts: PropTypes.shape({
+    emailLabel: PropTypes.string,
+    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,
+    forgotPasswordText: PropTypes.string,
+    newUserText: PropTypes.string,
+    signUpText: PropTypes.string,
+    signInText: PropTypes.string,
+    googleButtonLabel: PropTypes.string,
+    githubButtonLabel: PropTypes.string,
+    twitterButtonLabel: PropTypes.string
+  }),
+  viaGoogle: PropTypes.bool,
+  viaGithub: PropTypes.bool,
+  viaTwitter: PropTypes.bool,
+  handleSignIn: PropTypes.func,
+  handleRouteToSignUp: PropTypes.func,
+  handleGoogleSignIn: PropTypes.func,
+  handleGithubSignIn: PropTypes.func,
+  handleTwitterSignIn: PropTypes.func,
+  handleForgotPassword: PropTypes.func,
+
+  withoutSignUp: PropTypes.bool
+};

package/src/blocks/AuthForms/SignInForm.js

@@ -88,19 +88,21 @@ 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="dark:text-gray-300 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">
+          <div className="dark:text-gray-300 font-semibold p-3 text-center text-sm">
             {props.texts.newUserText}{" "}
             <span
               onClick={props.handleRouteToSignUp}
-              className="text-blue-600 cursor-pointer"
+              className="dark:text-blue-400 text-blue-600 cursor-pointer"
             >
               {props.texts.signUpText}
             </span>
@@ -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/HawaButton.js

@@ -19,7 +19,7 @@ export const HawaButton = ({
   } m-1 px-2.5 py-2.5 text-center text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300       font-medium rounded-lg        text-sm  text-center inline-flex items-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800`;
   if (props.fullWidth) {
     styles =
-      "my-1 w-full flex justify-center text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center inline-flex items-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800";
+      "my-1 w-full flex justify-center text-white bg-primary-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center inline-flex items-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800";
   }
   if (iconOnly) {
     iconStyle = "flex flex-col justify-center items-center";

package/src/elements/HawaMenu.js

@@ -0,0 +1,59 @@
+import PropTypes from "prop-types";
+
+export const HawaMenu = ({
+  popMenuID,
+  menuItems,
+  withHeader,
+  withIcons,
+  headerTitle,
+  headerSubtitle
+}) => {
+  return (
+    <div
+      id={popMenuID}
+      className="z-10 w-44 bg-white rounded-lg divide-y divide-gray-100 shadow dark:bg-gray-700"
+    >
+      {withHeader && (
+        <div class="py-3 px-4 text-sm text-gray-900 dark:text-white">
+          <div>{headerTitle}</div>
+          <div class="font-medium truncate">{headerSubtitle}</div>
+        </div>
+      )}
+      {menuItems.map((group) => {
+        return (
+          <ul className="py-1  text-sm text-gray-700 dark:text-gray-200">
+            {group.map((item) => {
+              return (
+                <li
+                  onClick={item.action}
+                  className={
+                    item.button
+                      ? "bg-primary-500 text-white hover:bg-primary-600 flex flex-row rtl:flex-row-reverse items-center cursor-pointer py-2 px-4 rounded-lg mx-1 hover:bg-gray-100 dark:hover:bg-primary-600 dark:hover:text-white"
+                      : "flex flex-row rtl:flex-row-reverse items-center cursor-pointer py-2 px-4 rounded-lg mx-1 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"
+                  }
+                >
+                  {withIcons && (
+                    <div className="mr-2 rtl:ml-2">{item.icon}</div>
+                  )}
+                  {item.label}
+                </li>
+              );
+            })}
+          </ul>
+        );
+      })}
+    </div>
+  );
+};
+
+HawaMenu.propTypes = {
+  anchor: PropTypes.any,
+  handleClose: PropTypes.func,
+  menuItems: PropTypes.arrayOf(
+    PropTypes.shape({
+      icon: PropTypes.element,
+      label: PropTypes.string,
+      action: 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/elements/index.js

@@ -24,3 +24,4 @@ export * from "./HawaDrawerItem";
 export * from "./HawaTooltip";
 export * from "./HawaTabs";
 export * from "./HawaModal";
+export * from "./HawaMenu";

package/src/layout/HawaContainer.js

@@ -1,12 +1,8 @@
 import React from "react";
 
 export const HawaContainer = (props) => {
-  let containerStyle = "";
-  if (props.withDividers) {
-    containerStyle =
-      "w-full max-w-sm flex flex-col divide-y divide-gray-300 bg-blue-300 rounded-xl p-4";
-  } else {
-    containerStyle = "w-full max-w-sm flex flex-col bg-blue-300 rounded-xl p-4";
-  }
+  let containerStyle =
+    "w-full max-w-sm flex flex-col bg-primary-300 dark:bg-gray-600 rounded-xl p-4";
+
   return <div className={containerStyle}>{props.children}</div>;
 };