# @codella-software/react

React hooks for Codella core services - FormBuilder, TableBuilder, FiltersAndSort, TabsService, APIService, and LiveUpdatesService.

## Features

- **useFormBuilder** - Manage form state, validation, and submission
- **useTableService** - Manage dynamic table data, filtering, and sorting
- **useFiltersAndSort** - Handle complex filtering and sorting logic
- **useTabsService** - Manage tab state and navigation (use CLI templates for responsive components)
- **useAPIService** - RESTful API client with authentication, interceptors, and middleware hooks
- **useLiveUpdates** - Real-time data updates via WebSocket or Server-Sent Events

## Installation

```bash
npm install @codella-software/utils @codella-software/react
```

## Quick Start

### useFormBuilder

```typescript
import { useFormBuilder } from '@codella-software/react';

function MyForm() {
  const { values, errors, submit } = useFormBuilder({
    fields: [
      { name: 'email', type: 'text', validators: ['required', 'email'] },
      { name: 'password', type: 'password', validators: ['required'] }
    ],
    onSubmit: (data) => console.log(data)
  });

  return (
    <form onSubmit={submit}>
      {/* Form fields */}
    </form>
  );
}
```

### useTableService

```typescript
import { useTableService } from '@codella-software/react';

function MyTable() {
  const { 
    data, 
    filteredData, 
    sort, 
    filter 
  } = useTableService({
    data: users,
    columns: userColumns
  });

  return (
    <table>
      {/* Table content */}
    </table>
  );
}
```

### useAPIService

```typescript
import { useAPIService } from '@codella-software/react';
import { useEffect, useState } from 'react';

function UsersList() {
  const [users, setUsers] = useState([]);
  const [loading, setLoading] = useState(false);

  const api = useAPIService({
    baseURL: 'https://api.example.com',
    hooks: {
      onBeforeRequest: () => setLoading(true),
      onAfterResponse: () => setLoading(false),
      onError: (ctx) => console.error('Error:', ctx.error)
    }
  });

  // Add request interceptor to include custom headers
  useEffect(() => {
    api.interceptors.request.use((config) => ({
      ...config,
      headers: { ...config.headers, 'X-App-Version': '2.0' }
    }));

    // Add response interceptor to transform data
    api.interceptors.response.use((response) => ({
      ...response,
      data: Array.isArray(response.data) ? response.data : [response.data]
    }));
  }, [api]);

  useEffect(() => {
    api.get('/users').then(setUsers);
  }, [api]);

  return (
    <div>
      {loading && <p>Loading...</p>}
      <ul>
        {users.map(user => <li key={user.id}>{user.name}</li>)}
      </ul>
    </div>
  );
}
```

See [API Service Documentation](https://CodellaSoftware.github.io/codella-utils/api-service/) for interceptors, middleware hooks, and authentication patterns.

## Documentation

For full API documentation, visit [https://CodellaSoftware.github.io/codella-utils/](https://CodellaSoftware.github.io/codella-utils/)

## License

MIT