forlogic-core 2.2.6 → 2.2.7

package/docs/design-system/domain.md

@@ -11,29 +11,29 @@ Componente de página completa para gerenciar planos de ação. Inclui formulár
 
 **Uso:**
 ```tsx
-import { ActionPlanPage, ETaskPlanStatus } from "forlogic-core"
-
-<ActionPlanPage
-  actionPlan={actionPlan}
-  config={{
-    enablePredecessors: true,
-    enableCosts: true,
-    enableAttachments: true,
-    enableComments: true,
-    enableHistory: true,
-  }}
-  users={users}
-  places={places}
-  progress={progress}
-  comments={comments}
-  history={history}
-  attachments={attachments}
-  onSave={handleSave}
-  onCancel={() => navigate(-1)}
-  onChangeStatus={handleChangeStatus}
-  onReportProgress={handleReportProgress}
-  onAddComment={handleAddComment}
-  onUploadAttachment={handleUploadAttachment}
+import { ActionPlanPage, ETaskPlanStatus } from "forlogic-core"
+
+<ActionPlanPage
+  actionPlan={actionPlan}
+  config={{
+    enablePredecessors: true,
+    enableCosts: true,
+    enableAttachments: true,
+    enableComments: true,
+    enableHistory: true,
+  }}
+  users={users}
+  places={places}
+  progress={progress}
+  comments={comments}
+  history={history}
+  attachments={attachments}
+  onSave={handleSave}
+  onCancel={() => navigate(-1)}
+  onChangeStatus={handleChangeStatus}
+  onReportProgress={handleReportProgress}
+  onAddComment={handleAddComment}
+  onUploadAttachment={handleUploadAttachment}
 />
 ```
 
@@ -47,47 +47,47 @@ import { ActionPlanPage, ETaskPlanStatus } from "forlogic-core"
 
 **Exemplos:**
 ```tsx
-<ActionPlanPage
-  actionPlan={actionPlan}
-  config={{
-    enablePredecessors: true,
-    enableCosts: true,
-    enableAttachments: true,
-    enableComments: true,
-    enableHistory: true,
-    hasComments: true,
-  }}
-  users={users}
-  places={places}
-  actionTypes={actionTypes}
-  causes={causes}
-  progress={progress}
-  predecessors={predecessors}
-  costs={costs}
-  comments={comments}
-  history={history}
-  attachments={attachments}
-  onSave={handleSave}
-  onChangeStatus={handleChangeStatus}
-  onReportProgress={handleReportProgress}
-  onAddComment={handleAddComment}
-  onEditComment={handleEditComment}
-  onDeleteComment={handleDeleteComment}
-  onUploadAttachment={handleUploadAttachment}
-  onDeleteAttachment={handleDeleteAttachment}
-  onRenameAttachment={handleRenameAttachment}
-  onDownloadAttachment={handleDownloadAttachment}
-  onViewAttachment={handleViewAttachment}
+<ActionPlanPage
+  actionPlan={actionPlan}
+  config={{
+    enablePredecessors: true,
+    enableCosts: true,
+    enableAttachments: true,
+    enableComments: true,
+    enableHistory: true,
+    hasComments: true,
+  }}
+  users={users}
+  places={places}
+  actionTypes={actionTypes}
+  causes={causes}
+  progress={progress}
+  predecessors={predecessors}
+  costs={costs}
+  comments={comments}
+  history={history}
+  attachments={attachments}
+  onSave={handleSave}
+  onChangeStatus={handleChangeStatus}
+  onReportProgress={handleReportProgress}
+  onAddComment={handleAddComment}
+  onEditComment={handleEditComment}
+  onDeleteComment={handleDeleteComment}
+  onUploadAttachment={handleUploadAttachment}
+  onDeleteAttachment={handleDeleteAttachment}
+  onRenameAttachment={handleRenameAttachment}
+  onDownloadAttachment={handleDownloadAttachment}
+  onViewAttachment={handleViewAttachment}
 />
 ```
 ```tsx
-<ActionPlanPage
-  isNew
-  config={{}}
-  users={users}
-  places={places}
-  onSave={handleSave}
-  onCancel={() => navigate(-1)}
+<ActionPlanPage
+  isNew
+  config={{}}
+  users={users}
+  places={places}
+  onSave={handleSave}
+  onCancel={() => navigate(-1)}
 />
 ```
 ```tsx
@@ -103,7 +103,7 @@ import { ActionPlanStatusBadge, ETaskPlanStatus } from
 - Anexos suportam upload múltiplo, barra de progresso, renomear inline, context menu (visualizar, download, excluir) e detecção de duplicatas.
 - Slots (attachmentsSlot, commentsSlot, historySlot) permitem substituir os componentes padrão por implementações customizadas do projeto consumidor.
 
-> Fonte: `src/design-system/docs/components/ActionPlanDoc.tsx`
+> Fonte: `src\design-system\docs\components\ActionPlanDoc.tsx`
 
 ---
 
@@ -143,7 +143,7 @@ import { AuditTrailPage } from 'forlogic-core';
 - Componente de página completa — inclui toolbar, filtros e tabela
 - Requer implementação dos callbacks de busca no backend
 
-> Fonte: `src/design-system/docs/components/AuditTrailDoc.tsx`
+> Fonte: `src\design-system\docs\components\AuditTrailDoc.tsx`
 
 ---
 
@@ -153,27 +153,27 @@ Componente container que renderiza campos de formulário dinâmicos baseados em
 
 **Uso:**
 ```tsx
-import { CustomFormFields, ECustomFormFieldType, validateFields } from "forlogic-core"
-import type { FieldAssociation } from "forlogic-core"
-
-const fields: FieldAssociation[] = [
-  {
-    id: 'f1',
-    type: ECustomFormFieldType.text,
-    name: 'Nome',
-    required: true,
-    config: { multiline: false },
-    isActive: true,
-  },
-  // ...mais campos
-];
-
-const [formFields, setFormFields] = useState(fields);
-
-<CustomFormFields
-  fields={formFields}
-  onChange={setFormFields}
-  onFieldChange={(field) => console.log('Changed:', field)}
+import { CustomFormFields, ECustomFormFieldType, validateFields } from "forlogic-core"
+import type { FieldAssociation } from "forlogic-core"
+
+const fields: FieldAssociation[] = [
+  {
+    id: 'f1',
+    type: ECustomFormFieldType.text,
+    name: 'Nome',
+    required: true,
+    config: { multiline: false },
+    isActive: true,
+  },
+  // ...mais campos
+];
+
+const [formFields, setFormFields] = useState(fields);
+
+<CustomFormFields
+  fields={formFields}
+  onChange={setFormFields}
+  onFieldChange={(field) => console.log('Changed:', field)}
 />
 ```
 
@@ -185,32 +185,32 @@ const [formFields, setFormFields] = useState(fields);
 - Use setFormFieldValues() para aplicar valores salvos a uma lista de campos.
 - Campos de seleção suportam dataSource custom (dados estáticos) e users (lista de usuários do sistema).
 
-> Fonte: `src/design-system/docs/components/CustomFormFieldsDoc.tsx`
+> Fonte: `src\design-system\docs\components\CustomFormFieldsDoc.tsx`
 
 ---
 
 ### Select
 
-Exibe uma lista de opções para o usuário escolher—acionada por um botão.
+Exibe uma lista de opções para o usuário escolher—acionada por um botão. O item selecionado é destacado por background (accent), fonte medium e borda esquerda na cor primary. A prop `showCheck` (opcional) adiciona um ícone de check à esquerda do item selecionado.
 
 **Uso:**
 ```tsx
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "forlogic-core"
-
-<Select>
-  <SelectTrigger className="w-[180px]">
-    <SelectValue placeholder="Theme" />
-  </SelectTrigger>
-  <SelectContent>
-    <SelectItem value="light">Light</SelectItem>
-    <SelectItem value="dark">Dark</SelectItem>
-  </SelectContent>
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "forlogic-core"
+
+<Select>
+  <SelectTrigger className="w-[180px]">
+    <SelectValue placeholder="Theme" />
+  </SelectTrigger>
+  <SelectContent>
+    <SelectItem value="light">Light</SelectItem>
+    <SelectItem value="dark">Dark</SelectItem>
+  </SelectContent>
 </Select>
 ```
 
@@ -221,6 +221,7 @@ import {
 | `value` | `string` | - | O valor selecionado controlado. |
 | `onValueChange` | `(value: string) => void` | - | Manipulador de evento quando o valor muda. |
 | `disabled` | `boolean` | false | Se o select está desabilitado. |
+| `showCheck` | `boolean` | false | Exibe o ícone de check à esquerda do item selecionado. Quando false, o item selecionado é destacado apenas pelo background, fonte medium e borda esquerda primary. |
 | `container (SelectContent)` | `HTMLElement` | - | Container HTML para portal (útil dentro de Dialog). |
 | `collisionBoundary (SelectContent)` | `HTMLElement` | - | Elemento para detecção de colisão de posicionamento. |
 
@@ -236,13 +237,17 @@ import {
 -  quando o Select estiver dentro de um Dialog para evitar problemas de scroll
 - 💡 Para seleção com busca, considere usar 
 -  ao invés de 
-- ,
+- ,
         
 - rounded-lg
 - hover:border-primary
 - transition-colors
+- ,
+        
+- Combobox
+- showCheck
 
-> Fonte: `src/design-system/docs/components/SelectDoc.tsx`
+> Fonte: `src\design-system\docs\components\SelectDoc.tsx`
 
 ---
 
@@ -252,40 +257,40 @@ Módulo hierárquico de liderança para gerenciar relações de liderança entre
 
 **Uso:**
 ```tsx
-// Página completa de liderança
-import { LeadershipPage } from 'forlogic-core';
-
-function MyLeadershipPage() {
-  return <LeadershipPage />;
-}
-
-// Ou use componentes individuais
-import { 
-  LeadershipDialog, 
-  useLeadershipApi 
-} from 'forlogic-core';
-
-function CustomLeadershipView() {
-  const { data: leaders, isLoading } = useLeadershipApi();
-  const [dialogOpen, setDialogOpen] = useState(false);
-
-  if (isLoading) return <div>Carregando...</div>;
-
-  return (
-    <div>
-      <Button onClick={() => setDialogOpen(true)}>
-        Adicionar Líder
-      </Button>
-      
-      <LeadershipDialog
-        open={dialogOpen}
-        onOpenChange={setDialogOpen}
-        title="Novo Líder"
-      />
-      
-      {/* Renderizar hierarquia */}
-    </div>
-  );
+// Página completa de liderança
+import { LeadershipPage } from 'forlogic-core';
+
+function MyLeadershipPage() {
+  return <LeadershipPage />;
+}
+
+// Ou use componentes individuais
+import { 
+  LeadershipDialog, 
+  useLeadershipApi 
+} from 'forlogic-core';
+
+function CustomLeadershipView() {
+  const { data: leaders, isLoading } = useLeadershipApi();
+  const [dialogOpen, setDialogOpen] = useState(false);
+
+  if (isLoading) return <div>Carregando...</div>;
+
+  return (
+    <div>
+      <Button onClick={() => setDialogOpen(true)}>
+        Adicionar Líder
+      </Button>
+      
+      <LeadershipDialog
+        open={dialogOpen}
+        onOpenChange={setDialogOpen}
+        title="Novo Líder"
+      />
+      
+      {/* Renderizar hierarquia */}
+    </div>
+  );
 }
 ```
 
@@ -322,7 +327,7 @@ function CustomLeadershipView() {
 - O estado de expansão é persistido no localStorage por alias.
 - Soft delete é usado para remoção (is_removed = true).
 
-> Fonte: `src/design-system/docs/components/LeadershipDoc.tsx`
+> Fonte: `src\design-system\docs\components\LeadershipDoc.tsx`
 
 ---
 
@@ -332,30 +337,30 @@ Módulo completo para upload, edição e renderização de imagens e vídeos. In
 
 **Uso:**
 ```tsx
-// Exemplo básico de upload de imagem
-const { upload, uploading, progress } = useMediaUpload({
-  uploadFunction: async (file, options) => {
-    // Implementação do upload para seu storage
-    const url = await uploadToStorage(file, options);
-    return { url, path: file.name };
-  }
-});
-
-// Renderizar uma imagem
-<ImageRenderer
-  content={{
-    imageUrl: 'https://example.com/image.jpg',
-    caption: 'Legenda da imagem',
-    alignment: 'center'
-  }}
-/>
-
-// Renderizar um vídeo
-<VideoRenderer
-  content={{
-    videoUrl: 'https://youtube.com/watch?v=...',
-    controls: true
-  }}
+// Exemplo básico de upload de imagem
+const { upload, uploading, progress } = useMediaUpload({
+  uploadFunction: async (file, options) => {
+    // Implementação do upload para seu storage
+    const url = await uploadToStorage(file, options);
+    return { url, path: file.name };
+  }
+});
+
+// Renderizar uma imagem
+<ImageRenderer
+  content={{
+    imageUrl: 'https://example.com/image.jpg',
+    caption: 'Legenda da imagem',
+    alignment: 'center'
+  }}
+/>
+
+// Renderizar um vídeo
+<VideoRenderer
+  content={{
+    videoUrl: 'https://youtube.com/watch?v=...',
+    controls: true
+  }}
 />
 ```
 
@@ -398,7 +403,7 @@ import { useMediaUpload, getSupabaseClient } from
 - O módulo não inclui implementação de storage - use Supabase, S3, etc.
 - Helpers de imagem usam Canvas API para compressão e resize
 
-> Fonte: `src/design-system/docs/components/MediaDoc.tsx`
+> Fonte: `src\design-system\docs\components\MediaDoc.tsx`
 
 ---
 
@@ -408,81 +413,81 @@ Módulo para gerenciar estruturas hierárquicas de locais integrado com a API Qu
 
 **Uso:**
 ```tsx
-// =====================
-// BUSCAR LOCAIS
-// =====================
-import { placeService } from 'forlogic-core';
-
-async function loadPlaces() {
-  const places = await placeService.getPlaces(alias, companyId);
-  // places já vem em estrutura hierárquica
-  console.log(places);
-}
-
-// =====================
-// LISTA SIMPLES (SEM GESTÃO DE ACESSOS)
-// =====================
-import { PlacesList } from 'forlogic-core';
-
-function MyPlacesPage() {
-  const [places, setPlaces] = useState<Place[]>([]);
-  const [isLoading, setIsLoading] = useState(true);
-
-  useEffect(() => {
-    placeService.getPlaces(alias, companyId)
-      .then(setPlaces)
-      .finally(() => setIsLoading(false));
-  }, [alias, companyId]);
-
-  return (
-    <PlacesList 
-      places={places} 
-      isLoading={isLoading} 
-    />
-  );
-}
-
-// =====================
-// COM GESTÃO DE ACESSOS
-// =====================
-import { PlacesList, PlaceCard } from 'forlogic-core';
-
-function PlacesWithAccess() {
-  const [places, setPlaces] = useState<Place[]>([]);
-  const [managers, setManagers] = useState<Record<string, string>>({});
-  const [members, setMembers] = useState<Record<string, string[]>>({});
-
-  const manageAccessConfig = {
-    onMakeManager: async (userId, placeId) => {
-      setManagers(prev => ({ ...prev, [placeId]: userId }));
-      // Chamar API para salvar
-    },
-    onMakeMembers: async (userIds, placeId) => {
-      setMembers(prev => ({ ...prev, [placeId]: userIds }));
-      // Chamar API para salvar
-    },
-    getCurrentManagerId: (placeId) => managers[placeId],
-    getCurrentMemberIds: (placeId) => members[placeId] || []
-  };
-
-  return (
-    <PlacesList 
-      places={places} 
-      isLoading={false}
-      manageAccessConfig={manageAccessConfig}
-    />
-  );
-}
-
-// =====================
-// PLACECARD INDIVIDUAL
-// =====================
-import { PlaceCard } from 'forlogic-core';
-
-<PlaceCard 
-  place={myPlace}
-  level={0}
-  manageAccessConfig={manageAccessConfig}
+// =====================
+// BUSCAR LOCAIS
+// =====================
+import { placeService } from 'forlogic-core';
+
+async function loadPlaces() {
+  const places = await placeService.getPlaces(alias, companyId);
+  // places já vem em estrutura hierárquica
+  console.log(places);
+}
+
+// =====================
+// LISTA SIMPLES (SEM GESTÃO DE ACESSOS)
+// =====================
+import { PlacesList } from 'forlogic-core';
+
+function MyPlacesPage() {
+  const [places, setPlaces] = useState<Place[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+
+  useEffect(() => {
+    placeService.getPlaces(alias, companyId)
+      .then(setPlaces)
+      .finally(() => setIsLoading(false));
+  }, [alias, companyId]);
+
+  return (
+    <PlacesList 
+      places={places} 
+      isLoading={isLoading} 
+    />
+  );
+}
+
+// =====================
+// COM GESTÃO DE ACESSOS
+// =====================
+import { PlacesList, PlaceCard } from 'forlogic-core';
+
+function PlacesWithAccess() {
+  const [places, setPlaces] = useState<Place[]>([]);
+  const [managers, setManagers] = useState<Record<string, string>>({});
+  const [members, setMembers] = useState<Record<string, string[]>>({});
+
+  const manageAccessConfig = {
+    onMakeManager: async (userId, placeId) => {
+      setManagers(prev => ({ ...prev, [placeId]: userId }));
+      // Chamar API para salvar
+    },
+    onMakeMembers: async (userIds, placeId) => {
+      setMembers(prev => ({ ...prev, [placeId]: userIds }));
+      // Chamar API para salvar
+    },
+    getCurrentManagerId: (placeId) => managers[placeId],
+    getCurrentMemberIds: (placeId) => members[placeId] || []
+  };
+
+  return (
+    <PlacesList 
+      places={places} 
+      isLoading={false}
+      manageAccessConfig={manageAccessConfig}
+    />
+  );
+}
+
+// =====================
+// PLACECARD INDIVIDUAL
+// =====================
+import { PlaceCard } from 'forlogic-core';
+
+<PlaceCard 
+  place={myPlace}
+  level={0}
+  manageAccessConfig={manageAccessConfig}
 />
 ```
 
@@ -500,7 +505,7 @@ import { PlaceCard } from 'forlogic-core';
 - A gestão de acessos é opcional - sem manageAccessConfig, apenas exibe.
 - Níveis de hierarquia são controlados pela prop level no PlaceCard.
 
-> Fonte: `src/design-system/docs/components/PlacesDoc.tsx`
+> Fonte: `src\design-system\docs\components\PlacesDoc.tsx`
 
 ---
 
@@ -510,65 +515,65 @@ Campo de seleção de usuários integrado com a API Qualiex. Suporta seleção
 
 **Uso:**
 ```tsx
-import { QualiexUserField } from "forlogic-core"
-
-// =====================
-// USO BÁSICO
-// =====================
-<QualiexUserField 
-  value={userId} 
-  onChange={setUserId}
-  placeholder="Selecione..."
-/>
-
-// =====================
-// COM LABEL E REQUIRED
-// =====================
-import { UserCheck } from "lucide-react"
-
-<QualiexUserField 
-  label="Responsável"
-  required
-  icon={UserCheck}
-  value={userId} 
-  onChange={setUserId}
-/>
-
-// =====================
-// SELEÇÃO MÚLTIPLA
-// =====================
-const [userIds, setUserIds] = useState<string[]>([])
-
-<QualiexUserField 
-  multiple
-  label="Avaliadores"
-  required
-  value={userIds} 
-  onChange={setUserIds}
-  maxDisplayedBadges={3}
-/>
-
-// =====================
-// DISPLAY CUSTOMIZADO
-// =====================
-
-// Exibir nome + email
-<QualiexUserField 
-  displayFormat="name-email"
-  value={userId} 
-  onChange={setUserId}
-/>
-
-// Exibir nome + cargo
-<QualiexUserField 
-  displayFormat="name-role"
-  value={userId} 
-  onChange={setUserId}
-/>
-
-// Custom display function
-<QualiexUserField 
-  displayFormat="custom"
+import { QualiexUserField } from "forlogic-core"
+
+// =====================
+// USO BÁSICO
+// =====================
+<QualiexUserField 
+  value={userId} 
+  onChange={setUserId}
+  placeholder="Selecione..."
+/>
+
+// =====================
+// COM LABEL E REQUIRED
+// =====================
+import { UserCheck } from "lucide-react"
+
+<QualiexUserField 
+  label="Responsável"
+  required
+  icon={UserCheck}
+  value={userId} 
+  onChange={setUserId}
+/>
+
+// =====================
+// SELEÇÃO MÚLTIPLA
+// =====================
+const [userIds, setUserIds] = useState<string[]>([])
+
+<QualiexUserField 
+  multiple
+  label="Avaliadores"
+  required
+  value={userIds} 
+  onChange={setUserIds}
+  maxDisplayedBadges={3}
+/>
+
+// =====================
+// DISPLAY CUSTOMIZADO
+// =====================
+
+// Exibir nome + email
+<QualiexUserField 
+  displayFormat="name-email"
+  value={userId} 
+  onChange={setUserId}
+/>
+
+// Exibir nome + cargo
+<QualiexUserField 
+  displayFormat="name-role"
+  value={userId} 
+  onChange={setUserId}
+/>
+
+// Custom display function
+<QualiexUserField 
+  displayFormat="custom"
   customDisplayFn={(user) => \`\${user.userName} - \${user.placeName || 'Sem local'}\
 ```
 
@@ -587,7 +592,7 @@ const [userIds, setUserIds] = useState<string[]>([])
 - O hook useQualiexUsers é usado internamente para buscar os usuários
 - Integrado automaticamente com BaseForm via type=
 
-> Fonte: `src/design-system/docs/components/QualiexUserFieldDoc.tsx`
+> Fonte: `src\design-system\docs\components\QualiexUserFieldDoc.tsx`
 
 ---
 
@@ -599,26 +604,26 @@ const [userIds, setUserIds] = useState<string[]>([])
 
 ### Select
 
-Exibe uma lista de opções para o usuário escolher—acionada por um botão.
+Exibe uma lista de opções para o usuário escolher—acionada por um botão. O item selecionado é destacado por background (accent), fonte medium e borda esquerda na cor primary. A prop `showCheck` (opcional) adiciona um ícone de check à esquerda do item selecionado.
 
 **Uso:**
 ```tsx
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "forlogic-core"
-
-<Select>
-  <SelectTrigger className="w-[180px]">
-    <SelectValue placeholder="Theme" />
-  </SelectTrigger>
-  <SelectContent>
-    <SelectItem value="light">Light</SelectItem>
-    <SelectItem value="dark">Dark</SelectItem>
-  </SelectContent>
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "forlogic-core"
+
+<Select>
+  <SelectTrigger className="w-[180px]">
+    <SelectValue placeholder="Theme" />
+  </SelectTrigger>
+  <SelectContent>
+    <SelectItem value="light">Light</SelectItem>
+    <SelectItem value="dark">Dark</SelectItem>
+  </SelectContent>
 </Select>
 ```
 
@@ -629,6 +634,7 @@ import {
 | `value` | `string` | - | O valor selecionado controlado. |
 | `onValueChange` | `(value: string) => void` | - | Manipulador de evento quando o valor muda. |
 | `disabled` | `boolean` | false | Se o select está desabilitado. |
+| `showCheck` | `boolean` | false | Exibe o ícone de check à esquerda do item selecionado. Quando false, o item selecionado é destacado apenas pelo background, fonte medium e borda esquerda primary. |
 | `container (SelectContent)` | `HTMLElement` | - | Container HTML para portal (útil dentro de Dialog). |
 | `collisionBoundary (SelectContent)` | `HTMLElement` | - | Elemento para detecção de colisão de posicionamento. |
 
@@ -644,13 +650,17 @@ import {
 -  quando o Select estiver dentro de um Dialog para evitar problemas de scroll
 - 💡 Para seleção com busca, considere usar 
 -  ao invés de 
-- ,
+- ,
         
 - rounded-lg
 - hover:border-primary
 - transition-colors
+- ,
+        
+- Combobox
+- showCheck
 
-> Fonte: `src/design-system/docs/components/SelectDoc.tsx`
+> Fonte: `src\design-system\docs\components\SelectDoc.tsx`
 
 ---