Storybook: 작업을 통해 노브 변경 [아이디어]

이 #3701 PR에 유사한 아이디어가 도입되어 논란이 되었습니다(통합되지 않음).

이에 대한 토론을 다시 열고 API 제안을 들을 수 있습니다 =).

아 감사합니다, 그 PR을 본 적이 없습니다. @aherriot 에 감사드립니다. 저희도 같은 생각을 하고 있는 것 같습니다.

API에 뛰어들기 전에 기본 개념을 논의하고 동의해야 할 것 같습니다. PR의 의견 중 하나는 @Hypnosphi의 다음과

나는 그것이 진실의 여러 소스(구성 요소 콜백 및 UI 손잡이)를 도입한다는 사실을 좋아하지 않습니다.

제 생각에는 다양한 정보 소스를 도입하는 것이 아니라 구성 요소 상태(노브)에 대해 _단일_ 소스를 유지하도록 허용하는 것 같습니다. 내가 제안한 다른 모든 접근 방식(래퍼 구성 요소, 상태 추가 기능, 재구성)은 사실 또 다른 소스를 소개합니다. 내 확인란 예에서는 checked 대한 손잡이를 가질 수 없으며 래퍼 구성 요소가 checked 소품을 제공할 수도 있습니다. 나는 노브 제어판을 구성 요소의 부모로 봅니다. 단, 현재 구성 요소에서 콜백을 가져올 수 없습니다. 이는 일종의 일방적이고 반응 앱이 일반적으로 빌드되는 방식이 아닙니다.

노브를 프로그래밍 방식으로 제어할 수 있도록 함으로써 스토리를 시연 중인 구성 요소로만 분리할 수 있으며, 확인란과 같은 간단한 프레젠테이션 구성 요소의 경우와 같이 실제 상태 관리 메커니즘을 불투명하게 남길 수 있습니다. 체크박스 자체는 props를 가져오는 방법을 신경 쓰지 않고, redux에 연결될 수 있고, 부모가 setState 를 사용할 수도 있고, recompose에서 withState 를 사용할 수도 있고, props가 다음에 의해 제어될 수도 있습니다. 동화책 손잡이.

어쨌든 내가 말했듯이 나는 이것에 매우 익숙하므로 직관적 인 생각 만 공유합니다. 내가 오프베이스이고 이러한 종류의 순수한 상태 비저장 구성 요소를 처리하는 데 일반적으로 인정되는 "모범 사례"가 있는 경우 누군가 내가 따를 수 있는 좋은 예를 알려줄 수 있습니까?

안녕하세요 :)

추가하고 싶습니다. 내 구성 요소가 소품에서 모바일 레이아웃을 표시해야 하는지(또는 표시하지 않아야 하는지) 수신할 때 우연히 발견했으며, 내 목표는 뷰포트 변경 사항을 내 노브에 묶는 것이었고 정말 좋았을 것입니다 ;)

여기에 내 사용 사례를 추가하고 싶었고 @IanVS 처럼 콜백도 좋았을 것입니다(따라서 isMobile 소품을 토글하면 뷰포트 변경을 트리거할 수 있음)

여러 사람들이 손잡이 상태를 업데이트하는 방법에 관심을 표명한다고 들었습니다. 우리가 좋은 아키텍처에 대해 동의할 수 있다면 이것이 많은 사람들에게 가치가 있을 것이라고 생각합니다. 특히 이것은 사람들이 사용 여부를 선택할 수 있는 추가 기능이고 사용하지 않으려는 사람들에게 부정적인 영향을 미치지 않기 때문입니다.

@Hypnosphi , 이전 구현인 WDYT에 대해 이의가 있으셨나요?

이 문제를 계속 공개하려면 여기에서 댓글을 작성하세요. 나는 여전히 @Hypnosphi 가 이전에 여기에서 제안한 @igor-dv에 대해 무엇이라고 말했는지 궁금합니다.

제 생각에는 다양한 정보 소스를 도입하는 것이 아니라 구성 요소 상태에 대한 단일 정보 소스(노브)를 유지하도록 허용하는 것 같습니다. 내가 제안한 다른 모든 접근 방식(래퍼 구성 요소, 상태 추가 기능, 재구성)은 사실 또 다른 소스를 소개합니다. 내 체크박스 예제에서는 체크된 노브를 가질 수 없으며 래퍼 구성 요소가 체크된 소품을 제공하도록 허용할 수도 있습니다. 나는 노브 제어판을 구성 요소의 부모로 봅니다. 단, 현재 구성 요소에서 콜백을 가져올 수 없습니다. 이는 일종의 일방적이고 반응 앱이 일반적으로 빌드되는 방식이 아닙니다.

나에게 합리적으로 들린다. 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 제안은

이 기능이 있으면 좋을 것입니다.

"react hooks"와 같은 "destruct"는 어떻습니까?

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 의 개인 방법을 사용하여 해킹했습니다. 더 간단한 제안은 다음과 같은 작업을 수행하는 공식 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에 전적으로 동의합니다. 저는 스토리북을 좋아하지만 액션을 통해 노브를 업데이트하는 기능이 정말 그리워요. 제 경우에는 두 개의 개별 구성 요소 A와 B가 있지만 제 이야기 중 하나에서는 두 구성 요소를 모두 사용하여 구성을 보여주고 싶습니다. 그래서 AI를 변경할 때마다 B를 수정하고 그 반대도 마찬가지입니다.

내 설정(Angular 7)으로 @erickwilder 의 해킹을 시도했지만 노브 저장소를 업데이트하려고 할 때마다 다음 오류가 발생합니다.

오류: Angular Zone에 없을 것으로 예상되지만 실제로 있습니다!

어떻게든 이것을 Angular 외부에서 실행하려고 시도했지만 할 수 없었습니다... 최악의 시나리오에서는 A와 B의 래퍼가 될 세 번째 구성 요소 C를 만들 것입니다.

이 (반응, 각도, VUE, 아무것도)하지만 노브 부가 기능의 다시 렌더링에 프레임 워크 / 라이브러리에 관련되지 않는 @davidolivefarga @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
)

나는 이것이 공식적으로 지원되기를 정말로 원합니다.

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

이것은 현재 작동하지만 테스트된 요소의 props에 설정된 값에 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
    }
);

기본적으로 currentPage 노브의 최대 범위가 resultsCount 노브를 10씩 증가시킬 때 동적으로 업데이트되기를 희망하면서 이 작업을 시도했지만 각 노브의 초기 값으로 보입니다. 생성 시 캐시되고 후속 렌더링에서 내부 상태 값을 재정의하는 데 사용되지 않습니다. 나는이 증가 할 때 위의 코드로 resultsCount 내가 기대 10+에 의해 max 의 currentPage 기본 값에도 불구하고, 또한 1 증가 할을하지만 그 가치의 숙박 동일 변경된 값을 계산하는 데 사용됩니다( Math.ceil(resultsCount / childrenPerPage) - 1 로깅은 예상되는 새 값을 보여줍니다).

우리는 5.3(1월 초 릴리스)을 거의 끝내고 6.0(3월 말 릴리스)에 대한 노브 재작성을 조사하여 여러 가지 오래된 노브 문제를 해결할 것입니다. 이 작업을 수행할 수 있는지 알아보겠습니다! 기다려 주셔서 감사합니다!

@shilman 이 기능에 대해 매우 기대하고 있습니다 😄

저, @atanasster & @PlayMa256 은 이를 위한 기반을 한동안 작업해 왔습니다. 제대로 하려면 몇 번 더 반복해야 하지만 6.0.0에서 100%를 달성하고 스토리북의 데이터 및 반응성에 혁명을 일으킬 수 있다고 매우 확신합니다.

혁명을 일으키다? 뜨거운 망할 digity. 그만 놀려, 내 몸은 준비됐어

모달의 경우 +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을 사용하여 그 문제를 해결했습니다. 나는 Angular와 함께 스토리 북을 사용하고 있습니다.

`
.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가 아직 공식적으로 지원되는지 확신할 수는 없지만 가능합니다. 저는 @tmeasday 와

• [ ] 스토리 컨텍스트에 updateArgs 를 추가하시겠습니까?
• [ ] 스토리에서 호출되는 콜백에 스토리 컨텍스트를 사용할 수 있도록 하시겠습니까? ( this.context?.updateArgs(....) )

Controls에 관심이 있지만 어디서부터 시작해야 할지 모르는 사람을 위해 새로운 CRA 프로젝트에서 실제 데모로 이동하는 빠르고 간단한 단계별 연습을 만들었습니다. 확인 해봐:

=> CRA 및 TypeScript가 포함된 스토리북 컨트롤

Controls README에는 "knob to controls" 마이그레이션 문서도 있습니다.

=> 애드온 노브에서 어떻게 마이그레이션합니까?

안녕 여러분!
임시 솔루션으로 내 앱 다음 코드에서 사용했습니다.

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 그룹 ID를 추가해야 합니다.

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

이것이 이 목적에 가장 적합한 API인지는 모르겠지만 작동해야 합니다. 모노레포의 예:

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 이벤트). 그러나 사용자가 문자를 입력할 때마다 구성 요소가 포커스를 잃는 문제가 발생했습니다. args를 업데이트할 때마다 스토리를 새로 고치거나 다시 렌더링하기 때문일까요?

제어된 텍스트 입력이 있는 구성 요소에 대해 인수/컨트롤을 사용하는 데 권장되는 다른 방법이 있습니까?

이것은 6.0.0-rc.13이었습니다.

@jcq 재현으로 새 문제를 만들 수 있습니까? 이것은 useArgs 의 주요 사용 사례는 아니었지만 확실히 지원하고 싶은 사례이므로 기꺼이 자세히 살펴보겠습니다.

@shilman 문제 없음 — 여기에 새로운 문제가 있습니다.
https://github.com/storybookjs/storybook/issues/11657

또한 잘못된 동작이 문서에서는 표시되지만 일반 캔버스 모드에서는 올바르게 작동한다는 점을 분명히 했어야 했습니다.

Observable을 사용하여 그 문제를 해결했습니다. 나는 Angular와 함께 스토리 북을 사용하고 있습니다.

`
.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 변경했습니다.

나는 이것을 아직 시도하지 않았지만(지금은 이전 버전의 스토리북에 고정되어 있음) 이 문제를 지금 종료할 수 있는 것 같습니다. args/controls에 대한 훌륭한 작업에 감사드립니다!