storybook amp

Storybook amp html ·

Storybook Addon para AMP (Páginas móveis aceleradas). Permite exibir em suas histórias componentes HTML de amp gerados com o React.

Índice

• Características
• Demonstração
• Começando
  • Instalação
  • Configuração
  • Uso
  • Exemplos
• Roteiro
• Contribuindo
• Licença
• Agradecimentos
• Links

Características

• Entregue em cada história o código de saída (AMP pronto) resultante do SSR.
• Trabalha com sites de amplificadores, email de amplificador e anúncios de amplificadores
• Validação do amplificador em tempo real.
• Adiciona painel Addon para também validar a história (usando o validador de amplificador online) e visualizar o código de saída.
• Componentes com estilo de suporte usando uma função de renderização personalizada

Demonstração

• Demonstração HTML do Livro de Histórias

Começando

Instalação

npm install -D storybook-amp

Configuração

Em seguida, atualização .storybook/main.js para o seguinte:

 // .storybook/main.js

module . exports = {
  stories : [
    // ...
  ] ,
  addons : [
    // Other Storybook addons

    'storybook-amp' , // ? The addon registered here
  ] ,
} ;

Uso

Para definir configurações personalizadas, use o parâmetro amp .

 // .storybook/preview.js

const scripts = '' ;
const styles = '' ;

export const parameters = {
  // Other defined parameters

  amp : {              // ? The addon parameters here
    isEnabled : true ,  // Enable the addon, false by default (boolean)
    scripts ,          // Global scripts to add, empty by default (string)
    styles ,           // Custom css styles, empty by default (string)
  } ,
} ;

Você pode usar o parâmetro amp para substituir as configurações em cada história individualmente:

 // Story example

export default {
  title : "Components/amp-youtube" ,
  parameters : {
    amp : {
      scripts : // ? Script needed by the story
        `<script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>` ,
    } ,
  } ,
} ;

export const Story = ( args ) => (
  < amp-youtube
    width = "480"
    height = "270"
    layout = "responsive"
    data-videoid = 'lBTCB7yLs8Y'
  > </ amp-youtube >
)

Exemplos

• Reagir

Roteiro

• Torne -o compatível com o complemento cromático
• Torne -o compatível com o complemento de acessibilidade
• Ajuste os detalhes da interface do usuário quando usado com Docs Addon
• Mais ferramentas para anúncios de amplificador e email de amplificador
• Adicione mais testes de exemplo
• Adicione testes
• Tornar a integração do CI possível

Contribuindo

O storybook amp html addon é um projeto de código aberto. Estamos comprometidos com um processo de desenvolvimento totalmente transparente e apreciamos altamente todas as contribuições. Esteja você nos ajudando a corrigir bugs, propondo novos recursos, melhorando nossa documentação ou espalhando a palavra - gostaríamos de tê -lo como parte da comunidade.

Consulte nossas diretrizes de contribuição e código de conduta.

Licença

O Addon HTML do Livro de Histórias é licenciado sob a licença do MIT - consulte o arquivo de licença para obter detalhes.

Agradecimentos

Inicialmente criado por Onwidget e mantido por uma comunidade de colaboradores.

Links

• Projeto AMP
• Amp incrível