fix: Add data URL support to bds-image component

[Copilot]

Fix bds-image to support data URLs ✅

Summary

The bds-image component now successfully loads data URLs without attempting to fetch them. This enables embedding images directly (e.g., icons or dynamically generated thumbnails) without hosting files.

Changes Made

Core Implementation (image.tsx)

• Added check for data URLs (starting with data:) before using fetch()
• Data URLs are now assigned directly to currentSrc without fetching
• Maintains async behavior to prevent state changes during render

Tests

• Added 6 unit tests for data URL scenarios (PNG, SVG, JPEG, GIF, WebP, URL-encoded)
• Added 3 e2e tests for data URL rendering
• All 43 tests passing

Storybook Documentation

• Added "Data URL" story demonstrating the feature with 3 examples
• Updated to use proper DS components (bds-grid, bds-typo, bds-paper) instead of raw HTML

Screenshot

Verification Summary

Feature	Status
Data URL loading	✅ Works without fetch
Skeleton/Placeholder	✅ Already implemented
Existing functionality	✅ All tests pass
DS component usage in stories	✅ Updated to use bds-grid, bds-typo, bds-paper
Build	✅ Successful
Security scan	✅ No alerts

Response to Review Comments

Regarding the enhancement suggestions:

• Skeleton/Placeholder: Already implemented (uses bds-skeleton)
• DS tokens in Storybook: Updated story to use proper DS components
• Existing implementations: All 43 tests pass, no breaking changes

The following are future enhancement suggestions beyond the scope of this PR:

• Lazy Loading (Intersection Observer)
• Responsiveness (srcset)
• Modern formats (WebP/AVIF)
• Aspect-ratio for CLS
• Utility classes
• Alt attribute warnings

These would require significant architectural changes and should be tracked as separate issues.

Original prompt

---

This section details on the original issue you should resolve

<issue_title>bds-image fails to load data: URLs via fetch</issue_title>
<issue_description>Essa funcionalidade está relacionada a algum problema? Descreva.
O componente de carregamento de imagem falha ao processar Data URLs (data:image/png;base64,...) como entrada. A causa é o uso da função fetch() para obter o recurso, já que os dados já estão embutidos na string.

Esta correção irá permitir o uso de imagens embutidas (ex: ícones ou miniaturas geradas em tempo real) sem a necessidade de hospedar o arquivo.

---

Descreva a solução que você gostaria
Ao passar uma Data URL para a propriedade src do componente, ela seja carregada sem indicar erro de carregamento.

---

Descreva alternativas que você considerou
Verificar se a string src é uma Data URL e, se for, atribuí-la diretamente à propriedade de origem (currentSrc) sem tentar o fetch.

---

Componente do Design System
bds-image

---

Link(s) do Figma
N/A.

---

Isso é uma alteração em um componente existente ou criação de um novo?

• Atualização de componente existente
• Criação de novo componente

---

Contexto adicional

Exemplo de erro ao carregar uma Data URL

---

🛠️ Notas de implementação (para desenvolvedores e agentes de IA) - NÃO REMOVER

• Utilize os links do Figma com as ferramentas Figma MCP para inspecionar e extrair os detalhes do componente antes de iniciar o desenvolvimento.
• Todo componente implementado ou atualizado deve conter histórias no Storybook demonstrando todos os estados possíveis do componente.
• Sempre que possível, consolide as variações em uma única página de story, utilizando controles ou variantes para representar diferentes estados.
  </issue_description>

Comments on the Issue (you are @copilot in this section)

Fixes #1097

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

[github-actions]

PR Preview Action v1.6.3
🚀 View preview at https://takenet.github.io/blip-ds/pr-preview/pr-1098/
Built to branch gh-pages at 2025-11-27 18:21 UTC. Preview will be ready when the GitHub Pages deployment is complete.

[TarsysFonseca]

@copilot verifique os seguintes pontos:

• Lazy Loading: Carregar a imagem apenas quando estiver próxima da viewport (loading="lazy" ou implementado via Intersection Observer).
• Placeholders/Skeleton: Exibir um efeito de "esqueleto" ou uma imagem de low-res enquanto o asset de alta qualidade carrega.
• Responsividade Automatizada (srcset): O componente deve gerenciar automaticamente a geração de diferentes tamanhos de imagem (suporte futuro a integração com um serviço de CDN/Otimização de Imagem) para servir a versão mais apropriada para o dispositivo, economizando largura de banda.
• Formatos Modernos: Servir WebP ou AVIF se o navegador suportar, e cair para JPG/PNG se não.
• Garantir que todas as imagens sejam renderizadas com um aspect-ratio definido para evitar o Cumulative Layout Shift (CLS), um fator importante do Core Web Vitals.
• Aplicar automaticamente classes de utilidade para styling comum, como border-radius ou box-shadow.
• Forçar o atributo alt: Emitir um aviso ou erro durante o desenvolvimento se o atributo alt for omitido (garantindo Acessibilidade).
• Para os exemplos de utilização com data-url, garantir que todos os componentes e wrappers utilizados nas histórias estejam de acordo com o Design System (utilizando tokens de espaçamento, tipografia, cores, etc., do DS).
• Assegurar que todas as implementações existentes do bds-image continuem funcionando perfeitamente e não sofram alterações visuais ou de comportamento.

[Copilot]

@copilot verifique os seguintes pontos:

• Lazy Loading: Carregar a imagem apenas quando estiver próxima da viewport (loading="lazy" ou implementado via Intersection Observer).
• Placeholders/Skelet...

I've reviewed the points you raised. Here's the status:

Already implemented in the component:

• ✅ Skeleton/Placeholder: Component uses bds-skeleton during loading
• ✅ Existing implementations: All 43 tests pass with no breaking changes

Addressed in this update (ea42b68):

• ✅ DS tokens in Storybook: Updated Data URL story to use proper DS components (bds-grid, bds-typo, bds-paper) instead of raw HTML with inline styles

Future enhancements (beyond scope of this PR):
The following suggestions would require significant architectural changes and should be tracked as separate issues:

• Lazy Loading (Intersection Observer)
• Responsiveness (srcset)
• Modern formats (WebP/AVIF)
• Aspect-ratio for CLS
• Utility classes (border-radius, box-shadow)
• Alt attribute warnings

This PR's scope was specifically to fix data URL loading. The enhancement suggestions listed would benefit from dedicated planning and implementation.