@guilelab/components

Biblioteca de componentes minimalistas com bordas arredondadas, cores sóbrias e tipografia Montserrat/Roboto, com suporte para React (web) e React Native.

Componentes incluídos

• Title
• Card
• AppImage
• Button
• Carousel
• Grid
• Flex
• Input
• Select
• Tabs
• Icon (com lucide-react)
• ScrollContainer
• Drawer (qualquer canto da tela)
• ActionSheet
• Modal
• MessageAlert (mensagem/confirmação)

Instalação

npm install @guilelab/components

Instale também as peer dependencies no seu projeto:

npm install react react-dom react-native tailwindcss nativewind lucide-react react-markdown remark-gfm react-native-markdown-display

Configuração Tailwind 4.3.3 (web)

Para Tailwind v4, use CSS-first com @source e o tema da biblioteca.

No seu CSS global (ex.: src/index.css):

@import "tailwindcss";
@import "@guilelab/components/tailwind.theme.css";

@source "./src/**/*.{js,jsx,ts,tsx}";
@source "./node_modules/@guilelab/components/dist/**/*.{js,mjs,cjs}";

Se você ainda estiver em Tailwind v3, pode usar compatibilidade via tailwind.preset.

Importe as fontes na web:

@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&family=Roboto:wght@400;500;700&display=swap");

Responsividade

Os componentes web aceitam responsive por breakpoint:

<Card responsive={{ sm: "p-4", md: "p-6", lg: "p-8" }} />

Grid aceita colunas por breakpoint:

<Grid cols={1} colsMd={2} colsLg={3} />

Flex aceita direção por breakpoint:

<Flex direction="column" directionMd="row" />

Escala por largura de tela (base 414)

A lógica de escala segue:

const internalPixelRatioPercent = (1 / 414) * windowWidth;
const sizePx = internalPixelRatioPercent * valorEmPx;

Helpers públicos:

import { buildSizeScale, useScreenScale } from "@guilelab/components";
// ou: import { buildSizeScale, useScreenScale } from "@guilelab/components/native";

const Size = buildSizeScale(390); // px1...px200
const { scalePx } = useScreenScale();
const titleSize = scalePx(24);

Title, Card, Button e Input suportam escala, mas ela fica desativada por padrão. Ative por tema:

import { ThemeProvider } from "@guilelab/components";

<ThemeProvider theme={{ enableScale: true }}>
  <App />
</ThemeProvider>

Também é possível configurar globalmente:

import { configureTheme } from "@guilelab/components";

configureTheme({ enableScale: true });

Para forçar por componente, use scaled={true} ou scaled={false}.

Estilo dos componentes

As linhas de borda foram removidas do estilo padrão dos componentes de superfície e formulário.

Agora você pode controlar visual por props:

• withBorder: ativa borda quando necessário.
• shadow: none | sm | md | lg | xl.
• marginClassName: classes utilitárias para margem.
• paddingClassName: classes utilitárias para padding (componentes com painel/container).
• spacingClassName: classes utilitárias para espaçamento vertical/horizontal do bloco.

Exemplo:

<Card withBorder shadow="md" marginClassName="mt-4" paddingClassName="p-6">
  Conteúdo
</Card>

<Input shadow="sm" spacingClassName="space-y-3" />

Uso React (web)

import {
  ActionSheet,
  Button,
  Card,
  Drawer,
  Grid,
  Input,
  MessageAlert,
  Modal,
  Select,
  Title
} from "@guilelab/components";

export function Example() {
  return (
    <section className="bg-surface-50 p-6 font-sans">
      <Title level="h2">Meu perfil</Title>
      <Grid cols={1} colsMd={2} className="mt-5">
        <Card title="Dados" description="Atualize suas informações.">
          <Input label="Nome" placeholder="Seu nome" />
          <Input label="Email" placeholder="[email protected]" className="mt-3" />
          <Select
            label="Perfil"
            options={[
              { label: "Administrador", value: "admin" },
              { label: "Leitor", value: "reader" }
            ]}
          />
          <Button className="mt-4">Salvar</Button>
        </Card>
      </Grid>
    </section>
  );
}

Uso React Native

import { Button, Card, Flex, Input, Title } from "@guilelab/components/native";
import { SafeAreaView } from "react-native";

export function ProfileScreen() {
  return (
    <SafeAreaView className="flex-1 bg-surface-50 p-5">
      <Title level="h2">Meu perfil</Title>
      <Card title="Dados" description="Atualize suas informações." className="mt-4">
        <Flex direction="column">
          <Input label="Nome" placeholder="Seu nome" />
          <Input label="Email" placeholder="[email protected]" />
          <Button>Salvar</Button>
        </Flex>
      </Card>
    </SafeAreaView>
  );
}

Overlays e Alertas

import { ActionSheet, Drawer, MessageAlert, Modal } from "@guilelab/components";

<Drawer open={isOpen} onClose={() => setOpen(false)} position="left" sizeClassName="w-[28rem] h-full" />

<ActionSheet
  open={sheetOpen}
  onClose={() => setSheetOpen(false)}
  title="Ações"
  actions={[{ label: "Editar" }, { label: "Remover", danger: true }]}
/>

<Modal open={modalOpen} onClose={() => setModalOpen(false)} size="lg" fullScreen={false} />

<MessageAlert
  open={alertOpen}
  title="Confirmar exclusão"
  message="Deseja realmente excluir este item?"
  mode="confirm"
  variant="warning"
  onClose={() => setAlertOpen(false)}
/>

No React Native, use a entrada @guilelab/components/native com props equivalentes.

Desenvolvimento

npm run dev

Testes automatizados

npm test

Publicação no npm

1. Atualize a versão: npm version patch|minor|major.
2. Valide localmente:

npm run lint
npm test
npm run build

3. Publique:

npm publish --access public