@sikka/hawa 0.1.7 → 0.1.9

package/package.json

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

package/src/blocks/AuthForms/SignInForm.tsx

@@ -1,16 +1,16 @@
 import React, { FC } from "react"
+import { Controller, useForm } from "react-hook-form"
+import clsx from "clsx"
+
 import {
   HawaTextField,
-  HawaLogoButton,
   HawaAlert,
   HawaPhoneInput,
+  InterfaceSettings,
 } from "../../elements"
-import { Controller, useForm } from "react-hook-form"
+import { Card, CardContent, CardFooter } from "../../elements/Card"
 import { Button } from "../../elements/Button"
-import { FaGithub, FaGoogle } from "react-icons/fa"
-import { Card, CardContent, CardFooter, CardHeader } from "../../elements/Card"
 import { Icons } from "../../elements/Icons"
-import clsx from "clsx"
 
 export const SignInForm: FC<SignInFormTypes> = (props) => {
   const {
@@ -20,165 +20,189 @@ export const SignInForm: FC<SignInFormTypes> = (props) => {
   } = useForm()
 
   return (
-    <Card dir={props.direction}>
-      <CardContent headless>
-        <form onSubmit={handleSubmit((e) => props.handleSignIn(e))}>
-          {props.showError && (
+    <div>
+      <Card dir={props.direction}>
+        <CardContent headless>
+          <form onSubmit={handleSubmit((e) => props.handleSignIn(e))}>
+            {/* an attempt to animate the alert showing  */}
+            {/* <div
+            className={clsx(
+              "h-0 overflow-clip bg-blue-500 transition-all",
+              props.showError ? "h-auto" : ""
+            )}
+          >
             <HawaAlert
               title={props.errorTitle}
               text={props.errorText}
               severity="error"
             />
-          )}
-          {props.signInType === "email" ? (
-            <Controller
-              control={control}
-              name="email"
-              render={({ field }) => (
-                <HawaTextField
-                  width="full"
-                  type="text"
-                  autoComplete="email"
-                  label={props.texts.emailLabel}
-                  helpertext={errors.email?.message}
-                  placeholder={props.texts.emailPlaceholder}
-                  value={field.value ?? ""}
-                  onChange={field.onChange}
-                />
-              )}
-              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,
-                },
-              }}
-            />
-          ) : props.signInType === "username" ? (
-            <Controller
-              control={control}
-              name="username"
-              render={({ field }) => {
-                return (
-                  <HawaTextField
-                    width="full"
-                    type="text"
-                    autoComplete="username"
-                    label={props.texts.usernameLabel}
-                    helpertext={errors.username?.message}
-                    placeholder={props.texts.usernamePlaceholder}
-                    onChange={field.onChange}
-                    value={field.value ?? ""}
-                  />
-                )
-              }}
-              rules={{
-                required: props.texts.usernameRequired,
-              }}
-            />
-          ) : (
-            <Controller
-              control={control}
-              name="phone"
-              render={({ field }) => <HawaPhoneInput label="Phone number" />}
-              rules={{ required: props.texts.phoneRequiredText }}
-            />
-          )}
-          {props.signInType !== "phone" && (
-            <>
+          </div> */}
+            {props.showError && (
+              <HawaAlert
+                title={props.errorTitle}
+                text={props.errorText}
+                severity="error"
+              />
+            )}
+            {props.signInType === "email" ? (
               <Controller
                 control={control}
-                name="password"
+                name="email"
                 render={({ field }) => (
                   <HawaTextField
                     width="full"
-                    autoComplete="current-password"
-                    type="password"
-                    label={props.texts.passwordLabel}
-                    placeholder={props.texts.passwordPlaceholder}
-                    helpertext={errors.password?.message}
-                    onChange={field.onChange}
+                    type="text"
+                    autoComplete="email"
+                    label={props.texts.emailLabel}
+                    helpertext={errors.email?.message}
+                    placeholder={props.texts.emailPlaceholder}
                     value={field.value ?? ""}
+                    onChange={field.onChange}
                   />
                 )}
                 rules={{
-                  required: props.texts.passwordRequiredText,
-                  minLength: 5,
+                  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,
+                  },
                 }}
               />
-              {!props.withoutResetPassword && (
-                <div
-                  onClick={props.handleForgotPassword}
-                  className="mb-3 w-fit cursor-pointer text-xs dark:text-gray-300"
-                >
-                  {props.texts.forgotPasswordText}
-                </div>
-              )}
-            </>
-          )}
-
-
-          <Button className="w-full" isLoading={props.isLoading}>
-            {props.texts.signInText}
-          </Button>
-          {!props.withoutSignUp && (
-            <div className="p-3 text-center text-sm font-semibold dark:text-gray-300">
-              {props.texts.newUserText}{" "}
-              <span
-                onClick={props.handleRouteToSignUp}
-                className="clickable-link"
-              >
-                {props.texts.createAccount}
-              </span>
-            </div>
-          )}
-        </form>
-      </CardContent>
-
-      {/* 3rd Party Sign Auth Buttons */}
-      {props.viaGithub || props.viaGoogle || props.viaTwitter ? (
-        <CardFooter className="grid grid-cols-1 gap-2 ">
-          {props.viaGoogle && (
-            <Button variant="outline" onClick={props.handleGoogleSignIn}>
-              <Icons.google
-                className={clsx(
-                  "h-4 w-4",
-                  props.direction === "rtl" ? "ml-2" : "mr-2"
-                )}
+            ) : props.signInType === "username" ? (
+              <Controller
+                control={control}
+                name="username"
+                render={({ field }) => {
+                  return (
+                    <HawaTextField
+                      width="full"
+                      type="text"
+                      autoComplete="username"
+                      label={props.texts.usernameLabel}
+                      helpertext={errors.username?.message}
+                      placeholder={props.texts.usernamePlaceholder}
+                      onChange={field.onChange}
+                      value={field.value ?? ""}
+                    />
+                  )
+                }}
+                rules={{
+                  required: props.texts.usernameRequired,
+                }}
               />
-              {props.texts.signInViaGoogleLabel}
-            </Button>
-          )}
-          {props.viaGithub && (
-            <Button variant="outline" onClick={props.handleGithubSignIn}>
-              <Icons.gitHub
-                className={clsx(
-                  "h-4 w-4",
-                  props.direction === "rtl" ? "ml-2" : "mr-2"
-                )}
+            ) : (
+              <Controller
+                control={control}
+                name="phone"
+                render={({ field }) => <HawaPhoneInput label="Phone number" />}
+                rules={{ required: props.texts.phoneRequiredText }}
               />
-              {props.texts.signInViaGithubLabel}
-            </Button>
-          )}
-          {props.viaTwitter && (
-            <Button variant="outline" onClick={props.handleTwitterSignIn}>
-              <Icons.twitter
-                className={clsx(
-                  "h-4 w-4",
-                  props.direction === "rtl" ? "ml-2" : "mr-2"
+            )}
+            {props.signInType !== "phone" && (
+              <>
+                <Controller
+                  control={control}
+                  name="password"
+                  render={({ field }) => (
+                    <HawaTextField
+                      width="full"
+                      autoComplete="current-password"
+                      type="password"
+                      label={props.texts.passwordLabel}
+                      placeholder={props.texts.passwordPlaceholder}
+                      helpertext={errors.password?.message}
+                      onChange={field.onChange}
+                      value={field.value ?? ""}
+                    />
+                  )}
+                  rules={{
+                    required: props.texts.passwordRequiredText,
+                    minLength: 5,
+                  }}
+                />
+                {!props.withoutResetPassword && (
+                  <div
+                    onClick={props.handleForgotPassword}
+                    className="mb-3 w-fit cursor-pointer text-xs dark:text-gray-300"
+                  >
+                    {props.texts.forgotPasswordText}
+                  </div>
                 )}
-              />
-              {props.texts.signInViaTwitterLabel}
+              </>
+            )}
+
+            <Button className="w-full" isLoading={props.isLoading}>
+              {props.texts.signInText}
             </Button>
-          )}
-        </CardFooter>
-      ) : null}
-    </Card>
+            {!props.withoutSignUp && (
+              <div className="p-3 text-center text-sm font-semibold dark:text-gray-300">
+                {props.texts.newUserText}{" "}
+                <span
+                  onClick={props.handleRouteToSignUp}
+                  className="clickable-link"
+                >
+                  {props.texts.createAccount}
+                </span>
+              </div>
+            )}
+          </form>
+        </CardContent>
+
+        {/* 3rd Party Sign Auth Buttons */}
+        {props.viaGithub || props.viaGoogle || props.viaTwitter ? (
+          <CardFooter className="grid grid-cols-1 gap-2 ">
+            {props.viaGoogle && (
+              <Button variant="outline" onClick={props.handleGoogleSignIn}>
+                <Icons.google
+                  className={clsx(
+                    "h-4 w-4",
+                    props.direction === "rtl" ? "ml-2" : "mr-2"
+                  )}
+                />
+                {props.texts.signInViaGoogleLabel}
+              </Button>
+            )}
+            {props.viaGithub && (
+              <Button variant="outline" onClick={props.handleGithubSignIn}>
+                <Icons.gitHub
+                  className={clsx(
+                    "h-4 w-4",
+                    props.direction === "rtl" ? "ml-2" : "mr-2"
+                  )}
+                />
+                {props.texts.signInViaGithubLabel}
+              </Button>
+            )}
+            {props.viaTwitter && (
+              <Button variant="outline" onClick={props.handleTwitterSignIn}>
+                <Icons.twitter
+                  className={clsx(
+                    "h-4 w-4",
+                    props.direction === "rtl" ? "ml-2" : "mr-2"
+                  )}
+                />
+                {props.texts.signInViaTwitterLabel}
+              </Button>
+            )}
+          </CardFooter>
+        ) : null}
+      </Card>
+      <InterfaceSettings
+        currentColorMode={props.currentColorMode}
+        currentLanguage={props.currentLanguage}
+        handleColorMode={props.handleColorMode}
+        handleLanguage={props.handleLanguage}
+      />
+    </div>
   )
 }
 
 type SignInFormTypes = {
+  handleLanguage?: () => void
+  currentLanguage?: any
+  handleColorMode?: () => void
+  currentColorMode?: any
   direction?: "rtl" | "ltr"
   showError?: any
   errorTitle?: string

package/src/elements/HawaAlert.tsx

@@ -2,6 +2,7 @@ import React, { useRef, useState, useEffect } from "react"
 import clsx from "clsx"
 import { HawaButton } from "./HawaButton"
 import { Button } from "./Button"
+// TODO: make handleClose to detect when the alert is closed from outside this component
 
 type AlertTypes = {
   severity: "info" | "warning" | "error" | "success"

package/src/elements/InterfaceSettings.tsx

@@ -0,0 +1,70 @@
+import React, { FC } from "react"
+import { HawaRadio } from "./HawaRadio"
+
+type TypographyTypes = {
+  handleLanguage: () => void
+  currentLanguage: any
+  handleColorMode: () => void
+  currentColorMode: any
+}
+export const InterfaceSettings: FC<TypographyTypes> = (props) => {
+  return (
+    <div className="mt-6 flex flex-row justify-between">
+      <HawaRadio
+        defaultValue={props.currentLanguage}
+        onChangeTab={props.handleLanguage}
+        design="tabs"
+        options={[
+          { value: "ar", label: "عربي" },
+          { value: "en", label: "English" },
+        ]}
+      />
+      <HawaRadio
+        defaultValue={props.currentColorMode}
+        onChangeTab={props.handleColorMode}
+        design="tabs"
+        options={[
+          {
+            value: "light",
+            label: (
+              <svg
+                width="15"
+                height="15"
+                viewBox="0 0 15 15"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+                className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90"
+              >
+                <path
+                  d="M7.5 0C7.77614 0 8 0.223858 8 0.5V2.5C8 2.77614 7.77614 3 7.5 3C7.22386 3 7 2.77614 7 2.5V0.5C7 0.223858 7.22386 0 7.5 0ZM2.1967 2.1967C2.39196 2.00144 2.70854 2.00144 2.90381 2.1967L4.31802 3.61091C4.51328 3.80617 4.51328 4.12276 4.31802 4.31802C4.12276 4.51328 3.80617 4.51328 3.61091 4.31802L2.1967 2.90381C2.00144 2.70854 2.00144 2.39196 2.1967 2.1967ZM0.5 7C0.223858 7 0 7.22386 0 7.5C0 7.77614 0.223858 8 0.5 8H2.5C2.77614 8 3 7.77614 3 7.5C3 7.22386 2.77614 7 2.5 7H0.5ZM2.1967 12.8033C2.00144 12.608 2.00144 12.2915 2.1967 12.0962L3.61091 10.682C3.80617 10.4867 4.12276 10.4867 4.31802 10.682C4.51328 10.8772 4.51328 11.1938 4.31802 11.3891L2.90381 12.8033C2.70854 12.9986 2.39196 12.9986 2.1967 12.8033ZM12.5 7C12.2239 7 12 7.22386 12 7.5C12 7.77614 12.2239 8 12.5 8H14.5C14.7761 8 15 7.77614 15 7.5C15 7.22386 14.7761 7 14.5 7H12.5ZM10.682 4.31802C10.4867 4.12276 10.4867 3.80617 10.682 3.61091L12.0962 2.1967C12.2915 2.00144 12.608 2.00144 12.8033 2.1967C12.9986 2.39196 12.9986 2.70854 12.8033 2.90381L11.3891 4.31802C11.1938 4.51328 10.8772 4.51328 10.682 4.31802ZM8 12.5C8 12.2239 7.77614 12 7.5 12C7.22386 12 7 12.2239 7 12.5V14.5C7 14.7761 7.22386 15 7.5 15C7.77614 15 8 14.7761 8 14.5V12.5ZM10.682 10.682C10.8772 10.4867 11.1938 10.4867 11.3891 10.682L12.8033 12.0962C12.9986 12.2915 12.9986 12.608 12.8033 12.8033C12.608 12.9986 12.2915 12.9986 12.0962 12.8033L10.682 11.3891C10.4867 11.1938 10.4867 10.8772 10.682 10.682ZM5.5 7.5C5.5 6.39543 6.39543 5.5 7.5 5.5C8.60457 5.5 9.5 6.39543 9.5 7.5C9.5 8.60457 8.60457 9.5 7.5 9.5C6.39543 9.5 5.5 8.60457 5.5 7.5ZM7.5 4.5C5.84315 4.5 4.5 5.84315 4.5 7.5C4.5 9.15685 5.84315 10.5 7.5 10.5C9.15685 10.5 10.5 9.15685 10.5 7.5C10.5 5.84315 9.15685 4.5 7.5 4.5Z"
+                  fill="currentColor"
+                  fill-rule="evenodd"
+                  clip-rule="evenodd"
+                ></path>
+              </svg>
+            ),
+          },
+          {
+            value: "dark",
+            label: (
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="24"
+                height="24"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                className="h-[1.2rem] w-[1.2rem]  transition-all dark:rotate-0 dark:scale-100"
+              >
+                <path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"></path>
+              </svg>
+            ),
+          },
+        ]}
+      />
+    </div>
+  )
+}

package/src/elements/index.ts

@@ -60,3 +60,4 @@ export * from "./Label"
 export * from "./Input"
 export * from "./Tooltip"
 export * from "./Card"
+export * from "./InterfaceSettings"

package/src/layout/HawaAppLayoutSimplified.tsx

@@ -71,7 +71,7 @@ export const HawaAppLayoutSimplified: React.FunctionComponent<
   }, [keepOpen])
 
   let drawerDefaultStyle =
-    "fixed top-0 z-40 flex h-full flex-col justify-between overflow-x-clip bg-layoutPrimary-500 transition-all"
+    "fixed top-0 z-40 flex h-full flex-col justify-between overflow-x-clip bg-card transition-all"
   //The width of the drawer when closed
   let closeDrawerWidth = 56
   //The width of the drawer when opened
@@ -96,7 +96,7 @@ export const HawaAppLayoutSimplified: React.FunctionComponent<
       {props.topBar && (
         <div
           className={clsx(
-            "fixed left-0 right-0 top-0 z-30 flex h-14 w-full items-center justify-between bg-layoutPrimary-500 p-2",
+            "fixed left-0 right-0 top-0 z-30 flex h-14 w-full items-center justify-between bg-primary-foreground p-2",
             isRTL ? "flex-row-reverse" : "flex-row"
           )}
         >
@@ -230,7 +230,7 @@ export const HawaAppLayoutSimplified: React.FunctionComponent<
         <div
           dir={direction}
           className={clsx(
-            "fixed z-50  mb-2 flex h-14 w-full flex-row items-center justify-center  bg-layoutPrimary-500  transition-all"
+            "fixed z-50  mb-2 flex h-14 w-full flex-row items-center justify-center  bg-primary-foreground  transition-all"
           )}
           style={{
             width:
@@ -271,7 +271,7 @@ export const HawaAppLayoutSimplified: React.FunctionComponent<
         <div
           className={clsx(
             // "no-scrollbar", TODO: make this optional to hide scrollbar or not
-            "fixed bottom-14 top-14 bg-layoutPrimary-500 py-2 transition-all",
+            "fixed bottom-14 top-14 bg-primary-foreground py-2 transition-all",
             // bg-yellow-400
             openSideMenu ? "overflow-auto" : "overflow-hidden"
           )}
@@ -373,7 +373,7 @@ export const HawaAppLayoutSimplified: React.FunctionComponent<
                               "flex flex-row gap-2 overflow-x-clip  rounded-inner p-2 px-2 text-xs",
                               isRTL ? "text-right" : "text-left",
                               props.currentPage === subIt.slug
-                                ? "bg-buttonPrimary-500 text-white hover:bg-buttonPrimary-500"
+                                ? "bg-buttonPrimary-500 text-white hover:bg-primary-foreground"
                                 : "hover:bg-layoutPrimary-500 dark:text-white"
                             )}
                             dir={direction}
@@ -404,7 +404,7 @@ export const HawaAppLayoutSimplified: React.FunctionComponent<
         {/* Drawer Footer */}
         <div
           className={clsx(
-            "fixed bottom-0 flex h-14 w-full items-center justify-center gap-2 overflow-clip bg-layoutPrimary-500  transition-all",
+            "fixed bottom-0 flex h-14 w-full items-center justify-center gap-2 overflow-clip bg-primary-foreground  transition-all",
 
             direction === "rtl" ? "flex-row-reverse" : "flex-row"
           )}

package/src/styles.css

@@ -2832,6 +2832,9 @@ body {
 .hover\:bg-primary:hover {
   background-color: hsl(var(--primary));
 }
+.hover\:bg-primary-foreground:hover {
+  background-color: hsl(var(--primary-foreground));
+}
 .hover\:bg-primary\/90:hover {
   background-color: hsl(var(--primary) / 0.9);
 }