question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[Knob addon] do not work and dissapear when selecting other component

See original GitHub issue

Describe the bug I want to use knob on a component. I see the knob when I ferst open the storybook.

  1. My first issue is that I change the storybook field, and I do not see the change reflected on the component
  2. When I go to other version of my component, and go back again to the component where I have the knob enabled, it is not there anymore.

To Reproduce This is the code of my story

import React from "react";
import { withKnobs, text } from "@storybook/addon-knobs";

import CardItem from "./CardItem";

export default {
  component: CardItem,
  title: "app/components/CardItem/CardItem"
};

const cardItem = {
  imageurl: "https://media1.giphy.com/media/26tPtg8M3i6DPSSt2/200w.gif",
  imagealt: "react-gif",
  title: text("Title", "Title number 1"),
  body: "This is the body",
  firstButtonText: "See",
  secondButtonText: "Help"
};
const props_no_body = { ...cardItem, body: null };
const props_no_second_button_text = { ...cardItem, secondButtonText: null };

export const Full = () => <CardItem {...cardItem} />;
Full.story = {
  name: "Full Card, all props",
  decorators: [withKnobs]
};

export const no_body_text = () => <CardItem {...props_no_body} />;

export const no_second_button_text = () => (
  <CardItem {...props_no_second_button_text} />
);

My configurations

$ cat .storybook/addons.js 
import '@storybook/addon-actions/register';
import '@storybook/addon-links/register';
import '@storybook/addon-knobs/register';

$ cat .storybook/config.js 
import { configure } from '@storybook/react';
configure(require.context('../src', true, /\.stories\.js$/), module);

$ cat package.json |grep storybook
    "@storybook/addon-knobs": "^5.2.8",
    "@storybook/addon-actions": "^5.2.8",
    "@storybook/addon-links": "^5.2.8",
    "@storybook/addon-storyshots": "^5.2.8",
    "@storybook/addons": "^5.2.8",
    "@storybook/react": "^5.2.8",
    "storybook-cartesian": "^2.1.1",
    "storybook": "start-storybook -p 9009 -s public",
    "build-storybook": "build-storybook -s public"

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Comments:6 (3 by maintainers)

github_iconTop GitHub Comments

1reaction
gonzaloamadiocommented, Dec 12, 2019

@shilman I have sent you an invitation to my repo called “fuse-react”. Here is the link just in case: https://github.com/gonzaloamadio/fuse-react/invitations. Check the branch called ‘gonza-dev’

0reactions
gonzaloamadiocommented, Dec 16, 2019

Yes @shilman , it is working. I leave my working example just in case. Thank you!

import React from "react";
import { withKnobs, text } from "@storybook/addon-knobs";
import CardItem from "./CardItem";

export default {
  component: CardItem,
  title: "app/components/CardItem/CardItem"
};

const cardItem = () => ({
  imageurl: "https://media1.giphy.com/media/26tPtg8M3i6DPSSt2/200w.gif",
  imagealt: "react-gif",
  title: text("Title", "Elongacion de columna"),
  body: "Este es un ejercicio que sirve para estirar los lumbares.",
  firstButtonText: "Ver",
  secondButtonText: "Ayuda"
});

const props_no_body = { ...cardItem(), body: null };

export const Full = () => <CardItem {...cardItem()} />;
Full.story = {
  name: "Full Card, all props",
  decorators: [withKnobs]
};

export const no_body_text = () => <CardItem {...props_no_body} />;
Read more comments on GitHub >

github_iconTop Results From Across the Web

Addons panel not showing - but knobs are still working(?) #8383
I am using the knobs addon for my StencilJs project and it is technically working (if i set the component prob within the...
Read more >
react storybook addon knobs not showing - Stack Overflow
I was able to fix this simply by hitting the D key, which changes the addon panel orientation. (You can also do this...
Read more >
Kodi not working? How to fix Kodi problems (Updated for 2022)
Is Kodi not working for you? In this article we'll be explaining how to fix Kodi problems including crashing, and videos that won't...
Read more >
RoboForm for Windows Version News
* Miscellaneous bug fixes. Version 9.2.7 Apr 20, 2022 * Fixed attaching to QuickBooks, MSN, MS Money and other MSHTML-based applications did not...
Read more >
Multiple Choice for Anki - AnkiWeb
Does not work on MacOS Monterey and Anki version 2.1.48. ... The you can select the pegs and then touch in any other...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found