UI Component Library for React 18+ with TypeScript
Una biblioteca de componentes de interfaz de usuario moderna, accesible y altamente personalizable para aplicaciones React.
- 🚀 Construido con React 18+ y TypeScript
- 🎨 Diseño consistente con soporte para temas personalizados
- ♿️ Totalmente accesible (WCAG 2.1)
- 📱 Diseño responsivo
- 🧪 Cobertura de pruebas completa
- 📚 Documentación interactiva con Storybook
- 🔧 Fácil de personalizar y extender
Instala el paquete usando npm o yarn:
# Usando npm
npm install edt-lib
# O usando yarn
yarn add edt-libLa biblioteca utiliza Material Icons para los iconos. Asegúrate de incluir el siguiente enlace en el <head> de tu aplicación:
<link href="https://fonts.googleapis.com/css2?family=Material+Icons" rel="stylesheet">Si estás usando TypeScript, asegúrate de tener instalados los tipos de React:
npm install --save-dev @types/react @types/react-domimport React from 'react';
import { Button, ThemeProvider } from 'edt-lib';
function App() {
return (
<ThemeProvider>
<div className="app">
<h1>Bienvenido a edt-lib</h1>
<Button variant="primary" onClick={() => alert('¡Hola!')}>
Haz clic aquí
</Button>
</div>
</ThemeProvider>
);
}
export default App;-
Button- Botones con múltiples variantes -
Card- Contenedor de contenido con estilos predefinidos -
CheckButton- Botones de verificación -
Icon- Componente de iconos -
IconButton- Botones que contienen iconos -
Modal- Ventanas modales -
RadioButton- Botones de opción -
Selector- Menús desplegables -
Spinner- Indicadores de carga -
TextArea- Áreas de texto editables -
TextBox- Campos de texto -
TextButton- Botones de texto -
Title- Títulos con estilos predefinidos
-
TableDefault- Tabla básica -
TableActiveRow- Tabla con filas seleccionables -
TableWithButton- Tabla con botones de acción -
TableWithIcon- Tabla con iconos -
TableWithPagination- Tabla con paginación
-
ThemeProvider- Proveedor de temas personalizados -
Grid- Sistema de cuadrícula responsive -
Message- Componente para mostrar mensajes al usuario -
Typography- Estilos tipográficos consistentes
Para ver ejemplos detallados y la documentación completa de todos los componentes, visita nuestra documentación de Storybook.
- Node.js 16+
- npm 7+ o yarn 1.22+
# Instalar dependencias
npm install
# o
yarn# Iniciar servidor de desarrollo de Storybook
npm run sb
# Ejecutar pruebas
npm test
# Ejecutar linter
npm run lint
# Construir para producción
npm run build
# Desplegar documentación
npm run release-sb
# Publicar nueva versión (minor)
npm run publish-npm-minor¡Las contribuciones son bienvenidas! Por favor, lee nuestra guía de contribución para más detalles.
Este proyecto está bajo la Licencia ISC. Ver el archivo LICENSE para más detalles.
Asegúrate de tener permisos para publicar el paquete en npm y haber actualizado la versión en package.json si es necesario.
- Para incrementar el patch, compilar y publicar automáticamente:
Este comando actualizará automáticamente la versión (patch), construirá el paquete y lo publicará en el registro público de npm.
npm run publish-npm
- Para construir y desplegar Storybook en GitHub Pages, ejecuta:
Este comando construirá la aplicación, creará una carpeta
npm run release-sb
.gh-pagesy desplegará el contenido en la ramagh-pagesde tu repositorio.
import { Title } from 'edt-lib';
function App() {
return <Title level={1}>¡Hola, mundo!</Title>;
}Consulta la documentación interactiva y ejemplos en vivo en:
👉 Storybook: http://ing17romc.github.io/edt-lib/
Clona el repositorio y ejecuta los siguientes comandos:
-
Instala las dependencias:
npm install
-
Inicia Storybook para desarrollo:
npm run sb
Esto construirá los componentes y abrirá Storybook en http://localhost:6006
-
Para ejecutar los tests:
npm test -
Para limpiar y reinstalar dependencias (útil en caso de problemas):
npm run clean
-
Para construir los componentes para producción:
npm run build
-
clean: Limpia las dependencias y las reinstala -
build: Construye los componentes para producción -
test: Ejecuta las pruebas unitarias -
lint: Ejecuta el linter -
sb: Inicia Storybook en modo desarrollo -
release-sb: Despliega Storybook en GitHub Pages -
publish-npm: Publica una nueva versión en npm
npm install
npm run storybooknpm run test- Aumenta la versión en
package.json. - Compila el paquete si es necesario (
npm run build). - Publica:
npm publish --access public
npm run build-storybook
npm run deploy-storybookEsto publicará la documentación en GitHub Pages:
http://ing17romc.github.io/edt-lib/
Consulta cambios y releases en CHANGELOG.md.
ISC
npm i edt-lib
Import the styles in the
indexfile
import 'edt-lib/index.scss';Import the componet using
importin your page
import { UI } from 'edt-lib';You can have more detail of all the components with their respective configuration options by visiting the HomePage
import React from 'react';
import { UI } from 'edt-lib';
const Example = () => {
const { Title } = UI
return (
<div>
<Title label='This is an example' />
</div>
);
};
export default Example;