Core Services

The @codella-software/utils package provides framework-agnostic services for building complex UIs. These services are built on RxJS Observables for reactive state management.

Installation

npm install @codella-software/utils

Services Overview

FormBuilder

Type-safe form creation with validation, dependencies, and multi-step support.

import { FormBuilder } from '@codella-software/utils';

const form = new FormBuilder<{ email: string }>()
  .addField({ name: 'email', type: 'email', label: 'Email' })
  .build();

TableBuilder

Dynamic table generation with sorting, filtering, and pagination.

import { TableBuilder } from '@codella-software/utils';

const table = new TableBuilder<{ name: string }>()
  .columns([{ id: 'name', accessorKey: 'name', header: 'Name' }])
  .data([{ name: 'John' }])
  .build();

FiltersAndSortService

State management for filtering and sorting data.

import { FiltersAndSortService } from '@codella-software/utils';

interface Filters {
  status: string;
}

const service = new FiltersAndSortService<Filters>({
  storageKey: 'my-filters',
  defaultFilters: { status: '' }
});

service.setFilters({ status: 'active' });

RichContentService

Framework-agnostic rich text editor with undo/redo, markdown-like formatting, and extensible middleware.

import { RichContentService } from '@codella-software/utils';

const service = new RichContentService({
  maxHistorySteps: 50,
  imageUploadHandler: async (file) => {
    // Handle upload...
    return { url: 'https://...' };
  },
});

// Subscribe to content changes
service.getContent$().subscribe((doc) => {
  console.log('Document:', doc);
});

// Execute commands
service.execute('insertText', { text: 'Hello' });
service.execute('toggleMark', { mark: 'bold' });
service.execute('undo');

RxJS Integration

All services expose reactive state through RxJS Observables:

form.stateChanged$.subscribe((state) => {
  console.log('Form state:', state);
});

table.sortChanged$.subscribe((sort) => {
  console.log('Sort changed:', sort);
});

Type Safety

Services are fully typed with TypeScript generics:

interface UserForm {
  email: string;
  name: string;
}

const form = new FormBuilder<UserForm>()
  .addField({ name: 'email' })
  .build();

See Form Builder, Rich Content Editor, Table Builder, and Filters & Sort for detailed guides.