kamey-components

KameyUI

KameyUI es una librería de componentes para la creación de interfaces de usuario.

Documentación

Documentación de KameyUI

Instalación

bun i kamey-components

Peer Dependencies

Esta librería requiere que se instalen los siguientes paquetes:

npm install react react-dom antd axios dayjs

Uso

import { DynamicTable } from 'kamey-components'

<DynamicTable />

Componentes

DynamicCrud El componente DynamicCrud es un wrapper que combina los componentes DynamicTable y DynamicForm para crear una interfaz CRUD completa.

Props

Propiedad	Tipo	Descripción
columns	ColumnsProps[]	Las columnas de la tabla.
data	unknown[]	Los datos de la tabla.
title	string	El título de la tabla.
formTitle	string	El título del formulario.
description	string	La descripción de la tabla.
formDescription	string	La descripción del formulario.
fields	FormField[]	Los campos del formulario.
showCreateButton	boolean	Indica si se debe mostrar el botón de crear.
createButtonText	string	El texto del botón de crear.
createButtonIcon	React.ReactElement	El icono del botón de crear.
icon	React.ElementType	El icono de la tabla.
layout	"horizontal" | "vertical"	El diseño del formulario.
actionConfig	ActionConfig	La configuración de acciones de la tabla.
searchConfig	SearchConfig	La configuración de búsqueda de la tabla.
loading	boolean	Indica si la tabla está cargando.
onCreate	OnCreateHandler	Función que se ejecuta al hacer clic en el botón de crear.
createRedirect	boolean	Indica si se debe redirigir al formulario de creación.
onEdit	(record: unknown) => void	Función que se ejecuta al hacer clic en el botón de editar.
onDelete	(record: unknown) => void	Función que se ejecuta al hacer clic en el botón de eliminar.
submitButtonText	string	El texto del botón de enviar en el formulario.
apiConfig	ApiConfig	La configuración de la API para el formulario.
initialData	Record<string, unknown>	Los datos iniciales del formulario.
themeConfig	ThemeConfig	La configuración del tema.
moreActions	MoreActions[]	Acciones adicionales para la tabla.
formCols	1 | 2 | 3 | 4	Número de columnas del formulario.
formCustomCols	boolean	Indica si se usan columnas personalizadas en el formulario.

Ejemplo de uso

import { DynamicCrud, ColumnsProps, FormField } from 'kamey-components';

const columns: ColumnsProps[] = [
  { title: 'Nombre', dataIndex: 'name', key: 'name' },
  { title: 'Edad', dataIndex: 'age', key: 'age' },
];

const fields: FormField[] = [
  { name: 'name', label: 'Nombre', type: 'text' },
  { name: 'age', label: 'Edad', type: 'number' },
];

const data = [
  { name: 'Juan', age: 25 },
  { name: 'Ana', age: 30 },
];

const App = () => (
  <DynamicCrud
    title="Usuarios"
    columns={columns}
    data={data}
    fields={fields}
    showCreateButton
    onCreate={(values) => console.log('Crear:', values)}
    onEdit={(record) => console.log('Editar:', record)}
    onDelete={(record) => console.log('Eliminar:', record)}
  />
);

DynamicForm

El componente DynamicForm es un formulario dinámico que permite crear y actualizar registros.

Props

Propiedad	Tipo	Descripción
mode	"create" | "update"	El modo del formulario (crear o actualizar).
title	string	El título del formulario.
description	string	La descripción del formulario.
icon	React.ElementType	El icono del formulario.
layout	"vertical" | "horizontal"	El diseño del formulario.
cols	1 | 2 | 3 | 4	Número de columnas del formulario.
fields	FormField[] | FormField[][]	Los campos del formulario.
submitButtonText	string	El texto del botón de enviar.
onSubmit	(data: unknown) => void	Función que se ejecuta al enviar el formulario.
apiConfig	ApiConfig	La configuración de la API para el formulario.
initialData	Record<string, unknown>	Los datos iniciales del formulario.
customCols	boolean	Indica si se usan columnas personalizadas en el formulario.

Ejemplo de uso

import { DynamicForm, FormField } from 'kamey-components';

const fields: FormField[] = [
  { name: 'name', label: 'Nombre', type: 'text' },
  { name: 'age', label: 'Edad', type: 'number' },
];

const App = () => (
  <DynamicForm
    title="Crear usuario"
    fields={fields}
    onSubmit={(values) => console.log('Enviar:', values)}
  />
);

DynamicTable

El componente DynamicTable es una tabla dinámica que permite mostrar y gestionar datos.

Props

Propiedad	Tipo	Descripción
title	string	El título de la tabla.
icon	React.ElementType	El icono de la tabla.
description	string	La descripción de la tabla.
showCreateButton	boolean	Indica si se debe mostrar el botón de crear.
onCreate	() => void	Función que se ejecuta al hacer clic en el botón de crear.
onEdit	(record: unknown) => void	Función que se ejecuta al hacer clic en el botón de editar.
onDelete	(record: unknown) => void	Función que se ejecuta al hacer clic en el botón de eliminar.
createButtonText	string	El texto del botón de crear.
createButtonIcon	React.ReactElement	El icono del botón de crear.
columns	ColumnsProps[]	Las columnas de la tabla.
data	unknown[]	Los datos de la tabla.
loading	boolean	Indica si la tabla está cargando.
actionConfig	ActionConfig	La configuración de acciones de la tabla.
searchConfig	SearchConfig	La configuración de búsqueda de la tabla.
themeConfig	ThemeConfig	La configuración del tema.

Ejemplo de uso

import { DynamicTable, ColumnsProps } from 'kamey-components';

const columns: ColumnsProps[] = [
  { title: 'Nombre', dataIndex: 'name', key: 'name' },
  { title: 'Edad', dataIndex: 'age', key: 'age' },
];

const data = [
  { name: 'Juan', age: 25 },
  { name: 'Ana', age: 30 },
];

const App = () => (
  <DynamicTable
    title="Usuarios"
    columns={columns}
    data={data}
    showCreateButton
    onCreate={() => console.log('Crear nuevo usuario')}
    onEdit={(record) => console.log('Editar:', record)}
    onDelete={(record) => console.log('Eliminar:', record)}
  />
);

Guía de desarrollo

Estructura de ramas

• main (producción)
  • feature/* (nuevas características)
  • fix/* (correcciones)
  • chore/* (configuración/mantenimiento)
  • docs/* (documentación)
• dev (desarrollo)

Flujo de trabajo

1. Crear una nueva rama desde main

git checkout -b <tipo>/<descripcion-corta>

# Ejemplos:
git checkout -b feature/new-component
git checkout -b fix/button-style
git checkout -b chore/update-docs

2. Realizar commits siguiendo la convención:

Tipos de Commit y Versionado

PATCH (0.0.x):

git commit -m "fix: corregir bug en el componente Button"
git commit -m "chore: actualizar documentación"
git commit -m "docs: actualizar README"
git commit -m "style: actualizar estilos"
git commit -m "refactor: refactorizar código"

MINOR (0.x.0):

git commit -m "feat: agregar nuevo componente DynamicTable"

MAJOR (x.0.0):

git commit -m "feat: rediseño de API BREAKING CHANGE"

3. Crear un pull request a main

Estructura del PR

[Tipo] Descripción del cambio

Descripción: Explicación detallada del cambio, incluyendo motivación y contexto.

Cambios realizados: Lista de cambios realizados en el PR

Tipo de cambio: 
- [ ] Configuración (chore)
- [ ] Nueva característica (feature)
- [ ] Corrección (fix)
- [ ] Breaking change
- [ ] Documentación (docs)

Reglas importantes

• No se debe hacer commits a main directamente, siempre a través de un PR.
• Cada feature/fix debe tener su propia rama.
• Los commits deben seguir estrictamente el formato para el versionado automático.

Ejemplos de flujo completo

# Nueva característica
git checkout -b feature/nuevo-dropdown
git commit -m "feat: implementación inicial del dropdown"
git commit -m "test: agregados tests para dropdown"
git push origin feature/nuevo-dropdown
# Crear PR con título "feat: Nuevo componente Dropdown"

# Corrección de bug

git checkout -b fix/modal-overflow
git commit -m "fix: corregido overflow en modal en dispositivos móviles"
git push origin fix/modal-overflow
# Crear PR con título "fix: Corrección overflow en modal"