forlogic-core 2.1.4 → 2.2.0

package/docs/design-system/dialogs.md

@@ -11,27 +11,27 @@ Dialog para navegação entre módulos do sistema.
 
 **Uso:**
 ```tsx
-import { useState } from 'react';
-import { Button, ModulesDialog } from 'forlogic-core';
-import { LayoutGrid } from 'lucide-react';
-
-function App() {
-  const [open, setOpen] = useState(false);
-
-  return (
-    <>
-      <Button onClick={() => setOpen(true)}>
-        <LayoutGrid className="h-4 w-4 mr-2" />
-        Módulos
-      </Button>
-
-      <ModulesDialog
-        open={open}
-        onOpenChange={setOpen}
-        onModuleClick={(module) => console.log(module)}
-      />
-    </>
-  );
+import { useState } from 'react';
+import { Button, ModulesDialog } from 'forlogic-core';
+import { LayoutGrid } from 'lucide-react';
+
+function App() {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <>
+      <Button onClick={() => setOpen(true)}>
+        <LayoutGrid className="h-4 w-4 mr-2" />
+        Módulos
+      </Button>
+
+      <ModulesDialog
+        open={open}
+        onOpenChange={setOpen}
+        onModuleClick={(module) => console.log(module)}
+      />
+    </>
+  );
 }
 ```
 
@@ -47,11 +47,11 @@ function App() {
 **Acessibilidade:**
 - Dialog acessível com role=
 -  e aria-modal=
-- ,
+- ,
           
-- ,
+- ,
           
-- ,
+- ,
           
 
 **Notas:**
@@ -61,7 +61,7 @@ function App() {
 - Grid Responsivo: 4 colunas em XL, 3 em MD, 2 em base
 - Cards no Rodapé: Forlogic Educa, Saber Gestão e Wiki
 
-> Fonte: `src\design-system\docs\components\ModulesDialogDoc.tsx`
+> Fonte: `src/design-system/docs/components/ModulesDialogDoc.tsx`
 
 ---
 
@@ -71,13 +71,13 @@ Exibe uma mensagem de destaque para chamar a atenção do usuário. O componente
 
 **Uso:**
 ```tsx
-import { Alert, AlertDescription, AlertTitle } from "forlogic-core"
-
-<Alert variant="info">
-  <AlertTitle>Informação</AlertTitle>
-  <AlertDescription>
-    Esta é uma mensagem informativa para o usuário.
-  </AlertDescription>
+import { Alert, AlertDescription, AlertTitle } from "forlogic-core"
+
+<Alert variant="info">
+  <AlertTitle>Informação</AlertTitle>
+  <AlertDescription>
+    Esta é uma mensagem informativa para o usuário.
+  </AlertDescription>
 </Alert>
 ```
 
@@ -111,7 +111,7 @@ import { Alert, AlertDescription, AlertTitle } from "forlogic-core"
 - Estrutura HTML semântica com título e descrição claramente definidos
 - Contraste de cores adequado para acessibilidade visual
 
-> Fonte: `src\design-system\docs\components\AlertDoc.tsx`
+> Fonte: `src/design-system/docs/components/AlertDoc.tsx`
 
 ---
 
@@ -121,19 +121,19 @@ Exibe um card com cabeçalho, conteúdo e rodapé.
 
 **Uso:**
 ```tsx
-import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from "forlogic-core"
-
-<Card>
-  <CardHeader>
-    <CardTitle>Card Title</CardTitle>
-    <CardDescription>Card Description</CardDescription>
-  </CardHeader>
-  <CardContent>
-    <p>Card Content</p>
-  </CardContent>
-  <CardFooter>
-    <p>Card Footer</p>
-  </CardFooter>
+import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from "forlogic-core"
+
+<Card>
+  <CardHeader>
+    <CardTitle>Card Title</CardTitle>
+    <CardDescription>Card Description</CardDescription>
+  </CardHeader>
+  <CardContent>
+    <p>Card Content</p>
+  </CardContent>
+  <CardFooter>
+    <p>Card Footer</p>
+  </CardFooter>
 </Card>
 ```
 
@@ -148,7 +148,7 @@ import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter }
 - Contraste de cores acessível
 - Funciona com leitores de tela
 
-> Fonte: `src\design-system\docs\components\CardDoc.tsx`
+> Fonte: `src/design-system/docs/components/CardDoc.tsx`
 
 ---
 
@@ -158,51 +158,51 @@ Exibe conteúdo rico em um portal, acionado por um botão.
 
 **Uso:**
 ```tsx
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-  Button,
-  Input,
-  Label
-} from 'forlogic-core';
-
-function DimensionsPopover() {
-  return (
-    <Popover>
-      <PopoverTrigger asChild>
-        <Button variant="outline">Abrir popover</Button>
-      </PopoverTrigger>
-      <PopoverContent className="w-80">
-        <div className="grid gap-4">
-          <div className="space-y-2">
-            <h4 className="font-medium leading-none">Dimensões</h4>
-            <p className="text-sm text-muted-foreground">
-              Defina as dimensões para a camada.
-            </p>
-          </div>
-          <div className="grid gap-2">
-            <div className="grid grid-cols-3 items-center gap-4">
-              <Label htmlFor="width">Largura</Label>
-              <Input id="width" defaultValue="100%" className="col-span-2 h-8" />
-            </div>
-            <div className="grid grid-cols-3 items-center gap-4">
-              <Label htmlFor="maxWidth">Máx. largura</Label>
-              <Input id="maxWidth" defaultValue="300px" className="col-span-2 h-8" />
-            </div>
-            <div className="grid grid-cols-3 items-center gap-4">
-              <Label htmlFor="height">Altura</Label>
-              <Input id="height" defaultValue="25px" className="col-span-2 h-8" />
-            </div>
-            <div className="grid grid-cols-3 items-center gap-4">
-              <Label htmlFor="maxHeight">Máx. altura</Label>
-              <Input id="maxHeight" defaultValue="none" className="col-span-2 h-8" />
-            </div>
-          </div>
-        </div>
-      </PopoverContent>
-    </Popover>
-  );
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+  Button,
+  Input,
+  Label
+} from 'forlogic-core';
+
+function DimensionsPopover() {
+  return (
+    <Popover>
+      <PopoverTrigger asChild>
+        <Button variant="outline">Abrir popover</Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-80">
+        <div className="grid gap-4">
+          <div className="space-y-2">
+            <h4 className="font-medium leading-none">Dimensões</h4>
+            <p className="text-sm text-muted-foreground">
+              Defina as dimensões para a camada.
+            </p>
+          </div>
+          <div className="grid gap-2">
+            <div className="grid grid-cols-3 items-center gap-4">
+              <Label htmlFor="width">Largura</Label>
+              <Input id="width" defaultValue="100%" className="col-span-2 h-8" />
+            </div>
+            <div className="grid grid-cols-3 items-center gap-4">
+              <Label htmlFor="maxWidth">Máx. largura</Label>
+              <Input id="maxWidth" defaultValue="300px" className="col-span-2 h-8" />
+            </div>
+            <div className="grid grid-cols-3 items-center gap-4">
+              <Label htmlFor="height">Altura</Label>
+              <Input id="height" defaultValue="25px" className="col-span-2 h-8" />
+            </div>
+            <div className="grid grid-cols-3 items-center gap-4">
+              <Label htmlFor="maxHeight">Máx. altura</Label>
+              <Input id="maxHeight" defaultValue="none" className="col-span-2 h-8" />
+            </div>
+          </div>
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
 }
 ```
 
@@ -237,7 +237,7 @@ function DimensionsPopover() {
 - O prop asChild permite usar qualquer elemento como trigger.
 - Combine com formulários para edição inline de campos.
 
-> Fonte: `src\design-system\docs\components\PopoverDoc.tsx`
+> Fonte: `src/design-system/docs/components/PopoverDoc.tsx`
 
 ---
 
@@ -247,22 +247,22 @@ Um popup que exibe informações relacionadas a um elemento quando o elemento re
 
 **Uso:**
 ```tsx
-import { 
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from 'forlogic-core';
-
-<TooltipProvider>
-  <Tooltip>
-    <TooltipTrigger asChild>
-      <Button variant="outline">Hover</Button>
-    </TooltipTrigger>
-    <TooltipContent>
-      <p>Adicionar à biblioteca</p>
-    </TooltipContent>
-  </Tooltip>
+import { 
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from 'forlogic-core';
+
+<TooltipProvider>
+  <Tooltip>
+    <TooltipTrigger asChild>
+      <Button variant="outline">Hover</Button>
+    </TooltipTrigger>
+    <TooltipContent>
+      <p>Adicionar à biblioteca</p>
+    </TooltipContent>
+  </Tooltip>
 </TooltipProvider>
 ```
 
@@ -280,30 +280,30 @@ import {
 
 **Exemplos:**
 ```tsx
-<TooltipProvider>
-  <Tooltip>
-    <TooltipTrigger asChild>
+<TooltipProvider>
+  <Tooltip>
+    <TooltipTrigger asChild>
       <Info className=
 ```
 ```tsx
 <TooltipContent side=
 ```
 ```tsx
-// Sem delay
-<TooltipProvider delayDuration={0}>
-  <Tooltip>...</Tooltip>
-</TooltipProvider>
-
-// Delay de 1 segundo
-<TooltipProvider delayDuration={1000}>
-  <Tooltip>...</Tooltip>
+// Sem delay
+<TooltipProvider delayDuration={0}>
+  <Tooltip>...</Tooltip>
+</TooltipProvider>
+
+// Delay de 1 segundo
+<TooltipProvider delayDuration={1000}>
+  <Tooltip>...</Tooltip>
 </TooltipProvider>
 ```
 ```tsx
-// Provider compartilhado - mover entre tooltips é instantâneo
-<TooltipProvider delayDuration={100} skipDelayDuration={0}>
-  <Tooltip>
-    <TooltipTrigger asChild>
+// Provider compartilhado - mover entre tooltips é instantâneo
+<TooltipProvider delayDuration={100} skipDelayDuration={0}>
+  <Tooltip>
+    <TooltipTrigger asChild>
       <Button variant=
 ```
 ```tsx
@@ -325,7 +325,7 @@ import {
 - Combine com ícones de informação para ajuda contextual
 - Use delayDuration={0} para exibição instantânea quando necessário
 
-> Fonte: `src\design-system\docs\components\TooltipDoc.tsx`
+> Fonte: `src/design-system/docs/components/TooltipDoc.tsx`
 
 ---
 
@@ -335,30 +335,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
+  }}
 />
 ```
 
@@ -401,7 +401,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`
 
 ---
 
@@ -411,27 +411,27 @@ Dialog para navegação entre módulos do sistema.
 
 **Uso:**
 ```tsx
-import { useState } from 'react';
-import { Button, ModulesDialog } from 'forlogic-core';
-import { LayoutGrid } from 'lucide-react';
-
-function App() {
-  const [open, setOpen] = useState(false);
-
-  return (
-    <>
-      <Button onClick={() => setOpen(true)}>
-        <LayoutGrid className="h-4 w-4 mr-2" />
-        Módulos
-      </Button>
-
-      <ModulesDialog
-        open={open}
-        onOpenChange={setOpen}
-        onModuleClick={(module) => console.log(module)}
-      />
-    </>
-  );
+import { useState } from 'react';
+import { Button, ModulesDialog } from 'forlogic-core';
+import { LayoutGrid } from 'lucide-react';
+
+function App() {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <>
+      <Button onClick={() => setOpen(true)}>
+        <LayoutGrid className="h-4 w-4 mr-2" />
+        Módulos
+      </Button>
+
+      <ModulesDialog
+        open={open}
+        onOpenChange={setOpen}
+        onModuleClick={(module) => console.log(module)}
+      />
+    </>
+  );
 }
 ```
 
@@ -447,11 +447,11 @@ function App() {
 **Acessibilidade:**
 - Dialog acessível com role=
 -  e aria-modal=
-- ,
+- ,
           
-- ,
+- ,
           
-- ,
+- ,
           
 
 **Notas:**
@@ -461,7 +461,7 @@ function App() {
 - Grid Responsivo: 4 colunas em XL, 3 em MD, 2 em base
 - Cards no Rodapé: Forlogic Educa, Saber Gestão e Wiki
 
-> Fonte: `src\design-system\docs\components\ModulesDialogDoc.tsx`
+> Fonte: `src/design-system/docs/components/ModulesDialogDoc.tsx`
 
 ---
 
@@ -471,41 +471,41 @@ Componente para fluxos de onboarding em múltiplos passos. Suporta imagens está
 
 **Uso:**
 ```tsx
-import { useState } from "react";
-import { OnboardingDialog, OnboardingStep, Button } from "forlogic-core";
-
-function App() {
-  const [open, setOpen] = useState(false);
-
-  const steps: OnboardingStep[] = [
-    {
-      id: "welcome",
-      title: "Bem-vindo ao Sistema",
-      description: "Neste espaço, você irá adicionar o texto que explica o processo de onboarding.",
-    },
-    {
-      id: "features",
-      title: "Conheça as Funcionalidades",
-      description: "Descubra todas as ferramentas disponíveis para você.",
-    },
-    {
-      id: "start",
-      title: "Comece Agora",
-      description: "Você está pronto para começar a usar o sistema!",
-    },
-  ];
-
-  return (
-    <>
-      <Button onClick={() => setOpen(true)}>Iniciar Onboarding</Button>
-      <OnboardingDialog
-        open={open}
-        onOpenChange={setOpen}
-        steps={steps}
-        onComplete={() => console.log("Onboarding concluído!")}
-      />
-    </>
-  );
+import { useState } from "react";
+import { OnboardingDialog, OnboardingStep, Button } from "forlogic-core";
+
+function App() {
+  const [open, setOpen] = useState(false);
+
+  const steps: OnboardingStep[] = [
+    {
+      id: "welcome",
+      title: "Bem-vindo ao Sistema",
+      description: "Neste espaço, você irá adicionar o texto que explica o processo de onboarding.",
+    },
+    {
+      id: "features",
+      title: "Conheça as Funcionalidades",
+      description: "Descubra todas as ferramentas disponíveis para você.",
+    },
+    {
+      id: "start",
+      title: "Comece Agora",
+      description: "Você está pronto para começar a usar o sistema!",
+    },
+  ];
+
+  return (
+    <>
+      <Button onClick={() => setOpen(true)}>Iniciar Onboarding</Button>
+      <OnboardingDialog
+        open={open}
+        onOpenChange={setOpen}
+        steps={steps}
+        onComplete={() => console.log("Onboarding concluído!")}
+      />
+    </>
+  );
 }
 ```
 
@@ -529,7 +529,7 @@ function App() {
 - O botão 
 -  só aparece a partir do segundo step.
 
-> Fonte: `src\design-system\docs\components\OnboardingDialogDoc.tsx`
+> Fonte: `src/design-system/docs/components/OnboardingDialogDoc.tsx`
 
 ---
 
@@ -577,7 +577,7 @@ import { TermsOfUseDialog, TermsOfUseViewer } from 'forlogic-core';
 **Notas:**
 - TermsOfUseViewer oculta botão automaticamente quando hasUserSignature=true
 
-> Fonte: `src\design-system\docs\components\TermsOfUseDoc.tsx`
+> Fonte: `src/design-system/docs/components/TermsOfUseDoc.tsx`
 
 ---