@vvedantb/native-ui 0.6.0 → 0.7.0

package/src/auth/SignInScreen.tsx

@@ -0,0 +1,302 @@
+import { useState, type ReactNode } from "react";
+import { Text, View } from "react-native";
+import { useSignIn, useSignUp } from "@clerk/clerk-expo";
+import { useRouter } from "expo-router";
+import { Button } from "../Button";
+import { textStyle } from "../controlStyles";
+import { Input } from "../Input";
+import { toast } from "../toastStore";
+import { useScheme } from "../useScheme";
+import { AuthScreen, FieldError, OrDivider } from "./AuthScreen";
+import { authErrorMessage } from "./authErrors";
+import { GoogleSignInButton, type AuthNavigationOptions } from "./GoogleSignInButton";
+
+export type SignInMode = "sign-in" | "sign-up";
+
+/** The messages the screen can show. Generic: none names a provider. */
+export const AUTH_MESSAGES = {
+  missingFields: "Enter your email and password",
+  signInFailed: "Sign in failed",
+  invalidCredentials: "Invalid email or password",
+  signUpFailed: "Could not create account",
+  verifyFailed: "Invalid code",
+  missingCode: "Enter the code from the email",
+  needsAnotherStep: "This account needs another step to sign in. Finish it on the web.",
+} as const;
+
+export type SignInScreenProps = AuthNavigationOptions & {
+  /** Default `"sign-in"`. `"sign-up"` creates the account and checks an emailed code. */
+  mode?: SignInMode;
+  /** Default "Welcome back", or "Create account" in `sign-up`. */
+  title?: string;
+  /** Default "Sign in to continue", or "Sign up to get started" in `sign-up`. */
+  subtitle?: string;
+  /** The app URL scheme, such as `"vibot"`, for the Google redirect `scheme://sso-callback`. */
+  scheme: string;
+  /** Default `"sso-callback"`. */
+  redirectPath?: string;
+  /** Default `true`. */
+  showGoogle?: boolean;
+  /** Default "Continue with Google". */
+  googleLabel?: string;
+  /** In `sign-in`: the "Sign up" link in the footer. No link without it. */
+  signUpHref?: string;
+  /** In `sign-up`: the "Sign in" link in the footer. No link without it. */
+  signInHref?: string;
+  /** Sign-up rejects a shorter password before sending it. Default: no check. */
+  minPasswordLength?: number;
+  /** Default `"toast"`. `"inline"` shows errors under the fields. */
+  errorDisplay?: "toast" | "inline";
+  /** Prefix for every `testID`: `sign-in-email`, `sign-in-password`, `sign-in-submit` and the rest. Default the mode. */
+  testIDPrefix?: string;
+  /** Above the title. App brand chrome goes here. */
+  header?: ReactNode;
+  /** Below the footer link row, such as an app credit. */
+  footer?: ReactNode;
+};
+
+/**
+ * Email and password, and Google, sign-in or sign-up. Sign-up sends an email
+ * code and checks it before the session starts. On success it calls
+ * `onSuccess`, or `router.replace(afterAuthHref, replaceOptions)`.
+ *
+ * Forgot-password is not here: an app that needs it keeps its own screen.
+ */
+export function SignInScreen({
+  mode = "sign-in",
+  title,
+  subtitle,
+  scheme,
+  redirectPath,
+  afterAuthHref = "/",
+  replaceOptions,
+  onSuccess,
+  showGoogle = true,
+  googleLabel,
+  signUpHref,
+  signInHref,
+  minPasswordLength,
+  errorDisplay = "toast",
+  testIDPrefix,
+  header,
+  footer,
+}: SignInScreenProps) {
+  const signInState = useSignIn();
+  const signUpState = useSignUp();
+  const router = useRouter();
+  const colorScheme = useScheme();
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [code, setCode] = useState("");
+  const [pendingVerification, setPendingVerification] = useState(false);
+  const [error, setError] = useState("");
+  const [submitting, setSubmitting] = useState(false);
+  const signUp = mode === "sign-up";
+  const id = (name: string) => `${testIDPrefix ?? mode}-${name}`;
+
+  const fail = (heading: string, message: string) => {
+    if (errorDisplay === "inline") setError(message);
+    else toast.error(heading, message === heading ? undefined : { description: message });
+  };
+
+  const done = () => {
+    if (onSuccess) onSuccess();
+    else router.replace(afterAuthHref, replaceOptions);
+  };
+
+  const onSignIn = async () => {
+    const { isLoaded, signIn, setActive } = signInState;
+    if (!isLoaded || !signIn || !setActive || submitting) return;
+    if (!email || !password) return fail(AUTH_MESSAGES.signInFailed, AUTH_MESSAGES.missingFields);
+    setSubmitting(true);
+    setError("");
+    try {
+      const attempt = await signIn.create({ identifier: email, password });
+      if (attempt.status === "complete" && attempt.createdSessionId) {
+        await setActive({ session: attempt.createdSessionId });
+        done();
+      } else {
+        fail(AUTH_MESSAGES.signInFailed, AUTH_MESSAGES.needsAnotherStep);
+      }
+    } catch (caught) {
+      fail(AUTH_MESSAGES.signInFailed, authErrorMessage(caught, AUTH_MESSAGES.invalidCredentials));
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  const onSignUp = async () => {
+    const { isLoaded, signUp: attempt } = signUpState;
+    if (!isLoaded || !attempt || submitting) return;
+    if (!email || !password) return fail(AUTH_MESSAGES.signUpFailed, AUTH_MESSAGES.missingFields);
+    if (minPasswordLength && password.length < minPasswordLength) {
+      return fail(AUTH_MESSAGES.signUpFailed, `Use at least ${minPasswordLength} characters for the password`);
+    }
+    setSubmitting(true);
+    setError("");
+    try {
+      await attempt.create({ emailAddress: email, password });
+      await attempt.prepareEmailAddressVerification({ strategy: "email_code" });
+      setPendingVerification(true);
+    } catch (caught) {
+      fail(AUTH_MESSAGES.signUpFailed, authErrorMessage(caught, AUTH_MESSAGES.signUpFailed));
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  const onVerify = async () => {
+    const { isLoaded, signUp: attempt, setActive } = signUpState;
+    if (!isLoaded || !attempt || !setActive || submitting) return;
+    if (!code) return fail(AUTH_MESSAGES.verifyFailed, AUTH_MESSAGES.missingCode);
+    setSubmitting(true);
+    setError("");
+    try {
+      const result = await attempt.attemptEmailAddressVerification({ code });
+      if (result.status === "complete" && result.createdSessionId) {
+        await setActive({ session: result.createdSessionId });
+        done();
+      } else {
+        fail(AUTH_MESSAGES.verifyFailed, AUTH_MESSAGES.needsAnotherStep);
+      }
+    } catch (caught) {
+      fail(AUTH_MESSAGES.verifyFailed, authErrorMessage(caught, AUTH_MESSAGES.verifyFailed));
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  const linkHref = signUp ? signInHref : signUpHref;
+  const footerRow = (
+    <>
+      {linkHref && !pendingVerification ? (
+        <>
+          <Text className="font-instrument-sans text-sm" style={textStyle("muted", colorScheme)}>
+            {signUp ? "Already have an account?" : "Don't have an account?"}
+          </Text>
+          <Button
+            testID={id(signUp ? "sign-in-link" : "sign-up-link")}
+            variant="link"
+            size="sm"
+            fullWidth={false}
+            onPress={() => router.push(linkHref)}
+          >
+            {signUp ? "Sign in" : "Sign up"}
+          </Button>
+        </>
+      ) : null}
+      {footer}
+    </>
+  );
+  const hasFooter = Boolean((linkHref && !pendingVerification) || footer);
+
+  if (pendingVerification) {
+    return (
+      <AuthScreen
+        testID={id("screen")}
+        title="Check your email"
+        subtitle="Enter the code we sent to your email."
+        header={header}
+        footer={hasFooter ? footerRow : undefined}
+      >
+        <Input
+          testID={id("code")}
+          accessibilityLabel="Verification code"
+          value={code}
+          placeholder="Verification code"
+          keyboardType="number-pad"
+          autoComplete="one-time-code"
+          textContentType="oneTimeCode"
+          autoFocus
+          returnKeyType="go"
+          onChangeText={setCode}
+          onSubmitEditing={() => void onVerify()}
+        />
+        <FieldError testID={id("error")} message={error} />
+        <Button testID={id("verify")} loading={submitting} onPress={() => void onVerify()}>
+          Verify
+        </Button>
+        <Button
+          testID={id("back")}
+          variant="ghost"
+          onPress={() => {
+            setPendingVerification(false);
+            setCode("");
+            setError("");
+          }}
+        >
+          Use a different email
+        </Button>
+      </AuthScreen>
+    );
+  }
+
+  return (
+    <AuthScreen
+      testID={id("screen")}
+      title={title ?? (signUp ? "Create account" : "Welcome back")}
+      subtitle={subtitle ?? (signUp ? "Sign up to get started" : "Sign in to continue")}
+      header={header}
+      footer={hasFooter ? footerRow : undefined}
+    >
+      {showGoogle ? (
+        <>
+          <GoogleSignInButton
+            testID={id("google")}
+            scheme={scheme}
+            redirectPath={redirectPath}
+            afterAuthHref={afterAuthHref}
+            replaceOptions={replaceOptions}
+            onSuccess={onSuccess}
+            onError={(message) => fail(message, message)}
+            label={googleLabel}
+            disabled={submitting}
+          />
+          <OrDivider />
+        </>
+      ) : null}
+      <Input
+        testID={id("email")}
+        accessibilityLabel="Email"
+        autoCapitalize="none"
+        autoComplete="email"
+        textContentType="emailAddress"
+        keyboardType="email-address"
+        returnKeyType="next"
+        value={email}
+        placeholder="Email"
+        onChangeText={setEmail}
+      />
+      <Input
+        testID={id("password")}
+        accessibilityLabel="Password"
+        autoCapitalize="none"
+        autoComplete={signUp ? "new-password" : "password"}
+        textContentType={signUp ? "newPassword" : "password"}
+        secureTextEntry
+        returnKeyType="go"
+        value={password}
+        placeholder="Password"
+        onChangeText={setPassword}
+        onSubmitEditing={() => void (signUp ? onSignUp() : onSignIn())}
+      />
+      <FieldError testID={id("error")} message={error} />
+      <Button
+        testID={id("submit")}
+        loading={submitting}
+        onPress={() => void (signUp ? onSignUp() : onSignIn())}
+      >
+        {signUp ? "Create account" : "Sign in"}
+      </Button>
+      {/* Bot protection mounts its widget here on web sign-up. */}
+      {signUp ? <View nativeID="clerk-captcha" /> : null}
+    </AuthScreen>
+  );
+}
+
+export type SignUpScreenProps = Omit<SignInScreenProps, "mode">;
+
+/** `SignInScreen` with `mode="sign-up"`. */
+export function SignUpScreen(props: SignUpScreenProps) {
+  return <SignInScreen {...props} mode="sign-up" />;
+}

package/src/auth/authErrors.ts

@@ -0,0 +1,19 @@
+import { isClerkAPIResponseError } from "@clerk/clerk-expo";
+
+/** Words that must not reach the user: the auth provider and stack names. */
+const PRODUCT_NAMES = /\b(clerk|convex)\b/i;
+
+/**
+ * A message to show for an auth error. An API error gives its first
+ * `longMessage` or `message` (such as "Password is incorrect."); anything
+ * else, or a message that names the provider, gives `fallback`. Never shows
+ * a raw exception message.
+ */
+export function authErrorMessage(error: unknown, fallback: string): string {
+  if (isClerkAPIResponseError(error)) {
+    const first = error.errors[0];
+    const message = first?.longMessage ?? first?.message;
+    if (message && !PRODUCT_NAMES.test(message)) return message;
+  }
+  return fallback;
+}

package/src/auth/index.ts

@@ -0,0 +1,22 @@
+// Clerk + Convex providers and the shared sign-in and sign-up screens. On
+// `@vvedantb/native-ui/auth` only: they import `@clerk/clerk-expo`, `convex`,
+// `expo-auth-session`, `expo-web-browser` and `expo-router`, and Metro does not
+// tree-shake.
+export { AuthProviders } from "./AuthProviders";
+export type { AuthProvidersProps } from "./AuthProviders";
+export { AuthScreen, OrDivider, FieldError } from "./AuthScreen";
+export type { AuthScreenProps } from "./AuthScreen";
+export { authErrorMessage } from "./authErrors";
+export {
+  GoogleSignInButton,
+  useGoogleSignIn,
+  useWarmUpBrowser,
+  GOOGLE_ERROR_MESSAGE,
+} from "./GoogleSignInButton";
+export type {
+  AuthNavigationOptions,
+  GoogleSignInOptions,
+  GoogleSignInButtonProps,
+} from "./GoogleSignInButton";
+export { SignInScreen, SignUpScreen, AUTH_MESSAGES } from "./SignInScreen";
+export type { SignInMode, SignInScreenProps, SignUpScreenProps } from "./SignInScreen";

package/src/brand/AppIcons.tsx

@@ -1,5 +1,5 @@
-import { Platform, type StyleProp, type ViewStyle } from "react-native";
-import Svg, { G, Path } from "react-native-svg";
+import { Platform, type ViewProps } from "react-native";
+import Svg, { G, Path, type GProps } from "react-native-svg";
 import { svgA11yProps } from "../svgA11y";
 import { tokens } from "../tokens";
 import { useScheme } from "../useScheme";
@@ -26,7 +26,7 @@ export type AppIconProps = {
   align?: "center" | "start";
   /** Set as `data-testid` on web, where `Svg` does not map `testID`. */
   testID?: string;
-  style?: StyleProp<ViewStyle>;
+  style?: ViewProps["style"];
 };
 
 export type AppIconComponent = ((props: AppIconProps) => React.JSX.Element) & {
@@ -54,7 +54,7 @@ function createAppIcon(app: AppName, displayName: string): AppIconComponent {
       stroke === undefined
         ? markStrokeWidth(app)
         : stroke * (viewBoxSide(app) / size);
-    const glyphProps =
+    const glyphProps: GProps =
       kind === "fill"
         ? { fill }
         : {

package/src/brand/AppMark.tsx

@@ -1,5 +1,5 @@
-import { Platform, type StyleProp, type ViewStyle } from "react-native";
-import Svg, { G, Path, Rect } from "react-native-svg";
+import { Platform, type ViewProps } from "react-native";
+import Svg, { G, Path, Rect, type GProps } from "react-native-svg";
 import { svgA11yProps } from "../svgA11y";
 import { APP_ICONS } from "./AppIcons";
 import {
@@ -23,7 +23,7 @@ export type AppMarkProps = {
   title?: string;
   /** Set as `data-testid` on web, where `Svg` does not map `testID`. */
   testID?: string;
-  style?: StyleProp<ViewStyle>;
+  style?: ViewProps["style"];
 };
 
 const TILE_TONES = {
@@ -50,7 +50,7 @@ export function AppMark({
   }
   const { kind, paths } = APP_MARKS[app];
   const tone = TILE_TONES[variant];
-  const glyphProps =
+  const glyphProps: GProps =
     kind === "fill"
       ? { fill: tone.fg }
       : {

package/src/brand/GoogleMark.tsx

@@ -1,4 +1,4 @@
-import { Platform, type StyleProp, type ViewStyle } from "react-native";
+import { Platform, type ViewProps } from "react-native";
 import Svg, { Path } from "react-native-svg";
 import { svgA11yProps } from "../svgA11y";
 
@@ -9,7 +9,7 @@ export type GoogleMarkProps = {
   title?: string;
   /** Set as `data-testid` on web, where `Svg` does not map `testID`. */
   testID?: string;
-  style?: StyleProp<ViewStyle>;
+  style?: ViewProps["style"];
 };
 
 /** The four paths of the Google "G" on the 24 grid, each in its brand colour. */

package/src/entries/auth.ts

@@ -0,0 +1,5 @@
+// `@vvedantb/native-ui/auth`: `AuthProviders`, `SignInScreen`, `SignUpScreen`,
+// `GoogleSignInButton` and the auth frame. Not on the root entry: it imports
+// `@clerk/clerk-expo`, `convex`, `expo-auth-session`, `expo-web-browser` and
+// `expo-router`, and Metro does not tree-shake.
+export * from "../auth";

package/src/entries/expo-web-root.ts

@@ -0,0 +1,4 @@
+// `@vvedantb/native-ui/expo-web-root`: `ExpoWebRoot` for `app/+html.tsx`. Not on
+// the root entry: it imports `expo-router/html`, and Metro does not tree-shake.
+export { ExpoWebRoot, EXPO_WEB_VIEWPORT, expoWebBackgroundCss } from "../ExpoWebRoot";
+export type { ExpoWebRootProps, ExpoWebRootViewport } from "../ExpoWebRoot";

package/src/floating.ts

@@ -1,4 +1,4 @@
-import { Platform, type ViewStyle } from "react-native";
+import { Platform } from "react-native";
 import { tokens } from "./tokens";
 
 export const FLOATING_INSET = tokens.spacing.unit;
@@ -14,7 +14,21 @@ export const FLOATING_PILL_RADIUS = tokens.radius.pill;
 
 const FLOATING_BOX_SHADOW = "0px 8px 24px rgba(10, 10, 10, 0.12)";
 
-export const floatingShadow: ViewStyle =
+/**
+ * Only the shadow keys, not `ViewStyle`: an Expo-widened `ViewStyle`
+ * (`position: "fixed"`, `backgroundImage`) is not assignable to a React
+ * Native 0.88 View `style`. A plain inferred type would be `{}` and lose
+ * `floatingShadow.shadowColor` and the rest for callers.
+ */
+type FloatingShadowStyle = {
+  shadowColor?: string;
+  shadowOffset?: { width: number; height: number };
+  shadowOpacity?: number;
+  shadowRadius?: number;
+  boxShadow?: string;
+};
+
+export const floatingShadow: FloatingShadowStyle =
   Platform.select({
     ios: {
       shadowColor: "#0a0a0a",

package/src/primitives/switch.tsx

@@ -1,6 +1,6 @@
 import * as SwitchPrimitives from "@rn-primitives/switch";
 import * as React from "react";
-import { Platform, type ViewStyle } from "react-native";
+import { Platform, type ViewProps, type ViewStyle } from "react-native";
 import { cn } from "../cn";
 
 type SwitchProps = React.ComponentPropsWithoutRef<
@@ -13,7 +13,7 @@ type SwitchProps = React.ComponentPropsWithoutRef<
    * which spreads `style`, so these are the only styles applied there.
    */
   trackStyle?: ViewStyle;
-  thumbStyle?: ViewStyle;
+  thumbStyle?: ViewProps["style"];
 };
 
 const Switch = React.forwardRef<