Pol-UI

Treball de Final de Grau - Summa Cum Laude, 10/10. Guardonat amb distinció especial per la UAB.

Pol-UI és una llibreria de components React que vaig construir com el meu projecte final de carrera. El que va començar com un requisit de la tesi es va convertir en una llibreria de grau de producció amb més de 150 components, un lloc de documentació complet, integració amb Storybook i més de 50.000 descàrregues a NPM.

Per què la vaig crear

Durant el meu tercer any a la universitat, ja treballava a jornada completa a Mesalvo construint sistemes de disseny. Veia els mateixos patrons repetits en cada projecte (botons, modals, formularis, tooltips), tots construïts des de zero cada vegada.

Volia construir una cosa reusable, ben documentada i realment agradable d’utilitzar. No un altre abocador de components: una llibreria coherent amb una API consistent i suport real d’accessibilitat. Vaig escriure sobre tot el procés (incloent-hi els errors) a Què vaig aprendre construint una llibreria d’UI des de zero.

Què hi ha dins

Pol-UI inclou:

• 150+ components - des de primitius (Button, Input, Badge) fins a patrons complexos (DataTable, CommandMenu, Combobox)
• Suport complet de TypeScript - totes les props tipades, sense escapatòries amb any
• Primitius de Radix UI - accessibles per defecte, navegables amb teclat, compatibles amb lectors de pantalla
• Tailwind CSS - totalment personalitzable mitjançant tokens, sense trucs per sobreescriure estils
• Storybook - cada component documentat amb exemples en viu
• Vitest + Testing Library - >80% de cobertura de tests

npm install pol-ui

import { Button, Input, Modal } from 'pol-ui';

export function LoginForm() {
  return (
    <form>
      <Input label="Email" type="email" />
      <Input label="Contrasenya" type="password" />
      <Button intent="primary" type="submit">Inicia sessió</Button>
    </form>
  );
}

Decisions tècniques

Per què Radix UI? L’accessibilitat és difícil de fer bé. Radix gestiona el focus, els atributs ARIA i les interaccions del teclat perquè jo no ho hagi de fer.

Per què Tailwind? Els design tokens mitjançant variables CSS + les utilitats de Tailwind permeten als usuaris personalitzar la llibreria sense lluitar contra la especificitat de CSS.

Per què Vitest en lloc de Jest? Més ràpid. Suport natiu per a ESM. Mateixa API. No cal configuració amb Vite.

El lloc de documentació

La documentació a ui.polgubau.com cobreix cada component amb:

• Demos interactives en viu
• Totes les variacions de props amb tipus de TypeScript
• Notes d’accessibilitat
• Exemples de codi per copiar i enganxar

La documentació va trigar gairebé tant com la pròpia llibreria. Crec que és el correcte.

Impacte

• 50.000+ descàrregues a NPM des del llançament
• Utilitzada en múltiples projectes freelance i treballs de clients a Doscientos
• Referenciada en el meu treball de tesi, que va rebre una distinció especial de la UAB

El codi font complet és a GitHub. Les contribucions són benvingudes.

Els patrons de composició de components que vaig desenvolupar per a aquesta llibreria s’expliquen detalladament a React Component Composition Patterns.