Storybook: Möglichkeit zum Ausblenden des Canvas-Tabs

Wir tun dies ziemlich hartcodiert als Teil von addon-docs . @ndelangen Ich frage mich, ob wir dies konfigurierbarer machen sollten.

Wir könnten es "verstecken", aber es muss vorhanden sein, damit das Märchenbuch jetzt funktioniert, zumindest bis #4169.

Es wäre eine Möglichkeit, es über eine Option zu verstecken.

Hallo allerseits! Anscheinend hat sich in dieser Ausgabe in letzter Zeit nicht viel getan. Wenn es noch Fragen, Kommentare oder Fehler gibt, können Sie die Diskussion gerne fortsetzen. Leider haben wir nicht die Zeit, auf jedes Problem einzugehen. Wir sind immer offen für Beiträge, also senden Sie uns bitte einen Pull-Request, wenn Sie helfen möchten. Inaktive Ausgaben werden nach 30 Tagen geschlossen. Vielen Dank!

ich stehe aktuell vor dem gleichen Problem. Im Idealfall könnten wir die Option haben, die Registerkarten nach Belieben neu anzuordnen, sodass in meinem Fall beispielsweise Notizen zuerst und Canvas später erscheinen können.

@eduina @B3Kay FYI Sie können derzeit alle Nicht-Dokumenten-Registerkarten mit den --docs Flags ausblenden, z. B. yarn storybook --docs oder yarn build-storybook --docs

Gibt es eine Möglichkeit, die Reihenfolge und/oder Standardauswahl zu ändern? Wir möchten Storybook hauptsächlich für die Docs-Funktionalität verwenden, aber trotzdem die Möglichkeit haben, den Canvas anzuzeigen. Wenn Canvas an erster Stelle steht und standardmäßig ausgewählt ist, verpassen neuere Benutzer jedoch manchmal die eigentliche Dokumentation, die in den MDX-Dateien enthalten ist.

@bmayen Ich würde sagen, das geht in den gleichen Feature-Bucket wie das Ausblenden der Canvas-Registerkarte.

Ich würde gerne die Möglichkeit sehen, die Canvas-Registerkarte für bestimmte Storys auszublenden sowie Storys auszublenden, damit Sie die High-Level-Docs-Registerkarte für eine Komponente haben und das war's

Meine derzeitige Lösung dafür ist, dass ich einfach keine "Story"-Tags in der Dokumentation habe, aber dann verliere ich die Fähigkeit für die Schaltfläche "Code anzeigen". Gibt es eine Möglichkeit, eine Vorschau und einen Code ohne Story zu haben? Vielen Dank

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

Hallo allerseits! Anscheinend hat sich in dieser Ausgabe in letzter Zeit nicht viel getan. Wenn es noch Fragen, Kommentare oder Fehler gibt, können Sie die Diskussion gerne fortsetzen. Leider haben wir nicht die Zeit, auf jedes Problem einzugehen. Wir sind immer offen für Beiträge, also senden Sie uns bitte einen Pull-Request, wenn Sie helfen möchten. Inaktive Ausgaben werden nach 30 Tagen geschlossen. Vielen Dank!

Nein, ich will das!

Am Do, 24. Oktober 2019, 03:44 Uhr stale[bot] [email protected] schrieb:

Hallo allerseits! In dieser Ausgabe scheint nicht viel passiert zu sein
in letzter Zeit. Wenn es noch Fragen, Kommentare oder Fehler gibt, zögern Sie bitte nicht
um die Diskussion fortzusetzen. Leider haben wir keine Zeit um zu kommen
jedes Problem. Wir sind immer offen für Beiträge, also schickt uns bitte einen Pull
fordern Sie an, wenn Sie helfen möchten. Inaktive Probleme werden nach 30  geschlossen
Tage. Vielen Dank!

—
Sie erhalten dies, weil Sie diesen Thread abonniert haben.
Antworten Sie direkt auf diese E-Mail und zeigen Sie sie auf GitHub an
https://github.com/storybookjs/storybook/issues/7066?email_source=notifications&email_token=AANLY2QVSW7PDJJVUFLOR2DQQFG5BA5CNFSM4HXKFNS2YY3PNVWWK3TUL52HS4DFVREXG43VMVBJKTLNWWZ5
oder abmelden
https://github.com/notifications/unsubscribe-auth/AANLY2VIMIOVBIAWI6SL4WLQQFG5BANCNFSM4HXKFNSQ
.

In meiner Firma haben wir zwei Hauptanwendungen für Märchenbücher

1. Dokumentation unseres Designsystems – dieser Use Case orientiert sich an den Design- und Produktabteilungen
2. Dokumentation unserer Webkomponenten – dieser Use Case richtet sich an die Engineering-Abteilung

Im ersten Fall präsentieren wir lieber nur „reale Beispiele“ mit typischen Inhalten und Eigenschaften unserer Komponenten. Im letzteren Fall würden wir es jedoch vorziehen, alle Komponenteneigenschaften umfassend zu dokumentieren, wobei die Standardwerte beibehalten werden und nur minimale Platzhalterinhalte verwendet werden.

Das designorientierte Gehäuse ist perfekt für den Docs-Modus, während wir dennoch die Leinwand behalten möchten, mit der Ingenieure nach Bedarf spielen können.

Wir sind uns jedoch alle einig, dass der hübsche Dokumentenmodus prominenter angezeigt werden sollte, um unser Bestes zu geben.

Zu diesem Zweck möchten wir Storybook so konfigurieren, dass ganz links der Tab "Docs" und rechts "Canvas" angezeigt werden.

Viele Anfragen dazu, sowohl hier als auch im Chat. Es ist wahrscheinlich ein allgemeines SB-UI-Problem und keine dokumentenspezifische Sache, aber wir werden auf die eine oder andere Weise eine Lösung finden. cc @delangen

@eduina @B3Kay FYI Sie können derzeit alle Nicht-Dokumenten-Registerkarten mit den --docs Flags ausblenden, z. B. yarn storybook --docs oder yarn build-storybook --docs

Wenn wir das tun, verschwinden die Addons, gibt es eine Möglichkeit, die Addons anzuzeigen?

@matiasmenker Derzeit nicht https://github.com/storybookjs/storybook/issues/6700

Ich laufe auch selbst darauf ein. Irgendwelche Hinweise, wo man anfangen könnte, an einer PR zu arbeiten?

Lars, es ist nicht ganz einfach. So funktioniert preview.js : https://github.com/storybookjs/storybook/blob/a007de8dfd3ea7db08f88970b410a62615c5546f/lib/ui/src/components/preview/preview.js#L267 -L300

Dort wird die Lasche injiziert.

Wir müssten das Hinzufügen der Registerkarte vom Rendering des Iframes trennen.

Wir können den Iframe NICHT einfügen, da der Iframe auch Dokumente rendert und dem Manager tatsächlich mitteilt, welche Storys im Explorer angezeigt werden sollen.

@LarsDenBakker - es ist tatsächlich implementiert und wartet #9095, gib ihm einen Daumen hoch, um den Überprüfungs- und Zusammenführungsprozess zu beschleunigen :)

Ermahgerd!! Ich habe gerade https://github.com/storybookjs/storybook/releases/tag/v6.0.0-alpha.2 veröffentlicht, das PR #9095 enthält, das auf dieses Problem verweist. Aktualisieren Sie noch heute, um es auszuprobieren!

Sie finden diese Vorabversion unter dem @next NPM-Tag.

Schließen dieses Problems. Bitte öffnen Sie wieder, wenn Sie der Meinung sind, dass noch mehr zu tun ist.

PR #9005 ist nett, aber mir fehlt noch die Funktion zum Setzen eines Standard-Tabs: Auch wenn beispielsweise der Docs-Tab an erster Stelle steht, ist der Canvas-Tab beim Öffnen einer Story aktiv.

@eduina @B3Kay FYI Sie können derzeit alle Nicht-Dokumenten-Registerkarten mit den --docs Flags ausblenden, z. B. yarn storybook --docs oder yarn build-storybook --docs

@shilman
In 5.3.7 und 5.3.14 bestätigt, dass es nicht funktioniert. Die Registerkarte "Leinwand" ist noch sichtbar

Warte jetzt verzweifelt auf diese Veröffentlichung. Ich bin fast fertig mit dem Upgrade, nachdem ich dieses Update lange gehalten habe. @shilman kennt vielleicht meine addon-info ausgelöst wurde . Ab geht es von meinem Projekt.
Erfolgreich aktualisiert. Schöne Verwendung von CSF und docspage . Liebte es!

Bitte beschleunigen Sie diese Veröffentlichung, wenn möglich. Abhängig davon.

Und vielen Dank für Ihre Unterstützung bei GitHub-Ausgaben oder mittleren Artikeln. Sehr geschätzt.

Sie können den Release-Status hier verfolgen https://github.com/storybookjs/storybook/issues/9311

@B3Kay Ich habe das gleiche Problem. Sie können in der Storybook-URL /?path=/story/ durch /?path=/docs/ ersetzen, damit die Dokumente beim Öffnen des Storybooks ausgewählt werden.

Um die Schaltfläche auszublenden (überhaupt keine ideale Lösung) füge ich nur das folgende CSS zu einer Browsererweiterung hinzu, die CSS einfügt (natürlich funktioniert dies nur für Sie, Ihre anderen Firmenmitglieder werden es weiterhin sehen):

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

Nicht ideal, aber vielleicht ist das für jemanden nützlich.

Falls es jemanden interessiert, ich habe eine Lösung, die für mich gut funktioniert.

Ich habe damit ein super einfaches Plugin erstellt. Es ist register.js ist das:

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

In meinem manager-head.html

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

Auf meinen docsOnly Seiten habe ich viewMode: 'docs' , um sicherzustellen, dass die Navigation gut funktioniert.