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

1. Compila la biblioteca: npm run build
2. 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

3. 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

1. Install dependencies

   npm install

2. 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.

Join the community

Join our community of developers creating universal apps.

• Expo on GitHub: View our open source platform and contribute.
• Discord community: Chat with Expo users and ask questions.