forlogic-core 1.8.2 → 1.8.3

package/README.md

@@ -223,7 +223,7 @@ import { Button } from 'forlogic-core'
 // Formulários
 Button, Input, Textarea, Label, Select, SelectContent,
 SelectItem, SelectTrigger, SelectValue, Checkbox, RadioGroup,
-RadioGroupItem, Switch, CreatableCombobox
+RadioGroupItem, Switch, CreatableCombobox, EntitySelect, MultiSelect
 
 // Layout
 Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle
@@ -477,6 +477,183 @@ export function DepartmentSelect(props: DepartmentSelectProps) {
 
 ---
 
+#### MultiSelect - Seleção Múltipla Genérica
+
+**Quando usar?**
+
+Use o `MultiSelect` para permitir seleção múltipla de itens com busca inteligente e exibição em badges:
+
+- ✅ Seleção de múltiplos processos, colaboradores, treinamentos, etc
+- ✅ Busca com normalização (remove acentos, case-insensitive)
+- ✅ Badges interativos para remover seleções
+- ✅ Estados de loading e erro inclusos
+- ✅ Limite de badges exibidos com contador (+N)
+
+**Uso Básico:**
+
+```typescript
+import { MultiSelect } from 'forlogic-core';
+import { useTrainings } from './trainingService';
+
+function MyForm() {
+  const { data: trainings = [], isLoading, error } = useTrainings();
+  const [selectedIds, setSelectedIds] = useState<string[]>([]);
+
+  return (
+    <MultiSelect
+      value={selectedIds}
+      onChange={setSelectedIds}
+      options={trainings}
+      isLoading={isLoading}
+      error={error}
+      getOptionValue={(training) => training.id}
+      getOptionLabel={(training) => training.title}
+      placeholder="Selecione treinamentos..."
+      label="Treinamentos"
+      icon={GraduationCap}
+    />
+  );
+}
+```
+
+**Props do MultiSelect:**
+
+| Prop | Tipo | Obrigatório | Descrição |
+| ---- | ---- | ----------- | --------- |
+| `options` | `T[]` | ✅ | Array de itens disponíveis |
+| `value` | `string[]` | ❌ | Array de IDs selecionados |
+| `onChange` | `(value: string[]) => void` | ❌ | Callback quando seleção muda |
+| `getOptionValue` | `(option: T) => string` | ❌ | Extrai valor único (default: `opt.value`) |
+| `getOptionLabel` | `(option: T) => string` | ❌ | Extrai label exibido (default: `opt.label`) |
+| `placeholder` | `string` | ❌ | Placeholder quando nada selecionado |
+| `label` | `string` | ❌ | Label do campo |
+| `icon` | `LucideIcon` | ❌ | Ícone exibido no trigger |
+| `emptyMessage` | `string` | ❌ | Mensagem quando não há itens |
+| `searchPlaceholder` | `string` | ❌ | Placeholder da busca |
+| `disabled` | `boolean` | ❌ | Desabilita o componente |
+| `required` | `boolean` | ❌ | Adiciona asterisco vermelho ao label |
+| `isLoading` | `boolean` | ❌ | Exibe skeleton durante carregamento |
+| `error` | `string \| boolean` | ❌ | Mensagem de erro |
+| `className` | `string` | ❌ | Classes CSS adicionais |
+| `sortOptions` | `boolean` | ❌ | Ordena alfabeticamente (default: true) |
+| `maxDisplayedBadges` | `number` | ❌ | Limite de badges visíveis |
+| `onOpen` | `() => void` | ❌ | Callback ao abrir popover |
+| `onClose` | `() => void` | ❌ | Callback ao fechar popover |
+
+**Exemplo com Objetos Customizados:**
+
+```typescript
+interface User {
+  id: string;
+  name: string;
+  email: string;
+  department: string;
+}
+
+<MultiSelect<User>
+  options={users}
+  value={selectedUserIds}
+  onChange={setSelectedUserIds}
+  getOptionValue={(user) => user.id}
+  getOptionLabel={(user) => `${user.name} - ${user.department}`}
+  placeholder="Selecione colaboradores..."
+  label="Colaboradores"
+  icon={Users}
+  required
+/>
+```
+
+**Limite de Badges Exibidos:**
+
+```typescript
+<MultiSelect
+  options={items}
+  value={selected}
+  onChange={setSelected}
+  maxDisplayedBadges={3}  // Exibe: [Badge 1] [Badge 2] [Badge 3] [+5]
+  placeholder="Selecione itens..."
+/>
+```
+
+**Integração com React Hook Form:**
+
+```typescript
+import { useForm } from 'react-hook-form';
+import { MultiSelect } from 'forlogic-core';
+
+function MyForm() {
+  const { control } = useForm();
+  const { data: categories = [] } = useCategories();
+
+  return (
+    <FormField
+      control={control}
+      name="category_ids"
+      render={({ field }) => (
+        <FormItem>
+          <FormControl>
+            <MultiSelect
+              value={field.value}
+              onChange={field.onChange}
+              options={categories}
+              getOptionValue={(c) => c.id}
+              getOptionLabel={(c) => c.name}
+              placeholder="Selecione categorias..."
+              label="Categorias"
+            />
+          </FormControl>
+          <FormMessage />
+        </FormItem>
+      )}
+    />
+  );
+}
+```
+
+**Usando em Formulários CRUD:**
+
+Para usar o `MultiSelect` em formulários CRUD gerados automaticamente, crie um wrapper e use `type: 'custom'`:
+
+```typescript
+// 1. Criar wrapper do MultiSelect
+// src/components/TrainingMultiSelect.tsx
+import { MultiSelect } from 'forlogic-core';
+import { useTrainings } from '@/trainings/trainingService';
+import { GraduationCap } from 'lucide-react';
+
+export function TrainingMultiSelect({ value, onChange, disabled, error }: any) {
+  const { data: trainings = [], isLoading } = useTrainings();
+
+  return (
+    <MultiSelect
+      value={value || []}
+      onChange={onChange}
+      options={trainings}
+      isLoading={isLoading}
+      error={error}
+      getOptionValue={(t) => t.id}
+      getOptionLabel={(t) => t.title}
+      disabled={disabled}
+      placeholder="Selecione treinamentos..."
+      icon={GraduationCap}
+    />
+  );
+}
+
+// 2. Usar na configuração do formulário com type: 'custom'
+import { TrainingMultiSelect } from './components/TrainingMultiSelect';
+
+{
+  name: 'training_ids',
+  label: 'Treinamentos',
+  type: 'custom' as const,
+  component: TrainingMultiSelect,
+  required: true
+}
+```
+
+---
+
 ### 🎨 Campos Customizados no BaseForm
 
 O `BaseForm` suporta campos totalmente customizados através do tipo `'custom'`, permitindo usar **qualquer componente React** como campo de formulário.
@@ -3825,11 +4002,42 @@ const config = useMemo((): CrudPageConfig<Process> => ({
 
 Quando `enableBulkActions: true`, as seguintes ações ficam disponíveis automaticamente:
 
-- ✅ **Deletar em lote**: Deleta múltiplos itens selecionados (usa a mesma função do delete individual)
 - ✅ **Checkbox "Selecionar Todos"**: No header da tabela para selecionar/deselecionar todos os itens da página
 - ✅ **Indicador Visual**: Linhas/cards selecionados têm background destacado
 - ✅ **Barra de Ações**: Aparece no topo quando há itens selecionados
 
+**⚠️ IMPORTANTE - Botão "Remover" Padrão:**
+
+- ❌ **Se você definir `bulkActions` customizadas**, o botão "Remover" padrão **NÃO** será adicionado automaticamente
+- ✅ **Se você NÃO definir `bulkActions`**, um botão "Remover" padrão será adicionado automaticamente
+
+```typescript
+// ❌ Duplicação: Botão padrão + custom "Remover"
+bulkActions: [
+  {
+    label: 'Remover',  // ← Vai aparecer 2x (padrão + este)
+    icon: Trash2,
+    variant: 'destructive',
+    action: async (items) => { /* ... */ }
+  }
+]
+
+// ✅ Correto: Apenas o padrão
+enableBulkActions: true,
+// Não definir bulkActions → Usa botão "Remover" padrão
+
+// ✅ Correto: Apenas ações customizadas (sem padrão)
+bulkActions: [
+  {
+    label: 'Remover',
+    icon: Trash2,
+    variant: 'destructive',
+    action: async (items) => { /* ... */ }
+  }
+]
+```
+
+
 ### **Ações Customizadas**
 
 Você pode adicionar ações customizadas além do delete padrão:

package/dist/README.md

@@ -223,7 +223,7 @@ import { Button } from 'forlogic-core'
 // Formulários
 Button, Input, Textarea, Label, Select, SelectContent,
 SelectItem, SelectTrigger, SelectValue, Checkbox, RadioGroup,
-RadioGroupItem, Switch, CreatableCombobox
+RadioGroupItem, Switch, CreatableCombobox, EntitySelect, MultiSelect
 
 // Layout
 Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle
@@ -477,6 +477,183 @@ export function DepartmentSelect(props: DepartmentSelectProps) {
 
 ---
 
+#### MultiSelect - Seleção Múltipla Genérica
+
+**Quando usar?**
+
+Use o `MultiSelect` para permitir seleção múltipla de itens com busca inteligente e exibição em badges:
+
+- ✅ Seleção de múltiplos processos, colaboradores, treinamentos, etc
+- ✅ Busca com normalização (remove acentos, case-insensitive)
+- ✅ Badges interativos para remover seleções
+- ✅ Estados de loading e erro inclusos
+- ✅ Limite de badges exibidos com contador (+N)
+
+**Uso Básico:**
+
+```typescript
+import { MultiSelect } from 'forlogic-core';
+import { useTrainings } from './trainingService';
+
+function MyForm() {
+  const { data: trainings = [], isLoading, error } = useTrainings();
+  const [selectedIds, setSelectedIds] = useState<string[]>([]);
+
+  return (
+    <MultiSelect
+      value={selectedIds}
+      onChange={setSelectedIds}
+      options={trainings}
+      isLoading={isLoading}
+      error={error}
+      getOptionValue={(training) => training.id}
+      getOptionLabel={(training) => training.title}
+      placeholder="Selecione treinamentos..."
+      label="Treinamentos"
+      icon={GraduationCap}
+    />
+  );
+}
+```
+
+**Props do MultiSelect:**
+
+| Prop | Tipo | Obrigatório | Descrição |
+| ---- | ---- | ----------- | --------- |
+| `options` | `T[]` | ✅ | Array de itens disponíveis |
+| `value` | `string[]` | ❌ | Array de IDs selecionados |
+| `onChange` | `(value: string[]) => void` | ❌ | Callback quando seleção muda |
+| `getOptionValue` | `(option: T) => string` | ❌ | Extrai valor único (default: `opt.value`) |
+| `getOptionLabel` | `(option: T) => string` | ❌ | Extrai label exibido (default: `opt.label`) |
+| `placeholder` | `string` | ❌ | Placeholder quando nada selecionado |
+| `label` | `string` | ❌ | Label do campo |
+| `icon` | `LucideIcon` | ❌ | Ícone exibido no trigger |
+| `emptyMessage` | `string` | ❌ | Mensagem quando não há itens |
+| `searchPlaceholder` | `string` | ❌ | Placeholder da busca |
+| `disabled` | `boolean` | ❌ | Desabilita o componente |
+| `required` | `boolean` | ❌ | Adiciona asterisco vermelho ao label |
+| `isLoading` | `boolean` | ❌ | Exibe skeleton durante carregamento |
+| `error` | `string \| boolean` | ❌ | Mensagem de erro |
+| `className` | `string` | ❌ | Classes CSS adicionais |
+| `sortOptions` | `boolean` | ❌ | Ordena alfabeticamente (default: true) |
+| `maxDisplayedBadges` | `number` | ❌ | Limite de badges visíveis |
+| `onOpen` | `() => void` | ❌ | Callback ao abrir popover |
+| `onClose` | `() => void` | ❌ | Callback ao fechar popover |
+
+**Exemplo com Objetos Customizados:**
+
+```typescript
+interface User {
+  id: string;
+  name: string;
+  email: string;
+  department: string;
+}
+
+<MultiSelect<User>
+  options={users}
+  value={selectedUserIds}
+  onChange={setSelectedUserIds}
+  getOptionValue={(user) => user.id}
+  getOptionLabel={(user) => `${user.name} - ${user.department}`}
+  placeholder="Selecione colaboradores..."
+  label="Colaboradores"
+  icon={Users}
+  required
+/>
+```
+
+**Limite de Badges Exibidos:**
+
+```typescript
+<MultiSelect
+  options={items}
+  value={selected}
+  onChange={setSelected}
+  maxDisplayedBadges={3}  // Exibe: [Badge 1] [Badge 2] [Badge 3] [+5]
+  placeholder="Selecione itens..."
+/>
+```
+
+**Integração com React Hook Form:**
+
+```typescript
+import { useForm } from 'react-hook-form';
+import { MultiSelect } from 'forlogic-core';
+
+function MyForm() {
+  const { control } = useForm();
+  const { data: categories = [] } = useCategories();
+
+  return (
+    <FormField
+      control={control}
+      name="category_ids"
+      render={({ field }) => (
+        <FormItem>
+          <FormControl>
+            <MultiSelect
+              value={field.value}
+              onChange={field.onChange}
+              options={categories}
+              getOptionValue={(c) => c.id}
+              getOptionLabel={(c) => c.name}
+              placeholder="Selecione categorias..."
+              label="Categorias"
+            />
+          </FormControl>
+          <FormMessage />
+        </FormItem>
+      )}
+    />
+  );
+}
+```
+
+**Usando em Formulários CRUD:**
+
+Para usar o `MultiSelect` em formulários CRUD gerados automaticamente, crie um wrapper e use `type: 'custom'`:
+
+```typescript
+// 1. Criar wrapper do MultiSelect
+// src/components/TrainingMultiSelect.tsx
+import { MultiSelect } from 'forlogic-core';
+import { useTrainings } from '@/trainings/trainingService';
+import { GraduationCap } from 'lucide-react';
+
+export function TrainingMultiSelect({ value, onChange, disabled, error }: any) {
+  const { data: trainings = [], isLoading } = useTrainings();
+
+  return (
+    <MultiSelect
+      value={value || []}
+      onChange={onChange}
+      options={trainings}
+      isLoading={isLoading}
+      error={error}
+      getOptionValue={(t) => t.id}
+      getOptionLabel={(t) => t.title}
+      disabled={disabled}
+      placeholder="Selecione treinamentos..."
+      icon={GraduationCap}
+    />
+  );
+}
+
+// 2. Usar na configuração do formulário com type: 'custom'
+import { TrainingMultiSelect } from './components/TrainingMultiSelect';
+
+{
+  name: 'training_ids',
+  label: 'Treinamentos',
+  type: 'custom' as const,
+  component: TrainingMultiSelect,
+  required: true
+}
+```
+
+---
+
 ### 🎨 Campos Customizados no BaseForm
 
 O `BaseForm` suporta campos totalmente customizados através do tipo `'custom'`, permitindo usar **qualquer componente React** como campo de formulário.
@@ -3825,11 +4002,42 @@ const config = useMemo((): CrudPageConfig<Process> => ({
 
 Quando `enableBulkActions: true`, as seguintes ações ficam disponíveis automaticamente:
 
-- ✅ **Deletar em lote**: Deleta múltiplos itens selecionados (usa a mesma função do delete individual)
 - ✅ **Checkbox "Selecionar Todos"**: No header da tabela para selecionar/deselecionar todos os itens da página
 - ✅ **Indicador Visual**: Linhas/cards selecionados têm background destacado
 - ✅ **Barra de Ações**: Aparece no topo quando há itens selecionados
 
+**⚠️ IMPORTANTE - Botão "Remover" Padrão:**
+
+- ❌ **Se você definir `bulkActions` customizadas**, o botão "Remover" padrão **NÃO** será adicionado automaticamente
+- ✅ **Se você NÃO definir `bulkActions`**, um botão "Remover" padrão será adicionado automaticamente
+
+```typescript
+// ❌ Duplicação: Botão padrão + custom "Remover"
+bulkActions: [
+  {
+    label: 'Remover',  // ← Vai aparecer 2x (padrão + este)
+    icon: Trash2,
+    variant: 'destructive',
+    action: async (items) => { /* ... */ }
+  }
+]
+
+// ✅ Correto: Apenas o padrão
+enableBulkActions: true,
+// Não definir bulkActions → Usa botão "Remover" padrão
+
+// ✅ Correto: Apenas ações customizadas (sem padrão)
+bulkActions: [
+  {
+    label: 'Remover',
+    icon: Trash2,
+    variant: 'destructive',
+    action: async (items) => { /* ... */ }
+  }
+]
+```
+
+
 ### **Ações Customizadas**
 
 Você pode adicionar ações customizadas além do delete padrão: