Storybook: कैनवास टैब को छिपाने की क्षमता

हम इसे addon-docs हिस्से के रूप में काफी हार्डकोडेड तरीके से करते हैं। @ndelangen मुझे आश्चर्य है कि क्या हमें इसे और अधिक विन्यास योग्य बनाना चाहिए।

हम इसे 'छिपा' सकते थे, लेकिन स्टोरीबुक के अभी काम करने के लिए यह मौजूद होना चाहिए, कम से कम #4169 तक।

इसे किसी विकल्प के जरिए छिपाना संभव होगा।

हेलो सब लोग! ऐसा लगता है कि हाल ही में इस मुद्दे पर बहुत कुछ नहीं हुआ है। यदि अभी भी प्रश्न, टिप्पणियाँ या बग हैं, तो कृपया बेझिझक चर्चा जारी रखें। दुर्भाग्य से, हमारे पास हर मुद्दे पर पहुंचने का समय नहीं है। हम योगदान के लिए हमेशा खुले हैं इसलिए यदि आप मदद करना चाहते हैं तो कृपया हमें एक पुल अनुरोध भेजें। निष्क्रिय मुद्दे 30 दिनों के बाद बंद कर दिए जाएंगे। धन्यवाद!

मैं वर्तमान में उसी समस्या का सामना कर रहा हूं। आदर्श रूप से, हमारे पास अपनी इच्छानुसार टैब को पुन: व्यवस्थित करने का विकल्प हो सकता है ताकि उदाहरण के लिए मेरे मामले में नोट्स पहले और कैनवास बाद में आ सकें।

@eduina @B3Kay FYI करें आप वर्तमान में --docs झंडे के साथ सभी गैर-दस्तावेज़ टैब छिपा सकते हैं, जैसे yarn storybook --docs या yarn build-storybook --docs

क्या आदेश और/या डिफ़ॉल्ट चयन को बदलने का कोई विकल्प है? हम मुख्य रूप से डॉक्स कार्यक्षमता के लिए स्टोरीबुक का उपयोग करना चाहते हैं लेकिन फिर भी कैनवास को देखने की क्षमता रखते हैं। हालांकि, कैनवास के साथ पहली स्थिति में और डिफ़ॉल्ट रूप से चयनित, नए उपयोगकर्ता कभी-कभी एमडीएक्स फाइलों में शामिल वास्तविक दस्तावेज को याद करते हैं।

@bmayen मैं कहूंगा कि कैनवास टैब छुपाने के समान फीचर बाल्टी में जाता है।

मैं विशेष कहानियों के लिए कैनवास टैब को छिपाने की क्षमता के साथ-साथ कहानियों को छिपाने में सक्षम होना पसंद करूंगा ताकि आपके पास एक घटक के लिए उच्च-स्तरीय डॉक्स टैब हो और बस

इसके लिए मेरा वर्तमान फिक्स दस्तावेज़ीकरण में कोई "स्टोरी" टैग नहीं है, हालांकि मैं फिर "कोड दिखाएं" बटन की क्षमता खो देता हूं। क्या कहानी के बिना पूर्वावलोकन + कोड रखने का कोई तरीका है? धन्यवाद

@sanchez देखें https://github.com/storybookjs/storybook/pull/7966

हेलो सब लोग! ऐसा लगता है कि हाल ही में इस मुद्दे पर बहुत कुछ नहीं हुआ है। यदि अभी भी प्रश्न, टिप्पणियाँ या बग हैं, तो कृपया बेझिझक चर्चा जारी रखें। दुर्भाग्य से, हमारे पास हर मुद्दे पर पहुंचने का समय नहीं है। हम योगदान के लिए हमेशा खुले हैं इसलिए यदि आप मदद करना चाहते हैं तो कृपया हमें एक पुल अनुरोध भेजें। निष्क्रिय मुद्दे 30 दिनों के बाद बंद कर दिए जाएंगे। धन्यवाद!

नहीं, मुझे यह चाहिए!

गुरु, 24 अक्टूबर, 2019, 3:44 AM बासी [bot] [email protected] ने लिखा:

हेलो सब लोग! ऐसा लगता है कि इस मामले में कुछ खास नहीं हुआ है
हाल ही में। यदि अभी भी कोई प्रश्न, टिप्पणियां या बग हैं, तो कृपया बेझिझक
चर्चा जारी रखने के लिए। दुर्भाग्य से, हमारे पास पहुंचने का समय नहीं है
हर मुद्दा। हम योगदान के लिए हमेशा खुले हैं इसलिए कृपया हमें एक पुल भेजें
अगर आप मदद करना चाहते हैं तो अनुरोध करें। निष्क्रिय मुद्दे 30 . के बाद बंद कर दिए जाएंगे
दिन। धन्यवाद!

-
आप इसे प्राप्त कर रहे हैं क्योंकि आपने इस थ्रेड की सदस्यता ली है।
इस ईमेल का सीधे उत्तर दें, इसे GitHub पर देखें
https://github.com/storybookjs/storybook/issues/7066?email_source=notifications&email_token=AANLY2QVSW7PDJJVUFLOR2DQQFG5BA5CNFSM4HXKFNS2YY3PNVWWK3WTUL52HS4DFVREXG43VMBRHWK#TGODNMV
या सदस्यता समाप्त करें
https://github.com/notifications/unsubscribe-auth/AANLY2VIMIOVBIAWI6SL4WLQQFG5BANCNFSM4HXKFNSQ
.

मेरी कंपनी में, स्टोरीबुक के लिए हमारे पास दो प्रमुख उपयोग हैं

1. हमारे डिजाइन सिस्टम का दस्तावेजीकरण - यह उपयोग मामला डिजाइन और उत्पाद विभागों की ओर उन्मुख है
2. हमारे वेब घटकों का दस्तावेजीकरण - यह उपयोग मामला इंजीनियरिंग विभाग की ओर उन्मुख है

पहले मामले में, हम अपने घटकों के लिए विशिष्ट सामग्री और गुणों के साथ केवल 'वास्तविक दुनिया के उदाहरण' दिखाना पसंद करेंगे। हालांकि बाद के मामले में, हम न्यूनतम प्लेसहोल्डर सामग्री का उपयोग करके सभी घटक गुणों को संपूर्ण रूप से प्रलेखित करना पसंद करेंगे, डिफ़ॉल्ट संरक्षित के साथ।

डिज़ाइन-उन्मुख मामला डॉक्स मोड के लिए एकदम सही है, जबकि हम अभी भी इंजीनियरों के लिए आवश्यकतानुसार कैनवास को बनाए रखना चाहेंगे।

हालांकि, हम सभी सहमत हैं कि हमारे 'सर्वश्रेष्ठ पैर आगे' रखने के लिए, सुंदर डॉक्स मोड को और अधिक प्रमुखता से प्रदर्शित किया जाना चाहिए।

इसके लिए, हम दाईं ओर "कैनवास" के साथ, सबसे बाईं ओर "डॉक्स" टैब दिखाने के लिए स्टोरीबुक को कॉन्फ़िगर करने में सक्षम होना चाहते हैं।

इसके लिए बहुत सारे अनुरोध, यहां और चैट दोनों में। यह शायद एक सामान्य एसबी यूआई मुद्दा है और दस्तावेज़-विशिष्ट चीज़ नहीं है, लेकिन हम एक या दूसरे तरीके से समाधान निकालेंगे। cc @ndelangen

@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

टैब वहां इंजेक्ट किया गया है।

हमें आईफ्रेम के प्रतिपादन से टैब जोड़ने से अलग करना होगा।

हम आईफ्रेम को इंजेक्ट नहीं कर सकते हैं, क्योंकि आईफ्रेम भी दस्तावेज़ प्रस्तुत करता है और वास्तव में प्रबंधक को बताता है कि एक्सप्लोरर में कौन सी कहानियां प्रदर्शित करनी हैं।

@LarsDenBakker - यह वास्तव में लागू किया गया है और # 9095 प्रतीक्षा कर रहा है, समीक्षा को तेज करने और प्रक्रिया को मर्ज करने के लिए इसे एक अंगूठा दें :)

एर्महगेर्ड !! मैंने अभी-अभी https://github.com/storybookjs/storybook/releases/tag/v6.0.0-alpha.2 जारी किया है जिसमें PR #9095 है जो इस मुद्दे का संदर्भ देता है। इसे आज़माने के लिए आज ही अपग्रेड करें!

आप इस पूर्व-रिलीज़ को @next NPM टैग पर पा सकते हैं।

इस मुद्दे को बंद करना। अगर आपको लगता है कि अभी और भी कुछ करना बाकी है तो कृपया फिर से खोलें।

पीआर #9005 अच्छा है लेकिन मुझे अभी भी एक डिफ़ॉल्ट टैब सेट करने की सुविधा नहीं मिल रही है: भले ही - उदाहरण के लिए - डॉक्स टैब को पहले स्थान पर रखा गया हो, कहानी खोलते समय कैनवास टैब सक्रिय होता है।

@eduina @B3Kay FYI करें आप वर्तमान में --docs झंडे के साथ सभी गैर-दस्तावेज़ टैब छिपा सकते हैं, जैसे yarn storybook --docs या yarn build-storybook --docs

@shilman
काम नहीं करने के लिए 5.3.7 और 5.3.14 को सत्यापित। कैनवास टैब अभी भी दिखाई दे रहा है

इस रिलीज का अब बेसब्री से इंतजार है। इस अपडेट को लंबे समय तक रखने के बाद मैंने अपग्रेड के साथ लगभग पूरा कर लिया है। @shilman addon-info साथ उठाए गए बग के मेरे इतिहास को जान सकता है। यह मेरी परियोजना से चला जाता है।
सफलतापूर्वक उत्परिवर्तित। CSF और docspage सुंदर उपयोग। पसन्द आया!

यदि संभव हो तो कृपया इस रिलीज को गति दें। उस पर आश्रित।

और GitHub मुद्दों या मध्यम लेख पर आपके सभी समर्थन के लिए धन्यवाद। बहुत सराहना की।

आप यहां रिलीज की स्थिति को ट्रैक कर सकते हैं https://github.com/storybookjs/storybook/issues/9311

@ B3Kay मेरे पास एक ही समस्या है। आप स्टोरीबुक url /?path=/story/ में /?path=/docs/ साथ प्रतिस्थापित कर सकते हैं ताकि जब भी स्टोरीबुक खोली जाए तो डॉक्स का चयन किया जा सके।

बटन को छिपाने के लिए (बिल्कुल भी आदर्श फिक्स नहीं) मैं बस निम्नलिखित सीएसएस को एक ब्राउज़र एक्सटेंशन में जोड़ रहा हूं जो सीएसएस को इंजेक्ट करता है (बेशक यह केवल आपके लिए काम करता है, आपकी कंपनी के अन्य सदस्य अभी भी इसे देखेंगे):

#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' सेट किया है कि नेविगेशन अच्छी तरह से काम करता है।