@terreno/ui 0.1.0 → 0.3.0

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>
+  );
+};