Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Style Storybook with Styled Components
import React, { PropTypes } from 'react';
import styled from 'styled-components'
const Wrapper = styled.div`
// styles here that used to be for .test
`
const Label = styled.label`
// label styles here
`
const Field = ({
children,
label,
name,
}) => (
<Wrapper>
<Label htmlFor={name}>{label}</label>
{ children }
</div>
);
Field.propTypes = {
children: React.PropTypes.node,
label: PropTypes.string,
name: PropTypes.string.isRequired,
};
export default Field;
import React from 'react';
import { storiesOf, action } from '@storybook/react';
import TextField from '../components/TextField';
import Button from '../components/Button';
import SelectField from '../components/SelectField';
import Form from '../components/Form';
storiesOf('🍗 TextField', module)
.add('default', () => (
<TextField name="name" label="a label" />
))
.add('with a value', () => (
<TextField name="name" label="a label" onChange={action('change')} value="some value" />
))
.add('with a placeholder', () => (
<TextField name="name" label="a label" placeholder="this is a placeholder" />
))
.add('disabled', () => (
<TextField name="name" label="a label" disabled />
))
.add('disabled with a value', () => (
<TextField name="name" label="a label" value="some value" disabled />
))
.add('disabled with a placeholder', () => (
<TextField name="name" label="a label" placeholder="this is a placeholder" disabled />
));
storiesOf('🍖 Button', module)
.add('default', () => (
<Button name="name">Click me</Button>
))
.add('submit', () => (
<Button name="name" submit>Submit me</Button>
))
.add('disabled', () => (
<Button name="name" disabled>Click me</Button>
))
.add('disabled submit', () => (
<Button name="name" submit disabled>Submit me</Button>
));
const options = [
{ value: 'value_a', text: 'Value A' },
{ value: 'value_b', text: 'Value B' },
];
const props = {
label: 'a label',
name: 'name',
options,
onChange: action('onChange'),
};
storiesOf('🍗 SelectField', module)
.add('default', () => (
<SelectField {...props} />
))
.add('with a value', () => (
<SelectField {...props} value="value_b" />
))
.add('disabled', () => (
<SelectField {...props} disabled />
))
.add('disabled with a value', () => (
<SelectField {...props} value="value_b" disabled />
));
const myProps = {
intervalName: '',
startMilestone: '',
endMilestone: '',
handleChange: action('handleChange'),
};
storiesOf('🍤 Form', module)
.add('default', () => (
<Form {...myProps} />
));
import React, { PropTypes } from 'react';
import Field from './Field';
import styled from 'styled-components'
const Input = styled.input`
// input styles here
`
const TextField = ({
disabled = false,
label,
name,
placeholder,
value,
onChange,
}) => (
<Field name={name} label={label}>
<Input
disabled={disabled}
onChange={onChange}
id={name}
name={name}
placeholder={placeholder}
type="text"
value={value}
/>
</Field>
);
TextField.propTypes = {
disabled: PropTypes.bool,
label: PropTypes.string.isRequired,
name: PropTypes.string.isRequired,
placeholder: PropTypes.string,
onChange: PropTypes.func,
value: PropTypes.oneOfType([
React.PropTypes.string,
React.PropTypes.number,
]),
};
export default TextField;
@lazarljubenovic

This comment has been minimized.

Copy link

lazarljubenovic commented Jul 12, 2018

Do you know how to set up the ThemeProvider to wrap every story with it, on the global level?

@mCzolko

This comment has been minimized.

Copy link

mCzolko commented Aug 6, 2018

@lazarljubenovic did you find how to provide theme provider? I'm solving exact same problem

@mCzolko

This comment has been minimized.

@xcarpentier

This comment has been minimized.

Copy link

xcarpentier commented Sep 25, 2018

@mxstbr How to inject global style into storybook with styled-component v4?

@xcarpentier

This comment has been minimized.

Copy link

xcarpentier commented Sep 25, 2018

@mxstbr How to inject global style into storybook with styled-component v4?

Find a way:

story
    .addDecorator((storyFn) => (
        <div>
            <GlobalStyle />
            {storyFn()}
        </div>
    ))
@astyfx

This comment has been minimized.

Copy link

astyfx commented Oct 30, 2018

@xcarpentier it really helpful thanks guy

@victorkurauchi

This comment has been minimized.

Copy link

victorkurauchi commented Nov 21, 2018

@xcarpentier thanks!

@abetss

This comment has been minimized.

Copy link

abetss commented Aug 27, 2019

if you wanna wrap a theme around a storyboard component you can do

import { ThemeProvider } from 'styled-components'
import { theme } from './your-theme'

story
    .addDecorator(storyFn => (
        <ThemeProvider theme={theme}>{storyFn()}</ThemeProvider>
    ))
@bogdanq

This comment has been minimized.

Copy link

bogdanq commented Oct 31, 2019

how to use helper "css" from styled-components?
error - It seems you are interpolating a keyframe declaration (krDXiq) into an untagged string. This was supported in styled-components v3, but is not longer supported in v4 as keyframes are now injected on-demand. Please wrap your string in the css`` helper which ensures the styles are injected correctly

@bogdanq

This comment has been minimized.

Copy link

bogdanq commented Oct 31, 2019

usage example:

const style = {
  rollin: css`
    animation-name: ${({ isAnimated }) => (isAnimated ? rollinIn : scaleOut)};
  `,
  zoom: css`
    animation-name: ${({ isAnimated }) => (isAnimated ? zoomIn : scaleOut)};
  `,
};

 <SomeComponent style={style[name]} />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.