Stories

Apresentação

O componente Stories é responsável por criar uma experiência de visualização de histórias similar ao Instagram Stories, permitindo que os usuários naveguem por uma sequência de imagens ou vídeos. Ele oferece funcionalidades avançadas como analytics, pre-fetch de mídia e controles de reprodução.

Quando usar

• Para apresentação de produtos em destaque
• Para mostrar novidades da empresa
• Para apresentar campanhas promocionais
• Para compartilhar eventos e momentos
• Para mostrar tutoriais passo a passo
• Para apresentar depoimentos de clientes
• Para mostrar behind the scenes
• Para apresentar conteúdo temporário

Forma básica de uso

import { Stories, Button } from 'eitri-luminus';

// Stories básico
<Stories>
  <Stories.Single
    thumbnailImage="/story1.jpg"
    title="Novo Produto"
    media="/story1.jpg"
    type="image"
  />
  <Stories.Single
    thumbnailImage="/story2.jpg"
    title="Promoção"
    media="/story2.mp4"
    type="video"
  />
</Stories>

// Stories com analytics
<Stories 
  onAnalyticsEvent={(event) => console.log('Analytics:', event)}
  prefetch={true}
>
  <Stories.Single
    thumbnailImage="/story1.jpg"
    title="Produto 1"
    media="/story1.jpg"
    type="image"
    storyViewed={false}
  />
  <Stories.Single
    thumbnailImage="/story2.jpg"
    title="Produto 2"
    media="/story2.jpg"
    type="image"
    storyViewed={true}
  />
</Stories>

// Stories com cores personalizadas
<Stories>
  <Stories.Single
    thumbnailImage="/story1.jpg"
    title="Destaque"
    media="/story1.jpg"
    type="image"
    color="primary"
    ringSize={80}
  />
  <Stories.Single
    thumbnailImage="/story2.jpg"
    title="Oferta"
    media="/story2.jpg"
    type="image"
    color="warning"
    ringSize={80}
  />
</Stories>

// Stories com call-to-action
<Stories>
  <Stories.Single
    thumbnailImage="/story1.jpg"
    title="Comprar Agora"
    media="/story1.jpg"
    type="image"
    CTAComponent={<Button color="primary">Ver Produto</Button>}
  />
</Stories>

// Stories com ícones personalizados
<Stories>
  <Stories.Single
    thumbnailImage="/story1.jpg"
    title="Vídeo"
    media="/story1.mp4"
    type="video"
    closeIcon={<Text>✕</Text>}
    mutedIcon={<Text>🔇</Text>}
    unmutedIcon={<Text>🔊</Text>}
  />
</Stories>

// Stories com data de postagem
<Stories>
  <Stories.Single
    thumbnailImage="/story1.jpg"
    title="Novidade"
    media="/story1.jpg"
    type="image"
    postedAt="2024-01-15T10:30:00Z"
  />
</Stories>

// Stories com callbacks personalizados
<Stories>
  <Stories.Single
    thumbnailImage="/story1.jpg"
    title="Interativo"
    media="/story1.jpg"
    type="image"
    onNext={() => console.log('Próximo')}
    onPrev={() => console.log('Anterior')}
    onClose={() => console.log('Fechar')}
    onDetails={() => console.log('Detalhes')}
  />
</Stories>

// Stories responsivo
<Stories className="stories-responsive">
  <Stories.Single
    thumbnailImage="/story1.jpg"
    title="Responsivo"
    media="/story1.jpg"
    type="image"
    ringSize={60}
  />
</Stories>

// Stories para campanhas
<Stories>
  <Stories.Single
    thumbnailImage="/campanha1.jpg"
    title="Black Friday"
    media="/campanha1.jpg"
    type="image"
    color="error"
  />
  <Stories.Single
    thumbnailImage="/campanha2.jpg"
    title="Descontos"
    media="/campanha2.jpg"
    type="image"
    color="success"
  />
</Stories>

// Stories com id personalizado
<Stories id="stories-principal">
  <Stories.Single
    thumbnailImage="/story1.jpg"
    title="Principal"
    media="/story1.jpg"
    type="image"
  />
</Stories>

// Stories para tutoriais
<Stories>
  <Stories.Single
    thumbnailImage="/tutorial1.jpg"
    title="Passo 1"
    media="/tutorial1.jpg"
    type="image"
  />
  <Stories.Single
    thumbnailImage="/tutorial2.jpg"
    title="Passo 2"
    media="/tutorial2.jpg"
    type="image"
  />
</Stories>

Propriedades

Propriedade	Tipo	Descrição
children	ReactNode	Conteúdo do stories (Stories.Single)
prefetch	boolean	Habilita pre-fetch de mídia (padrão: true)
onAnalyticsEvent	function	Função para eventos de analytics
className	string	Classes CSS adicionais
id	string	Identificador único do componente

Stories.Single

Propriedade	Tipo	Descrição
thumbnailImage	string	URL da imagem de miniatura
title	string	Título do story
storyViewed	boolean	Se o story já foi visualizado
color	string	Cor do anel (primary, secondary, etc)
ringSize	number	Tamanho do anel (padrão: 100)
media	string	URL da mídia (imagem ou vídeo)
type	string	Tipo de mídia ('image' ou 'video')
postedAt	string	Data de postagem
onNext	function	Callback para próximo story
onPrev	function	Callback para story anterior
onClose	function	Callback para fechar story
onDetails	function	Callback para detalhes
onPause	function	Callback para pausar vídeo
onResume	function	Callback para resumir vídeo
CTAComponent	ReactNode	Componente de call-to-action
closeIcon	ReactNode	Ícone de fechar
mutedIcon	ReactNode	Ícone de mudo
unmutedIcon	ReactNode	Ícone de som

Heranças

O componente Stories herda todas as propriedades comuns da biblioteca através da interface CommonProps, que inclui:

• Propriedades de estilo (margin, padding, etc)
• Propriedades de layout (flex, grid, etc)
• Propriedades de posicionamento
• Propriedades de acessibilidade
• Propriedades de identificação (id, data-e)

Observações

• O componente usa a classe 'stories' para estilização base
• Suporta pre-fetch automático de mídia
• Oferece analytics detalhados de interação
• É responsivo por padrão
• Pode ser estilizado com classes do Tailwind
• Suporta propriedades de layout flexíveis
• Mantém a acessibilidade por padrão
• Pode ser usado em qualquer contexto de layout
• Suporta imagens e vídeos
• Pode ser combinado com outros componentes
• Ideal para conteúdo temporário
• Suporta estilos inline e classes CSS
• Pode ser usado para diferentes tipos de apresentação
• Funciona bem com campanhas e promoções
• Facilita a criação de experiências interativas
• Suporta controles de reprodução
• Interface familiar e intuitiva