Storybook: القدرة على إخفاء علامة التبويب Canvas

نقوم بهذا بطريقة غير ثابتة إلى حد ما كجزء من addon-docs . ndelangen أتساءل عما إذا كان علينا جعل هذا أكثر قابلية للتكوين.

يمكننا "إخفائه" ، ولكن يجب أن يكون موجودًا حتى يعمل كتاب القصص في الوقت الحالي ، على الأقل حتى # 4169.

قد يكون إخفاءه عبر بعض الخيارات أمرًا محتملاً.

مرحبا جميعا! يبدو أنه لم يكن هناك الكثير مما يحدث في هذه المشكلة مؤخرًا. إذا كانت لا تزال هناك أسئلة أو تعليقات أو أخطاء ، فلا تتردد في مواصلة المناقشة. للأسف ، ليس لدينا الوقت لحل كل مشكلة. نحن دائمًا منفتحون على المساهمات ، لذا يرجى إرسال طلب سحب إلينا إذا كنت ترغب في المساعدة. سيتم إغلاق المشكلات غير النشطة بعد 30 يومًا. شكرا!

أواجه نفس المشكلة حاليا. من الناحية المثالية ، يمكن أن يكون لدينا خيار إعادة ترتيب علامات التبويب كما نرغب ، على سبيل المثال في حالتي ، يمكن أن تأتي الملاحظات أولاً ثم Canvas لاحقًا.

eduina @ B3Kay FYI يمكنك حاليًا إخفاء جميع علامات التبويب التي لا --docs ، على سبيل المثال yarn storybook --docs أو yarn build-storybook --docs

هل هناك خيار لتغيير الترتيب و / أو الاختيار الافتراضي؟ نود استخدام Storybook بشكل أساسي لوظيفة Docs ولكن لا يزال لدينا القدرة على عرض اللوحة القماشية. ومع ذلك ، مع وجود Canvas في المركز الأول وتحديدها افتراضيًا ، يفقد المستخدمون الجدد أحيانًا الوثائق الفعلية المضمنة في ملفات MDX.

bmayen أود أن أقول إن هذا يدخل في نفس مجموعة الميزات مثل إخفاء علامة تبويب قماش الرسم.

أرغب في رؤية القدرة على إخفاء علامة تبويب اللوحة القماشية لقصص معينة بالإضافة إلى القدرة على إخفاء القصص بحيث يكون لديك علامة تبويب المستندات عالية المستوى لأحد المكونات وهذا كل شيء

إصلاحي الحالي لهذا هو عدم وجود أي علامات "قصة" في الوثائق ، ومع ذلك فقد فقدت القدرة على زر "إظهار الرمز". هل هناك أي طريقة للحصول على معاينة + كود بدون قصة؟ شكرا

sanchez انظر https://github.com/storybookjs/storybook/pull/7966

مرحبا جميعا! يبدو أنه لم يكن هناك الكثير مما يحدث في هذه المشكلة مؤخرًا. إذا كانت لا تزال هناك أسئلة أو تعليقات أو أخطاء ، فلا تتردد في مواصلة المناقشة. للأسف ، ليس لدينا الوقت لحل كل مشكلة. نحن دائمًا منفتحون على المساهمات ، لذا يرجى إرسال طلب سحب إلينا إذا كنت ترغب في المساعدة. سيتم إغلاق المشكلات غير النشطة بعد 30 يومًا. شكرا!

لا اريد هذا!

في الخميس ، 24 أكتوبر ، 2019 ، الساعة 3:44 صباحًا كتب bot التي لا معنى لها [bot] [email protected] :

مرحبا جميعا! يبدو أنه لم يكن هناك الكثير مما يحدث في هذه القضية
مؤخرا. إذا كانت لا تزال هناك أسئلة أو تعليقات أو أخطاء ، فلا تتردد في ذلك
لمواصلة المناقشة. لسوء الحظ ، ليس لدينا وقت للوصول
كل قضية. نحن دائمًا منفتحون على المساهمات ، لذا يرجى إرسال سحب لنا
اطلب إذا كنت ترغب في المساعدة. سيتم إغلاق المشكلات غير النشطة بعد 30
أيام. شكرا!

-
أنت تتلقى هذا لأنك مشترك في هذا الموضوع.
قم بالرد على هذا البريد الإلكتروني مباشرة ، وقم بعرضه على GitHub
https://github.com/storybookjs/storybook/issues/7066؟email_source=notifications&email_token=AANLY2QVSW7PDJJVUFLOR2DQQFG5BA5CNFSM4HXKFNS2YY3PNVWWK3TUL52HS4DFVREXG43VMissment
أو إلغاء الاشتراك
https://github.com/notifications/unsubscribe-auth/AANLY2VIMIOVBIAWI6SL4WLQQFG5BANCNFSM4HXKFNSQ
.

في شركتي ، لدينا استخدامان رئيسيان لكتاب القصص

1. توثيق نظام التصميم الخاص بنا - حالة الاستخدام هذه موجهة نحو أقسام التصميم والمنتج
2. توثيق مكونات الويب الخاصة بنا - حالة الاستخدام هذه موجهة نحو القسم الهندسي

في الحالة الأولى ، نفضل عرض "أمثلة من العالم الحقيقي" فقط بمحتوى وخصائص نموذجية لمكوناتنا. ومع ذلك ، في الحالة الأخيرة ، نفضل توثيق جميع خصائص المكونات بشكل شامل ، مع الحفاظ على الإعدادات الافتراضية ، باستخدام الحد الأدنى من محتوى العنصر النائب.

تعتبر الحقيبة ذات التصميم المنحى مثالية لوضع المستندات ، بينما لا نزال نرغب في الاحتفاظ بالقماش للمهندسين ليلعبوا بها حسب الحاجة.

ومع ذلك ، نتفق جميعًا على أنه من أجل تقديم "أفضل ما لدينا إلى الأمام" ، يجب عرض وضع المستندات الجميل بشكل أكثر بروزًا.

ولهذه الغاية ، نود أن نكون قادرين على تكوين القصة المصورة لإظهار علامة التبويب "المستندات" في أقصى اليسار ، مع وجود "Canvas" إلى اليمين.

الكثير من الطلبات لهذا ، سواء هنا أو في الدردشة. من المحتمل أن تكون مشكلة عامة في واجهة مستخدم SB وليست شيئًا خاصًا بالمستندات ، لكننا سنكتشف حلًا بطريقة أو بأخرى. ccndelangen

eduina @ B3Kay FYI يمكنك حاليًا إخفاء جميع علامات التبويب التي لا --docs ، على سبيل المثال yarn storybook --docs أو yarn build-storybook --docs

إذا فعلنا ذلك تختفي الإضافات ، هل هناك طريقة لإظهار الوظائف الإضافية؟

matiasmenker ليس حاليًا https://github.com/storybookjs/storybook/issues/6700

أواجه هذا بنفسي أيضًا. أي مؤشرات يمكن للمرء أن يبدأ فيها العمل على العلاقات العامة؟

لارس ليس الأمر بهذه السهولة. طريقة عمل preview.js : https://github.com/storybookjs/storybook/blob/a007de8dfd3ea7db08f88970b410a62615c5546f/lib/ui/src/components/preview/preview.js#L267 -L300

يتم حقن علامة التبويب هناك.

سيتعين علينا فصل إضافة علامة التبويب من عرض iframe.

لا يمكننا حقن إطار iframe ، لأن iframe يعرض أيضًا المستندات ويخبر المدير فعليًا بالقصص التي سيتم عرضها في المستكشف.

LarsDenBakker - تم تنفيذه فعليًا وينتظر # 9095 ، أعطه إبهامًا لتسريع عملية المراجعة والدمج :)

ارماغيرد !! لقد أصدرت للتو https://github.com/storybookjs/storybook/releases/tag/v6.0.0-alpha.2 تحتوي على PR # 9095 تشير إلى هذه المشكلة. قم بالترقية اليوم لتجربتها!

يمكنك العثور على هذا الإصدار التجريبي على علامة @next NPM.

إغلاق هذه القضية. الرجاء إعادة الفتح إذا كنت تعتقد أنه لا يزال هناك المزيد لتفعله.

يعتبر PR # 9005 أمرًا رائعًا ولكني ما زلت أفتقد ميزة تعيين علامة تبويب افتراضية: حتى لو - على سبيل المثال - تم وضع علامة تبويب المستندات في الموضع الأول ، فإن علامة تبويب اللوحة القماشية تكون نشطة عند فتح قصة.

eduina @ B3Kay FYI يمكنك حاليًا إخفاء جميع علامات التبويب التي لا --docs ، على سبيل المثال yarn storybook --docs أو yarn build-storybook --docs

تضمين التغريدة
تم التحقق منه في 5.3.7 و 5.3.14 لا يعمل. لا تزال علامة التبويب Canvas مرئية

في انتظار هذا الإصدار بشكل يائس الآن. لقد أوشكت على الانتهاء من الترقية بعد تعليق هذا التحديث لفترة طويلة. shilman قد يعرف تاريخ الأخطاء التي أثيرت مع addon-info . انها تذهب من مشروعي.
تم التحديث بنجاح. استخدام جميل لـ CSF و docspage . احببته!

الرجاء تسريع هذا الإصدار إذا كان ذلك ممكنا. تعتمد على ذلك.

وشكرًا لك على كل دعمك في جميع أنحاء مشكلات GitHub أو المقالة المتوسطة. مقدر جدا.

يمكنك تتبع حالة الإصدار هنا https://github.com/storybookjs/storybook/issues/9311

@ B3Kay لدي نفس المشكلة. يمكنك استبدال عنوان url في كتاب القصة /?path=/story/ بـ /?path=/docs/ لاختيار المستندات عند فتح كتاب القصة.

لإخفاء الزر (ليس إصلاحًا مثاليًا على الإطلاق) ، أقوم فقط بإضافة CSS التالي إلى ملحق متصفح يقوم بحقن CSS (بالطبع هذا يعمل فقط من أجلك ، وسيظل أعضاء شركتك الآخرين يروه):

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

ليست مثالية ولكن ربما هذا مفيد لشخص ما.

إذا كان أي شخص مهتمًا ، فلدي حل يعمل جيدًا بالنسبة لي.

لقد أنشأت مكونًا إضافيًا بسيطًا للغاية مع هذا. إنه register.js هذا:

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

في بلدي manager-head.html

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

على صفحاتي docsOnly ، قمت بتعيين viewMode: 'docs' للتأكد من أن التنقل يعمل بشكل جيد.