@vvedantb/native-ui 0.17.2 → 0.18.0

package/dist/auth/GoogleSignInButton.jsx

@@ -0,0 +1,188 @@
+import { c as _c } from "react/compiler-runtime";
+import { useEffect, useState } from "react";
+import { Platform } from "react-native";
+import { useSSO } from "@clerk/clerk-expo";
+import * as AuthSession from "expo-auth-session";
+import * as WebBrowser from "expo-web-browser";
+import { useRouter } from "expo-router";
+import { GoogleMark } from "../brand/GoogleMark";
+import { Button } from "../Button";
+import { toast } from "../toastStore";
+import { authErrorMessage } from "./authErrors";
+
+// Completes the Google browser session when the app reopens on the redirect.
+WebBrowser.maybeCompleteAuthSession();
+export const GOOGLE_ERROR_MESSAGE = "Could not continue with Google";
+/** Warms the Android custom tab while the screen is up, as the Expo guide suggests. */
+export function useWarmUpBrowser() {
+  const $ = _c(1);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = [];
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  useEffect(_temp4, t0);
+}
+
+/** Starts the Google flow, sets the session and navigates. Returns `[start, busy]`. */
+function _temp4() {
+  if (Platform.OS !== "android") {
+    return;
+  }
+  WebBrowser.warmUpAsync().catch(_temp);
+  return _temp3;
+}
+function _temp3() {
+  WebBrowser.coolDownAsync().catch(_temp2);
+}
+function _temp2() {}
+function _temp() {}
+export function useGoogleSignIn({
+  scheme,
+  redirectPath = "sso-callback",
+  afterAuthHref = "/",
+  replaceOptions,
+  onSuccess,
+  onError
+}) {
+  const {
+    startSSOFlow
+  } = useSSO();
+  const router = useRouter();
+  const [busy, setBusy] = useState(false);
+  const start = async () => {
+    if (busy) return;
+    setBusy(true);
+    try {
+      const {
+        createdSessionId,
+        setActive
+      } = await startSSOFlow({
+        strategy: "oauth_google",
+        redirectUrl: AuthSession.makeRedirectUri({
+          scheme,
+          path: redirectPath
+        })
+      });
+      // No session: the user closed the browser, or more steps are needed.
+      if (createdSessionId && setActive) {
+        await setActive({
+          session: createdSessionId
+        });
+        if (onSuccess) onSuccess();else router.replace(afterAuthHref, replaceOptions);
+      }
+    } catch (error) {
+      const message = authErrorMessage(error, GOOGLE_ERROR_MESSAGE);
+      if (onError) onError(message);else toast.error(message);
+    } finally {
+      setBusy(false);
+    }
+  };
+  return [start, busy];
+}
+/** An outline button with the Google mark that runs `useGoogleSignIn`. */
+export function GoogleSignInButton(t0) {
+  const $ = _c(28);
+  let afterAuthHref;
+  let onError;
+  let onSuccess;
+  let props;
+  let redirectPath;
+  let replaceOptions;
+  let scheme;
+  let t1;
+  let t2;
+  let t3;
+  if ($[0] !== t0) {
+    ({
+      scheme,
+      redirectPath,
+      afterAuthHref,
+      replaceOptions,
+      onSuccess,
+      onError,
+      label: t1,
+      testID: t2,
+      variant: t3,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = afterAuthHref;
+    $[2] = onError;
+    $[3] = onSuccess;
+    $[4] = props;
+    $[5] = redirectPath;
+    $[6] = replaceOptions;
+    $[7] = scheme;
+    $[8] = t1;
+    $[9] = t2;
+    $[10] = t3;
+  } else {
+    afterAuthHref = $[1];
+    onError = $[2];
+    onSuccess = $[3];
+    props = $[4];
+    redirectPath = $[5];
+    replaceOptions = $[6];
+    scheme = $[7];
+    t1 = $[8];
+    t2 = $[9];
+    t3 = $[10];
+  }
+  const label = t1 === undefined ? "Continue with Google" : t1;
+  const testID = t2 === undefined ? "google-sign-in" : t2;
+  const variant = t3 === undefined ? "outline" : t3;
+  useWarmUpBrowser();
+  let t4;
+  if ($[11] !== afterAuthHref || $[12] !== onError || $[13] !== onSuccess || $[14] !== redirectPath || $[15] !== replaceOptions || $[16] !== scheme) {
+    t4 = {
+      scheme,
+      redirectPath,
+      afterAuthHref,
+      replaceOptions,
+      onSuccess,
+      onError
+    };
+    $[11] = afterAuthHref;
+    $[12] = onError;
+    $[13] = onSuccess;
+    $[14] = redirectPath;
+    $[15] = replaceOptions;
+    $[16] = scheme;
+    $[17] = t4;
+  } else {
+    t4 = $[17];
+  }
+  const [start, busy] = useGoogleSignIn(t4);
+  let t5;
+  if ($[18] === Symbol.for("react.memo_cache_sentinel")) {
+    t5 = <GoogleMark />;
+    $[18] = t5;
+  } else {
+    t5 = $[18];
+  }
+  let t6;
+  if ($[19] !== start) {
+    t6 = () => void start();
+    $[19] = start;
+    $[20] = t6;
+  } else {
+    t6 = $[20];
+  }
+  let t7;
+  if ($[21] !== busy || $[22] !== label || $[23] !== props || $[24] !== t6 || $[25] !== testID || $[26] !== variant) {
+    t7 = <Button {...props} testID={testID} variant={variant} leftIcon={t5} loading={busy} onPress={t6}>{label}</Button>;
+    $[21] = busy;
+    $[22] = label;
+    $[23] = props;
+    $[24] = t6;
+    $[25] = testID;
+    $[26] = variant;
+    $[27] = t7;
+  } else {
+    t7 = $[27];
+  }
+  return t7;
+}

package/dist/auth/SecondFactorScreen.jsx

@@ -0,0 +1,133 @@
+import { c as _c } from "react/compiler-runtime";
+// Clerk-free: a one-time code step. The caller owns the verification call and
+// its errors (`useSecondFactor` does both for Clerk).
+import { useState } from "react";
+import { Button } from "../Button";
+import { Input } from "../Input";
+import { AuthScreen, FieldError } from "./AuthScreen";
+/** A one-time code step: digits only, a Verify button, an inline error and a back link. */
+export function SecondFactorScreen(t0) {
+  const $ = _c(40);
+  const {
+    title,
+    description,
+    codeLength: t1,
+    onSubmit,
+    error,
+    loading: t2,
+    onBack,
+    backLabel: t3,
+    header,
+    testIDPrefix: t4,
+    footer,
+    digitsOnly: t5,
+    placeholder
+  } = t0;
+  const codeLength = t1 === undefined ? 6 : t1;
+  const loading = t2 === undefined ? false : t2;
+  const backLabel = t3 === undefined ? "Back" : t3;
+  const testIDPrefix = t4 === undefined ? "second-factor" : t4;
+  const digitsOnly = t5 === undefined ? true : t5;
+  const [code, setCode] = useState("");
+  const ready = code.length === codeLength && !loading;
+  let t6;
+  if ($[0] !== code || $[1] !== onSubmit || $[2] !== ready) {
+    t6 = () => {
+      if (ready) {
+        onSubmit(code);
+      }
+    };
+    $[0] = code;
+    $[1] = onSubmit;
+    $[2] = ready;
+    $[3] = t6;
+  } else {
+    t6 = $[3];
+  }
+  const submit = t6;
+  const t7 = `${testIDPrefix}-screen`;
+  const t8 = `${testIDPrefix}-code`;
+  let t9;
+  if ($[4] !== codeLength || $[5] !== digitsOnly || $[6] !== placeholder) {
+    t9 = digitsOnly ? "0".repeat(codeLength) : placeholder ?? "Code";
+    $[4] = codeLength;
+    $[5] = digitsOnly;
+    $[6] = placeholder;
+    $[7] = t9;
+  } else {
+    t9 = $[7];
+  }
+  const t10 = digitsOnly ? "number-pad" : "default";
+  let t11;
+  if ($[8] !== digitsOnly) {
+    t11 = text => setCode(digitsOnly ? text.replace(/\D/g, "") : text.trim());
+    $[8] = digitsOnly;
+    $[9] = t11;
+  } else {
+    t11 = $[9];
+  }
+  let t12;
+  if ($[10] !== code || $[11] !== codeLength || $[12] !== submit || $[13] !== t10 || $[14] !== t11 || $[15] !== t8 || $[16] !== t9) {
+    t12 = <Input testID={t8} accessibilityLabel="Verification code" value={code} placeholder={t9} keyboardType={t10} autoCapitalize="none" autoCorrect={false} autoComplete="one-time-code" textContentType="oneTimeCode" maxLength={codeLength} autoFocus={true} returnKeyType="go" onChangeText={t11} onSubmitEditing={submit} />;
+    $[10] = code;
+    $[11] = codeLength;
+    $[12] = submit;
+    $[13] = t10;
+    $[14] = t11;
+    $[15] = t8;
+    $[16] = t9;
+    $[17] = t12;
+  } else {
+    t12 = $[17];
+  }
+  const t13 = `${testIDPrefix}-error`;
+  let t14;
+  if ($[18] !== error || $[19] !== t13) {
+    t14 = <FieldError testID={t13} message={error} />;
+    $[18] = error;
+    $[19] = t13;
+    $[20] = t14;
+  } else {
+    t14 = $[20];
+  }
+  const t15 = `${testIDPrefix}-verify`;
+  const t16 = !ready;
+  let t17;
+  if ($[21] !== loading || $[22] !== submit || $[23] !== t15 || $[24] !== t16) {
+    t17 = <Button testID={t15} loading={loading} disabled={t16} onPress={submit}>Verify</Button>;
+    $[21] = loading;
+    $[22] = submit;
+    $[23] = t15;
+    $[24] = t16;
+    $[25] = t17;
+  } else {
+    t17 = $[25];
+  }
+  let t18;
+  if ($[26] !== backLabel || $[27] !== onBack || $[28] !== testIDPrefix) {
+    t18 = onBack ? <Button testID={`${testIDPrefix}-back`} variant="ghost" onPress={onBack}>{backLabel}</Button> : null;
+    $[26] = backLabel;
+    $[27] = onBack;
+    $[28] = testIDPrefix;
+    $[29] = t18;
+  } else {
+    t18 = $[29];
+  }
+  let t19;
+  if ($[30] !== description || $[31] !== footer || $[32] !== header || $[33] !== t12 || $[34] !== t14 || $[35] !== t17 || $[36] !== t18 || $[37] !== t7 || $[38] !== title) {
+    t19 = <AuthScreen testID={t7} title={title} subtitle={description} header={header} footer={footer}>{t12}{t14}{t17}{t18}</AuthScreen>;
+    $[30] = description;
+    $[31] = footer;
+    $[32] = header;
+    $[33] = t12;
+    $[34] = t14;
+    $[35] = t17;
+    $[36] = t18;
+    $[37] = t7;
+    $[38] = title;
+    $[39] = t19;
+  } else {
+    t19 = $[39];
+  }
+  return t19;
+}