@sikka/hawa 0.0.47 → 0.0.48

package/package.json

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

package/src/blocks/AuthForms/CodeConfirmation.js

@@ -1,14 +1,7 @@
 import React from "react";
-import { HawaTextField, HawaLogoButton, HawaAlert } from "../../elements";
+import { HawaTextField, HawaAlert, HawaButton } from "../../elements";
 import { Controller, useForm } from "react-hook-form";
-import InputAdornment from "@mui/material/InputAdornment";
-import EmailIcon from "@mui/icons-material/MailOutline";
-import PasswordIcon from "@mui/icons-material/HttpsOutlined";
-import Container from "@mui/material/Container";
-import Typography from "@mui/material/Typography";
-import Button from "@mui/material/Button";
 import PropTypes from "prop-types";
-import Divider from "@mui/material/Divider";
 
 export const CodeConfirmation = (props) => {
   const methods = useForm();
@@ -19,11 +12,7 @@ export const CodeConfirmation = (props) => {
   } = methods;
 
   return (
-    <Container
-      maxWidth="xs"
-      variant="auth"
-      style={{ direction: props.lang === "ar" ? "rtl" : "ltr" }}
-    >
+    <div className="flex flex-col divide-y divide-gray-300 bg-blue-300 rounded-xl p-4">
       {props.showError && (
         <HawaAlert
           title={props.errorTitle}
@@ -43,11 +32,6 @@ export const CodeConfirmation = (props) => {
               label={props.texts.codeLabel}
               helperText={errors.email?.message}
               placeholder={props.texts.codePlaceholder}
-              // startAdornment={
-              //   <InputAdornment position="start">
-              //     <EmailIcon />
-              //   </InputAdornment>
-              // }
               {...field}
             />
           )}
@@ -56,11 +40,11 @@ export const CodeConfirmation = (props) => {
           }}
         />
 
-        <Button type="submit" fullWidth variant="last">
+        <HawaButton type="submit" fullWidth>
           {props.texts.confirmText}
-        </Button>
+        </HawaButton>
       </form>
-    </Container>
+    </div>
   );
 };
 CodeConfirmation.propTypes = {

package/src/blocks/AuthForms/NewPasswordForm.js

@@ -1,10 +1,6 @@
 import React, { useState } from "react";
-import { HawaTextField, HawaAlert, HawaTypography } from "../../elements";
+import { HawaTextField, HawaAlert, HawaButton } from "../../elements";
 import { Controller, FormProvider, useForm } from "react-hook-form";
-import InputAdornment from "@mui/material/InputAdornment";
-import PasswordIcon from "@mui/icons-material/HttpsOutlined";
-import Container from "@mui/material/Container";
-import Button from "@mui/material/Button";
 import PropTypes from "prop-types";
 
 export const NewPasswordForm = (props) => {
@@ -26,14 +22,12 @@ export const NewPasswordForm = (props) => {
   };
 
   return (
-    <Container maxWidth="xs" variant="auth">
+    <div className="flex flex-col divide-y divide-gray-300 bg-blue-300 rounded-xl p-4">
       {matchError && (
         <HawaAlert text={props.texts.passwordMatchError} severity="error" />
       )}
       {props.passwordChanged ? (
-        <HawaTypography style={{ textAlign: "center", margin: 5 }}>
-          {props.texts.passwordChanged}
-        </HawaTypography>
+        <div className="text-center">{props.texts.passwordChanged}</div>
       ) : (
         <FormProvider {...methods}>
           <form onSubmit={handleSubmit(handleSubmission)}>
@@ -48,11 +42,6 @@ export const NewPasswordForm = (props) => {
                   label={props.texts.passwordLabel}
                   placeholder={props.texts.passwordPlaceholder}
                   helperText={errors.password?.message}
-                  startAdornment={
-                    <InputAdornment position="start">
-                      <PasswordIcon />
-                    </InputAdornment>
-                  }
                   {...field}
                 />
               )}
@@ -71,11 +60,6 @@ export const NewPasswordForm = (props) => {
                   label={props.texts.confirmPasswordLabel}
                   placeholder={props.texts.confirmPasswordPlaceholder}
                   helperText={errors.confirmPassword?.message}
-                  startAdornment={
-                    <InputAdornment position="start">
-                      <PasswordIcon />
-                    </InputAdornment>
-                  }
                   {...field}
                 />
               )}
@@ -84,13 +68,13 @@ export const NewPasswordForm = (props) => {
               }}
             />
 
-            <Button type="submit" fullWidth variant="last">
+            <HawaButton type="submit" fullWidth>
               {props.texts.updatePassword}
-            </Button>
+            </HawaButton>
           </form>
         </FormProvider>
       )}
-    </Container>
+    </div>
   );
 };
 NewPasswordForm.propTypes = {

package/src/blocks/AuthForms/ResetPasswordForm.js

@@ -1,10 +1,6 @@
 import React from "react";
 import { Controller, useForm } from "react-hook-form";
-import { HawaTextField, HawaTypography } from "../../elements";
-import InputAdornment from "@mui/material/InputAdornment";
-import EmailIcon from "@mui/icons-material/MailOutline";
-import Container from "@mui/material/Container";
-import Button from "@mui/material/Button";
+import { HawaButton, HawaTextField } from "../../elements";
 import PropTypes from "prop-types";
 
 export const ResetPasswordForm = (props) => {
@@ -16,7 +12,7 @@ export const ResetPasswordForm = (props) => {
     control
   } = methods;
   return (
-    <Container maxWidth="xs" variant="auth">
+    <div className="flex flex-col divide-y divide-gray-300 bg-blue-300 rounded-xl p-4">
       {!props.sent ? (
         <form onSubmit={handleSubmit(props.handleResetPassword)}>
           <Controller
@@ -30,11 +26,6 @@ export const ResetPasswordForm = (props) => {
                 label={props.texts.emailLabel}
                 helperText={errors.email?.message}
                 placeholder={props.texts.emailPlaceholder}
-                startAdornment={
-                  <InputAdornment position="start">
-                    <EmailIcon />
-                  </InputAdornment>
-                }
                 {...field}
               />
             )}
@@ -47,16 +38,14 @@ export const ResetPasswordForm = (props) => {
               }
             }}
           />
-          <Button type="submit" fullWidth variant="last">
+          <HawaButton fullWidth type="submit">
             {props.texts.resetPassword}
-          </Button>
+          </HawaButton>
         </form>
       ) : (
-        <HawaTypography style={{ textAlign: "center", margin: 5 }}>
-          {props.texts.emailSentText}
-        </HawaTypography>
+        <div className="text-center">{props.texts.emailSentText}</div>
       )}
-    </Container>
+    </div>
   );
 };
 ResetPasswordForm.propTypes = {

package/src/blocks/AuthForms/SignInForm.js

@@ -1,14 +1,12 @@
 import React from "react";
-import { HawaTextField, HawaLogoButton, HawaAlert } from "../../elements";
+import {
+  HawaTextField,
+  HawaLogoButton,
+  HawaAlert,
+  HawaButton
+} from "../../elements";
 import { Controller, useForm } from "react-hook-form";
-import InputAdornment from "@mui/material/InputAdornment";
-import EmailIcon from "@mui/icons-material/MailOutline";
-import PasswordIcon from "@mui/icons-material/HttpsOutlined";
-import Container from "@mui/material/Container";
-import Typography from "@mui/material/Typography";
-import Button from "@mui/material/Button";
 import PropTypes from "prop-types";
-import Divider from "@mui/material/Divider";
 
 export const SignInForm = (props) => {
   const methods = useForm();
@@ -19,19 +17,15 @@ export const SignInForm = (props) => {
   } = methods;
 
   return (
-    <Container
-      variant="auth"
-      maxWidth="sm"
-      style={{ direction: props.lang === "ar" ? "rtl" : "ltr" }}
-    >
-      {props.showError && (
-        <HawaAlert
-          title={props.errorTitle}
-          text={props.errorText}
-          severity="error"
-        />
-      )}
+    <div className="flex flex-col divide-y divide-gray-300 bg-blue-300 rounded-xl p-4">
       <form onSubmit={handleSubmit(props.handleSignIn)}>
+        {props.showError && (
+          <HawaAlert
+            title={props.errorTitle}
+            text={props.errorText}
+            severity="error"
+          />
+        )}
         <Controller
           control={control}
           name="email"
@@ -43,11 +37,6 @@ export const SignInForm = (props) => {
               label={props.texts.emailLabel}
               helperText={errors.email?.message}
               placeholder={props.texts.emailPlaceholder}
-              startAdornment={
-                <InputAdornment position="start">
-                  <EmailIcon />
-                </InputAdornment>
-              }
               {...field}
             />
           )}
@@ -73,73 +62,61 @@ export const SignInForm = (props) => {
               label={props.texts.passwordLabel}
               placeholder={props.texts.passwordPlaceholder}
               helperText={errors.password?.message}
-              startAdornment={
-                <InputAdornment position="start">
-                  <PasswordIcon />
-                </InputAdornment>
-              }
               {...field}
             />
           )}
           rules={{ required: props.texts.passwordRequiredText }}
         />
-        <Typography
-          style={{
-            cursor: "pointer",
-            marginTop: 5,
-            width: "max-content",
-            fontSize: 15,
-            padding: 5
-          }}
+
+        <div
+          className="text-xs cursor-pointer w-fit"
           onClick={props.handleForgotPassword}
         >
           {props.texts.forgotPasswordText}
-        </Typography>
-        <Button type="submit" fullWidth variant="last">
+        </div>
+
+        <HawaButton fullWidth type="submit">
           {props.texts.signInText}
-        </Button>
+        </HawaButton>
+        <div className="font-semibold p-3 text-center text-sm">
+          {props.texts.newUserText}{" "}
+          <span
+            onClick={props.handleRouteToSignUp}
+            className="text-blue-600 cursor-pointer"
+          >
+            {props.texts.signUpText}
+          </span>
+        </div>
       </form>
-      <Typography
-        variant="subtitle2"
-        style={{ marginTop: 5, textAlign: "center", padding: 5 }}
-      >
-        {props.texts.newUserText}{" "}
-        <span
-          onClick={props.handleRouteToSignUp}
-          style={{
-            cursor: "pointer",
-            color: "blue",
-            textAlign: "center"
-          }}
-        >
-          {props.texts.signUpText}
-        </span>
-      </Typography>
-      <Divider />
-      <div style={{ display: "flex", flexDirection: "column" }}>
-        {props.viaGoogle && (
-          <HawaLogoButton
-            logo="google"
-            buttonText={props.texts.googleButtonLabel}
-            onClick={props.handleGoogleSignIn}
-          />
-        )}
-        {props.viaGithub && (
-          <HawaLogoButton
-            logo="github"
-            buttonText={props.texts.githubButtonLabel}
-            onClick={props.handleGithubSignIn}
-          />
-        )}
-        {props.viaTwitter && (
-          <HawaLogoButton
-            logo="twitter"
-            buttonText={props.texts.twitterButtonLabel}
-            onClick={props.handleTwitterSignIn}
-          />
-        )}
-      </div>
-    </Container>
+      {/* <Divider /> */}
+
+      {/* <div className="divide-y divide-gray-900"></div> */}
+      {props.viaGithub || props.viaGoogle || props.viaTwitter ? (
+        <div className="flex flex-col ">
+          {props.viaGoogle && (
+            <HawaLogoButton
+              logo="google"
+              buttonText={props.texts.googleButtonLabel}
+              onClick={props.handleGoogleSignIn}
+            />
+          )}
+          {props.viaGithub && (
+            <HawaLogoButton
+              logo="github"
+              buttonText={props.texts.githubButtonLabel}
+              onClick={props.handleGithubSignIn}
+            />
+          )}
+          {props.viaTwitter && (
+            <HawaLogoButton
+              logo="twitter"
+              buttonText={props.texts.twitterButtonLabel}
+              onClick={props.handleTwitterSignIn}
+            />
+          )}
+        </div>
+      ) : null}
+    </div>
   );
 };
 SignInForm.propTypes = {

package/src/blocks/AuthForms/SignInPhone.js

@@ -1,6 +1,6 @@
-import { Button, Container } from "@mui/material";
 import { useState } from "react";
 import { Controller, useForm } from "react-hook-form";
+import { HawaButton } from "../../elements";
 import HawaPhoneInput from "../../elements/HawaPhoneInput";
 
 export const SignInPhone = (props) => {
@@ -12,11 +12,7 @@ export const SignInPhone = (props) => {
     control
   } = methods;
   return (
-    <Container
-      maxWidth="xs"
-      variant="auth"
-      style={{ direction: props.lang === "ar" ? "rtl" : "ltr" }}
-    >
+    <div className="flex flex-col divide-y divide-gray-300 bg-blue-300 rounded-xl p-4">
       <form onSubmit={handleSubmit(props.onSubmit)}>
         <Controller
           control={control}
@@ -34,10 +30,10 @@ export const SignInPhone = (props) => {
             />
           )}
         />
-        <Button fullWidth type="submit" variant="last">
+        <HawaButton fullWidth type="submit">
           {props.SignInButtonText}
-        </Button>
+        </HawaButton>
       </form>
-    </Container>
+    </div>
   );
 };

package/src/blocks/AuthForms/SignUpForm.js

@@ -1,15 +1,12 @@
 import React from "react";
-import { HawaTextField, HawaLogoButton, HawaAlert } from "../../elements";
+import {
+  HawaTextField,
+  HawaLogoButton,
+  HawaAlert,
+  HawaButton
+} from "../../elements";
 import PropTypes from "prop-types";
 import { Controller, FormProvider, useForm } from "react-hook-form";
-import PersonIcon from "@mui/icons-material/PermIdentityOutlined";
-import InputAdornment from "@mui/material/InputAdornment";
-import EmailIcon from "@mui/icons-material/MailOutline";
-import PasswordIcon from "@mui/icons-material/HttpsOutlined";
-import Container from "@mui/material/Container";
-import Divider from "@mui/material/Divider";
-import Typography from "@mui/material/Typography";
-import Button from "@mui/material/Button";
 
 export const SignUpForm = (props) => {
   const methods = useForm();
@@ -20,11 +17,7 @@ export const SignUpForm = (props) => {
   } = methods;
 
   return (
-    <Container
-      maxWidth="xs"
-      variant="auth"
-      style={{ direction: props.lang === "ar" ? "rtl" : "ltr" }}
-    >
+    <div className="flex flex-col divide-y divide-gray-300 bg-blue-300 rounded-xl p-4">
       {props.showError && (
         <HawaAlert
           title={props.errorTitle}
@@ -46,11 +39,6 @@ export const SignUpForm = (props) => {
                 label={props.texts.fullNameLabel}
                 placeholder={props.texts.fullNamePlaceholder}
                 helperText={errors.fullName?.message}
-                startAdornment={
-                  <InputAdornment position="start">
-                    <PersonIcon />
-                  </InputAdornment>
-                }
                 {...field}
               />
             )}
@@ -70,11 +58,6 @@ export const SignUpForm = (props) => {
                 label={props.texts.emailLabel}
                 helperText={errors.email?.message}
                 placeholder={props.texts.emailPlaceholder}
-                startAdornment={
-                  <InputAdornment position="start">
-                    <EmailIcon />
-                  </InputAdornment>
-                }
                 {...field}
               />
             )}
@@ -99,68 +82,54 @@ export const SignUpForm = (props) => {
                 label={props.texts.passwordLabel}
                 placeholder={props.texts.passwordPlaceholder}
                 helperText={errors.password?.message}
-                startAdornment={
-                  <InputAdornment position="start">
-                    <PasswordIcon />
-                  </InputAdornment>
-                }
                 {...field}
               />
             )}
             rules={{ required: props.texts.passwordRequiredText }}
           />
 
-          <Button fullWidth variant="last" type="submit">
+          <HawaButton fullWidth type="submit">
             {props.texts.signUpText}
-          </Button>
+          </HawaButton>
         </form>
       </FormProvider>
 
-      <Typography
-        variant="subtitle2"
-        style={{
-          marginTop: 5,
-          textAlign: "center",
-          padding: 5
-        }}
-      >
+      <div className="font-semibold p-3 text-center text-sm">
         {props.texts.existingUserText}{" "}
         <span
           onClick={props.handleRouteToSignIn}
-          style={{
-            cursor: "pointer",
-            color: "blue",
-            textAlign: "center"
-          }}
+          className="text-blue-600 cursor-pointer"
         >
           {props.texts.signInText}
         </span>
-      </Typography>
-      <Divider />
-      <div style={{ display: "flex", flexDirection: "column" }}>
-        {props.viaGoogle && (
-          <HawaLogoButton
-            logo="google"
-            buttonText={props.texts.googleButtonLabel}
-            onClick={props.handleGoogleSignUp}
-          />
-        )}
-        {props.viaGithub && (
-          <HawaLogoButton
-            logo="github"
-            buttonText={props.texts.githubButtonLabel}
-            onClick={props.handleGithubSignUp}
-          />
-        )}
-        {props.viaTwitter && (
-          <HawaLogoButton
-            logo="twitter"
-            buttonText={props.texts.twitterButtonLabel}
-            onClick={props.handleTwitterSignUp}
-          />
-        )}
       </div>
-    </Container>
+
+      {props.viaGithub || props.viaGoogle || props.viaTwitter ? (
+        <div style={{ display: "flex", flexDirection: "column" }}>
+          {props.viaGoogle && (
+            <HawaLogoButton
+              logo="google"
+              buttonText={props.texts.googleButtonLabel}
+              onClick={props.handleGoogleSignUp}
+            />
+          )}
+          {props.viaGithub && (
+            <HawaLogoButton
+              logo="github"
+              buttonText={props.texts.githubButtonLabel}
+              onClick={props.handleGithubSignUp}
+            />
+          )}
+          {props.viaTwitter && (
+            <HawaLogoButton
+              logo="twitter"
+              buttonText={props.texts.twitterButtonLabel}
+              onClick={props.handleTwitterSignUp}
+            />
+          )}
+        </div>
+      ) : null}
+    </div>
   );
 };
 

package/src/elements/HawaButton.js

@@ -1,11 +1,14 @@
 import React from "react";
 
 export const HawaButton = (props) => {
+  let styles =
+    "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 px-5 py-2.5 text-center inline-flex items-center mr-2 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800";
+  if (props.fullWidth) {
+    styles =
+      "mt-2 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";
+  }
   return (
-    <button
-      type="button"
-      class="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 mr-2 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
-    >
+    <button type="button" className={styles} {...props}>
       {props.icon ? <div class="mr-2 -ml-1 w-5 h-5">{props.icon}</div> : null}
 
       {props.children}

package/src/elements/HawaPhoneInput.js

@@ -22,6 +22,17 @@ export default function HawaPhoneInput(props) {
   const theme = useTheme();
   return (
     <div>
+      <label
+        for="first_name"
+        className="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
+      >
+        {props.label}
+      </label>
+      <input
+        {...props}
+        className="mb-2 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"
+      />
+
       {label && <InputLabel>{props.label}</InputLabel>}
       <PhoneInput
         country={country ?? null}
@@ -41,6 +52,12 @@ export default function HawaPhoneInput(props) {
           width: "100%",
           borderRadius: theme.allBorderRadius
         }}
+        // inputClass="bg-red-900"
+        // inputClass="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"
+        dropdownClass="bg-blue-900"
+        buttonClass="bg-green-900"
+        // containerClass="bg-orange-900"
+        // containerClass="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"
         {...rest}
       />
     </div>

package/src/elements/HawaTextField.js

@@ -5,17 +5,17 @@ export const HawaTextField = (props) => {
     <div>
       <label
         for="first_name"
-        class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
+        className="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
       >
         {props.label}
       </label>
       <input
         {...props}
-        class="mb-2 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"
+        className="mb-2 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.helperText && (
-        <p class="mt-2 text-sm text-red-600 dark:text-red-500">
+        <p className="mt-2 text-sm text-red-600 dark:text-red-500">
           {/* <span class="font-medium">Oh, snapp!</span> */}
           {props.helperText}
         </p>