Skip to content

Instantly share code, notes, and snippets.

@mxstbr
Forked from hungrysquirrel/Field.js
Last active February 23, 2022 07:39
Show Gist options
  • Save mxstbr/9c26ff3bca8d9a4aa3364402ef98a49a to your computer and use it in GitHub Desktop.
Save mxstbr/9c26ff3bca8d9a4aa3364402ef98a49a to your computer and use it in GitHub Desktop.
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;
@mCzolko
Copy link

mCzolko commented Aug 6, 2018

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

@mCzolko
Copy link

mCzolko commented Aug 6, 2018

@xcarpentier
Copy link

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

@xcarpentier
Copy link

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

Find a way:

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

@astyfx
Copy link

astyfx commented Oct 30, 2018

@xcarpentier it really helpful thanks guy

@victorkurauchi
Copy link

@xcarpentier thanks!

@abetss
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
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
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