npm - @erikey/react - Versions diffs - 0.4.26 → 0.4.28 - Mend

@erikey/react 0.4.26 → 0.4.28

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (145) hide show

package/dist/index.mjs +1 -1
package/dist/index.mjs.map +1 -1
package/package.json +2 -1
package/src/__tests__/auth-client.test.ts +105 -0
package/src/__tests__/security/localStorage-encryption.test.ts +171 -0
package/src/auth-client.ts +158 -0
package/src/dashboard-client.ts +60 -0
package/src/index.ts +88 -0
package/src/kv-client.ts +316 -0
package/src/lib/cross-origin-auth.ts +99 -0
package/src/stubs/captcha.ts +24 -0
package/src/stubs/hashes.ts +16 -0
package/src/stubs/index.ts +17 -0
package/src/stubs/passkey.ts +12 -0
package/src/stubs/qr-code.ts +10 -0
package/src/stubs/query.ts +16 -0
package/src/stubs/realtime.ts +17 -0
package/src/stubs/use-sync-external-store.ts +12 -0
package/src/styles.css +141 -0
package/src/types.ts +14 -0
package/src/ui/components/auth/auth-callback.tsx +36 -0
package/src/ui/components/auth/auth-form.tsx +310 -0
package/src/ui/components/auth/auth-view.tsx +435 -0
package/src/ui/components/auth/email-otp-button.tsx +53 -0
package/src/ui/components/auth/forms/email-otp-form.tsx +312 -0
package/src/ui/components/auth/forms/email-verification-form.tsx +271 -0
package/src/ui/components/auth/forms/forgot-password-form.tsx +173 -0
package/src/ui/components/auth/forms/magic-link-form.tsx +196 -0
package/src/ui/components/auth/forms/recover-account-form.tsx +143 -0
package/src/ui/components/auth/forms/reset-password-form.tsx +220 -0
package/src/ui/components/auth/forms/sign-in-form.tsx +323 -0
package/src/ui/components/auth/forms/sign-up-form.tsx +820 -0
package/src/ui/components/auth/forms/two-factor-form.tsx +381 -0
package/src/ui/components/auth/magic-link-button.tsx +54 -0
package/src/ui/components/auth/one-tap.tsx +53 -0
package/src/ui/components/auth/otp-input-group.tsx +65 -0
package/src/ui/components/auth/passkey-button.tsx +91 -0
package/src/ui/components/auth/provider-button.tsx +155 -0
package/src/ui/components/auth/sign-out.tsx +25 -0
package/src/ui/components/auth/wallet-button.tsx +192 -0
package/src/ui/components/auth-loading.tsx +21 -0
package/src/ui/components/captcha/captcha.tsx +91 -0
package/src/ui/components/captcha/recaptcha-badge.tsx +61 -0
package/src/ui/components/captcha/recaptcha-v2.tsx +58 -0
package/src/ui/components/captcha/recaptcha-v3.tsx +73 -0
package/src/ui/components/email/email-template.tsx +216 -0
package/src/ui/components/form-error.tsx +27 -0
package/src/ui/components/password-input.tsx +56 -0
package/src/ui/components/provider-icons.tsx +404 -0
package/src/ui/components/redirect-to-sign-in.tsx +16 -0
package/src/ui/components/redirect-to-sign-up.tsx +16 -0
package/src/ui/components/signed-in.tsx +20 -0
package/src/ui/components/signed-out.tsx +20 -0
package/src/ui/components/ui/alert.tsx +66 -0
package/src/ui/components/ui/button.tsx +70 -0
package/src/ui/components/ui/card.tsx +92 -0
package/src/ui/components/ui/checkbox.tsx +66 -0
package/src/ui/components/ui/field.tsx +248 -0
package/src/ui/components/ui/form.tsx +165 -0
package/src/ui/components/ui/input-otp.tsx +77 -0
package/src/ui/components/ui/input.tsx +21 -0
package/src/ui/components/ui/label.tsx +23 -0
package/src/ui/components/ui/separator.tsx +34 -0
package/src/ui/components/ui/skeleton.tsx +13 -0
package/src/ui/components/ui/textarea.tsx +18 -0
package/src/ui/components/user-avatar.tsx +151 -0
package/src/ui/hooks/use-auth-data.ts +193 -0
package/src/ui/hooks/use-authenticate.ts +64 -0
package/src/ui/hooks/use-captcha.tsx +151 -0
package/src/ui/hooks/use-hydrated.ts +13 -0
package/src/ui/hooks/use-lang.ts +32 -0
package/src/ui/hooks/use-success-transition.ts +41 -0
package/src/ui/hooks/use-theme.ts +39 -0
package/src/ui/index.ts +46 -0
package/src/ui/instantdb.ts +1 -0
package/src/ui/lib/auth-data-cache.ts +90 -0
package/src/ui/lib/auth-ui-provider.tsx +769 -0
package/src/ui/lib/gravatar-utils.ts +58 -0
package/src/ui/lib/image-utils.ts +55 -0
package/src/ui/lib/instantdb/model-names.ts +24 -0
package/src/ui/lib/instantdb/use-instant-options.ts +98 -0
package/src/ui/lib/instantdb/use-list-accounts.ts +38 -0
package/src/ui/lib/instantdb/use-list-sessions.ts +53 -0
package/src/ui/lib/instantdb/use-session.ts +55 -0
package/src/ui/lib/social-providers.ts +150 -0
package/src/ui/lib/tanstack/auth-ui-provider-tanstack.tsx +49 -0
package/src/ui/lib/tanstack/use-tanstack-options.ts +112 -0
package/src/ui/lib/triplit/model-names.ts +24 -0
package/src/ui/lib/triplit/use-conditional-query.ts +82 -0
package/src/ui/lib/triplit/use-list-accounts.ts +31 -0
package/src/ui/lib/triplit/use-list-sessions.ts +33 -0
package/src/ui/lib/triplit/use-session.ts +42 -0
package/src/ui/lib/triplit/use-triplit-hooks.ts +68 -0
package/src/ui/lib/triplit/use-triplit-token.ts +44 -0
package/src/ui/lib/utils.ts +119 -0
package/src/ui/lib/view-paths.ts +61 -0
package/src/ui/lib/wallet.ts +129 -0
package/src/ui/localization/admin-error-codes.ts +20 -0
package/src/ui/localization/anonymous-error-codes.ts +6 -0
package/src/ui/localization/api-key-error-codes.ts +32 -0
package/src/ui/localization/auth-localization.ts +865 -0
package/src/ui/localization/base-error-codes.ts +27 -0
package/src/ui/localization/captcha-error-codes.ts +17 -0
package/src/ui/localization/email-otp-error-codes.ts +7 -0
package/src/ui/localization/generic-oauth-error-codes.ts +3 -0
package/src/ui/localization/haveibeenpwned-error-codes.ts +4 -0
package/src/ui/localization/multi-session-error-codes.ts +3 -0
package/src/ui/localization/organization-error-codes.ts +57 -0
package/src/ui/localization/passkey-error-codes.ts +10 -0
package/src/ui/localization/phone-number-error-codes.ts +10 -0
package/src/ui/localization/stripe-localization.ts +12 -0
package/src/ui/localization/team-error-codes.ts +12 -0
package/src/ui/localization/two-factor-error-codes.ts +12 -0
package/src/ui/localization/username-error-codes.ts +9 -0
package/src/ui/server.ts +4 -0
package/src/ui/style.css +146 -0
package/src/ui/tanstack.ts +1 -0
package/src/ui/triplit.ts +1 -0
package/src/ui/types/account-options.ts +35 -0
package/src/ui/types/additional-fields.ts +21 -0
package/src/ui/types/any-auth-client.ts +6 -0
package/src/ui/types/api-key.ts +9 -0
package/src/ui/types/auth-client.ts +41 -0
package/src/ui/types/auth-hooks.ts +81 -0
package/src/ui/types/auth-mutators.ts +21 -0
package/src/ui/types/avatar-options.ts +29 -0
package/src/ui/types/captcha-options.ts +32 -0
package/src/ui/types/captcha-provider.ts +7 -0
package/src/ui/types/credentials-options.ts +38 -0
package/src/ui/types/delete-user-options.ts +7 -0
package/src/ui/types/email-verification-options.ts +7 -0
package/src/ui/types/fetch-error.ts +6 -0
package/src/ui/types/generic-oauth-options.ts +16 -0
package/src/ui/types/gravatar-options.ts +21 -0
package/src/ui/types/image.ts +7 -0
package/src/ui/types/invitation.ts +10 -0
package/src/ui/types/link.ts +7 -0
package/src/ui/types/organization-options.ts +106 -0
package/src/ui/types/password-validation.ts +16 -0
package/src/ui/types/profile.ts +15 -0
package/src/ui/types/refetch.ts +1 -0
package/src/ui/types/render-toast.ts +9 -0
package/src/ui/types/sign-up-options.ts +7 -0
package/src/ui/types/social-options.ts +16 -0
package/src/ui/types/team-options.ts +47 -0

package/src/ui/components/email/email-template.tsx ADDED Viewed

@@ -0,0 +1,216 @@
+import {
+    Body,
+    Button,
+    Container,
+    Head,
+    Heading,
+    Hr,
+    Html,
+    Img,
+    Link,
+    Preview,
+    Section,
+    Tailwind,
+    Text
+} from "@react-email/components"
+import type { ReactNode } from "react"
+import { cn } from "../../lib/utils"
+export interface EmailTemplateClassNames {
+    body?: string
+    button?: string
+    container?: string
+    image?: string
+    content?: string
+    footer?: string
+    heading?: string
+    hr?: string
+    link?: string
+}
+export interface EmailTemplateProps {
+    classNames?: EmailTemplateClassNames
+    action?: string
+    /** @default process.env.BASE_URL || process.env.NEXT_PUBLIC_BASE_URL */
+    baseUrl?: string
+    content: ReactNode
+    heading: ReactNode
+    /** @default `${baseUrl}/apple-touch-icon.png` */
+    imageUrl?: string
+    preview?: string
+    /** @default process.env.SITE_NAME || process.env.NEXT_PUBLIC_SITE_NAME */
+    siteName?: string
+    url?: string
+    /** @default "vercel" */
+    variant?: "vercel"
+}
+export const EmailTemplate = ({
+    classNames,
+    action,
+    baseUrl,
+    content,
+    heading,
+    imageUrl,
+    preview,
+    siteName,
+    variant = "vercel",
+    url
+}: EmailTemplateProps) => {
+    baseUrl =
+        baseUrl || process.env.BASE_URL || process.env.NEXT_PUBLIC_BASE_URL
+    imageUrl = imageUrl || `${baseUrl}/apple-touch-icon.png`
+    siteName =
+        siteName || process.env.SITE_NAME || process.env.NEXT_PUBLIC_SITE_NAME
+    preview = preview || (typeof heading === "string" ? heading : undefined)
+    return (
+        <Html>
+            <Head>
+                <meta name="x-apple-disable-message-reformatting" />
+                <meta content="light dark" name="color-scheme" />
+                <meta content="light dark" name="supported-color-schemes" />
+                <style type="text/css">
+                    {`
+                        :root {
+                            color-scheme: light dark;
+                            supported-color-schemes: light dark;
+                        }
+                    `}
+                </style>
+                <style type="text/css">
+                    {`
+                        html, body {
+                            background-color: #ffffff;
+                            color: #000000;
+                        }
+                        a {
+                            color: #000000;
+                        }
+                        .border-color {
+                            border-color: #eaeaea;
+                        }
+                        .action-button {
+                            background-color: #000000 !important;
+                            color: #ffffff !important;
+                        }
+                        @media (prefers-color-scheme: dark) {
+                            html, body {
+                                background-color: #000000 !important;
+                                color: #ffffff !important;
+                            }
+                            a {
+                                color: #ffffff;
+                            }
+                            .border-color {
+                                border-color: #333333 !important;
+                            }
+                            .action-button {
+                                background-color: rgb(38, 38, 38) !important;
+                                color: #ffffff !important;
+                            }
+                        }
+                    `}
+                </style>
+            </Head>
+            {preview && <Preview>{preview}</Preview>}
+            <Tailwind>
+                <Body
+                    className={cn(
+                        "mx-auto my-auto px-2 font-sans",
+                        classNames?.body
+                    )}
+                >
+                    <Container className="mx-auto my-[40px] max-w-[465px] rounded border border-color border-solid p-[20px]">
+                        <Section className="mt-[32px]">
+                            <Img
+                                alt={siteName}
+                                className={cn(
+                                    "mx-auto my-0 rounded-full",
+                                    classNames?.image
+                                )}
+                                height="40"
+                                src={imageUrl}
+                                width="40"
+                            />
+                        </Section>
+                        <Heading
+                            className={cn(
+                                "mx-0 my-[30px] p-0 text-center font-bold text-[24px]",
+                                classNames?.heading
+                            )}
+                        >
+                            {heading}
+                        </Heading>
+                        <Text
+                            className={cn(
+                                "text-[14px] leading-[24px]",
+                                classNames?.content
+                            )}
+                        >
+                            {content}
+                        </Text>
+                        {action && url && (
+                            <Section className="mt-[32px] mb-[32px] text-center">
+                                <Button
+                                    className={cn(
+                                        "action-button rounded px-5 py-3 text-center font-semibold text-[12px] no-underline",
+                                        classNames?.button
+                                    )}
+                                    href={url}
+                                >
+                                    {action}
+                                </Button>
+                            </Section>
+                        )}
+                        <Hr
+                            className={cn(
+                                "mx-0 my-[26px] w-full border border-color border-solid",
+                                classNames?.hr
+                            )}
+                        />
+                        <Text
+                            className={cn(
+                                "text-[#666666] text-[12px] leading-[24px]",
+                                classNames?.footer
+                            )}
+                        >
+                            {siteName && <>{siteName} </>}
+                            {baseUrl && (
+                                <Link
+                                    className={cn(
+                                        "no-underline",
+                                        classNames?.link
+                                    )}
+                                    href={baseUrl}
+                                >
+                                    {baseUrl
+                                        ?.replace("https://", "")
+                                        .replace("http://", "")}
+                                </Link>
+                            )}
+                        </Text>
+                    </Container>
+                </Body>
+            </Tailwind>
+        </Html>
+    )
+}

package/src/ui/components/form-error.tsx ADDED Viewed

@@ -0,0 +1,27 @@
+"use client"
+import { AlertCircle } from "lucide-react"
+import { useFormState } from "react-hook-form"
+import { cn } from "../lib/utils"
+import type { AuthFormClassNames } from "./auth/auth-form"
+import { Alert, AlertDescription, AlertTitle } from "./ui/alert"
+export interface FormErrorProps {
+    title?: string
+    classNames?: AuthFormClassNames
+}
+export function FormError({ title, classNames }: FormErrorProps) {
+    const { errors } = useFormState()
+    if (!errors.root?.message) return null
+    return (
+        <Alert variant="destructive" className={cn(classNames?.error)}>
+            <AlertCircle className="self-center" />
+            <AlertTitle>{title || "Error"}</AlertTitle>
+            <AlertDescription>{errors.root.message}</AlertDescription>
+        </Alert>
+    )
+}

package/src/ui/components/password-input.tsx ADDED Viewed

@@ -0,0 +1,56 @@
+"use client"
+import { EyeIcon, EyeOffIcon } from "lucide-react"
+import { type ComponentProps, useState } from "react"
+import { cn } from "../lib/utils"
+import { Button } from "./ui/button"
+import { Input } from "./ui/input"
+export function PasswordInput({
+    className,
+    enableToggle,
+    onChange,
+    ...props
+}: ComponentProps<typeof Input> & { enableToggle?: boolean }) {
+    const [disabled, setDisabled] = useState(true)
+    const [isVisible, setIsVisible] = useState(false)
+    return (
+        <div className="relative">
+            <Input
+                className={cn(enableToggle && "pr-10", className)}
+                {...props}
+                type={isVisible && enableToggle ? "text" : "password"}
+                onChange={(event) => {
+                    setDisabled(!event.target.value)
+                    onChange?.(event)
+                }}
+            />
+            {enableToggle && (
+                <>
+                    <Button
+                        className="!bg-transparent absolute top-0 right-0"
+                        disabled={disabled}
+                        size="icon"
+                        type="button"
+                        variant="ghost"
+                        onClick={() => setIsVisible(!isVisible)}
+                    >
+                        {isVisible ? <EyeIcon /> : <EyeOffIcon />}
+                    </Button>
+                    <style>{`
+                        .hide-password-toggle::-ms-reveal,
+                        .hide-password-toggle::-ms-clear {
+                            visibility: hidden;
+                            pointer-events: none;
+                            display: none;
+                        }
+                    `}</style>
+                </>
+            )}
+        </div>
+    )
+}