infinity-forge/README.md

codie Library

{
  "include": ["src/**/*", "styled.d.ts"],
  "compilerOptions": {
    "lib": ["es2021", "dom"],
    "types": ["node"],
    "jsx": "react-jsx",
    "baseUrl": "./src",
    "outDir": "./dist",
    "declaration": true,
    "sourceMap": true,
    "paths": {
      "@/*": ["./*"]
    },
    "esModuleInterop": true,
    "moduleResolution": "node",
    "skipLibCheck": true
  },
  "afterDeclarations": true
}

Coisas a fazer:
Terminar de documentar o FormHandler (está comentado nessa mesma página).
Vamos integrar com alguma biblioteca de excel, porque precisamos reestrututar o exports da tabela, basicamente teria que buscar todos os resultados do back e gerar um arquivo excel

usuario ver o upload da imagem import axios from 'axios'; const formData = new FormData(); formData.append('file', selectedFile); axios.post('/upload', formData, { onUploadProgress: function (progressEvent) { const percent = Math.round((progressEvent.loaded * 100) / progressEvent.total); console.log(Progresso do upload: percent%); // Atualize seu componente com este valor } }) .then(response => { console.log('Upload completo', response); }) .catch(error => { console.error('Erro no upload', error); });
Aqui deixaremos por hora a versão styleVersion: v1, depois de tudo programado e tudo estando CERTO, iremos fazer a v3 baseado nofigma

Tópico para auth pro futuro: https://www.linkedin.com/pulse/armazenamento-seguro-de-senhas-um-guia-pr%C3%A1tico-texto-puro-deschamps-5lt8f/?trackingId=zvK9%2BayeC543FIuw%2FGetZQ%3D%3D


Adicionar possibilidade de passar um "filter" pra dentro das opções do InputFile e ele filtrar lá dentro lá lidando com performance e outras coisas que podem afetar e passar um componente de erro customizado também para caso não haja opções


# Infinity Forge

Uma biblioteca abrangente React/Next.js da **Codie Digital** que fornece um poderoso sistema de gerenciamento de conteúdo chamado **Atena** para construir sites dinâmicos e editáveis.

## Visão Geral

O Infinity Forge foi projetado para criar sites onde o conteúdo pode ser gerenciado dinamicamente através de uma interface CMS intuitiva. O núcleo da biblioteca é o sistema **Atena**, que permite edição de conteúdo em tempo real, suporte multi-idioma e controle de acesso baseado em funções.

## Principais Recursos

- 🚀 **Renderização Dinâmica de Páginas** - Páginas são construídas dinamicamente baseadas nos caminhos das URLs
- ✏️ **Edição de Conteúdo em Tempo Real** - Edite conteúdo diretamente no site com preview ao vivo
- 🌍 **Internacionalização (i18n)** - Suporte multi-idioma integrado
- 🔐 **Controle de Acesso Baseado em Funções** - Gerenciamento seguro de conteúdo com permissões de usuário
- 📱 **Renderização no Servidor (SSR)** - Suporte completo a SSR para melhor SEO e performance
- 🎨 **Componentes Modulares** - Seções dinâmicas e componentes reutilizáveis
- 📊 **Painel Administrativo** - Interface administrativa abrangente para gerenciamento de conteúdo

## Arquitetura

### Componentes Principais

#### **Sistema Atena**

O coração do Infinity Forge, fornecendo:

- Gerenciamento dinâmico de conteúdo
- Roteamento e renderização de páginas
- Funcionalidade de modo de edição
- Organização de conteúdo baseada em seções

#### **Camada UI** (`src/ui/`)

- Componentes UI reutilizáveis
- Seções e elementos dinâmicos
- Hooks para gerenciamento de conteúdo

#### **Camada Sistema** (`src/system/`)

- Autenticação e autorização
- Gerenciamento de temas e layout
- Provedores de contexto

#### **Codie Panel** (`src/codie_panel/`)

- Componentes da interface administrativa
- Ferramentas de gerenciamento de conteúdo
- Painéis de configuração

## Instalação

```bash
npm install infinity-forge
# ou
pnpm install infinity-forge
```

## Início Rápido

### 1. Configure sua Aplicação Next.js

```typescript
// pages/_app.tsx
import { InfinityForgeProviders, api } from 'infinity-forge'
import 'infinity-forge/dist/infinity-forge.css'

export default function App({ Component, pageProps }) {
  const forgeConfig = {
    queryClient: new QueryClient(),
    auth: {
      roles: {
        administradorMaster: {},
      },
    },
    atena: { ...pageProps, disableAuth: false },
    siteConfigurations: {
      // Suas configurações do site
    },
  }

  return (
    <InfinityForgeProviders {...forgeConfig}>
      <Component {...pageProps} />
    </InfinityForgeProviders>
  )
}
```

### 2. Crie Páginas Dinâmicas

```typescript
// pages/[...dynamic].tsx
import { AtenaPage, AtenaSSR } from 'infinity-forge'

export default function DynamicPage() {
  return <AtenaPage />
}

export const getServerSideProps = (ctx) => AtenaSSR(ctx, {})
```

### 3. Use Seções Dinâmicas

```typescript
import { useDynamicSection } from 'infinity-forge'

function MeuComponente() {
  const section = useDynamicSection({
    refSection: 'minha-secao',
    fields: {
      title: {},
      description: {},
      images: {},
    },
  })

  return (
    <section.Section>
      <h1>{section.title}</h1>
      <p>{section.description}</p>
      <img src={section.images[0]?.url} alt='' />
    </section.Section>
  )
}
```

## Como o Atena Funciona

### 1. **Resolução de Páginas**

Quando um usuário visita qualquer URL, o manipulador de rota dinâmica (`[...dynamic].tsx`) captura a requisição.

### 2. **Processamento no Servidor**

A função `AtenaSSR`:

- Analisa a URL requisitada
- Busca seções dinâmicas da API
- Carrega dados específicos da página
- Gerencia internacionalização
- Retorna props processadas

### 3. **Gerenciamento de Contexto**

`AtenaProvider` gerencia o estado global:

- Permissões e funções do usuário
- Status do modo de edição
- Dados das seções dinâmicas
- Informações da página atual

### 4. **Seções Dinâmicas**

Componentes usam `useDynamicSection` para:

- Buscar conteúdo específico da seção
- Gerenciar renderização do modo de edição
- Gerenciar conteúdo multilíngue
- Fornecer capacidades de edição inline

### 5. **Gerenciamento de Conteúdo**

Usuários autorizados podem:

- Editar conteúdo diretamente na página
- Gerenciar mídia e imagens
- Configurar definições de seção
- Visualizar mudanças em tempo real

## Referência da API

### Hooks Principais

#### `useDynamicSection<T>(props: DynamicSectionProps)`

Hook principal para criar seções dinâmicas e editáveis.

```typescript
const section = useDynamicSection<MeuTipoDeConteudo>({
  refSection: 'id-unico-da-secao',
  isGlobal: false, // Opcional: torna a seção disponível globalmente
  fields: {
    title: {},
    description: {},
    images: {},
    // ... outros campos
  },
})
```

#### `useAtena()`

Acesse dados do contexto Atena.

```typescript
const { sections, isEditMode, hasPermission, atenaPagePathname } = useAtena()
```

### Componentes Principais

#### `AtenaPage`

Renderiza páginas dinâmicas baseadas no roteamento de URL.

#### `AtenaProvider`

Provedor de contexto para funcionalidade Atena.

#### `InfinityForgeProviders`

Componente wrapper principal que fornece todos os contextos necessários.

## Tipos de Conteúdo

### DynamicSection

```typescript
type DynamicSection<J> = {
  id: string
  enabled: boolean
  i18n: i18n<{
    title: string
    subtitle: string
    description: string
    linkText: string
  }>
  ref: string
  videoUrl: string
  linkUrl: string
  jsonContent: J
  images: FileSystemType[]
}
```

## Configuração

### Configuração do Atena

```typescript
type AtenaConfigurations = {
  ssrFunction?: () => Promise<Record<string, any>>
  apiUrl?: string
  debugMode?: boolean
  i18n?: {
    active: boolean
  }
  disableAuth?: boolean
  modifierSections?: (sections: any) => { sections: any; [key: string]: any }
}
```

## Desenvolvimento

### Pré-requisitos

- Node.js 18+
- pnpm (recomendado) ou npm
- Next.js 15+
- React 19+

### Configuração TypeScript

Para usar o Infinity Forge em seu projeto, configure o `tsconfig.json` com as seguintes configurações:

```json
{
  "include": ["src/**/*", "styled.d.ts"],
  "compilerOptions": {
    "lib": ["es2021", "dom"],
    "types": ["node"],
    "jsx": "react-jsx",
    "baseUrl": "./src",
    "outDir": "./dist",
    "declaration": true,
    "sourceMap": true,
    "paths": {
      "@/*": ["./*"]
    },
    "esModuleInterop": true,
    "moduleResolution": "node",
    "skipLibCheck": true
  },
  "afterDeclarations": true
}
```

### Scripts

```bash
# Desenvolvimento
pnpm dev

# Build
pnpm build

# Iniciar servidor de produção
pnpm start

# Deploy (incrementa versão e publica)
pnpm deploy
```

## Páginas Integradas

A biblioteca inclui vários tipos de página pré-construídas:

- **Páginas de Contato** - Formulários de contato dinâmicos com campos personalizáveis
- **Páginas de Blog** - Listagem de blog e páginas de posts individuais
- **Páginas Administrativas** - Interface de gerenciamento de conteúdo

## Internacionalização

Atena suporta gerenciamento de conteúdo multi-idioma:

```typescript
// Habilitar i18n no AtenaSSR
export const getServerSideProps = (ctx) =>
  AtenaSSR(ctx, {
    i18n: { active: true },
  })
```

O conteúdo é automaticamente gerenciado por idioma, com fallbacks para o idioma padrão.

## Autenticação e Permissões

Controle de acesso baseado em funções para edição de conteúdo:

```typescript
const forgeConfig = {
  auth: {
    roles: {
      admin: {},
      editor: {},
      // ... outras funções
    },
  },
}
```

## Licença

Licença MIT - veja o arquivo [LICENSE](./LICENSE) para detalhes.

## Suporte

Para suporte e dúvidas, entre em contato com a **Codie Digital** em [https://codie.com.br/](https://codie.com.br/)

---


**Infinity Forge** - Capacitando desenvolvedores a construir sites dinâmicos e gerenciados por conteúdo com facilidade.