@terreno/ui 0.0.18 → 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.
@@ -1836,8 +1888,7 @@ export interface NumberPickerActionSheetProps {
 }
 
 export interface PageProps {
-  // TODO: figure out navigation
-  navigation: any;
+  navigation?: any;
   scroll?: boolean;
   loading?: boolean;
   display?: "flex" | "none" | "block" | "inlineBlock";

package/src/Hyperlink.tsx

@@ -63,11 +63,7 @@ class HyperlinkComponent extends React.Component<HyperlinkProps> {
     const elements = [];
     let _lastIndex = 0;
 
-    const componentProps = {
-      ...component.props,
-      key: undefined,
-      ref: undefined,
-    };
+    const {key: _key, ref: _ref, ...componentProps} = component.props;
 
     try {
       linkifyIt.match(component.props.children).forEach(({index, lastIndex, text, url}: any) => {
@@ -120,11 +116,7 @@ class HyperlinkComponent extends React.Component<HyperlinkProps> {
     const {props: {children} = {} as any} = component || {};
     if (!children) return component;
 
-    const componentProps = {
-      ...component.props,
-      key: undefined,
-      ref: undefined,
-    };
+    const {key: _key, ref: _ref, ...componentProps} = component.props;
 
     const linkifyIt = this.props.linkify || linkifyLib;
 

package/src/Page.tsx

@@ -1,3 +1,4 @@
+import {router} from "expo-router";
 import React from "react";
 
 import {Box} from "./Box";
@@ -23,7 +24,7 @@ export class Page extends React.Component<PageProps, {}> {
               accessibilityHint="Navigate back"
               accessibilityLabel=""
               iconName="chevron-left"
-              onClick={() => this.props.navigation.goBack()}
+              onClick={() => router.back()}
             />
           </Box>
         )}
@@ -33,7 +34,7 @@ export class Page extends React.Component<PageProps, {}> {
               accessibilityHint="Close page"
               accessibilityLabel=""
               iconName="xmark"
-              onClick={() => this.props.navigation.goBack()}
+              onClick={() => router.back()}
             />
           </Box>
         )}

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

@@ -85,6 +85,9 @@ export const Text = ({
   if (align) {
     style.textAlign = align;
   }
+  if (!theme?.text) {
+    throw new Error("Text component must be used within TerrenoProvider");
+  }
   if (color) {
     style.color = theme.text[color];
   } else {

package/src/Theme.tsx

@@ -163,11 +163,39 @@ type DeepPartial<T> = {
   [P in keyof T]?: T[P] extends object ? DeepPartial<T[P]> : T[P];
 };
 
+const computeTheme = (
+  themeConfig: DeepPartial<TerrenoThemeConfig>,
+  primitives: ThemePrimitives
+): TerrenoTheme => {
+  const theme = Object.keys(themeConfig).reduce((acc, key) => {
+    if (key === "primitives") {
+      return acc;
+    }
+    const value = themeConfig[key as keyof TerrenoThemeConfig] ?? {};
+    acc[key as keyof TerrenoTheme] = Object.keys(value).reduce((accKey, valueKey) => {
+      const primitiveKey = value[valueKey as keyof typeof value] as keyof ThemePrimitives;
+      if (key === "font") {
+        accKey[valueKey] = primitiveKey;
+      } else {
+        if (primitives[primitiveKey] === undefined) {
+          console.error(`Primitive ${primitiveKey} not found in theme.`);
+        }
+        accKey[valueKey as keyof typeof accKey] = primitives[primitiveKey];
+      }
+      return accKey;
+    }, {} as any);
+    return acc;
+  }, {} as TerrenoTheme);
+  return {...theme, primitives};
+};
+
+const defaultComputedTheme = computeTheme(defaultTheme, defaultPrimitives);
+
 export const ThemeContext = createContext({
   resetTheme: () => {},
   setPrimitives: (_primitives: DeepPartial<typeof defaultPrimitives>) => {},
   setTheme: (_theme: DeepPartial<TerrenoThemeConfig>) => {},
-  theme: {} as TerrenoTheme,
+  theme: defaultComputedTheme,
 });
 
 interface ThemeProviderProps {
@@ -178,32 +206,10 @@ export const ThemeProvider = ({children}: ThemeProviderProps) => {
   const [providerTheme, setProviderTheme] = useState<DeepPartial<TerrenoThemeConfig>>(defaultTheme);
   const [providerPrimitives, setProviderPrimitives] = useState<ThemePrimitives>(defaultPrimitives);
 
-  const computedTheme = useMemo(() => {
-    // Map the providerTheme and transform the strings into the actual values from the primitives.
-    // Do this for each sub-object in the theme. E.g. theme.text, theme.surface, etc.
-    const theme = Object.keys(providerTheme).reduce((acc, key) => {
-      if (key === "primitives") return acc;
-      const value = providerTheme[key as keyof TerrenoThemeConfig] ?? {};
-      // for each key, map the value to the primitive value.
-      acc[key as keyof TerrenoTheme] = Object.keys(value).reduce((accKey, valueKey) => {
-        const primitiveKey = value[valueKey as keyof typeof value] as keyof ThemePrimitives;
-        if (key === "font") {
-          accKey[valueKey] = primitiveKey;
-        } else {
-          if (providerPrimitives[primitiveKey] === undefined) {
-            console.error(`Primitive ${primitiveKey} not found in theme.`);
-          }
-          accKey[valueKey as keyof typeof accKey] = providerPrimitives[primitiveKey];
-        }
-        return accKey;
-      }, {} as any);
-      return acc;
-    }, {} as TerrenoTheme);
-    return {
-      ...theme,
-      primitives: providerPrimitives,
-    };
-  }, [providerTheme, providerPrimitives]);
+  const computedTheme = useMemo(
+    () => computeTheme(providerTheme, providerPrimitives),
+    [providerTheme, providerPrimitives]
+  );
 
   const setPrimitives = (newPrimitives: Partial<ThemePrimitives>) => {
     setProviderPrimitives((prev) => ({...prev, ...newPrimitives}));

package/src/Toast.tsx

@@ -32,6 +32,10 @@ export function useToast(): {
 } {
   const toast = useToastNotifications();
   const show = (title: string, options?: UseToastOptions): string => {
+    if (!toast?.show) {
+      console.warn("Toast not ready yet — provider ref may not be initialized");
+      return "";
+    }
     const toastData = {
       variant: "info",
       ...options,
@@ -39,7 +43,6 @@ export function useToast(): {
     };
     return toast.show(title, {
       data: toastData,
-      // a duration of 0 keeps the toast up infinitely until hidden
       duration: options?.persistent ? 0 : TOAST_DURATION_MS,
     });
   };
@@ -60,7 +63,7 @@ export function useToast(): {
       console.error(title);
       return show(title, {...options, variant: "error"});
     },
-    hide: (id: string) => toast.hide(id),
+    hide: (id: string) => toast?.hide?.(id),
     info: (title: string, options?: UseToastVariantOptions): string => {
       console.info(title);
       return show(title, {...options, variant: "info"});

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

@@ -51,7 +51,7 @@ exports[`Button renders correctly with default props 1`] = `
     "onPress": [Function: debounced],
     "style": {
       "alignItems": "center",
-      "alignSelf": undefined,
+      "alignSelf": "flex-start",
       "backgroundColor": "#0E9DCD",
       "borderColor": undefined,
       "borderRadius": 360,
@@ -119,7 +119,7 @@ exports[`Button renders primary variant 1`] = `
     "onPress": [Function: debounced],
     "style": {
       "alignItems": "center",
-      "alignSelf": undefined,
+      "alignSelf": "flex-start",
       "backgroundColor": "#0E9DCD",
       "borderColor": undefined,
       "borderRadius": 360,
@@ -187,7 +187,7 @@ exports[`Button renders secondary variant 1`] = `
     "onPress": [Function: debounced],
     "style": {
       "alignItems": "center",
-      "alignSelf": undefined,
+      "alignSelf": "flex-start",
       "backgroundColor": "#2B6072",
       "borderColor": undefined,
       "borderRadius": 360,
@@ -255,7 +255,7 @@ exports[`Button renders muted variant 1`] = `
     "onPress": [Function: debounced],
     "style": {
       "alignItems": "center",
-      "alignSelf": undefined,
+      "alignSelf": "flex-start",
       "backgroundColor": "#B6CDD5",
       "borderColor": undefined,
       "borderRadius": 360,
@@ -323,7 +323,7 @@ exports[`Button renders outline variant 1`] = `
     "onPress": [Function: debounced],
     "style": {
       "alignItems": "center",
-      "alignSelf": undefined,
+      "alignSelf": "flex-start",
       "backgroundColor": "#FFFFFF",
       "borderColor": "#092E3A",
       "borderRadius": 360,
@@ -391,7 +391,7 @@ exports[`Button renders destructive variant 1`] = `
     "onPress": [Function: debounced],
     "style": {
       "alignItems": "center",
-      "alignSelf": undefined,
+      "alignSelf": "flex-start",
       "backgroundColor": "#BD1111",
       "borderColor": undefined,
       "borderRadius": 360,
@@ -459,7 +459,7 @@ exports[`Button renders disabled state 1`] = `
     "onPress": [Function: debounced],
     "style": {
       "alignItems": "center",
-      "alignSelf": undefined,
+      "alignSelf": "flex-start",
       "backgroundColor": "#9A9A9A",
       "borderColor": undefined,
       "borderRadius": 360,
@@ -527,7 +527,7 @@ exports[`Button applies disabled styles when disabled 1`] = `
     "onPress": [Function: debounced],
     "style": {
       "alignItems": "center",
-      "alignSelf": undefined,
+      "alignSelf": "flex-start",
       "backgroundColor": "#9A9A9A",
       "borderColor": undefined,
       "borderRadius": 360,
@@ -618,7 +618,7 @@ exports[`Button renders loading state 1`] = `
     "onPress": [Function: debounced],
     "style": {
       "alignItems": "center",
-      "alignSelf": undefined,
+      "alignSelf": "flex-start",
       "backgroundColor": "#0E9DCD",
       "borderColor": undefined,
       "borderRadius": 360,
@@ -767,7 +767,7 @@ exports[`Button renders with icon on left 1`] = `
     "onPress": [Function: debounced],
     "style": {
       "alignItems": "center",
-      "alignSelf": undefined,
+      "alignSelf": "flex-start",
       "backgroundColor": "#0E9DCD",
       "borderColor": undefined,
       "borderRadius": 360,
@@ -848,7 +848,7 @@ exports[`Button renders with icon on right 1`] = `
     "onPress": [Function: debounced],
     "style": {
       "alignItems": "center",
-      "alignSelf": undefined,
+      "alignSelf": "flex-start",
       "backgroundColor": "#0E9DCD",
       "borderColor": undefined,
       "borderRadius": 360,
@@ -916,7 +916,7 @@ exports[`Button renders with confirmation modal props 1`] = `
     "onPress": [Function: debounced],
     "style": {
       "alignItems": "center",
-      "alignSelf": undefined,
+      "alignSelf": "flex-start",
       "backgroundColor": "#0E9DCD",
       "borderColor": undefined,
       "borderRadius": 360,