Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/kilix/storybook-addon-props-fela


https://github.com/kilix/storybook-addon-props-fela

addon fela props react storybook

Last synced: 2 months ago
JSON representation

Awesome Lists containing this project

README 

        
# Storybook-addon-props-fela



Document the props of your components in storybook.



![Screenshot](screenshot-props.png)



### Why not [react-storybook-addon-info](https://github.com/storybooks/react-storybook-addon-info) ?



Quite simple, because he doesn't handle fela correctly and i use it on my project.



## Getting started



Install `storybook-addon-props-fela` :



```

yarn add storybook-addon-props-fela

// OR

npm i --save storybook-addon-props-fela

```



Then in your storybook import and add the addon :



```javascript

import { setAddon, storiesOf } from '@kadira/storybook';

import PropsAddon from 'storybook-addon-props-fela';



setAddon(PropsAddon);

```



Once you added the addon, a new method is available for your stories `addWithProps`.



`addWithProps` is the same as the default function of storybook `add` except the fact that it takes a third parameter. This third parameters is the component from which you want the props.



## Usage



To use the full power of this addon, your component need to provide `propTypes` and `defaultProps`.

The addon support flow and use it for the required property (it's quite a minimum support for now, i think we can do more with flow later).



```javascript

import React, { PropTypes } from 'react';

import { setAddon, storiesOf } from '@kadira/storybook';

import { createComponent } from 'react-fela';



import initFelaProvider from './initFela';

import PropsAddon from '../../lib/index';



const FelaProvider = initFelaProvider();



const test = ({ color }) => ({

  fontSize: 35,

  color,

});



const Test = createComponent(test, 'h1');

Test.defaultProps = { color: '#333' };

Test.propsTypes = {

  color: PropTypes.string,

};



setAddon(PropsAddon);



storiesOf('test', module)

  .addDecorator(FelaProvider)

  .addWithProps(

    'Paris',

    () => Hello,

    Test,

  )

  .addWithProps('Orleans', () => Hello, Test);



storiesOf('test 2', module).addWithProps('Paris', () => 
test
);

```



If your component is enhanced with a decorator for example, you'll need to pass the rawComponent.



For example for a component like this:

```javascript



import React, {PropTypes} from 'react';

import {createComponent, connect} from 'react-fela';

import R from 'ramda';

import getContextThemeDecorator from 'layout/themes/getContextThemeDecorator.react';



import {Text} from 'components/baseComponents';

const badge = ({theme}: BadgeProps) => ({

    position: 'absolute',

    top: 0,

    right: 0,

    opacity: 0.85,

    color: 'white',

    padding: '3px 10px',

    borderRadius: '20%/50%',

    transform: 'translate(50%)',

    lineHeight: 1,

    overflow: 'hidden',

    whiteSpace: 'nowrap',

});



const container = ({small, tiny}: ContainerProps) => ({

    display: 'flex',

    position: 'relative',

    width: small ? 45 : tiny ? 25 : 70,

    height: small ? 45 : tiny ? 25 : 70,

});



const Badge = createComponent(badge, Text);

const Container = createComponent(container, 'div');

export const Avatar = ({badge, border, small, tiny, theme, ...props}) => (

    

        

        {badge ? {badge} : null}

    

);



Avatar.defaultProps = {

    border: true,

};

Avatar.propTypes = {

    avatar: PropTypes.string,

    badge: PropTypes.string,

    border: PropTypes.bool,

    small: PropTypes.bool,

    tiny: PropTypes.bool,

};



const enhance = R.pipe(getContextThemeDecorator);

export default enhance(Avatar);

```



you write your story like this :



```javascript

import React from 'react';

import {storiesOf} from '@kadira/storybook';

import Avatar, {Avatar as RawAvatar} from 'components/material/avatar.react';



export default FelaProvider =>

    storiesOf('Avatar', module)

        .addDecorator(FelaProvider)

        .addWithProps('without picture', () => , RawAvatar)

        .addWithProps('without picture small', () => , RawAvatar)

        .addWithProps('without picture tiny', () => , RawAvatar)

        .addWithProps(

            'with picture',

            () => ,

            RawAvatar,

        )

        [...]

        .addWithProps('with badge', () => , RawAvatar);



```



## API



### addWithProps(kind, story, rawComponent)



Show the story with the props.