+
+
-
+
Libreria de componentes de CIDWA
+
+
diff --git a/src/app/table/page.tsx b/src/app/table/page.tsx
deleted file mode 100644
index 6b70e07..0000000
--- a/src/app/table/page.tsx
+++ /dev/null
@@ -1,225 +0,0 @@
-"use client";
-
-import React, { useState } from "react";
-import Table, { Header, TablaSkeleton } from "@/components/table";
-import VistaComponente from "@/components/vista-componente";
-import { tableBasicExample } from "@/snippets/table/table-basic";
-
-export default function Page() {
- const headers: Header<{
- name: string;
- age: number;
- email: string;
- acciones?: null;
- }>[] = [
- { key: "name", label: "Nombre", width: "30%" },
- { key: "age", label: "Edad", width: "15%" },
- { key: "email", label: "Correo", width: "40%" },
- ];
-
- const baseData = [
- { name: "Juan", age: 20, email: "juan@example.com" },
- { name: "María", age: 25, email: "maria@example.com" },
- { name: "Pedro", age: 30, email: "pedro@example.com" },
- { name: "Luisa", age: 28, email: "luisa@example.com" },
- ];
-
- const [currentPage, setCurrentPage] = useState(1);
- const [search, setSearch] = useState("");
-
- const filteredData = baseData.filter((item) =>
- item.name.toLowerCase().includes(search.toLowerCase())
- );
-
- return (
-
-
- 📊 Componente: Table
-
-
-
- El componente <Table /> permite mostrar datos en
- forma tabular, con funcionalidades como ordenamiento, paginación,
- renderizado personalizado, clic en filas y un estado de carga esqueleto.
-
-
-
-
- {/* USO BÁSICO */}
-
-
-
-
- {/* FILAS CLICABLES */}
-
- alert(`Seleccionaste a ${row.name}`)}
- />
-
-
- {/* PAGINACIÓN */}
-
-
-
-
- {/* CONTROL DE PÁGINA EXTERNO */}
-
-
-
-
- {/* RENDER PERSONALIZADO */}
-
- (
- alert(row.email)}
- >
- Ver correo
-
- ),
- },
- ]}
- data={baseData.map((d) => ({ ...d, acciones: null }))}
- />
-
-
- {/* PERSONALIZACIÓN DE ANCHO */}
-
-
-
-
- {/* ANCHO AUTOMÁTICO */}
-
-
-
-
- {/* SKELETON */}
-
-
-
- {/* ROW KEY */}
-
- ({ ...item, id: index }))}
- rowKey={(row) => row.email}
- />
-
-
- {/* FILTRO */}
-
-
-
- {/* PROPS */}
-
- ⚙️ Props del componente
-
-
- headers: Columnas de la tabla (con key, label, render,
- width...)
-
-
- data: Datos a mostrar.
-
-
- rowsPerPage?: Número de filas por página (por defecto:
- 10).
-
-
- onRowClick?: Función al hacer clic en una fila.
-
-
- rowKey?: Función que retorna un ID único para cada
- fila.
-
-
- className?: Estilos personalizados (tabla, fila, celda,
- header).
-
-
- controlledPage?: Página actual controlada externamente.
-
-
- onPageChange?: Callback para cambiar la página.
-
-
-
-
- );
-}
diff --git a/src/components/button.tsx b/src/components/button.tsx
new file mode 100644
index 0000000..dd46dc3
--- /dev/null
+++ b/src/components/button.tsx
@@ -0,0 +1,72 @@
+import React from 'react';
+
+/**
+ * Botón reutilizable con soporte para variantes de Bootstrap y personalización de íconos.
+ *
+ * @component
+ */
+interface ButtonProps extends React.ButtonHTMLAttributes {
+ /**
+ * Variante Bootstrap o personalizada. Ej: `primary`, `danger`, `mi-clase-custom`.
+ * @default "primary"
+ */
+ variant?: string;
+
+ /**
+ * Si se usa variante `outline` (por ejemplo, `btn-outline-primary`).
+ * @default false
+ */
+ outline?: boolean;
+
+ /**
+ * Ícono Bootstrap (`string`, como `check-circle`) o componente React.
+ */
+ icon?: string | React.ReactNode;
+
+ /**
+ * Tamaño del botón: `sm` o `lg` para tamaños Bootstrap.
+ */
+ size?: 'sm' | 'lg';
+
+ /**
+ * Clases adicionales personalizadas para el botón.
+ */
+ className?: string;
+}
+
+/**
+ * Componente `Button` con estilos de Bootstrap y soporte para íconos.
+ */
+const Button: React.FC = ({
+ children,
+ type = 'button',
+ icon,
+ className = '',
+ variant = 'primary',
+ outline = false,
+ disabled = false,
+ size,
+ ...rest
+}) => {
+ const btnVariant = outline ? `btn-outline-${variant}` : `btn-${variant}`;
+ const sizeClass = size ? `btn-${size}` : '';
+ const combinedClasses = `btn ${btnVariant} ${sizeClass} ${className}`.trim();
+
+ return (
+
+ {typeof icon === 'string' ? (
+ {icon}
+ )}
+ {children}
+
+ );
+};
+
+export default Button;
diff --git a/src/components/checkbox-option-group.tsx b/src/components/checkbox-option-group.tsx
new file mode 100644
index 0000000..66720ac
--- /dev/null
+++ b/src/components/checkbox-option-group.tsx
@@ -0,0 +1,58 @@
+import React from "react";
+
+export interface CheckboxOption {
+ label: string;
+ value: T;
+ disabled?: boolean;
+}
+
+interface CheckboxOptionGroupProps {
+ name: string;
+ options: CheckboxOption[];
+ selectedValues: T[];
+ onChange: (value: T, checked: boolean) => void;
+ maxSelected?: number;
+ disabled?: boolean;
+ className?: string;
+}
+
+export default function CheckboxOptionGroup({
+ name,
+ options,
+ selectedValues,
+ onChange,
+ maxSelected,
+ disabled = false,
+ className = "",
+}: CheckboxOptionGroupProps) {
+ const isSelected = (value: T) => selectedValues.includes(value);
+
+ return (
+
+ {options.map((option, index) => {
+ const checked = isSelected(option.value);
+ const limitReached =
+ maxSelected !== undefined &&
+ selectedValues.length >= maxSelected &&
+ !checked;
+
+ return (
+
+
+ );
+ })}
+
+ );
+}
diff --git a/src/components/code-block.tsx b/src/components/code-block.tsx
index ddfa8dd..bdf4c1e 100644
--- a/src/components/code-block.tsx
+++ b/src/components/code-block.tsx
@@ -1,13 +1,20 @@
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
+import { vscDarkPlus } from 'react-syntax-highlighter/dist/cjs/styles/prism';
+
export const CodeBlock = ({ code }: { code: string }) => (
-
- {code}
-
+
+ {code}
+
navigator.clipboard.writeText(code)}
>
- Copiar
+
, "className"> {
- label: string;
+ label?: string;
className?: {
container?: string;
label?: string;
@@ -13,13 +13,13 @@ export interface InputProps
/**
* Componente de entrada (`Input`) reutilizable en React.
*
- * Este componente renderiza un campo de entrada (`} [rest] - Atributos adicionales compatibles con `
-
- {label}
-
+
+ {label && inputId && (
+
+ {label}
+
+ )}
{
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
+export default Navbar;
diff --git a/src/components/pagination.tsx b/src/components/pagination.tsx
index 7514b3e..19a2ac2 100644
--- a/src/components/pagination.tsx
+++ b/src/components/pagination.tsx
@@ -1,54 +1,52 @@
-import React, { useMemo } from 'react';
+import React, { useMemo } from "react";
interface PaginationProps {
totalPages: number;
currentPage: number;
onPageChange: (page: number) => void;
+ delta?: number;
}
export default function Pagination({
currentPage,
onPageChange,
totalPages,
+ delta = 1,
}: PaginationProps) {
const handlePageChange = (page: number) => {
- if (page >= 1 && page <= totalPages) {
+ if (page >= 1 && page <= totalPages && page !== currentPage) {
onPageChange(page);
}
};
- // Lógica para mostrar paginación compacta cuando hay muchas páginas
const visiblePages = useMemo(() => {
- const pages: number[] = [];
- const delta = 0; // Cuántas páginas cercanas a la actual mostrar
+ const pages: (number | -1)[] = [];
- if (totalPages <= 5) {
+ if (totalPages <= 5 + delta * 2) {
return Array.from({ length: totalPages }, (_, i) => i + 1);
}
- const leftBoundary = Math.max(1, currentPage - delta);
- const rightBoundary = Math.min(totalPages, currentPage + delta);
+ const left = Math.max(2, currentPage - delta);
+ const right = Math.min(totalPages - 1, currentPage + delta);
- if (leftBoundary > 2) {
- pages.push(1, -1); // -1 es un marcador de "..."
- }
+ pages.push(1);
+ if (left > 2) pages.push(-1);
- for (let i = leftBoundary; i <= rightBoundary; i++) {
+ for (let i = left; i <= right; i++) {
pages.push(i);
}
- if (rightBoundary < totalPages - 1) {
- pages.push(-1, totalPages);
- }
+ if (right < totalPages - 1) pages.push(-1);
+ pages.push(totalPages);
return pages;
- }, [currentPage, totalPages]);
+ }, [currentPage, totalPages, delta]);
return (
-
+
{/* Botón Anterior */}
-
+
handlePageChange(currentPage - 1)}
@@ -68,9 +66,16 @@ export default function Pagination({
) : (
-
+
handlePageChange(page)}
>
{page}
@@ -81,7 +86,9 @@ export default function Pagination({
{/* Botón Siguiente */}
{
+ label: string;
+ value: T;
+ disabled?: boolean;
+}
+
+interface RadioOptionGroupProps {
+ name: string;
+ options: RadioOption[];
+ selectedValue?: T;
+ onChange: (value: T) => void;
+ disabled?: boolean;
+ className?: string;
+}
+
+export default function RadioOptionGroup({
+ name,
+ options,
+ selectedValue,
+ onChange,
+ disabled = false,
+ className = "",
+}: RadioOptionGroupProps) {
+ return (
+
+ {options.map((option, index) => (
+
+
+ ))}
+
+ );
+}
diff --git a/src/components/select.tsx b/src/components/select.tsx
new file mode 100644
index 0000000..364d43c
--- /dev/null
+++ b/src/components/select.tsx
@@ -0,0 +1,103 @@
+import React, { useId } from 'react';
+
+interface Option {
+ value: string | number;
+ label: string;
+}
+
+interface SelectProps
+ extends Omit, 'className'> {
+ label: string;
+ className?: {
+ container?: string;
+ label?: string;
+ input?: string;
+ };
+ options: Option[];
+ placeholder?: string;
+}
+
+/**
+ * Componente `Select` reutilizable en React.
+ *
+ * Este componente renderiza un elemento `` con una etiqueta visible,
+ * opciones personalizadas y estilos configurables por clase. Es compatible
+ * con el uso controlado (`value`) o no controlado (`defaultValue`).
+ *
+ * Además, genera automáticamente un `id` si no se proporciona, manteniendo
+ * buenas prácticas de accesibilidad.
+ *
+ * @component
+ * @example
+ * // Uso básico
+ * `.
+ * @param {React.SelectHTMLAttributes} [rest] - Cualquier otra prop válida para ``.
+ *
+ * @returns {JSX.Element} Un elemento `` con sus opciones y etiqueta asociada.
+ */
+const Select: React.FC = ({
+ label,
+ className,
+ options,
+ placeholder,
+ id,
+ name,
+ defaultValue,
+ value,
+ ...rest
+}) => {
+ const generatedId = useId();
+ const selectId = id || name || generatedId;
+
+ return (
+
+
+ {label}
+
+
+ {placeholder && (
+
+ {placeholder}
+
+ )}
+ {options.map((option) => (
+
+ {option.label}
+
+ ))}
+
+
+ );
+};
+
+export default Select;
diff --git a/src/components/table.tsx b/src/components/table.tsx
index 7acc404..b90bae2 100644
--- a/src/components/table.tsx
+++ b/src/components/table.tsx
@@ -169,7 +169,7 @@ interface TablaSkeletonProps {
columns?: number;
}
-export function TablaSkeleton({ rows = 5, columns = 5 }: TablaSkeletonProps) {
+export function TableSkeleton({ rows = 5, columns = 5 }: TablaSkeletonProps) {
return (
diff --git a/src/components/vista-componente.tsx b/src/components/vista-componente.tsx
index 8afb9ea..8a215ce 100644
--- a/src/components/vista-componente.tsx
+++ b/src/components/vista-componente.tsx
@@ -1,11 +1,13 @@
-import React, { useState } from "react";
import { CodeBlock } from "./code-block";
+import Button from "./button";
+import { useState } from "react";
interface VistaComponenteProps {
title: string;
description?: string;
code?: string;
children: React.ReactNode;
+ id: string;
}
export default function VistaComponente({
@@ -13,11 +15,12 @@ export default function VistaComponente({
description,
code,
children,
+ id,
}: VistaComponenteProps) {
const [showCode, setShowCode] = useState(false);
return (
-
+
{title}
{description && {description}
}
@@ -26,12 +29,15 @@ export default function VistaComponente({
{code && (
- setShowCode((prev) => !prev)}
>
{showCode ? "Ocultar código" : "Ver código y copiar"}
-
+
{showCode &&
)}
diff --git a/src/snippets/input/input-examples.ts b/src/snippets/input/input-examples.ts
new file mode 100644
index 0000000..4d3ff71
--- /dev/null
+++ b/src/snippets/input/input-examples.ts
@@ -0,0 +1,23 @@
+export const inputBasicExample = ` {}}
+/>
+`;
+
+export const checkboxBasicExample = `
+ {
+ setSelectedCheckboxes((prev) =>
+ checked ? [...prev, value] : prev.filter((v) => v !== value)
+ );
+ }}
+/>
+`;
+
+export const checkboxLimitExample = `
+ {
+ setSelectedCheckboxes((prev) =>
+ checked ? [...prev, value] : prev.filter((v) => v !== value)
+ );
+ }}
+ maxSelected={2}
+/>
+`;
diff --git a/src/snippets/pagination/pagination-example.ts b/src/snippets/pagination/pagination-example.ts
new file mode 100644
index 0000000..3e60188
--- /dev/null
+++ b/src/snippets/pagination/pagination-example.ts
@@ -0,0 +1,16 @@
+export const paginationBasic = `
+ setPais(e.target.value)}
+/>
+`;
+
+export const languageSelectSnippet = `
+ alert(\`Seleccionaste a \${row.name}\`)}
+ />
+ )
+}
+`;
diff --git a/src/snippets/table/table-column-width.ts b/src/snippets/table/table-column-width.ts
new file mode 100644
index 0000000..1fdfc8d
--- /dev/null
+++ b/src/snippets/table/table-column-width.ts
@@ -0,0 +1,23 @@
+export const tableColumnWidth = `interface RowData {
+ name: string;
+ age: number;
+ email: string;
+}
+
+export default function Page() {
+ const headers: Header[] = [
+ { key: "name", label: "Nombre", width: "50%" },
+ { key: "age", label: "Edad", width: "15%" },
+ { key: "email", label: "Correo electrónico", width: "35%" },
+ ];
+
+ const data: RowData[] = [
+ { name: "Juan", age: 20, email: "juan@example.com" },
+ { name: "María", age: 25, email: "maria@example.com" },
+ { name: "Pedro", age: 30, email: "pedro@example.com" },
+ { name: "Luisa", age: 28, email: "luisa@example.com" },
+ ];
+
+ return ;
+}
+`;
diff --git a/src/snippets/table/table-custom-cell-render.ts b/src/snippets/table/table-custom-cell-render.ts
new file mode 100644
index 0000000..4874dcb
--- /dev/null
+++ b/src/snippets/table/table-custom-cell-render.ts
@@ -0,0 +1,37 @@
+export const tableCustomCellRender = `
+interface RowData {
+ name: string;
+ age: number;
+ email: string;
+ acciones?: null;
+}
+
+export default function Page() {
+ const headers: Header[] = [
+ { key: "name", label: "Nombre", width: "30%" },
+ { key: "age", label: "Edad", width: "15%" },
+ { key: "email", label: "Correo", width: "40%" },
+ {
+ key: "acciones",
+ label: "Acciones",
+ width: "15%",
+ render: (_, row) => (
+ alert(row.email)}
+ >
+ Ver correo
+
+ ),
+ },
+ ];
+
+ const data = [
+ { name: "Juan", age: 20, email: "juan@example.com", acciones: null },
+ { name: "María", age: 25, email: "maria@example.com", acciones: null },
+ { name: "Pedro", age: 30, email: "pedro@example.com", acciones: null },
+ ];
+
+ return ;
+}
+`;
diff --git a/src/snippets/table/table-custom-pagination.ts b/src/snippets/table/table-custom-pagination.ts
new file mode 100644
index 0000000..121e5f2
--- /dev/null
+++ b/src/snippets/table/table-custom-pagination.ts
@@ -0,0 +1,50 @@
+export const tableCustomPagination = `interface RowData {
+ name: string;
+ age: number;
+ email: string;
+}
+
+export default function Page() {
+ const headers: Header[] = [
+ { key: "name", label: "Nombre" },
+ { key: "age", label: "Edad" },
+ { key: "email", label: "Correo" },
+ ];
+
+ const [currentPage, setCurrentPage] = useState(1);
+ const [data, setData] = useState([]);
+ const [loading, setLoading] = useState(false);
+ const rowsPerPage = 2;
+
+ useEffect(() => {
+ setLoading(true);
+
+ fetch(\`https://api.example.com/users?page=\${currentPage}&limit=\${rowsPerPage}\`)
+ .then((res) => res.json())
+ .then((json) => {
+ setData(json.data);
+ })
+ .catch((err) => {
+ console.error("Error fetching data:", err);
+ setData([]);
+ })
+ .finally(() => setLoading(false));
+ }, [currentPage]);
+
+ return (
+ <>
+ {loading ? (
+ [] = [
+ { key: "name", label: "Nombre", width: "30%" },
+ { key: "age", label: "Edad", width: "15%" },
+ { key: "email", label: "Correo", width: "40%" },
+ ];
+
+ const data: RowData[] = [
+ { name: "Juan", age: 20, email: "juan@example.com" },
+ { name: "María", age: 25, email: "maria@example.com" },
+ { name: "Pedro", age: 30, email: "pedro@example.com" },
+ { name: "Luisa", age: 28, email: "luisa@example.com" },
+ ];
+
+ const [search, setSearch] = useState("");
+
+ const filteredData = data.filter((item) =>
+ item.name.toLowerCase().includes(search.toLowerCase())
+ );
+
+ return (
+ <>
+