@sikka/hawa 0.1.2 → 0.1.3-next

package/src/blocks/AuthForms/AppLanding.tsx

@@ -1,89 +0,0 @@
-import React, { FC } from "react"
-import { HawaButton, HawaRadio } from "../../elements"
-import { HawaContainer } from "../../layout/HawaContainer"
-import { Card, CardContent } from "../../elements/Card"
-import { Button } from "../../elements/Button"
-
-type AppLandingTypes = {
-  handleSignIn: () => void
-  handleSignUp: () => void
-  handleLanguage: () => void
-  handleColorMode: () => void
-  texts: {
-    signIn: string
-    signUp: string
-    lang: string
-  }
-  size: "small" | "normal" | "full"
-}
-export const AppLanding: FC<AppLandingTypes> = (props) => {
-  return (
-    <div>
-      <Card>
-        <CardContent headless className="flex flex-col gap-6">
-          {props.handleSignIn && (
-            <Button onClick={props.handleSignIn}>{props.texts.signIn}</Button>
-          )}
-          {props.handleSignUp && (
-            <Button onClick={props.handleSignUp}>{props.texts.signUp}</Button>
-          )}
-        </CardContent>
-      </Card>
-      <div className="mt-6 flex flex-row justify-between">
-        <HawaRadio
-          onChangeTab={props.handleLanguage}
-          design="tabs"
-          options={[
-            { value: "ar", label: "عربي" },
-            { value: "en", label: "English" },
-          ]}
-        />
-        <HawaRadio
-          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>
-    </div>
-  )
-}

package/src/blocks/AuthForms/CodeConfirmation.tsx

@@ -1,72 +0,0 @@
-import React, { useState, FC } from "react"
-import { HawaAlert, HawaPinInput } from "../../elements"
-import { Card, CardContent } from "../../elements/Card"
-import { Button } from "../../elements/Button"
-
-type TConfirmation = {
-  showError?: any
-  errorTitle?: any
-  errorText?: any
-  texts?: {
-    checkYourPhone: string
-    weSentCode: string
-    didntGetCode: string
-    resendCode: string
-    codeLabel: string
-    codePlaceholder: string
-    codeRequiredText: string
-    confirm: string
-    cancel: string
-  }
-  phoneNumber?: string
-  submitConfirmation?: any
-  handleSignIn?: any
-}
-
-export const CodeConfirmation: FC<TConfirmation> = (props) => {
-  const [pins, setPins] = useState(null)
-  return (
-    <Card>
-      <CardContent headless>
-        {props.showError && (
-          <HawaAlert
-            title={props.errorTitle}
-            text={props.errorText}
-            severity="error"
-          />
-        )}
-        <div className="mb-4 dark:text-white">
-          <div className="text-lg font-bold">
-            {props.texts.checkYourPhone ?? "Please check your phone"}
-          </div>
-          <div className="text-muted-foreground">
-            <span>{props.texts.weSentCode ?? "We've sent a code to "}</span>
-            <span>{props.phoneNumber}</span>
-          </div>{" "}
-        </div>
-        <form
-          onSubmit={(e) => {
-            e.preventDefault()
-            if (pins) {
-              props.submitConfirmation(pins)
-            }
-          }}
-        >
-          <HawaPinInput width="full" digits={6} getPins={(e) => setPins(e)} />
-          <div className=" py-2 text-center text-xs text-muted-foreground">
-            <span>{props.texts.didntGetCode ?? "Didn't get the code?"}</span>{" "}
-            <span className="cursor-pointer text-buttonPrimary-500">
-              {props.texts.resendCode ?? "Click to resend"}
-            </span>
-          </div>
-          <div className="mt-4  grid grid-cols-2 gap-2">
-            <Button variant="secondary">
-              {props.texts.cancel ?? "Cancel"}
-            </Button>
-            <Button>{props.texts.confirm ?? "Confirm"}</Button>
-          </div>
-        </form>
-      </CardContent>
-    </Card>
-  )
-}

package/src/blocks/AuthForms/NewPasswordForm.tsx

@@ -1,116 +0,0 @@
-import React, { useState, FC } from "react"
-import { HawaTextField, HawaAlert, HawaButton } from "../../elements"
-import { Controller, FormProvider, useForm } from "react-hook-form"
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "../../elements/Card"
-import { Button } from "../../elements/Button"
-
-type NewPasswordTypes = {
-  handleNewPassword: () => void
-  passwordChanged: any
-  texts: {
-    passwordPlaceholder: string
-    updatePassword: string
-    passwordRequiredText: string
-    passwordLabel: string
-    confirmPasswordPlaceholder: string
-    confirmPasswordLabel: string
-    confirmPasswordRequiredText: string
-    passwordMatchError: string
-    passwordChanged: string
-  }
-}
-
-export const NewPasswordForm: FC<NewPasswordTypes> = (props) => {
-  const [matchError, setMatchError] = useState(false)
-  const methods = useForm()
-  const {
-    formState: { errors },
-    handleSubmit,
-    control,
-  } = methods
-
-  const handleSubmission = (e: any) => {
-    if (e.password === e.confirmPassword) {
-      props.handleNewPassword()
-    } else {
-      setMatchError(true)
-    }
-  }
-
-  return (
-    <Card>
-      {matchError && (
-        <HawaAlert text={props.texts.passwordMatchError} severity="error" />
-      )}
-      {props.passwordChanged ? (
-        <CardContent headless>
-          <div className="text-center">{props.texts.passwordChanged}</div>
-        </CardContent>
-      ) : (
-        <FormProvider {...methods}>
-          <form onSubmit={handleSubmit(handleSubmission)}>
-            <CardHeader>
-              <CardTitle>Create Password</CardTitle>
-              <CardDescription>
-                Set a new password for your account
-              </CardDescription>
-            </CardHeader>
-            <CardContent>
-              <Controller
-                control={control}
-                name="password"
-                render={({ field }) => (
-                  <HawaTextField
-                    width="full"
-                    type="password"
-                    autoComplete="new-password"
-                    label={props.texts.passwordLabel}
-                    placeholder={props.texts.passwordPlaceholder}
-                    helpertext={errors.password?.message}
-                    {...field}
-                    value={field.value ?? ""}
-                  />
-                )}
-                rules={{
-                  required: props.texts.passwordRequiredText,
-                }}
-              />
-              <Controller
-                control={control}
-                name="confirmPassword"
-                render={({ field }) => (
-                  <HawaTextField
-                    width="full"
-                    type="password"
-                    autoComplete="new-password"
-                    label={props.texts.confirmPasswordLabel}
-                    placeholder={props.texts.confirmPasswordPlaceholder}
-                    helpertext={errors.confirmPassword?.message}
-                    {...field}
-                    value={field.value ?? ""}
-                  />
-                )}
-                rules={{
-                  required: props.texts.confirmPasswordRequiredText,
-                }}
-              />
-            </CardContent>
-
-            <CardFooter>
-              <Button className="w-full" type="submit">
-                {props.texts.updatePassword}
-              </Button>
-            </CardFooter>
-          </form>
-        </FormProvider>
-      )}
-    </Card>
-  )
-}

package/src/blocks/AuthForms/ResetPasswordForm.tsx

@@ -1,97 +0,0 @@
-import React, { FC } from "react"
-import { Controller, useForm } from "react-hook-form"
-import { HawaTextField } from "../../elements"
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "../../elements/Card"
-import { Button } from "../../elements/Button"
-
-type ResetPasswordType = {
-  handleResetPassword: () => void
-  handleRouteToSignUp: () => void
-  sent: any
-  texts: {
-    emailLabel: string
-    emailPlaceholder: string
-    emailRequiredText: string
-    emailInvalidText: string
-    emailSentText: string
-    resetPassword: string
-    signUpText: string
-    dontHaveAccount: string
-  }
-}
-
-export const ResetPasswordForm: FC<ResetPasswordType> = (props) => {
-  const methods = useForm()
-  const {
-    formState: { errors },
-    handleSubmit,
-    register,
-    control,
-  } = methods
-  return (
-    <Card>
-      {!props.sent ? (
-        <>
-          <CardHeader>
-            <CardTitle>Reset Password</CardTitle>
-            <CardDescription>
-              Enter your email to reset your account password
-            </CardDescription>
-          </CardHeader>
-          <form onSubmit={handleSubmit(props.handleResetPassword)}>
-            <CardContent>
-              <Controller
-                control={control}
-                name="email"
-                render={({ field }) => (
-                  <HawaTextField
-                    width="full"
-                    type="text"
-                    label={props.texts.emailLabel}
-                    helpertext={errors.email?.message}
-                    placeholder={props.texts.emailPlaceholder}
-                    {...field}
-                    value={field.value ?? ""}
-                  />
-                )}
-                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,
-                  },
-                }}
-              />
-              <div className=" pb-2 text-left text-sm dark:text-gray-300">
-                {props.texts.dontHaveAccount ?? "Don't have an account? "}
-                <span
-                  onClick={props.handleRouteToSignUp}
-                  className="cursor-pointer text-blue-600 dark:text-blue-400"
-                >
-                  {props.texts.signUpText ?? "Sign Up"}
-                </span>
-              </div>
-            </CardContent>
-            <CardFooter>
-              <Button type="submit" className="w-full">
-                {props.texts.resetPassword}
-              </Button>
-            </CardFooter>
-          </form>
-        </>
-      ) : (
-        <CardContent headless>
-          <div className="text-center">{props.texts.emailSentText}</div>
-        </CardContent>
-      )}
-    </Card>
-  )
-}

package/src/blocks/AuthForms/SignInBlock.tsx

@@ -1,60 +0,0 @@
-"use client"
-
-import { Icons } from "../../elements/Icons"
-import { Button } from "../../elements/Button"
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "../../elements/Card"
-import { Input } from "../../elements/Input"
-import { Label } from "../../elements/Label"
-
-export function SignInBlock() {
-  return (
-    <Card>
-      <CardHeader className="space-y-1">
-        <CardTitle className="text-2xl">Create an account</CardTitle>
-        <CardDescription>
-          Enter your email below to create your account
-        </CardDescription>
-      </CardHeader>
-      <CardContent className="grid gap-4">
-        <div className="grid grid-cols-2 gap-6">
-          <Button variant="outline">
-            <Icons.gitHub className="mr-2 h-4 w-4" />
-            Github
-          </Button>
-          <Button variant="outline">
-            <Icons.google className="mr-2 h-4 w-4" />
-            Google
-          </Button>
-        </div>
-        <div className="relative">
-          <div className="absolute inset-0 flex items-center">
-            <span className="w-full border-t" />
-          </div>
-          <div className="relative flex justify-center text-xs uppercase">
-            <span className="bg-background px-2 text-muted-foreground">
-              Or continue with
-            </span>
-          </div>
-        </div>
-        <div className="grid gap-2">
-          <Label htmlFor="email">Email</Label>
-          <Input id="email" type="email" placeholder="m@example.com" />
-        </div>
-        <div className="grid gap-2">
-          <Label htmlFor="password">Password</Label>
-          <Input id="password" type="password" />
-        </div>
-      </CardContent>
-      <CardFooter>
-        <Button className="w-full">Create account</Button>
-      </CardFooter>
-    </Card>
-  )
-}

package/src/blocks/AuthForms/SignInForm.tsx

@@ -1,228 +0,0 @@
-import React, { FC } from "react"
-import {
-  HawaTextField,
-  HawaLogoButton,
-  HawaAlert,
-  HawaPhoneInput,
-} from "../../elements"
-import { Controller, useForm } from "react-hook-form"
-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 {
-    formState: { errors },
-    handleSubmit,
-    control,
-  } = useForm()
-
-  return (
-    <Card dir={props.direction}>
-      <CardContent headless>
-        <form onSubmit={handleSubmit((e) => props.handleSignIn(e))}>
-          {props.showError && (
-            <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" && (
-            <>
-              <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>
-              )}
-            </>
-          )}
-
-
-          <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="cursor-pointer text-blue-600 dark:text-blue-400"
-              >
-                {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>
-  )
-}
-
-type SignInFormTypes = {
-  direction?: "rtl" | "ltr"
-  showError?: any
-  errorTitle?: string
-  errorText?: string
-  signInType?: "email" | "username" | "phone"
-  texts?: {
-    emailLabel?: string
-    emailPlaceholder?: string
-    emailRequiredText?: string
-    emailInvalidText?: string
-    usernameLabel?: string
-    usernamePlaceholder?: string
-    usernameRequired?: string
-    phoneRequiredText?: string
-    passwordLabel?: string
-    passwordPlaceholder?: string
-    passwordRequiredText?: string
-    forgotPasswordText?: string
-    newUserText?: string
-    createAccount?: string
-    signInText?: string
-    signInViaGoogleLabel?: string
-    signInViaGithubLabel?: string
-    signInViaTwitterLabel?: string
-  }
-  withoutResetPassword?: boolean
-  withoutSignUp?: boolean
-  /**
-   *show spinner if true
-   */
-  isLoading?: any
-  viaGoogle?: boolean
-  viaGithub?: boolean
-  viaTwitter?: boolean
-  /**
-   * Handle the sign in .
-   */
-  handleSignIn?: (e: any) => void
-  /**
-   * Handle routing to sign up page
-   */
-  handleRouteToSignUp?: () => void
-  handleForgotPassword?: () => void
-  handleGoogleSignIn?: () => void
-  handleGithubSignIn?: () => void
-  handleTwitterSignIn?: () => void
-}