edt-lib

v2.13.0

Published

4 months ago

Front-end library, rebuilt for React

Downloads

131

0High
0Medium
0Low

ing17romc

✨ Características

🚀 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

📦 Instalación

Instala el paquete usando npm o yarn:

# Usando npm
npm install edt-lib

# O usando yarn
yarn add edt-lib

🔌 Requisitos Previos

Material Icons

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">

Configuración de TypeScript

Si estás usando TypeScript, asegúrate de tener instalados los tipos de React:

npm install --save-dev @types/react @types/react-dom

🚀 Uso Rápido

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;

🧩 Componentes Disponibles

Componentes Básicos

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

Componentes de Tabla

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

Utilidades

ThemeProvider - Proveedor de temas personalizados
Grid - Sistema de cuadrícula responsive
Message - Componente para mostrar mensajes al usuario
Typography - Estilos tipográficos consistentes

📚 Documentación Completa

Para ver ejemplos detallados y la documentación completa de todos los componentes, visita nuestra documentación de Storybook.

🛠 Desarrollo

Requisitos

Node.js 16+
npm 7+ o yarn 1.22+

Instalación de dependencias

# Instalar dependencias
npm install
# o
yarn

Comandos disponibles

# 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

🤝 Contribuir

¡Las contribuciones son bienvenidas! Por favor, lee nuestra guía de contribución para más detalles.

📄 Licencia

Este proyecto está bajo la Licencia ISC. Ver el archivo LICENSE para más detalles.

Publicar en npm

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:
```
npm run publish-npm
```
Este comando actualizará automáticamente la versión (patch), construirá el paquete y lo publicará en el registro público de npm.

Desplegar Storybook en GitHub Pages

Para construir y desplegar Storybook en GitHub Pages, ejecuta:
```
npm run release-sb
```
Este comando construirá la aplicación, creará una carpeta .gh-pages y desplegará el contenido en la rama gh-pages de tu repositorio.

🚀 Uso básico

import { Title } from 'edt-lib';

function App() {
  return <Title level={1}>¡Hola, mundo!</Title>;
}

📚 Documentación Visual

Consulta la documentación interactiva y ejemplos en vivo en:
👉 Storybook: http://ing17romc.github.io/edt-lib/

🧑‍💻 Desarrollo local

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
```

📦 Scripts disponibles

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 storybook

🧪 Tests

npm run test

🚢 Publicar en NPM

Aumenta la versión en package.json.
Compila el paquete si es necesario (npm run build).
Publica:
```
npm publish --access public
```

🌐 Deploy de Storybook (demo visual)

npm run build-storybook
npm run deploy-storybook

Esto publicará la documentación en GitHub Pages:
http://ing17romc.github.io/edt-lib/

📦 Repositorio

📝 Changelog

Consulta cambios y releases en CHANGELOG.md.

License

ISC

How to use

Install

npm i edt-lib

Styles

Import the styles in the index file

import 'edt-lib/index.scss';

Scripts

Import the componet using import in your page

import { UI } from 'edt-lib';

Example

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;