@eliasleyton/test-poc-2 NPM

Biblioteca de Componentes UI

Este proyecto contiene una biblioteca de componentes UI reutilizables que se pueden utilizar en otros proyectos.

Componentes UI Exportables

Compilar la biblioteca

Para compilar la biblioteca y generar los archivos distribución:

# Compilar la biblioteca
npm run build

Esto generará una carpeta dist con todos los componentes y tipos exportables.

Uso en otros proyectos

Hay dos formas de usar esta biblioteca:

Opción 1: Importar directamente desde la carpeta `/lib`

import { StandaloneButton } from '@/ruta/a/lib/export';

function MyComponent() {
  return (
    <StandaloneButton 
      title="Mi Botón" 
      variant="primary" 
      onPress={() => console.log('Botón presionado')} 
    />
  );
}

Opción 2: Compilar y usar como paquete npm

Compila la biblioteca: npm run build

Instala la biblioteca en tu proyecto:

# Usando npm pack
npm pack
npm install ../ruta/al/test2-1.0.0.tgz

# O enlazando directamente
npm link ../ruta/al/proyecto

Importa los componentes:

import { StandaloneButton } from 'test2';

function MyComponent() {
  return (
    <StandaloneButton 
      title="Mi Botón" 
      variant="primary" 
    />
  );
}

Opciones de importación

1. Componente independiente (recomendado)

import { StandaloneButton } from '@/ruta/a/lib/export';

// El botón incluye su propio ThemeProvider
<StandaloneButton 
  title="Mi Botón" 
  variant="primary"
  initialTheme="system" // 'light', 'dark' o 'system'
/>

2. Múltiples componentes con un solo ThemeProvider

import { 
  StandaloneThemeProvider, 
  StandaloneButtonInner, 
  useStandaloneTokens 
} from '@/ruta/a/lib/export';

function MyComponent() {
  return (
    <StandaloneThemeProvider initialTheme="system">
      <Content />
    </StandaloneThemeProvider>
  );
}

function Content() {
  const { tokens, isDark, toggleTheme } = useStandaloneTokens();
  
  return (
    <View style={{ backgroundColor: tokens.background }}>
      <StandaloneButtonInner 
        title="Botón primario" 
        variant="primary" 
      />
      
      <StandaloneButtonInner 
        title="Cambiar tema" 
        variant="secondary"
        onPress={toggleTheme}
      />
    </View>
  );
}

Documentación detallada

Para más información sobre cómo usar estos componentes, consulta el archivo lib/README.md.

Ejecutar el proyecto de ejemplo

# Instalar dependencias
npm install

# Iniciar el proyecto
npm start

Una vez iniciado, navega a la pestaña "Components" para ver los ejemplos de los botones disponibles.

Welcome to your Expo app 👋

This is an Expo project created with create-expo-app.

Get started

Install dependencies
```
npm install
```
Start the app
```
npx expo start
```

In the output, you'll find options to open the app in a

development build
Android emulator
iOS simulator
Expo Go, a limited sandbox for trying out app development with Expo

You can start developing by editing the files inside the app directory. This project uses file-based routing.

Get a fresh project

When you're ready, run:

npm run reset-project

This command will move the starter code to the app-example directory and create a blank app directory where you can start developing.

Learn more

To learn more about developing your project with Expo, look at the following resources:

Expo documentation: Learn fundamentals, or go into advanced topics with our guides.
Learn Expo tutorial: Follow a step-by-step tutorial where you'll create a project that runs on Android, iOS, and the web.