atm-global-stylish

Componentes reutilizables para proyectos React con estilos embebidos (TailwindCSS).

Este paquete incluye una colección de componentes UI diseñados para integrarse fácilmente en proyectos React, utilizando estilos embebidos mediante TailwindCSS.

🚀 Instalación

Opción 1: Desde NPM

npm install atm-global-stylish

⚠️ Este paquete requiere tener instaladas las siguientes versiones en tu proyecto:

• react ^18.2.0
• react-dom ^18.2.0
• tailwindcss ^3.3.5 (ya que utiliza clases Tailwind)

Si tu proyecto aún no tiene estos paquetes, instálalos con:

npm install [email protected] [email protected] [email protected]

Opción 2: Uso local con yalc

Ideal para desarrollo y pruebas locales.

1. En el proyecto de la librería:

npm install
npm run build

Este comando compilará el paquete y lo publicará localmente con yalc.

2. En tu proyecto React:

yalc add atm-global-stylish

Y para mantenerlo sincronizado automáticamente:

yalc link atm-global-stylish

📦 Uso

import MiComponente from 'atm-global-stylish';

function App() {
  return (
    <div className="p-4">
      <MiComponente />
    </div>
  );
}

✅ Los estilos están embebidos directamente en cada componente. No es necesario importar Tailwind en tu proyecto consumidor.

📚 Componentes Disponibles

<Button />

Un botón reutilizable con variantes, tamaños, iconos y estados.

Props:

| Prop | Tipo | Requerido | Default | Descripción | | -------------- | ------------------------------------------ | --------- | ------- | ------------------------------------ | | title | string | ✔️ | | Texto del botón | | handleClick | function | ✔️ | | Función al hacer clic | | className | string | ✖️ | | Clase adicional para personalización | | type | string (primary o secondary) | ✖️ | '' | Tipo de botón | | size | string (xs, sm, md, lg, xl, xxl, full, auto) | ✖️ | full | Tamaño del botón | | icon | React.element | ✖️ | '' | Icono JSX opcional | | loading | bool | ✖️ | false | Muestra un spinner | | disabled | bool | ✖️ | false | Desactiva el botón | | iconPosition | string (start, end, top, bottom) | ✖️ | end | Posición del icono |

<Button
  title="Botón"
  handleClick={() => console.log(e.target.value)}
/>

<Check />

Componente tipo toggle switch estilizado.

Props:

| Prop | Tipo | Requerido | Default | Descripción | | ------------------| ---------------------------------------------- | ------------| ------- | ------------------------------------ | | label | string o React.element | ✖️ | | Texto o componente JSX para etiqueta | | checked | boolean | ✖️ | | Estado actual del switch | | handleCheck | function | ✖️ | | Callback al hacer click | | icon | React.element | ✖️ | | Ícono opcional para etiqueta | | disabled | boolean (true o false) | ✖️ | false | Deshabilita la interacción | | appearance | string (normal, always-checked, disabled) | ✖️ | 'normal' | Apariencia visual del componente |

<Check
  label="¿Estás de acuerdo?"
  checked={true}
  handleCheck={() => {}}
/>

<Input />

Campo de texto personalizado con ícono, label y validaciones comunes.

Props:

| Prop | Tipo | Requerido | Default | Descripción | | ------------------| ---------------------------------------------- | ------------| ------- | ------------------------------------ | | type | string | ✖️ | 'text' | Tipo de dato para el input. Acepta los tipos por defecto HTML | | label | string o React.element | ✖️ | '' | Estado actual del switch | | name | string | ✖️ | '' | Campo que corresponde al id y name del input | | placeholder | string | ✖️ | '' | Texto placeholder para el input | | handleChange | function | ✖️ | () => { } | Callback para el cambio de texto dentro del input | | value | string | ✖️ | '' | Valor por defecto para el input | | editable | boolean (true o false) | ✖️ | true | Activa o desactiva la edición del input | | inputIcon | React.element | ✖️ | <></> | Ícono que se le aplicará al input | | required | boolean (true o false) | ✖️ | false | Indica si el input es obligatorio o no | | checked | boolean (true o false) | ✖️ | false | Si el input es de tipo checkbox, se tomará este valor para indicar si está marcado o no | | maxLength | integer | ✖️ | 255 | Define la longitud máxima de cadena que el usuario puede ingresar en el input | | max | integer | ✖️ | '' | Define el valor máximo que es aceptable y válido para el input que contiene el atributo | | min | integer | ✖️ | '' | Define el valor mínimo que es aceptable y válido para el input que contiene el atributo | | accept | string | ✖️ | '*' | El atributo accept toma como valor una lista separada por comas de uno o más tipos de archivos, o especificadores de tipo de archivo únicos, que describen qué tipos de archivos permitir | | disabled | boolean (true o false) | ✖️ | false | Indica si el input está permitido para escritura o no | | className | string | ✖️ | `` | Clase personalizada | | withButtonFile | boolean (true o false) | ✖️ | true | Si el input es de tipo file, se le agrega un estilo de botón al texto "Seleccionar archivo" |

<Input
  placeholder="Placeholder..."
  type="text"
  handleChange={() => {}}
/>

<Label />

Componente label estilizado.

Props:

| Prop | Tipo | Requerido | Default | Descripción | | ------------------| ---------------------------------------------- | ------------| ------- | ------------------------------------ | | htmlFor | string | ✖️ | '' | Contiene el valor que es el id del elemento de formulario al que se relaciona | | title | string | ✖️ | '' | Es el texto que contiene el componente |

<Label
  title="Label"
/>

<Select />

Componente select personalizado para cualquier sitio de ATM Seguros.

Props:

| Prop | Tipo | Requerido | Default | Descripción | | ------------------ | ---------------------------------------------- | ------------| ------- | ------------------------------------ | | list | array of objects ([{ value: 1, title: 'value 1' }]) | ✔️ | | Lista de valores para el select. Se recomienda tener al menos un objeto con el valor '' | | onChange | function | ✔️ | | Callback para el cambio del valor seleccionado | | label | string o React.element | ✖️ | | Texto descriptivo para el select | | selectedValue | string | ✖️ | '' | Valor de la lista seleccionado por defecto | | required | boolean (true o false) | ✖️ | false | Indica si el componente es requerido o no | | disabled | boolean (true o false) | ✖️ | false | Indica si el componente puede ser editable o no | | dataSearch | boolean (true o false) | ✖️ | true | - | | inputSearchHidden | boolean (true o false) | ✖️ | true | Indica si el input de búsqueda para el select se mostrará o no. Recomendable para listas largas |

<Select
  list={[{ value: '', title: 'Seleccionar' }, { value: '1', title: 'Opción 1' }]}
  selectedValue={1}
  label="Selecciona una opción"
  onChange={(e) => console.log(e.target.value)}
/>

📃 Licencia

MIT © ATM Seguros