Documentation Index
Fetch the complete documentation index at: https://docs.zopio.dev/llms.txt
Use this file to discover all available pages before exploring further.
View Types
The Types module provides TypeScript type definitions for view components, ensuring type safety and consistency across the view system.
Overview
The Types module is responsible for:
- Defining TypeScript interfaces for view schemas
- Providing type definitions for different view types
- Ensuring type safety for view operations
- Supporting TypeScript’s static type checking
Core Types
ViewSchema
The core ViewSchema interface defines the structure of all view schemas:
interface ViewSchema {
/** Unique identifier for the view */
id: string;
/** Type of view (form, table, detail, etc.) */
type: ViewType;
/** Schema name for CRUD operations */
schema: string;
/** Fields to display in the view */
fields?: Record<string, FieldDefinition>;
/** Layout configuration */
layout?: LayoutConfiguration;
/** Internationalization namespace */
i18nNamespace?: string;
/** Additional configuration options */
options?: Record<string, unknown>;
}
ViewType
The ViewType type defines the supported view types:
type ViewType = 'form' | 'table' | 'detail' | 'audit' | 'import' | 'export' | 'dashboard' | 'wizard';
FieldDefinition
The FieldDefinition interface defines the structure of field definitions:
interface FieldDefinition {
/** Display label for the field */
label?: string;
/** Field type (string, number, boolean, etc.) */
type?: string;
/** Whether the field is required */
required?: boolean;
/** Options for select fields */
options?: string[];
/** Whether the field is hidden */
hidden?: boolean | ((data: Record<string, unknown>) => boolean);
/** Whether the field is read-only */
readOnly?: boolean | ((data: Record<string, unknown>) => boolean);
/** Description text for the field */
description?: string;
/** Placeholder text for input fields */
placeholder?: string;
/** Validation rules for the field */
validation?: ValidationRules;
}
View-Specific Types
The FormViewSchema interface defines the structure of form views:
interface FormViewSchema extends ViewSchema {
type: 'form';
submitLabel?: string;
resetLabel?: string;
showReset?: boolean;
redirectUrl?: string;
onSubmitHook?: string;
}
TableViewSchema
The TableViewSchema interface defines the structure of table views:
interface TableViewSchema extends ViewSchema {
type: 'table';
columns?: Array<{
key: string;
title: string;
width?: number | string;
sortable?: boolean;
filterable?: boolean;
hidden?: boolean;
render?: string;
}>;
pagination?: {
defaultPageSize?: number;
pageSizeOptions?: number[];
};
defaultSort?: {
column: string;
direction: 'asc' | 'desc';
};
rowActions?: string[];
bulkActions?: string[];
selectable?: boolean;
}
DetailViewSchema
The DetailViewSchema interface defines the structure of detail views:
interface DetailViewSchema extends ViewSchema {
type: 'detail';
actions?: string[];
}
Layout Types
LayoutConfiguration
The LayoutConfiguration interface defines the structure of layout configurations:
interface LayoutConfiguration {
tabs?: Array<{
title: string;
sections: Section[];
}>;
sections?: Section[];
}
Section
The Section interface defines the structure of layout sections:
interface Section {
title?: string;
description?: string;
fields: string[];
columns?: 1 | 2 | 3 | 4;
}
Utility Types
ViewRenderOptions
The ViewRenderOptions interface defines options for rendering views:
interface ViewRenderOptions {
onSubmit?: (data: Record<string, unknown>) => void | Promise<void>;
onCancel?: () => void;
initialData?: Record<string, unknown>;
loading?: boolean;
error?: Error | null;
locale?: string;
}
ValidationRules
The ValidationRules interface defines validation rules for fields:
interface ValidationRules {
min?: number;
max?: number;
minLength?: number;
maxLength?: number;
pattern?: string;
message?: string;
}
Type Guards
The Types module provides type guards for checking view types:
import { isFormView, isTableView, isDetailView } from '@repo/view/types';
if (isFormView(schema)) {
// schema is a FormViewSchema
console.log(schema.submitLabel);
}
if (isTableView(schema)) {
// schema is a TableViewSchema
console.log(schema.columns);
}
if (isDetailView(schema)) {
// schema is a DetailViewSchema
console.log(schema.actions);
}
Type Utilities
The Types module provides utility types for working with view schemas:
import {
FieldsOf,
ViewSchemaWithoutFields,
DeepPartial
} from '@repo/view/types';
// Get the fields of a view schema
type UserFields = FieldsOf<UserFormSchema>;
// Create a partial view schema
type PartialSchema = DeepPartial<ViewSchema>;
// Create a view schema without fields
type SchemaWithoutFields = ViewSchemaWithoutFields;
