Storybook: アクションを介してノブを変更する[アイデア]

ある種の同様のアイデアがこの＃3701 PRで紹介されましたが、それは物議を醸していました（そしてマージされませんでした）。

もう一度ディスカッションを開いて、APIの提案を聞くことができます=）。

ああ、ありがとう、私はそのPRを見ていませんでした。 それをまとめてくれた@aherriotに感謝し

APIに飛び込む前に、基本的な概念について話し合い、合意する必要があるようです。 PRのコメントの1つは@Hypnosphiからのこれ

複数の真実の情報源（コンポーネントのコールバックとUIノブ）が導入されるという事実は好きではありません

アイデアは、さまざまな信頼できる情報源を導入することではなく、コンポーネントの状態（ノブ）の信頼できる唯一の情報源を維持できるようにすることであるように思われます。 私が提案した他のすべてのアプローチ（ラッパーコンポーネント、状態アドオン、再構成）は、実際には別の真実の情報源を導入します。 私のチェックボックスの例では、 checkedノブを使用することはできず、ラッパーコンポーネントがchecked小道具を提供できるようにすることもできません。 ノブのコントロールパネルはコンポーネントの親として表示されますが、現在、コンポーネントからコールバックを取得することはできません。これは一種の一方的なものであり、reactアプリが通常どのように構築されるかではありません。

ノブをプログラムで制御できるようにすることで、チェックボックスのような単純なプレゼンテーションコンポーネントの場合と同様に、ストーリーをデモンストレーションされているコンポーネントだけに分離し、実際の状態管理メカニズムを不透明にすることができます。 チェックボックス自体は、小道具を取得する方法を気にしません。reduxに接続されるか、親がsetState使用するか、再構成からwithStateを使用するか、小道具がによって制御される可能性があります。ストーリーブックのノブ。

とにかく私が言ったように私はこれに非常に新しいので、私は私の直感的な考えを共有しているだけです。 私がオフベースで、これらの種類の純粋なステートレスコンポーネントを処理するための一般的に受け入れられている「ベストプラクティス」がある場合、誰かが私が従うことができる良い例を教えてくれるでしょうか。

やあ ：）

コンポーネントが小道具からモバイルレイアウトを表示する（または表示しない）必要があるかどうかを受け取っているときに、私はそれに遭遇しました。私の目標は、ビューポートの変更をノブに結び付けることでした。それは本当に良かったでしょう;）

ここにユースケースを追加したかったのですが、 @ IanVSのように、コールバックもあればよかったでしょう（したがって、isMobileの小道具を切り替えると、ビューポートの変更をトリガーできます）

ノブの状態を更新する方法に興味を持っている人が何人かいると聞きました。 良い建築に同意できれば、多くの人にとって価値があると思います。 特に、これは人々が使用するかどうかを選択できる追加の機能であり、使用したくない人に悪影響を与えないためです。

@Hypnosphi 、以前の実装であるWDYTについて異議がありましたか？

この問題を開いたままにするためにここにコメントします。 @Hypnosphiが以前にここで提案した@

アイデアは、さまざまな真実の情報源を導入することではなく、コンポーネントの状態の信頼できる唯一の情報源であるノブを維持できるようにすることであるように思われます。 私が提案した他のすべてのアプローチ（ラッパーコンポーネント、状態アドオン、再構成）は、実際には別の真実の情報源を導入します。 チェックボックスの例では、チェックするためのノブを設定することはできません。また、ラッパーコンポーネントがチェックされた小道具を提供できるようにします。 ノブのコントロールパネルはコンポーネントの親として表示されますが、現在、コンポーネントからコールバックを取得することはできません。これは一種の一方的なものであり、reactアプリが通常どのように構築されるかではありません。

私には合理的に聞こえます。 APIについて説明しましょう

これは素晴らしい機能になります。 私はここで非常に基本的な制御されたコンポーネントでこれと同じニーズに直面し、他のコンポーネントでも以前に直面していました。 ご覧いただきありがとうございます。

現在の構文に追いつくのは少し難しいようです。 多分あなたは次のようなものを使うことができます：

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で作成されたものです
私はあなたの側の助けを借りて@aherriotにそれを終わらせるためにそのPRを再開するだけだと思います

私たちはこれを持つことができます：

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

textのリターンタイプを変更する必要はありません。

Javascript関数はオブジェクトであるため、プロパティを持つことができます。
オブジェクトは分解できます。

@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の提案はどうですか？

この機能があると便利です。

「reacthooks」のように「destruct」はどうですか？：

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

@DimaRGBと同じように言うようになりました
たとえば、既存の構文を保持し、フックのような呼び出しを追加できます。

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

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

時折、reactコンポーネントが独自のpropsを更新することは想定されていない必要がありますが、代わりに、変更が必要であることを親に伝えます。 コンポーネントに、その小道具を切り替えることになっている要素が含まれている場合があります（子要素がクリックされた場合に、ナビゲーションバーメニューを開く必要があるため、これに遭遇しました）。

@IanVS親の小道具を介してのみ更新されるトグルコンポーネントがあり、ストーリーブックストーリーのユーザーがトグルすると、UIの状態が一致しないというまったく同じ状況があります。 @storybook/addons-knobsプライベートメソッドを使用してハックしました。もっと簡単な提案は、次のようなことを行うための公式APIを提供することです。

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私はあなたのアプローチを試しましたが、それはノブのフォームを更新するようには見えませんでした（コンポーネントに提供された小道具を更新した場合でも）。

編集：

それをスクラッチします。 どうやら「制御されていない」方法で操作されるチェックボックスでoptions（）を使用していたため、その更新が表示されませんでした。 複数選択に切り替えてコールバックでこのメソッドを使用することにより、更新された値をノブ形式で取得しました。

// 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に完全に同意します。ストーリーブックは大好き

セットアップ（Angular 7）で@erickwilderのハックを試しましたが、

エラー：Angular Zoneにないことが予想されますが、あります！

どういうわけかこれをAngularの外で実行しようとしましたが、なんとか実行できませんでした...最悪のシナリオでは、AとBのラッパーとなる3番目のコンポーネントCを作成します。

@erickwilderの@davidolivefarga一時ソリューションは、フレームワーク/ライブラリ（react、angular、vue、その他）に関連するのではなく、Knobsアドオンの再レンダリングに関連するため、どのフレームワークでも機能するはずです。

上記と同じ方法でReactを使用して作業しました

+1は、トリガーする公開メソッドを追加します。これには、更新する文字列としてのノブ名と新しい値が含まれます。次に例を示します。

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

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

これが正式にサポートされることを本当に望んでいます。

それまでの間、Storybook v5では、このひどくハッキーなソリューションを使用する必要がありました。

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

🙈

🙈

関連：＃6916

これはかっこいいでしょう...特にモーダルだからです。

これは役に立つと思います。

例：

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')} />)

これは現在機能していますが、onChangeイベントのターゲット値をテストされた要素の小道具に設定された値にワイヤリングするのは自然なことのようです。 これは、要素のアプリケーションをよりよく示します。

これは便利です

ここでの解決に向けて指し示す@ mathieuk / @raspoに+1。

別の方法でこれにアクセスできる可能性もあります。 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)}
>

...それでも、ノブAPIに組み込むことができるものへのファンキーな双方向バインディングの回避策のように感じます

上記の更新はありますか？ 非常に便利な機能になります👍

この機能が実装されていると、非常に強力な相互依存ノブを非常に簡単に実行できるようになります。 ストーリーに次のようなものを使用して、あるノブを別のノブに応じて動的に更新できる場合に、ページ付けコンポーネントストーリーを作成することを想像してみてください。

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

resultsCountノブを10ずつ増やすと、 currentPageノブの最大範囲が動的に更新されることを期待して、基本的にこれを試してみましたが、各ノブの初期値のようです。作成時にキャッシュされ、後続のレンダリングで内部状態値をオーバーライドするために使用されることはありません。 上記のコードで、私は増加したときにresultsCount私は期待10+でmaxのcurrentPageされて基礎となる値にもかかわらず、同じしかし、その値の滞在、また1増加します変更されたものを計算するために使用されます（ Math.ceil(resultsCount / childrenPerPage) - 1をログに記録すると、期待される新しい値が表示されます）。

5.3（1月初旬のリリース）はほぼ完了し、6.0（3月下旬のリリース）のノブの書き直しを検討しています。これにより、長年のノブの問題が解決されます。 これで作業できるかどうかを確認します。 お待ち頂きまして、ありがとうございます！

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

まだ待っているこの機能はネイティブに実装されます。

私はobservableを使用してその問題を解決しました。 角度のあるストーリーブックを使用しています

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

}）
`

@ norbert-doofusあなたの例が私を助けてくれてありがとう👍

こんにちはギャング、6.0ベータ版のアドオンコントロールをリリースしました！

コントロールは、アドオンノブを長期間置き換えることを目的とした、ポータブルで自動生成されたノブです。

• READMEを制御します
• 移行手順

アップグレードして、今すぐお試しください。 リリースのためにこれを安定させるためのあなたの助けとサポートに感謝します！

それは素晴らしいことです！ READMEを読んだだけではわかりません（見逃したかもしれません）。これらの新しいcontrolsプログラムで変更することはできますか？これは、この号で行われたリクエストでしたか？

APIが正式にサポートされているかどうかはまだわかりませんが、可能性があります（addon-docsのコントロールに対して正確にサポートされています）。 @tmeasdayと見つけます。

• []ストーリーコンテキストにupdateArgsを追加しますか？
• []ストーリーから呼び出されたコールバックでストーリーコンテキストを利用できるようにしますか？ （ this.context?.updateArgs(....) ）

Controlsに興味があるが、どこから始めればよいかわからない人のために、新しいCRAプロジェクトから実用的なデモに移行するための簡単で汚いステップバイステップのウォークスルーを作成しました。 見てみな：

=> CRAとTypeScriptを使用したスト​​ーリーブックコントロール

Controls READMEには、いくつかの「コントロールへのノブ」移行ドキュメントもあります。

=>アドオンノブから移行するにはどうすればよいですか？

みなさん、こんにちは！
一時的な解決策として、次のコードでアプリで使用しました。

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を使用する場合は、次のようにグループIDを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)

これaddon-controls 、v6で

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

これがこの目的に最適なAPIであるかどうかはわかりませんが、機能するはずです。 モノレポの例：

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

ありがとう、@ shilman！ それがトリックでした。

興味のある人のために、このスレッド全体を開始した正確なCheckboxストーリーchecked小道具があります。 Storybook6.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

また、通常のCanvasモードでは正しく機能しますが、誤った動作がドキュメントに表示されることを明確にする必要があります。

私はobservableを使用してその問題を解決しました。 角度のあるストーリーブックを使用しています

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

}）
`

これはAngularを使用して私にとってはうまくいきましたが、5行目でmyData.valueに変更しました

私はまだこれを試していません（今のところ古いバージョンのストーリーブックで立ち往生しています）が、この問題は今すぐ解決できるようです。 引数/コントロールの素晴らしい作業に感謝します！