@sikka/hawa 0.0.87 → 0.0.89

package/package.json

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

package/src/blocks/AuthForms/AppLanding.js

@@ -6,19 +6,23 @@ import { HawaContainer } from "../../layout/HawaContainer";
 export const AppLanding = (props) => {
   return (
     <HawaContainer>
+      {props.handleSignIn && (
+        <HawaButton
+          fullWidth
+          text={props.texts.signIn}
+          onClick={props.handleSignIn}
+        />
+      )}
+      {props.handleSignUp && (
+        <HawaButton
+          fullWidth
+          text={props.texts.signUp}
+          onClick={props.handleSignUp}
+        />
+      )}
       <HawaButton
         fullWidth
-        text={props.texts.signIn}
-        onClick={props.handleSignIn}
-      />
-      <HawaButton
-        fullWidth
-        text={props.texts.signUp}
-        onClick={props.handleSignUp}
-      />
-      <HawaButton
-        fullWidth
-        text={props.texts.langauge}
+        text={props.texts.lang}
         onClick={props.handleLangauge}
       />
     </HawaContainer>
@@ -28,7 +32,7 @@ AppLanding.propTypes = {
   texts: PropTypes.shape({
     signIn: PropTypes.string,
     signUp: PropTypes.string,
-    language: PropTypes.string
+    lang: PropTypes.string
   }),
   handleSignIn: PropTypes.func,
   handleSignUp: PropTypes.func,

package/src/blocks/AuthForms/SignUpForm.js

@@ -143,44 +143,69 @@ export const SignUpForm = (props) => {
                     {...field}
                   />
                 )}
-                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: "friend", label: "From a friend" },
-                    { value: "ad", label: "Advertisement" },
-                    { value: "other", label: "Other" }
-                  ]}
-                  onChange={(e, o) => console.log("chooo", e)}
-                  onInputChange={(e, o) => console.log("changing", e)}
+              <div>
+                <Controller
+                  control={control}
+                  name="reference"
+                  render={({ field }) => (
+                    <HawaSelect
+                      label="How did you learn about us?"
+                      isCreatable={false}
+                      isMulti={false ?? false}
+                      isSearchable={false}
+                      isClearable={false ?? false}
+                      options={[
+                        { value: "friend", label: "From a friend" },
+                        { value: "ad", label: "Advertisement" },
+                        { value: "other", label: "Other" }
+                      ]}
+                      onChange={(e, o) => console.log("chooo", e)}
+                      onInputChange={(e, o) => console.log("changing", e)}
+                      {...field}
+                    />
+                  )}
                 />
               </div>
             )}
             {props.showTermsOption && (
               <div className="py-2">
-                <HawaCheckbox
-                  label={
-                    <span>
-                      I accept the{" "}
-                      <a className="cursor-pointer text-blue-800">
-                        terms and conditions
-                      </a>
-                    </span>
-                  }
+                <Controller
+                  control={control}
+                  name="terms_accepted"
+                  render={({ field }) => (
+                    <HawaCheckbox
+                      helperText={errors.terms_accepted?.message}
+                      onChange={() => console.log("te")}
+                      label={
+                        <span>
+                          {props.texts.iAcceptText}{" "}
+                          <a className="cursor-pointer text-blue-800">
+                            {props.texts.termsText}
+                          </a>
+                        </span>
+                      }
+                      {...field}
+                    />
+                  )}
+                  rules={{ required: props.texts.termsRequiredText }}
                 />
               </div>
             )}
             {props.showNewsletterOption && (
               <div className="py-2">
-                <HawaCheckbox label="Subscribe to newsletter?" />
+                <Controller
+                  control={control}
+                  name="newsletter_accepted"
+                  render={({ field }) => (
+                    <HawaCheckbox
+                      label={props.texts.subscribeToNewsletter}
+                      {...field}
+                    />
+                  )}
+                />
               </div>
             )}
             <HawaButton fullWidth type="submit" text={props.texts.signUpText} />{" "}
@@ -247,6 +272,9 @@ SignUpForm.propTypes = {
     confirmPasswordLabel: PropTypes.string,
     confirmPasswordPlaceholder: PropTypes.string,
     forgotPasswordText: PropTypes.string,
+    termsText: PropTypes.string,
+    iAcceptText: PropTypes.string,
+    termsRequiredText: PropTypes.string,
     newUserText: PropTypes.string,
     signUpText: PropTypes.string,
     signInText: PropTypes.string,

package/src/elements/HawaButton.js

@@ -20,13 +20,16 @@ export const HawaButton = ({
     styles =
       "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 (props.normalWidth) {
+    styles =
+      "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 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800";
+  }
   if (iconOnly) {
     iconStyle = "flex flex-col justify-center items-center";
   }
   return (
     <button
       data-tooltip-target={tooltip}
-      type="button"
       className={styles}
       disabled={isLoading}
       {...props}
@@ -42,7 +45,7 @@ export const HawaButton = ({
       ) : (
         <div className="flex flex-row gap-x-3">
           <div className="border-2 border-gray-400 border-t-white animate-spin  text-white rounded-full h-5 w-5"></div>
-          <div>{loadingText}</div>
+          {/* <div>{loadingText}</div> */}
         </div>
       )}
     </button>

package/src/elements/HawaCheckbox.js

@@ -2,16 +2,26 @@ import React from "react";
 
 export const HawaCheckbox = (props) => {
   return (
-    <div className="flex items-center h-full">
+    <div className="flex items-top h-full">
       <input
         type="checkbox"
         value=""
-        className="w-4 h-4 text-blue-600 bg-gray-100 rounded border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
+        className="w-4 h-5 text-blue-600 bg-gray-100 rounded border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
+        {...props}
       />
-      {props.label && (
-        <label className="ml-2 text-sm font-medium text-gray-900 dark:text-gray-300">
-          {props.label}
-        </label>
+      {(props.label || props.helperText) && (
+        <div className="flex flex-col items-stat">
+          {props.label && (
+            <label className="ml-2 text-sm font-medium text-gray-900 dark:text-gray-300">
+              {props.label}
+            </label>
+          )}
+          {props.helperText && (
+            <p className="mx-2 mt-1 text-xs text-red-600 dark:text-red-500">
+              {props.helperText}
+            </p>
+          )}
+        </div>
       )}
     </div>
 

package/src/elements/HawaModal.js

@@ -60,64 +60,12 @@ export const HawaModal = ({
               <span className="sr-only">Close modal</span>
             </button>
           </div>
-          <div className="p-6 space-y-6">
-            <p className="text-base leading-relaxed text-gray-500 dark:text-gray-400">
-              With less than a month to go before the European Union enacts new
-              consumer privacy laws for its citizens, companies around the world
-              are updating their terms of service agreements to comply.
-            </p>
-            <p className="text-base leading-relaxed text-gray-500 dark:text-gray-400">
-              The European Union’s General Data Protection Regulation (G.D.P.R.)
-              goes into effect on May 25 and is meant to ensure a common set of
-              data rights in the European Union. It requires organizations to
-              notify users as soon as possible of high-risk data breaches that
-              could personally affect them.
-            </p>
-          </div>
+          <div className="p-6 space-y-6">{props.children}</div>
           <div className="flex items-center p-6 space-x-2 rounded-b border-t border-gray-200 dark:border-gray-600">
-            <button
-              data-modal-toggle="defaultModal"
-              type="button"
-              className="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 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
-            >
-              I accept
-            </button>
-            <button
-              data-modal-toggle="defaultModal"
-              type="button"
-              className="text-gray-500 bg-white hover:bg-gray-100 focus:ring-4 focus:outline-none focus:ring-blue-300 rounded-lg border border-gray-200 text-sm font-medium px-5 py-2.5 hover:text-gray-900 focus:z-10 dark:bg-gray-700 dark:text-gray-300 dark:border-gray-500 dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-gray-600"
-            >
-              Decline
-            </button>
+            {props.actions}
           </div>
         </div>
       </div>
     </div>
   );
 };
-
-export const ModalContent = ({ children, ...props }) => {
-  return <div className="p-6 space-y-6">{children}</div>;
-};
-
-export const ModalFooter = ({ children, ...props }) => {
-  return (
-    <div className="flex items-center p-6 space-x-2 rounded-b border-t border-gray-200 dark:border-gray-600">
-      {/* <button
-        data-modal-toggle="defaultModal"
-        type="button"
-        className="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 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
-      >
-        I accept
-      </button>
-      <button
-        data-modal-toggle="defaultModal"
-        type="button"
-        className="text-gray-500 bg-white hover:bg-gray-100 focus:ring-4 focus:outline-none focus:ring-blue-300 rounded-lg border border-gray-200 text-sm font-medium px-5 py-2.5 hover:text-gray-900 focus:z-10 dark:bg-gray-700 dark:text-gray-300 dark:border-gray-500 dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-gray-600"
-      >
-        Decline
-      </button> */}
-      {children}
-    </div>
-  );
-};

package/src/elements/HawaPhoneInput.js

@@ -70,14 +70,14 @@ export const HawaPhoneInput = ({ preferredCountry }) => {
           control: (base) => ({
             ...base,
             width: 64,
-            borderRadius: "0.75rem",
+            borderRadius: "0.5rem",
             borderTopRightRadius: 0,
             borderBottomRightRadius: 0
           }),
           menu: (base) => ({
             ...base,
             width: 190,
-            borderRadius: "0.75rem"
+            borderRadius: "0.5rem"
           })
         }}
         components={{

package/src/elements/HawaSelect.js

@@ -29,17 +29,7 @@ const Control = ({
   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"
+      className="h-10 flex bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg 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}
     >
@@ -50,7 +40,7 @@ const Control = ({
 const Menu = ({ cx, children, getStyles, innerProps, innerRef, ...props }) => {
   return (
     <div
-      className="bg-white rounded-lg absolute w-full"
+      className="bg-white rounded-lg absolute w-full mt-2"
       ref={innerRef}
       {...innerProps}
       // {...props}
@@ -62,7 +52,7 @@ const Menu = ({ cx, children, getStyles, innerProps, innerRef, ...props }) => {
 
 export const HawaSelect = (props) => {
   return (
-    <>
+    <div className="mb-3">
       {props.label && (
         <label className="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300">
           {props.label}
@@ -70,50 +60,13 @@ export const HawaSelect = (props) => {
       )}
       {!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)}
+          onChange={(newValue, action) =>
+            props.onChange(newValue.label, action)
+          }
           components={{
             Control,
             Option,
@@ -172,6 +125,11 @@ export const HawaSelect = (props) => {
           }}
         />
       )}
-    </>
+      {props.helperText && (
+        <p className="mt-2 text-sm text-red-600 dark:text-red-500">
+          {props.helperText}
+        </p>
+      )}
+    </div>
   );
 };

package/src/elements/HawaTextField.js

@@ -2,7 +2,7 @@ import React from "react";
 
 export const HawaTextField = (props) => {
   return (
-    <div>
+    <div className="mb-3">
       <label
         htmlFor="first_name"
         className="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
@@ -24,7 +24,7 @@ export const HawaTextField = (props) => {
       )}
 
       {props.helperText && (
-        <p className="mt-2 text-sm text-red-600 dark:text-red-500">
+        <p className="mx-2 mt-1 text-xs text-red-600 dark:text-red-500">
           {/* <span className="font-medium">Oh, snapp!</span> */}
           {props.helperText}
         </p>

package/src/styles.css

@@ -626,6 +626,10 @@ video {
   margin-top: 0.25rem;
   margin-bottom: 0.25rem;
 }
+.mx-2 {
+  margin-left: 0.5rem;
+  margin-right: 0.5rem;
+}
 .my-2 {
   margin-top: 0.5rem;
   margin-bottom: 0.5rem;
@@ -654,10 +658,6 @@ video {
   margin-top: -0.25rem;
   margin-bottom: -0.25rem;
 }
-.mx-2 {
-  margin-left: 0.5rem;
-  margin-right: 0.5rem;
-}
 .ml-auto {
   margin-left: auto;
 }
@@ -670,6 +670,9 @@ video {
 .ml-2 {
   margin-left: 0.5rem;
 }
+.mt-1 {
+  margin-top: 0.25rem;
+}
 .mr-2 {
   margin-right: 0.5rem;
 }
@@ -727,9 +730,6 @@ video {
 .h-full {
   height: 100%;
 }
-.h-4 {
-  height: 1rem;
-}
 .h-7 {
   height: 1.75rem;
 }
@@ -739,9 +739,15 @@ video {
 .h-8 {
   height: 2rem;
 }
+.h-4 {
+  height: 1rem;
+}
 .h-2 {
   height: 0.5rem;
 }
+.h-10 {
+  height: 2.5rem;
+}
 .h-14 {
   height: 3.5rem;
 }
@@ -751,9 +757,6 @@ video {
 .h-9 {
   height: 2.25rem;
 }
-.h-10 {
-  height: 2.5rem;
-}
 .h-12 {
   height: 3rem;
 }
@@ -1271,9 +1274,6 @@ video {
 .uppercase {
   text-transform: uppercase;
 }
-.leading-relaxed {
-  line-height: 1.625;
-}
 .leading-tight {
   line-height: 1.25;
 }
@@ -1316,6 +1316,10 @@ video {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
+.text-red-600 {
+  --tw-text-opacity: 1;
+  color: rgb(220 38 38 / var(--tw-text-opacity));
+}
 .text-blue-800 {
   --tw-text-opacity: 1;
   color: rgb(30 64 175 / var(--tw-text-opacity));
@@ -1324,10 +1328,6 @@ video {
   --tw-text-opacity: 1;
   color: rgb(55 65 81 / var(--tw-text-opacity));
 }
-.text-red-600 {
-  --tw-text-opacity: 1;
-  color: rgb(220 38 38 / var(--tw-text-opacity));
-}
 .text-green-500 {
   --tw-text-opacity: 1;
   color: rgb(34 197 94 / var(--tw-text-opacity));
@@ -1380,9 +1380,10 @@ video {
 .duration-300 {
   transition-duration: 300ms;
 }
+@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@300;400;500;700&display=swap");
 
 body {
-  font-family: "IBM Plex Sans Arabic";
+  font-family: "IBM Plex Sans Arabic", sans-serif;
 }
 /* <div className="react-select-container">
   <div className="react-select__control">
@@ -1482,9 +1483,6 @@ body {
   -webkit-text-decoration-line: underline;
           text-decoration-line: underline;
 }
-.focus\:z-10:focus {
-  z-index: 10;
-}
 .focus\:border-blue-500:focus {
   --tw-border-opacity: 1;
   border-color: rgb(59 130 246 / var(--tw-border-opacity));
@@ -1576,14 +1574,14 @@ body {
   --tw-border-opacity: 1;
   border-color: rgb(75 85 99 / var(--tw-border-opacity));
 }
-.dark .dark\:border-gray-500 {
-  --tw-border-opacity: 1;
-  border-color: rgb(107 114 128 / var(--tw-border-opacity));
-}
 .dark .dark\:border-blue-500 {
   --tw-border-opacity: 1;
   border-color: rgb(59 130 246 / var(--tw-border-opacity));
 }
+.dark .dark\:border-gray-500 {
+  --tw-border-opacity: 1;
+  border-color: rgb(107 114 128 / var(--tw-border-opacity));
+}
 .dark .dark\:bg-gray-800 {
   --tw-bg-opacity: 1;
   background-color: rgb(31 41 55 / var(--tw-bg-opacity));
@@ -1652,6 +1650,10 @@ body {
   --tw-text-opacity: 1;
   color: rgb(209 213 219 / var(--tw-text-opacity));
 }
+.dark .dark\:text-red-500 {
+  --tw-text-opacity: 1;
+  color: rgb(239 68 68 / var(--tw-text-opacity));
+}
 .dark .dark\:text-gray-200 {
   --tw-text-opacity: 1;
   color: rgb(229 231 235 / var(--tw-text-opacity));
@@ -1660,10 +1662,6 @@ body {
   --tw-text-opacity: 1;
   color: rgb(107 114 128 / var(--tw-text-opacity));
 }
-.dark .dark\:text-red-500 {
-  --tw-text-opacity: 1;
-  color: rgb(239 68 68 / var(--tw-text-opacity));
-}
 .dark .dark\:text-blue-400 {
   --tw-text-opacity: 1;
   color: rgb(96 165 250 / var(--tw-text-opacity));

package/src/tailwind.css

@@ -1,7 +1,7 @@
 @import "tailwindcss/base";
 @import "tailwindcss/components";
 @import "tailwindcss/utilities";
-
+@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@300;400;500;700&display=swap");
 @layer base {
   input[type="number"]::-webkit-inner-spin-button,
   input[type="number"]::-webkit-outer-spin-button {
@@ -11,7 +11,7 @@
 }
 
 body {
-  font-family: "IBM Plex Sans Arabic";
+  font-family: "IBM Plex Sans Arabic", sans-serif;
 }
 /* <div className="react-select-container">
   <div className="react-select__control">