Storybook: Kemampuan untuk menyembunyikan Tab Kanvas

Kami melakukan ini dengan cara yang cukup keras sebagai bagian dari addon-docs . @ndelangen Saya ingin tahu apakah kita harus membuat ini lebih dapat dikonfigurasi.

Kita bisa 'menyembunyikan' itu, tapi harus ada agar buku cerita bisa berfungsi sekarang, setidaknya sampai #4169.

Menyembunyikannya melalui beberapa opsi akan menjadi kemungkinan.

Halo semuanya! Sepertinya tidak banyak yang terjadi dalam masalah ini akhir-akhir ini. Jika masih ada pertanyaan, komentar, atau bug, jangan ragu untuk melanjutkan diskusi. Sayangnya, kami tidak punya waktu untuk membahas setiap masalah. Kami selalu terbuka untuk kontribusi jadi silakan kirim permintaan tarik jika Anda ingin membantu. Masalah tidak aktif akan ditutup setelah 30 hari. Terima kasih!

Saat ini saya menghadapi masalah yang sama. Idealnya, kita dapat memiliki opsi untuk menyusun ulang tab sesuai keinginan sehingga misalnya dalam kasus saya, Notes dapat didahulukan dan Canvas kemudian.

@eduina @B3Kay FYI Saat ini Anda dapat menyembunyikan semua tab non-dokumen dengan flag --docs , misalnya yarn storybook --docs atau yarn build-storybook --docs

Apakah ada opsi untuk mengubah urutan dan/atau pilihan default? Kami ingin menggunakan Buku Cerita terutama untuk fungsionalitas Dokumen tetapi masih memiliki kemampuan untuk melihat kanvas. Namun, dengan Canvas di posisi pertama dan dipilih secara default, pengguna baru terkadang melewatkan dokumentasi aktual yang disertakan dalam file MDX.

@bmayen Saya akan mengatakan itu masuk ke ember fitur yang sama dengan menyembunyikan tab kanvas.

Saya ingin melihat kemampuan untuk menyembunyikan tab kanvas untuk cerita tertentu serta dapat menyembunyikan cerita sehingga Anda memiliki tab dokumen tingkat tinggi untuk sebuah komponen dan hanya itu

Perbaikan saya saat ini untuk ini adalah tidak memiliki tag "Cerita" dalam dokumentasi, namun saya kemudian kehilangan kemampuan untuk tombol "Tampilkan Kode". Apakah ada cara untuk memiliki pratinjau+kode tanpa Cerita? Terima kasih

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

Halo semuanya! Sepertinya tidak banyak yang terjadi dalam masalah ini akhir-akhir ini. Jika masih ada pertanyaan, komentar, atau bug, jangan ragu untuk melanjutkan diskusi. Sayangnya, kami tidak punya waktu untuk membahas setiap masalah. Kami selalu terbuka untuk kontribusi jadi silakan kirim permintaan tarik jika Anda ingin membantu. Masalah tidak aktif akan ditutup setelah 30 hari. Terima kasih!

Tidak, aku ingin ini!

Pada Kamis, 24 Oktober 2019, 3:44 basi[bot] [email protected] menulis:

Halo semuanya! Sepertinya belum banyak yang terjadi dalam masalah ini
akhir-akhir ini. Jika masih ada pertanyaan, komentar, atau bug, silahkan
untuk melanjutkan diskusi. Sayangnya, kita tidak punya waktu untuk sampai ke
setiap masalah. Kami selalu terbuka untuk kontribusi, jadi silakan kirim tarikan kepada kami
permintaan jika Anda ingin membantu. Masalah tidak aktif akan ditutup setelah 30
hari. Terima kasih!

—
Anda menerima ini karena Anda berlangganan utas ini.
Balas email ini secara langsung, lihat di GitHub
https://github.com/storybookjs/storybook/issues/7066?email_source=notifications&email_token=AANLY2QVSW7PDJJVUFLOR2DQQFG5BA5CNFSM4HXKFNS2YY3PNVWWK3TUL52HS4DFVREXG43VMQV2JKTNEOR5PMWZW63LNMVXGO
atau berhenti berlangganan
https://github.com/notifications/unsubscribe-auth/AANLY2VIMIOVBIAWI6SL4WLQQFG5BANCNFSM4HXKFNSQ
.

Di perusahaan saya, kami memiliki dua kegunaan utama untuk buku cerita

1. Mendokumentasikan sistem desain kami - kasus penggunaan ini berorientasi pada departemen desain dan produk
2. Mendokumentasikan komponen web kami - kasus penggunaan ini berorientasi pada departemen teknik

Dalam kasus sebelumnya, kami lebih memilih untuk hanya menampilkan 'contoh dunia nyata' dengan konten dan properti khas untuk komponen kami. Namun dalam kasus terakhir, kami lebih suka mendokumentasikan semua properti komponen secara menyeluruh, dengan default dipertahankan, menggunakan konten placeholder minimal.

Kasing berorientasi desain sempurna untuk mode dokumen, sementara kami masih ingin mempertahankan kanvas untuk dimainkan oleh para insinyur sesuai kebutuhan.

Namun, kita semua setuju bahwa untuk mengedepankan 'kaki terbaik' kita, mode dokumen cantik harus ditampilkan lebih menonjol.

Untuk itu, kami ingin dapat mengonfigurasi buku cerita untuk menampilkan tab "Dokumen" di paling kiri, dengan "Kanvas" di kanan.

Banyak permintaan untuk ini, baik di sini maupun di obrolan. Ini mungkin masalah UI SB umum dan bukan masalah khusus dokumen, tetapi kami akan mencari solusi dengan satu atau lain cara. cc @ndelangen

@eduina @B3Kay FYI Saat ini Anda dapat menyembunyikan semua tab non-dokumen dengan flag --docs , misalnya yarn storybook --docs atau yarn build-storybook --docs

Jika kita melakukan itu add-on menghilang, adakah cara untuk menampilkan add-on?

@matiasmenker Saat ini tidak https://github.com/storybookjs/storybook/issues/6700

Saya sendiri juga mengalami ini. Adakah petunjuk di mana seseorang bisa mulai mengerjakan PR?

Lars itu tidak super mudah. cara kerja preview.js : https://github.com/storybookjs/storybook/blob/a007de8dfd3ea7db08f88970b410a62615c5546f/lib/ui/src/components/preview/preview.js#L267 -L300

Tab disuntikkan di sana.

Kami harus melepaskan menambahkan tab dari rendering iframe.

Kami TIDAK dapat memasukkan iframe, karena iframe juga merender dokumen & benar-benar memberi tahu manajer cerita mana yang akan ditampilkan di explorer.

@LarsDenBakker - ini benar-benar diimplementasikan dan menunggu #9095 , berikan jempol untuk mempercepat proses peninjauan dan penggabungan :)

Ermahgerd!! Saya baru saja merilis https://github.com/storybookjs/storybook/releases/tag/v6.0.0-alpha.2 yang berisi PR #9095 yang mereferensikan masalah ini. Tingkatkan hari ini untuk mencobanya!

Anda dapat menemukan prarilis ini pada tag NPM @next .

Menutup masalah ini. Silakan buka kembali jika menurut Anda masih ada yang harus dilakukan.

PR #9005 bagus tapi saya masih kehilangan fitur untuk menyetel tab default: Bahkan jika - misalnya - tab Dokumen ditempatkan di posisi pertama, tab kanvas aktif saat membuka cerita.

@eduina @B3Kay FYI Saat ini Anda dapat menyembunyikan semua tab non-dokumen dengan flag --docs , misalnya yarn storybook --docs atau yarn build-storybook --docs

@shilman
Diverifikasi pada 5.3.7 dan 5.3.14 tidak berfungsi. Tab kanvas masih terlihat

Menunggu rilis ini putus asa sekarang. Saya hampir selesai dengan peningkatan setelah menahan pembaruan ini lama. @shilman mungkin tahu riwayat bug saya yang muncul dengan addon-info . Dari itu pergi dari proyek saya.
Berhasil diperbaharui. Penggunaan yang indah dari CSF dan docspage . Menyukainya!

Harap mempercepat rilis ini jika memungkinkan. Tergantung padanya.

Dan terima kasih atas semua dukungan Anda pada masalah GitHub atau artikel menengah. Sangat dihargai.

Anda dapat melacak status rilis di sini https://github.com/storybookjs/storybook/issues/9311

@B3Kay Saya memiliki masalah yang sama. Anda dapat mengganti di url buku cerita /?path=/story/ dengan /?path=/docs/ agar dokumen dipilih setiap kali buku cerita dibuka.

Untuk menyembunyikan tombol (bukan perbaikan yang ideal sama sekali) Saya hanya menambahkan CSS berikut ke ekstensi browser yang menyuntikkan CSS (tentu saja ini hanya berfungsi untuk Anda, anggota perusahaan Anda yang lain masih akan melihatnya):

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

Tidak ideal tapi mungkin itu berguna bagi seseorang.

Jika ada yang tertarik, saya punya solusi yang bekerja dengan baik untuk saya.

Saya membuat plugin super sederhana dengan ini. Ini register.js adalah ini:

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

Di manager-head.html

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

Pada halaman docsOnly saya, saya menetapkan viewMode: 'docs' untuk memastikan navigasi bekerja dengan baik.