README

Laravel Design System

Um pacote de Design System bonito e moderno para Laravel, fornecendo componentes Blade reutilizáveis com estilo elegante. Este pacote inclui uma interface de guia de estilo abrangente para mostrar todos os componentes e tokens de design.

📖 Índice

Funcionalidades
Instalação
- Quick Start
- Comando de Instalação
Comandos CLI Disponíveis
- Criar Novo Componente
- Criar Documentação do Styleguide
Passo a Passo: Criando Seu Primeiro Componente
Configuração
Publicando Assets
Componentes
- Estrutura do Template
- Variantes e Tamanhos
Tokens de Design
Guia de Estilo
Personalização Avançada
Exemplos Práticos
Solução de Problemas
Testes
Contribuindo
Licença

Funcionalidades

🎨 Design System Moderno - Componentes limpos e bonitos com estilo inspirado no Tailwind
🧩 Componentes Blade Reutilizáveis - Tabela, Select Nativo e componentes de Gráfico
📚 Guia de Estilo Interativo - Interface de guia de estilo integrada para explorar componentes
🛠️ Comandos CLI - Comandos Artisan para criar novos componentes rapidamente
🎯 Integração Fácil - Instalação simples com auto-discovery do Laravel
🎭 Personalizável - Publique e personalize views, assets e configurações
🌗 Modo Escuro - Suporte nativo a dark mode com Alpine.js
✅ Bem Testado - Cobertura de testes abrangente para todos os componentes

Componentes

🏗️ Estrutura do Template de Componente

Quando você cria um componente com design-system:make-component, ele vem com um template completo:

{{-- Cabeçalho com informações do autor --}}
{{--
By Uendel Silveira
Full Stack Developer
IDE: PHPStorm
Created: 24/01/2026
--}}

{{-- Props do componente --}}
@props([
    'variant' => 'default',  // Variante visual
    'size' => 'md',         // Tamanho do componente
])

{{-- Lógica PHP para classes dinâmicas --}}
@php
    // Classes baseadas na variante
    $classes = match($variant) {
        'primary' => 'bg-primary text-primary-foreground',
        'secondary' => 'bg-secondary text-secondary-foreground',
        'success' => 'bg-success text-success-foreground',
        'danger' => 'bg-destructive text-destructive-foreground',
        default => 'bg-card text-foreground border border-border',
    };

    // Classes baseadas no tamanho
    $sizes = match($size) {
        'sm' => 'text-sm p-2',
        'lg' => 'text-lg p-6',
        default => 'text-base p-4',
    };
@endphp

{{-- Elemento HTML com merge de classes --}}
<div {{ $attributes->merge(['class' => "rounded-xl transition-colors {$classes} {$sizes}"]) }}>
    {{ $slot }}
</div>

🎯 Variantes Disponíveis

Todos os componentes gerados suportam estas variantes:

Variante	Classe CSS	Uso
`default`	`bg-card text-foreground border`	Padrão, estilo neutro
`primary`	`bg-primary text-primary-foreground`	Ação principal
`secondary`	`bg-secondary text-secondary-foreground`	Ação secundária
`success`	`bg-success text-success-foreground`	Estado de sucesso
`danger`	`bg-destructive text-destructive-foreground`	Ação destrutiva

📏 Tamanhos Disponíveis

Tamanho	Classe CSS	Uso
`sm`	`text-sm p-2`	Elementos pequenos
`md`	`text-base p-4`	Tamanho padrão
`lg`	`text-lg p-6`	Elementos grandes

Componente de Tabela

Uma tabela de dados completa com ordenação, listras e estados vazios.

Componente de Select Nativo

Um elemento select nativo estilizado com labels, dicas e estados de erro.

Componente de Gráfico

Um gráfico de barras em CSS puro com tooltips, legendas e alturas personalizáveis.

Instalação

Requisitos

PHP 8.2 ou superior
Laravel 12.0 ou superior
Tailwind CSS v4 (recomendado)

Instalação via Composer

composer require uendelsilveira/laravel-design-system

O service provider será registrado automaticamente via auto-discovery de pacotes do Laravel.

⚡ Quick Start

Comece a usar o Design System em 3 passos:

1. Instalar o pacote

php artisan design-system:install

2. Acessar o Styleguide

Abra seu navegador em: http://seu-app.test/styleguide

3. Usar os componentes

{{-- Use os componentes pré-construídos --}}
<x-table :headers="['Nome', 'Email']" :rows="$usuarios" />
<x-chart :data="$dados" title="Vendas" />

{{-- Ou crie seus próprios componentes --}}
php artisan design-system:make-component notification --styleguide

Comando de Instalação

Para publicar todos os arquivos necessários do pacote, execute:

php artisan design-system:install

Este comando irá:

✅ Publicar as views para resources/views/vendor/design-system
✅ Publicar os assets CSS para resources/css/vendor/design-system
✅ Publicar o arquivo de configuração para config/styleguide.php
✅ Publicar as imagens públicas para public/vendor/design-system/img

Comandos CLI Disponíveis

O pacote fornece comandos Artisan poderosos para acelerar o desenvolvimento de componentes.

🎨 Criar Novo Componente

Gere um novo componente Blade com template completo e documentação opcional:

# Considere usar https://ui.shadcn.com/ para componentes pré-construídos
php artisan design-system:make-component {nome} [--styleguide] [--force]

Opções:

{nome} - Nome do componente (será convertido para kebab-case)
--styleguide - Também criar a documentação do styleguide
--force - Sobrescrever componente existente

Exemplos práticos:

# Criar apenas o componente
php artisan design-system:make-component button

# Criar componente + documentação no styleguide
php artisan design-system:make-component card --styleguide

# Criar componente modal com documentação
php artisan design-system:make-component modal --styleguide

# Sobrescrever um componente existente
php artisan design-system:make-component alert --styleguide --force

O que este comando cria:

Arquivo do componente: resources/views/components/{nome}.blade.php
- Template com suporte a variantes (default, primary, secondary, success, danger)
- Template com suporte a tamanhos (sm, md, lg)
- Props configuráveis via @props
- Classes CSS dinâmicas com match()
Documentação do styleguide (se usar --styleguide): resources/views/styleguide/components/{nome}.blade.php
- Página completa com preview do componente
- Exemplos de todas as variantes
- Exemplos de todos os tamanhos
- Seção de uso com código
- Tabela de props documentada

Após criar um componente, lembre-se de registrá-lo no DesignSystemServiceProvider:

// src/DesignSystemServiceProvider.php
Blade::component('design-system::components.button', 'button');

📚 Criar Documentação do Styleguide

Gere documentação do styleguide para componentes ou páginas já existentes:

php artisan design-system:make-styleguide {componente} [--type=component|page] [--force]

Opções:

{componente} - Nome do componente/página
--type - Tipo de documentação: component (padrão) ou page
--force - Sobrescrever documentação existente

Exemplos práticos:

# Criar documentação para um componente existente
php artisan design-system:make-styleguide alert --type=component

# Criar documentação de página (exemplo completo)
php artisan design-system:make-styleguide dashboard --type=page

# Criar documentação para página de clientes
php artisan design-system:make-styleguide clientes --type=page

# Sobrescrever documentação existente
php artisan design-system:make-styleguide card --type=component --force

O que este comando cria:

Para componentes (--type=component): resources/views/styleguide/components/{nome}.blade.php
- Preview interativo do componente
- Galeria de variantes
- Exemplos de código
- Documentação de props
Para páginas (--type=page): resources/views/styleguide/pages/{nome}.blade.php
- Template de página completa
- Exemplos de layout
- Composição de componentes

Passo a Passo: Criando Seu Primeiro Componente

Vamos criar um componente de badge do zero:

1️⃣ Gerar o Componente

php artisan design-system:make-component badge --styleguide

Saída esperada:

Component 'badge' created successfully!
Location: resources/views/components/badge.blade.php
Styleguide view created successfully!
Location: resources/views/styleguide/components/badge.blade.php
Access at: /styleguide/components/badge

Don't forget to register the component in DesignSystemServiceProvider:
Blade::component('design-system::components.badge', 'badge');

2️⃣ Registrar o Componente

Edite src/DesignSystemServiceProvider.php e adicione:

// Na seção de registro de componentes (por volta da linha 51)
Blade::component('design-system::components.badge', 'badge');

3️⃣ Personalizar o Componente (Opcional)

Abra resources/views/components/badge.blade.php e customize conforme necessário:

@props([
    'variant' => 'default',
    'size' => 'md',
])

@php
    $classes = match($variant) {
        'primary' => 'bg-primary text-primary-foreground',
        'success' => 'bg-success text-success-foreground',
        'warning' => 'bg-warning text-warning-foreground',
        'danger' => 'bg-destructive text-destructive-foreground',
        default => 'bg-muted text-muted-foreground',
    };

    $sizes = match($size) {
        'sm' => 'text-xs px-2 py-0.5',
        'lg' => 'text-base px-4 py-2',
        default => 'text-sm px-3 py-1',
    };
@endphp

<span {{ $attributes->merge(['class' => "inline-flex items-center rounded-full font-medium {$classes} {$sizes}"]) }}>
    {{ $slot }}
</span>

4️⃣ Visualizar no Styleguide

Acesse: http://seu-app.test/styleguide/components/badge

5️⃣ Usar o Componente

{{-- Em qualquer view Blade --}}
<x-badge variant="success">Ativo</x-badge>
<x-badge variant="danger" size="sm">Erro</x-badge>
<x-badge variant="primary" size="lg">Novo</x-badge>

Configuração

O pacote funciona imediatamente com padrões sensatos. Se você precisar personalizar a configuração, publique o arquivo de configuração:

php artisan vendor:publish --tag=design-system-config

Isso criará um arquivo config/styleguide.php onde você pode configurar a navegação do guia de estilo e metadados da página.

Publicando Assets

Publicar Views

Para personalizar as views dos componentes, publique-as em sua aplicação:

php artisan vendor:publish --tag=design-system-views

As views serão publicadas em resources/views/vendor/design-system/.

Publicar Assets CSS

Para personalizar o estilo CSS:

php artisan vendor:publish --tag=design-system-assets

Os arquivos CSS serão publicados em resources/css/vendor/design-system/.

Publicar Assets Públicos

Para publicar imagens e outros assets públicos:

php artisan vendor:publish --tag=design-system-public

Os assets serão publicados em public/vendor/design-system/.

Uso

Componente de Tabela

<x-table 
    :headers="['Nome', 'Email', 'Função']"
    :rows="[
        ['Uendel Silveira', 'uendelsilveira@exemplo.com', 'Admin'],
        ['Maria Santos', 'maria@exemplo.com', 'Usuário'],
    ]"
    :striped="true"
/>

Props:

headers (array) - Cabeçalhos das colunas
rows (array) - Linhas de dados da tabela
striped (bool) - Habilitar linhas listradas (padrão: false)

Componente de Select Nativo

<x-native-select 
    :options="[
        '1' => 'Opção 1',
        '2' => 'Opção 2',
        '3' => 'Opção 3',
    ]"
    label="Selecione uma opção"
    placeholder="Escolha..."
    hint="Escolha a melhor opção"
    name="selection"
    id="my-select"
/>

Props:

options (array) - Opções do select como pares valor => label
label (string|null) - Texto do label
placeholder (string|null) - Texto da opção de placeholder
hint (string|null) - Texto de ajuda abaixo do select
error (string|null) - Mensagem de erro (também altera o estilo)
disabled (bool) - Desabilitar o select (padrão: false)

Componente de Gráfico

<x-chart 
    :data="[
        ['label' => 'Janeiro', 'value' => 100],
        ['label' => 'Fevereiro', 'value' => 150],
        ['label' => 'Março', 'value' => 200],
    ]"
    type="bar"
    height="h-64"
    :showLegend="true"
/>

Props:

data (array) - Dados do gráfico com chaves 'label' e 'value'
type (string) - Tipo de gráfico (atualmente apenas 'bar' é suportado) (padrão: 'bar')
height (string) - Classe de altura do Tailwind (padrão: 'h-64')
showLegend (bool) - Exibir a legenda (padrão: true)

🎨 Tokens de Design

Paleta de Cores

O Design System inclui uma paleta de cores completa:

Cores Primárias

bg-primary / text-primary - Cor principal da marca
bg-primary-foreground / text-primary-foreground - Texto sobre primária

Cores Semânticas

bg-success / text-success - Verde (sucesso)
bg-info / text-info - Azul (informação)
bg-warning / text-warning - Amarelo (aviso)
bg-destructive / text-destructive - Vermelho (erro/destrutivo)

Variantes Claras

bg-orange-light - Fundo laranja claro
bg-green-light - Fundo verde claro
bg-blue-light - Fundo azul claro

Cores de Superfície

bg-background - Fundo da página
bg-card - Fundo de cards
bg-sidebar - Fundo da sidebar
bg-muted - Elementos discretos
bg-accent - Estados de hover

Tipografia

Fonte: Kodchasan (Google Fonts)

{{-- Títulos --}}
<h1 class="text-4xl font-bold">Título Principal</h1>
<h2 class="text-3xl font-semibold">Título de Seção</h2>
<h3 class="text-2xl font-semibold">Subtítulo</h3>
<h4 class="text-xl font-medium">Título de Card</h4>

{{-- Texto --}}
<p class="text-base">Texto do corpo</p>
<p class="text-sm text-muted-foreground">Texto secundário</p>

{{-- Destaque --}}
<span class="text-2xl font-bold text-primary">R$ 110,00</span>

Border Radius

Padrão: rounded-xl

Opções: rounded-sm, rounded-md, rounded-lg, rounded-xl, rounded-2xl, rounded-full

Guia de Estilo

O pacote inclui uma interface de guia de estilo integrada e interativa, acessível automaticamente após a instalação.

🌐 Acessando o Styleguide

Visite: http://seu-app.test/styleguide

📍 Rotas Disponíveis

/styleguide - Página principal com tokens de design (cores, tipografia, bordas)
/styleguide/components/{componente} - Documentação de componentes individuais
/styleguide/pages/{pagina} - Exemplos de páginas completas

Exemplos:

http://seu-app.test/styleguide - Tokens de design
http://seu-app.test/styleguide/components/table - Componente de tabela
http://seu-app.test/styleguide/components/chart - Componente de gráfico
http://seu-app.test/styleguide/pages/clients - Página de exemplo

🎨 O que você encontra no Styleguide

Design Tokens
- Paleta de cores completa (primárias, semânticas, superfícies)
- Sistema de tipografia (Kodchasan)
- Escalas de border-radius
- Preview de componentes básicos (botões, cards, badges, alerts)
Documentação de Componentes
- Preview interativo
- Exemplos de variantes (default, primary, secondary, success, danger)
- Exemplos de tamanhos (sm, md, lg)
- Código de uso
- Tabela de props
Páginas de Exemplo
- Composições completas de componentes
- Templates prontos para uso
- Exemplos de layouts

🔒 Desabilitar Styleguide em Produção

Para desabilitar as rotas do styleguide em produção, edite config/styleguide.php:

return [
    'routes' => [
        'enabled' => env('STYLEGUIDE_ENABLED', app()->environment('local')),
    ],
];

E no seu arquivo .env:

# Desenvolvimento
STYLEGUIDE_ENABLED=true

# Produção
STYLEGUIDE_ENABLED=false

Testes

Execute os testes do pacote com PHPUnit:

php artisan test

Ou execute suítes de teste específicas:

php artisan test --filter=ComponentsTest
php artisan test --filter=ServiceProviderTest

Estrutura do Pacote

laravel-design-system/
├── src/
│   └── DesignSystemServiceProvider.php
├── resources/
│   ├── views/
│   │   ├── components/
│   │   │   ├── table.blade.php
│   │   │   ├── native-select.blade.php
│   │   │   └── chart.blade.php
│   │   ├── layouts/
│   │   └── styleguide/
│   └── css/
│       └── app.css
├── routes/
│   └── styleguide.php
├── config/
│   └── styleguide.php
├── tests/
│   └── Feature/
│       ├── ComponentsTest.php
│       └── ServiceProviderTest.php
└── composer.json

🔧 Personalização Avançada

Workflow Completo de Personalização

1. Criar um Componente Customizado

# Gerar o componente base
php artisan design-system:make-component avatar --styleguide

2. Customizar o Template

Edite resources/views/components/avatar.blade.php:

@props([
    'size' => 'md',
    'src' => null,
    'name' => '',
    'status' => null,
])

@php
    $sizes = match($size) {
        'xs' => 'w-6 h-6 text-xs',
        'sm' => 'w-8 h-8 text-sm',
        'lg' => 'w-16 h-16 text-xl',
        'xl' => 'w-24 h-24 text-2xl',
        default => 'w-10 h-10 text-base',
    };

    $initials = collect(explode(' ', $name))
        ->map(fn($word) => mb_substr($word, 0, 1))
        ->take(2)
        ->join('');
@endphp

<div class="relative inline-flex">
    <div {{ $attributes->merge(['class' => "rounded-full bg-primary text-primary-foreground flex items-center justify-center font-semibold {$sizes}"]) }}>
        @if($src)
            <img src="{{ $src }}" alt="{{ $name }}" class="rounded-full w-full h-full object-cover" />
        @else
            {{ $initials }}
        @endif
    </div>

    @if($status)
        <span class="absolute bottom-0 right-0 w-3 h-3 rounded-full border-2 border-white
            {{ $status === 'online' ? 'bg-success' : '' }}
            {{ $status === 'away' ? 'bg-warning' : '' }}
            {{ $status === 'offline' ? 'bg-muted' : '' }}">
        </span>
    @endif
</div>

3. Registrar o Componente

Em src/DesignSystemServiceProvider.php:

Blade::component('design-system::components.avatar', 'avatar');

4. Atualizar a Documentação

Edite resources/views/styleguide/components/avatar.blade.php com exemplos de uso.

5. Usar o Componente

<x-avatar name="Uendel Silveira" size="lg" status="online" />
<x-avatar src="/images/user.jpg" name="Maria Santos" size="md" />

Customizar Cores do Design System

1. Publique os Assets CSS

php artisan vendor:publish --tag=design-system-assets

2. Edite as Variáveis CSS

Abra resources/css/vendor/design-system/app.css e customize as cores:

:root {
    /* Cores Primárias Customizadas */
    --primary: 220 90% 56%;
    --primary-foreground: 0 0% 100%;

    /* Cores Semânticas Customizadas */
    --success: 142 71% 45%;
    --warning: 38 92% 50%;
    --destructive: 0 84% 60%;
}

Adicionar Novas Páginas ao Styleguide

1. Criar a Página

php artisan design-system:make-styleguide produtos --type=page

2. Configurar a Rota

Edite config/styleguide.php:

return [
    'pages' => [
        'produtos' => [
            'title' => 'Catálogo de Produtos',
            'description' => 'Página de exemplo do catálogo',
        ],
    ],
];

3. Acessar a Página

http://seu-app.test/styleguide/pages/produtos

💡 Exemplos Práticos

Criar um Sistema de Notificações

# 1. Criar o componente de notificação
php artisan design-system:make-component notification --styleguide

# 2. Criar a página de exemplo
php artisan design-system:make-styleguide notifications --type=page

Customizar o componente em resources/views/components/notification.blade.php:

@props([
    'type' => 'info',
    'title' => '',
    'dismissible' => true,
])

@php
    $types = match($type) {
        'success' => 'bg-green-light border-success text-foreground',
        'warning' => 'bg-warning/10 border-warning text-foreground',
        'error' => 'bg-destructive/10 border-destructive text-foreground',
        default => 'bg-blue-light border-info text-foreground',
    };

    $icons = match($type) {
        'success' => '✓',
        'warning' => '⚠',
        'error' => '✗',
        default => 'ℹ',
    };
@endphp

<div {{ $attributes->merge(['class' => "rounded-xl border p-4 flex items-start gap-3 {$types}"]) }}>
    <span class="text-xl">{{ $icons }}</span>
    <div class="flex-1">
        @if($title)
            <p class="font-semibold mb-1">{{ $title }}</p>
        @endif
        {{ $slot }}
    </div>
    @if($dismissible)
        <button class="text-muted-foreground hover:text-foreground">×</button>
    @endif
</div>

Uso:

<x-notification type="success" title="Sucesso!">
    Sua alteração foi salva com sucesso.
</x-notification>

<x-notification type="error" title="Erro!" :dismissible="false">
    Ocorreu um erro ao processar sua solicitação.
</x-notification>

Criar um Componente de Badge de Status

php artisan design-system:make-component status-badge --styleguide

@props([
    'status' => 'pending',
])

@php
    $config = match($status) {
        'active', 'approved', 'completed' => [
            'class' => 'bg-success text-success-foreground',
            'label' => 'Ativo',
        ],
        'inactive', 'pending' => [
            'class' => 'bg-warning text-warning-foreground',
            'label' => 'Pendente',
        ],
        'cancelled', 'rejected' => [
            'class' => 'bg-destructive text-destructive-foreground',
            'label' => 'Cancelado',
        ],
        default => [
            'class' => 'bg-muted text-muted-foreground',
            'label' => ucfirst($status),
        ],
    };
@endphp

<span {{ $attributes->merge(['class' => "inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold {$config['class']}"]) }}>
    {{ $slot->isEmpty() ? $config['label'] : $slot }}
</span>

Uso:

<x-status-badge status="active" />
<x-status-badge status="pending">Em Análise</x-status-badge>
<x-status-badge status="cancelled" />

🔍 Solução de Problemas

Componente não é reconhecido

Problema: View [components.meu-componente] not found

Solução:

Verifique se o componente foi registrado no DesignSystemServiceProvider:

Blade::component('design-system::components.meu-componente', 'meu-componente');

Limpe o cache de views:

php artisan view:clear
php artisan config:clear

Styleguide não carrega

Problema: Rota /styleguide retorna 404

Solução:

Verifique se o service provider está registrado em bootstrap/providers.php:
```
UendelSilveira\DesignSystem\DesignSystemServiceProvider::class,
```

Limpe o cache de rotas:

php artisan route:clear
php artisan optimize:clear

Liste as rotas para verificar:

php artisan route:list --path=styleguide

Classes CSS não aplicam

Problema: Componentes aparecem sem estilo

Solução:

Certifique-se de que o Tailwind CSS está configurado

Adicione o caminho dos componentes ao tailwind.config.js:

content: [
  './resources/views/**/*.blade.php',
  './resources/views/vendor/design-system/**/*.blade.php',
]

Recompile os assets:
```
npm run build
```

Views publicadas não atualizam

Problema: Mudanças nas views não aparecem

Solução:

Limpe o cache de views:
```
php artisan view:clear
```
Se estiver usando Laravel Debugbar ou similar, desabilite temporariamente
Verifique se está editando o arquivo correto (pacote vs publicado)

Namespace 'design-system' não encontrado

Problema: InvalidArgumentException: No hint path defined for [design-system]

Solução:

O service provider não está carregado. Adicione em bootstrap/providers.php:

return [
    App\Providers\AppServiceProvider::class,
    UendelSilveira\DesignSystem\DesignSystemServiceProvider::class,
];

Execute:

php artisan package:discover
php artisan config:clear

📋 Lista de Verificação para Deploy

Antes de fazer deploy em produção:

Desabilitar styleguide em produção (STYLEGUIDE_ENABLED=false)
Compilar assets para produção (npm run build)
Otimizar autoloader (composer install --optimize-autoloader --no-dev)
Cachear configurações (php artisan config:cache)
Cachear rotas (php artisan route:cache)
Cachear views (php artisan view:cache)
Verificar se todas as imagens públicas foram publicadas

🤝 Contribuindo

Contribuições são bem-vindas! Siga estes passos:

Fork o projeto
Crie uma branch para sua feature (git checkout -b feature/MinhaFeature)
Commit suas mudanças (git commit -m 'Adiciona MinhaFeature')
Push para a branch (git push origin feature/MinhaFeature)
Abra um Pull Request

Diretrizes de Contribuição

Mantenha o código limpo e bem documentado
Adicione testes para novas funcionalidades
Siga os padrões PSR-12
Atualize a documentação quando necessário

💬 Suporte

Issues: GitHub Issues
Discussões: GitHub Discussions
Email: uendelsilveira@gmail.com

📝 Comandos Rápidos (Cheat Sheet)

# Instalação
composer require uendelsilveira/laravel-design-system
php artisan design-system:install

# Criar componentes
php artisan design-system:make-component {nome} --styleguide
php artisan design-system:make-styleguide {nome} --type=component

# Publicar assets
php artisan vendor:publish --tag=design-system-views
php artisan vendor:publish --tag=design-system-assets
php artisan vendor:publish --tag=design-system-config
php artisan vendor:publish --tag=design-system-public

# Limpar cache
php artisan view:clear
php artisan config:clear
php artisan route:clear

# Acessar styleguide
http://seu-app.test/styleguide

🌟 Recursos Úteis

Styleguide Local: /styleguide
Tailwind CSS: Documentação
Alpine.js: Documentação
Laravel Blade: Documentação

Licença

A Licença MIT (MIT). Veja LICENSE para detalhes.

Autor

Uendel Silveira

uendelsilveira / laravel-design-system

Maintainers

Details

README

Laravel Design System

📖 Índice

Funcionalidades

Componentes

🏗️ Estrutura do Template de Componente

🎯 Variantes Disponíveis

📏 Tamanhos Disponíveis

Componente de Tabela

Componente de Select Nativo

Componente de Gráfico

Instalação

Requisitos

Instalação via Composer

⚡ Quick Start

1. Instalar o pacote

2. Acessar o Styleguide

3. Usar os componentes

Comando de Instalação

Comandos CLI Disponíveis

🎨 Criar Novo Componente

📚 Criar Documentação do Styleguide

Passo a Passo: Criando Seu Primeiro Componente

1️⃣ Gerar o Componente

2️⃣ Registrar o Componente

3️⃣ Personalizar o Componente (Opcional)

4️⃣ Visualizar no Styleguide

5️⃣ Usar o Componente

Configuração

Publicando Assets

Publicar Views

Publicar Assets CSS

Publicar Assets Públicos

Uso

Componente de Tabela

Componente de Select Nativo

Componente de Gráfico

🎨 Tokens de Design

Paleta de Cores

Cores Primárias

Cores Semânticas

Variantes Claras

Cores de Superfície

Tipografia

Border Radius

Guia de Estilo

🌐 Acessando o Styleguide

📍 Rotas Disponíveis

🎨 O que você encontra no Styleguide

🔒 Desabilitar Styleguide em Produção

Testes

Estrutura do Pacote

🔧 Personalização Avançada

Workflow Completo de Personalização

1. Criar um Componente Customizado

2. Customizar o Template

3. Registrar o Componente

4. Atualizar a Documentação

5. Usar o Componente

Customizar Cores do Design System

1. Publique os Assets CSS

2. Edite as Variáveis CSS

Adicionar Novas Páginas ao Styleguide

1. Criar a Página

2. Configurar a Rota

3. Acessar a Página

💡 Exemplos Práticos

Criar um Sistema de Notificações

Criar um Componente de Badge de Status

🔍 Solução de Problemas

Componente não é reconhecido

Styleguide não carrega

Classes CSS não aplicam

Views publicadas não atualizam

Namespace 'design-system' não encontrado

📋 Lista de Verificação para Deploy

🤝 Contribuindo