Storybook: क्रियाओं के माध्यम से घुंडी बदलें [विचार]

इस #3701 पीआर में कुछ इसी तरह का विचार पेश किया गया था, जो विवादास्पद था (और विलय नहीं किया गया था)।

हम इसके बारे में फिर से एक चर्चा खोल सकते हैं, और एपीआई सुझावों को सुन सकते हैं =)।

आह धन्यवाद, मैंने वह पीआर नहीं देखा था। धन्यवाद @aherriot इसे एक साथ रखने के लिए, ऐसा लगता है कि हमारे पास एक ही विचार है।

एपीआई में गोता लगाने से पहले, ऐसा लगता है कि मूलभूत अवधारणा पर चर्चा करने और उस पर सहमति बनाने की आवश्यकता है। पीआर में टिप्पणियों में से एक यह @Hypnosphi से था:

मुझे यह तथ्य पसंद नहीं है कि यह सत्य के कई स्रोतों का परिचय देता है (घटक कॉलबैक और यूआई नॉब्स)

मुझे ऐसा प्रतीत होता है कि विचार सत्य के विभिन्न स्रोतों का परिचय देने का नहीं है, बल्कि घटक अवस्था के लिए सत्य के एक _एकल_ स्रोत को बनाए रखने की अनुमति देना है - नॉब्स। मेरे द्वारा सुझाए गए अन्य सभी दृष्टिकोण (आवरण घटक, राज्य ऐड-ऑन, पुनर्संयोजन) वास्तव में सत्य का एक और स्रोत पेश करेंगे। मेरे चेकबॉक्स उदाहरण में, मैं checked लिए एक घुंडी नहीं रख पाऊंगा, और एक रैपर घटक को checked प्रोप प्रदान करने की अनुमति भी दूंगा। मैं नॉब्स कंट्रोल पैनल को कंपोनेंट के पैरेंट के रूप में देखता हूं, सिवाय इसके कि वर्तमान में इसे कंपोनेंट से कोई कॉलबैक नहीं मिल सकता है, जो कि एकतरफा है और न कि कैसे रिएक्ट ऐप्स सामान्य रूप से बनाए जाते हैं।

नॉब्स को प्रोग्रामेटिक रूप से नियंत्रित करने की अनुमति देकर, कहानी को केवल प्रदर्शित किए जा रहे घटक के लिए अलग किया जा सकता है, जिससे वास्तविक राज्य प्रबंधन तंत्र अपारदर्शी हो जाता है, क्योंकि यह एक साधारण प्रस्तुतिकरण घटक जैसे चेकबॉक्स के लिए होना चाहिए। चेकबॉक्स स्वयं इस बात की परवाह नहीं करता है कि यह अपने प्रॉप्स को कैसे प्राप्त करता है, यह रेडक्स से जुड़ा हो सकता है, इसके माता-पिता setState उपयोग कर सकते हैं, हो सकता है कि यह withState का उपयोग पुनर्संयोजन से करता हो, या हो सकता है कि प्रॉप्स द्वारा नियंत्रित किया जाता है स्टोरीबुक नॉब्स।

वैसे भी जैसे मैंने कहा कि मैं इसके लिए बहुत नया हूं, इसलिए मैं केवल अपने सहज विचार साझा कर रहा हूं। अगर मैं ऑफ-बेस हूं और इस प्रकार के शुद्ध स्टेटलेस घटकों से निपटने के लिए आम तौर पर स्वीकृत "सर्वोत्तम अभ्यास" है, तो शायद कोई मुझे एक अच्छे उदाहरण के लिए इंगित कर सकता है जिसका मैं अनुसरण कर सकता हूं?

नमस्ते :)

मैं सिर्फ यह जोड़ना चाहता हूं कि मैंने उस पर ठोकर खाई है क्योंकि मेरे घटक प्राप्त कर रहे हैं यदि उन्हें अपने मोबाइल लेआउट (या नहीं) को प्रॉप्स से प्रदर्शित करना चाहिए, और मेरा लक्ष्य व्यूपोर्ट परिवर्तन को मेरे नॉब से जोड़ना था, और यह वास्तव में अच्छा होता;)

बस यहां अपना उपयोग मामला जोड़ना चाहता था, और @IanVS के रूप में भी एक कॉलबैक अच्छा होता (इसलिए यदि मैं अपने isMobile प्रॉप्स को टॉगल करता हूं, तो मैं व्यूपोर्ट परिवर्तन को ट्रिगर कर सकता हूं)

मैंने सुना है कि कई लोग नॉब स्टेट को अपडेट करने के तरीके में रुचि व्यक्त करते हैं। अगर हम एक अच्छी वास्तुकला पर सहमत हो सकते हैं, तो मुझे लगता है कि यह कई लोगों के लिए महत्वपूर्ण होगा। विशेष रूप से चूंकि यह अतिरिक्त कार्यक्षमता है जिसे लोग उपयोग करना चुन सकते हैं या नहीं और क्योंकि यह उन लोगों को नकारात्मक रूप से प्रभावित नहीं करता है जो इसका उपयोग नहीं करना चाहते हैं।

@Hypnosphi , आपको पिछले कार्यान्वयन, WDYT के बारे में आपत्ति थी?

इस मुद्दे को खुला रखने के लिए यहां टिप्पणी कर रहे हैं। मुझे अभी भी उत्सुकता है कि @Hypnosphi का यहाँ पहले प्रस्तावित @igor-dv के बारे में क्या कहना है।

मुझे ऐसा लगता है कि विचार सत्य के विभिन्न स्रोतों को पेश करने का नहीं है, बल्कि घटक राज्य के लिए सत्य के एक स्रोत को बनाए रखने की अनुमति देना है - घुंडी। मेरे द्वारा सुझाए गए अन्य सभी दृष्टिकोण (आवरण घटक, राज्य ऐड-ऑन, पुनर्संयोजन) वास्तव में सत्य का एक और स्रोत पेश करेंगे। मेरे चेकबॉक्स उदाहरण में, मैं चेक के लिए एक घुंडी नहीं रख पाऊंगा, और एक रैपर घटक को चेक किए गए प्रोप प्रदान करने की अनुमति भी दूंगा। मैं नॉब्स कंट्रोल पैनल को कंपोनेंट के पैरेंट के रूप में देखता हूं, सिवाय इसके कि वर्तमान में इसे कंपोनेंट से कोई कॉलबैक नहीं मिल सकता है, जो कि एकतरफा है और न कि कैसे रिएक्ट ऐप्स सामान्य रूप से बनाए जाते हैं।

मेरे लिए उचित लगता है। आइए एपीआई पर चर्चा करें

यह एक बेहतरीन फीचर होगा। मुझे बस एक बहुत ही बुनियादी नियंत्रित घटक के साथ यहां एक ही आवश्यकता का सामना करना पड़ा और अन्य घटकों में भी इसका सामना करना पड़ा। इसे देखने के लिए धन्यवाद।

वर्तमान वाक्य रचना के साथ बने रहना थोड़ा चुनौती भरा लगता है। शायद आप कुछ इस तरह इस्तेमाल कर सकते हैं:

const {value: name, change: setName} = text('Name', 'Kent');

@brunoreis , मुझे चिंता होगी कि नॉब्स के रिटर्न सिग्नेचर को बदलना एक ब्रेकिंग बदलाव होगा। मेरा ऑफ-द-कफ सुझाव कुछ ऐसा करना होगा:

import {boolean, changeBoolean} from '@storybook/addon-knobs/react';

stories.add('custom checkbox', () => (
    <MyCheckbox
        checked={boolean('checked', false)}
        onChange={(isChecked) => changeBoolean('checked', isChecked)} />
));

जहां onChange कॉलबैक भी करी की अनुमति दे सकता है, ताकि यह भी काम करे:

onChange={(isChecked) => changeBoolean('checked')(isChecked)}

// which of course simplifies down to
onChange={changeBoolean('checked')}

महत्वपूर्ण हिस्सा यह है कि पहला तर्क घुंडी के लेबल के समान होना चाहिए जिसे बदला जाना चाहिए। मेरा मानना ​​​​है कि यह उपयोगकर्ताओं को वर्तमान में जिस तरह से नॉब्स का उपयोग किया जाता है, उसके बारे में कुछ भी बदले बिना इस व्यवहार में ऑप्ट-इन करने की अनुमति देगा। (जब तक कि लेबल वर्तमान में अद्वितीय होने की आवश्यकता नहीं है? मुझे लगता है कि वे हैं ...)

@IanVS , यह अच्छा है। चीजों के काम करने के तरीके को नहीं बदलने के बारे में मैं आपसे सहमत हूं। मुझे ऐसा करने का कोई तरीका नहीं मिला क्योंकि मैंने लेबल को एक कुंजी के रूप में उपयोग करने के बारे में नहीं सोचा था। यह काम कर सकता है। आइए देखें कि @Hypnosphi के मन में क्या है।

नॉब्स के रिटर्न सिग्नेचर को बदलना एक ब्रेकिंग चेंज होगा

तकनीकी रूप से, यह अभी कोई समस्या नहीं है। हमारे पास एक प्रमुख रिलीज आगामी है। लेकिन कुछ पश्चगामी संगतता की अनुमति देना वास्तव में बेहतर होगा।

मुझे करी समर्थन का विचार पसंद है।

जब तक कि लेबल को वर्तमान में अद्वितीय होने की आवश्यकता न हो?

हाँ, वे हैं, और वास्तव में वे विभिन्न प्रकारों में अद्वितीय हैं। इसलिए अलग से change<Type> निर्यात की कोई आवश्यकता नहीं होनी चाहिए, बस change पर्याप्त होना चाहिए। यह मूल रूप से https://github.com/storybooks/storybook/pull/3701 . में बनाया गया था
मुझे लगता है कि मैं उस पीआर को फिर से खोलूंगा ताकि

हमारे पास यह हो सकता है:

const {value: name, change: setName} = text('Name', 'Kent');

text के रिटर्न प्रकार को बदले बिना।

जावास्क्रिप्ट फ़ंक्शन ऑब्जेक्ट हैं और इस प्रकार गुण हो सकते हैं।
वस्तु को नष्ट किया जा सकता है।

@ndelangen text फ़ंक्शन वास्तव में एक वस्तु है, लेकिन इसका वापसी मूल्य नहीं है। यह आपके उदाहरण में काम नहीं करेगा:

const { foo, bar } = x() // note the parens

हालांकि हमारे पास ऐसा कुछ हो सकता है (नाम विवादित है):

const {value: name, change: setName} = text.mutable('Name', 'Kent');

यह काम क्यों नहीं करेगा?

const { foo, bar } = x() // note the parens

x की वापसी एक फ़ंक्शन है, जिसमें गुण भी हो सकते हैं।

मैं आपके मूल उदाहरण से x = () => {} बारे में बात कर रहा था।

यदि हम text एक फ़ंक्शन वापस करते हैं, तो उपयोगकर्ताओं को अपना कोड बदलना होगा:

// Before
<Foo bar={text('Bar', '')}>

// After
<Foo bar={text('Bar', '')()}>
                         ^^ this

समझा

इसके बारे में @IanVS सुझाव के बारे में क्या?

इस सुविधा के लिए अच्छा होगा।

"विनाश" के बारे में क्या, जैसे "प्रतिक्रिया हुक" के साथ ?:

const [foo, setFoo] = useString('foo', 'default');

@DimaRGB . जैसा ही कहने के लिए आया था
मौजूदा सिंटैक्स को संरक्षित करने और हुक जैसी कॉल जोड़ने में सक्षम होंगे, उदाहरण के लिए:

.add('example', () => {
  const [selected, setSelected] = useBool(false);

  return <SomeComponent selected={selected} onSelected={setSelected} />
})

सामयिक आवश्यकता यह है कि प्रतिक्रिया घटकों को अपने स्वयं के props को अपडेट नहीं करना चाहिए, बल्कि इसके बजाय अपने माता-पिता को बताएं कि उन्हें बदलने की आवश्यकता है। कभी-कभी एक घटक में कुछ तत्व होते हैं जो इसके प्रोप को टॉगल करने वाले होते हैं (मैं इसमें भाग गया क्योंकि कभी-कभी एक नेवी बार मेनू में मुझे खुद को खोलने की आवश्यकता होती है यदि कोई बच्चा तत्व क्लिक किया जाता है)।

@IanVS मेरे पास ठीक वैसी ही स्थिति है, जहां मेरे पास एक टॉगल घटक है जो केवल पैरेंट प्रॉप्स के माध्यम से अपडेट किया जाता है और एक बार स्टोरीबुक स्टोरी का उपयोगकर्ता इसे टॉगल करता है, UI स्थिति नॉब्स पैनल में जो दिखाया गया है, उसके साथ असंगत है। मैंने @storybook/addons-knobs से एक निजी विधि का उपयोग करके इसके चारों ओर हैक किया - एक आसान सुझाव कुछ ऐसा करने के लिए आधिकारिक एपीआई प्रदान करना होगा:

import { manager } from '@storybook/addons-knob/dist/registerKnobs.js'

const { knobStore } = manager
// The name given to your knob - i.e:  `select("Checked", options, defaultValue)`
knobStore.store['Checked'].value = newValue
// Danger zone! _mayCallChannel() triggers a re-render of the _whole_ knobs form.
manager._mayCallChannel()

@erickwilder मैंने आपके दृष्टिकोण की कोशिश की, लेकिन वह कभी भी नॉब फॉर्म को अपडेट नहीं करता था (भले ही उसने घटक को प्रदान किए गए प्रॉप्स को अपडेट किया हो)।

संपादित करें:

नहीं; मैंने अभी उस अपडेट को नहीं देखा क्योंकि मैं चेकबॉक्स के साथ विकल्प() का उपयोग कर रहा था जो स्पष्ट रूप से 'अनियंत्रित' तरीके से संचालित होते हैं। बहु-चयन पर स्विच करके और कॉलबैक में इस पद्धति का उपयोग करके मुझे अद्यतन मान घुंडी रूप में प्राप्त हुए:

// Ditch when https://github.com/storybooks/storybook/issues/3855 gets resolved properly.
function FixMeKnobUpdate(name, value) {
    addons.getChannel().emit(CHANGE, { name, value });
}

मैंने अपने सेटअप के कुछ विवरण छोड़े होंगे:

• हम Storybook के साथ Vue.js का उपयोग कर रहे हैं
• मान को बदलने वाला कोड और फिर से रेंडर को ट्रिगर करना कहानी रैपिंग कंपोनेंट के अंदर एक विधि के अंदर किया गया था।

मुझे नहीं पता कि ऐसा दृष्टिकोण सभी के लिए काम करेगा।

मैं @IanVS से पूरी तरह सहमत

मैंने अपने सेटअप (कोणीय 7) के साथ @erickwilder की हैक की कोशिश की, लेकिन जब भी मैं नॉब स्टोर को अपडेट करने का प्रयास करता हूं तो मुझे निम्न त्रुटि

त्रुटि: कोणीय क्षेत्र में नहीं होने की उम्मीद है, लेकिन यह है!

मैंने किसी तरह इसे कोणीय के बाहर चलाने की कोशिश की है, लेकिन मैं इसे करने का प्रबंधन नहीं कर सका ... सबसे खराब स्थिति में, मैं एक तीसरा घटक सी बनाऊंगा जो ए और बी का एक आवरण होगा।

@erickwilder से नॉब्स एडन के पुन :

जैसा कि ऊपर बताया गया है उसी तरह रिएक्ट का उपयोग करके हमारे लिए काम किया

ट्रिगर करने के लिए सार्वजनिक रूप से दिखाई देने वाली विधि जोड़ने के लिए +1, अद्यतन करने के लिए एक स्ट्रिंग के रूप में नॉब नाम और एक नया मान, उदाहरण के लिए:

import { manager } from "@storybook/addon-knobs"

manager.updateKnob(
  propName, // knobs property, example from above "Checked"
  newValue, // new value to set programmatically, ex. true
)

मैं वास्तव में चाहूंगा कि इसे आधिकारिक रूप से समर्थन दिया जाए।

इस बीच, स्टोरीबुक v5 के साथ मुझे इस बेहद हैकी समाधान के साथ जाना पड़ा:

window.__STORYBOOK_ADDONS.channel.emit('storybookjs/knobs/change', {
  name: 'The name of my knob',
  value: 'the_new_value'
})

मैं

मैं

संबंधित: #6916

यह अच्छा होगा... खासकर क्योंकि modals.

मुझे लगता है कि यह उपयोगी होगा।

उदाहरण:

storiesOf('input', module)
  .addDecorator(withKnobs)
  .add('default', () => <input type={text('type', 'text')} value={text('value', '')} disabled={boolean('disabled', false)} placeholder={text('placeholder', '')} onChange={action('onChange')} />)

यह वर्तमान में काम करता है, लेकिन स्वाभाविक लगता है कि हम ऑनचेंज इवेंट टारगेट वैल्यू को परीक्षण किए गए तत्व के प्रॉप्स में सेट किए गए मान पर वायर करना चाहते हैं। यह तत्व के अनुप्रयोग को बेहतर ढंग से प्रदर्शित करेगा।

यह उपयोगी होगा

+1 से @mathieuk/ @raspo यहाँ एक समाधान की ओर इशारा करने के लिए।

हम संभावित रूप से किसी अन्य तरीके से भी इस तक पहुँच प्राप्त कर सकते हैं। helpers मॉड्यूल में कुछ सामान्य तरीके बनाना?

import addons from "@storybook/addons";

export const emitter = (type, options) => addons.getChannel().emit(type, options);

export const updateKnob = (name, value) => (
  emitter("storybookjs/knobs/change", { name, value })
);

और कहानियों में आवश्यकतानुसार कॉल करना...

import { text } from "@storybook/addon-knobs";
import { updateKnob } from 'helpers';

// ...
const value = text("value", "Initial value");
<select
  value={value}
  onChange={({ target }) => updateKnob("value", target.value)}
>

... लेकिन अभी भी कुछ फंकी टू-वे बाइंडिंग वर्कअराउंड की तरह लगता है जिसे नॉब्स एपीआई में बनाया जा सकता है

उपरोक्त पर कोई अपडेट? एक बहुत ही उपयोगी सुविधा होगी 👍

कार्यान्वित की जा रही यह सुविधा हमें वास्तव में कुछ शक्तिशाली क्रॉस-डिपेंडेंट नॉब्स को काफी आसानी से करने देगी। एक पृष्ठ पर अंक लगाना घटक कहानी बनाने की कल्पना करें यदि आपके पास एक घुंडी गतिशील रूप से दूसरे के आधार पर अद्यतन हो सकती है, तो आपकी कहानी में ऐसा कुछ है:

const resultsCount = number(
    'Results count',
    currentPage, {
        max: 100,
        min: 0,
        range: true
    }
);
const resultsArray: React.ReactNode[] = new Array(resultsCount)
    .fill(true)
    .map((_, idx) => <div key={idx + 1}>Test Pagination Result #{idx + 1}</div>);
const childrenPerPage = 10;
const currentPage = number(
    'Current page index',
    0, {
        max: Math.ceil(resultsCount / childrenPerPage) - 1,
        min: 0,
        range: true
    }
);

मैंने अनिवार्य रूप से ऐसा करने की कोशिश की है, उम्मीद है कि मेरे currentPage घुंडी पर अधिकतम सीमा गतिशील रूप से अपडेट होगी जब resultsCount 10 की वृद्धि पर घुंडी बढ़ेगी, हालांकि यह प्रत्येक घुंडी का प्रारंभिक मूल्य लगता है निर्माण के समय कैश हो जाता है और बाद के रेंडर में आंतरिक स्थिति मूल्यों को ओवरराइड करने के लिए उपयोग नहीं किया जाता है। उपरोक्त कोड के साथ जब मैं resultsCount को 10+ से बढ़ाता हूं, तो मुझे उम्मीद है कि max currentPage में भी 1 की वृद्धि होगी, हालांकि अंतर्निहित मूल्यों के बावजूद इसका मूल्य समान रहता है इसे बदलने की गणना करने के लिए उपयोग किया जाता है ( Math.ceil(resultsCount / childrenPerPage) - 1 लॉगिंग अपेक्षित नया मान दिखाता है)।

हम लगभग 5.3 (जनवरी की शुरुआत में रिलीज़) के साथ कर रहे हैं और 6.0 (देर से मार्च रिलीज़) के लिए एक नॉब्स को फिर से लिखना चाहते हैं जो लंबे समय से चली आ रही नॉब्स के मुद्दों का एक समूह हल करेगा। मैं देखूंगा कि क्या हम इसमें काम कर सकते हैं! आपके धैर्य के लिए धन्यवाद!

@shilman मैं इस फीचर को लेकर बहुत उत्साहित हूं

मैं, @atanasster और @PlayMa256 कुछ समय से इसकी नींव पर काम कर रहे हैं। इसे सही होने में कुछ और पुनरावृत्तियों की आवश्यकता होगी, लेकिन मुझे बहुत विश्वास है कि हम 6.0.0 में 100% प्राप्त कर सकते हैं और वास्तव में स्टोरीबुक के लिए डेटा और प्रतिक्रियाशीलता में क्रांति ला सकते हैं।

क्रांति? गर्म लानत डिगिटी। मुझे चिढ़ाना बंद करो, मेरा शरीर तैयार है।

मोडल के लिए +1 :)

विश्वास नहीं हो रहा है कि यह शुरू से ही असंभव है। अपडेट की प्रतीक्षा में...

हाय दोस्तों!
एक अस्थायी समाधान के रूप में मैंने अपने ऐप में अगले कोड का उपयोग किया है:

import { addons } from '@storybook/addons';
import { CHANGE } from '@storybook/addon-knobs';

const channel = addons.getChannel();

channel.emit(CHANGE, {
  name: 'prop_name',
  value: prop_value,
});

अभी भी प्रतीक्षा है कि यह सुविधा मूल रूप से लागू की जाएगी।

मैंने अवलोकनीय का उपयोग करके उस समस्या को हल किया। मैं कोणीय के साथ स्टोरीबुक का उपयोग कर रहा हूँ

`
.add ('चार्ट डेटा अपडेट करना', () => {

const myObservable= new BehaviorSubject([{a: 'a', b: 'b'}]);
return {
  template: '
  <my-component
    myInput: myData,
    (myEvent)="myEventProp($event)"
  ></my-component>
  ',
  props: {
    myData: myObservable,
    myEventProp: $event => {
      myObservable.next([]);
      action('(myEvent)')($event);
    }
  }
};

})
`

@ नॉरबर्ट-डूफस धन्यवाद आपके उदाहरण ने मेरी मदद की

हाय गैंग, हमने अभी-अभी 6.0-बीटा में एडऑन-कंट्रोल जारी किया है!

नियंत्रण पोर्टेबल, ऑटो-जेनरेटेड नॉब्स होते हैं जिनका उद्देश्य एडऑन-नॉब्स लॉन्ग टर्म को बदलना होता है।

• README को नियंत्रित करता है
• प्रवासन निर्देश

कृपया अपग्रेड करें और आज ही इन्हें आज़माएं. रिलीज के लिए इसे स्थिर बनाने में आपकी मदद और समर्थन के लिए धन्यवाद!

एक दम बढ़िया! मैं रीडमे को पढ़ने से बिल्कुल नहीं बता सकता (मैंने इसे याद किया होगा), क्या इन नए controls को प्रोग्रामेटिक रूप से बदला जा सकता है, जो इस मुद्दे में अनुरोध किया जा रहा था?

वे हो सकते हैं, हालांकि मुझे यकीन नहीं है कि एपीआई आधिकारिक तौर पर अभी तक समर्थित है (हालांकि हम एडऑन-डॉक्स में नियंत्रण के लिए ठीक वही कर रहे हैं)। मैं @tmeasday के साथ काम

• [ ] कहानी के संदर्भ में updateArgs जोड़ें?
• [ ] कहानी के संदर्भ को उस कॉलबैक के लिए उपलब्ध कराएं जिसे कहानी से बुलाया गया है? ( this.context?.updateArgs(....) )

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

=> स्टोरीबुक नियंत्रण w / CRA और टाइपस्क्रिप्ट

नियंत्रण रीडमे में कुछ "नॉब्स टू कंट्रोल" माइग्रेशन डॉक्स भी हैं:

=> मैं ऐडऑन-नॉब्स से कैसे माइग्रेट करूं?

हाय दोस्तों!
एक अस्थायी समाधान के रूप में मैंने अपने ऐप में अगले कोड का उपयोग किया है:

import { addons } from '@storybook/addons';
import { CHANGE } from '@storybook/addon-knobs';

const channel = addons.getChannel();

channel.emit(CHANGE, {
  name: 'prop_name',
  value: prop_value,
});

अभी भी प्रतीक्षा है कि यह सुविधा मूल रूप से लागू की जाएगी।

ध्यान रखें कि groupId का उपयोग करते समय आपको समूह आईडी को name में निम्नानुसार जोड़ना होगा:

 const show = boolean('Show Something', true, 'Group')

channel.emit(CHANGE, {
  name: 'Show Something_Group',
  value: prop_value,
});

साथ ही, channel एक EventEmitter है, इसलिए आप यह जांचने के लिए addListener कर सकते हैं कि कौन से पैरामीटर प्राप्त हो रहे हैं।

channel.addListener(CHANGE, console.log)

यहां किसी ऐसे व्यक्ति के लिए एक कोड स्निपेट है जो v6 में addon-controls का उपयोग करके ऐसा करने में रुचि रखता है।

import { useArgs } from '@storybook/client-api';

// Inside a story
export const Basic = ({ label, counter }) => {
    const [args, updateArgs] = useArgs();
    return <Button onClick={() => updateArgs({ counter: counter+1 })>{label}: {counter}<Button>;
}

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

https://github.com/storybookjs/storybook/blob/next/examples/official-storybook/stories/core/args.stories.js#L34 -L43

धन्यवाद, @shilman! यही चाल चली।

रुचि रखने वाले लोगों के लिए, हमारे पास सटीक Checkbox कहानी checked प्रोप है जिसने इस पूरे धागे को शुरू किया। Storybook 6.0.0-rc.9 का उपयोग करके हमारी नई वायर्ड कहानी यहां दी गई है:

export const checkbox = (args) => {
  const [{ checked }, updateArgs] = useArgs();
  const toggleChecked = () => updateArgs({ checked: !checked });
  return <Checkbox {...args} onChange={toggleChecked} />;
};
checkbox.args = {
  checked: false,
  label: 'hello checkbox!',
};
checkbox.argTypes = {
  checked: { control: 'boolean' },
};

@shilman मैंने एक नियंत्रित टेक्स्ट इनपुट के लिए एक कहानी में useArgs का उपयोग करने का प्रयास किया (एक ऐसा मामला जहां हम आमतौर पर useState हुक का उपयोग करके घटक के value प्रोप को अपडेट करने के लिए उपयोग कर सकते हैं इसकी onChange घटना)। हालांकि, मुझे एक समस्या का सामना करना पड़ा जहां हर बार जब उपयोगकर्ता एक चरित्र टाइप करता है, तो घटक फोकस खो देता है। क्या यह शायद हर बार जब हम तर्क अपडेट करते हैं तो कहानी को रीफ्रेश/पुनः प्रस्तुत करने के कारण होता है?

क्या नियंत्रित टेक्स्ट इनपुट वाले घटक के लिए तर्क/नियंत्रण का उपयोग करने के लिए कोई अलग अनुशंसित विधि है?

यह 6.0.0-rc.13 . के साथ था

@jcq क्या आप useArgs लिए प्राथमिक उपयोग का मामला नहीं था, लेकिन निश्चित रूप से एक जिसे हम समर्थन देना चाहते हैं, इसलिए हमें इसमें खुदाई करने में खुशी होगी।

@shilman कोई समस्या नहीं - यहाँ नया मुद्दा है:
https://github.com/storybookjs/storybook/issues/11657

मुझे यह भी स्पष्ट करना चाहिए था कि गलत व्यवहार डॉक्स में दिखता है, जबकि यह सामान्य कैनवास मोड में सही ढंग से काम करता है।

मैंने अवलोकनीय का उपयोग करके उस समस्या को हल किया। मैं कोणीय के साथ स्टोरीबुक का उपयोग कर रहा हूँ

`
.add ('चार्ट डेटा अपडेट करना', () => {

const myObservable= new BehaviorSubject([{a: 'a', b: 'b'}]);
return {
  template: '
  <my-component
    myInput: myData,
    (myEvent)="myEventProp($event)"
  ></my-component>
  ',
  props: {
    myData: myObservable,
    myEventProp: $event => {
      myObservable.next([]);
      action('(myEvent)')($event);
    }
  }
};

})
`

इसने मेरे लिए कोणीय का उपयोग करके काम किया लेकिन लाइन 5 . पर myData.value बदल दिया

मैंने अभी तक इसे आज़माया नहीं है (अभी के लिए स्टोरीबुक के पुराने संस्करण पर अटका हुआ है) लेकिन ऐसा लगता है कि इस मुद्दे को अब बंद किया जा सकता है। तर्क/नियंत्रण पर महान कार्य के लिए धन्यवाद!