{ "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 ( ) } ``` ### 2. Crie Páginas Dinâmicas ```typescript // pages/[...dynamic].tsx import { AtenaPage, AtenaSSR } from 'infinity-forge' export default function DynamicPage() { return } 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.title}

{section.description}

 ) } ``` ## 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(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() ``` ### 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 = { 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> 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.