CIDWA/cidwa-components
12
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

fix build

Browse Source
This commit is contained in:
jorgemike
2025-03-22 18:12:54 -05:00
parent 8ab8d6d771
commit a6a83fe65a
3 changed files with 118 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/(components)/button/page.tsx
+113 -38
View File
@@ -5,7 +5,6 @@ import VistaComponente from "@/components/vista-componente";
import Button from "@/components/button";
export default function Page() {
return (
<>
<IndiceContenido
@@ -37,7 +36,9 @@ export default function Page() {
Clic aquí
</Button>`}
>
<Button onClick={() => alert("¡Hola mundo!")} className="mb-3">Clic aquí</Button>
<Button onClick={() => alert("¡Hola mundo!")} className="mb-3">
Clic aquí
</Button>
</VistaComponente>
<VistaComponente
@@ -53,42 +54,116 @@ export default function Page() {
</Button>
</VistaComponente>
<section id="button-props" className="mb-5">
<h2 className="h5">⚙️ Props del componente</h2>
<ul>
<li>
<code>variant?: string</code> – Clase base del botón. Ej:{" "}
<code>"primary"</code>, <code>"danger"</code>.
</li>
<li>
<code>outline?: boolean</code> – Si el botón debe usar estilo{" "}
<code>outline</code>.
</li>
<li>
<code>icon?: string | ReactNode</code> – Ícono Bootstrap (por
nombre) o componente React.
</li>
<li>
<code>size?: "sm" | "lg"</code> – Tamaño del botón.
</li>
<li>
<code>className?: string</code> – Clases adicionales para el
botón.
</li>
<li>
<code>type?: "button" | "submit" | "reset"</code> – Tipo de botón.
</li>
<li>
<code>disabled?: boolean</code> – Desactiva el botón.
</li>
<li>
<code>children: ReactNode</code> – Contenido del botón.
</li>
<li>
<code>...rest</code> – Cualquier otra prop válida de{" "}
<code>&lt;button&gt;</code>.
</li>
</ul>
{/* PROPS */}
<section className="mb-5" id="button-props">
<h2 className="h5 mb-3">⚙️ Props del componente</h2>
<table className="table table-bordered table-striped align-middle">
<thead>
<tr>
<th scope="col">Prop</th>
<th scope="col">Tipo</th>
<th scope="col">Descripción</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<code>variant?</code>
</td>
<td>
<code>string</code>
</td>
<td>
Clase base del botón. Ej: <code>&quot;primary&quot;</code>,{" "}
<code>&quot;danger&quot;</code>, etc.
</td>
</tr>
<tr>
<td>
<code>outline?</code>
</td>
<td>
<code>boolean</code>
</td>
<td>
Si el botón debe usar el estilo <code>outline</code>.
</td>
</tr>
<tr>
<td>
<code>icon?</code>
</td>
<td>
<code>string | ReactNode</code>
</td>
<td>
Ícono Bootstrap por nombre o un componente React
personalizado.
</td>
</tr>
<tr>
<td>
<code>size?</code>
</td>
<td>
<code>&quot;sm&quot; | &quot;lg&quot;</code>
</td>
<td>Tamaño del botón, usando clases de Bootstrap.</td>
</tr>
<tr>
<td>
<code>className?</code>
</td>
<td>
<code>string</code>
</td>
<td>Clases adicionales para el botón.</td>
</tr>
<tr>
<td>
<code>type?</code>
</td>
<td>
<code>
&quot;button&quot; | &quot;submit&quot; | &quot;reset&quot;
</code>
</td>
<td>Tipo del botón HTML.</td>
</tr>
<tr>
<td>
<code>disabled?</code>
</td>
<td>
<code>boolean</code>
</td>
<td>
Desactiva el botón cuando es <code>true</code>.
</td>
</tr>
<tr>
<td>
<code>children</code>
</td>
<td>
<code>ReactNode</code>
</td>
<td>Contenido del botón (texto o nodos).</td>
</tr>
<tr>
<td>
<code>...rest</code>
</td>
<td>
<code>ButtonHTMLAttributes&lt;HTMLButtonElement&gt;</code>
</td>
<td>
Soporta todas las props válidas de <code>&lt;button&gt;</code>{" "}
nativo.
</td>
</tr>
</tbody>
</table>
</section>
</div>
</>
src/components/checkbox-option-group.tsx
+3 -3
View File
@@ -1,12 +1,12 @@
import React from "react";
export interface CheckboxOption<T = any> {
export interface CheckboxOption<T = unknown> {
label: string;
value: T;
disabled?: boolean;
}
interface CheckboxOptionGroupProps<T = any> {
interface CheckboxOptionGroupProps<T = unknown> {
name: string;
options: CheckboxOption<T>[];
selectedValues: T[];
@@ -16,7 +16,7 @@ interface CheckboxOptionGroupProps<T = any> {
className?: string;
}
export default function CheckboxOptionGroup<T>({
export default function CheckboxOptionGroup<T = unknown>({
name,
options,
selectedValues,
src/components/radio-option-group.tsx
+2 -2
View File
@@ -1,12 +1,12 @@
import React from "react";
export interface RadioOption<T = any> {
export interface RadioOption<T = unknown> {
label: string;
value: T;
disabled?: boolean;
}
interface RadioOptionGroupProps<T = any> {
interface RadioOptionGroupProps<T = unknown> {
name: string;
options: RadioOption<T>[];
selectedValue?: T;