Clostech Library

Clostech es una librería de React construida con Vite que proporciona componentes y utilidades para integrar funcionalidades de autenticación, manejo de perfiles de usuario y prueba virtual de outfits en tus aplicaciones.

Instalación

npm install @clostech-libreria/libreria-ai-clostech

Estilos

La librería incluye sus propios estilos CSS. Asegúrate de importar el archivo CSS en tu aplicación:

import "@clostech-libreria/libreria-ai-clostech/dist/style.css";

Componentes Principales

ClostechProvider

Componente de contexto que debe envolver tu aplicación para proporcionar el contexto necesario para los demás componentes de Clostech.

import { ClostechProvider } from "@clostech-libreria/libreria-ai-clostech";

function App() {
  return (
    <ClostechProvider storeSessionWithCookies={true}>
      {/* Tu aplicación aquí */}
    </ClostechProvider>
  );
}

Propiedades

• children: ReactNode
• storeSessionWithCookies: boolean (opcional, por defecto es false, almacena la sesión del usuario por cookies)

ClostechAi

Componente principal que maneja la interfaz de usuario para autenticación, registro y visualización de outfits.

import { ClostechAi } from "@clostech-libreria/libreria-ai-clostech";

function MyComponent() {
  return <ClostechAi imageUrl="url-de-la-imagen-de-la-marca" />;
}

Propiedades

• imageUrl: string (URL de la imagen de la marca)

ClostechAvatarButton

Botón personalizado para cambiar el avatar del usuario.

import { ClostechAvatarButton } from "@clostech-libreria/libreria-ai-clostech";

function MyComponent() {
  return (
    <ClostechAvatarButton className="my-custom-class">
      Cambiar Avatar
    </ClostechAvatarButton>
  );
}

Propiedades

• children: React.ReactNode
• className: string (opcional)

ClostechButton

Botón para probar outfits virtuales.

import { ClostechButton } from "@clostech-libreria/libreria-ai-clostech";

function MyComponent() {
  return (
    <ClostechButton imageUrl="url-de-la-prenda" typeClothes="shirt">
      Probar Outfit
    </ClostechButton>
  );
}

Propiedades

• imageUrl: string (URL de la imagen de la prenda)
• typeClothes: TypeClothes (tipo de prenda)
• children: React.ReactNode

TypeClothes

• upper_body: Prendas superiores
• lower_body: Prendas inferiores
• dresses: Vestidos

Hooks

useClostech

Hook simplificado para acceder a un subconjunto de funcionalidades del contexto de Clostech.

import { useClostech } from "@clostech-libreria/libreria-ai-clostech";

function MyComponent() {
  const {
    avatar,
    isAuthenticated,
    isLoading,
    setIsModalAuthVisible,
    isModalVisible,
    logout,
  } = useClostech();
  // Usa estas funciones y estados aquí
}

Propiedades

• avatar: string (URL de la imagen del usuario)
• isAuthenticated: boolean (para comprobar si el usuario esta autenticado)
• isLoading: boolean (para comprobar si hay un proceso en carga)
• setIsModalAuthVisible: function(boolean) (función para activar el modal de autenticación)
• isModalVisible: boolean (para comprobar si el modal de autenticación esta abierto)
• logout: function() (función para cerrar sesión)

Características Principales

• Autenticación de usuarios (registro, inicio de sesión, cierre de sesión)
• Manejo de perfiles de usuario y avatares
• Prueba virtual de outfits
• Notificaciones con Snackbar
• Persistencia de sesión con cookies (opcional)

Uso Avanzado

Cambio de Avatar

El componente ClostechAvatarButton maneja automáticamente la carga y procesamiento de imágenes para cambiar el avatar del usuario.

Prueba de Outfits

Utiliza el componente ClostechButton para permitir a los usuarios probar diferentes prendas virtualmente sobre su avatar.

Solución de problemas

• Si el hook useClostech arroja un error, asegúrate de que estás utilizando este hook dentro de un componente envuelto por ClostechProvider.
• Para problemas con la carga de imágenes o la prueba de outfits, verifica que las URLs de las imágenes sean correctas y accesibles.