@liguelead/design-system 0.0.35 → 0.0.36

package/components/Alert/Alert.stories.tsx

@@ -55,6 +55,11 @@ Componente de alerta para comunicar mensagens de feedback ao usuário.
       control: 'text',
       description: 'URL do botão de ação',
     },
+    openNewTab: {
+      control: 'boolean',
+      description: 'Abre o link do botão em uma nova aba',
+      table: { defaultValue: { summary: 'false' } },
+    },
   },
 }
 
@@ -87,13 +92,14 @@ export const TodasVariantes: Story = {
 export const ComBotao: Story = {
   name: 'Com botão de ação',
   parameters: {
-    docs: { description: { story: 'Use `hasButton` quando houver uma ação clara para o usuário tomar.' } },
+    docs: { description: { story: 'Use `hasButton` quando houver uma ação clara para o usuário tomar. Use `openNewTab` para abrir o link em nova aba.' } },
   },
   render: () => (
     <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
-      <Alert variant="info" title="Nova versão disponível" description="Uma atualização está pronta para ser instalada." hasButton buttonLabel="Atualizar agora" href="#" />
-      <Alert variant="warning" title="Sessão expirando" description="Sua sessão expira em 5 minutos." hasButton buttonLabel="Renovar sessão" href="#" />
-      <Alert variant="danger" title="Falha no pagamento" description="Não foi possível processar seu pagamento." hasButton buttonLabel="Tentar novamente" href="#" />
+      <Alert variant="info" title="Nova versão disponível" description="Uma atualização está pronta para ser instalada." hasButton buttonLabel="Atualizar agora" href="#" openNewTab={false} />
+      <Alert variant="warning" title="Sessão expirando" description="Sua sessão expira em 5 minutos." hasButton buttonLabel="Renovar sessão" href="#" openNewTab={false} />
+      <Alert variant="danger" title="Falha no pagamento" description="Não foi possível processar seu pagamento." hasButton buttonLabel="Tentar novamente" href="#" openNewTab={false} />
+      <Alert variant="info" title="Documentação disponível" description="Acesse a documentação completa no portal." hasButton buttonLabel="Ver documentação" href="#" openNewTab />
     </div>
   ),
 }

package/components/Alert/Alert.tsx

@@ -17,6 +17,7 @@ const Alert = ({
     description,
     href,
     children,
+    openNewTab,
     title,
     hasButton
 }: TAlertProps) => {
@@ -45,7 +46,12 @@ const Alert = ({
             </AlertContent>
             {hasButton && (
                 <AlertButtonContainer>
-                    <LinkButton href={href || ''}>{buttonLabel}</LinkButton>
+                    <LinkButton
+                        href={href || ''}
+                        target={openNewTab ? '_blank' : undefined}
+                    >
+                        {buttonLabel}
+                    </LinkButton>
                 </AlertButtonContainer>
             )}
         </AlertContainer>

package/components/Alert/Alert.types.ts

@@ -7,4 +7,5 @@ export type TAlertProps = {
     description?: string
     variant?: 'default' | 'danger' | 'warning' | 'info' | 'success'
     title: string
+    openNewTab?: boolean
 }

package/components/Skeleton/Skeleton.stories.tsx

@@ -0,0 +1,126 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import Skeleton from './Skeleton'
+
+const meta: Meta<typeof Skeleton> = {
+    title: 'Feedback/Skeleton',
+    component: Skeleton,
+    parameters: {
+        layout: 'centered',
+        docs: {
+            description: {
+                component: `
+Componente de loading skeleton baseado em \`react-loading-skeleton\`.
+
+**Quando usar:**
+- Enquanto dados estão sendo carregados da API
+- Para evitar layout shift e melhorar a percepção de performance
+- Substitua o conteúdo real pelo Skeleton durante o estado de loading
+        `,
+            },
+        },
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        width: {
+            control: 'text',
+            description: 'Largura do skeleton (px, %, rem...)',
+        },
+        height: {
+            control: 'text',
+            description: 'Altura do skeleton',
+        },
+        count: {
+            control: { type: 'number', min: 1, max: 10 },
+            description: 'Quantidade de linhas',
+            table: { defaultValue: { summary: '1' } },
+        },
+        circle: {
+            control: 'boolean',
+            description: 'Formato circular (avatar)',
+            table: { defaultValue: { summary: 'false' } },
+        },
+        borderRadius: {
+            control: 'text',
+            description: 'Border radius customizado',
+        },
+        inline: {
+            control: 'boolean',
+            description: 'Exibe inline',
+            table: { defaultValue: { summary: 'false' } },
+        },
+    },
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+    args: {
+        width: 200,
+        height: 20,
+    },
+}
+
+export const MultiplaLinhas: Story = {
+    name: 'Múltiplas linhas',
+    parameters: {
+        docs: { description: { story: 'Use `count` para simular blocos de texto.' } },
+    },
+    render: () => (
+        <div style={{ width: 320 }}>
+            <Skeleton count={4} height={16} />
+        </div>
+    ),
+}
+
+export const Circular: Story = {
+    name: 'Avatar circular',
+    parameters: {
+        docs: { description: { story: 'Use `circle` para avatares.' } },
+    },
+    render: () => (
+        <div style={{ display: 'flex', gap: 12, alignItems: 'center' }}>
+            <Skeleton circle width={32} height={32} />
+            <Skeleton circle width={40} height={40} />
+            <Skeleton circle width={56} height={56} />
+        </div>
+    ),
+}
+
+export const Card: Story = {
+    name: 'Card de conteúdo',
+    parameters: {
+        docs: { description: { story: 'Exemplo de skeleton para um card com avatar + texto.' } },
+    },
+    render: () => (
+        <div style={{ display: 'flex', flexDirection: 'column', gap: 12, width: 320 }}>
+            <div style={{ display: 'flex', gap: 12, alignItems: 'center' }}>
+                <Skeleton circle width={40} height={40} />
+                <div style={{ flex: 1 }}>
+                    <Skeleton height={14} width="60%" />
+                    <Skeleton height={12} width="40%" />
+                </div>
+            </div>
+            <Skeleton height={120} borderRadius={8} />
+            <Skeleton count={3} height={14} />
+        </div>
+    ),
+}
+
+export const Tabela: Story = {
+    name: 'Linhas de tabela',
+    parameters: {
+        docs: { description: { story: 'Simula linhas de uma tabela carregando.' } },
+    },
+    render: () => (
+        <div style={{ display: 'flex', flexDirection: 'column', gap: 8, width: 480 }}>
+            {Array.from({ length: 5 }).map((_, i) => (
+                <div key={i} style={{ display: 'flex', gap: 16 }}>
+                    <Skeleton width={120} height={16} />
+                    <Skeleton width={160} height={16} />
+                    <Skeleton width={80} height={16} />
+                </div>
+            ))}
+        </div>
+    ),
+}

package/components/Skeleton/Skeleton.styles.ts

@@ -0,0 +1,15 @@
+import styled from 'styled-components'
+import { radius } from '@liguelead/foundation'
+import { parseColor } from '../../utils'
+
+export const SkeletonWrapper = styled.div<{ $inline?: boolean }>`
+    display: ${({ $inline }) => ($inline ? 'inline-flex' : 'flex')};
+    flex-direction: column;
+    gap: 4px;
+`
+
+export const SkeletonThemeWrapper = styled.div`
+    --base-color: ${({ theme }) => parseColor(theme.colors.neutral200)};
+    --highlight-color: ${({ theme }) => parseColor(theme.colors.neutral100)};
+    border-radius: ${radius.radius4}px;
+`

package/components/Skeleton/Skeleton.tsx

@@ -0,0 +1,38 @@
+import ReactSkeleton, { SkeletonTheme } from 'react-loading-skeleton'
+import 'react-loading-skeleton/dist/skeleton.css'
+import { useTheme } from 'styled-components'
+import { parseColor } from '../../utils'
+import { SkeletonWrapper } from './Skeleton.styles'
+import { SkeletonProps } from './Skeleton.types'
+
+const Skeleton: React.FC<SkeletonProps> = ({
+    width,
+    height,
+    borderRadius,
+    circle = false,
+    count = 1,
+    className,
+    inline = false,
+}) => {
+    const theme = useTheme()
+
+    return (
+        <SkeletonTheme
+            baseColor={parseColor(theme.colors.neutral200)}
+            highlightColor={parseColor(theme.colors.neutral100)}
+        >
+            <SkeletonWrapper $inline={inline} className={className}>
+                <ReactSkeleton
+                    width={width}
+                    height={height}
+                    borderRadius={borderRadius}
+                    circle={circle}
+                    count={count}
+                    inline={inline}
+                />
+            </SkeletonWrapper>
+        </SkeletonTheme>
+    )
+}
+
+export default Skeleton

package/components/Skeleton/Skeleton.types.ts

@@ -0,0 +1,9 @@
+export interface SkeletonProps {
+    width?: string | number
+    height?: string | number
+    borderRadius?: string | number
+    circle?: boolean
+    count?: number
+    className?: string
+    inline?: boolean
+}

package/components/Skeleton/index.ts

@@ -0,0 +1,2 @@
+export { default as Skeleton } from './Skeleton'
+export type { SkeletonProps } from './Skeleton.types'

package/components/index.ts

@@ -21,3 +21,5 @@ export { Combobox } from './Combobox'
 export { default as SplitButton } from './SplitButton'
 export { default as Table } from './Table'
 export { default as Tabs } from './Tabs'
+export { Skeleton } from './Skeleton'
+export type { SkeletonProps } from './Skeleton'

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@liguelead/design-system",
-    "version": "0.0.35",
+    "version": "0.0.36",
     "type": "module",
     "main": "components/index.ts",
     "publishConfig": {
@@ -25,7 +25,8 @@
         "react-toastify": "^11.0.5",
         "cmdk": "^1.1.1",
         "date-fns": "^2.30.0",
-        "@tanstack/react-table": "^8.0.0"
+        "@tanstack/react-table": "^8.0.0",
+        "react-loading-skeleton": "^3.5.0"
     },
     "scripts": {
         "lint": "eslint ."