UI Component Library for React 18+ with TypeScript
Una biblioteca de componentes de interfaz de usuario moderna, accesible y altamente personalizable para aplicaciones React.
Instala el paquete usando npm o yarn:
# Usando npm
npm install edt-lib
# O usando yarn
yarn add edt-lib
La 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-dom
import 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 variantesCard - Contenedor de contenido con estilos predefinidosCheckButton - Botones de verificaciónIcon - Componente de iconosIconButton - Botones que contienen iconosModal - Ventanas modalesRadioButton - Botones de opciónSelector - Menús desplegablesSpinner - Indicadores de cargaTextArea - Áreas de texto editablesTextBox - Campos de textoTextButton - Botones de textoTitle - Títulos con estilos predefinidosTableDefault - Tabla básicaTableActiveRow - Tabla con filas seleccionablesTableWithButton - Tabla con botones de acciónTableWithIcon - Tabla con iconosTableWithPagination - Tabla con paginaciónThemeProvider - Proveedor de temas personalizadosGrid - Sistema de cuadrícula responsiveMessage - Componente para mostrar mensajes al usuarioTypography - Estilos tipográficos consistentesPara ver ejemplos detallados y la documentación completa de todos los componentes, visita nuestra documentación de Storybook.
# 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.
npm run publish-npm
npm run release-sb
.gh-pages y desplegará el contenido en la rama gh-pages de 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 reinstalabuild: Construye los componentes para produccióntest: Ejecuta las pruebas unitariaslint: Ejecuta el lintersb: Inicia Storybook en modo desarrollorelease-sb: Despliega Storybook en GitHub Pagespublish-npm: Publica una nueva versión en npmnpm install
npm run storybook
npm run test
package.json.npm run build).npm publish --access public
npm run build-storybook
npm run deploy-storybook
Esto 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;
FAQs
Front-end library, rebuilt for React
We found that edt-lib demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Multiple high-impact npm maintainers confirm they have been targeted in the same social engineering campaign that compromised Axios.
Security News
Axios compromise traced to social engineering, showing how attacks on maintainers can bypass controls and expose the broader software supply chain.
Security News
Node.js has paused its bug bounty program after funding ended, removing payouts for vulnerability reports but keeping its security process unchanged.