Configuration

Configuración de RnPuniKit

El archivo RnPuniKitConfig.ts contiene la interfaz de configuración para la librería RnPuniKit. Esta interfaz permite personalizar diversos aspectos de la apariencia y comportamiento de la librería. A continuación, se describen las secciones clave de la configuración.

Estructura de Configuración

RnPuniKitConfig

La interfaz principal de configuración que agrupa las siguientes secciones:

Propiedad	Tipo
palette	PaletteColors
buttons	buttons
switch	Switch
typography	Tipografía
forms	Formularios
RnCore	Core

Paleta de Colores

Propiedad	Descripción	Default
LIGHT	Color para el modo claro.	#ffffff
MEDIUM	Color para el modo intermedio.	#757575
PRIMARY	Color principal.	#db002a
ALERT	Color para alertas.	#ff9047
SUCCESS	Color para indicar éxito.	#1ee49e
BACK	Color de fondo.	#f2f2f2
DARK	Color para el modo oscuro.	#232426

Core

Configuración de elementos Core de React

Propiedad	Descripción	Tipo	Default
pressableOpacity	Opacidad al presionar el componente Pressable	number	0.8

Botones

Botón Primario

Propiedad	Descripción	Tipos Posibles
borderRadius	Radio de borde.	number
backgroundColor	Color de fondo.	PaletteColors
fontType	Tipo de fuente.	RnPuniKitConfigTypographyFontTypes
fontColor	Color del texto.	PaletteColors

Botón de Enlace

Propiedad	Descripción	Tipos Posibles
color	Color del enlace.	PaletteColors
fontType	Tipo de fuente.	RnPuniKitConfigTypographyFontTypes

Switch

Propiedad	Descripción	Tipos Posibles
trackColor	Colores de la pista para estados verdadero/falso	{true: PaletteColors, false: PaletteColors}
thumbColor	Color del pulgar.	PaletteColors
ios_backgroundColor	Color de fondo en iOS.	PaletteColors

Tipografía

Familia de Fuentes

Propiedad	Descripción	Tipos Posibles
light	Fuente ligera.	string
regular	Fuente regular.	string
bold	Fuente negrita.	string

Tipos de Fuente

Propiedad
head_1
head_2
head_3
head_4
body_1
body_2
caption_1
caption_2

Formularios

Propiedad	Descripción	Tipos Posibles
borderRadius	Radio de borde para formularios.	number
onlyActiveInBottom	Indica si solo es activo en la parte inferior.	boolean
backgroundColor	Color de fondo.	PaletteColors
borderColor	Color del borde.	PaletteColors

Ejemplo de archivo

El fichero puni-kit.config.ts permite personalizar los componentes de la librería.

import {RnPuniKitConfig} from '@rn-punikit/base'

module.exports = {
  palette: {
    LIGHT: '#ffffff',
    MEDIUM: '#757575',
    PRIMARY: '#db002a',
    ALERT: '#ff9047',
    SUCCESS: '#1ee49e',
    BACK: '#f2f2f2',
    DARK: '#232426',
  },
  RnCore: {
    pressableOpacity: 0.8,
  },
  buttons: {
    primary: {
      borderRadius: 4,
      backgroundColor: 'PRIMARY',
      fontType: 'body_1',
      fontColor: 'LIGHT',
    },
  },
  switch: {
    trackColor: {
      true: 'PRIMARY',
      false: 'DARK',
    },
    thumbColor: 'LIGHT',
    ios_backgroundColor: 'DARK',
  },
  forms: {
    borderRadius: 5,
    onlyActiveInBottom: true,
    backgroundColor: 'MEDIUM',
    borderColor: 'DARK',
    activeBorderColor: 'DARK',
    text: {
      color: 'DARK',
      fontType: 'body_1',
    },
    label: {
      color: 'MEDIUM',
      fontType: 'caption_1',
    },
  },
  typography: {
    fontFamily: {},
    fontTypes: {
      head_1: {
        fontSize: 34,
        letterSpacing: 0.2,
      },
      head_2: {
        fontSize: 28,
        letterSpacing: 0.2,
      },
      head_3: {
        fontSize: 22,
        letterSpacing: 0.4,
      },
      head_4: {
        fontSize: 20,
        letterSpacing: 0.2,
      },

      body_1: {
        fontSize: 17,
        letterSpacing: 0.2,
      },
      body_2: {
        fontSize: 15,
        letterSpacing: 0.2,
      },
      caption_1: {
        fontSize: 13,
        letterSpacing: 0.2,
      },
      caption_2: {
        fontSize: 11,
        letterSpacing: 0.2,
      },
    },
  },
} as RnPuniKitConfig

This configuration file is optional, and you can adjust the color palette, button styles, and typography to match your project's design.