@dropi/react-native-design-system

v0.2.7

Published

8 days ago

A React Native package built from scratch

0High
0Medium
0Low

martiolo

react-native react component library

Dropi - React Native Design System 🎨

El Design System de Dropi para aplicaciones React Native. Este paquete reúne la base visual y funcional de nuestros productos móviles, ofreciendo tokens de diseño, componentes reutilizables y patrones consistentes para mantener la coherencia en la experiencia de usuario. Su objetivo es simplificar el desarrollo, acelerar la implementación de interfaces y garantizar que cada proyecto Dropi mantenga una identidad visual sólida y escalable.

Tabla de contenido

Instalación

Para instalar @dropi/react-native-design-system, sigue estos pasos según tu entorno (Expo o React Native CLI).

1️⃣ Requisitos previos (peerDependencies)

Tu proyecto debe tener instaladas estas dependencias mínimas:

"react": ">=19.0.0",
"react-native": ">=0.79.5",
"dropi-lib-icons": ">=1.2.5",
"expo-image": ">=2.4.0"

Si no estás seguro, instálalas con:

npm install react@latest react-native@latest
npm install dropi-lib-icons expo-image

O con yarn:

yarn add dropi-lib-icons expo-image

2️⃣ Instalación del Design System

Usando npm

npm install @dropi/react-native-design-system

Usando yarn

yarn add @dropi/react-native-design-system

3️⃣ Configuración adicional según tu entorno

🔹 Si usas Expo

Nada más que instalar: Expo ya incluye soporte para expo-image, así que todo funcionará out of the box.

🔹 Si usas React Native CLI

Debes asegurarte de instalar y configurar:

expo-image

react-native-svg (solo si tus íconos o componentes lo requieren)

Instala manualmente si no lo tienes:

npm install expo-image

Tokens

Radius

Tokens de radio de borde utilizados en todos los componentes para mantener una coherencia visual en las esquinas redondeadas.

Los tokens radius definen los niveles estándar de redondez de esquinas dentro del sistema de diseño. Son valores numéricos expresados en píxeles, pensados para ser usados en cualquier componente que soporte propiedades de radio de borde (borderRadius). Estos tokens aseguran una identidad visual consistente y permiten ajustar globalmente la suavidad de las esquinas con facilidad.

Spacing

Tokens de espaciado que definen los márgenes y rellenos estándar utilizados en todo el sistema de diseño.

Los tokens spacing controlan la separación visual entre elementos (márgenes, paddings, gaps, etc.). Su objetivo es mantener una escala modular de espacios coherente en todas las pantallas, tanto en teléfonos como en tabletas. El valor de cada token se adapta automáticamente dependiendo del dispositivo: si es una tableta (isTablet = true), los valores aumentan ligeramente para mantener una proporción visual equilibrada en pantallas más grandes.

| Token | Valor base (px) | En tablet (px) | Descripción | | :-------- | :-------------: | :------------: | :----------- | | size-1 | 4 | 12 | Espaciado mínimo, ideal para pequeños detalles visuales. | | size-2 | 8 | 16 | Margen corto entre textos o íconos. | | size-3 | 12 | 20 | Separación común en layouts compactos. | | size-4 | 16 | 24 | Espaciado estándar para la mayoría de los componentes. | | size-5 | 24 | 32 | Espaciado medio, común entre secciones. | | size-6 | 32 | 40 | Espaciado grande, ideal para pantallas amplias o bloques visuales. | | size-7 | 40 | 48 | Separación generosa entre bloques de contenido. | | size-8 | 48 | 56 | Margen grande para layouts aireados. | | size-9 | 56 | 64 | Espaciado extra grande, usado en vistas principales. | | size-10 | 64 | 72 | Máximo espaciado estándar del sistema. |

Sizes

Tokens de tamaño tipográfico utilizados en el sistema de diseño para mantener una jerarquía visual clara y consistente entre dispositivos.

Los tokens sizes definen una escala modular de tamaños de texto (en píxeles), que se ajusta automáticamente al ancho del dispositivo y a la configuración del usuario (por ejemplo, el escalado de fuente del sistema operativo). De esta forma, el diseño mantiene la proporción visual correcta sin sacrificar accesibilidad. El cálculo de cada tamaño depende de dos factores:

ancho de la pantallaDimensions.get("window").width
factor de escala de fuentePixelRatio.getFontScale() Gracias a esto, las fuentes se adaptan suavemente en tabletas o pantallas grandes sin distorsionar el diseño original.

| Token | Valor base (px) | Descripción | | :------ | :-------------: | :---------------------------------------------------- | | xxs | 10 | Texto auxiliar o etiquetas pequeñas. | | xs | 12 | Subtítulos o texto de apoyo en componentes compactos. | | s | 14 | Texto secundario o descripciones. | | m | 16 | Tamaño de texto base, ideal para párrafos. | | l | 18 | Texto destacado o títulos pequeños. | | xl | 20 | Encabezados medianos o botones grandes. | | xxl | 24 | Títulos principales o énfasis visual. | | xxxl | 28 | Secciones destacadas o headers grandes. | | xxxxl | 32 | Títulos hero o pantallas de bienvenida. |

Escalado interno:

const BASE_WIDTH = 440;
const rawScaleFactor = width / BASE_WIDTH;
const multiplier = rawScaleFactor > 1 ? 1 + (rawScaleFactor - 1) * 0.3 : rawScaleFactor;

Esto significa que: Si la pantalla es más grande que la base, el texto aumenta gradualmente (hasta un 30% adicional). Si la pantalla es más pequeña, el tamaño se ajusta proporcionalmente.

Weights

Tokens de peso tipográfico utilizados para controlar la jerarquía visual y el énfasis dentro de los textos del sistema.

Los tokens weights establecen los distintos niveles de grosor de las fuentes usados en todos los componentes del sistema. Permiten mantener consistencia tipográfica en botones, títulos, subtítulos y párrafos, evitando el uso arbitrario de valores numéricos. Estos valores siguen la escala estándar de CSS para fontWeight, lo que garantiza compatibilidad con cualquier fuente que soporte pesos variables.

Colors

Los tokens de color definen la paleta cromática oficial de Dropi para interfaces móviles. Están diseñados para ofrecer consistencia visual, legibilidad y accesibilidad tanto en modo claro como en modo oscuro.

Cada color está organizado por familias cromáticas (Primary, Secondary, Gray, Success, Error, Info, Warning) y subdividido en niveles tonales del 50 al 900. Esto permite crear jerarquías visuales precisas —por ejemplo, usar tonos 500 para elementos principales y 100/900 para fondos o bordes. Cada token incluye dos variantes:

light
dark

De esta forma, el sistema puede alternar entre temas sin perder coherencia cromática ni contraste visual.

Átomos

Textos

Body

Body es el componente tipográfico principal del sistema de diseño. Está pensado para manejar el texto estándar de la aplicación, incluyendo descripciones, párrafos, mensajes y contenido general.

import { Body } from '@dropi/react-native-design-system';

⚙️ Props:

🧩 Ejemplo de uso:

<Body type="m-regular"> Este es un texto de ejemplo utilizando el componente body </Body>

Caption

El componente Caption representa textos pequeños de apoyo, utilizados principalmente para mostrar etiquetas, subtítulos, o descripciones breves dentro de la interfaz. Forma parte de la familia tipográfica del sistema y mantiene proporciones ajustadas para espacios reducidos, con un line-height ligeramente más compacto para optimizar la densidad visual.

📦 Importación:

import { Caption } from '@dropi/react-native-design-system';

⚙️ Props:

🧩 Ejemplo de uso:

<Caption type="m">Última actualización</Caption>

<Caption type="s-light" style={{ color: '#999' }}>2 horas atrás</Caption>

Heading

El componente Heading representa los encabezados tipográficos del sistema, usados para jerarquizar títulos, secciones y bloques de contenido. Cada nivel (h1 a h5) conserva proporciones equilibradas entre tamaño, peso y altura de línea, asegurando legibilidad sin romper la escala visual general de la aplicación.

📦 Importación:

import { Heading } from '@dropi/react-native-design-system';

⚙️ Props:

| Prop | Tipo | Descripción | | :------- | :------------------------------------- | :------------------------------------------------------------ | | type | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | Define el nivel jerárquico del título. | | style | TextStyle | (Opcional) Permite agregar estilos adicionales al encabezado. | | ...rest | TextProps | Cualquier prop nativa del componente Text de React Native. |

🧩 Ejemplo de uso:

<Heading type="h1">Bienvenido a la experiencia Dropi</Heading>

<Heading type="h4" style={{ color: '#666' }}>Configuración avanzada</Heading>

Label

El componente Label se utiliza para mostrar textos cortos de énfasis o identificación, como títulos de campos, categorías, o etiquetas de estado. Su diseño mantiene un tamaño reducido con alto contraste tipográfico (peso bold), lo que facilita su lectura incluso en elementos pequeños o componentes interactivos.

📦 Importación:

import { Label } from '@dropi/react-native-design-system';

⚙️ Props:

🧩 Ejemplo de usu:

<Label type="m">Dirección</Label>

<Label type="s" style={{ color: '#999' }}>En proceso</Label>

Botones

Default Button:

El componente DefaultButton es el botón base del sistema de diseño. Está diseñado para ser consistente, flexible y accesible, permitiendo manejar variaciones visuales (variant), tamaños (size), e iconos opcionales antes o después del texto. Además, integra estados de desactivación y carga sin perder la coherencia visual.

📦 Importación:

import { DefaultButton } from '@dropi/react-native-design-system';

⚙️ Props:

🧩 Ejemplos de uso:

<DefaultButton
  label="Guardar cambios"
  variant="primary"
  size="normal"
  onPress={handleSave}
/>

<DefaultButton
  label="Cancelar"
  variant="secondary"
  size="small"
  preIcon="IconName"
  onPress={handleCancel}
/>

<DefaultButton
  label="Cargando..."
  variant="primary"
  size="large"
  isMakingRequest
/>

Feedback Button

El FeedbackButton es un botón semántico diseñado para comunicar estados del sistema (éxito, error, advertencia, información) a través de una codificación cromática clara y reutilizable. Combina tres variantes visuales (primary, secondary, text) con tres tamaños (small, normal, large), soporte para iconos antes y después del texto, y control de estados (deshabilitado / en proceso). Su propósito es facilitar acciones que requieren retroalimentación inmediata al usuario sin perder la consistencia tipográfica y espacial del sistema; por eso deriva sus colores de los tokens Success/Error/Warning/Info y reutiliza Label, spacing y radius para garantizar uniformidad en toda la interfaz.

📦 Importación:

import { FeedbackButton } from '@dropi/react-native-design-system'

⚙️ Props:

🧩 Ejemplos de uso:

<FeedbackButton
    label="Reintentar"
    feedbackType="error"
    variant="primary"
    size="normal"
    preIcon="refresh"
    onPress={() => console.log('Reintentando acción...')}
  />

Text Button

El TextButton es un botón ligero y no intrusivo, pensado para acciones secundarias donde el énfasis visual debe recaer en el texto más que en el fondo. Puede incluir íconos antes o después del texto y adaptarse a diferentes tamaños (small, normal, large). Su diseño se basa en la simplicidad y flexibilidad: hereda la tipografía desde Label, respeta los espacios del sistema (spacing) y se ajusta automáticamente en tablets gracias a isTablet. Además, permite sobrescribir el color con replaceColor para integrarse fácilmente en contextos personalizados.

📦 Importación:

import { TextButton } from "@dropi/react-native-design-system";

⚙️ Props:

🧩 Ejemplos de uso:

<TextButton
  label="Ver más"
  variant="primary"
  size="normal"
  preIcon="IconName"
  onPress={() => console.log("Ver más presionado")}
/>

<TextButton
  label="Eliminar"
  variant="secondary"
  size="small"
  replaceColor="#FF3B30"
  postIcon="IconName"
  onPress={() => console.log("Eliminar presionado")}
/>

Moléculas

Alert

El componente Alert muestra un mensaje contextual acompañado de un ícono y colores que representan su nivel de severidad. Está diseñado para comunicar información relevante al usuario: advertencias, errores, confirmaciones o simples avisos informativos.

Cada variante (info, warning, error, success) aplica automáticamente colores de fondo, borde e ícono usando el sistema de tokens (colors, sizes, radius, spacing). Además, permite incluir un botón de acción secundaria y un botón de cierre opcional.

📦 Importación:

import { Alert } from "@dropi/react-native-design-system";

⚙️ Props:

🧩 Ejemplos de uso:

<Alert
  message="Tu información ha sido guardada correctamente."
  variant="success"
  onClosePress={() => console.log("Cerrar alerta")}
/>

<Alert
  message="No pudimos procesar tu solicitud."
  variant="error"
  buttonLabel="Reintentar"
  onButtonPress={() => console.log("Reintentar")}
  onClosePress={() => console.log("Cerrar")}
 />

Empty State

El EmptyState es un componente visual diseñado para mostrar pantallas vacías en escenarios donde no hay datos disponibles, ocurrió un estado inicial o se requiere una primera acción del usuario. Puede incluir una imagen, un título opcional, un mensaje descriptivo y un botón configurable. Mantiene una composición centrada y un diseño minimalista, usando automáticamente tamaños distintos para tablet gracias a isTablet.

📦 Importación:

import { EmptyState } from "@dropi/react-native-design-system";

⚙️ Props:

🧩 Ejemplos de uso:

<EmptyState
  imageSource={require("../../assets/empty-orders.png")}
  title="Sin pedidos todavía"
  message="Cuando tengas pedidos activos aparecerán aquí."
/>

<EmptyState
  imageSource="https://example.com/empty.png"
  message="Aún no has guardado favoritos."
  buttonLabel="Explorar productos"
  onButtonPress={() => console.log("Ir a explorar")}
/>

Title Description

El TitleDescription es un componente de selección diseñado para mostrar opciones con un título principal, una descripción opcional, una imagen y un indicador visual circular que refleja si la opción está activa. Es ideal para flujos donde el usuario debe elegir entre varias alternativas. Adapta automáticamente tamaños en tablets usando isTablet, mantiene una disposición horizontal limpia y un estilo consistente con el design system.

📦 Importación:

import { TitleDescription } from "@dropi/react-native-design-system";

⚙️ Props:

| Prop | Tipo | Descripción | | :------------- | :------------------------ | :-----------------------------------------------------------------------------| | title | string | Título principal de la opción. | | label | string | Texto descriptivo o subtítulo opcional. | | imageSource | string | number | Imagen opcional (URL o require local) que acompaña la opción. | | isActive | boolean | Indica si la opción está seleccionada. Cambia estilos y muestra el inner dot. | | isDisabled | boolean | Desactiva la interacción y reduce opacidad. | | ...rest | TouchableOpacityProps | Props adicionales del contenedor presionable. |

🧩 Ejemplos de uso:

<TitleDescription
  title="Domicilio"
  label="Entrega en tu dirección registrada"
  imageSource={require("../../assets/location.png")}
  isActive={selected === "home"}
  onPress={() => setSelected("home")}
/>

<TitleDescription
  title="Punto de recogida"
  label="Elige una tienda cercana"
  imageSource="https://example.com/pickup.png"
  isActive={false}
  isDisabled={true}
/>

Tooltip

Componente flotante para mostrar información contextual en una posición específica. Incluye flecha automática, manejo de overflow horizontal y botón opcional de cierre.

📦 Importación:

import { TitleDescription } from "@dropi/react-native-design-system";

⚙️ Props:

| Prop | Tipo | Descripción | | -------------| ---------------| ------------------------------------------------------------------------------ | | width | number | Ancho exacto del tooltip. | | xPosition | number | Coordenada X donde debe alinearse el tooltip respecto al elemento origen. | | yPosition | number | Coordenada Y donde debe mostrarse el tooltip (debajo de la flecha). | | title | string | Título opcional que aparece sobre el contenido. | | children | ReactNode | Contenido interno del tooltip. | | onClosePress | () => void | Acción ejecutada al presionar el botón de cierre (close-small). |

🧩 Ejemplos de uso:


<Tooltip
    width={220}
    xPosition={touchX}
    yPosition={touchY}
>
    <Body type="s-regular" style={{ color: '#fff' }}>
        Este es un tooltip básico con contenido libre.
    </Body>
</Tooltip>

<Tooltip
    width={250}
    xPosition={x}
    yPosition={y}
    title="Información"
>
    <Body type="s-regular" style={{ color: '#fff' }}>
        Aquí puedes colocar detalles adicionales, explicaciones o instrucciones.
    </Body>
</Tooltip>

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

Dropi - React Native Design System 🎨

Tabla de contenido

Instalación

1️⃣ Requisitos previos (peerDependencies)

2️⃣ Instalación del Design System

Usando npm

Usando yarn

3️⃣ Configuración adicional según tu entorno

🔹 Si usas Expo

🔹 Si usas React Native CLI

Tokens

Radius

Spacing

Sizes

Escalado interno:

Weights

Colors

Átomos

Textos

Body

⚙️ Props:

🧩 Ejemplo de uso:

Caption

📦 Importación:

⚙️ Props:

🧩 Ejemplo de uso:

Heading

📦 Importación:

⚙️ Props:

🧩 Ejemplo de uso:

Label

📦 Importación:

⚙️ Props:

🧩 Ejemplo de usu:

Botones

Default Button:

📦 Importación:

⚙️ Props:

🧩 Ejemplos de uso:

Feedback Button

📦 Importación:

⚙️ Props:

🧩 Ejemplos de uso:

Text Button

📦 Importación:

⚙️ Props:

🧩 Ejemplos de uso:

Moléculas

Alert

📦 Importación:

⚙️ Props:

🧩 Ejemplos de uso:

Empty State

📦 Importación:

⚙️ Props:

🧩 Ejemplos de uso:

Title Description

📦 Importación:

⚙️ Props:

🧩 Ejemplos de uso:

Tooltip

📦 Importación:

⚙️ Props:

🧩 Ejemplos de uso: