npm package: @opens/accesshub-frontend
Description: Frontend client for AccessHub resources with localStorage caching
Author: engenharia@opens.com.br
Latest version: 0.0.2

# 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

```bash
npm install @opens/accesshub-client
```

## Uso Básico

```ts
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

```js
// 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

```js
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

```js
// 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

```ts
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:

```ts
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

```js
// 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

| Método                                               | Descrição                                                                                                  |
| ---------------------------------------------------- | ---------------------------------------------------------------------------------------------------------- |
| `getCompanyResources(companyId, requiredResources?)` | Obtém todos os recursos de uma empresa. Opcionalmente, pode-se especificar quais recursos são obrigatórios |
| `clearCache(companyId?)`                             | Limpa o cache para uma empresa específica (opcional)                                                       |

### Tipos

```ts
// 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
  };
}
```