WMoney UI Kit

Um kit de componentes React reutilizáveis para aplicações web, construído com TypeScript, Tailwind CSS e Radix UI.

Storybook

https://wmoney-ui-7kqk0b1h7-wealth-money.vercel.app

Instalação

npm install @wmoney/ui-kit

Uso Básico

Importe os componentes que você precisa:

import { Button, Card, ThemeTokensProvider } from '@wmoney/ui-kit';
import '@wmoney/ui-kit/index.css';

function App() {
  return (
    <ThemeTokensProvider>
      <Card>
        <Button>Olá Mundo</Button>
      </Card>
    </ThemeTokensProvider>
  );
}

Tipagem dos Tokens

Para ter acesso à tipagem TypeScript dos tokens de cores:

import { ThemeTokensProvider, type ThemeTokens } from '@wmoney/ui-kit';

const customTokens: ThemeTokens = {
  light: {
    primary: '#ff0000',
    secondary: '#00ff00',
    background: '#ffffff',
    foreground: '#000000',
    // ... outros tokens com autocomplete e validação de tipos
  },
  dark: {
    primary: '#ff0050',
    secondary: '#00f199',
    background: '#000000',
    foreground: '#ffffff',
    // ... outros tokens com autocomplete e validação de tipos
  }
};

function App() {
  return (
    <ThemeTokensProvider tokens={customTokens}>
      {/* Seus componentes */}
    </ThemeTokensProvider>
  );
}

Personalização de Temas

O UI Kit suporta personalização de tokens de cores através do ThemeTokensProvider. Você pode passar tokens alternativos para personalizar as cores:

import { ThemeTokensProvider } from '@wmoney/ui-kit';

const customTokens = {
  light: {
    primary: '#ff0000',
    secondary: '#00ff00',
    background: '#ffffff',
    foreground: '#000000',
    // ... outros tokens com autocomplete e validação de tipos
  },
  dark: {
    primary: '#ff0050',
    secondary: '#00f199',
    background: '#000000',
    foreground: '#ffffff',
    // ... outros tokens com autocomplete e validação de tipos
  }
};

function App() {
  return (
    <ThemeTokensProvider tokens={customTokens}>
      {/* Seus componentes aqui */}
    </ThemeTokensProvider>
  );
}

Os tokens disponíveis são separados por tema light e dark, e incluem: primary, secondary, accent, foreground, background, muted, border, destructive, success, warning, etc.

Componentes Disponíveis

• Badge
• Button
• Calendar
• Card
• Checkbox
• Command
• DatePicker
• Dialog
• DropdownMenu
• FileDropzone
• FormSection
• Input
• InputGroup
• InputOtp
• Label
• MultiSelect
• Pagination
• Paginator
• PasswordToggle
• Popover
• RadioGroup
• Select
• Separator
• Skeleton
• Sonner
• Spinner
• Switch
• Table
• Tabs
• Textarea
• Timer
• Tooltip
• ValidatePassword

Desenvolvimento

Para desenvolvimento local:

npm install
npm run dev  # Inicia o Storybook
npm run build  # Build do pacote
npm run build:storybook  # Build do Storybook

Publicação no NPM

Após fazer as alterações e testar:

npm run build
npm publish

Certifique-se de que você está logado no NPM (npm login) e que a versão no package.json foi atualizada.