{
"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

$3

#### 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

$3

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



)
}
`

$3

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

export default function DynamicPage() {
return
}

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

$3

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

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

return (

{section.title}

{section.description}

)
}
`

Como o Atena Funciona

$3

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

$3

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

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

$3

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

$3

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

$3

#### useDynamicSection(props: DynamicSectionProps)

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

`typescript
const section = useDynamicSection({
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()
`

$3

#### 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

$3

`typescript
type DynamicSection = {
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

$3

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

Desenvolvimento

$3

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

$3

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

$3

`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 para detalhes.

Suporte

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

---

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