diff --git a/public/progress-bar.png b/public/progress-bar.png new file mode 100644 index 0000000..10ebac6 Binary files /dev/null and b/public/progress-bar.png differ diff --git a/public/tabs.png b/public/tabs.png new file mode 100644 index 0000000..b917a93 Binary files /dev/null and b/public/tabs.png differ diff --git a/src/app/(components)/button/page.tsx b/src/app/(components)/button/page.tsx index 52251c4..7fddf5a 100644 --- a/src/app/(components)/button/page.tsx +++ b/src/app/(components)/button/page.tsx @@ -1,7 +1,7 @@ 'use client'; -import IndiceContenido from '@/components/content-index'; -import VistaComponente from '@/components/vista-componente'; +import IndiceContenido from '@/components/docs/content-index'; +import VistaComponente from '@/components/docs/vista-componente'; import Button from '@/components/button'; export default function Page() { diff --git a/src/app/(components)/input/page.tsx b/src/app/(components)/input/page.tsx index 3d16e21..f9778ea 100644 --- a/src/app/(components)/input/page.tsx +++ b/src/app/(components)/input/page.tsx @@ -1,9 +1,9 @@ 'use client'; -import IndiceContenido from '@/components/content-index'; +import IndiceContenido from '@/components/docs/content-index'; import Input from '@/components/input'; import PasswordInput from '@/components/password'; -import VistaComponente from '@/components/vista-componente'; +import VistaComponente from '@/components/docs/vista-componente'; import { inputBasicExample, inputPasswordExample, diff --git a/src/app/(components)/options/page.tsx b/src/app/(components)/options/page.tsx index 4d9a7ff..d38016f 100644 --- a/src/app/(components)/options/page.tsx +++ b/src/app/(components)/options/page.tsx @@ -1,40 +1,40 @@ -"use client"; +'use client'; -import React, { useState } from "react"; -import RadioOptionGroup, { RadioOption } from "@/components/radio-option-group"; +import React, { useState } from 'react'; +import RadioOptionGroup, { RadioOption } from '@/components/radio-option-group'; import CheckboxOptionGroup, { CheckboxOption, -} from "@/components/checkbox-option-group"; -import VistaComponente from "@/components/vista-componente"; -import { CodeBlock } from "@/components/code-block"; +} from '@/components/checkbox-option-group'; +import VistaComponente from '@/components/docs/vista-componente'; +import { CodeBlock } from '@/components/docs/code-block'; import { checkboxBasicExample, checkboxLimitExample, radioBasicExample, radioDisabledExample, -} from "@/snippets/options/option-examples"; -import IndiceContenido from "@/components/content-index"; +} from '@/snippets/options/option-examples'; +import IndiceContenido from '@/components/docs/content-index'; export default function RadioCheckboxDocs() { - const [selectedRadio, setSelectedRadio] = useState("op1"); + const [selectedRadio, setSelectedRadio] = useState('op1'); const [checkboxBasicSelected, setCheckboxBasicSelected] = useState([ - "a", + 'a', ]); const [checkboxLimitSelected, setCheckboxLimitSelected] = useState( [] ); const radioOptions: RadioOption[] = [ - { label: "Opción 1", value: "op1" }, - { label: "Opción 2", value: "op2" }, - { label: "Opción 3", value: "op3" }, + { label: 'Opción 1', value: 'op1' }, + { label: 'Opción 2', value: 'op2' }, + { label: 'Opción 3', value: 'op3' }, ]; const checkboxOptions: CheckboxOption[] = [ - { label: "Activo", value: "a" }, - { label: "Inactivo", value: "b" }, - { label: "Pendiente", value: "c" }, + { label: 'Activo', value: 'a' }, + { label: 'Inactivo', value: 'b' }, + { label: 'Pendiente', value: 'c' }, ]; const handleCheckboxChange = ( @@ -51,24 +51,24 @@ export default function RadioCheckboxDocs() { <> -
-

- Componentes: RadioOptionGroup y{" "} +
+

+ Componentes: RadioOptionGroup y{' '} CheckboxOptionGroup

-

+

Estos componentes permiten mostrar grupos de opciones radio o checkbox, para seleccionar una o varias opciones respectivamente. Son útiles en formularios, encuestas o filtros. Los estilos de estos - componentes se basan en Bootstrap y se encuentran el el archivo{" "} - @/styles/sass/_extneds.scss y es el selector{" "} + componentes se basan en Bootstrap y se encuentran el el archivo{' '} + @/styles/sass/_extneds.scss y es el selector{' '} .option.

@@ -77,16 +77,16 @@ export default function RadioCheckboxDocs() { import CheckboxOptionGroup, { CheckboxOption } from "@/components/checkbox-option-group";`} /> -
+
{}} /> @@ -127,13 +127,13 @@ import CheckboxOptionGroup, { CheckboxOption } from "@/components/checkbox-optio @@ -143,14 +143,14 @@ import CheckboxOptionGroup, { CheckboxOption } from "@/components/checkbox-optio /> -
-

Props comunes

+
+

Props comunes

  • name: Nombre del grupo de inputs.
  • - options: Lista de opciones con label,{" "} + options: Lista de opciones con label,{' '} value y opcionalmente disabled.
  • @@ -158,7 +158,7 @@ import CheckboxOptionGroup, { CheckboxOption } from "@/components/checkbox-optio
-

+

Props de RadioOptionGroup

    @@ -174,7 +174,7 @@ import CheckboxOptionGroup, { CheckboxOption } from "@/components/checkbox-optio
-

+

☑️ Props de CheckboxOptionGroup

    diff --git a/src/app/(components)/pagination/page.tsx b/src/app/(components)/pagination/page.tsx index 5609caf..97803ce 100644 --- a/src/app/(components)/pagination/page.tsx +++ b/src/app/(components)/pagination/page.tsx @@ -1,14 +1,14 @@ -"use client"; +'use client'; -import React, { useState } from "react"; -import VistaComponente from "@/components/vista-componente"; -import { CodeBlock } from "@/components/code-block"; -import Pagination from "@/components/pagination"; +import React, { useState } from 'react'; +import VistaComponente from '@/components/docs/vista-componente'; +import { CodeBlock } from '@/components/docs/code-block'; +import Pagination from '@/components/pagination'; import { paginationBasic, paginationWithDelta, -} from "@/snippets/pagination/pagination-example"; -import IndiceContenido from "@/components/content-index"; +} from '@/snippets/pagination/pagination-example'; +import IndiceContenido from '@/components/docs/content-index'; export default function Page() { const [currentPage1, setCurrentPage1] = useState(1); @@ -18,20 +18,20 @@ export default function Page() { <> -
    -

    +
    +

    📄 Componente: Pagination

    -

    +

    El componente <Pagination /> permite navegar entre páginas de forma controlada. Es completamente reutilizable y permite mostrar botones de anterior/siguiente y paginación con saltos. @@ -39,31 +39,31 @@ export default function Page() { -

    +
    {/* Ejemplo básico */} -

    +

    Página actual: {currentPage1}

    {/* Ejemplo con delta */} -

    +

    Página actual: {currentPage2}

    {/* Props */} -
    -

    ⚙️ Props del componente

    +
    +

    ⚙️ Props del componente

    • totalPages: number — Total de páginas diff --git a/src/app/(components)/popover/page.tsx b/src/app/(components)/popover/page.tsx index 9a408ab..334030e 100644 --- a/src/app/(components)/popover/page.tsx +++ b/src/app/(components)/popover/page.tsx @@ -1,7 +1,7 @@ 'use client'; -import IndiceContenido from '@/components/content-index'; -import VistaComponente from '@/components/vista-componente'; +import IndiceContenido from '@/components/docs/content-index'; +import VistaComponente from '@/components/docs/vista-componente'; import Popover from '@/components/popover'; export default function Page() { diff --git a/src/app/(components)/progress-bar/page.tsx b/src/app/(components)/progress-bar/page.tsx new file mode 100644 index 0000000..2df0be0 --- /dev/null +++ b/src/app/(components)/progress-bar/page.tsx @@ -0,0 +1,102 @@ +'use client'; + +import { CodeBlock } from '@/components/docs/code-block'; +import IndiceContenido from '@/components/docs/content-index'; +import VistaComponente from '@/components/docs/vista-componente'; +import ProgressBar, { EstatusEskeleton } from '@/components/progress-bar'; + +export default function Page() { + const estados = ['Pendiente', 'En proceso', 'Completado', 'Entregado']; + return ( + <> + + +
      +

      + 🚀 Componente: ProgressBar +

      + +

      + El componente <ProgressBar /> muestra una barra de + progreso basada en una lista de estados y el índice del estado activo. + Incluye vista responsiva: multistep en pantallas md+ y paso único en + móvil. +

      + + + +
      + + `} + > + + + + `} + > + + + + {/* PROPS */} +
      +

      + ⚙️ Props de ProgressBar +

      + + + + + + + + + + + + + + + + + + + + +
      PropTipoDescripción
      + estados + + string[] + Listado de etiquetas para cada paso.
      + estadoActivo + + number + Índice (0-based) del paso actualmente activo.
      + +

      + ⚙️ Props de EstatusEskeleton +

      +

      Este componente no recibe props.

      +
      +
      + + ); +} diff --git a/src/app/(components)/select/page.tsx b/src/app/(components)/select/page.tsx index 52a9676..d678f75 100644 --- a/src/app/(components)/select/page.tsx +++ b/src/app/(components)/select/page.tsx @@ -1,52 +1,55 @@ -"use client"; +'use client'; -import IndiceContenido from "@/components/content-index"; -import Select from "@/components/select"; -import VistaComponente from "@/components/vista-componente"; -import { countrySelectSnippet, languageSelectSnippet } from "@/snippets/select/select"; -import { useState } from "react"; +import IndiceContenido from '@/components/docs/content-index'; +import Select from '@/components/select'; +import VistaComponente from '@/components/docs/vista-componente'; +import { + countrySelectSnippet, + languageSelectSnippet, +} from '@/snippets/select/select'; +import { useState } from 'react'; export default function Page() { - const [pais, setPais] = useState(""); + const [pais, setPais] = useState(''); const opcionesPais = [ - { value: "mx", label: "México" }, - { value: "us", label: "Estados Unidos" }, - { value: "ca", label: "Canadá" }, + { value: 'mx', label: 'México' }, + { value: 'us', label: 'Estados Unidos' }, + { value: 'ca', label: 'Canadá' }, ]; return ( <> -
      -

      +
      +

      Componente: Select

      -

      +

      El componente <Select /> permite mostrar una lista desplegable con opciones personalizables, soporta etiquetas, estilos por clase, y es compatible con formularios.

      -
      +
      -
      -

      Props del componente

      +
      +

      Props del componente

      • label: string – Etiqueta visible del campo. @@ -86,7 +89,7 @@ export default function Page() { options: { value: string | number; label: string }[] - {" "} + {' '} – Opciones a mostrar.
      • @@ -108,11 +111,11 @@ export default function Page() { (modo controlado).
      • - className?: { container?, label?, input? }{" "} + className?: { container?, label?, input? }{' '} – Clases personalizadas.
      • - ...rest – Cualquier otra prop válida de{" "} + ...rest – Cualquier otra prop válida de{' '} <select>.
      diff --git a/src/app/(components)/sidebar/page.tsx b/src/app/(components)/sidebar/page.tsx index 6eac9c2..50ec21e 100644 --- a/src/app/(components)/sidebar/page.tsx +++ b/src/app/(components)/sidebar/page.tsx @@ -1,64 +1,64 @@ -"use client"; -import IndiceContenido from "@/components/content-index"; -import Sidebar, { SidebarLink } from "@/components/sidebar"; -import VistaComponente from "@/components/vista-componente"; -import React from "react"; +'use client'; +import IndiceContenido from '@/components/docs/content-index'; +import Sidebar, { SidebarLink } from '@/components/sidebar'; +import VistaComponente from '@/components/docs/vista-componente'; +import React from 'react'; const basicLinks: SidebarLink[] = [ - { icon: "bi-house", text: "Inicio", href: "/inicio" }, + { icon: 'bi-house', text: 'Inicio', href: '/inicio' }, { - icon: "bi-person", - text: "Perfil", - href: "/perfil", - className: "hover-bg-success", + icon: 'bi-person', + text: 'Perfil', + href: '/perfil', + className: 'hover-bg-success', }, { - icon: "bi-envelope", - text: "Mensajes", - href: "/mensajes", - className: "hover-bg-info", + icon: 'bi-envelope', + text: 'Mensajes', + href: '/mensajes', + className: 'hover-bg-info', }, { - icon: "bi-gear", - text: "Configuración", - href: "/configuracion", - className: "hover-bg-warning", + icon: 'bi-gear', + text: 'Configuración', + href: '/configuracion', + className: 'hover-bg-warning', }, { - icon: "bi-bar-chart", - text: "Reportes", - href: "/reportes", - className: "hover-bg-danger", + icon: 'bi-bar-chart', + text: 'Reportes', + href: '/reportes', + className: 'hover-bg-danger', }, ]; const onClickLinks: SidebarLink[] = [ { - icon: "bi-lightning", - text: "Acción rápida", - onClick: () => alert("¡Ejecutando acción rápida!"), - className: "hover-bg-warning text-warning", + icon: 'bi-lightning', + text: 'Acción rápida', + onClick: () => alert('¡Ejecutando acción rápida!'), + className: 'hover-bg-warning text-warning', }, { - icon: "bi-question-circle", - text: "Ayuda", - onClick: () => alert("Mostrando ayuda..."), - className: "hover-bg-info text-info", + icon: 'bi-question-circle', + text: 'Ayuda', + onClick: () => alert('Mostrando ayuda...'), + className: 'hover-bg-info text-info', }, { - icon: "bi-bell", - text: "Notificaciones", - onClick: () => alert("Mostrando notificaciones..."), - className: "hover-bg-primary text-primary", + icon: 'bi-bell', + text: 'Notificaciones', + onClick: () => alert('Mostrando notificaciones...'), + className: 'hover-bg-primary text-primary', }, ]; const renderItems: SidebarLink[] = [ { render: () => ( -
    • -
      - +
    • +
      + Componente especial
      • @@ -66,9 +66,9 @@ const renderItems: SidebarLink[] = [ }, { render: () => ( -
    • -
      - +
    • +
      + Favoritos
      • @@ -76,9 +76,9 @@ const renderItems: SidebarLink[] = [ }, { render: () => ( -
    • -
      - +
    • +
      + Alertas
      • @@ -86,9 +86,9 @@ const renderItems: SidebarLink[] = [ }, { render: () => ( -
    • -
      - +
    • +
      + Ideas
      • @@ -101,25 +101,25 @@ export default function Page() { <> -
      -

      +
      +

      Componente: Sidebar

      -

      +

      El Sidebar es un componente versátil que funciona como un menú lateral adaptable, diseñado para ser accesible tanto en dispositivos móviles como en pantallas de escritorio. Permite incluir @@ -127,43 +127,41 @@ export default function Page() { elementos renderizados dinámicamente.

      -
      +
      -
      +
      -
      - -
      +
      -
      +
      -
      +

      Contenido interactivo

      Cada enlace ejecuta una acción mediante onClick. @@ -175,20 +173,20 @@ export default function Page() { -

      +
      -
      +

      Elementos renderizados

      La propiedad render permite insertar cualquier JSX @@ -200,20 +198,20 @@ export default function Page() { -

      +
      -
      +

      Hover personalizados

      Gracias a las clases hover-bg-COLOR generadas a diff --git a/src/app/(components)/styles/page.tsx b/src/app/(components)/styles/page.tsx index 2f6330a..0635e0b 100644 --- a/src/app/(components)/styles/page.tsx +++ b/src/app/(components)/styles/page.tsx @@ -1,123 +1,125 @@ -"use client"; -import React from "react"; -import IndiceContenido from "@/components/content-index"; -import VistaComponente from "@/components/vista-componente"; +'use client'; +import React from 'react'; +import IndiceContenido from '@/components/docs/content-index'; +import VistaComponente from '@/components/docs/vista-componente'; export default function Page() { return ( <> -

      -

      Estilos

      +
      +

      Estilos

      -

      +

      Los estilos de la aplicación se basan en Bootstrap 5 y se personalizan mediante clases SCSS para mantener una apariencia coherente y flexible.

      -
      +
      -
      - +
      + Leer la documentación de .box

      div con className .box

      `} > -
      -

      +
      +

      div con className .box

      div con className .box

      `} > -
      -

      - div con className .box .active +
      +

      + div con className .box{' '} + .active

      div con className .box

      `} > -
      -

      - div con className .box .disabled +
      +

      + div con className .box{' '} + .disabled

      Gradiente desde arriba (top) con color primario

      `} > -
      +
      Gradiente desde arriba (top) con color primario
      -
      +
      Gradiente desde la derecha (right) con color success
      -
      +
      Gradiente desde abajo (bottom) con color warning
      -
      +
      Gradiente desde la izquierda (left) con color info
      -

      Ejemplo de gradiente de Bootstrap 5

      -

      +

      Ejemplo de gradiente de Bootstrap 5

      +

      Bootstrap incluye su propio estilo .bg-gradient que aplica un efecto sutil sobre el fondo.

      -
      +
      Fondo con .bg-primary.bg-gradient
      Escala 1.05
      Escala 1.15
      Escala 1.25
      `} > -
      +
      {[1, 2, 3, 4, 5].map((scale) => (
      {`scale-hover-${scale}`}
      ({(1 + scale * 0.05).toFixed(2)}x) @@ -127,33 +129,33 @@ export default function Page() { Hover primario
      Elemento activo con fondo success
      `} > -
      - {["primary", "success", "warning", "danger", "azul"].map( +
      + {['primary', 'success', 'warning', 'danger', 'azul'].map( (color) => (
      {`hover-bg-${color}`}
      - {color === "primary" && "(hover o active)"} + {color === 'primary' && '(hover o active)'}
      ) )}
      -

      +

      Ejemplo con .nav-link

      -
      - + diff --git a/src/app/(components)/table/page.tsx b/src/app/(components)/table/page.tsx index ccf4e9c..13a3d15 100644 --- a/src/app/(components)/table/page.tsx +++ b/src/app/(components)/table/page.tsx @@ -2,7 +2,7 @@ import React, { useState } from 'react'; import Table, { Header, TableSkeleton } from '@/components/table'; -import VistaComponente from '@/components/vista-componente'; +import VistaComponente from '@/components/docs/vista-componente'; import { tableBasicExample, tableSkeletonExample, @@ -12,10 +12,10 @@ import { tableAutoPagination } from '@/snippets/table/table-auto-pagination'; import { tableCustomPagination } from '@/snippets/table/table-custom-pagination'; import { tableCustomCellRender } from '@/snippets/table/table-custom-cell-render'; import { tableColumnWidth } from '@/snippets/table/table-column-width'; -import { CodeBlock } from '@/components/code-block'; +import { CodeBlock } from '@/components/docs/code-block'; import Input from '@/components/input'; import { tableFilter } from '@/snippets/table/table-filter'; -import IndiceContenido from '@/components/content-index'; +import IndiceContenido from '@/components/docs/content-index'; export default function Page() { const headers: Header<{ diff --git a/src/app/(components)/tabs/page.tsx b/src/app/(components)/tabs/page.tsx index c6df03d..ce42990 100644 --- a/src/app/(components)/tabs/page.tsx +++ b/src/app/(components)/tabs/page.tsx @@ -1,44 +1,74 @@ -"use client"; +'use client'; -import { CodeBlock } from "@/components/code-block"; -import IndiceContenido from "@/components/content-index"; -import Tabs from "@/components/tabs"; -import VistaComponente from "@/components/vista-componente"; +import { CodeBlock } from '@/components/docs/code-block'; +import IndiceContenido from '@/components/docs/content-index'; +import Tabs from '@/components/tabs'; +import VistaComponente from '@/components/docs/vista-componente'; export default function Page() { return ( <> -
      -

      +
      +

      🧩 Componente: Tabs

      -

      - El componente <Tabs /> permite organizar contenido - en pestañas, ofreciendo opciones de estilos y soporte para pestañas - desactivadas. -
      - El tiempo de animacion de las pestañas es de 0.3s. pero se puede - modificar en el archivo src/styles/sass/_tabs.scss +

      + Inicio

      }, + { id: 'profile-4', title: 'Perfil', content:

      Perfil

      }, + { + id: 'settings-4', + title: 'Configuraciones', + content:

      Configuraciones

      , + }, + ]} + /> + Contenido de inicio

      , + }, + { + id: 'profile-3', + title: 'Perfil', + content:

      Contenido del perfil

      , + }, + ]} + /> +
      + +

      + El componente <Tabs /> organiza contenido en + pestañas, con opciones de estilo (default y{' '} + box), soporte para pestañas deshabilitadas y pestaña + activa inicial via + defaultActiveTab.

      -
      +
      Contenido de inicio

      }, @@ -50,45 +80,45 @@ export default function Page() { Contenido de inicio

      , }, { - id: "profile-1", - title: "Perfil", + id: 'profile-1', + title: 'Perfil', content:

      Contenido del perfil

      , }, { - id: "settings-1", - title: "Configuraciones", - content:

      Contenido de configuraciones

      , + id: 'settings-1', + title: 'Configuraciones', + content:

      Configuraciones

      , }, ]} />       Contenido de inicio

      }, - { id: "disabled", title: "Desactivado", content:

      No seleccionable

      , disabled: true }, + { id: "home", title: "Inicio", content:

      ...

      }, + { id: "disabled", title: "Desactivado", content:

      ...

      , disabled: true }, ] />`} > Contenido de inicio

      , }, { - id: "disabled-2", - title: "Desactivado", + id: 'disabled-2', + title: 'Desactivado', content:

      No seleccionable

      , disabled: true, }, @@ -97,49 +127,64 @@ export default function Page() {       Contenido de inicio

      }, - { id: "profile", title: "Perfil", content:

      Contenido del perfil

      }, - ] style="box" + tabs=[ + { id: "home", title: "Inicio", content:

      ...

      }, + { id: "profile", title: "Perfil", content:

      ...

      }, + ] />`} > Contenido de inicio

      , }, { - id: "profile-3", - title: "Perfil", + id: 'profile-3', + title: 'Perfil', content:

      Contenido del perfil

      , }, - { - id: "settings-3", - title: "Configuraciones", - content:

      Contenido del perfil

      , - disabled: true, - }, + ]} + /> +       + + ...

      }, + { id: "profile", title: "Perfil", content:

      ...

      }, + ] +/>`} + > + Inicio

      }, + { id: 'profile-4', title: 'Perfil', content:

      Perfil

      }, ]} />       {/* PROPS */} -
      -

      ⚙️ Props del componente

      - +
      +

      ⚙️ Props del componente

      +
      - - - + + + @@ -150,14 +195,14 @@ export default function Page() { - + @@ -167,49 +212,82 @@ export default function Page() { - + - + + + +
      PropTipoDescripciónPropTipoDescripción
      Tab[] Lista de pestañas con ID, título y contenido.Lista de pestañas con id, título y contenido.
      style? - "default" | "box" + "default" | "box" Estilo de las pestañas.
      - {"{ container?: string; tab?: string; content?: string; }"} + {'{ container?: string; tab?: string; content?: string; }'} - Clases CSS personalizables para diferentes partes del - componente. - Clases CSS personalizables.
      - Tab.id + defaultActiveTab? string Identificador único de la pestaña. + ID de la pestaña que se muestra inicialmente si no está + deshabilitada. +
      + +

      + Props de cada pestaña (Tab) +

      + + + + + + + + + + + + + - + + + + + + - + - +
      PropTipoDescripción
      + id + + string + Identificador único.
      - Tab.title + title string | JSX.Element Título de la pestaña.Título mostrado en la pestaña.
      - Tab.content + titleText? + + string + Texto alternativo para tooltips si el título se trunca.
      + content JSX.Element Contenido dentro de la pestaña.Contenido renderizado al activar la pestaña.
      - Tab.disabled? + disabled? boolean Si la pestaña debe estar deshabilitada.Deshabilita la pestaña.
      diff --git a/src/app/page.tsx b/src/app/page.tsx index b14bd40..06eb5a6 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -1,6 +1,6 @@ 'use client'; -import ComponentCard from '@/components/component-card'; +import ComponentCard from '@/components/docs/component-card'; import Image from 'next/image'; import React from 'react'; import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'; @@ -46,7 +46,7 @@ export default function Page() { customStyle={{ borderRadius: '10px' }} > {`npm i bootstrap bootstrap-icons -npm i --save-dev sass +npm i --save-dev sass@1.32.13 npm i --save-dev @types/bootstrap`} @@ -126,6 +126,13 @@ import BootstrapClient from "@/components/bootstrap-client";`}
      +
      + +

      diff --git a/src/components/code-block.tsx b/src/components/docs/code-block.tsx similarity index 100% rename from src/components/code-block.tsx rename to src/components/docs/code-block.tsx diff --git a/src/components/component-card.tsx b/src/components/docs/component-card.tsx similarity index 100% rename from src/components/component-card.tsx rename to src/components/docs/component-card.tsx diff --git a/src/components/content-index.tsx b/src/components/docs/content-index.tsx similarity index 100% rename from src/components/content-index.tsx rename to src/components/docs/content-index.tsx diff --git a/src/components/vista-componente.tsx b/src/components/docs/vista-componente.tsx similarity index 97% rename from src/components/vista-componente.tsx rename to src/components/docs/vista-componente.tsx index b8f75bf..aa8fd6d 100644 --- a/src/components/vista-componente.tsx +++ b/src/components/docs/vista-componente.tsx @@ -1,5 +1,5 @@ import { CodeBlock } from './code-block'; -import Button from './button'; +import Button from '../button'; import { useState } from 'react'; interface VistaComponenteProps { diff --git a/src/components/progress-bar.tsx b/src/components/progress-bar.tsx new file mode 100644 index 0000000..cd0ef72 --- /dev/null +++ b/src/components/progress-bar.tsx @@ -0,0 +1,43 @@ +import React from 'react'; + +interface EstatusProps { + estados: string[]; + estadoActivo: number; +} + +export default function ProgressBar({ estados, estadoActivo }: EstatusProps) { + return ( + <> +
      + {estados.map((label, index) => ( +
      + {index + 1} + {label} +
      + ))} +
      +
      +
      + {estadoActivo + 1} + {estados[estadoActivo]} +
      +
      + + ); +} + +function EstatusEskeleton() { + return ( +
      + Estatus: +
      + +
      +
      + ); +} + +export { EstatusEskeleton }; diff --git a/src/components/tabs.tsx b/src/components/tabs.tsx index 2be6821..2ae35de 100644 --- a/src/components/tabs.tsx +++ b/src/components/tabs.tsx @@ -1,48 +1,61 @@ -import React, { useState, JSX } from "react"; +import React, { useState, JSX } from 'react'; interface Tab { id: string; title: string | JSX.Element; + titleText?: string; content: JSX.Element; disabled?: boolean; } - interface TabsProps { tabs: Tab[]; - style?: "default" | "box"; + style?: 'default' | 'box'; className?: { container?: string; tab?: string; content?: string; }; + defaultActiveTab?: string; } export default function Tabs({ tabs, - style = "default", + style = 'default', className, + defaultActiveTab, }: TabsProps) { - const [activeTab, setActiveTab] = useState(tabs[0]?.id || ""); + const [activeTab, setActiveTab] = useState(() => { + // 1) si se pasó defaultActiveTab y existe en tabs (y no está disabled), úsala + if (defaultActiveTab) { + const found = tabs.find((t) => t.id === defaultActiveTab && !t.disabled); + if (found) return found.id; + } + // 2) si no, buscar el primer tab habilitado + const firstEnabled = tabs.find((t) => !t.disabled); + return firstEnabled ? firstEnabled.id : tabs[0]?.id || ''; + }); return ( <> -
        +
          {tabs.map((tab) => (
          • ))}
        -
        +
        {tabs.map((tab) => (
        {activeTab === tab.id && tab.content} diff --git a/src/styles/sass/_progress-bar.scss b/src/styles/sass/_progress-bar.scss new file mode 100644 index 0000000..cb09728 --- /dev/null +++ b/src/styles/sass/_progress-bar.scss @@ -0,0 +1,57 @@ +.track { + position: relative; + background-color: #cecece; + height: 7px; + display: flex; + color: #fff; + border-radius: 10px; + + .step { + flex-grow: 1; + margin-top: -18px; + text-align: center; + position: relative; + + .icon { + display: inline-block; + width: 40px; + height: 40px; + line-height: 40px; + position: relative; + border-radius: 100%; + background: #cecece; + } + + .text { + color: #000; + display: block; + margin-top: 7px; + } + + &.active::before { + background: #007bff; + height: 7px; + position: absolute; + content: ''; + width: 100%; + left: 0; + top: 18px; + } + + &.active .icon { + background: #007bff; + color: #fff; + font-weight: bold; + } + } +} + +.heatmap-legend { + width: 40px; + height: 20px; + display: flex; + align-items: center; + justify-content: center; + font-size: 10px; + border: 1px solid #dee2e6; +} diff --git a/src/styles/sass/_tabs.scss b/src/styles/sass/_tabs.scss index b864ca3..318231a 100644 --- a/src/styles/sass/_tabs.scss +++ b/src/styles/sass/_tabs.scss @@ -1,5 +1,5 @@ .tab-pane.fade { - transition: opacity 10s linear !important; + transition: opacity 0.4s linear !important; } .nav-tabs.style-box { diff --git a/src/styles/sass/bootstrap.scss b/src/styles/sass/bootstrap.scss index e4cbffe..b56655b 100644 --- a/src/styles/sass/bootstrap.scss +++ b/src/styles/sass/bootstrap.scss @@ -27,6 +27,7 @@ $theme-colors: map-merge($theme-colors, $custom-colors); @import 'sidebar'; @import 'hover'; @import 'tabs'; +@import 'progress-bar'; //Add additional custom code here