@terreno/ui 0.1.0 → 0.2.0

package/dist/signUp/index.d.ts

@@ -0,0 +1,6 @@
+export { OAuthButtons } from "./OAuthButtons";
+export { PasswordRequirements } from "./PasswordRequirements";
+export { defaultPasswordRequirements, simplePasswordRequirements } from "./passwordPresets";
+export { SignUpScreen } from "./SignUpScreen";
+export { Swiper } from "./Swiper";
+export type { OAuthProvider, OAuthProviderConfig, OnboardingPage, PasswordRequirement, SignUpFieldConfig, SignUpScreenProps, } from "./signUpTypes";

package/dist/signUp/index.js

@@ -0,0 +1,6 @@
+export { OAuthButtons } from "./OAuthButtons";
+export { PasswordRequirements } from "./PasswordRequirements";
+export { defaultPasswordRequirements, simplePasswordRequirements } from "./passwordPresets";
+export { SignUpScreen } from "./SignUpScreen";
+export { Swiper } from "./Swiper";
+//# sourceMappingURL=index.js.map

package/dist/signUp/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/signUp/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,YAAY,EAAC,MAAM,gBAAgB,CAAC;AAC5C,OAAO,EAAC,oBAAoB,EAAC,MAAM,wBAAwB,CAAC;AAC5D,OAAO,EAAC,2BAA2B,EAAE,0BAA0B,EAAC,MAAM,mBAAmB,CAAC;AAC1F,OAAO,EAAC,YAAY,EAAC,MAAM,gBAAgB,CAAC;AAC5C,OAAO,EAAC,MAAM,EAAC,MAAM,UAAU,CAAC"}

package/dist/signUp/passwordPresets.d.ts

@@ -0,0 +1,9 @@
+import type { PasswordRequirement } from "./signUpTypes";
+/**
+ * Default password requirements with strong validation rules.
+ */
+export declare const defaultPasswordRequirements: PasswordRequirement[];
+/**
+ * Simple password requirements with minimal validation.
+ */
+export declare const simplePasswordRequirements: PasswordRequirement[];

package/dist/signUp/passwordPresets.js

@@ -0,0 +1,41 @@
+/**
+ * Default password requirements with strong validation rules.
+ */
+export const defaultPasswordRequirements = [
+    {
+        key: "minLength",
+        label: "At least 8 characters",
+        validate: (password) => password.length >= 8,
+    },
+    {
+        key: "uppercase",
+        label: "At least one uppercase letter",
+        validate: (password) => /[A-Z]/.test(password),
+    },
+    {
+        key: "lowercase",
+        label: "At least one lowercase letter",
+        validate: (password) => /[a-z]/.test(password),
+    },
+    {
+        key: "number",
+        label: "At least one number",
+        validate: (password) => /\d/.test(password),
+    },
+    {
+        key: "special",
+        label: "At least one special character",
+        validate: (password) => /[!@#$%^&*(),.?":{}|<>]/.test(password),
+    },
+];
+/**
+ * Simple password requirements with minimal validation.
+ */
+export const simplePasswordRequirements = [
+    {
+        key: "minLength",
+        label: "At least 6 characters",
+        validate: (password) => password.length >= 6,
+    },
+];
+//# sourceMappingURL=passwordPresets.js.map

package/dist/signUp/passwordPresets.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"passwordPresets.js","sourceRoot":"","sources":["../../src/signUp/passwordPresets.ts"],"names":[],"mappings":"AAEA;;GAEG;AACH,MAAM,CAAC,MAAM,2BAA2B,GAA0B;IAChE;QACE,GAAG,EAAE,WAAW;QAChB,KAAK,EAAE,uBAAuB;QAC9B,QAAQ,EAAE,CAAC,QAAgB,EAAE,EAAE,CAAC,QAAQ,CAAC,MAAM,IAAI,CAAC;KACrD;IACD;QACE,GAAG,EAAE,WAAW;QAChB,KAAK,EAAE,+BAA+B;QACtC,QAAQ,EAAE,CAAC,QAAgB,EAAE,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAC;KACvD;IACD;QACE,GAAG,EAAE,WAAW;QAChB,KAAK,EAAE,+BAA+B;QACtC,QAAQ,EAAE,CAAC,QAAgB,EAAE,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAC;KACvD;IACD;QACE,GAAG,EAAE,QAAQ;QACb,KAAK,EAAE,qBAAqB;QAC5B,QAAQ,EAAE,CAAC,QAAgB,EAAE,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC;KACpD;IACD;QACE,GAAG,EAAE,SAAS;QACd,KAAK,EAAE,gCAAgC;QACvC,QAAQ,EAAE,CAAC,QAAgB,EAAE,EAAE,CAAC,wBAAwB,CAAC,IAAI,CAAC,QAAQ,CAAC;KACxE;CACF,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,0BAA0B,GAA0B;IAC/D;QACE,GAAG,EAAE,WAAW;QAChB,KAAK,EAAE,uBAAuB;QAC9B,QAAQ,EAAE,CAAC,QAAgB,EAAE,EAAE,CAAC,QAAQ,CAAC,MAAM,IAAI,CAAC;KACrD;CACF,CAAC"}

package/dist/signUp/signUpTypes.d.ts

@@ -0,0 +1,90 @@
+import type { ReactNode } from "react";
+/**
+ * Supported OAuth providers for social login buttons.
+ */
+export type OAuthProvider = "google" | "github" | "apple";
+/**
+ * Configuration for an OAuth provider button.
+ */
+export interface OAuthProviderConfig {
+    /** The OAuth provider identifier. */
+    provider: OAuthProvider;
+    /** Callback triggered when the provider button is pressed. */
+    onPress: () => Promise<void>;
+    /** Whether the button is in a loading state. */
+    loading?: boolean;
+    /** Whether the button is disabled. */
+    disabled?: boolean;
+}
+/**
+ * Configuration for a sign-up form field.
+ */
+export interface SignUpFieldConfig {
+    /** 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";
+}
+/**
+ * A single password requirement with a label and validation function.
+ */
+export interface PasswordRequirement {
+    /** Unique key for the requirement. */
+    key: string;
+    /** Display label for the requirement. */
+    label: string;
+    /** Returns true if the password meets this requirement. */
+    validate: (password: string) => boolean;
+}
+/**
+ * Configuration for a single onboarding page in the swiper.
+ */
+export interface OnboardingPage {
+    /** Title text displayed on the page. */
+    title: string;
+    /** Subtitle or description text. */
+    subtitle?: string;
+    /** Custom content to render on the page. */
+    content?: ReactNode;
+    /** Image source for the page. */
+    image?: number | {
+        uri: string;
+    };
+}
+/**
+ * Props for the SignUpScreen component.
+ */
+export interface SignUpScreenProps {
+    /** Form field configurations. */
+    fields: SignUpFieldConfig[];
+    /** 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[];
+    /** Password requirements to validate against. */
+    passwordRequirements?: PasswordRequirement[];
+    /** Onboarding pages to display before the sign-up form. */
+    onboardingPages?: OnboardingPage[];
+    /** Custom logo or banner to display above the form. */
+    logo?: ReactNode;
+    /** Title text for the sign-up 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 login. */
+    loginLinkText?: string;
+    /** Callback triggered when the login link is pressed. */
+    onLoginPress?: () => void;
+    /** Test ID for the root element. */
+    testID?: string;
+}

package/dist/signUp/signUpTypes.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=signUpTypes.js.map

package/dist/signUp/signUpTypes.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"signUpTypes.js","sourceRoot":"","sources":["../../src/signUp/signUpTypes.ts"],"names":[],"mappings":""}

package/package.json

@@ -41,7 +41,7 @@
     "expo-web-browser": "~15.0.10",
     "libphonenumber-js": "^1.12.36",
     "linkify-it": "^5.0.0",
-    "lodash": "^4.17.21",
+    "lodash": "^4.17.23",
     "luxon": "^3.7.2",
     "react-app-polyfill": "^3.0.0",
     "react-date-picker": "^12.0.1",
@@ -93,6 +93,7 @@
     "react": "19.1.0",
     "react-router": "^6.26.2",
     "react-router-dom": "^6.30.1",
+    "react-test-renderer": "19.1.0",
     "tsc-watch": "^7.1.1",
     "typescript": "~5.9.2"
   },
@@ -129,5 +130,5 @@
     "test:ci": "TZ=America/New_York bun test",
     "types": "bunx typedoc"
   },
-  "version": "0.1.0"
+  "version": "0.2.0"
 }

package/src/Common.ts

@@ -1540,6 +1540,58 @@ export interface ButtonProps {
   onClick: () => void | Promise<void>;
 }
 
+/**
+ * Props for the SocialLoginButton component.
+ * Used for OAuth social login buttons (Google, GitHub, Apple).
+ */
+export interface SocialLoginButtonProps {
+  /**
+   * The OAuth provider for the social login.
+   */
+  provider: "google" | "github" | "apple";
+
+  /**
+   * The function to call when the button is pressed.
+   * Should initiate the OAuth flow.
+   */
+  onPress: () => Promise<void>;
+
+  /**
+   * If true, a loading spinner will be shown in the button.
+   */
+  loading?: boolean;
+
+  /**
+   * The visual variant of the button.
+   * - "primary": Uses the provider's brand colors
+   * - "outline": Uses an outline style with neutral colors
+   * @default "primary"
+   */
+  variant?: "primary" | "outline";
+
+  /**
+   * If true, the button will be disabled.
+   * @default false
+   */
+  disabled?: boolean;
+
+  /**
+   * If true, the button will take the full width of its container.
+   * @default true
+   */
+  fullWidth?: boolean;
+
+  /**
+   * Custom text for the button. Defaults to "Continue with {Provider}".
+   */
+  text?: string;
+
+  /**
+   * Test ID for testing purposes.
+   */
+  testID?: string;
+}
+
 export interface CustomSelectFieldProps {
   /**
    * The current value of the custom select field.

package/src/SocialLoginButton.test.tsx

@@ -0,0 +1,158 @@
+import {describe, expect, it, mock} from "bun:test";
+import {fireEvent} from "@testing-library/react-native";
+
+import {SocialLoginButton} from "./SocialLoginButton";
+import {renderWithTheme} from "./test-utils";
+
+describe("SocialLoginButton", () => {
+  const createMockOnPress = () => mock(() => Promise.resolve());
+
+  it("renders correctly with Google provider", () => {
+    const onPress = createMockOnPress();
+    const {toJSON} = renderWithTheme(<SocialLoginButton onPress={onPress} provider="google" />);
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("renders correctly with GitHub provider", () => {
+    const onPress = createMockOnPress();
+    const {toJSON} = renderWithTheme(<SocialLoginButton onPress={onPress} provider="github" />);
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("renders correctly with Apple provider", () => {
+    const onPress = createMockOnPress();
+    const {toJSON} = renderWithTheme(<SocialLoginButton onPress={onPress} provider="apple" />);
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("displays default text for each provider", () => {
+    const onPress = createMockOnPress();
+
+    const {getByText: getGoogleText} = renderWithTheme(
+      <SocialLoginButton onPress={onPress} provider="google" />
+    );
+    expect(getGoogleText("Continue with Google")).toBeTruthy();
+
+    const {getByText: getGitHubText} = renderWithTheme(
+      <SocialLoginButton onPress={onPress} provider="github" />
+    );
+    expect(getGitHubText("Continue with GitHub")).toBeTruthy();
+
+    const {getByText: getAppleText} = renderWithTheme(
+      <SocialLoginButton onPress={onPress} provider="apple" />
+    );
+    expect(getAppleText("Continue with Apple")).toBeTruthy();
+  });
+
+  it("displays custom text when provided", () => {
+    const onPress = createMockOnPress();
+    const customText = "Sign in with Google";
+
+    const {getByText} = renderWithTheme(
+      <SocialLoginButton onPress={onPress} provider="google" text={customText} />
+    );
+
+    expect(getByText(customText)).toBeTruthy();
+  });
+
+  it("renders with outline variant", () => {
+    const onPress = createMockOnPress();
+    const {toJSON} = renderWithTheme(
+      <SocialLoginButton onPress={onPress} provider="google" variant="outline" />
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("calls onPress when button is pressed", async () => {
+    const onPress = createMockOnPress();
+    const {getByTestId} = renderWithTheme(
+      <SocialLoginButton onPress={onPress} provider="google" testID="google-login" />
+    );
+
+    const button = getByTestId("google-login");
+    fireEvent.press(button);
+
+    // Wait for debounce
+    await new Promise((resolve) => setTimeout(resolve, 600));
+
+    expect(onPress).toHaveBeenCalled();
+  });
+
+  it("disables button when disabled prop is true", () => {
+    const onPress = createMockOnPress();
+    const {getByTestId} = renderWithTheme(
+      <SocialLoginButton disabled onPress={onPress} provider="google" />
+    );
+
+    const button = getByTestId("social-login-google");
+    expect(button.props.disabled).toBe(true);
+  });
+
+  it("disables button when loading is true", () => {
+    const onPress = createMockOnPress();
+    const {getByTestId} = renderWithTheme(
+      <SocialLoginButton loading onPress={onPress} provider="google" />
+    );
+
+    const button = getByTestId("social-login-google");
+    expect(button.props.disabled).toBe(true);
+  });
+
+  it("uses correct testID", () => {
+    const onPress = createMockOnPress();
+    const {getByTestId} = renderWithTheme(
+      <SocialLoginButton onPress={onPress} provider="google" testID="custom-test-id" />
+    );
+
+    expect(getByTestId("custom-test-id")).toBeTruthy();
+  });
+
+  it("uses default testID based on provider", () => {
+    const onPress = createMockOnPress();
+    const {getByTestId} = renderWithTheme(
+      <SocialLoginButton onPress={onPress} provider="github" />
+    );
+
+    expect(getByTestId("social-login-github")).toBeTruthy();
+  });
+
+  it("renders full width by default", () => {
+    const onPress = createMockOnPress();
+    const {getByTestId} = renderWithTheme(
+      <SocialLoginButton onPress={onPress} provider="google" />
+    );
+
+    const button = getByTestId("social-login-google");
+    expect(button).toHaveStyle({width: "100%"});
+  });
+
+  it("renders auto width when fullWidth is false", () => {
+    const onPress = createMockOnPress();
+    const {getByTestId} = renderWithTheme(
+      <SocialLoginButton fullWidth={false} onPress={onPress} provider="google" />
+    );
+
+    const button = getByTestId("social-login-google");
+    expect(button).toHaveStyle({width: "auto"});
+  });
+
+  it("has correct accessibility label", () => {
+    const onPress = createMockOnPress();
+    const {getByTestId} = renderWithTheme(
+      <SocialLoginButton onPress={onPress} provider="google" text="Sign in with Google" />
+    );
+
+    const button = getByTestId("social-login-google");
+    expect(button.props["aria-label"]).toBe("Sign in with Google");
+  });
+
+  it("has correct accessibility hint", () => {
+    const onPress = createMockOnPress();
+    const {getByTestId} = renderWithTheme(
+      <SocialLoginButton onPress={onPress} provider="google" />
+    );
+
+    const button = getByTestId("social-login-google");
+    expect(button.props.accessibilityHint).toBe("Sign in with Google");
+  });
+});

package/src/SocialLoginButton.tsx

@@ -0,0 +1,182 @@
+import FontAwesome6 from "@expo/vector-icons/FontAwesome6";
+import debounce from "lodash/debounce";
+import {type FC, useMemo, useState} from "react";
+import {ActivityIndicator, Pressable, Text, View} from "react-native";
+
+import {Box} from "./Box";
+import type {SocialLoginButtonProps} from "./Common";
+import {useTheme} from "./Theme";
+import {Unifier} from "./Unifier";
+
+/**
+ * Brand colors for social login providers
+ */
+const PROVIDER_COLORS = {
+  apple: {
+    background: "#000000",
+    border: "#000000",
+    text: "#ffffff",
+  },
+  github: {
+    background: "#24292e",
+    border: "#24292e",
+    text: "#ffffff",
+  },
+  google: {
+    background: "#ffffff",
+    border: "#dadce0",
+    text: "#1f1f1f",
+  },
+};
+
+/**
+ * Font Awesome icon names for social providers
+ */
+const PROVIDER_ICONS: Record<string, string> = {
+  apple: "apple",
+  github: "github",
+  google: "google",
+};
+
+/**
+ * Display names for social providers
+ */
+const PROVIDER_NAMES: Record<string, string> = {
+  apple: "Apple",
+  github: "GitHub",
+  google: "Google",
+};
+
+/**
+ * A branded social login button for OAuth authentication.
+ *
+ * Supports Google, GitHub, and Apple sign-in with appropriate brand colors
+ * and icons following each provider's brand guidelines.
+ *
+ * @example
+ * ```tsx
+ * <SocialLoginButton
+ *   provider="google"
+ *   onPress={async () => {
+ *     await authClient.signIn.social({ provider: "google" });
+ *   }}
+ * />
+ * ```
+ */
+export const SocialLoginButton: FC<SocialLoginButtonProps> = ({
+  provider,
+  onPress,
+  loading: propsLoading,
+  variant = "primary",
+  disabled = false,
+  fullWidth = true,
+  text,
+  testID,
+}) => {
+  const [loading, setLoading] = useState(propsLoading);
+  const {theme} = useTheme();
+
+  const {backgroundColor, borderColor, textColor} = useMemo(() => {
+    const colors = PROVIDER_COLORS[provider];
+
+    if (variant === "outline") {
+      return {
+        backgroundColor: theme?.surface.base ?? "#ffffff",
+        borderColor: colors.border,
+        textColor: theme?.text.primary ?? "#1f1f1f",
+      };
+    }
+
+    return {
+      backgroundColor: colors.background,
+      borderColor: colors.border,
+      textColor: colors.text,
+    };
+  }, [provider, variant, theme]);
+
+  const iconName = PROVIDER_ICONS[provider];
+  const providerName = PROVIDER_NAMES[provider];
+  const buttonText = text ?? `Continue with ${providerName}`;
+
+  const handlePress = useMemo(
+    () =>
+      debounce(
+        async () => {
+          await Unifier.utils.haptic();
+          setLoading(true);
+
+          try {
+            await onPress();
+          } catch (error) {
+            console.error(`Social login error (${provider}):`, error);
+          } finally {
+            setLoading(false);
+          }
+        },
+        500,
+        {leading: true}
+      ),
+    [onPress, provider]
+  );
+
+  if (!theme) {
+    return null;
+  }
+
+  const isDisabled = disabled || loading;
+
+  return (
+    <Pressable
+      accessibilityHint={`Sign in with ${providerName}`}
+      aria-label={buttonText}
+      aria-role="button"
+      disabled={isDisabled}
+      onPress={handlePress}
+      style={{
+        alignItems: "center",
+        alignSelf: fullWidth ? "stretch" : undefined,
+        backgroundColor: isDisabled ? theme.surface.disabled : backgroundColor,
+        borderColor,
+        borderRadius: theme.radius.rounded,
+        borderWidth: 1,
+        flexDirection: "row",
+        justifyContent: "center",
+        opacity: isDisabled ? 0.6 : 1,
+        paddingHorizontal: 20,
+        paddingVertical: 12,
+        width: fullWidth ? "100%" : "auto",
+      }}
+      testID={testID ?? `social-login-${provider}`}
+    >
+      <View style={{alignItems: "center", flexDirection: "row"}}>
+        {Boolean(iconName) && (
+          <View style={{marginRight: 12}}>
+            <FontAwesome6
+              brand
+              color={isDisabled ? theme.text.secondaryLight : textColor}
+              name={iconName}
+              size={20}
+            />
+          </View>
+        )}
+        <Text
+          style={{
+            color: isDisabled ? theme.text.secondaryLight : textColor,
+            fontSize: 16,
+            fontWeight: "600",
+          }}
+        >
+          {buttonText}
+        </Text>
+        {Boolean(loading) && (
+          <Box marginLeft={2}>
+            <ActivityIndicator
+              color={isDisabled ? theme.text.secondaryLight : textColor}
+              size="small"
+            />
+          </Box>
+        )}
+      </View>
+    </Pressable>
+  );
+};