@terreno/ui 0.1.0 → 0.3.0

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

@@ -27,6 +27,7 @@
     "@react-native-picker/picker": "2.11.4",
     "emoji-datasource": "^16.0.0",
     "expo-clipboard": "~8.0.8",
+    "expo-document-picker": "~14.0.8",
     "expo-font": "~14.0.10",
     "expo-haptics": "~15.0.8",
     "expo-image-manipulator": "~14.0.8",
@@ -41,7 +42,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 +94,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 +131,5 @@
     "test:ci": "TZ=America/New_York bun test",
     "types": "bunx typedoc"
   },
-  "version": "0.1.0"
+  "version": "0.3.0"
 }

package/src/AIRequestExplorer.tsx

@@ -0,0 +1,147 @@
+import React from "react";
+
+import {Box} from "./Box";
+import type {DataTableColumn} from "./Common";
+import {DataTable} from "./DataTable";
+import {DateTimeField} from "./DateTimeField";
+import {Heading} from "./Heading";
+import {MultiselectField} from "./MultiselectField";
+import {Pagination} from "./Pagination";
+import {Spinner} from "./Spinner";
+import {Text} from "./Text";
+
+export interface AIRequestExplorerData {
+  aiModel: string;
+  created: string;
+  error?: string;
+  prompt: string;
+  requestType: string;
+  response?: string;
+  responseTime?: number;
+  tokensUsed?: number;
+  user?: {email?: string; name?: string};
+}
+
+export interface AIRequestExplorerProps {
+  data: AIRequestExplorerData[];
+  endDate?: string;
+  isLoading?: boolean;
+  onEndDateChange?: (date: string) => void;
+  onPageChange: (page: number) => void;
+  onRequestTypeFilterChange?: (types: string[]) => void;
+  onStartDateChange?: (date: string) => void;
+  page: number;
+  requestTypeFilter?: string[];
+  startDate?: string;
+  testID?: string;
+  totalCount: number;
+  totalPages: number;
+}
+
+const REQUEST_TYPE_OPTIONS = [
+  {label: "General", value: "general"},
+  {label: "Remix", value: "remix"},
+  {label: "Summarization", value: "summarization"},
+  {label: "Translation", value: "translation"},
+];
+
+const COLUMNS: DataTableColumn[] = [
+  {columnType: "text", title: "Type", width: 120},
+  {columnType: "text", title: "Model", width: 150},
+  {columnType: "text", title: "User", width: 150},
+  {columnType: "text", title: "Prompt", width: 250},
+  {columnType: "text", title: "Response", width: 250},
+  {columnType: "number", title: "Tokens", width: 80},
+  {columnType: "text", title: "Time (ms)", width: 100},
+  {columnType: "text", title: "Created", width: 180},
+  {columnType: "text", title: "Error", width: 150},
+];
+
+const formatRow = (item: AIRequestExplorerData) => {
+  return [
+    {value: item.requestType},
+    {value: item.aiModel},
+    {value: item.user?.name ?? item.user?.email ?? "-"},
+    {value: item.prompt ?? "-"},
+    {value: item.response ?? "-"},
+    {value: item.tokensUsed?.toString() ?? "-"},
+    {value: item.responseTime != null ? `${item.responseTime}ms` : "-"},
+    {value: item.created ? new Date(item.created).toLocaleString() : "-"},
+    {value: item.error ?? ""},
+  ];
+};
+
+export const AIRequestExplorer = ({
+  data,
+  endDate,
+  isLoading = false,
+  onEndDateChange,
+  onPageChange,
+  onRequestTypeFilterChange,
+  onStartDateChange,
+  page,
+  requestTypeFilter,
+  startDate,
+  testID,
+  totalCount,
+  totalPages,
+}: AIRequestExplorerProps): React.ReactElement => {
+  return (
+    <Box direction="column" flex="grow" gap={4} padding={4} testID={testID}>
+      <Heading size="lg">AI Request Explorer</Heading>
+      <Text color="secondaryDark" size="sm">
+        {totalCount} total requests
+      </Text>
+
+      {/* Filters */}
+      <Box direction="row" gap={3} wrap>
+        {onRequestTypeFilterChange ? (
+          <Box minWidth={200}>
+            <MultiselectField
+              onChange={onRequestTypeFilterChange}
+              options={REQUEST_TYPE_OPTIONS}
+              title="Request Type"
+              value={requestTypeFilter ?? []}
+            />
+          </Box>
+        ) : null}
+        {onStartDateChange ? (
+          <Box minWidth={200}>
+            <DateTimeField
+              onChange={onStartDateChange}
+              title="Start Date"
+              type="datetime"
+              value={startDate ?? ""}
+            />
+          </Box>
+        ) : null}
+        {onEndDateChange ? (
+          <Box minWidth={200}>
+            <DateTimeField
+              onChange={onEndDateChange}
+              title="End Date"
+              type="datetime"
+              value={endDate ?? ""}
+            />
+          </Box>
+        ) : null}
+      </Box>
+
+      {/* Table */}
+      {isLoading ? (
+        <Box alignItems="center" padding={6}>
+          <Spinner />
+        </Box>
+      ) : (
+        <DataTable alternateRowBackground columns={COLUMNS} data={data.map(formatRow)} />
+      )}
+
+      {/* Pagination */}
+      {totalPages > 1 ? (
+        <Box alignItems="center">
+          <Pagination page={page} setPage={onPageChange} totalPages={totalPages} />
+        </Box>
+      ) : null}
+    </Box>
+  );
+};

package/src/AttachmentPreview.tsx

@@ -0,0 +1,63 @@
+import React from "react";
+import {Image as RNImage} from "react-native";
+
+import {Box} from "./Box";
+import {DismissButton} from "./DismissButton";
+import type {SelectedFile} from "./FilePickerButton";
+import {Icon} from "./Icon";
+import {Text} from "./Text";
+
+export interface AttachmentPreviewProps {
+  attachments: SelectedFile[];
+  onRemove: (index: number) => void;
+  testID?: string;
+}
+
+const isImageMimeType = (mimeType: string): boolean => {
+  return mimeType.startsWith("image/");
+};
+
+export const AttachmentPreview = ({
+  attachments,
+  onRemove,
+  testID,
+}: AttachmentPreviewProps): React.ReactElement | null => {
+  if (attachments.length === 0) {
+    return null;
+  }
+
+  return (
+    <Box direction="row" gap={2} padding={2} testID={testID ?? "attachment-preview"} wrap>
+      {attachments.map((attachment, index) => (
+        <Box
+          alignItems="center"
+          border="default"
+          direction="row"
+          gap={1}
+          key={`attachment-${index}`}
+          padding={1}
+          rounding="md"
+        >
+          {isImageMimeType(attachment.mimeType) ? (
+            <RNImage
+              source={{uri: attachment.uri}}
+              style={{borderRadius: 4, height: 40, width: 40}}
+            />
+          ) : (
+            <Box alignItems="center" justifyContent="center" padding={1}>
+              <Icon iconName="file" size="sm" />
+            </Box>
+          )}
+          <Text size="sm" truncate>
+            {attachment.name}
+          </Text>
+          <DismissButton
+            accessibilityHint="Removes this attachment"
+            accessibilityLabel={`Remove ${attachment.name}`}
+            onClick={() => onRemove(index)}
+          />
+        </Box>
+      ))}
+    </Box>
+  );
+};

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

@@ -0,0 +1,88 @@
+import React, {useCallback, useState} from "react";
+
+import {Box} from "./Box";
+import {Button} from "./Button";
+import {IconButton} from "./IconButton";
+import {Modal} from "./Modal";
+
+export interface SelectedFile {
+  mimeType: string;
+  name: string;
+  uri: string;
+}
+
+export interface FilePickerButtonProps {
+  disabled?: boolean;
+  multiple?: boolean;
+  onFilesSelected: (files: SelectedFile[]) => void;
+  testID?: string;
+}
+
+export const FilePickerButton = ({
+  disabled = false,
+  multiple = false,
+  onFilesSelected,
+  testID,
+}: FilePickerButtonProps): React.ReactElement => {
+  const [showModal, setShowModal] = useState(false);
+
+  const handlePickImage = useCallback(async () => {
+    setShowModal(false);
+    const ImagePicker = await import("expo-image-picker");
+    const result = await ImagePicker.launchImageLibraryAsync({
+      allowsMultipleSelection: multiple,
+      mediaTypes: ["images"],
+      quality: 0.8,
+    });
+
+    if (!result.canceled && result.assets.length > 0) {
+      const files: SelectedFile[] = result.assets.map((asset) => ({
+        mimeType: asset.mimeType ?? "image/jpeg",
+        name: asset.fileName ?? `image-${Date.now()}.jpg`,
+        uri: asset.uri,
+      }));
+      onFilesSelected(files);
+    }
+  }, [multiple, onFilesSelected]);
+
+  const handlePickDocument = useCallback(async () => {
+    setShowModal(false);
+    const DocumentPicker = await import("expo-document-picker");
+    const result = await DocumentPicker.getDocumentAsync({
+      multiple,
+      type: ["application/pdf", "text/plain", "text/csv", "application/json"],
+    });
+
+    if (!result.canceled && result.assets.length > 0) {
+      const files: SelectedFile[] = result.assets.map((asset) => ({
+        mimeType: asset.mimeType ?? "application/octet-stream",
+        name: asset.name,
+        uri: asset.uri,
+      }));
+      onFilesSelected(files);
+    }
+  }, [multiple, onFilesSelected]);
+
+  return (
+    <>
+      <IconButton
+        accessibilityLabel="Attach file"
+        disabled={disabled}
+        iconName="paperclip"
+        onClick={() => setShowModal(true)}
+        testID={testID ?? "file-picker-button"}
+      />
+      <Modal onDismiss={() => setShowModal(false)} size="sm" title="Attach" visible={showModal}>
+        <Box gap={2} padding={3}>
+          <Button
+            iconName="image"
+            onClick={handlePickImage}
+            text="Photo Library"
+            variant="outline"
+          />
+          <Button iconName="file" onClick={handlePickDocument} text="Document" variant="outline" />
+        </Box>
+      </Modal>
+    </>
+  );
+};