@opens/accesshub-frontend v0.0.1

AccessHub Client

Biblioteca leve e eficiente para acessar recursos de empresas com cache no navegador.

Recursos

• ⚡️ Rápida e eficiente
• 🔄 Cache automático com TTL configurável
• 🛡️ Fallback para dados em cache quando a API falha
• 🧩 API limpa e intuitiva
• 📱 Suporta browsers modernos
• 🔧 Totalmente tipada (TypeScript)

Instalação

npm install @opens/accesshub-client

Uso Básico

import { ResourceClient } from '@opens/accesshub-client';

// Criar uma instância do cliente
const client = new ResourceClient({
  accessHubURL: 'https://api.example.com/api',
  token: 'your-auth-token',
});

// Obter todos os recursos de uma empresa
const response = await client.getCompanyResources('company-123');
const allResources = response.resources;

// Verificar a origem dos dados (cache, API, fallback)
if (response._metadata.fromCache) {
  console.log('Dados obtidos do cache');
}

// Limpar cache para uma empresa específica
await client.clearCache('company-123');

Integração com Vue

Exemplo Vue 2

// Em um componente Vue
export default {
  data() {
    return {
      resources: {},
      loading: true,
      error: null,
    };
  },

  async created() {
    const client = new ResourceClient({
      accessHubURL: process.env.VUE_APP_API_URL,
      token: this.$store.getters.token,
    });

    try {
      const response = await client.getCompanyResources('company-123');
      this.resources = response.resources;
    } catch (err) {
      this.error = err.message;
    } finally {
      this.loading = false;
    }
  },
};

Exemplo Vue 3 Composition API

import { ref, onMounted } from 'vue';
import { ResourceClient } from '@opens/accesshub-client';

export function useResources(companyId) {
  const resources = ref({});
  const loading = ref(true);
  const error = ref(null);

  const client = new ResourceClient({
    accessHubURL: import.meta.env.VITE_API_URL,
    token: localStorage.getItem('token'),
  });

  async function fetchResources() {
    loading.value = true;

    try {
      const response = await client.getCompanyResources(companyId);
      resources.value = response.resources;
    } catch (err) {
      error.value = err.message;
    } finally {
      loading.value = false;
    }
  }

  onMounted(fetchResources);

  return {
    resources,
    loading,
    error,
    refresh: fetchResources,
  };
}

Exemplo Nuxt 2

// Em uma página ou componente Nuxt
export default {
  data() {
    return {
      resources: {},
      loading: true,
    };
  },

  async fetch() {
    const client = new ResourceClient({
      accessHubURL: process.env.apiUrl,
      token: this.$auth.getToken(),
    });

    const response = await client.getCompanyResources('company-123');
    this.resources = response.resources;
    this.loading = false;
  },
};

Opções de Configuração

import { ResourceClient } from '@opens/accesshub-client';
import type { ClientConfig } from '@opens/accesshub-client';

// Configuração completa (todos os valores são opcionais)
const config: ClientConfig = {
  accessHubURL: 'https://api.example.com/api', // URL base da API
  cacheTTL: 300, // TTL do cache em segundos (padrão: 600)
  token: 'your-auth-token', // Token de autenticação opcional
};

const client = new ResourceClient(config);

Tratamento de Erros

O cliente lida com falhas de forma elegante:

try {
  const resources = await client.getCompanyResources('company-id');

  // Verificar se os dados vieram de fallback (API inacessível)
  if (resources._metadata.fromFallback) {
    console.warn('API inacessível, usando dados em cache');
  }
} catch (error) {
  console.error('Falha ao obter recursos:', error.message);
}

Compatibilidade com Navegadores

• Chrome, Firefox, Edge, Safari (últimas 2 versões)
• IE11 não é suportado

Uso com Bundlers

// Usando bundlers como webpack, rollup ou esbuild
import { ResourceClient } from '@opens/accesshub-client';

// Configuração é a mesma independente do ambiente
const client = new ResourceClient({
  accessHubURL: 'https://api.example.com/api',
  token: 'your-token',
});

API Completa

ResourceClient

Tipos

// Configuração do cliente
interface ClientConfig {
  accessHubURL: string; // URL base da API
  cacheTTL: number; // Tempo de vida do cache em segundos
  token?: string; // Token de autenticação opcional
}

// Recurso
interface Resource {
  id: string;
  name: string;
  description: string;
  // ... outras propriedades
}

// Resposta da API
interface ResourceResponse {
  resources: Record<string, Resource>;
  _metadata: {
    fromCache: boolean; // Indica se veio do cache
    fromFallback: boolean; // Indica se é fallback por falha na API
    lastUpdated: string; // Data da última atualização
    expiredAt?: number; // Indica se o cache está expirado
  };
}