@clostech-libreria/libreria-ai-clostech NPM

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.