@terreno/ui 0.0.18 → 0.2.0

package/src/__snapshots__/SocialLoginButton.test.tsx.snap

@@ -0,0 +1,277 @@
+// Bun Snapshot v1, https://bun.sh/docs/test/snapshots
+
+exports[`SocialLoginButton renders correctly with Google provider 1`] = `
+{
+  "$$typeof": Symbol(react.test.json),
+  "children": [
+    {
+      "$$typeof": Symbol(react.test.json),
+      "children": [
+        {
+          "$$typeof": Symbol(react.test.json),
+          "children": null,
+          "props": {
+            "style": {
+              "marginRight": 12,
+            },
+            "testID": undefined,
+          },
+          "type": "View",
+        },
+        {
+          "$$typeof": Symbol(react.test.json),
+          "children": [
+            "Continue with Google",
+          ],
+          "props": {
+            "style": {
+              "color": "#1f1f1f",
+              "fontSize": 16,
+              "fontWeight": "600",
+            },
+          },
+          "type": "Text",
+        },
+      ],
+      "props": {
+        "style": {
+          "alignItems": "center",
+          "flexDirection": "row",
+        },
+        "testID": undefined,
+      },
+      "type": "View",
+    },
+  ],
+  "props": {
+    "accessibilityHint": "Sign in with Google",
+    "aria-label": "Continue with Google",
+    "aria-role": "button",
+    "disabled": undefined,
+    "onPress": [Function: debounced],
+    "style": {
+      "alignItems": "center",
+      "alignSelf": "stretch",
+      "backgroundColor": "#ffffff",
+      "borderColor": "#dadce0",
+      "borderRadius": 360,
+      "borderWidth": 1,
+      "flexDirection": "row",
+      "justifyContent": "center",
+      "opacity": 1,
+      "paddingHorizontal": 20,
+      "paddingVertical": 12,
+      "width": "100%",
+    },
+    "testID": "social-login-google",
+  },
+  "type": "Pressable",
+}
+`;
+
+exports[`SocialLoginButton renders correctly with GitHub provider 1`] = `
+{
+  "$$typeof": Symbol(react.test.json),
+  "children": [
+    {
+      "$$typeof": Symbol(react.test.json),
+      "children": [
+        {
+          "$$typeof": Symbol(react.test.json),
+          "children": null,
+          "props": {
+            "style": {
+              "marginRight": 12,
+            },
+            "testID": undefined,
+          },
+          "type": "View",
+        },
+        {
+          "$$typeof": Symbol(react.test.json),
+          "children": [
+            "Continue with GitHub",
+          ],
+          "props": {
+            "style": {
+              "color": "#ffffff",
+              "fontSize": 16,
+              "fontWeight": "600",
+            },
+          },
+          "type": "Text",
+        },
+      ],
+      "props": {
+        "style": {
+          "alignItems": "center",
+          "flexDirection": "row",
+        },
+        "testID": undefined,
+      },
+      "type": "View",
+    },
+  ],
+  "props": {
+    "accessibilityHint": "Sign in with GitHub",
+    "aria-label": "Continue with GitHub",
+    "aria-role": "button",
+    "disabled": undefined,
+    "onPress": [Function: debounced],
+    "style": {
+      "alignItems": "center",
+      "alignSelf": "stretch",
+      "backgroundColor": "#24292e",
+      "borderColor": "#24292e",
+      "borderRadius": 360,
+      "borderWidth": 1,
+      "flexDirection": "row",
+      "justifyContent": "center",
+      "opacity": 1,
+      "paddingHorizontal": 20,
+      "paddingVertical": 12,
+      "width": "100%",
+    },
+    "testID": "social-login-github",
+  },
+  "type": "Pressable",
+}
+`;
+
+exports[`SocialLoginButton renders correctly with Apple provider 1`] = `
+{
+  "$$typeof": Symbol(react.test.json),
+  "children": [
+    {
+      "$$typeof": Symbol(react.test.json),
+      "children": [
+        {
+          "$$typeof": Symbol(react.test.json),
+          "children": null,
+          "props": {
+            "style": {
+              "marginRight": 12,
+            },
+            "testID": undefined,
+          },
+          "type": "View",
+        },
+        {
+          "$$typeof": Symbol(react.test.json),
+          "children": [
+            "Continue with Apple",
+          ],
+          "props": {
+            "style": {
+              "color": "#ffffff",
+              "fontSize": 16,
+              "fontWeight": "600",
+            },
+          },
+          "type": "Text",
+        },
+      ],
+      "props": {
+        "style": {
+          "alignItems": "center",
+          "flexDirection": "row",
+        },
+        "testID": undefined,
+      },
+      "type": "View",
+    },
+  ],
+  "props": {
+    "accessibilityHint": "Sign in with Apple",
+    "aria-label": "Continue with Apple",
+    "aria-role": "button",
+    "disabled": undefined,
+    "onPress": [Function: debounced],
+    "style": {
+      "alignItems": "center",
+      "alignSelf": "stretch",
+      "backgroundColor": "#000000",
+      "borderColor": "#000000",
+      "borderRadius": 360,
+      "borderWidth": 1,
+      "flexDirection": "row",
+      "justifyContent": "center",
+      "opacity": 1,
+      "paddingHorizontal": 20,
+      "paddingVertical": 12,
+      "width": "100%",
+    },
+    "testID": "social-login-apple",
+  },
+  "type": "Pressable",
+}
+`;
+
+exports[`SocialLoginButton renders with outline variant 1`] = `
+{
+  "$$typeof": Symbol(react.test.json),
+  "children": [
+    {
+      "$$typeof": Symbol(react.test.json),
+      "children": [
+        {
+          "$$typeof": Symbol(react.test.json),
+          "children": null,
+          "props": {
+            "style": {
+              "marginRight": 12,
+            },
+            "testID": undefined,
+          },
+          "type": "View",
+        },
+        {
+          "$$typeof": Symbol(react.test.json),
+          "children": [
+            "Continue with Google",
+          ],
+          "props": {
+            "style": {
+              "color": "#1C1C1C",
+              "fontSize": 16,
+              "fontWeight": "600",
+            },
+          },
+          "type": "Text",
+        },
+      ],
+      "props": {
+        "style": {
+          "alignItems": "center",
+          "flexDirection": "row",
+        },
+        "testID": undefined,
+      },
+      "type": "View",
+    },
+  ],
+  "props": {
+    "accessibilityHint": "Sign in with Google",
+    "aria-label": "Continue with Google",
+    "aria-role": "button",
+    "disabled": undefined,
+    "onPress": [Function: debounced],
+    "style": {
+      "alignItems": "center",
+      "alignSelf": "stretch",
+      "backgroundColor": "#FFFFFF",
+      "borderColor": "#dadce0",
+      "borderRadius": 360,
+      "borderWidth": 1,
+      "flexDirection": "row",
+      "justifyContent": "center",
+      "opacity": 1,
+      "paddingHorizontal": 20,
+      "paddingVertical": 12,
+      "width": "100%",
+    },
+    "testID": "social-login-google",
+  },
+  "type": "Pressable",
+}
+`;

package/src/bunSetup.ts

@@ -432,6 +432,29 @@ if (typeof globalThis.expo === "undefined") {
   } as any;
 }
 
+// Mock expo-router
+mock.module("expo-router", () => ({
+  Link: ({children, ...props}: any) => React.createElement("Link", props, children),
+  router: {
+    back: mock(() => {}),
+    canGoBack: mock(() => true),
+    navigate: mock(() => {}),
+    push: mock(() => {}),
+    replace: mock(() => {}),
+  },
+  Stack: ({children, ...props}: any) => React.createElement("Stack", props, children),
+  Tabs: ({children, ...props}: any) => React.createElement("Tabs", props, children),
+  useLocalSearchParams: mock(() => ({})),
+  useRouter: mock(() => ({
+    back: mock(() => {}),
+    canGoBack: mock(() => true),
+    navigate: mock(() => {}),
+    push: mock(() => {}),
+    replace: mock(() => {}),
+  })),
+  useSegments: mock(() => []),
+}));
+
 // Mock @react-native-async-storage/async-storage
 mock.module("@react-native-async-storage/async-storage", () => ({
   clear: mock(() => Promise.resolve()),

package/src/index.tsx

@@ -1,3 +1,5 @@
+// Re-export React Native style types for use in consumer projects
+export type {StyleProp, ViewStyle} from "react-native";
 export * from "./Accordion";
 export * from "./ActionSheet";
 export * from "./AddressField";
@@ -34,6 +36,8 @@ export * from "./ImageBackground";
 export * from "./InfoModalIcon";
 export * from "./InfoTooltipButton";
 export * from "./Link";
+export * from "./login";
+
 export * from "./MarkdownView";
 export * from "./MediaQuery";
 export * from "./MobileAddressAutoComplete";
@@ -58,8 +62,10 @@ export * from "./SideDrawer";
 export * from "./Signature";
 export * from "./SignatureField";
 export * from "./Slider";
+export * from "./SocialLoginButton";
 export * from "./Spinner";
 export * from "./SplitPage";
+export * from "./signUp";
 export * from "./TapToEdit";
 export * from "./TerrenoProvider";
 export * from "./Text";

package/src/login/LoginScreen.test.tsx

@@ -0,0 +1,148 @@
+import {describe, expect, it, mock} from "bun:test";
+import {fireEvent} from "@testing-library/react-native";
+import {renderWithTheme} from "../test-utils";
+import {LoginScreen} from "./LoginScreen";
+
+const defaultFields = [
+  {label: "Email", name: "email", required: true, type: "email" as const},
+  {label: "Password", name: "password", required: true, type: "password" as const},
+];
+
+describe("LoginScreen", () => {
+  it("renders with default props", () => {
+    const {getByTestId} = renderWithTheme(
+      <LoginScreen fields={defaultFields} onSubmit={mock(() => Promise.resolve())} />
+    );
+    expect(getByTestId("login-screen")).toBeTruthy();
+  });
+
+  it("renders title", () => {
+    const {getByTestId} = renderWithTheme(
+      <LoginScreen fields={defaultFields} onSubmit={mock(() => Promise.resolve())} />
+    );
+    expect(getByTestId("login-screen-title")).toBeTruthy();
+  });
+
+  it("renders custom title", () => {
+    const {getByText} = renderWithTheme(
+      <LoginScreen
+        fields={defaultFields}
+        onSubmit={mock(() => Promise.resolve())}
+        title="Sign In"
+      />
+    );
+    expect(getByText("Sign In")).toBeTruthy();
+  });
+
+  it("renders all form fields", () => {
+    const {getByTestId} = renderWithTheme(
+      <LoginScreen fields={defaultFields} onSubmit={mock(() => Promise.resolve())} />
+    );
+    expect(getByTestId("login-screen-email-input")).toBeTruthy();
+    expect(getByTestId("login-screen-password-input")).toBeTruthy();
+  });
+
+  it("renders submit button", () => {
+    const {getByTestId} = renderWithTheme(
+      <LoginScreen fields={defaultFields} onSubmit={mock(() => Promise.resolve())} />
+    );
+    expect(getByTestId("login-screen-submit-button")).toBeTruthy();
+  });
+
+  it("renders sign-up link when onSignUpPress is provided", () => {
+    const {getByTestId} = renderWithTheme(
+      <LoginScreen
+        fields={defaultFields}
+        onSignUpPress={() => {}}
+        onSubmit={mock(() => Promise.resolve())}
+      />
+    );
+    expect(getByTestId("login-screen-signup-link")).toBeTruthy();
+  });
+
+  it("renders forgot password button when onForgotPasswordPress is provided", () => {
+    const {getByTestId} = renderWithTheme(
+      <LoginScreen
+        fields={defaultFields}
+        onForgotPasswordPress={() => {}}
+        onSubmit={mock(() => Promise.resolve())}
+      />
+    );
+    expect(getByTestId("login-screen-forgot-password")).toBeTruthy();
+  });
+
+  it("renders error message", () => {
+    const {getByTestId} = renderWithTheme(
+      <LoginScreen
+        error="Invalid credentials"
+        fields={defaultFields}
+        onSubmit={mock(() => Promise.resolve())}
+      />
+    );
+    expect(getByTestId("login-screen-error")).toBeTruthy();
+  });
+
+  it("renders OAuth buttons when providers are given", () => {
+    const providers = [
+      {onPress: mock(() => Promise.resolve()), provider: "google" as const},
+      {onPress: mock(() => Promise.resolve()), provider: "github" as const},
+    ];
+    const {getByTestId} = renderWithTheme(
+      <LoginScreen
+        fields={defaultFields}
+        oauthProviders={providers}
+        onSubmit={mock(() => Promise.resolve())}
+      />
+    );
+    expect(getByTestId("login-screen-oauth")).toBeTruthy();
+  });
+
+  it("updates form field values on change", () => {
+    const {getByTestId} = renderWithTheme(
+      <LoginScreen fields={defaultFields} onSubmit={mock(() => Promise.resolve())} />
+    );
+    const emailInput = getByTestId("login-screen-email-input");
+    fireEvent.changeText(emailInput, "test@example.com");
+    expect(emailInput.props.value).toBe("test@example.com");
+  });
+
+  it("renders with custom testID", () => {
+    const {getByTestId} = renderWithTheme(
+      <LoginScreen
+        fields={defaultFields}
+        onSubmit={mock(() => Promise.resolve())}
+        testID="custom-login"
+      />
+    );
+    expect(getByTestId("custom-login")).toBeTruthy();
+  });
+
+  it("does not render forgot password when handler not provided", () => {
+    const {queryByTestId} = renderWithTheme(
+      <LoginScreen fields={defaultFields} onSubmit={mock(() => Promise.resolve())} />
+    );
+    expect(queryByTestId("login-screen-forgot-password")).toBeNull();
+  });
+
+  it("does not render sign-up link when handler not provided", () => {
+    const {queryByTestId} = renderWithTheme(
+      <LoginScreen fields={defaultFields} onSubmit={mock(() => Promise.resolve())} />
+    );
+    expect(queryByTestId("login-screen-signup-link")).toBeNull();
+  });
+
+  it("renders correctly with all props", () => {
+    const {toJSON} = renderWithTheme(
+      <LoginScreen
+        error="Error!"
+        fields={defaultFields}
+        loading
+        onForgotPasswordPress={() => {}}
+        onSignUpPress={() => {}}
+        onSubmit={mock(() => Promise.resolve())}
+        title="Log In"
+      />
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+});

package/src/login/LoginScreen.tsx

@@ -0,0 +1,159 @@
+import type {FC} from "react";
+import {useCallback, useState} from "react";
+
+import {Box} from "../Box";
+import {Button} from "../Button";
+import {Heading} from "../Heading";
+import {Page} from "../Page";
+import {OAuthButtons} from "../signUp/OAuthButtons";
+import {Text} from "../Text";
+import {TextField} from "../TextField";
+import type {LoginScreenProps} from "./loginTypes";
+
+/**
+ * A configurable login screen component with support for custom fields,
+ * OAuth providers, sign-up link, and forgot password link.
+ *
+ * @example
+ * ```tsx
+ * <LoginScreen
+ *   fields={[
+ *     {name: "email", label: "Email", type: "email", required: true},
+ *     {name: "password", label: "Password", type: "password", required: true},
+ *   ]}
+ *   onSubmit={async (values) => {
+ *     await signIn(values.email, values.password);
+ *   }}
+ *   oauthProviders={[
+ *     {provider: "google", onPress: () => signInWithSocial("google")},
+ *   ]}
+ *   onSignUpPress={() => router.push("/signup")}
+ *   onForgotPasswordPress={() => router.push("/forgot-password")}
+ * />
+ * ```
+ */
+export const LoginScreen: FC<LoginScreenProps> = ({
+  fields,
+  onSubmit,
+  oauthProviders,
+  logo,
+  title = "Welcome Back",
+  loading = false,
+  error,
+  signUpLinkText = "Need an account? Sign Up",
+  onSignUpPress,
+  forgotPasswordText = "Forgot password?",
+  onForgotPasswordPress,
+  testID = "login-screen",
+}) => {
+  const [formValues, setFormValues] = useState<Record<string, string>>(() => {
+    const initial: Record<string, string> = {};
+    for (const field of fields) {
+      initial[field.name] = "";
+    }
+    return initial;
+  });
+
+  const handleFieldChange = useCallback((fieldName: string, value: string) => {
+    setFormValues((prev) => ({...prev, [fieldName]: value}));
+  }, []);
+
+  const handleSubmit = useCallback(async () => {
+    await onSubmit(formValues);
+  }, [formValues, onSubmit]);
+
+  const requiredFieldsFilled = fields
+    .filter((f) => f.required)
+    .every((f) => (formValues[f.name] ?? "").trim().length > 0);
+
+  const isSubmitDisabled = loading || !requiredFieldsFilled;
+
+  return (
+    <Page navigation={undefined}>
+      <Box
+        alignItems="center"
+        alignSelf="center"
+        flex="grow"
+        justifyContent="center"
+        maxWidth={400}
+        padding={4}
+        testID={testID}
+        width="100%"
+      >
+        {Boolean(logo) && <Box marginBottom={6}>{logo}</Box>}
+
+        <Box marginBottom={8}>
+          <Heading testID={`${testID}-title`}>{title}</Heading>
+        </Box>
+
+        <Box gap={4} width="100%">
+          {fields.map((field) => (
+            <TextField
+              autoComplete={field.autoComplete}
+              disabled={loading}
+              key={field.name}
+              onChange={(value: string) => handleFieldChange(field.name, value)}
+              placeholder={field.placeholder ?? field.label}
+              testID={`${testID}-${field.name}-input`}
+              title={field.label}
+              type={
+                field.type === "email" ? "email" : field.type === "password" ? "password" : "text"
+              }
+              value={formValues[field.name]}
+            />
+          ))}
+
+          {Boolean(error) && (
+            <Text color="error" testID={`${testID}-error`}>
+              {error}
+            </Text>
+          )}
+
+          <Box marginTop={4}>
+            <Button
+              disabled={isSubmitDisabled}
+              fullWidth
+              loading={loading}
+              onClick={handleSubmit}
+              testID={`${testID}-submit-button`}
+              text="Log In"
+            />
+          </Box>
+
+          {Boolean(onForgotPasswordPress) && (
+            <Box alignItems="center" marginTop={2}>
+              <Button
+                disabled={loading}
+                onClick={onForgotPasswordPress!}
+                testID={`${testID}-forgot-password`}
+                text={forgotPasswordText!}
+                variant="muted"
+              />
+            </Box>
+          )}
+
+          {Boolean(onSignUpPress) && (
+            <Box marginTop={2}>
+              <Button
+                disabled={loading}
+                fullWidth
+                onClick={onSignUpPress!}
+                testID={`${testID}-signup-link`}
+                text={signUpLinkText!}
+                variant="outline"
+              />
+            </Box>
+          )}
+
+          {Boolean(oauthProviders && oauthProviders.length > 0) && (
+            <OAuthButtons
+              disabled={loading}
+              providers={oauthProviders!}
+              testID={`${testID}-oauth`}
+            />
+          )}
+        </Box>
+      </Box>
+    </Page>
+  );
+};