wagtail-enap-designsystem 1.2.1.141__py3-none-any.whl → 1.2.1.142__py3-none-any.whl

enap_designsystem/migrations/0414_showcasecomponentesdireto_and_more.py

@@ -0,0 +1,52 @@
+# Generated by Django 5.1.6 on 2025-09-16 16:36
+
+import django.db.models.deletion
+import wagtail.fields
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        (
+            "enap_designsystem",
+            "0413_showcasecomponentespage_alter_areaaluno_body_and_more",
+        ),
+        ("wagtailcore", "0094_alter_page_locale"),
+    ]
+
+    operations = [
+        migrations.CreateModel(
+            name="ShowcaseComponentesDireto",
+            fields=[
+                (
+                    "page_ptr",
+                    models.OneToOneField(
+                        auto_created=True,
+                        on_delete=django.db.models.deletion.CASCADE,
+                        parent_link=True,
+                        primary_key=True,
+                        serialize=False,
+                        to="wagtailcore.page",
+                    ),
+                ),
+                (
+                    "description",
+                    wagtail.fields.RichTextField(
+                        blank=True,
+                        default="Showcase com renderização direta dos componentes usando valores padrão",
+                        help_text="Descrição da biblioteca de componentes",
+                        verbose_name="Descrição",
+                    ),
+                ),
+            ],
+            options={
+                "verbose_name": "Showcase Direto de Componentes",
+                "verbose_name_plural": "Showcases Diretos de Componentes",
+            },
+            bases=("wagtailcore.page",),
+        ),
+        migrations.DeleteModel(
+            name="ShowcaseComponentesPage",
+        ),
+    ]

enap_designsystem/models.py

@@ -5020,4 +5020,239 @@ class SistemaVotacaoPage(Page):
 			
         if self.data_fim and now > self.data_fim:
             return False
-        return True
+        return True
+	
+
+
+
+
+
+
+from wagtail.models import Page
+from wagtail.fields import RichTextField, StreamField
+from wagtail.admin.panels import FieldPanel
+
+from .blocks import LAYOUT_STREAMBLOCKS
+
+class ShowcaseComponentesDireto(Page):
+    """
+    Showcase que renderiza componentes diretamente no template
+    usando valores padrão dos componentes
+    """
+    
+    description = RichTextField(
+        verbose_name="Descrição",
+        help_text="Descrição da biblioteca de componentes",
+        blank=True,
+        default="Showcase com renderização direta dos componentes usando valores padrão"
+    )
+    
+    content_panels = Page.content_panels + [
+        FieldPanel('description'),
+    ]
+    
+    template = 'enap_designsystem/pages/showcase_components.html'
+    
+    class Meta:
+        verbose_name = "Showcase Direto de Componentes"
+        verbose_name_plural = "Showcases Diretos de Componentes"
+    
+    def get_context(self, request):
+        context = super().get_context(request)
+        
+        try:
+            # Organizar componentes por categoria
+            categories_with_components = self.get_rendered_categories()
+            
+            context.update({
+                'categories_with_components': categories_with_components,
+                'total_components': sum(len(cat['rendered_components']) for cat in categories_with_components.values()),
+                'total_categories': len(categories_with_components),
+                'page_title': 'Showcase Direto - Componentes ENAP',
+                'page_description': 'Visualização direta dos componentes com valores padrão'
+            })
+        except Exception as e:
+            context.update({
+                'error_message': f'Erro ao carregar componentes: {str(e)}',
+                'categories_with_components': {},
+                'total_components': 0,
+                'total_categories': 0,
+            })
+            
+        return context
+    
+    def get_rendered_categories(self):
+        """Retorna categorias com componentes já renderizados"""
+        categories = {}
+        layout_streamblocks = LAYOUT_STREAMBLOCKS
+        
+        # Mapeamento de ícones
+        category_icons = {
+            'banners': 'image',
+            'galerias': 'images', 
+            'carousels': 'arrows-up-down',
+            'dashboards': 'bar-chart',
+            'formularios': 'form',
+            'cursos': 'graduation-cap',
+            'eventos': 'calendar',
+            'navegacao': 'bars',
+            'menus': 'list-ul',
+            'botoes': 'mouse-pointer',
+            'conteudo': 'file-text',
+            'secoes': 'th-large',
+            'cards': 'clone',
+            'interativos': 'cogs',
+            'midia': 'play-circle',
+            'especialidades': 'puzzle-piece',
+        }
+        
+        # Descrições das categorias
+        category_descriptions = {
+            'banners': 'Componentes para banners, heroes e seções de destaque visual',
+            'galerias': 'Componentes para exibição de imagens, galerias e portfolios',
+            'carousels': 'Componentes de carrosséis, sliders e apresentações rotativas',
+            'dashboards': 'Componentes para dashboards, KPIs, métricas e visualização de dados',
+            'formularios': 'Componentes de formulários, campos de entrada e interação',
+            'cursos': 'Componentes específicos para cursos, educação e capacitação',
+            'eventos': 'Componentes para eventos, cronogramas, timelines e agenda',
+            'navegacao': 'Componentes de navegação, menus e estrutura de site',
+            'menus': 'Componentes de menu e navegação',
+            'botoes': 'Componentes de botões, call-to-actions e elementos clicáveis',
+            'conteudo': 'Componentes de conteúdo, texto rico, citações e mídia',
+            'secoes': 'Componentes de seções, containers e estruturas de layout',
+            'cards': 'Componentes de cards, grids e elementos organizacionais',
+            'interativos': 'Componentes interativos, acordeões, modais e elementos dinâmicos',
+            'midia': 'Componentes de vídeo, áudio, podcasts e conteúdo multimídia',
+            'especialidades': 'Componentes especializados e funcionalidades específicas da ENAP',
+        }
+        
+        for stream_name, stream_block in layout_streamblocks:
+            # Pular categorias complexas
+            if stream_name in ['enap_section', 'recaptcha']:
+                continue
+            
+            if not hasattr(stream_block, 'child_blocks'):
+                continue
+                
+            category_info = {
+                'name': stream_name,
+                'display_name': self.get_category_display_name(stream_block, stream_name),
+                'icon': category_icons.get(stream_name, 'cube'),
+                'description': category_descriptions.get(stream_name, f'Componentes da categoria {stream_name}'),
+                'rendered_components': []
+            }
+            
+            # Renderizar cada componente da categoria
+            for component_name, component_block in stream_block.child_blocks.items():
+                rendered_component = self.render_component_with_defaults(
+                    component_name, component_block, stream_name
+                )
+                if rendered_component:
+                    category_info['rendered_components'].append(rendered_component)
+            
+            # Só adicionar categoria se tiver componentes renderizados
+            if category_info['rendered_components']:
+                categories[stream_name] = category_info
+        
+        return categories
+    
+    def get_category_display_name(self, stream_block, stream_name):
+        """Obtém nome de exibição da categoria"""
+        try:
+            category_meta = getattr(stream_block.__class__, 'Meta', None)
+            if category_meta and hasattr(category_meta, 'label'):
+                return category_meta.label
+        except:
+            pass
+        
+        return stream_name.replace('_', ' ').title()
+    
+    def render_component_with_defaults(self, component_name, component_block, category_name):
+        """Renderiza um componente usando valores padrão"""
+        try:
+            # Gerar dados padrão inteligentes
+            default_data = self.get_smart_defaults(component_name, component_block)
+            
+            # Tentar renderizar
+            try:
+                rendered_html = component_block.render(default_data)
+            except Exception as render_error:
+                # Se falhar com dados padrão, tentar sem dados
+                try:
+                    rendered_html = component_block.render({})
+                except:
+                    # Se ainda falhar, criar um placeholder
+                    rendered_html = f'<div style="padding: 1rem; background: #f3f4f6; border-radius: 8px; text-align: center; color: #6b7280;"><p>Componente {component_name}</p><small>Erro na renderização: {str(render_error)}</small></div>'
+            
+            return {
+                'name': component_name,
+                'display_name': self.get_component_display_name(component_block),
+                'class_name': component_block.__class__.__name__,
+                'rendered_html': rendered_html,
+                'category_name': category_name,
+                'has_error': 'Erro na renderização' in rendered_html,
+                'field_count': len(getattr(component_block, 'child_blocks', {}))
+            }
+            
+        except Exception as e:
+            print(f"Erro ao processar componente {component_name}: {e}")
+            return None
+    
+    def get_component_display_name(self, component_block):
+        """Obtém nome de exibição do componente"""
+        if hasattr(component_block, 'label') and component_block.label:
+            label = component_block.label
+            # Remove emojis do início
+            if any(label.startswith(emoji) for emoji in ['🎯', '🎨', '🏢', '🚀', '🔍', '📑', '🖼️', '⭐', '🎬']):
+                parts = label.split(' ', 1)
+                if len(parts) > 1:
+                    return parts[1]
+            return label
+        
+        return component_block.__class__.__name__.replace('Block', '').replace('_', ' ')
+    
+    def get_smart_defaults(self, component_name, component_block):
+        """Gera valores padrão inteligentes para o componente"""
+        defaults = {}
+        
+        if not hasattr(component_block, 'child_blocks'):
+            return defaults
+            
+        for field_name, field_block in component_block.child_blocks.items():
+            field_type = field_block.__class__.__name__
+            
+            # Usar valor padrão do campo se existir
+            if hasattr(field_block, 'default') and field_block.default is not None:
+                defaults[field_name] = field_block.default
+                continue
+            
+            # Gerar valores contextuais baseados no nome do campo
+            field_lower = field_name.lower()
+            
+            if 'title' in field_lower or 'titulo' in field_lower:
+                defaults[field_name] = 'Escola Nacional de Administração Pública'
+            elif 'subtitle' in field_lower or 'subtitulo' in field_lower:
+                defaults[field_name] = 'Excelência em capacitação para o serviço público'
+            elif 'text' in field_lower or 'texto' in field_lower:
+                defaults[field_name] = 'A ENAP é responsável pela capacitação de servidores públicos federais, contribuindo para a modernização da administração pública.'
+            elif 'description' in field_lower or 'descricao' in field_lower:
+                defaults[field_name] = 'Componente do Design System ENAP para construção de interfaces modernas.'
+            elif 'button' in field_lower or 'botao' in field_lower:
+                defaults[field_name] = 'Saiba Mais'
+            elif 'url' in field_lower or 'link' in field_lower:
+                defaults[field_name] = 'https://www.enap.gov.br'
+            elif 'email' in field_lower:
+                defaults[field_name] = 'contato@enap.gov.br'
+            elif field_type == 'BooleanBlock':
+                defaults[field_name] = True
+            elif field_type in ['IntegerBlock', 'FloatBlock']:
+                defaults[field_name] = 42
+            elif field_type == 'DateBlock':
+                defaults[field_name] = '2024-03-15'
+            elif field_type == 'RichTextBlock':
+                defaults[field_name] = '<p>Conteúdo de <strong>exemplo</strong> para demonstração do componente.</p>'
+            else:
+                # Valor genérico baseado no nome do campo
+                defaults[field_name] = f'Exemplo {field_name}'
+        
+        return defaults

enap_designsystem/static/enap_designsystem/blocks/cards.css

@@ -42,7 +42,6 @@
 
     p {
         font-weight: 400;
-        color: #434A54;
         line-height: 150%;
         font-size: 16px;
         word-wrap: break-word;

enap_designsystem/templates/enap_designsystem/base.html

@@ -9,7 +9,15 @@
 		<meta name="author" content="ENAP - Escola Nacional de Administração Pública">
 		<meta name="theme-color" content="#0066cc">
 		{% block metadata %}{% endblock %}
-	
+
+		<!-- Google Tag Manager -->
+		<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
+			new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
+			j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
+			'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
+			})(window,document,'script','dataLayer','GTM-WR2M7N2F');</script>
+		<!-- End Google Tag Manager -->
+			
 		{% block title %}
 		<title>{% if page.page_title and page.page_title|length > 0 %}{{ page.page_title }}{% else %}ENAP - Escola Nacional de Administração Pública{% endif %}</title>
 		{% endblock %}
@@ -148,6 +156,11 @@
 	</head>
 
 	<body>
+		<!-- Google Tag Manager (noscript) -->
+		<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-WR2M7N2F"
+			height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
+		<!-- End Google Tag Manager (noscript) -->
+
 		<a class="visually-hidden-focusable" href="#main-content">Pular para o conteúdo principal</a>
 		
 		<section class="page-wrapper">

enap_designsystem/templates/enap_designsystem/blocks/cards_titles.html

@@ -1,109 +1,5 @@
 <!-- enap_designsystem/blocks/cards_titles.html -->
 {% load wagtailcore_tags wagtailimages_tags %}
-<section class="secao-apresentacao-cards">
-    <!-- Background com imagem se fornecida -->
-    <div class="secao-background" 
-         {% if value.background_image_fundo_bg %}
-         style="background-image: url('{{ value.background_image_fundo_bg.url }}'); background-size: cover; background-position: center; background-repeat: no-repeat;"
-         {% else %}
-         style="background: {{ value.cor_fundo }};"
-         {% endif %}>
-        
-        <!-- Overlay para garantir legibilidade -->
-        <div class="secao-overlay">
-            
-            <!-- Container principal -->
-            <div class="container titulo-cards mx-auto px-4 py-16 lg:py-24">
-                
-                <!-- Título centralizado -->
-                {% if value.titulo %}
-                <div class="text-center mb-12 lg:mb-16">
-                    <h2 class="titulo-secao" 
-                        style="color: {{ value.cor_titulo|default:'#FFFFFF' }};">
-                        {{ value.titulo }}
-                    </h2>
-                </div>
-                {% endif %}
-                
-                <!-- Grid de Cards -->
-                {% if value.cards %}
-                <div class="cards-container {{ value.layout_cards|default:'cards-3-colunas' }}">
-                    {% for card in value.cards %}
-                        {% if card.block_type == 'card' %}
-                        <div class="card-item">
-                            <div class="card-apresentacao" style="background: {{ value.cor_fundo_cards }}">
-                                
-                                <!-- Imagem do card -->
-                                {% if card.value.image %}
-                                <div class="card-imagem">
-                                    {% image card.value.image width-400 as card_img %}
-                                    <img src="{{ card_img.url }}" 
-                                         alt="{{ card.value.title|default:'Card' }}"
-                                         class="card-img">
-                                </div>
-                                {% endif %}
-                                
-                                <!-- Conteúdo do card -->
-                                <div class="card-conteudo">
-
-                                    <!-- Subtítulo/Cargo -->
-                                    {% if card.value.subtitle %}
-                                    <p class="card-subtitulo" style="color: {{ value.cor_texto_cards }};">
-                                        {{ card.value.subtitle }}
-                                    </p>
-                                    {% endif %}
-
-                                    <!-- Título -->
-                                    {% if card.value.title %}
-                                    <h3 class="card-titulo" style="color: {{ value.cor_titulo_cards }};">
-                                        {{ card.value.title }}
-                                    </h3>
-                                    {% endif %}
-                                    
-                                    <!-- Descrição -->
-                                    {% if card.value.description %}
-                                    <div class="card-descricao" style="color: {{ value.cor_texto_cards }};">
-                                        {{ card.value.description|richtext }}
-                                    </div>
-                                    {% endif %}
-                                    
-                                    <!-- Link/Botão -->
-                                    {% if card.value.link_url %}
-                                    <div class="card-acao">
-                                        <a href="{{ card.value.link_url }}" 
-                                           class="card-link" style="color: {{ value.cor_titulo_cards }};"
-                                           {% if card.value.link_target %}target="{{ card.value.link_target }}"{% endif %}>
-                                            {{ card.value.link_text|default:'Saiba mais' }}
-                                            <svg class="link-arrow" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                                                <path d="M5 12h14M12 5l7 7-7 7"/>
-                                            </svg>
-                                        </a>
-                                    </div>
-                                    {% endif %}
-                                    
-                                </div>
-                                
-                            </div>
-                        </div>
-                        {% endif %}
-                    {% endfor %}
-                </div>
-                {% endif %}
-
-                {% if value.link_url %}
-                <div class="card-acao" style="text-align: center;">
-                    <a href="{{ value.link_url }}" 
-                        class="card-link" style="color: {{ value.cor_botao_texto }}; background: {{ value.cor_botao }}; padding: 12px 42px; border-radius: 32px;"
-                        {% if value.link_target %}target="{{ value.link_target }}"{% endif %}>
-                        {{ value.link_text|default:'Saiba mais' }}
-                    </a>
-                </div>
-                {% endif %}
-            </div>
-        </div>
-    </div>
-</section>
-
 <style>
 .secao-apresentacao-cards {
     position: relative;
@@ -150,11 +46,19 @@
     margin-bottom: 0;
     text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
     font-weight: 500;
-    font-style: Medium;
     font-size: 48px;
     letter-spacing: 0px;
 }
 
+.subtitulo-secao p {
+    text-align: center;
+    font-family: Georama;
+    font-weight: 400;
+    font-size: 21px;
+    line-height: 160%;
+    letter-spacing: 0px;
+}
+
 .cards-container {
     display: grid;
     gap: 2rem;
@@ -338,5 +242,118 @@
     justify-content: center;
     gap: 48px;
 }
-</style></document_content>
+</style>
+
+<section class="secao-apresentacao-cards">
+    <!-- Background com imagem se fornecida -->
+    <div class="secao-background" 
+         {% if value.background_image_fundo_bg %}
+         style="background-image: url('{{ value.background_image_fundo_bg.url }}'); background-size: cover; background-position: center; background-repeat: no-repeat;"
+         {% else %}
+         style="background: {{ value.cor_fundo }};"
+         {% endif %}>
+        
+        <!-- Overlay para garantir legibilidade -->
+        <div class="secao-overlay">
+            
+            <!-- Container principal -->
+            <div class="container titulo-cards mx-auto px-4 py-16 lg:py-24">
+                
+                <!-- Título centralizado -->
+                {% if value.titulo %}
+                <div class="text-center mb-12 lg:mb-16">
+                    <h2 class="titulo-secao" 
+                        style="color: {{ value.cor_titulo|default:'#FFFFFF' }};">
+                        {{ value.titulo }}
+                    </h2>
+                </div>
+                {% endif %}
+
+                <!-- Subtítulo centralizado -->
+                {% if value.subtitulo %}
+                <div class="mb-12 lg:mb-16">
+                    <span class="subtitulo-secao" style="color: {{ value.cor_titulo|default:'#FFFFFF' }};">{{ value.subtitulo|richtext }}</span>
+                </div>
+                {% endif %}
+                
+                <!-- Grid de Cards -->
+                {% if value.cards %}
+                <div class="cards-container {{ value.layout_cards|default:'cards-3-colunas' }}">
+                    {% for card in value.cards %}
+                        {% if card.block_type == 'card' %}
+                        <div class="card-item">
+                            <div class="card-apresentacao" style="background: {{ value.cor_fundo_cards }}">
+                                
+                                <!-- Imagem do card -->
+                                {% if card.value.image %}
+                                <div class="card-imagem">
+                                    {% image card.value.image width-400 as card_img %}
+                                    <img src="{{ card_img.url }}" 
+                                         alt="{{ card.value.title|default:'Card' }}"
+                                         class="card-img">
+                                </div>
+                                {% endif %}
+                                
+                                <!-- Conteúdo do card -->
+                                <div class="card-conteudo">
+
+                                    <!-- Subtítulo/Cargo -->
+                                    {% if card.value.subtitle %}
+                                    <p class="card-subtitulo" style="color: {{ value.cor_texto_cards }};">
+                                        {{ card.value.subtitle }}
+                                    </p>
+                                    {% endif %}
+
+                                    <!-- Título -->
+                                    {% if card.value.title %}
+                                    <h3 class="card-titulo" style="color: {{ value.cor_titulo_cards }};">
+                                        {{ card.value.title }}
+                                    </h3>
+                                    {% endif %}
+                                    
+                                    <!-- Descrição -->
+                                    {% if card.value.description %}
+                                    <div class="card-descricao" style="color: {{ value.cor_texto_cards }};">
+                                        {{ card.value.description|richtext }}
+                                    </div>
+                                    {% endif %}
+                                    
+                                    <!-- Link/Botão -->
+                                    {% if card.value.link_url %}
+                                    <div class="card-acao">
+                                        <a href="{{ card.value.link_url }}" 
+                                           class="card-link" style="color: {{ value.cor_titulo_cards }};"
+                                           {% if card.value.link_target %}target="{{ card.value.link_target }}"{% endif %}>
+                                            {{ card.value.link_text|default:'Saiba mais' }}
+                                            <svg class="link-arrow" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                                <path d="M5 12h14M12 5l7 7-7 7"/>
+                                            </svg>
+                                        </a>
+                                    </div>
+                                    {% endif %}
+                                    
+                                </div>
+                                
+                            </div>
+                        </div>
+                        {% endif %}
+                    {% endfor %}
+                </div>
+                {% endif %}
+
+                {% if value.link_url %}
+                <div class="card-acao" style="text-align: center;">
+                    <a href="{{ value.link_url }}" 
+                        class="card-link" style="color: {{ value.cor_botao_texto }}; background: {{ value.cor_botao }}; padding: 12px 42px; border-radius: 32px;"
+                        {% if value.link_target %}target="{{ value.link_target }}"{% endif %}>
+                        {{ value.link_text|default:'Saiba mais' }}
+                    </a>
+                </div>
+                {% endif %}
+            </div>
+        </div>
+    </div>
+</section>
+
+</document_content>
 </invoke>