Ant Wrapper Vite

Libreria React para encapsular Ant Design con tema y componentes UI reutilizables.

Requisitos

• Node >= 20.19.0
• npm

Inicio rápido

nvm install node
nvm use
npm install
npm run dev

Storybook

nvm use
npm run storybook

Build estático:

nvm use
npm run build-storybook

Tailwind CSS

• Tailwind está habilitado globalmente en src/index.css.
• Storybook también carga esos estilos desde .storybook/preview.ts.

Build como libreria

npm run build:lib

Genera en dist/:

• index.js (ESM)
• index.cjs (CommonJS)
• index.d.ts (tipos)

Publicar en npm

1. Verifica nombre disponible (si ant-wrapper-vite ya existe, cambia name en package.json):

npm view ant-wrapper-vite

1. Inicia sesion en npm:

npm login

1. Revisa el paquete a publicar:

npm run pack:check

1. Publica:

npm publish --access public

Notas:

• prepublishOnly ejecuta build:lib automaticamente.
• Solo se publica dist/ (definido en files).

API pública

• AntWrapperProvider
• UiButton
• UiInput
• antdTheme

Todos se exportan desde src/index.ts.

Instalar y usar desde otro proyecto

Instalar:

npm install ant-wrapper-vite antd @ant-design/icons react react-dom

Consumir boton:

import { AntWrapperProvider, UiButton } from 'ant-wrapper-vite'

export function Example() {
  return (
    <AntWrapperProvider>
      <UiButton type="primary" color="primary" variant="solid">
        Guardar
      </UiButton>
    </AntWrapperProvider>
  )
}

Uso directo sin provider (si no necesitas tema centralizado):

import { UiButton } from 'ant-wrapper-vite'

export function Example() {
  return <UiButton type="default">Cancelar</UiButton>
}

Estructura del wrapper

• src/components/ui: componentes envueltos (UiButton, UiInput, etc.)
• src/theme/antdTheme.ts: tokens y overrides globales de AntD
• src/main.tsx: ConfigProvider central para aplicar el tema

Objetivo

Extender AntD sin consumir antd directo desde las aplicaciones consumidoras, centralizando variantes, defaults y estilos compartidos en este repositorio.