Types Documentation

File Information

• Path: app/types/
• Purpose: Centralized TypeScript type definitions

Overview

This section documents TypeScript type definitions in the Collage Brand Portal. All TypeScript interfaces are centralized in app/types/ and should be imported from ~/types.

Type Structure

types/
├── index.ts         # Main export file (import all types from here)
├── api.ts           # API-related interfaces
├── api.d.ts         # API global declarations
├── auth.d.ts        # Auth module declarations
├── analytics.ts      # Analytics payload interfaces
├── cards.ts         # Card component interfaces
├── common.ts        # Common/shared interfaces
├── components.ts    # Component props/emits interfaces
├── composables.ts   # Composable return type interfaces
├── fetch.ts         # Fetch client interfaces
├── layouts.ts       # Layout composable interfaces
├── pages.ts         # Page composable interfaces
├── search.ts        # Search-related interfaces
├── selection.ts     # Toggle selection interfaces
├── snackbar.ts      # Snackbar component types
└── stores.ts        # Store-related interfaces

Type Documentation

Core Types

1. Common Types - Shared interfaces used across the application
2. Store Types - Pinia store state interfaces
3. API Types - API request/response interfaces

Component Types

4. Component Types - Component props and emits interfaces
5. Card Types - Card component interfaces (FolderCard, CollageCard, AssetContainer)

Composable Types

6. Composable Types - Composable return type interfaces
7. Page Types - Page composable interfaces
8. Layout Types - Layout composable interfaces

Feature Types

9. Search Types - Search-related interfaces
10. Selection Types - Toggle selection interfaces
11. Analytics Types - Analytics tracking interfaces
12. Snackbar Types - Snackbar notification types
13. Fetch Types - Fetch client interfaces

Declaration Files

14. Type Declarations - Global type augmentations (api.d.ts, auth.d.ts)

Type Organization

Main Export (index.ts)

Always import types from here:

import type { User, Asset, Folder } from '~/types'

Re-exports all types from individual files for convenience.

File Path: app/types/index.ts

Documentation: See individual type files above

Common Types (common.ts)

Shared interfaces used across the application:

• Asset - Asset data structure
• Folder - Folder data structure
• FileItem - File item structure
• FilterItem - Filter item structure
• SortField, SortDirection - Sorting types
• ViewMode - View mode type
• And more...

File Path: app/types/common.ts

Documentation: Common Types

Store Types (stores.ts)

Store-related interfaces:

• User - User data structure
• Banner - Banner data structure
• Tile - Tile data structure
• File - File data structure
• DashboardData - Dashboard metrics
• CacheOptions - Cache configuration
• AppDataState - App data store state
• DownloadItem - Download item structure
• DownloaderState - Download store state

File Path: app/types/stores.ts

Documentation: Store Types

API Types (api.ts)

API request/response interfaces:

• ApiResponse<T> - Generic API response
• LoginResponse - Login response
• AccountStatusResponse - Account status response
• Announcement - Announcement structure
• And more...

File Path: app/types/api.ts

Documentation: API Types

Component Types (components.ts)

Component props and emits interfaces:

• AssetCardProps - AssetCard component props
• ShareAssetDialogProps - Share dialog props
• BreadCrumbsProps - Breadcrumbs props
• ViewToggleProps - View toggle props
• And more...

File Path: app/types/components.ts

Documentation: Component Types

Composable Types (composables.ts)

Composable return type interfaces:

• UseFolderDetailsReturn - useFolderDetails return type
• LoginCredentials - Login credentials
• Workspace - Workspace data
• UserAgentAndLocation - User agent and location
• UseCachedViewModeReturn - View mode cache return type
• And more...

File Path: app/types/composables.ts

Documentation: Composable Types

Page Types (pages.ts)

Page composable interfaces:

• ShareItem - Share link item
• FoldersPageFolder - Folder data for folders page
• UseFoldersReturn - useFolders return type
• Collage - Collage data structure
• SearchDigitalAsset - Search result asset
• ExternalSharedAsset - External shared asset
• Form data types (ResetPassword, ForgotPassword, GeneratePassword)
• And more...

File Path: app/types/pages.ts

Documentation: Page Types

Search Types (search.ts)

Search-related interfaces:

• SearchFilterObject - Search filter structure
• SearchTag - Search tag structure
• SearchAssetsDigitalAsset - Search result asset
• SearchFilterProps - Search filter component props
• SearchTableHeaderColumn - Table header column
• And more...

File Path: app/types/search.ts

Documentation: Search Types

Card Types (cards.ts)

Card component interfaces:

• FolderCardFolder - Folder card data
• FolderCardProps - Folder card props
• CollageCardCollage - Collage card data
• CollageCardProps - Collage card props
• AssetContainerProps - Asset container props
• And more...

File Path: app/types/cards.ts

Documentation: Card Types

Layout Types (layouts.ts)

Layout composable interfaces:

• MenuRoute - Menu route structure
• CachedViewMode - View mode type
• UseCachedViewModeOptions - View mode cache options

File Path: app/types/layouts.ts

Documentation: Layout Types

Selection Types (selection.ts)

Toggle selection interfaces:

• SelectableItem - Base selectable item
• SelectableFileItem - Selectable file
• SelectableFolderItem - Selectable folder
• FileSelectionContext - File selection context
• FolderSelectionContext - Folder selection context
• RegularPageType - Page type identifier
• And more...

File Path: app/types/selection.ts

Documentation: Selection Types

Analytics Types (analytics.ts)

Analytics interfaces:

• AnalyticsPayload - Analytics event payload
• AnalyticsState - Analytics store state
• BrowserOsResponse - Browser/OS response
• TransactionResponse - Transaction response

File Path: app/types/analytics.ts

Documentation: Analytics Types

Fetch Types (fetch.ts)

Fetch client interfaces:

• FetchConfig - Fetch configuration
• FetchResponse<T> - Fetch response wrapper
• FetchRequestInterceptor - Request interceptor
• FetchResponseInterceptor - Response interceptor
• FetchNuxtContext - Nuxt context structure

File Path: app/types/fetch.ts

Documentation: Fetch Types

Snackbar Types (snackbar.ts)

Snackbar component types and constants:

• SnackbarColor - Color type ('success' | 'error' | 'warning' | 'info')
• SnackbarOptions - Snackbar options
• SnackbarMethods - Snackbar methods interface
• SNACKBAR_COLORS - Color constants

File Path: app/types/snackbar.ts

Documentation: Snackbar Types

Type Declarations (api.d.ts, auth.d.ts)

Global type augmentations:

• Global $api declaration
• Nuxt config auth module types
• Nuxt app instance types
• Vue component properties types

File Path: app/types/api.d.ts, app/types/auth.d.ts

Documentation: Type Declarations

Type Usage Patterns

Importing Types

// ✅ Correct - Import from centralized types
import type { User, Asset, Folder } from '~/types'

// ❌ Wrong - Don't define interfaces locally
export interface User { ... }

Component Props

<script setup lang="ts">
import type { AssetCardProps } from '~/types'

const props = defineProps<AssetCardProps>()
</script>

Composable Return Types

import type { UseFolderDetailsReturn } from '~/types'

export function useFolderDetails(): UseFolderDetailsReturn {
  // Implementation
}

Best Practices

1. Centralized Types: Always define types in app/types/
2. Import from Index: Import from ~/types (index.ts)
3. No Local Types: Don't define interfaces in component/composable files
4. Type Safety: Use TypeScript types everywhere
5. Descriptive Names: Use clear, descriptive type names
6. Documentation: Add JSDoc comments for complex types
7. Consistency: Follow existing type patterns
8. Reusability: Create reusable generic types
9. Organization: Keep related types together
10. Exports: Export all types through index.ts

Type Configuration

The types/** directory is excluded from Nuxt's auto-imports configuration to prevent duplicate import warnings. Types should always be explicitly imported from ~/types rather than being auto-imported.