Controls: JSX support

[shilman]

Currently React nodes, such as children, show a JSON object editor by default. They should show a text editor instead that supports full JSX editing.

[ronny1020]

I just found a walkaround before this issue is supported. It can be set individually in the preview.tsx file while the ReactNode prop shares the same name as children. should work properly.

// .storybook/preview.tsx

import { Preview } from '@storybook/react';
import '../src/index.css';

const OVERWRITE_REACT_NODE_TO_STRING = {
  control: 'text',
  description: 'Overwritten ReactNode type object for Storybook.',
} as const;

const preview: Preview = {
  argTypes: {
    children: OVERWRITE_REACT_NODE_TO_STRING,
    anyOtherProp: OVERWRITE_REACT_NODE_TO_STRING,
  },
 //  ...othersettings
};

export default preview;

It can also be set in the component.stories.tsx file if the ReactNode prop name is only used in a specific component.

[thumbsupep]

@ronny1020 that workaround still doesn't support interpolating jsx from the text control

[ronny1020]

@ronny1020 that workaround still doesn't support interpolating jsx from the text control

It's just a walkaround to show text control instead of the object editor.