Una librería de componentes Svelte 4 construida con arquitectura ITCSS, tokens de diseño SCSS y TypeScript.
npm install ui-lcdl-libUna librería de componentes Svelte 4 construida con arquitectura ITCSS, tokens de diseño SCSS y TypeScript.
``bash`
npm install ui-lcdl-lib
- 🎨 Sistema de Diseño: Construido con arquitectura ITCSS y tokens de diseño SCSS
- 🔧 TypeScript: Seguridad de tipos completa con definiciones exportadas
- ♿ Accesible: Componentes compatibles con WCAG y HTML semántico
- 📦 Tree-shakeable: Importa solo lo que necesitas
- 🎭 Storybook: Documentación interactiva de componentes
- ⚡ Compatible con SSR: Renderizado del lado del servidor
`svelte
`
`text`
src/
lib/
styles/
settings/ # Tokens de diseño
tools/ # Mixins y funciones SCSS
generic/ # Reset y normalize
elements/ # Estilos de elementos base
objects/ # Patrones de layout
components/ # Estilos de componentes
utilities/ # Clases de utilidad
components/
Primitives/ # Primitivas UI básicas
UI/ # Componentes UI compuestos
Sections/ # Componentes de sección
types/
types.ts # Definiciones TypeScript
- Node.js 16+
- npm o pnpm
`bashInstalar dependencias
npm install
Principios de Arquitectura
$3
- Priorizar CSS para layout y estados
- JavaScript mínimo para comportamiento y accesibilidad
- Usar propiedades personalizadas CSS para tematización
$3
- Todos los estilos visuales derivan de tokens de diseño en
- SCSS con alcance dentro de archivos de componentes
- Tokens globales solo en $3
- Todos los componentes exportan definiciones de tipos
- Props, eventos y slots completamente tipados
- API pública estable
$3
- HTML semántico primero
- ARIA mínima cuando sea necesario
- Comportamiento nativo del navegador preferido sobre JavaScript
Guía de Componentes
$3
Cada componente incluye:
-
- Implementación del componente
- types.ts - Definiciones TypeScript
- Component.stories.ts - Historias de Storybook
- Component.test.ts - Tests unitarios (opcional)
- index.ts - Exportaciones públicas$3
Clases CSS:
-
.c- - Componentes
- .l- - Layouts
- .u- - UtilidadesVariables CSS:
-
--component-* - Con alcance de componente
- --color-, --space-, etc. - Tokens globales$3
`svelte
{id}
data-variant={variant}
data-disabled={disabled || undefined}
role="group"
on:click={(e) => dispatch('click', e)}
>
`
`ts
export type ComponentVariant = 'solid' | 'ghost';
export interface ComponentProps {
id?: string;
disabled?: boolean;
variant?: ComponentVariant;
}
export type ComponentEvents = {
click: MouseEvent;
};
`
`ts`
export { default as Component } from './Component.svelte';
export * from './types';
Los tests usan Vitest y Testing Library:
`ts
import { render, fireEvent } from '@testing-library/svelte';
import { describe, it, expect } from 'vitest';
import Component from './Component.svelte';
describe('Component', () => {
it('renderiza correctamente', () => {
const { container } = render(Component);
expect(container.querySelector('.c-component')).toBeTruthy();
});
});
`
Las historias siguen este patrón:
`ts
import type { Meta, StoryObj } from '@storybook/svelte';
import Component from './Component.svelte';
const meta: Meta
title: 'Primitives/Component',
component: Component,
tags: ['autodocs'],
args: {
disabled: false,
variant: 'solid'
},
argTypes: {
variant: {
control: { type: 'radio' },
options: ['solid', 'ghost']
}
}
};
export default meta;
export const Default: StoryObj = { args: {} };
export const Disabled: StoryObj = { args: { disabled: true } };
`
El proceso de compilación genera:
- Componentes .svelte compilados.d.ts
- Declaraciones TypeScript
- empaquetado
`bash`
npm run build
- Usar :focus-visible, :focus-within, :has() en lugar de JavaScriptaria-live
- Transiciones CSS en lugar de animaciones JavaScript
- Evitar duplicar estado con clases y atributos
- No usar para cambios obvios
- Aprovechar el soporte nativo de teclado
`svelte
`
Todos los componentes usan tokens de diseño globales:
- --color-text - Colores de texto--space-*
- - Escala de espaciado--radius-*
- - Radio de borde--shadow-*
- - Sombras de caja--font-*` - Escala tipográfica
-
No se permiten números mágicos - todos los valores deben referenciar tokens.
Para problemas y preguntas, por favor usa la página de GitHub Issues.