Storybook: Capacidade de ocultar a guia da tela

Fazemos isso de uma forma razoavelmente codificada como parte de addon-docs . @ndelangen Eu me pergunto se devemos tornar isso mais configurável.

Nós poderíamos 'escondê-lo', mas ele deve estar presente para que o livro de histórias funcione agora, pelo menos até # 4169.

Escondê-lo por meio de alguma opção seria uma possibilidade.

Olá a todos! Parece que não tem havido muito nesta edição ultimamente. Se ainda houver perguntas, comentários ou bugs, fique à vontade para continuar a discussão. Infelizmente, não temos tempo para abordar todos os problemas. Estamos sempre abertos a contribuições, portanto, envie-nos uma solicitação de pull se quiser ajudar. Os problemas inativos serão fechados após 30 dias. Obrigado!

Atualmente, estou enfrentando o mesmo problema. Idealmente, poderíamos ter a opção de reordenar as guias como desejarmos, de modo que, por exemplo, no meu caso, as notas pudessem vir primeiro e o Canvas depois.

@eduina @ B3Kay FYI Atualmente, você pode ocultar todas as guias não documentais com as sinalizações --docs , por exemplo, yarn storybook --docs ou yarn build-storybook --docs

Existe uma opção para alterar a ordem e / ou seleção padrão? Gostaríamos de usar o Storybook principalmente para a funcionalidade do Documentos, mas ainda temos a capacidade de visualizar a tela. No entanto, com o Canvas na primeira posição e selecionado por padrão, os usuários mais novos às vezes perdem a documentação real incluída nos arquivos MDX.

@bmayen, eu diria que isso vai para o mesmo depósito de recursos que ocultar a guia da tela.

Eu adoraria ver a capacidade de ocultar a guia de tela para histórias específicas, bem como poder ocultar histórias para que você tenha a guia de documentos de alto nível para um componente e é isso

Minha correção atual para isso é simplesmente não ter nenhuma tag "História" na documentação, no entanto, eu perco a capacidade do botão "Mostrar código". Existe alguma maneira de ter uma visualização + código sem uma história? Obrigado

@sanchez veja https://github.com/storybookjs/storybook/pull/7966

Olá a todos! Parece que não tem havido muito nesta edição ultimamente. Se ainda houver perguntas, comentários ou bugs, fique à vontade para continuar a discussão. Infelizmente, não temos tempo para abordar todos os problemas. Estamos sempre abertos a contribuições, portanto, envie-nos uma solicitação de pull se quiser ajudar. Os problemas inativos serão fechados após 30 dias. Obrigado!

Não, eu quero isso!

Na quinta-feira, 24 de outubro de 2019, 03:44 stale [bot] [email protected] escreveu:

Olá a todos! Parece que não tem havido muita coisa acontecendo nesta questão
recentemente. Se ainda houver dúvidas, comentários ou bugs, fique à vontade
para continuar a discussão. Infelizmente, não temos tempo para chegar a
cada questão. Estamos sempre abertos a contribuições, portanto, envie-nos uma sugestão
peça se você gostaria de ajudar. Os problemas inativos serão fechados após 30
dias. Obrigado!

-
Você está recebendo isto porque está inscrito neste tópico.
Responda a este e-mail diretamente, visualize-o no GitHub
https://github.com/storybookjs/storybook/issues/7066?email_source=notifications&email_token=AANLY2QVSW7PDJJVUFLOR2DQQFG5BA5CNFSM4HXKFNS2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOECEBR5Q#issuecomment-545790198 ,
ou cancelar
https://github.com/notifications/unsubscribe-auth/AANLY2VIMIOVBIAWI6SL4WLQQFG5BANCNFSM4HXKFNSQ
.

Na minha empresa, temos dois usos principais para o livro de histórias

1. Documentando nosso sistema de design - este caso de uso é orientado para os departamentos de design e produto
2. Documentando nossos componentes da web - este caso de uso é orientado para o departamento de engenharia

No primeiro caso, preferiríamos mostrar apenas 'exemplos do mundo real' com conteúdo e propriedades típicas para nossos componentes. No entanto, no último caso, preferimos documentar exaustivamente todas as propriedades do componente, com os padrões preservados, usando o mínimo de conteúdo de espaço reservado.

O case orientado para o design é perfeito para o modo de documentos, embora ainda desejemos manter a tela para os engenheiros usarem quando necessário.

No entanto, todos concordamos que, para colocar nosso 'melhor pé em frente', o modo de documentos bonitos deve ser exibido com mais destaque.

Para isso, gostaríamos de poder configurar o livro de histórias para mostrar a guia "Documentos" na extremidade esquerda, com "Tela" à direita.

Muitos pedidos para isso, tanto aqui quanto no chat. Provavelmente é um problema geral da interface do usuário do SB e não uma coisa específica do docs, mas descobriremos uma solução de uma forma ou de outra. cc @ndelangen

@eduina @ B3Kay FYI Atualmente, você pode ocultar todas as guias não documentais com as sinalizações --docs , por exemplo, yarn storybook --docs ou yarn build-storybook --docs

Se fizermos isso os addons desaparecerão existe alguma maneira de mostrar os addons?

@matiasmenker Atualmente não https://github.com/storybookjs/storybook/issues/6700

Também estou me metendo nisso. Alguma indicação de onde alguém poderia começar a trabalhar em um RP?

Lars não é muito fácil. a maneira preview.js funciona: https://github.com/storybookjs/storybook/blob/a007de8dfd3ea7db08f88970b410a62615c5546f/lib/ui/src/components/preview/preview.js#L267 -L300

A guia é injetada lá.

Teríamos que separar a adição da guia da renderização do iframe.

Não podemos NÃO injetar o iframe, porque o iframe também renderiza documentos e realmente diz ao gerente quais histórias exibir no explorer.

@LarsDenBakker - está realmente implementado e esperando # 9095, dê um

Ermahgerd !! Acabei de lançar https://github.com/storybookjs/storybook/releases/tag/v6.0.0-alpha.2 contendo PR # 9095 que faz referência a esse problema. Atualize hoje para experimentar!

Você pode encontrar este pré-lançamento na tag @next NPM.

Fechando esta questão. Por favor, reabra se você acha que ainda há mais a fazer.

PR # 9005 é bom, mas ainda estou perdendo o recurso para definir uma guia padrão: Mesmo se - por exemplo - a guia Docs for colocada na primeira posição, a guia de tela estará ativa ao abrir uma história.

@eduina @ B3Kay FYI Atualmente, você pode ocultar todas as guias não documentais com as sinalizações --docs , por exemplo, yarn storybook --docs ou yarn build-storybook --docs

@shilman
Verificado em 5.3.7 e 5.3.14 para não estar funcionando. A guia da tela ainda está visível

Esperando por este lançamento desesperadamente agora. Estou quase terminando a atualização depois de segurar esta atualização por muito tempo. @shilman deve conhecer minha história de bugs gerados com addon-info . Fora do meu projeto.
Atualizado com sucesso. Belo uso de CSF e docspage . Amei!

Por favor, acelere este lançamento, se possível. Depende disso.

E obrigado por todo o seu apoio em questões do GitHub ou artigo médio. Muito apreciado.

Você pode acompanhar o status de lançamento aqui https://github.com/storybookjs/storybook/issues/9311

@ B3Kay Eu tenho o mesmo problema. Você pode substituir no url do livro de histórias /?path=/story/ por /?path=/docs/ para que os documentos sejam selecionados sempre que o livro de histórias for aberto.

Para ocultar o botão (nenhuma correção ideal), estou apenas adicionando o seguinte CSS a uma extensão de navegador que injeta CSS (é claro que isso só funciona para você, os outros membros da sua empresa ainda verão):

#root > div > div.css-sqdry3 > div > div.css-sqdry3 > div:nth-child(1) > div > div.simplebar-wrapper > div.simplebar-mask > div > div > div > div > div.css-11sh1n2 > div.css-1tgscux > a:nth-child(1) > button {
    display: none;   
}

Não é ideal, mas talvez seja útil para alguém.

Se alguém estiver interessado, eu tenho uma solução que está funcionando bem para mim.

Criei um plugin super simples com isso. É register.js é este:

import { addons } from '@storybook/addons';
import { STORY_RENDERED, DOCS_RENDERED } from '@storybook/core-events';

const ADDON_ID = 'YOUR_PLUGIN_ID';

addons.register(ADDON_ID, api => {

    // Check whether we are on a docsOnly page and add a corresponding body class for styling
    const setBodyClass = () => {

        // Needs animation frame to make sure story component has been mounted
        window.requestAnimationFrame(() => {

            // You can change the logic of when to hide the canvas button of course.
            // you have full access to the storybook API, so you can also configure it per-story etc.
            const isDocsOnly = api.getCurrentStoryData().parameters.docsOnly === true;

            if (isDocsOnly) {
                document.body.classList.add('is-docs-only');
            } else {
                document.body.classList.remove('is-docs-only');
            }
        });
    };

    api.on(STORY_RENDERED, setBodyClass);
    api.on(DOCS_RENDERED, setBodyClass);
});

No meu manager-head.html

.is-docs-only .os-content a:not([id])[href*="?path=/story"] {
    display: none !important;
}

Em minhas docsOnly páginas, eu defino viewMode: 'docs' para garantir que a navegação funcione bem.