Groker

Groker es una biblioteca de componentes reutilizables para React que incluye íconos, utilidades de fecha y otros módulos útiles. Está diseñada para ser modular y fácil de integrar en proyectos modernos.

• Uso
• Componentes
  • ToggleSwitch
  • Button
  • ConfirmModal
  • AlertModal
  • TextInput
  • DateInput
  • Selector
• Funciones
• Iconos
• Como contribuir

Instalación

Para instalar Groker, ejecuta el siguiente comando: npm install groker

Uso

Importacion de estilos del paquete

Antes de usar los componentes, asegúrate de importar los estilos globales del paquete en tu archivo principal (por ejemplo, main.jsx o index.js): import 'groker/dist/groker.css'; Esto aplicará los estilos necesarios para que los componentes se vean correctamente.

Importar Componentes

Puedes importar componentes, íconos y utilidades desde el paquete principal (groker) o desde módulos específicos (groker/components, groker/icons, etc.).

• Opción 1: Importar desde el Paquete Principal Si prefieres simplicidad, puedes importar todo directamente desde 'groker':

import { ToggleSwitch } from 'groker'; // Componente
import { DarkMode_icon, LightMode_icon } from 'groker'; // Íconos
import { today } from 'groker'; // Utilidad de fecha

• Opción 2: Importar desde Módulos Específicos Si prefieres modularidad, puedes importar desde módulos específicos:

import { ToggleSwitch } from 'groker/components'; // Componentes
import { DarkMode_icon, LightMode_icon } from 'groker/icons'; // Íconos
import { today } from 'groker/date'; // Utilidades de fecha

Ejemplo de Uso

Aquí tienes un ejemplo básico de cómo usar Groker en una aplicación React:

import React from 'react';
import ReactDOM from 'react-dom/client';
import 'groker/dist/groker.css'; // Importa los estilos globales
import { ToggleSwitch } from 'groker/components'; // Importa un componente
import { DarkMode_icon, LightMode_icon } from 'groker/icons'; // Importa íconos

function App() {
  const [isDarkMode, setIsDarkMode] = React.useState(false);

  return (
    <div>
      <h1>Groker Example</h1>
      <ToggleSwitch
        switcher={isDarkMode}
        onEvent={() => setIsDarkMode(!isDarkMode)}
      />
      <p>{isDarkMode ? 'Modo Oscuro' : 'Modo Claro'}</p>
      {isDarkMode ? <DarkMode_icon /> : <LightMode_icon />}
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

Estructura del Paquete

• groke/components: Componentes reutilizables como ToggleSwitch, ConfirmModal, etc.
• groke/icons: Íconos como DarkMode_icon, LightMode_icon, Calendar, etc.
• groke/date : Utilidades relacionadas con fechas, como today.
• groke/dist/groker.css: Archivo CSS con los estilos globales del paquete.

Lista de Componentes, Funciones e Iconos

Componentes (groker/components)

• ToggleSwitch : Un interruptor de on/off.

Props:
| Nombre      | Tipo       | Requerido | Descripción                                      | Valor por Defecto |
|-------------|------------|-----------|--------------------------------------------------|-------------------|
| `switcher`  | `boolean`  | No        | Indica si el interruptor está activado o no.     | -                 |
| `onEvent`   | `function` | No        | Función que se ejecuta cuando cambia el estado.  | -                 |
| `name`      | `string`   | No        | Nombre del input type checkbox.                  | ""                |

import { ToggleSwitch } from 'groker/components';

function App() {
  const [isTrue, setIsTrue] = React.useState(false)

  return (
    <div>
      <ToggleSwitch onEvent={() => console.log(`switched to ${isTrue}`)} switcher={isTrue}> name="my toggle switch" />
    </div>
  );
}

• Button : Boton reutilizable con estilos predeterminados

Props:
| Nombre      | Tipo       | Requerido | Descripción                                      | Valor por Defecto |
|-------------|------------|-----------|--------------------------------------------------|-------------------|
| `children`  | `ReactNode`| Si        | Contenido renderizable dentro del componente.    | -                 |
| `onEvent`   | `function` | No        | Función que se ejecuta cuando se hace click.     | -                 |
| `className` | `string`   | No        | Clases de estilo customizables.                  | ""                |
| `theme`     | `string`   | No        | ligh/dark para uso de colores.                   | "light"           |

import { Button } from 'groker/components';

function App() {
  return (
    <div>
      {/* Children como texto */}
      <Button theme="light" onEvent={() => alert('¡Clic!')}>
        Botón Primario
      </Button>

      {/* Children como JSX */}
      <Button theme="dark" className="your-custom-button-class">
        <span style={{ color: 'white' }}>Botón Secundario</span>
      </Button>

      {/* Children como un número */}
      <Button>42</Button>
    </div>
  );
}

• ConfirmModal : Ventana modal que permite confirmar o rechazar.

Props:
| Nombre      | Tipo       | Requerido | Descripción                                      | Valor por Defecto |
|-------------|------------|-----------|--------------------------------------------------|-------------------|
| `isOpen`    | `boolean`  | Si        | Indica si el modal está abierto o no.            | false             |
| `onClose`   | `function` | Si        | Función que se ejecuta cuando cambia el estado.  | -                 |
| `onConfirm` | `function` | Si        | Función que se ejecuta cuando cambia el estado.  | -                 |
| `message`   | `string`   | Si        | Texto que se muestra en el componente.           | ""                |
| `className` | `string`   | No        | Clases de estilo customizables.                  | ""                |
| `theme`     | `string`   | No        | ligh/dark para uso de colores.                   | "light"           |

import React from 'react'
import { ConfirmModal } from 'groker/components';

function App() {
  const [isModalOpen, setIsModalOpen] = React.useState(false) // Estado para el modal

  const cunstomHandlerThatOpensTheModal = () => {
    // ... mas logica a ejecutar
    setIsModalOpen(true) // Abre el modal
  }

  const customHandlerWhenConfirms = () => {
    // ... mas logica a ejecutar
    setIsModalOpen(false) // Cierra el modal
  }

  const customHandlerThatClosesModal = () => {
    // ... mas logica a ejecutar
    setIsModalOpen(false) // Cierra el modal
  }

  return (
    <div>
      <ConfirmModal
        isOpen={isModalOpen}
        onClose={customHandlerThatClosesModal}
        onConfirm={customHandlerWhenConfirms}
        message={`¿Estás seguro de que deseas realizar esta acción"?`}
        theme={theme}
      />
 </div>
  );
}

• AlertModal : Ventana modal informativa solo permite confirmar.

Props:
| Nombre      | Tipo       | Requerido | Descripción                                      | Valor por Defecto |
|-------------|------------|-----------|--------------------------------------------------|-------------------|
| `isOpen`    | `boolean`  | Si        | Función que se ejecuta cuando cambia el estado.  | -                 |
| `onClose`   | `function` | Si        | Función que se ejecuta cuando cambia el estado.  | -                 |
| `message`   | `string`   | Si        | Texto que se muestra en el componente.           | ""                |
| `className` | `string`   | No        | Clases de estilo customizables.                  | ""                |
| `theme`     | `string`   | No        | ligh/dark para uso de colores.                   | "light"           |

import React from 'react'
import { AlertModal } from 'groker/components';

function App() {
  const [isModalOpen, setIsModalOpen] = React.useState(false) // Estado para el modal
  const theme = 'dark'

  const cunstomHandlerThatOpensTheModal = () => {
    // ... mas logica a ejecutar
    setIsModalOpen(true) // Abre el modal
  }

  const customHandlerThatClosesModal = () => {
    // ... mas logica a ejecutar
    setIsModalOpen(false) // Cierra el modal
  }

  return (
    <div>
      <AlertModal
        isOpen={isModalOpen}
        onClose={customHandlerThatClosesModal}
        message={`Alerta! estas por realizar una acción`}
        theme={theme}
      />
 </div>
  );
}

• TextInput : Input de texto con estilos predeterminados

Props:
| Nombre         | Tipo       | Requerido | Descripción                                      | Valor por Defecto |
|----------------|------------|-----------|--------------------------------------------------|-------------------|
| `label`        | `string`   | Si        | Texto que se muestra en el margen sup del comp.  | -                 |
| `defaultValue` | `string`   | No        | Valor por defecto a mostrar.                     | ""                |
| `onChangeEvent`| `function` | Si        | Funcion que se ejecuta en el evento change.      | "void"            |
| `type`         | `string`   | No        | Tipo de input text | number.                     | "text"            |
| `name`         | `string`   | No        | Nombre para el input.                            | ""                |
| `className`    | `string`   | No        | Clases de estilo customizables.                  | ""                |
| `theme`        | `string`   | No        | ligh/dark para uso de colores.                   | "light"           |

import React from 'react'
import { TextInput } from 'groker/components';

function App() {
  const theme = 'light'

  return (
    <div>
     <TextInput
        label="Nombre"
        defaultValue={'Un Input de Texto'}
        name="name"
        theme={theme}
        onChangeEvent={myCustomHandler}
     />
   </div>
  );
}

• DateInput : Input de fecha con estilos predeterminados

Props:
| Nombre         | Tipo       | Requerido | Descripción                                      | Valor por Defecto |
|----------------|------------|-----------|--------------------------------------------------|-------------------|
| `onChangeEvent`| `function` | Si        | Funcion que se ejecuta cuando cambia el valor.   | -                 |
| `label`        | `string`   | No        | Texto que se muestra en el margen sup del comp.  | -                 |
| `iconSize`     | `number`   | No        | Valor para icono de calendario (px).             | 30                |
| `className`    | `string`   | No        | Clases de estilo customizables.                  | ""                |
| `theme`        | `string`   | No        | ligh/dark para uso de colores.                   | "light"           |

import React from 'react'
import { TextInput } from 'groker/components';
import { inputsFormat, calendarFormat } from 'groker/dates';

function App() {
  const [selectedDate, setSelectedDate] = React.useState(new Date())

  const handleChangeEvent = e => {
    setSelectedDate(e.target.value)
  }

  return (
    <div>
     <DateInput
        label="Seleccionar Fecha"
        onChangeEvent={handleChangeEvent}
      />
   </div>
  );
}

• Selector : Selector de opciones con estilos predeterminados

Props:
| Nombre         | Tipo       | Requerido | Descripción                                      | Valor por Defecto |
|----------------|------------|-----------|--------------------------------------------------|-------------------|
| `list`         | `array`    | Si        | Array de string|number que se mostraran listadas | -                 |
| `onChangeEvent`| `function` | No        | Funcion que se ejecuta cuando cambia el valor.   | -                 |
| `defaultValue` | `string`   | No        | Valor por defecto seleccionado.                  | ""                |
| `label`        | `string`   | No        | Texto que se muestra en el margen sup del comp.  | ""                |
| `className`    | `string`   | No        | Clases de estilo customizables.                  | ""                |
| `theme`        | `string`   | No        | ligh/dark para uso de colores.                   | "light"           |

import React from 'react'
import { Selector } from 'groker/components';

function App() {

  // lista con strings, numeros o un mix ✔️
  const listaValida = ['opcion 1', 'otra opcion', 3, 8, 'flores']

  // lista con valores invalidos ❌
  const listaInvalida = [ {}, [], 'no va a listarse', () => {} ]

  return (
    <div>
     <Selector
        onChangeEvent={() => {...}}
        list={listaValida}
      />
   </div>
  );
}

Funciones (groker/date)

• calendarFormat(): param String (algun formato de fecha) returns DD/MM/YY
• inputsFormat(): param String (algun formato de fecha) returns YYYY-MM-DD
• isoFormat(): param String (algun formato de fecha) returns YYYY-MM-DDThh:mm:ss.sssZ
• today: returns YYYY-MM-DD

Iconos (groker/icons)

• Arrow_left
• Calendar
• Chevron_left
• Chevron_right
• Cloud_arrou_up
• DarkMode
• LightMode
• Edit_icon
• Ellipsis_vertical
• Exclamation_circle
• Eye

Contribuciones

Si deseas contribuir al desarrollo de Groker, sigue estos pasos:

1. Clona el repositorio: git clone https://github.com/tu-usuario/groker.git
2. Instala las dependencias: npm install
3. Realiza tus cambios y prueba localmente: npm run build link
4. Envia un pull request con tus mejoras.