@sikka/hawa 0.1.8 → 0.1.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sikka/hawa",
-  "version": "0.1.8",
+  "version": "0.1.10",
   "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/HawaRadio.tsx

@@ -22,9 +22,9 @@ export const HawaRadio: FC<RadioTypes> = ({
 }) => {
   const [selectedOption, setSelectedOption] = useState(props.defaultValue)
   let activeTabStyle =
-    "inline-block py-2 px-4  w-full text-white bg-primary rounded active"
+    "inline-block py-2 px-4  w-full text-white bg-primary rounded active dark:bg-primary dark:text-black"
   let inactiveTabStyle =
-    "inline-block py-2 px-4 w-full bg-gray-100 rounded hover:text-gray-900 hover:bg-gray-100 dark:hover:bg-gray-800 dark:hover:text-white"
+    "inline-block py-2 px-4 w-full dark:bg-background bg-gray-100 rounded hover:text-gray-900 hover:bg-gray-100 dark:hover:bg-gray-800 dark:hover:text-white"
   let orientationStyle = {
     horizontal: "flex flex-row",
     vertical: "flex flex-col",
@@ -38,7 +38,7 @@ export const HawaRadio: FC<RadioTypes> = ({
               props.options?.length > 2
                 ? "flex-wrap xs:max-w-full xs:flex-nowrap"
                 : "",
-              " max-w-fit  whitespace-nowrap rounded bg-gray-100 text-center text-sm font-medium text-gray-500 dark:text-gray-400",
+              " max-w-fit  whitespace-nowrap rounded border bg-gray-100 text-center text-sm font-medium text-gray-500 dark:bg-background  dark:text-gray-400",
               orientationStyle[orientation]
             )}
           >

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/styles.css

@@ -3261,6 +3261,9 @@ body {
   --tw-bg-opacity: 1;
   background-color: rgb(187 247 208 / var(--tw-bg-opacity));
 }
+:is(.dark .dark\:bg-primary) {
+  background-color: hsl(var(--primary));
+}
 :is(.dark .dark\:bg-red-200) {
   --tw-bg-opacity: 1;
   background-color: rgb(254 202 202 / var(--tw-bg-opacity));