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

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

Início Rápido

1. Configure sua Aplicação Next.js

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

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

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.

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.

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

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

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:

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

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

// 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:

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.