Skip to main content

Codella v2.0

Modern, framework-agnostic UI builders for React applications.

Codella provides type-safe builders and services for creating complex forms, tables, and filtering systems. The core is framework-agnostic with zero dependencies, while React bindings provide seamless integration.

Development Status

Codella v2.0 is production-ready. Core services (@codella-software/utils), CLI scaffolding (@codella-software/cli), and React hooks (@codella-software/react) are all production-ready.

✨ Key Features​

🔧 Framework-Agnostic Core​

Core services (@codella-software/utils) have zero UI framework dependencies. Built on RxJS Observables for reactive state management.

📦 Three Powerful Builders​

  • FormBuilder - Type-safe forms with validation, dependencies, and multi-step support
  • TableBuilder - Dynamic tables with sorting, filtering, and pagination
  • FiltersAndSortService - Advanced filtering and sorting state management

🎨 TypeScript First​

Full TypeScript support with complete type inference and autocomplete.

⚡ Zero Runtime Dependencies​

Core services are pure TypeScript with minimal dependencies (RxJS, Yup for validation).

🎯 React Integration​

React hooks wrapper package (@codella-software/react) for seamless integration.

📦 Packages​

  • @codella-software/utils - Framework-agnostic builders and services
  • @codella-software/react - React hooks integration
  • @codella-software/cli - CLI for scaffolding components

🚀 Quick Start​

1. Install Core Package​

npm install @codella-software/utils

2. Build a Form​

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

const formConfig = new FormBuilder<{ name: string; email: string }>()
  .addField({
    name: 'name',
    type: 'text',
    label: 'Name',
    validation: { required: true },
  })
  .addField({
    name: 'email',
    type: 'email',
    label: 'Email',
    validation: { required: true, email: true },
  })
  .build();

3. Build a Table​

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

const tableConfig = new TableBuilder<User>()
  .addColumn({
    id: 'name',
    header: 'Name',
    accessorKey: 'name',
    sortable: true,
  })
  .addColumn({
    id: 'email',
    header: 'Email',
    accessorKey: 'email',
  })
  .build();

4. Add Filtering​

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

interface Filters {
  status?: string;
  role?: string;
}

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

// Subscribe to state changes
filterService.getState().subscribe((state) => {
  console.log('Filters:', state.filters);
  console.log('Sort:', state.sort);
  console.log('Pagination:', state.pagination);
});

// Update filters
filterService.setFilters({ status: 'active', role: 'Admin' });
filterService.setSort('name');

Next: Get started with detailed examples →