Style Storybook with Styled Components

Field.js

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;

index.js

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} />
  ));

TextField.js

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;

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

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

@lazarljubenovic Have a look on this one
https://github.com/echoulen/storybook-addon-styled-component-theme

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

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

Find a way:

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

@xcarpentier it really helpful thanks guy

@xcarpentier thanks!

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>
    ))

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

usage example:

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

 <SomeComponent style={style[name]} />