react-storybook-addon-props-combinations - npm Package Compare versions

Comparing version 1.0.1 to 1.1.0

dist/CombinationRenderer.js

@@ -49,3 +49,4 @@ 'use strict';
 
-  var showSource = options.showSource;
+  var showSource = options.showSource,
+      style = options.style;
 
@@ -55,7 +56,7 @@
     'div',
-    null,
+    { style: style },
     el,
     showSource && _react2.default.createElement(
       'pre',
-      null,
+      { className: 'source' },
       (0, _prettyFormat2.default)(transformPreactElement(el), {
@@ -62,0 +63,0 @@ plugins: [_prettyFormat2.default.plugins.ReactElement]

dist/index.js

@@ -73,2 +73,3 @@ 'use strict';
   mustProvideAllProps: false,
+  style: {},
   combinationsModifier: function combinationsModifier(x) {
@@ -75,0 +76,0 @@ return x;

package.json

 {
   "name": "react-storybook-addon-props-combinations",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "description": "Props Combinations addon for React Storybook",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

README.md

@@ -1,9 +0,11 @@
-[![npm version](https://badge.fury.io/js/react-storybook-addon-props-combinations.svg)](https://www.npmjs.com/package/react-storybook-addon-props-combinations) 
+[![npm version](https://badge.fury.io/js/react-storybook-addon-props-combinations.svg)](https://www.npmjs.com/package/react-storybook-addon-props-combinations)
+[![npm](https://img.shields.io/npm/dm/react-storybook-addon-props-combinations.svg)](https://www.npmjs.com/package/react-storybook-addon-props-combinations)
 [![Build Status](https://travis-ci.org/evgenykochetkov/react-storybook-addon-props-combinations.svg?branch=master)](https://travis-ci.org/evgenykochetkov/react-storybook-addon-props-combinations)
 
-# Props Combinations addon for [React Storybook](https://github.com/storybooks/react-storybook) 
 
+# Props Combinations addon for [React Storybook](https://github.com/storybooks/react-storybook)
+
 Given possible values for each prop, renders your component with all combinations of prop values. Useful for finding edge cases or just seeing all component states at once.
 
-### [Live demo](https://evgenykochetkov.github.io/react-storybook-addon-props-combinations/)
+### [Live storybook demo](https://evgenykochetkov.github.io/react-storybook-addon-props-combinations/)
 
@@ -56,3 +58,3 @@ ## Installation
     }
-  )
+  ))
 ```
@@ -62,42 +64,18 @@
 
-Are provided as 4th argument to `addWithPropsCombinations` or set globally using `setDefaults`
+Options can be provided as 4th argument to `addWithPropsCombinations` or set globally using `setDefaults`.
 
-### `showSource`
-default: `true`
+Name | Type | Default | Description | Storybooks |
+---- | ---- | ------- | ----------- | ---------- |
+`CombinationRenderer` | `Component` | [default renderer](https://github.com/evgenykochetkov/react-storybook-addon-props-combinations/blob/master/src/CombinationRenderer.js) | A component that renders a single props combination for your component. Receives `Component`, `props` and `options` as props. | [Source](https://github.com/evgenykochetkov/react-storybook-addon-props-combinations/blob/master/example/customCombinationRenderer.story.js), [Demo](https://evgenykochetkov.github.io/react-storybook-addon-props-combinations/?selectedKind=Custom%20CombinationRenderer%20example&selectedStory=Rendering%20just%20a%20component%20without%20any%20wrappers&full=0&down=1&left=1&panelRight=0&downPanel=kadirahq%2Fstorybook-addon-actions%2Factions-panel)
+`combinationsModifier` | `function` | `x => x` | A function that takes an array of generated prop combinations, does something with it (adds new combinations, removes or modifies some of existing ones, etc), and returns that modified array. See [included combination modifiers](#included-combination-modifiers) below. | [Source](https://github.com/evgenykochetkov/react-storybook-addon-props-combinations/blob/master/example/combinationsModifier.story.js), [Demo](https://evgenykochetkov.github.io/react-storybook-addon-props-combinations/?selectedKind=combinationsModifier%20example&selectedStory=one%20modifier&full=0&down=1&left=1&panelRight=0&downPanel=kadirahq%2Fstorybook-addon-actions%2Factions-panel)
+`mustProvideAllProps` | `boolean` | `false` | Ensures that possible values are provided for all props listed in propTypes. | [Source](https://github.com/evgenykochetkov/react-storybook-addon-props-combinations/blob/master/example/mustProvideAllProps.story.js), [Demo](https://evgenykochetkov.github.io/react-storybook-addon-props-combinations/?selectedKind=mustProvideAllProps%20example&selectedStory=With%20all%20props%20provided&full=0&down=1&left=1&panelRight=0&downPanel=kadirahq%2Fstorybook-addon-actions%2Factions-panel)
+`showSource` | `boolean` | `true` | Toggles rendering of sample source for each combination. | [Source](https://github.com/evgenykochetkov/react-storybook-addon-props-combinations/blob/master/example/basicUsage.story.js), [Demo](https://evgenykochetkov.github.io/react-storybook-addon-props-combinations/?selectedKind=Basics&selectedStory=Standard%20usage&full=0&down=1&left=1&panelRight=0&downPanel=kadirahq%2Fstorybook-addon-actions%2Factions-panel)
+`style` | `object` | `{}` | Optional styling for wrapping div of each rendered combination |
+## Included Combination Modifiers
 
-Toggles rendering of sample source for each combination.
+The following combination modifiers are included by default. If you'd like to expand this list, PRs are welcome!
 
-[Example source](https://github.com/evgenykochetkov/react-storybook-addon-props-combinations/blob/master/example/basicUsage.story.js) | [Result](https://evgenykochetkov.github.io/react-storybook-addon-props-combinations/?selectedKind=Basics&selectedStory=Standard%20usage&full=0&down=1&left=1&panelRight=0&downPanel=kadirahq%2Fstorybook-addon-actions%2Factions-panel)
+Name | Description |
+---- | ----------- |
+`withOneOfBool` | Takes an array of property names and adds more combination with one of these props set to true. <br /> For example, if we had `[{ label: 'my button' }]`, `withOneOfBool(['small', 'big'])` will add `{ label: 'my button', small: true }` and `{ label: 'my button', big: true }`. <br /> See [this story](https://github.com/evgenykochetkov/react-storybook-addon-props-combinations/blob/master/example/combinationsModifier.story.js) for a more detailed example.
 
-### `mustProvideAllProps`
-default: `false`
-
-Ensures that possible values are provided for all props listed in propTypes.
-
-[Example source](https://github.com/evgenykochetkov/react-storybook-addon-props-combinations/blob/master/example/mustProvideAllProps.story.js) | [Result](https://evgenykochetkov.github.io/react-storybook-addon-props-combinations/?selectedKind=mustProvideAllProps%20example&selectedStory=With%20all%20props%20provided&full=0&down=1&left=1&panelRight=0&downPanel=kadirahq%2Fstorybook-addon-actions%2Factions-panel)
-
-### `CombinationRenderer`
-[default implementation](https://github.com/evgenykochetkov/react-storybook-addon-props-combinations/blob/master/src/CombinationRenderer.js)
-
-A component that renders a single props combination for your component. Receives `Component`, `props` and `options` as props.
-
-[Example source](https://github.com/evgenykochetkov/react-storybook-addon-props-combinations/blob/master/example/customCombinationRenderer.story.js) | [Result](https://evgenykochetkov.github.io/react-storybook-addon-props-combinations/?selectedKind=Custom%20CombinationRenderer%20example&selectedStory=Rendering%20just%20a%20component%20without%20any%20wrappers&full=0&down=1&left=1&panelRight=0&downPanel=kadirahq%2Fstorybook-addon-actions%2Factions-panel)
-
-### `combinationsModifier`
-default: `x => x`(identity function)
-
-A function that takes an array of generated prop combinations, does something with it(adds new combinations, removes or modifies some of existing ones, etc), and returns that modified array.
-(See a list of included modifiers below)
-
-[Example source](https://github.com/evgenykochetkov/react-storybook-addon-props-combinations/blob/master/example/combinationsModifier.story.js) | [Result](https://evgenykochetkov.github.io/react-storybook-addon-props-combinations/?selectedKind=combinationsModifier%20example&selectedStory=one%20modifier&full=0&down=1&left=1&panelRight=0&downPanel=kadirahq%2Fstorybook-addon-actions%2Factions-panel)
-
-## Included combination modifiers
-
-(If you'd like to expand this list, PRs are welcome!)
-
-### `withOneOfBool`
-
-Takes an array of property names and adds more combination with one of these props set to true.
-For example, if we had `[{ label: 'my button' }]`, `withOneOfBool(['small', 'big'])` will add `{ label: 'my button', small: true }` and `{ label: 'my button', big: true }`.
-
-See [this story](https://github.com/evgenykochetkov/react-storybook-addon-props-combinations/blob/master/example/combinationsModifier.story.js) for a more detailed example.

src/CombinationRenderer.js

@@ -26,10 +26,11 @@ import React from 'react';
   const {
-    showSource
+    showSource,
+    style
   } = options
 
   return (
-    <div>
+    <div style={style}>
       {el}
       {showSource && (
-        <pre>
+        <pre className="source">
           {prettyFormat(transformPreactElement(el), {
@@ -36,0 +37,0 @@ plugins: [prettyFormat.plugins.ReactElement],

src/index.js

@@ -31,2 +31,3 @@ import React from 'react'
   mustProvideAllProps: false,
+  style: {},
   combinationsModifier: x => x,
@@ -33,0 +34,0 @@ }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

298665

increased by0.2%

Lines of code

652

increased by0.62%

Worsened metrics

Number of lines in readme file

80

decreased by-21.57%

No dependency changes