@sikka/hawa 0.2.14-beta → 0.2.17-beta

package/postcss.config.js

@@ -1,6 +0,0 @@
-module.exports = {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
-  }
-}

package/rollup.config.js

@@ -1,73 +0,0 @@
-import resolve from "@rollup/plugin-node-resolve";
-import commonjs from "@rollup/plugin-commonjs";
-// import babel from "rollup-plugin-babel";
-import { babel } from "@rollup/plugin-babel";
-
-import external from "rollup-plugin-peer-deps-external";
-// import { terser } from "rollup-plugin-terser";
-import terser from "@rollup/plugin-terser";
-import postcss from "rollup-plugin-postcss";
-import typescript from "rollup-plugin-typescript2";
-import swc from "rollup-plugin-swc";
-import cleaner from "rollup-plugin-cleaner";
-import preserveDirectives from "rollup-plugin-preserve-directives";
-
-export default [
-  {
-    input: "src/index.ts",
-    output: [
-      {
-        dir: "dist/lib",
-        format: "cjs",
-        preserveModules: true,
-        exports: "auto"
-      },
-      {
-        dir: "dist/es",
-        format: "es",
-        exports: "named",
-        preserveModules: true
-      }
-    ],
-    plugins: [
-      cleaner({
-        targets: ["./dist/lib", "./dist/es"]
-      }),
-      postcss({ plugins: [], minimize: true }),
-      babel({
-        babelHelpers: "bundled",
-        exclude: "node_modules/**",
-        presets: [
-          "@babel/preset-env",
-          ["@babel/preset-react", { runtime: "automatic" }]
-        ]
-      }),
-      external(),
-      resolve({
-        extensions: [".tsx", ".ts"]
-      }),
-      typescript({ tsconfig: "./tsconfig.json" }),
-      terser(),
-      swc({
-        jsc: {
-          parser: {
-            syntax: "typescript"
-          }
-        }
-      }),
-      commonjs(),
-      preserveDirectives({ supressPreserveModulesWarning: true })
-    ],
-    onwarn: function (warning, handler) {
-      // Skip certain warnings
-
-      // should intercept ... but doesn't in some rollup versions
-      if (warning.code === "THIS_IS_UNDEFINED") {
-        return;
-      }
-
-      // console.warn everything else
-      handler(warning);
-    }
-  }
-];

package/src/blocks/Account/UserProfileForm.tsx

@@ -1,117 +0,0 @@
-import React, { FC } from "react"
-import { Controller, FormProvider, useForm } from "react-hook-form"
-import { HawaPhoneInput, HawaTextField } from "../../elements"
-import { Card, CardContent, CardFooter } from "../../elements/Card"
-import { Button } from "../../elements/Button"
-
-type UserProfileFormTypes = {
-  inputs: any
-  texts: any
-  handleUpdateProfile: any
-}
-
-export const UserProfileForm: FC<UserProfileFormTypes> = (props) => {
-  const methods = useForm()
-  const { inputs } = props
-  const {
-    formState: { errors },
-    handleSubmit,
-    control,
-  } = methods
-
-  return (
-    <Card>
-      <form onSubmit={handleSubmit((e) => props.handleUpdateProfile(e))}>
-        <CardContent headless>
-          <FormProvider {...methods}>
-            <Controller
-              control={control}
-              name="fullName"
-              render={({ field }) => (
-                <HawaTextField
-                  width="full"
-                  type="text"
-                  label={props.texts.fullNameLabel}
-                  placeholder={props.texts.fullNamePlaceholder}
-                  helpertext={errors.fullName?.message}
-                  {...field}
-                  value={field.value ?? ""}
-                />
-              )}
-            />
-            <Controller
-              control={control}
-              name="phoneNumber"
-              render={({ field }) => <HawaPhoneInput label="Phone number" />}
-            />
-            <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,
-                },
-              }}
-            />
-            <Controller
-              control={control}
-              name="password"
-              render={({ field }) => (
-                <HawaTextField
-                  width="full"
-                  type="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"
-                  label={props.texts.confirmPasswordLabel}
-                  placeholder={props.texts.confirmPasswordPlaceholder}
-                  helpertext={errors.confirmPassword?.message}
-                  {...field}
-                  value={field.value ?? ""}
-                />
-              )}
-              rules={{
-                required: props.texts.confirmPasswordRequiredText,
-              }}
-            />
-          </FormProvider>
-        </CardContent>
-        <CardFooter>
-          <Button className="w-full" type="submit">
-            {props.texts.updateProfile}
-          </Button>
-        </CardFooter>
-      </form>
-    </Card>
-  )
-}

package/src/blocks/Account/UserSettingsForm.tsx

@@ -1,20 +0,0 @@
-import React, { FC } from "react"
-import { Card, CardContent } from "../../elements/Card"
-
-type UserSettingsFormTypes = {
-  children: any
-  handleSaveSettings?: any
-  saveSettingsText?: string
-  blockTitle?: string
-}
-
-export const UserSettingsForm: FC<UserSettingsFormTypes> = (props) => {
-  return (
-    <Card>
-      <CardContent headless>
-        <div className="mb-2 text-sm font-bold">{props.blockTitle}</div>
-        <div className="flex flex-col gap-4 rounded  p-2">{props.children}</div>
-      </CardContent>
-    </Card>
-  )
-}

package/src/blocks/Account/index.ts

@@ -1,2 +0,0 @@
-export * from "./UserProfileForm"
-export * from "./UserSettingsForm"

package/src/blocks/AuthForms/AppLanding.tsx

@@ -1,190 +0,0 @@
-import React, { FC } from "react"
-import { HawaRadio } from "../../elements"
-import { Card, CardContent } from "../../elements/Card"
-import { Button } from "../../elements/Button"
-import { Icons } from "../../elements/Icons"
-
-type AppLandingTypes = {
-  texts?: {
-    newUserText?: string
-    createAccount?: string
-    continueWithGoogle?: string
-    continueWithTwitter?: string
-    continueWithApple?: string
-    continueWithMicrosoft?: string
-    continueWithGithub?: string
-    continueWithEmail?: string
-    continueWithPhone?: string
-  }
-  viaGoogle?: boolean
-  viaTwitter?: boolean
-  viaGithub?: boolean
-  viaMicrosoft?: boolean
-  viaEmail?: boolean
-  viaPhone?: boolean
-  viaApple?: boolean
-
-  withoutSignUp?: boolean
-  size: "small" | "normal" | "full"
-  direction: "rtl" | "ltr"
-  handleSignIn: () => void
-  handleSignUp: () => void
-  handleLanguage: () => void
-  handleColorMode: () => void
-  handleRouteToSignUp?: () => void
-  handleGoogle?: () => void
-  handleTwitter?: () => void
-  handleApple?: () => void
-  handleMicrosoft?: () => void
-  handleGithub?: () => void
-  handleEmail?: () => void
-  handlePhone?: () => void
-}
-
-export const AppLanding: FC<AppLandingTypes> = (props) => {
-  return (
-    <div dir={props.direction}>
-      <Card>
-        <CardContent headless className="flex flex-col gap-6">
-          {props.viaGoogle && (
-            <Button
-              className="flex flex-row items-center gap-2"
-              variant="outline"
-              onClick={props.handleGoogle}
-            >
-              <Icons.google className="h-4 w-4" />
-              {props.texts?.continueWithGoogle ?? "Continue With Google"}
-            </Button>
-          )}
-          {props.viaGithub && (
-            <Button
-              className="flex flex-row items-center gap-2"
-              variant="outline"
-              onClick={props.handleGithub}
-            >
-              <Icons.gitHub className="h-4 w-4" />
-              {props.texts?.continueWithGithub ?? "Continue With Github"}
-            </Button>
-          )}
-          {props.viaTwitter && (
-            <Button
-              className="flex flex-row items-center gap-2"
-              variant="outline"
-              onClick={props.handleTwitter}
-            >
-              <Icons.twitter className="h-4 w-4" />
-              {props.texts?.continueWithTwitter ?? "Continue With Twitter"}
-            </Button>
-          )}
-          {props.viaApple && (
-            <Button
-              className="flex flex-row items-center gap-2"
-              variant="outline"
-              onClick={props.handleApple}
-            >
-              <Icons.apple className="h-4 w-4" />
-              {props.texts?.continueWithApple ?? "Continue With Apple"}
-            </Button>
-          )}
-          {props.viaMicrosoft && (
-            <Button
-              className="flex flex-row items-center gap-2"
-              variant="outline"
-              onClick={props.handleMicrosoft}
-            >
-              <Icons.microsoft className="h-4 w-4" />
-              {props.texts?.continueWithMicrosoft ?? "Continue With Microsoft"}
-            </Button>
-          )}
-          {props.viaEmail && (
-            <Button
-              className="flex flex-row items-center gap-2"
-              variant="outline"
-              onClick={props.handleEmail}
-            >
-              <Icons.mail className="h-4 w-4" />
-              {props.texts?.continueWithEmail ?? "Continue With Email"}
-            </Button>
-          )}
-          {props.viaPhone && (
-            <Button
-              className="flex flex-row items-center gap-2"
-              variant="outline"
-              onClick={props.handlePhone}
-            >
-              <Icons.phone className="h-4 w-4" />
-              {props.texts?.continueWithPhone ?? "Continue With Phone"}
-            </Button>
-          )}
-
-          {!props.withoutSignUp && (
-            <div className="p-3 text-center text-sm font-normal dark:text-gray-300">
-              {props.texts.newUserText}
-              <span
-                onClick={props.handleRouteToSignUp}
-                className="clickable-link"
-              >
-                {props.texts.createAccount}
-              </span>
-            </div>
-          )}
-        </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"
-                    fillRule="evenodd"
-                    clipRule="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"
-                  strokeWidth="2"
-                  strokeLinecap="round"
-                  strokeLinejoin="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/CheckEmail.tsx

@@ -1,54 +0,0 @@
-import React, { useState, FC } from "react"
-import { HawaAlert, HawaPinInput } from "../../elements"
-import { Card, CardContent, CardFooter } from "../../elements/Card"
-import { Button } from "../../elements/Button"
-
-type CheckEmailBlocks = {
-  texts?: {
-    checkEmail: string
-    resendEmail: string
-    pleaseVerify: string
-  }
-  handleResend?: () => void
-}
-
-export const CheckEmail: FC<CheckEmailBlocks> = ({ texts, handleResend }) => {
-  return (
-    <Card>
-      <CardContent headless>
-        <div className="flex flex-col items-center justify-center text-center">
-          <div className="flex h-16 w-16 flex-col items-center justify-center rounded-3xl bg-primary text-6xl font-bold  text-primary-foreground">
-            <svg
-              stroke="currentColor"
-              fill="none"
-              stroke-width="2"
-              viewBox="0 0 24 24"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              height="0.5em"
-              width="0.5em"
-              xmlns="http://www.w3.org/2000/svg"
-              // {...props}
-            >
-              <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path>
-              <polyline points="22,6 12,13 2,6"></polyline>
-            </svg>
-          </div>
-          <div className="m-2 text-xl font-bold">
-            {texts?.checkEmail ?? "Check you email"}
-          </div>
-
-          <div className="text-sm">
-            {texts?.pleaseVerify ??
-              "Thank you for signing up! To complete your registration, we've sent a verification email to the address you provided. Please check your inbox and follow the instructions in the email to activate your account."}
-          </div>
-        </div>
-      </CardContent>
-      <CardFooter className="flex flex-col justify-center ">
-        <span className="clickable-link text-sm" onClick={handleResend}>
-          {texts?.resendEmail ?? "Resend Email"}
-        </span>
-      </CardFooter>
-    </Card>
-  )
-}

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="clickable-link">
-              {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,120 +0,0 @@
-import React, { useState, FC } from "react"
-import { HawaTextField, HawaAlert } 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
-  direction?: "rtl" | "ltr"
-  headless?: boolean
-  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 dir={props.direction}>
-      {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)}>
-            {!props.headless && (
-              <CardHeader>
-                <CardTitle>Create Password</CardTitle>
-                <CardDescription>
-                  Set a new password for your account
-                </CardDescription>
-              </CardHeader>
-            )}
-            <CardContent headless={props.headless}>
-              <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>
-  )
-}