# Documentação do Brushy DI

Bem-vindo à documentação do Brushy DI, um sistema de injeção de dependências para aplicações JavaScript/TypeScript.

## Instalação

```bash
# Usando npm
npm install @brushy/di

# Usando yarn
yarn add @brushy/di

# Usando pnpm
pnpm add @brushy/di
```

## Sobre o Brushy DI

O Brushy DI é um sistema completo de injeção de dependências projetado para:

- Desacoplar componentes em sua aplicação
- Facilitar testes unitários através de mocks
- Gerenciar o ciclo de vida de serviços e recursos
- Prover uma solução unificada para frontend e backend
- Integrar perfeitamente com React e outros frameworks


## Integração com React

O Brushy DI oferece uma integração perfeita com React através de hooks e providers. Aqui está um exemplo prático:

```typescript
// 1. Definindo os tipos
interface User {
  id: string;
  name: string;
}

interface UserService {
  getUsers: () => User[];
}

// 2. Definindo os tokens de injeção
const USER_SERVICE = Symbol('USER_SERVICE');
const LIST = Symbol('LIST');
const LIST_ITEM = Symbol('LIST_ITEM');

// 3. Componentes base
function List({ children }: { children: React.ReactNode }) {
  return <ul className="space-y-2">{children}</ul>;
}

function ListItem({ children }: { children: React.ReactNode }) {
  return <li className="p-2 border rounded">{children}</li>;
}

// 4. Componente que usa injeção de dependência
function UserList() {
  // Usando o hook useInject para obter o serviço
  const userService = useInject<UserService>(USER_SERVICE, {
    cachePromises: false // Usado para obter dados frescos
  });
  
  // Usando React Query para gerenciar o estado e cache
  const { data: users = [], isLoading, error } = useQuery({
    queryKey: ['users'],
    queryFn: () => userService.getUsers()
  });

  if (isLoading) return <div>Carregando...</div>;
  if (error) return <div>Erro ao carregar usuários</div>;

  return (
    <List>
      {users.map((user) => (
        <ListItem key={user.id}>{user.name}</ListItem>
      ))}
    </List>
  );
}

// 5. Implementação do serviço
class UserServiceImpl implements UserService {
  async getUsers(): Promise<User[]> {
    // Simulando uma chamada à API
    await new Promise(resolve => setTimeout(resolve, 500));
    return [
      { id: '1', name: 'João' },
      { id: '2', name: 'Maria' }
    ];
  }
}

// 6. Configuração do container e provider
function App() {
  const container = new Container({
    providers: [
      { provide: USER_SERVICE, useClass: UserServiceImpl },
      { provide: LIST, useValue: List },
      { provide: LIST_ITEM, useValue: ListItem }
    ]
  });

  return (
    <QueryClientProvider client={new QueryClient()}>
      <BrushyDIProvider container={container}>
        <UserList />
      </BrushyDIProvider>
    </QueryClientProvider>
  );
}
```

Esta abordagem oferece várias vantagens:

- **Gerenciamento de Estado**: Usa React Query para gerenciar cache, estado de loading e erros
- **Performance**: Implementa cache automático e revalidação de dados
- **UX**: Fornece feedback visual durante carregamento e tratamento de erros
- **Manutenibilidade**: Código mais limpo e fácil de manter
- **Escalabilidade**: Facilita a adição de novas funcionalidades como paginação, filtros, etc.

O Brushy DI também oferece recursos avançados, explore a documentação para conhecer!

## Licença

MIT