storybookjs / addon-jsx Goto Github PK
View Code? Open in Web Editor NEWThis Storybook addon show you the JSX / template of the story
Home Page: https://storybooks-addon-jsx.netlify.com
License: MIT License
This Storybook addon show you the JSX / template of the story
Home Page: https://storybooks-addon-jsx.netlify.com
License: MIT License
Is there currently a way to use this with TypeScript
? I know that there isn't a @types
package, but I'm wondering if anyone has a declaration file that they're successfully using. I'm currently getting the error [ts] Property 'addWithJSX' does not exist on type 'Story'.
When you use an arrow function at some point of your story, it is at first called with undefined parameters, then with the correct one.
The following example works with a normal .add('Base')
, or when doing {option => option && <div key={option.name}>{option.label}</div>}
.
const Comp = ({ elements, children }) => (
<div>
{elements.map(children)}
</div>
);
const options = [
{ name: 'register', label: 'Registered' },
{ name: 'done', label: 'Delivered' },
];
export default FelaProvider =>
storiesOf('Test', module).addWithJSX('Base', () => (
<Comp elements={options}>
{option => <div key={option.name}>{option.label}</div>}
</Comp>
));
I'm not 100% sure, but I think I also had this problem when using arrow function to declare onChange props, or stuff like that.
The third argument for addWithJSX
is not working, even on the online storybook: https://storybooks-addon-jsx.netlify.com/?path=/story/simple-test--no-children-no-options
storybook/react v5.2.1
react v16.9.0
storybook-addon-jsx v7.1.6
When using options = { showFunctions: false, displayName: "MyComponent" }
, function bodies are shown. Removing the displayName option means function bodies are hidden as intended.
storiesOf("MyComponent", module)
.addDecorator(jsxDecorator)
.add(
"default",
() => <MyComponent onSubmit={action("message")} />,
{ jsx: { showFunctions: false, displayName: "MyComponent" } }
);
<MyComponent
onSubmit={function noRefCheck() {}}
/>
<MyComponent
onSubmit={function actionHandler() { /* .... some long function body .... */ }}
/>
Hi!
Is there any way to prevent the react-element-to-jsx-string
to breaking lines on an array value props? Bellow follows an example:
Input code
<Row>
<Cell>
<Block>[1, 2, 3, 4, 6, 12]</Block>
</Cell>
<Cell size={[8, 2, 3, 4, 6, 6]}>
<Block>[8, 2, 3, 4, 6, 6]</Block>
</Cell>
<Cell size={[null, null, null, null, null, 6]}>
<Block>[1, 2, 3, 4, 6, 6]</Block>
</Cell>
<Cell size={[2]}>
<Block>[2, 2, 3, 4, 6, 12]</Block>
</Cell>
</Row>
Output formatted code
<Row>
<Cell>
<Block>
[1, 2, 3, 4, 6, 12]
</Block>
</Cell>
<Cell
size={[
8,
2,
3,
4,
6,
6
]}
>
<Block>
[8, 2, 3, 4, 6, 6]
</Block>
</Cell>
<Cell
size={[
null,
null,
null,
null,
null,
6
]}
>
<Block>
[1, 2, 3, 4, 6, 6]
</Block>
</Cell>
<Cell
size={[
2
]}
>
<Block>
[2, 2, 3, 4, 6, 12]
</Block>
</Cell>
</Row>
When adding a prop as boolean false it does not show in the pane.
<Component propName={false} />
In output you will just see <Component />
I was able to get typescript-addon-jsx
working with .addDecorator(jsxDecorator)
, but I'm having some trouble using the .addWithJSX
syntax. I'm getting the following TS error:
ERROR in [at-loader] ./src/Button/Button.story.tsx:18:9
TS2349: This expression is not callable.
Not all constituents of type 'string | ClientApiReturnFn<ReactElement<unknown, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)> | null) | (new (props: any) => Component<any, any, any>)>>' are callable.
Type 'string' has no call signatures.
I'm using [email protected]
and tried installing both @types/storybook-addon-jsx
as well as @types/storybook__react
, but I get the same TS error.
If I navigate to the types declaration of .addWithJSX()
that takes me to node_modules/.../@storybook/addons/dist/types.d.ts
, which shows:
export interface StoryApi<StoryFnReturnType = unknown> {
kind: string;
add: (storyName: string, storyFn: StoryFn<StoryFnReturnType>, parameters?: Parameters) => StoryApi<StoryFnReturnType>;
addDecorator: (decorator: DecoratorFunction<StoryFnReturnType>) => StoryApi<StoryFnReturnType>;
addParameters: (parameters: Parameters) => StoryApi<StoryFnReturnType>;
[k: string]: string | ClientApiReturnFn<StoryFnReturnType>;
}
Seems like the line [k: string]: string...
is catching the .addWithJSX
call, so I'm not sure the declaration merge (which I assume is what @types/storybook-addon-tsx
is doing) worked as intended, but does anyone know if it's possible to use .addWithJSX()
with Typescript? If not, is there a way to pass in options to the addon when using the decorator syntax?
Thanks!
When i put some functions on the Component, the Whole function including __WEBPACK_IMPORTED_MODULE...
shows on jsx addons.
even with @storybook/addon-actions
, JSX preview has shown as
<Calendar
onSelect={function action() {
for (var _len = arguments.length, _args = Array(_len), _key = 0; _key < _len; _key++) {
_args[_key] = arguments[_key];
}
var args = _args.map(_util.prepareArguments);
var channel = _addons2.default.getChannel();
var id = (0, _v2.default)();
channel.emit(_.EVENT_ID, {
id: id,
data: { name: name, args: args }
});
}}
/>
This is not what I expected... but is this intended?
Hi,
Not sure if anyone else has encounter this issue but in my JSX panel, I'm getting the compiled HTML code instead of JSX. I've disabled all other addons in case one of them is clashing with this addon but the issue still persist. I've included my code below but tried to remove any extra fluff—however, let me know if you need more info!
Packages information
"@storybook/addons": "^5.0.3",
"@storybook/react": "^5.1.9",
"storybook-addon-jsx": "^7.1.2",
<button
className="and-button and-button--square"
onClick={function actionHandler() {
var channel = _addons.addons.getChannel();
var id = (0, _v["default"])();
var minDepth = 5; // anything less is really just storybook internals
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
var actionDisplayToEmit = {
id: id,
count: 0,
data: {
name: name,
args: args
},
options: Object.assign({}, actionOptions, {
depth: minDepth + (actionOptions.depth || 3)
})
};
channel.emit(_constants.EVENT_ID, actionDisplayToEmit);
}}
type="button"
>
Button
</button>
Here's what my story looks like:
import React from 'react';
import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions';
import { text, select } from '@storybook/addon-knobs';
import manifest from '../../manifest';
import AndButton from './dist/AndButton';
import AndButtonReadme from './README.md';
const buttonSchema = manifest.button;
storiesOf('Button', module).addWithJSX('with text', () => {
const { colorOptions, radiusOptions } = buttonSchema.props;
const colorKnob = select('Color', colorOptions, 'default');
const radiusKnob = select('Border Style', radiusOptions, 'square');
const textKnob = text('Text', 'Button');
return (
<AndButton radius={radiusKnob} onClick={action('clicked')} color={colorKnob}>
{textKnob}
</AndButton>
);
});
And my config.js
file:
import React from 'react';
import { configure, addDecorator, setAddon } from '@storybook/react';
import { withKnobs } from '@storybook/addon-knobs';
import JSXAddon from 'storybook-addon-jsx';
setAddon(JSXAddon);
const req = require.context('../components', true, /.stories.(js|jsx)$/);
addDecorator(withKnobs);
function loadStories() {
req.keys().forEach(filename => req(filename));
}
configure(loadStories, module);
Also, my Button component itself (minus the custom functions and imports). The button renders fine.
const AndButton = (props) => {
const {
color, children, className, onClick, radius,
} = props;
const classes = classnames(
baseClass,
compileClassDefinitions(color, colorOptions),
compileClassDefinitions(radius, radiusOptions),
className,
);
return (
<button className={classes} onClick={onClick} type="button">
{children}
</button>
);
};
For anyone trying to make addon-jsx
work along enzyme
and Storyshots
, you may run into this error when running Storyshots
tests:
Invariant Violation: ReactShallowRenderer render(): Shallow rendering works only with custom components, but the provided element type was `symbol`.
The issue is that the component returned by the typical const component = story.render(context);
line in a Storyshot test file is no longer just the component in question, but a fragment component with two children: the original component, and the JSX additions. When enzyme
sees this, it complains with the error above. Plus, we don't want to write the JSX addons into a Jest snapshot.
So, in my Storyshort test file, I added the skip
option for addon-jsx
:
import initStoryshots from "@storybook/addon-storyshots";
import { shallow } from "enzyme";
initStoryshots({
test: ({ story, context }) => {
const component = story.render(context, { jsx: { skip: 1 } });
const html = shallow(component).html();
expect(html).toMatchSnapshot();
}
});
Which made the tests pass again.
warning.js:33 Warning: validateDOMNesting(...): <button> cannot appear as a descendant of <button>.
in button (created by Title)
in CopyToClipboard (created by Title)
in div (created by Title)
in Title
in button (created by DownPanel)
in div (created by DownPanel)
in div (created by DownPanel)
in DownPanel (created by Container(DownPanel))
in Container(DownPanel) (created by Layout)
in div (created by Layout)
in div (created by Pane)
in Pane (created by SplitPane)
in div (created by SplitPane)
in SplitPane (created by Layout)
in div (created by Pane)
in Pane (created by SplitPane)
in div (created by SplitPane)
in SplitPane (created by Layout)
in div (created by Layout)
in Layout (created by Container(Layout))
in Container(Layout)
in div
This happens because of nested <button>
:
Hey,
Can anyone provide a working TypeScript implementation with these packages?
"storybook-addon-jsx": "7.0.1",
"@types/storybook-addon-jsx": "5.4.2",
"@storybook/react": "^5.0.3",
It's a game of whack-a-mole with all the errors this produces, ultimately I cannot make this work:
import React from 'react';
import { storiesOf } from '@storybook/react';
import { withKnobs, text } from '@storybook/addon-knobs';
import { jsxDecorator } from 'storybook-addon-jsx';
storiesOf('Chrome', module)
.addDecorator(jsxDecorator) // error here
.addDecorator(withKnobs)
.add('Default', () => <Story />);
TS2345: Argument of type '(storyFn: RenderFunction, parameters: JSXParameters) => (ComponentClass<{}, any> & VueComponent) | (FunctionComponent<{}> & VueComponent) | (Element & VueComponent) | (Renderable[] & VueComponent)' is not assignable to parameter of type 'StoryDecorator'.
Types of parameters 'parameters' and 'context' are incompatible.
Type '{ kind: string; story: string; }' is missing the following properties from type 'JSXParameters': id, parameters```
I have tried using it as as addon instead, but that gives different errors.
Anyone got it working?
I'd like to suggest that a contributors.md
be added to this project. In particular, I'm interested in how local development should be done.
e.g. I haven't had any luck working around multiple @storybook/addons
when linking my local addon-jsx repo to my local storybook project.
Switch from travis to circleCI
Hey! awesome plugin, Can you join us in the storybook slack?
https://storybooks-slackin.herokuapp.com/
That way we can keep you updated on the upcoming 3.0.0 release!
❤️ storybook team
React v16.13.1
Storybook v5.3
storybook-addon-jsx v7.2.3
After clicking on the jsx tab i get this warning
Warning: Each child in a list should have a unique "key" prop.
In file: src/register.tsx on line 30
render: ({ active }) => <JSX key="addon-jsx" active={active} ob={ob} />
changing to
render: ({ active }) => <JSX key={`addon-jsx-`${+ active}} active={active} ob={ob} />
Solved the waring message. But when changing story when jsx tab is active the warning is showing again.
FYI: i have tested this changing the file in my node_module folder
When we receive a array of element, right now, it's throw an error.
We should handle every element of the array separately and then concat them in the JSX panel.
I'm curious b/c this addon requires switching from add
to addWithJsx
.
Hello
I've tried to use addon-jsx
for story that uses React.Fragment like this:
.addWithJSX('bubble with components inside of it', () => (
<Fragment>
<MyComponent props />
<MyComponent otherProps/>
</Fragment>
));
and it fails with error:
Cannot convert a Symbol value to a string
at exports.default (http://localhost:9001/static/preview.bundle.js:85619:17)
at exports.default (http://localhost:9001/static/preview.bundle.js:81301:49)
at exports.default (http://localhost:9001/static/preview.bundle.js:85518:39)
at reactElementToJsxString (http://localhost:9001/static/preview.bundle.js:85494:35)
at http://localhost:9001/static/preview.bundle.js:85400:50
at mapSingleChildIntoContext (http://localhost:9001/static/preview.bundle.js:15121:26)
at traverseAllChildrenImpl (http://localhost:9001/static/preview.bundle.js:14994:5)
at traverseAllChildren (http://localhost:9001/static/preview.bundle.js:15065:10)
at mapIntoWithKeyPrefixInternal (http://localhost:9001/static/preview.bundle.js:15141:3)
at Object.mapChildren [as map] (http://localhost:9001/static/preview.bundle.js:15163:3)
It works perfectly once I replace <Fragment>
with plain <div>
.addWithJSX(
'With Icon',
() => (
<ControlledWrapper defaultValue="">
{(value, onChange) => (
<div>
<RawTextArea
name="textarea"
value={value}
onChange={onChange}
icon="truck"
label="Commentaires livraison"
/>
<div style={{ width: '340px' }}>
<RawTextArea
mobile
name="textarea"
value={value}
onChange={onChange}
icon="truck"
label="Commentaires livraison"
/>
</div>
</div>
)}
</ControlledWrapper>
),
{ skip: 1 }
)
It doesn't work when the component is a function :
export default ({ title, onConfirm, onCancel, placement, children }: Props) => (
<PopConfirm
title={title}
onConfirm={onConfirm}
onCancel={onCancel}
placement={placement}
okText="OUI"
cancelText="NON"
>
{children}
</PopConfirm>
);
Send in the JSX panel :
<function (_ref) {
var title = _ref.title,
onConfirm = _ref.onConfirm,
onCancel = _ref.onCancel,
placement = _ref.placement,
children = _ref.children;
return _react2.default.createElement(
_popconfirm2.default,
{
title: title,
onConfirm: onConfirm,
onCancel: onCancel,
placement: placement,
okText: 'OUI',
cancelText: 'NON',
__source: {
fileName: _jsxFileName,
lineNumber: 14
}
},
children
);
} title='Supprimer la ligne ?'
onCancel={...}
onConfirm={...}>
<button>
Confirm
</button>
</function (_ref) {
var title = _ref.title,
onConfirm = _ref.onConfirm,
onCancel = _ref.onCancel,
placement = _ref.placement,
children = _ref.children;
return _react2.default.createElement(
_popconfirm2.default,
{
title: title,
onConfirm: onConfirm,
onCancel: onCancel,
placement: placement,
okText: 'OUI',
cancelText: 'NON',
__source: {
fileName: _jsxFileName,
lineNumber: 14
}
},
children
);
}>
Let's merge this into the monorepo
I'm running into an issue with this addon when I run build-storybook
, it's giving me
Building storybook ...
Failed to build the storybook
static/preview.89bc50f3418f0babaff2.bundle.js from UglifyJs
Invalid assignment [static/preview.89bc50f3418f0babaff2.bundle.js:44049,34]
Merely having this line import JSXAddon from 'storybook-addon-jsx'
in stories/index.js
causes this to happen... Any suggestions?
The package.json
for storybook-addon-jsx
has a dependency on "react": "^15.5.4"
, so it installs its own version of React when the parent project is using React 16.
Is there anything in this addon that's incompatible with React 16? Could the dependency
on React be changed to a peerDependency
, and have its range updated to support all the newness?
import React from 'react';
import { createComponent } from 'react-fela';
import { storiesOf } from '@kadira/storybook';
import { ResponsiveFooter } from '../src/components/footer/responsiveFooter';
import { type Theme } from '../src/components/theme';
import { AppBody } from '../src/components/layout/index';
const dummyFunction = () => {};
const Page = createComponent(
({ theme }: { theme: Theme }) => ({
height: 300,
width: '100%',
justifyContent: 'flex-end',
border: theme.border,
}),
AppBody
);
export default FelaProvider =>
storiesOf('Responsive footer', module)
.addDecorator(FelaProvider)
.addWithJSX(
'Desktop',
() => (
<Page>
<ResponsiveFooter
leftButtons={[{ label: 'Annuler', icon: 'close', onClick: dummyFunction }]}
rightButtons={[
{
label: 'Enregistrer',
icon: 'save',
onClick: dummyFunction,
raised: true,
},
{
label: 'Envoyer',
icon: 'send',
onClick: dummyFunction,
primary: true,
raised: true,
},
]}
/>
</Page>
),
{ skip: 1 }
)
.addWithJSX('Mobile', () => (
<ResponsiveFooter
mobile
leftButtons={[{ label: 'Annuler', icon: 'close', onClick: dummyFunction }]}
rightButtons={[
{
label: 'Enregistrer',
icon: 'save',
onClick: dummyFunction,
raised: true,
},
{ label: 'Envoyer', icon: 'send', onClick: dummyFunction, primary: true },
]}
/>
));
The syntax highlighting of the JSX panel doesn't seem to take effect in some cases. I still need to figure it out why :)
Hi there, thank you for making this wonderful addon for storybook, it has come in handy!
With this input:
<div data={`{"bar"}`} />
I get this output in the addon:
<div data="{"bar"}" />
Is it possible to display this the same way as the input?
Thanks in advance!
Deps:
"@storybook/addon-actions": "^4.1.11",
"@storybook/addon-info": "4.1.11",
"@storybook/addon-knobs": "4.1.11",
"@storybook/addon-options": "4.1.11",
"@storybook/cli": "4.1.11",
"@storybook/react": "4.1.11",
"storybook-addon-jsx": "^7.0.1"
Upped from 6 version to 7 and catch error.
Only when I add addon-jsx, I have this problem.
button.tsx
import './button.style.css';
import * as React from 'react';
interface Props {
/**
* Text for the button
*/
text: String;
}
export const ButtonNew = ({ text }: Props) => {
const [value, setValue] = React.useState('...');
console.log(value);
return (
<div>
<div className="green">
{text}
<input type="text" value={value} onChange={({ target }) => setValue(target.value)} />
</div>
</div>
);
};
ButtonNew.defaultProps = {
text: 'ok',
};
button.stories.tsx
import * as React from 'react';
import { setAddon, storiesOf } from '@storybook/react';
import JSXAddon from 'storybook-addon-jsx';
setAddon(JSXAddon);
import { ButtonNew } from '../src/components/button/button';
storiesOf('Administrator/Button', module).addWithJSX('custom', () => <ButtonNew />);
Did you have the same issue?
Accessing nonexistent addons channel, see https://storybook.js.org/basics/faq/#why-is-there-no-addons-channel
Error: Accessing nonexistent addons channel, see https://storybook.js.org/basics/faq/#why-is-there-no-addons-channel
at AddonStore.getChannel (http://localhost:9001/static/preview.bundle.js:25606:15)
at Object.addWithJSX (http://localhost:9001/static/preview.bundle.js:128442:36)
at Object.api.(anonymous function) [as addWithJSX] (http://localhost:9001/static/preview.bundle.js:126362:17)
at Object.<anonymous> (http://localhost:9001/static/preview.bundle.js:185918:46)
at Object._typeof (http://localhost:9001/static/preview.bundle.js:185921:30)
at __webpack_require__ (http://localhost:9001/static/preview.bundle.js:678:30)
at fn (http://localhost:9001/static/preview.bundle.js:88:20)
at webpackContext (http://localhost:9001/static/preview.bundle.js:162996:9)
at http://localhost:9001/static/preview.bundle.js:109747:12
at Array.forEach (<anonymous>)
When I try to wrap a functional component with React.memo
I get <[object Object] />
instead of the component name.
The output without React.memo
is:
The output with React.memo
is:
storiesOf('My component', module)
.addDecorator(jsxDecorator)
.add('default', () => (
<MyComponent>
<span>Some text content</span>
</MyComponent>
));
Loving this addon, so thank for that! I am noticing a warning in my browser console when I have this addon installed & enabled, and it disappears if I don't have this addon registered in my Storybook addons.js
:
Looks like the warning is coming from Emotion, used by @storybook/theming
. I downgraded to v6 and still saw this warning.
"@storybook/react": "^5.0.11",
"storybook-addon-jsx": "^7.1.2"
As soon as I add the addon, I get this error message. If you look at the example component that I have, it is a valid React component.
Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in.
// addons.js
import 'storybook-addon-jsx/register';
// config.js
import {addDecorator, configure} from '@storybook/react';
import {jsxDecorator} from 'storybook-addon-jsx';
addDecorator(jsxDecorator);
const loadStories = () => {
const req = require.context('../stories', true, /\.stories\.js$/);
req.keys().forEach(filename => req(filename));
};
configure(loadStories, module);
// my-component.js
import PropTypes from 'prop-types';
import React from 'react';
export const MyComponent = (props) => (
<div>{props.greeting}</div>
);
MyComponent.propTypes = {
greeting: PropTypes.string
};
MyComponent.defaultProps = {
greeting: 'Hello, world.'
};
// my-component.stories.js
import {MyComponent} from '../src/my-component';
import React from 'react';
import {storiesOf} from '@storybook/react';
storiesOf('MyComponent', module)
.add('with default greeting', () => (
<MyComponent/>
))
.add('with custom greeting', () => (
<MyComponent greeting={'Hello, Rodo!'}/>
));
https://github.com/storybooks/addon-jsx/blob/master/src/index.js#L45
I could help with it, if you approve the realization. Below my variant of realization.
Define let defaultOptions
with current defaults in index.js
Add exported method, for example configure
, to index.js.
cofigure
will receive an argument and simply assign it to the defaultOptions
For future flexibility configure
may accept object with keys, that define config part.
Like this configure({jsxOptions: { hereOptions }})
The line: configure(loadStories, module);
Where i should get a loadStories
variable?
I can't seem to get Storyshots to work with this addon. The error is as follows when running npm test
:
FAIL src/__tests__/storyshots.test.js
● Test suite failed to run
TypeError: (0 , _react2.storiesOf)(...).addWithJSX is not a function
at Object.<anonymous> (src/__stories__/test.stories.js:12:40)
at node_modules/@storybook/addon-storyshots/dist/require_context.js:39:24
at Array.forEach (<anonymous>)
at requireModules (node_modules/@storybook/addon-storyshots/dist/require_context.js:34:9)
at node_modules/@storybook/addon-storyshots/dist/require_context.js:48:7
at Array.forEach (<anonymous>)
at requireModules (node_modules/@storybook/addon-storyshots/dist/require_context.js:34:9)
at Function.newRequire.context (node_modules/@storybook/addon-storyshots/dist/require_context.js:90:5)
at evalmachine.<anonymous>:23:19
at runWithRequireContext (node_modules/@storybook/addon-storyshots/dist/require_context.js:102:3)
at testStorySnapshots (node_modules/@storybook/addon-storyshots/dist/index.js:120:35)
at Object.<anonymous> (src/__tests__/storyshots.test.js:24:31)
Storyshots works just fine if I use Storybook's add()
instead of addWithJSX()
.
The only configuration I have related to addon-jsx
is in .storybook/config.js
:
import { setOptions } from '@storybook/addon-options';
import JSXAddon from 'storybook-addon-jsx';
setAddon(JSXAddon);
configure(loadStories, module);
And storyshots configured in storyshots.test.js
as:
import initStoryshots from '@storybook/addon-storyshots';
initStoryshots();
And this is my sample story:
import * as React from 'react';
import { storiesOf } from '@storybook/react';
storiesOf('test', module).addWithJSX('test1', () => <div>hi</div>);
Using in a Typescript project, Typescript complains that addWithJSX can only take two arguments.
The type definition of addWithJSX
in @types/storybook-addon-jsx
is missing the third parameter (options).
We have a component that only makes sense if it is used as a class, because we need to demonstrate how it handles state.
I can't find a way of letting the JSX output of my story show the entire class. If I return the class in .addWithJsx, the component simply won't show up at all.
Any ideas?
Hi, Thanks for the awesome plugin.
Currently I am using typescript + docgen to get a prop table for my components. To do this I have to export my component as default export + non default:
export function Component() {}
export default Component;
when I add export function Component() {}
i get the following error from react 16.7.0-alpha
storiesOf('BasicElements/Button test', module)
.addWithJSX('default', () => (
<div style={{ backgroundColor: '#f9f9f9' }}> {/* level 1 -- should be skipped */}
<div style={{ padding: 15 }}> {/* level 2 -- should be skipped */}
<Button tint="primary" >Button</Button> {/* level 3 -- print JSX to TAB */}
</div>
<div style={{ padding: 15 }}> {/* level 2 -- should be skipped */}
<Button tint="secondary" >Button</Button> {/* level 3 -- print JSX to TAB */}
</div>
</div>
), { skip: 2 });
now the JSX tab in storybook is empty
expected to find in JSX tab:
<Button tint="primary" >Button</Button>
<Button tint="secondary" >Button</Button>
I can't get this addon to work with knobs addon.
This
storiesOf('NavKnobs', module)
.add('without title', () =>{
const name = text('Title', 'Page title');
return (<Nav logo={logo}>
<Link to="/">Home</Link>
</Nav>)
})
// and
storiesOf('NavKnobs', module)
.addWithJSX('without title', () =>{
return (<Nav logo={logo}>
<Link to="/">Home</Link>
</Nav>)
})
both work.
But this doesn't
storiesOf('NavKnobs', module)
.addWithJSX('without title', () =>{
const name = text('Title', 'Page title');
return (<Nav logo={logo}>
<Link to="/">Home</Link>
</Nav>)
})
Knobstore is null (after page reload)
Story definition:
<Checkbox
onChange={onChange}
value="yes"
label="Check the Box"
/>
Storybook's JSX:
<Checkbox
checked={false}
color={undefined}
id={undefined}
label="Check the Box"
name={undefined}
onChange={action('onChange')}
value="yes"
/>
Looking for a solution I noticed a PR that just got merged in react-element-to-jsx-string, but react-element-to-jsx-string is locked to ^14.0.3.
It allows for filterProps
to be a function, so one could exclude props where the value is undefined
.
14.3.0 was just released. There are no breaking changes since 14.0.3, but features that might benefit the community.
Hi,
I'm using the latest version of your module (very useful by the way) and i have the following warning from propTypes.
Warning: Failed prop type: Invalid prop `panels.kadira/jsx/panel.title` supplied to `AddonPanel`.
in AddonPanel (created by Container(AddonPanel))
in Container(AddonPanel) (created by addonPanel)
in addonPanel (created by Layout)
in div (created by Styled(div))
in Styled(div) (created by Layout)
in div (created by Pane)
in Pane (created by SplitPane)
in div (created by SplitPane)
in SplitPane (created by Layout)
in div (created by Pane)
in Pane (created by SplitPane)
in div (created by SplitPane)
in SplitPane (created by Layout)
in Layout (created by Layout)
in div (created by Styled(div))
in Styled(div) (created by Layout)
in div (created by Layout)
in ThemeProvider (created by Layout)
in Layout (created by Container(Layout))
in Container(Layout)
in div
This is due to storybook's AddonPanel propTypes, now checking a shape for the panels prop.
This can be solved by passing the Title functional component directly to the panel title property when registering in register.js#L18.
I'll submit a PR by the day.
This addon is really awesome! Unfortunately it isn't working on IE11 😞
The cause for this (there might be more) is react-element-to-jsx-string
is on version 12.0.0
and not 13.0.0
(There's a long chain of dependencies here but eventually it uses version 2.0.1
of get-own-enumerable-property-symbols
which now includes an ES5 compiled version of the code).
Not sure if there are any other things that might break IE11, but after disabling just this addon storybook works as expected.
As a workaround - I can take full control over the storybook webpack config and remove the exclude
from the .js
rule, that excludes node_modules
, that way every file will go through babel, but that's highly inefficient and might cause other issues when compiling already compiled modules.
hi how to setup global option eg: {showDefaultProps: false}
?
We have a huge legacy codebase and this plugin suits well for us except the fact.
Now I have to call createElement method of React like this:
const stories = storiesOf('TiledHeader', module);
const Header = props => React.createElement(TiledHeader,props);
const Item = props => React.createElement(TiledHeaderItem,props);
stories.add('Simple', () =>(
<Header>
<Item
col={16}
positions={{alignY:'center',primary:'flex-start',secondary:'flex-start'}}
colors={{
bg: color('Left Background', '#FFF', colorsGroup.left),
primary: color('Left Primary', 'grey', colorsGroup.left),
secondary: color('Left Secondary', '#000', colorsGroup.left)
}}
primary={'ENTITY COUNT:'}
secondary={'4'}
/>
</Header>
));
When using a component without children and with several props, the props are not all on a new line, which is against most standards:
<Dropdown required={true}
label='Responsable'
value={1}
placeholder='Choisir un responsable' />
I would expect something like:
<Dropdown
required={true}
label='Responsable'
value={1}
placeholder='Choisir un responsable'
/>
Hey there,
I'm trying to implement addon-jsx
into my story and I'm using typescript. Do you have that package with type definitions?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.