Storybook: Ubah kenop melalui tindakan [ide]

Semacam ide serupa diperkenalkan dalam PR #3701 ini, yang kontroversial (dan tidak digabung).

Kita bisa membuka diskusi lagi, dan mendengarkan saran API =).

Ah terima kasih, saya belum melihat PR itu. Terima kasih @aherriot untuk menyatukannya, sepertinya kami memiliki pemikiran yang sama.

Sebelum terjun ke API, sepertinya konsep dasarnya perlu didiskusikan dan disepakati. Salah satu komentar di PR adalah ini dari @Hypnosphi :

Saya tidak suka fakta bahwa itu memperkenalkan banyak sumber kebenaran (panggilan balik komponen dan kenop UI)

Tampaknya bagi saya bahwa idenya bukan untuk memperkenalkan sumber kebenaran yang berbeda, melainkan untuk memungkinkan mempertahankan _satu_ sumber kebenaran untuk status komponen—kenop. Semua pendekatan lain yang saya lihat disarankan (komponen pembungkus, add-on status, komposisi ulang) sebenarnya akan memperkenalkan sumber kebenaran lain. Dalam contoh kotak centang saya, saya tidak akan dapat memiliki kenop untuk checked , dan juga mengizinkan komponen pembungkus untuk menyediakan prop checked . Saya melihat panel kontrol kenop sebagai induk komponen, kecuali bahwa saat ini tidak bisa mendapatkan panggilan balik dari komponen, yang merupakan jenis satu sisi dan bukan bagaimana aplikasi reaksi biasanya dibuat.

Dengan membiarkan kenop dikontrol secara terprogram, cerita dapat diisolasi hanya ke komponen yang didemonstrasikan, meninggalkan mekanisme manajemen status yang sebenarnya buram, sebagaimana seharusnya untuk komponen presentasi sederhana seperti kotak centang. Kotak centang itu sendiri tidak peduli bagaimana ia mendapatkan propsnya, mungkin terhubung ke redux, induknya mungkin menggunakan setState , mungkin menggunakan withState dari recompose, atau mungkin props dikendalikan oleh tombol buku cerita.

Bagaimanapun seperti yang saya katakan, saya sangat baru dalam hal ini, jadi saya hanya membagikan pemikiran intuitif saya. Jika saya tidak masuk akal dan ada "praktik terbaik" yang diterima secara umum untuk menangani komponen-komponen murni tanpa kewarganegaraan semacam ini, mungkin seseorang dapat mengarahkan saya ke contoh yang baik yang dapat saya ikuti?

Hai :)

Saya hanya ingin menambahkan saya menemukan itu karena komponen saya menerima jika mereka harus menampilkan tata letak seluler mereka (atau tidak) dari alat peraga, dan tujuan saya adalah untuk mengikat perubahan viewport ke kenop saya, dan itu akan sangat bagus;)

Hanya ingin menambahkan kasus penggunaan saya di sini, dan karena @IanVS bahkan panggilan balik akan menyenangkan (jadi jika saya mengaktifkan alat peraga isMobile saya, saya dapat memicu perubahan viewport)

Saya telah mendengar beberapa orang menyatakan minatnya pada metode untuk memperbarui status tombol. Jika kita dapat menyepakati arsitektur yang baik, saya pikir ini akan menjadi nilai bagi banyak orang. Terutama karena ini adalah fungsi tambahan yang dapat dipilih orang untuk digunakan atau tidak dan karena itu tidak berdampak negatif bagi mereka yang tidak ingin menggunakannya.

@Hypnosphi , Anda memiliki keberatan tentang implementasi sebelumnya, WDYT?

Berkomentar di sini untuk menjaga masalah ini tetap terbuka. Saya masih penasaran apa yang dikatakan @Hypnosphi tentang @igor-dv yang sebelumnya diusulkan di sini.

Tampak bagi saya bahwa idenya bukan untuk memperkenalkan sumber kebenaran yang berbeda, melainkan untuk memungkinkan mempertahankan satu sumber kebenaran untuk status komponen — tombol-tombolnya. Semua pendekatan lain yang saya lihat disarankan (komponen pembungkus, add-on status, komposisi ulang) sebenarnya akan memperkenalkan sumber kebenaran lain. Dalam contoh kotak centang saya, saya tidak akan dapat memiliki kenop untuk dicentang, dan juga mengizinkan komponen pembungkus untuk menyediakan prop yang dicentang. Saya melihat panel kontrol kenop sebagai induk komponen, kecuali bahwa saat ini tidak bisa mendapatkan panggilan balik dari komponen, yang merupakan jenis satu sisi dan bukan bagaimana aplikasi reaksi biasanya dibuat.

Kedengarannya masuk akal bagi saya. Mari kita bahas API

Ini akan menjadi fitur yang hebat. Saya baru saja menghadapi kebutuhan yang sama di sini dengan komponen terkontrol yang sangat mendasar dan telah menghadapinya sebelumnya di komponen lain juga. Terima kasih telah melihatnya.

Untuk mengikuti sintaks saat ini tampaknya sedikit tantangan. Mungkin Anda bisa menggunakan sesuatu seperti:

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

@brunoreis , saya akan khawatir bahwa mengubah tanda tangan kembali dari kenop akan menjadi perubahan yang melanggar. Saran spontan saya adalah melakukan sesuatu seperti:

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

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

Di mana panggilan balik onChange bahkan memungkinkan kari, sehingga ini juga berfungsi:

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

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

Bagian penting adalah bahwa argumen pertama harus sama dengan label tombol yang harus diubah. Saya percaya ini akan memungkinkan pengguna untuk ikut serta dalam perilaku ini tanpa mengubah apa pun tentang cara kenop saat ini digunakan. (Kecuali mungkin label saat ini tidak diharuskan unik? Saya berasumsi mereka…)

@IanVS , itu bagus. Saya setuju dengan Anda tentang tidak mengubah cara kerja. Saya tidak dapat menemukan cara untuk melakukannya karena saya tidak berpikir untuk menggunakan label sebagai kunci. Itu mungkin berhasil. Mari kita lihat apa yang ada dalam pikiran @Hypnosphi .

mengubah tanda tangan kembali dari kenop akan menjadi perubahan besar

Secara teknis, itu bukan masalah sekarang. Kami memiliki rilis besar yang akan datang. Tetapi memang akan lebih baik untuk mengizinkan beberapa kompatibilitas ke belakang.

Saya suka ide untuk mendapatkan dukungan.

Kecuali mungkin label saat ini tidak diharuskan unik?

Ya mereka, dan sebenarnya mereka unik di berbagai jenis. Jadi seharusnya tidak perlu mengekspor change<Type> , change saja sudah cukup. Pada dasarnya itulah yang dibuat di https://github.com/storybooks/storybook/pull/3701
Saya pikir saya akan membuka kembali PR itu agar @aherriot menyelesaikannya dengan bantuan dari pihak Anda

Kita dapat memiliki ini:

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

tanpa harus mengubah tipe pengembalian text .

Fungsi Javascript adalah objek dan dengan demikian dapat memiliki properti.
Objek dapat dirusak.

@ndelangen fungsi text memang merupakan objek, tetapi nilai pengembaliannya tidak. Ini tidak akan berfungsi dalam contoh Anda:

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

Kami dapat memiliki sesuatu seperti ini (namanya dapat diperdebatkan):

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

mengapa ini tidak berhasil?

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

Kembalinya x adalah fungsi, yang dapat memiliki properti juga.

Saya sedang berbicara tentang x = () => {} dari contoh asli Anda.

Jika kita membuat text mengembalikan fungsi, pengguna perlu mengubah kode mereka:

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

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

jadi begitu

Bagaimana dengan saran @IanVS untuk ini?

akan keren untuk memiliki fitur ini.

bagaimana dengan "destruct", seperti dengan "react hooks" ?:

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

Datang untuk mengatakan hal yang sama dengan @DimaRGB
Akan dapat mempertahankan sintaks yang ada dan menambahkan panggilan seperti kait, misalnya:

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

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

Kebutuhan sesekali adalah bahwa komponen reaksi tidak seharusnya memperbarui props mereka sendiri, tetapi memberi tahu orang tua mereka bahwa mereka perlu diubah. Terkadang sebuah komponen berisi beberapa elemen yang seharusnya mengaktifkan props-nya (saya mengalami ini karena terkadang menu nav bar yang saya miliki perlu membuka sendiri jika elemen anak diklik).

@IanVS Saya memiliki situasi yang sama persis di mana saya memiliki komponen pribadi dari @storybook/addons-knobs - saran yang lebih sederhana adalah menyediakan API resmi untuk melakukan sesuatu seperti:

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 Saya mencoba pendekatan Anda tetapi sepertinya tidak pernah memperbarui formulir kenop (bahkan ketika itu memperbarui alat peraga yang disediakan untuk komponen).

EDIT:

menggaruk itu; Saya hanya tidak melihat pembaruan itu karena saya menggunakan options() dengan kotak centang yang dioperasikan dengan cara 'tidak terkontrol' rupanya. Dengan beralih ke multi-pilih dan menggunakan metode ini dalam panggilan balik, saya mendapatkan nilai yang diperbarui ke dalam bentuk tombol:

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

Saya mungkin telah menghilangkan beberapa detail pengaturan saya:

• Kami menggunakan Vue.js dengan Buku Cerita
• Kode yang mengubah nilai dan memicu rendering ulang dilakukan di dalam metode jika komponen pembungkus cerita.

Saya tidak tahu apakah pendekatan seperti itu akan berhasil untuk semua orang.

Saya sepenuhnya setuju dengan @IanVS , saya suka buku cerita tapi saya sangat merindukan kemampuan untuk memperbarui tombol melalui tindakan. Dalam kasus saya, saya memiliki dua komponen individu A dan B tetapi dalam salah satu cerita saya, saya ingin menunjukkan komposisi menggunakan keduanya, sehingga setiap kali saya mengubah AI memancarkan tindakan yang akan memodifikasi B dan sebaliknya.

Saya mencoba peretasan @erickwilder dengan pengaturan saya (Angular 7), tetapi setiap kali saya mencoba memperbarui toko kenop saya menerima kesalahan berikut:

Kesalahan: Diharapkan tidak berada di Zona Sudut, tetapi memang demikian!

Saya sudah mencoba menjalankan ini di luar Angular tetapi saya tidak berhasil melakukannya ... Skenario terburuk, saya akan membuat komponen C ketiga yang akan menjadi pembungkus A dan B.

@davidolivefarga solusi sementara dari @erickwilder harus bekerja untuk kerangka kerja apa pun karena tidak terkait dengan kerangka kerja/pustaka (bereaksi, sudut, vue, apa pun) tetapi dengan rendering addon Knobs.

Bekerja untuk kami menggunakan Bereaksi dengan cara yang sama seperti yang disebutkan di atas

+1 untuk menambahkan metode pemicu yang terlihat secara publik, berisi nama kenop sebagai string yang akan diperbarui dan nilai baru, misalnya:

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

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

Saya benar-benar ingin ini didukung secara resmi.

Sementara itu, dengan Storybook v5 saya harus menggunakan solusi yang sangat retas ini:

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

🙈

🙈

Terkait: #6916

Ini akan menjadi keren... Terutama karena modals.

Saya pikir ini akan berguna.

Contoh:

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

Ini saat ini berfungsi, tetapi tampaknya wajar bahwa kami ingin mentransfer nilai target acara onChange ke nilai yang ditetapkan dalam alat peraga elemen yang diuji. Ini akan lebih baik menunjukkan penerapan elemen.

Ini akan berguna

+1 ke @mathieuk/ @raspo untuk menunjuk ke arah solusi di sini.

Kami berpotensi mendapatkan akses ke ini dengan cara lain juga. Membuat beberapa metode umum dalam modul 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 })
);

Dan menelepon sesuai kebutuhan dalam cerita...

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

...tapi masih terasa seperti solusi pengikatan dua arah yang funky untuk sesuatu yang dapat dibangun ke dalam tombol-tombol API

Ada update di atas? Akan menjadi fitur yang sangat berguna 👍

Fitur yang diimplementasikan ini memungkinkan kita melakukan beberapa tombol cross-dependent yang sangat kuat dengan cukup mudah. Bayangkan membuat cerita komponen pagination jika Anda dapat memiliki satu tombol yang diperbarui secara dinamis tergantung pada yang lain, dengan sesuatu seperti ini di cerita Anda:

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

Saya sudah mencoba melakukan ini pada dasarnya, berharap bahwa rentang maksimum pada kenop currentPage akan diperbarui secara dinamis ketika meningkatkan kenop resultsCount dengan kenaikan 10, namun tampaknya nilai awal setiap kenop di-cache pada waktu pembuatan dan tidak terbiasa mengganti nilai status internal di render berikutnya. Dengan kode di atas ketika saya meningkatkan resultsCount sebesar 10+ saya berharap max dari currentPage juga meningkat sebesar 1, namun nilainya tetap sama meskipun nilai dasarnya adalah digunakan untuk menghitungnya telah berubah (mencatat Math.ceil(resultsCount / childrenPerPage) - 1 menunjukkan nilai baru yang diharapkan).

Kami hampir selesai dengan 5.3 (rilis awal Januari) dan melihat penulisan ulang tombol untuk 6.0 (rilis akhir Maret) yang akan memecahkan banyak masalah tombol lama. Aku akan melihat apakah kita bisa mengerjakan ini! Terima kasih atas kesabaran Anda!

@shilman Saya sangat senang dengan fitur ini

Saya, @atanasster & @PlayMa256 telah mengerjakan fondasi ini untuk sementara waktu. Perlu beberapa iterasi lagi untuk memperbaikinya, tetapi saya merasa sangat yakin bahwa kami dapat mencapai 100% dalam 6.0.0 dan benar-benar merevolusi data & reaktivitas untuk buku cerita.

Merevolusionerkan? Diggity sialan panas. Berhenti menggodaku, tubuhku sudah siap.

+1 untuk modal :)

Tidak percaya bahwa itu tidak mungkin dari awal. Di tunggu updatenya...

Hai teman-teman!
Sebagai solusi sementara, saya telah menggunakan kode berikutnya di aplikasi saya:

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

const channel = addons.getChannel();

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

Masih menunggu fitur ini akan diimplementasikan secara native.

Saya memecahkan masalah itu menggunakan observable. Saya menggunakan buku cerita dengan sudut

`
.add('memperbarui data grafik', () => {

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 terima kasih contoh Anda membantu saya 👍

Hai geng, Kami baru saja merilis kontrol tambahan di 6.0-beta!

Kontrol adalah kenop portabel yang dibuat secara otomatis yang dimaksudkan untuk menggantikan kenop tambahan dalam jangka panjang.

• Kontrol README
• Instruksi migrasi

Harap tingkatkan dan coba hari ini. Terima kasih atas bantuan dan dukungan Anda untuk mendapatkan stabil ini untuk dirilis!

Itu hebat! Saya tidak tahu dari membaca README (saya mungkin melewatkannya), dapatkah controls diubah secara terprogram, yang merupakan permintaan yang dibuat dalam masalah ini?

Mereka bisa, meskipun saya tidak yakin bahwa API secara resmi didukung (meskipun kami melakukan hal itu untuk kontrol di addon-docs). Saya akan bekerja dengan @tmeasday untuk mencari cara terbaik untuk mendapatkannya setelah putaran pertama bug Kontrol stabil.

• [ ] tambahkan updateArgs ke konteks cerita?
• [ ] membuat konteks cerita tersedia untuk panggilan balik yang dipanggil dari cerita? ( this.context?.updateArgs(....) )

Bagi siapa saja yang tertarik dengan Kontrol tetapi tidak tahu harus mulai dari mana, saya telah membuat panduan langkah demi langkah yang cepat & kotor untuk beralih dari proyek CRA baru ke demo yang berfungsi. Coba lihat:

=> Kontrol Buku Cerita dengan CRA & TypeScript

Ada juga beberapa dokumen migrasi "kenop untuk mengontrol" di Controls README:

=> Bagaimana cara saya bermigrasi dari addon-knobs?

Hai teman-teman!
Sebagai solusi sementara, saya telah menggunakan kode berikutnya di aplikasi saya:

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

const channel = addons.getChannel();

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

Masih menunggu fitur ini akan diimplementasikan secara native.

Ingatlah bahwa saat menggunakan groupId Anda perlu menambahkan id grup ke name sebagai berikut:

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

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

Juga, channel adalah EventEmitter, jadi Anda dapat addListener untuk memeriksa parameter apa yang diterima.

channel.addListener(CHANGE, console.log)

Berikut cuplikan kode untuk siapa saja yang tertarik dengan cara melakukan ini menggunakan addon-controls di 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>;
}

Saya tidak tahu apakah ini adalah API terbaik untuk tujuan ini tetapi seharusnya berhasil. Contoh di monorepo:

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

Terima kasih, @shilman! Itu berhasil.

Bagi orang-orang yang tertarik, kami memiliki prop Checkbox story checked yang tepat yang memulai seluruh utas ini. Inilah cerita baru kami menggunakan 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 Saya mencoba menggunakan useArgs dalam cerita untuk input teks terkontrol (kasus di mana kita biasanya menggunakan kait useState untuk memperbarui prop komponen value melalui acara onChange ). Namun, saya mengalami masalah di mana setiap kali pengguna mengetik karakter, komponen kehilangan fokus. Apakah ini mungkin disebabkan oleh refresh/re-rendering cerita setiap kali kami memperbarui argumen?

Apakah ada metode berbeda yang direkomendasikan untuk menggunakan args/controls untuk komponen dengan input teks terkontrol?

Ini dengan 6.0.0-rc.13

@jcq Bisakah Anda membuat masalah baru dengan repro? Ini bukan kasus penggunaan utama untuk useArgs , tetapi tentu saja salah satu yang ingin kami dukung, jadi kami akan dengan senang hati menggalinya.

@shilman Tidak masalah — inilah masalah baru:
https://github.com/storybookjs/storybook/issues/11657

Saya juga harus mengklarifikasi bahwa perilaku yang salah muncul di Documents, sementara itu berfungsi dengan benar dalam mode Canvas normal.

Saya memecahkan masalah itu menggunakan observable. Saya menggunakan buku cerita dengan sudut

`
.add('memperbarui data grafik', () => {

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

})
`

Ini bekerja untuk saya menggunakan Angular tetapi mengubah ke myData.value pada baris 5

Saya belum mencoba ini (terjebak pada versi buku cerita yang lebih lama untuk saat ini) tetapi sepertinya masalah ini dapat ditutup sekarang. Terima kasih atas kerja bagusnya di args / kontrol!