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

FormViewSchema

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;

​View Types

​Overview

​Core Types

​ViewSchema

​ViewType

​FieldDefinition

​View-Specific Types

​FormViewSchema

​TableViewSchema

​DetailViewSchema

​Layout Types

​LayoutConfiguration

​Section

​Utility Types

​ViewRenderOptions

​ValidationRules

​Type Guards

​Type Utilities