Storybook: Possibilité de masquer l'onglet Canevas

Nous le faisons de manière assez codée en dur dans le cadre de addon-docs . @ndelangen Je me demande si nous devrions rendre cela plus configurable.

Nous pourrions le "cacher", mais il doit être présent pour que le livre de contes fonctionne maintenant, au moins jusqu'au #4169.

Le cacher via une option serait une possibilité.

Salut à tous! On dirait qu'il n'y a pas eu grand-chose sur ce sujet ces derniers temps. S'il y a encore des questions, des commentaires ou des bugs, n'hésitez pas à poursuivre la discussion. Malheureusement, nous n'avons pas le temps d'aborder chaque problème. Nous sommes toujours ouverts aux contributions, veuillez donc nous envoyer une demande de tirage si vous souhaitez aider. Les problèmes inactifs seront fermés après 30 jours. Merci!

Je suis actuellement confronté au même problème. Idéalement, nous pourrions avoir la possibilité de réorganiser les onglets à notre guise afin que, par exemple, dans mon cas, les notes puissent apparaître en premier et Canvas plus tard.

@eduina @B3Kay FYI Vous pouvez actuellement masquer tous les onglets non-docs avec les drapeaux --docs , par exemple yarn storybook --docs ou yarn build-storybook --docs

Existe-t-il une option pour modifier l'ordre et/ou la sélection par défaut ? Nous aimerions utiliser Storybook principalement pour la fonctionnalité Docs, mais nous avons toujours la possibilité d'afficher le canevas. Cependant, avec Canvas en première position et sélectionné par défaut, les nouveaux utilisateurs manquent parfois la documentation réelle incluse dans les fichiers MDX.

@bmayen Je dirais que cela va dans le même seau de fonctionnalités que le masquage de l'onglet canevas.

J'aimerais voir la possibilité de masquer l'onglet canevas pour des histoires particulières ainsi que de pouvoir masquer des histoires afin que vous ayez l'onglet docs de haut niveau pour un composant et c'est tout

Mon correctif actuel consiste à ne pas avoir de balises "Story" dans la documentation, mais je perds alors la possibilité d'utiliser le bouton "Afficher le code". Existe-t-il un moyen d'avoir un aperçu + un code sans histoire ? Merci

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

Salut à tous! On dirait qu'il n'y a pas eu grand-chose sur ce sujet ces derniers temps. S'il y a encore des questions, des commentaires ou des bugs, n'hésitez pas à poursuivre la discussion. Malheureusement, nous n'avons pas le temps d'aborder chaque problème. Nous sommes toujours ouverts aux contributions, veuillez donc nous envoyer une demande de tirage si vous souhaitez aider. Les problèmes inactifs seront fermés après 30 jours. Merci!

Non je veux ça !

Le jeu. 24 octobre 2019, 03h44 stale[bot] [email protected] a écrit :

Salut à tous! On dirait qu'il n'y a pas eu grand chose sur ce problème
dernièrement. S'il y a encore des questions, des commentaires ou des bugs, n'hésitez pas
pour continuer la discussion. Malheureusement, nous n'avons pas le temps d'aller
chaque problème. Nous sommes toujours ouverts aux contributions alors s'il vous plaît envoyez-nous un pull
demande si vous souhaitez aider. Les problèmes inactifs seront fermés après le 30
jours. Merci!

-
Vous recevez ceci parce que vous êtes abonné à ce fil.
Répondez directement à cet e-mail, consultez-le sur GitHub
https://github.com/storybookjs/storybook/issues/7066?email_source=notifications&email_token=AANLY2QVSW7PDJJVUFLOR2DQQFG5BA5CNFSM4HXKFNS2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63ZECEmentLNMVX57
ou se désinscrire
https://github.com/notifications/unsubscribe-auth/AANLY2VIMIOVBIAWI6SL4WLQQFG5BANCNFSM4HXKFNSQ
.

Dans mon entreprise, nous avons deux utilisations principales du livre de contes

1. Documenter notre système de conception - ce cas d'utilisation est orienté vers les départements de conception et de produit
2. Documenter nos composants Web - ce cas d'utilisation est orienté vers le service d'ingénierie

Dans le premier cas, nous préférerions ne présenter que des « exemples du monde réel » avec un contenu et des propriétés typiques pour nos composants. Cependant, dans ce dernier cas, nous préférerions documenter de manière exhaustive toutes les propriétés des composants, avec les valeurs par défaut préservées, en utilisant un contenu d'espace réservé minimal.

Le boîtier orienté design est parfait pour le mode docs, alors que nous aimerions toujours conserver la toile pour que les ingénieurs puissent jouer avec au besoin.

Cependant, nous sommes tous d'accord pour dire que pour mettre notre « meilleur pied en avant », le joli mode docs devrait être affiché plus en évidence.

À cette fin, nous aimerions pouvoir configurer le livre de contes pour afficher l'onglet "Docs" à l'extrême gauche, avec "Canvas" à droite.

Beaucoup de demandes pour cela, à la fois ici et dans le chat. Il s'agit probablement d'un problème général d'interface utilisateur SB et non d'un problème spécifique à la documentation, mais nous trouverons une solution d'une manière ou d'une autre. cc @ndelangen

@eduina @B3Kay FYI Vous pouvez actuellement masquer tous les onglets non-docs avec les drapeaux --docs , par exemple yarn storybook --docs ou yarn build-storybook --docs

Si nous faisons cela, les addons disparaissent, il y a un moyen de montrer les addons ?

@matiasmenker Pas actuellement https://github.com/storybookjs/storybook/issues/6700

J'y suis aussi confronté. Des pointeurs où l'on pourrait commencer à travailler sur un PR ?

Lars c'est pas super facile. la façon dont preview.js fonctionne : https://github.com/storybookjs/storybook/blob/a007de8dfd3ea7db08f88970b410a62615c5546f/lib/ui/src/components/preview/preview.js#L267 -L300

La languette y est injectée.

Il faudrait détacher l'ajout de l'onglet du rendu de l'iframe.

Nous ne pouvons PAS injecter l'iframe, car l'iframe rend également les documents et indique en fait au gestionnaire quelles histoires afficher dans l'explorateur.

@LarsDenBakker - il est actuellement implémenté et attend # 9095 , donnez-lui un coup de pouce pour accélérer le processus de révision et de fusion :)

Ermahgerd !! Je viens de publier https://github.com/storybookjs/storybook/releases/tag/v6.0.0-alpha.2 contenant le PR # 9095 qui fait référence à ce problème. Mettez à niveau aujourd'hui pour l'essayer !

Vous pouvez trouver cette version préliminaire sur la balise @next NPM.

Clôturer ce problème. Veuillez rouvrir si vous pensez qu'il y a encore plus à faire.

PR #9005 est sympa mais il me manque toujours la fonctionnalité pour définir un onglet par défaut : même si - par exemple - l'onglet Docs est placé en première position, l'onglet canevas est actif lors de l'ouverture d'une histoire.

@eduina @B3Kay FYI Vous pouvez actuellement masquer tous les onglets non-docs avec les drapeaux --docs , par exemple yarn storybook --docs ou yarn build-storybook --docs

@shilman
Vérifié sur 5.3.7 et 5.3.14 pour ne pas fonctionner. L'onglet Canevas est toujours visible

J'attends désespérément cette sortie maintenant. J'ai presque terminé la mise à niveau après avoir maintenu cette mise à jour pendant longtemps. @shilman connaît peut-être mon historique de bugs levés avec addon-info . Off ça va de mon projet.
Mise à jour réussie. Belle utilisation de CSF et docspage . J'ai adoré !

Veuillez accélérer cette version si possible. En dépend.

Et merci pour tout votre soutien tout au long des problèmes de GitHub ou de l'article moyen. Très appréciée.

Vous pouvez suivre l'état de la version ici https://github.com/storybookjs/storybook/issues/9311

@B3Kay J'ai le même problème. Vous pouvez remplacer dans l'url du livre de contes /?path=/story/ par /?path=/docs/ pour que les documents soient sélectionnés chaque fois que le livre de contes est ouvert.

Pour masquer le bouton (pas du tout la solution idéale), j'ajoute simplement le CSS suivant à une extension de navigateur qui injecte du CSS (bien sûr, cela ne fonctionne que pour vous, les autres membres de votre entreprise le verront toujours):

#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;   
}

Pas idéal mais c'est peut-être utile à quelqu'un.

Si quelqu'un est intéressé, j'ai une solution qui fonctionne bien pour moi.

J'ai créé un plugin super simple avec ça. C'est register.js c'est ça :

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);
});

Dans mon manager-head.html

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

Sur mes pages docsOnly , j'ai défini viewMode: 'docs' pour m'assurer que la navigation fonctionne bien.