Guia

Next e React

Uso em App Router, client components e providers.

React puro

Em Vite, CRA ou outro bundler React, use os componentes diretamente do entrypoint público. O pacote não importa next em runtime, então o app consumidor não precisa trazer Next como dependência.

import "cosmemilton-ui/styles.css";
import { CmAlert, CmThemeProvider } from "cosmemilton-ui";

export function App() {
  return (
    <CmThemeProvider>
      <CmAlert title="Tudo certo" tone="success" />
    </CmThemeProvider>
  );
}

Client components

Componentes interativos devem ser usados em arquivos com 'use client' quando a página ou exemplo tiver estado local.

"use client";

import { useState } from "react";
import { CmSelect } from "cosmemilton-ui";

export function StatusSelect() {
  const [value, setValue] = useState("active");
  return <CmSelect value={value} onChange={setValue} options={[]} />;
}

Links em React Router ou Next

CmNavigationMenu e CmBreadcrumb renderizam links nativos por padrão. Para navegação client-side, passe o componente de link do roteador via linkComponent e controle o item ativo com activeHref quando necessário.

import Link from "next/link";
import { usePathname } from "next/navigation";
import { CmNavigationMenu } from "cosmemilton-ui";

export function MainNav() {
  const pathname = usePathname();

  return (
    <CmNavigationMenu
      activeHref={pathname}
      linkComponent={Link}
      items={[
        { href: "/", label: "Início" },
        { href: "/clientes", label: "Clientes" }
      ]}
    />
  );
}

Validação

Use build, typecheck e smoke tests para confirmar que o consumo real continua funcionando.

npm run typecheck
npm run build
npm run test:e2e