@terreno/ui 0.1.0 → 0.2.0

package/src/login/loginTypes.ts

@@ -0,0 +1,51 @@
+import type {ReactNode} from "react";
+
+import type {OAuthProviderConfig} from "../signUp/signUpTypes";
+
+/**
+ * Configuration for a login form field.
+ */
+export interface LoginFieldConfig {
+  /** Unique field name used as the key in form state. */
+  name: string;
+  /** Display label for the field. */
+  label: string;
+  /** Placeholder text shown when the field is empty. */
+  placeholder?: string;
+  /** Input type for the field. */
+  type?: "text" | "email" | "password";
+  /** Whether the field is required. */
+  required?: boolean;
+  /** Auto-complete hint for the field. */
+  autoComplete?: "current-password" | "on" | "off" | "username";
+}
+
+/**
+ * Props for the LoginScreen component.
+ */
+export interface LoginScreenProps {
+  /** Form field configurations. */
+  fields: LoginFieldConfig[];
+  /** Callback triggered on form submission. Receives field values as a record. */
+  onSubmit: (values: Record<string, string>) => Promise<void>;
+  /** Optional OAuth provider configurations for social login buttons. */
+  oauthProviders?: OAuthProviderConfig[];
+  /** Custom logo or banner to display above the form. */
+  logo?: ReactNode;
+  /** Title text for the login form. */
+  title?: string;
+  /** Whether the form is in a loading state. */
+  loading?: boolean;
+  /** Error message to display. */
+  error?: string;
+  /** Text for the link to navigate to sign up. */
+  signUpLinkText?: string;
+  /** Callback triggered when the sign-up link is pressed. */
+  onSignUpPress?: () => void;
+  /** Text for the forgot password link. */
+  forgotPasswordText?: string;
+  /** Callback triggered when the forgot password link is pressed. */
+  onForgotPasswordPress?: () => void;
+  /** Test ID for the root element. */
+  testID?: string;
+}

package/src/signUp/OAuthButtons.test.tsx

@@ -0,0 +1,45 @@
+import {describe, expect, it, mock} from "bun:test";
+import {renderWithTheme} from "../test-utils";
+import {OAuthButtons} from "./OAuthButtons";
+
+describe("OAuthButtons", () => {
+  const mockProviders = [
+    {onPress: mock(() => Promise.resolve()), provider: "google" as const},
+    {onPress: mock(() => Promise.resolve()), provider: "github" as const},
+    {onPress: mock(() => Promise.resolve()), provider: "apple" as const},
+  ];
+
+  it("renders all provider buttons", () => {
+    const {getByTestId} = renderWithTheme(
+      <OAuthButtons providers={mockProviders} testID="oauth" />
+    );
+    expect(getByTestId("oauth")).toBeTruthy();
+    expect(getByTestId("oauth-google")).toBeTruthy();
+    expect(getByTestId("oauth-github")).toBeTruthy();
+    expect(getByTestId("oauth-apple")).toBeTruthy();
+  });
+
+  it("renders nothing when providers is empty", () => {
+    const {queryByTestId} = renderWithTheme(<OAuthButtons providers={[]} testID="oauth" />);
+    expect(queryByTestId("oauth")).toBeNull();
+  });
+
+  it("renders with custom divider text", () => {
+    const {getByText} = renderWithTheme(
+      <OAuthButtons dividerText="Sign in with" providers={mockProviders} />
+    );
+    expect(getByText("Sign in with")).toBeTruthy();
+  });
+
+  it("renders default divider text", () => {
+    const {getByText} = renderWithTheme(<OAuthButtons providers={mockProviders} />);
+    expect(getByText("Or continue with")).toBeTruthy();
+  });
+
+  it("renders correctly with all props", () => {
+    const {toJSON} = renderWithTheme(
+      <OAuthButtons disabled providers={mockProviders} testID="oauth" />
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+});

package/src/signUp/OAuthButtons.tsx

@@ -0,0 +1,52 @@
+import type {FC} from "react";
+
+import {Box} from "../Box";
+import {SocialLoginButton} from "../SocialLoginButton";
+import {Text} from "../Text";
+import type {OAuthProviderConfig} from "./signUpTypes";
+
+interface OAuthButtonsProps {
+  /** OAuth provider configurations. */
+  providers: OAuthProviderConfig[];
+  /** Whether all buttons should be disabled. */
+  disabled?: boolean;
+  /** Divider text displayed above the OAuth buttons. */
+  dividerText?: string;
+  /** Test ID prefix for the component. */
+  testID?: string;
+}
+
+/**
+ * Renders OAuth provider buttons with an optional divider text.
+ * Uses SocialLoginButton for branded provider buttons.
+ */
+export const OAuthButtons: FC<OAuthButtonsProps> = ({
+  providers,
+  disabled = false,
+  dividerText = "Or continue with",
+  testID = "oauth-buttons",
+}) => {
+  if (providers.length === 0) {
+    return null;
+  }
+
+  return (
+    <Box testID={testID} width="100%">
+      <Box alignItems="center" marginTop={6}>
+        <Text color="secondaryLight">{dividerText}</Text>
+      </Box>
+      <Box gap={3} marginTop={4}>
+        {providers.map((config) => (
+          <SocialLoginButton
+            disabled={disabled || config.disabled}
+            key={config.provider}
+            loading={config.loading}
+            onPress={config.onPress}
+            provider={config.provider}
+            testID={`${testID}-${config.provider}`}
+          />
+        ))}
+      </Box>
+    </Box>
+  );
+};

package/src/signUp/PasswordRequirements.test.tsx

@@ -0,0 +1,41 @@
+import {describe, expect, it} from "bun:test";
+import {renderWithTheme} from "../test-utils";
+import {PasswordRequirements} from "./PasswordRequirements";
+import {defaultPasswordRequirements} from "./passwordPresets";
+
+describe("PasswordRequirements", () => {
+  it("renders all requirements", () => {
+    const {getByTestId} = renderWithTheme(
+      <PasswordRequirements password="" requirements={defaultPasswordRequirements} />
+    );
+    expect(getByTestId("password-requirements")).toBeTruthy();
+    for (const req of defaultPasswordRequirements) {
+      expect(getByTestId(`password-requirements-${req.key}`)).toBeTruthy();
+    }
+  });
+
+  it("renders with custom testID", () => {
+    const {getByTestId} = renderWithTheme(
+      <PasswordRequirements
+        password=""
+        requirements={defaultPasswordRequirements}
+        testID="custom-reqs"
+      />
+    );
+    expect(getByTestId("custom-reqs")).toBeTruthy();
+  });
+
+  it("renders correctly with empty password", () => {
+    const {toJSON} = renderWithTheme(
+      <PasswordRequirements password="" requirements={defaultPasswordRequirements} />
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("renders correctly with a strong password", () => {
+    const {toJSON} = renderWithTheme(
+      <PasswordRequirements password="MyP@ssw0rd!" requirements={defaultPasswordRequirements} />
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+});

package/src/signUp/PasswordRequirements.tsx

@@ -0,0 +1,49 @@
+import type {FC} from "react";
+import {View} from "react-native";
+
+import {Icon} from "../Icon";
+import {Text} from "../Text";
+import type {PasswordRequirement} from "./signUpTypes";
+
+interface PasswordRequirementsProps {
+  /** The current password value to validate against. */
+  password: string;
+  /** List of password requirements to display. */
+  requirements: PasswordRequirement[];
+  /** Test ID prefix for the component. */
+  testID?: string;
+}
+
+/**
+ * Displays a list of password requirements with check/cross indicators.
+ */
+export const PasswordRequirements: FC<PasswordRequirementsProps> = ({
+  password,
+  requirements,
+  testID = "password-requirements",
+}) => {
+  return (
+    <View testID={testID}>
+      {requirements.map((req) => {
+        const isMet = password.length > 0 && req.validate(password);
+        return (
+          <View
+            key={req.key}
+            style={{alignItems: "center", flexDirection: "row", gap: 8, marginBottom: 4}}
+            testID={`${testID}-${req.key}`}
+          >
+            <Icon
+              color={isMet ? "success" : "secondaryLight"}
+              iconName={isMet ? "circle-check" : "circle"}
+              size="sm"
+              testID={`${testID}-${req.key}-icon`}
+            />
+            <Text color={isMet ? "success" : "secondaryLight"} size="sm">
+              {req.label}
+            </Text>
+          </View>
+        );
+      })}
+    </View>
+  );
+};

package/src/signUp/SignUpScreen.test.tsx

@@ -0,0 +1,134 @@
+import {describe, expect, it, mock} from "bun:test";
+import {fireEvent} from "@testing-library/react-native";
+import {renderWithTheme} from "../test-utils";
+import {defaultPasswordRequirements} from "./passwordPresets";
+import {SignUpScreen} from "./SignUpScreen";
+
+const defaultFields = [
+  {label: "Name", name: "name", required: true, type: "text" as const},
+  {label: "Email", name: "email", required: true, type: "email" as const},
+  {label: "Password", name: "password", required: true, type: "password" as const},
+];
+
+describe("SignUpScreen", () => {
+  it("renders with default props", () => {
+    const {getByTestId} = renderWithTheme(
+      <SignUpScreen fields={defaultFields} onSubmit={mock(() => Promise.resolve())} />
+    );
+    expect(getByTestId("signup-screen")).toBeTruthy();
+  });
+
+  it("renders title", () => {
+    const {getByTestId} = renderWithTheme(
+      <SignUpScreen fields={defaultFields} onSubmit={mock(() => Promise.resolve())} />
+    );
+    expect(getByTestId("signup-screen-title")).toBeTruthy();
+  });
+
+  it("renders custom title", () => {
+    const {getByText} = renderWithTheme(
+      <SignUpScreen
+        fields={defaultFields}
+        onSubmit={mock(() => Promise.resolve())}
+        title="Join Us"
+      />
+    );
+    expect(getByText("Join Us")).toBeTruthy();
+  });
+
+  it("renders all form fields", () => {
+    const {getByTestId} = renderWithTheme(
+      <SignUpScreen fields={defaultFields} onSubmit={mock(() => Promise.resolve())} />
+    );
+    expect(getByTestId("signup-screen-name-input")).toBeTruthy();
+    expect(getByTestId("signup-screen-email-input")).toBeTruthy();
+    expect(getByTestId("signup-screen-password-input")).toBeTruthy();
+  });
+
+  it("renders submit button", () => {
+    const {getByTestId} = renderWithTheme(
+      <SignUpScreen fields={defaultFields} onSubmit={mock(() => Promise.resolve())} />
+    );
+    expect(getByTestId("signup-screen-submit-button")).toBeTruthy();
+  });
+
+  it("renders login link when onLoginPress is provided", () => {
+    const {getByTestId} = renderWithTheme(
+      <SignUpScreen
+        fields={defaultFields}
+        onLoginPress={() => {}}
+        onSubmit={mock(() => Promise.resolve())}
+      />
+    );
+    expect(getByTestId("signup-screen-login-link")).toBeTruthy();
+  });
+
+  it("renders error message", () => {
+    const {getByTestId} = renderWithTheme(
+      <SignUpScreen
+        error="Something went wrong"
+        fields={defaultFields}
+        onSubmit={mock(() => Promise.resolve())}
+      />
+    );
+    expect(getByTestId("signup-screen-error")).toBeTruthy();
+  });
+
+  it("renders password requirements when provided", () => {
+    const {getByTestId} = renderWithTheme(
+      <SignUpScreen
+        fields={defaultFields}
+        onSubmit={mock(() => Promise.resolve())}
+        passwordRequirements={defaultPasswordRequirements}
+      />
+    );
+    expect(getByTestId("signup-screen-password-requirements")).toBeTruthy();
+  });
+
+  it("renders OAuth buttons when providers are given", () => {
+    const providers = [{onPress: mock(() => Promise.resolve()), provider: "google" as const}];
+    const {getByTestId} = renderWithTheme(
+      <SignUpScreen
+        fields={defaultFields}
+        oauthProviders={providers}
+        onSubmit={mock(() => Promise.resolve())}
+      />
+    );
+    expect(getByTestId("signup-screen-oauth")).toBeTruthy();
+  });
+
+  it("updates form field values on change", () => {
+    const {getByTestId} = renderWithTheme(
+      <SignUpScreen fields={defaultFields} onSubmit={mock(() => Promise.resolve())} />
+    );
+    const nameInput = getByTestId("signup-screen-name-input");
+    fireEvent.changeText(nameInput, "John Doe");
+    expect(nameInput.props.value).toBe("John Doe");
+  });
+
+  it("renders with custom testID", () => {
+    const {getByTestId} = renderWithTheme(
+      <SignUpScreen
+        fields={defaultFields}
+        onSubmit={mock(() => Promise.resolve())}
+        testID="custom-signup"
+      />
+    );
+    expect(getByTestId("custom-signup")).toBeTruthy();
+  });
+
+  it("renders correctly with all props", () => {
+    const {toJSON} = renderWithTheme(
+      <SignUpScreen
+        error="Error!"
+        fields={defaultFields}
+        loading
+        onLoginPress={() => {}}
+        onSubmit={mock(() => Promise.resolve())}
+        passwordRequirements={defaultPasswordRequirements}
+        title="Sign Up"
+      />
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+});

package/src/signUp/SignUpScreen.tsx

@@ -0,0 +1,172 @@
+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 {Text} from "../Text";
+import {TextField} from "../TextField";
+import {OAuthButtons} from "./OAuthButtons";
+import {PasswordRequirements} from "./PasswordRequirements";
+import {Swiper} from "./Swiper";
+import type {SignUpScreenProps} from "./signUpTypes";
+
+/**
+ * A configurable sign-up screen component with support for custom fields,
+ * password requirements, OAuth providers, and onboarding pages.
+ *
+ * @example
+ * ```tsx
+ * <SignUpScreen
+ *   fields={[
+ *     {name: "name", label: "Name", type: "text", required: true},
+ *     {name: "email", label: "Email", type: "email", required: true},
+ *     {name: "password", label: "Password", type: "password", required: true},
+ *   ]}
+ *   onSubmit={async (values) => {
+ *     await signUp(values.email, values.password, values.name);
+ *   }}
+ *   passwordRequirements={defaultPasswordRequirements}
+ *   oauthProviders={[
+ *     {provider: "google", onPress: () => signInWithSocial("google")},
+ *   ]}
+ *   onLoginPress={() => router.push("/login")}
+ * />
+ * ```
+ */
+export const SignUpScreen: FC<SignUpScreenProps> = ({
+  fields,
+  onSubmit,
+  oauthProviders,
+  passwordRequirements,
+  onboardingPages,
+  logo,
+  title = "Create Account",
+  loading = false,
+  error,
+  loginLinkText = "Already have an account? Log in",
+  onLoginPress,
+  testID = "signup-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 passwordField = fields.find((f) => f.type === "password");
+  const passwordValue = passwordField ? (formValues[passwordField.name] ?? "") : "";
+
+  const allRequirementsMet =
+    !passwordRequirements ||
+    passwordRequirements.length === 0 ||
+    passwordRequirements.every((req) => req.validate(passwordValue));
+
+  const requiredFieldsFilled = fields
+    .filter((f) => f.required)
+    .every((f) => (formValues[f.name] ?? "").trim().length > 0);
+
+  const isSubmitDisabled = loading || !requiredFieldsFilled || !allRequirementsMet;
+
+  return (
+    <Page navigation={undefined}>
+      <Box
+        alignItems="center"
+        alignSelf="center"
+        flex="grow"
+        justifyContent="center"
+        maxWidth={400}
+        padding={4}
+        testID={testID}
+        width="100%"
+      >
+        {Boolean(onboardingPages && onboardingPages.length > 0) && (
+          <Box marginBottom={6}>
+            <Swiper pages={onboardingPages!} testID={`${testID}-swiper`} />
+          </Box>
+        )}
+
+        {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(passwordRequirements && passwordRequirements.length > 0 && passwordField) && (
+            <PasswordRequirements
+              password={passwordValue}
+              requirements={passwordRequirements!}
+              testID={`${testID}-password-requirements`}
+            />
+          )}
+
+          {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="Sign Up"
+            />
+          </Box>
+
+          {Boolean(onLoginPress) && (
+            <Box marginTop={2}>
+              <Button
+                disabled={loading}
+                fullWidth
+                onClick={onLoginPress!}
+                testID={`${testID}-login-link`}
+                text={loginLinkText!}
+                variant="outline"
+              />
+            </Box>
+          )}
+
+          {Boolean(oauthProviders && oauthProviders.length > 0) && (
+            <OAuthButtons
+              disabled={loading}
+              providers={oauthProviders!}
+              testID={`${testID}-oauth`}
+            />
+          )}
+        </Box>
+      </Box>
+    </Page>
+  );
+};

package/src/signUp/Swiper.test.tsx

@@ -0,0 +1,46 @@
+import {describe, expect, it} from "bun:test";
+
+import {Text} from "react-native";
+import {renderWithTheme} from "../test-utils";
+import {Swiper} from "./Swiper";
+
+describe("Swiper", () => {
+  const mockPages = [
+    {subtitle: "Get started with our app", title: "Welcome"},
+    {subtitle: "Discover what we offer", title: "Features"},
+    {subtitle: "Create your account", title: "Ready?"},
+  ];
+
+  it("renders with pages", () => {
+    const {getByTestId} = renderWithTheme(<Swiper pages={mockPages} testID="swiper" />);
+    expect(getByTestId("swiper")).toBeTruthy();
+  });
+
+  it("renders nothing when pages is empty", () => {
+    const {queryByTestId} = renderWithTheme(<Swiper pages={[]} testID="swiper" />);
+    expect(queryByTestId("swiper")).toBeNull();
+  });
+
+  it("renders page titles", () => {
+    const {getByText} = renderWithTheme(<Swiper pages={mockPages} />);
+    expect(getByText("Welcome")).toBeTruthy();
+  });
+
+  it("renders page subtitles", () => {
+    const {getByText} = renderWithTheme(<Swiper pages={mockPages} />);
+    expect(getByText("Get started with our app")).toBeTruthy();
+  });
+
+  it("renders custom content", () => {
+    const pagesWithContent = [
+      {content: <Text testID="custom-content">Custom Content</Text>, title: "Custom"},
+    ];
+    const {getByTestId} = renderWithTheme(<Swiper pages={pagesWithContent} />);
+    expect(getByTestId("custom-content")).toBeTruthy();
+  });
+
+  it("renders correctly", () => {
+    const {toJSON} = renderWithTheme(<Swiper pages={mockPages} testID="swiper" />);
+    expect(toJSON()).toMatchSnapshot();
+  });
+});

package/src/signUp/Swiper.tsx

@@ -0,0 +1,59 @@
+import type {FC} from "react";
+import {Image} from "react-native";
+import {SwiperFlatList} from "react-native-swiper-flatlist";
+
+import {Box} from "../Box";
+import {Heading} from "../Heading";
+import {Text} from "../Text";
+import type {OnboardingPage} from "./signUpTypes";
+
+interface SwiperProps {
+  /** Onboarding pages to display. */
+  pages: OnboardingPage[];
+  /** Test ID prefix for the component. */
+  testID?: string;
+}
+
+/**
+ * An onboarding swiper that displays pages with optional images, titles, and subtitles.
+ */
+export const Swiper: FC<SwiperProps> = ({pages, testID = "onboarding-swiper"}) => {
+  if (pages.length === 0) {
+    return null;
+  }
+
+  return (
+    <Box height={300} testID={testID} width="100%">
+      <SwiperFlatList autoplay autoplayDelay={4} autoplayLoop showPagination>
+        {pages.map((page, index) => (
+          <Box
+            alignItems="center"
+            justifyContent="center"
+            key={`${page.title}-${index}`}
+            padding={4}
+            width="100%"
+          >
+            {Boolean(page.image) && (
+              <Image
+                resizeMode="contain"
+                source={page.image!}
+                style={{height: 120, marginBottom: 16, width: 120}}
+              />
+            )}
+            {Boolean(page.content) && page.content}
+            <Heading align="center" size="md">
+              {page.title}
+            </Heading>
+            {Boolean(page.subtitle) && (
+              <Box marginTop={2}>
+                <Text align="center" color="secondaryLight">
+                  {page.subtitle}
+                </Text>
+              </Box>
+            )}
+          </Box>
+        ))}
+      </SwiperFlatList>
+    </Box>
+  );
+};