mblabs-roccato-frontend-commons 0.1.13 → 0.1.15

package/README.md

@@ -71,6 +71,136 @@ import 'mblabs-roccato-frontend-commons/css'; // estilos padrões
 
 ---
 
+## 📦 Adicionando novos ícones
+
+Para adicionar novos ícones ao projeto, siga este processo passo a passo:
+
+### 1. Copiar nome do ícone do Figma
+- Identifique o nome exato do ícone no design do Figma
+- Exemplo: `check-circle`, `info-circle`, `user-01`
+
+### 2. Buscar ícone no Untitled UI
+- Acesse [https://www.untitledui.com/free-icons](https://www.untitledui.com/free-icons)
+- Use a barra de pesquisa para encontrar o ícone pelo nome
+- Certifique-se de que é o ícone correto visualmente
+
+### 3. Copiar SVG
+- Clique no ícone desejado
+- Copie o código SVG fornecido
+- O SVG deve ter viewBox="0 0 24 24" e ser otimizado
+
+### 4. Criar componente reutilizável
+Crie um novo arquivo em `src/components/icons/` seguindo o padrão:
+
+```tsx
+// src/components/icons/nome-do-icone.tsx
+import { ComponentProps } from 'react';
+
+export function NomeDoIcone(props: ComponentProps<'svg'>) {
+  return (
+    <svg 
+      width="100%" 
+      height="100%" 
+      viewBox="0 0 24 24" 
+      fill="none" 
+      xmlns="http://www.w3.org/2000/svg" 
+      {...props}
+    >
+      {/* Cole o conteúdo SVG aqui */}
+    </svg>
+  );
+}
+```
+
+### 5. Corrigir propriedades CSS
+Converta propriedades kebab-case para camelCase:
+
+```tsx
+// ❌ Incorreto
+stroke-width="2" → strokeWidth="2"
+stroke-linecap="round" → strokeLinecap="round"
+stroke-linejoin="round" → strokeLinejoin="round"
+fill-rule="evenodd" → fillRule="evenodd"
+clip-rule="evenodd" → clipRule="evenodd"
+
+// ✅ Correto
+strokeWidth="2"
+strokeLinecap="round"
+strokeLinejoin="round"
+fillRule="evenodd"
+clipRule="evenodd"
+```
+
+### 6. Adicionar ao index.ts
+Adicione a exportação no arquivo `src/components/icons/index.ts`:
+
+```tsx
+// Adicione no final do arquivo, em ordem alfabética
+export * from './nome-do-icone';
+```
+
+### Exemplo Completo
+
+**Nome do ícone:** `check-circle`
+
+**Arquivo criado:** `src/components/icons/check-circle.tsx`
+
+```tsx
+import { ComponentProps } from 'react';
+
+export function CheckCircle(props: ComponentProps<'svg'>) {
+  return (
+    <svg 
+      width="100%" 
+      height="100%" 
+      viewBox="0 0 24 24" 
+      fill="none" 
+      xmlns="http://www.w3.org/2000/svg" 
+      {...props}
+    >
+      <path
+        d="M7.5 12L10.5 15L16.5 9M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+```
+
+**Adicionado ao index.ts:**
+```tsx
+export * from './check-circle';
+```
+
+### Boas Práticas
+
+- ✅ Use `currentColor` para stroke/fill para permitir customização
+- ✅ Mantenha viewBox="0 0 24 24" para consistência
+- ✅ Use width="100%" height="100%" para responsividade
+- ✅ Nomeie o componente em PascalCase
+- ✅ Nomeie o arquivo em kebab-case
+- ✅ Mantenha ordem alfabética no index.ts
+- ✅ Teste o ícone no Storybook após adicionar
+
+### Uso do Ícone
+
+Após adicionar, o ícone estará disponível para uso:
+
+```tsx
+import { CheckCircle } from '@/components/icons';
+
+// Uso básico
+<CheckCircle />
+
+// Com customização
+<CheckCircle className="w-6 h-6 text-blue-500" />
+```
+
+---
+
 ## 📚 Storybook
 
 Explore e teste os componentes interativamente:

package/dist/index.d.ts

@@ -18,6 +18,7 @@ import * as DialogPrimitive from '@radix-ui/react-dialog';
 import { Drawer as Drawer_2 } from 'vaul';
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 import { ElementType } from 'react';
+import { ExternalToast } from 'sonner';
 import { FieldError } from 'react-hook-form';
 import { FieldPath } from 'react-hook-form';
 import { FieldValues } from 'react-hook-form';
@@ -69,6 +70,8 @@ export declare function addMonth(date: DateTime, month: number): DateTime;
 
 export declare function Alert({ className, variant, ...props }: React_2.ComponentProps<'div'> & VariantProps<typeof alertVariants>): JSX.Element;
 
+export declare function AlertCircle({ ...props }: ComponentProps<'svg'>): JSX.Element;
+
 export declare function AlertDescription({ className, ...props }: React_2.ComponentProps<'div'>): JSX.Element;
 
 export declare const AlertDialog: React_2.FC<AlertDialogPrimitive.AlertDialogProps>;
@@ -783,6 +786,8 @@ export declare interface IconProps {
     size?: keyof typeof ICON_SIZES;
 }
 
+export declare function InfoCircle(props: ComponentProps<'svg'>): JSX.Element;
+
 export declare const Input: ForwardRefExoticComponent<Omit<InputProps, "ref"> & RefAttributes<HTMLInputElement>>;
 
 declare const INPUT_SIZE_CLASSES: {
@@ -1337,7 +1342,7 @@ export declare function stringToNumber(value: string): string;
 
 export declare function Switch({ className, ...props }: React_2.ComponentProps<typeof SwitchPrimitive.Root>): JSX.Element;
 
-export declare function Table({ className, ...props }: React_2.ComponentProps<'table'>): JSX.Element;
+export declare function Table(props: ComponentProps<'svg'>): JSX.Element;
 
 export declare function TableBody({ className, ...props }: React_2.ComponentProps<'tbody'>): JSX.Element;
 
@@ -1457,6 +1462,11 @@ export declare function useScreenSize(): ScreenSizes;
 
 export declare function useSidebar(): SidebarContextProps;
 
+export declare const useToast: () => {
+    success: (message: string, options?: ExternalToast) => void;
+    error: (message: string, options?: ExternalToast) => void;
+};
+
 declare interface UseToggleReturn {
     /** Current boolean state */
     state: boolean;