@terreno/ui 0.1.0 → 0.3.0

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

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/index.tsx

@@ -3,6 +3,8 @@ export type {StyleProp, ViewStyle} from "react-native";
 export * from "./Accordion";
 export * from "./ActionSheet";
 export * from "./AddressField";
+export * from "./AIRequestExplorer";
+export * from "./AttachmentPreview";
 export * from "./Avatar";
 export * from "./Badge";
 export * from "./Banner";
@@ -26,7 +28,10 @@ export {default as EmojiSelector} from "./EmojiSelector";
 export * from "./ErrorBoundary";
 export * from "./ErrorPage";
 export * from "./Field";
+export * from "./FilePickerButton";
 export * from "./FlatList";
+export * from "./GPTChat";
+export * from "./GPTMemoryModal";
 export * from "./Heading";
 export * from "./HeightActionSheet";
 export * from "./Icon";
@@ -36,6 +41,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";
@@ -60,8 +67,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";