Storybook: A interface do usuário do objeto Knobs desaparece ao alterar os valores

Criado em 25 fev. 2020 · 2Comentários · Fonte: storybookjs/storybook

Descreva o bug

Ao alterar os valores de um object renderizado por meio de @storybook/addon-knobs , a IU desaparece.

Reproduzir

Crie um object usando botões de adição
npm run storybook
Altere os valores de object na guia de botões do Storybook
Observe que object desaparece

Comportamento esperado

Os valores object devem ser editáveis de dentro da interface do usuário do Storybook sem que o botão desapareça.

Capturas de tela

storybook-knobs-object-bug

Partes de codigo

Exemplo de trabalho aqui: https://github.com/benjarwar/storybook-knobs-object-test

Clone o repo
npm i
npm run storybook

Sistema:

Environment Info:

  System:
    OS: macOS Mojave 10.14.6
    CPU: (12) x64 Intel(R) Core(TM) i7-8850H CPU @ 2.60GHz
  Binaries:
    Node: 8.15.1 - ~/.nvm/versions/node/v8.15.1/bin/node
    Yarn: 1.21.1 - ~/.nvm/versions/node/v8.15.1/bin/yarn
    npm: 6.13.7 - ~/.nvm/versions/node/v8.15.1/bin/npm
  Browsers:
    Chrome: 79.0.3945.130
    Firefox: 72.0.1
    Safari: 13.0.5
  npmPackages:
    @storybook/addon-actions: ^5.3.14 => 5.3.14 
    @storybook/addon-knobs: ^5.3.14 => 5.3.14 
    @storybook/addon-links: ^5.3.14 => 5.3.14 
    @storybook/addons: ^5.3.14 => 5.3.14 
    @storybook/react: ^5.3.14 => 5.3.14

knobs question / support

Fonte

benjarwar

👍1

Comentários muito úteis

O problema aqui é que você não está criando o botão de objeto dentro da função de história. Se você mudar seu exemplo para algo assim, estará tudo pronto:

export const Ctas = () => {

  const value = object(label, defaultValue);

  return (
    <div>
      <div>
        <h3>CTA</h3>
        <Cta href="#primary-cta" type="Primary">
          {text("Primary CTA Label", "Primary CTA")}
          {value.foo}
        </Cta>
      </div>
    </div>
  );
};

jonspalmer em 26 fev. 2020

👍5

Todos 2 comentários

O problema aqui é que você não está criando o botão de objeto dentro da função de história. Se você mudar seu exemplo para algo assim, estará tudo pronto:

export const Ctas = () => {

  const value = object(label, defaultValue);

  return (
    <div>
      <div>
        <h3>CTA</h3>
        <Cta href="#primary-cta" type="Primary">
          {text("Primary CTA Label", "Primary CTA")}
          {value.foo}
        </Cta>
      </div>
    </div>
  );
};

jonspalmer em 26 fev. 2020

👍5

Ah, obrigado @jonspalmer. Isso realmente funcionou e faz sentido.

benjarwar em 26 fev. 2020

Esta página foi útil?

0 / 5 - 0 avaliações