diff --git a/addons/info/.storybook/addons.js b/addons/info/.storybook/addons.js index 5dea101a7c9a..e66a5589d2f9 100644 --- a/addons/info/.storybook/addons.js +++ b/addons/info/.storybook/addons.js @@ -1 +1,5 @@ +import '@storybook/addon-info/register'; +import '@storybook/addon-knobs/register'; import '@storybook/addon-actions/register'; +import '@storybook/addon-links/register'; +import '@storybook/addon-options/register'; diff --git a/addons/info/.storybook/config.js b/addons/info/.storybook/config.js index 85ac9515b63c..d5de4d2949bc 100644 --- a/addons/info/.storybook/config.js +++ b/addons/info/.storybook/config.js @@ -1,15 +1,22 @@ -import React from 'react'; -import { configure, setAddon, addDecorator } from '@storybook/react'; -import InfoAddon from '../src/'; +import { configure, setAddon } from '@storybook/react'; +import { withInfo, setInfoOptions } from '@storybook/addon-info'; +import { setOptions } from '@storybook/addon-options'; -addDecorator((story) => ( -
- {story()} -
-)); +setOptions({ + downPanelInRight: true, +}) -setAddon(InfoAddon); +setAddon({ + summary(info) { + return this.addDecorator(story => { + setInfoOptions(info); + return story(); + }) + } +}); -configure(function () { - require('../example/story'); -}, module); +function loadStories() { + require('../src/components/stories'); +} + +configure(loadStories, module); diff --git a/addons/info/.storybook/user/modify_webpack_config.js b/addons/info/.storybook/user/modify_webpack_config.js deleted file mode 100644 index 2716de914d59..000000000000 --- a/addons/info/.storybook/user/modify_webpack_config.js +++ /dev/null @@ -1,4 +0,0 @@ -module.exports = function (config) { - // This is the default webpack config defined in the `../webpack.config.js` - // modify as you need. -}; diff --git a/addons/info/.storybook/webpack.config.js b/addons/info/.storybook/webpack.config.js deleted file mode 100644 index 115532575ea6..000000000000 --- a/addons/info/.storybook/webpack.config.js +++ /dev/null @@ -1,28 +0,0 @@ -// IMPORTANT -// --------- -// This is an auto generated file with React CDK. -// Do not modify this file. -// Use `.storybook/user/modify_webpack_config.js instead`. - -const path = require('path'); -const updateConfig = require('./user/modify_webpack_config'); - -const config = { - module: { - loaders: [ - { - test: /\.css?$/, - loaders: ['style', 'raw'], - include: path.resolve(__dirname, '../'), - }, - { - test: /\.json?$/, - loaders: ['json'], - include: path.resolve(__dirname, '../'), - } - ], - }, -}; - -updateConfig(config); -module.exports = config; diff --git a/addons/info/CHANGELOG.md b/addons/info/CHANGELOG.md deleted file mode 100644 index 0b2b1a1031d5..000000000000 --- a/addons/info/CHANGELOG.md +++ /dev/null @@ -1,85 +0,0 @@ -# Change Log - -### v3.3.0 - -- Add setDefaults function [PR114](https://github.com/kadirahq/react-storybook-addon-info/pull/114) - -### v3.2.4 - -- Add missing dist files [PR113](https://github.com/kadirahq/react-storybook-addon-info/pull/113) - -### v3.2.3 - -- Handle number type nodes [PR110](https://github.com/kadirahq/react-storybook-addon-info/pull/110) - -### v3.2.2 - -- Use markdown-to-react-components npm package instead of our fork. Our PR to them is merged and published. [PR109](https://github.com/kadirahq/react-storybook-addon-info/pull/109) - -### v3.2.1 - -- Handle false values for types [PR54](https://github.com/kadirahq/react-storybook-addon-info/pull/54) - -### v3.2.0 - -- Support custom MTRC config [PR54](https://github.com/kadirahq/react-storybook-addon-info/pull/54) -- Fix propTables prop validation with a default value [PR55](https://github.com/kadirahq/react-storybook-addon-info/pull/55) - -### v3.1.4 - -- Remove propTables prop validation warning [PR53](https://github.com/kadirahq/react-storybook-addon-info/pull/53) -- Update example storybook [PR52](https://github.com/kadirahq/react-storybook-addon-info/pull/52) - -### v3.1.3 - -- Fix wrong detection of propType when isRequired is set [PR49](https://github.com/kadirahq/react-storybook-addon-info/pull/49) -- Add displayName for Button [PR51](https://github.com/kadirahq/react-storybook-addon-info/pull/51) - -### v3.1.2 - -- Fixed a bug which made the `info` to not display and the `options` parameter to be ignored when `info` is not given.[PR45](https://github.com/kadirahq/react-storybook-addon-info/pull/45) - -### v3.1.1 - -- Add a z-index for rendered items to make the overlay always display on top [PR38](https://github.com/kadirahq/react-storybook-addon-info/pull/38) - -### v3.1.0 - -- Make the `info` argument optional [PR37](https://github.com/kadirahq/react-storybook-addon-info/pull/37) - -### v3.0.10 - -- Render the component inside a div element when on inline mode [PR34](https://github.com/kadirahq/react-storybook-addon-info/pull/34) - -### v3.0.9 - -- Add missing `@kadira/storybook` devDependencies [PR25](https://github.com/kadirahq/react-storybook-addon-info/pull/25) -- Improve prop rendering in jsx source view [PR24](https://github.com/kadirahq/react-storybook-addon-info/pull/24) -- Avoid warning message with "webkitFontSmoothing" [PR30](https://github.com/kadirahq/react-storybook-addon-info/pull/30) -- Remove max-width style rule for wrapper [PR31](https://github.com/kadirahq/react-storybook-addon-info/pull/31) and [PR36](https://github.com/kadirahq/react-storybook-addon-info/pull/36) -- Improve prop table rendering (handle css resets) [PR32](https://github.com/kadirahq/react-storybook-addon-info/pull/32) - -### v3.0.8 - -- Fixed unkeyed array iteration warning in React with: [PR23](https://github.com/kadirahq/react-storybook-addon-info/pull/23) - -### v3.0.7 - -- Improve default display in prop table. See [#16](https://github.com/kadirahq/react-storybook-addon-info/pull/16) - -### v3.0.6 - -- Improve function type and react element type props display. See [#14](https://github.com/kadirahq/react-storybook-addon-info/pull/14) - -### v3.0.5 - -- Over-indentation of ending tag in source code is fixed. See [#13](https://github.com/kadirahq/react-storybook-addon-info/pull/13) - -### v3.0.4 - -- Remove the need to use json-loader with webpack when using this package. - See: [#12](https://github.com/kadirahq/react-storybook-addon-info/issues/12) - -### v3.0.0 - -- Add the version which works as an Storybook addon. diff --git a/addons/info/docs/home-screenshot.png b/addons/info/docs/home-screenshot.png deleted file mode 100644 index 65e7a787c120..000000000000 Binary files a/addons/info/docs/home-screenshot.png and /dev/null differ diff --git a/addons/info/example/Button.js b/addons/info/example/Button.js deleted file mode 100644 index df7c34c01288..000000000000 --- a/addons/info/example/Button.js +++ /dev/null @@ -1,20 +0,0 @@ -import PropTypes from 'prop-types'; -import React from 'react'; - -const Button = ({ disabled, label, style, onClick }) => ( - -); - -Object.assign(Button, { - displayName: 'Button', - propTypes: { - label: PropTypes.string.isRequired, - style: PropTypes.object, - disabled: PropTypes.bool, - onClick: PropTypes.func, - }, -}); - -export default Button; diff --git a/addons/info/example/story.js b/addons/info/example/story.js deleted file mode 100644 index e927751d8920..000000000000 --- a/addons/info/example/story.js +++ /dev/null @@ -1,192 +0,0 @@ -import React from 'react'; -import Button from './Button'; - -import { storiesOf } from '@storybook/react'; -import { action } from '@storybook/addon-actions'; - -storiesOf( - 'Button' -).addWithInfo( - 'simple usage', - 'This is the basic usage with the button with providing a label to show the text.', - () => ( -
-
- ) -); - -storiesOf('Button').addWithInfo( - 'simple usage (inline info)', - ` - This is the basic usage with the button with providing a label to show the text. - `, - () => - - - Show Info - -
- - × - -
-
-
-

- AddonInfo.FlowTypeButton -

-

- FlowTypeButton -

-
-
-

- Some Description -

-
-
-

- Story Source -

- 
-            

-              
-                <
-                FlowTypeButton
-              
-              
-                
-                   
-                  
-                    onClick
-                  
-                  
-                    =
-                    
-                      
-                        
-                          clicked()
-                        
-                      
-                    
-                  
-                
-                
-                   
-                  
-                    label
-                  
-                  
-                    =
-                    
-                      
-                        "
-                        Flow Typed Button
-                        "
-                      
-                    
-                  
-                   
-                
-              
-              
-                />
-              
-            

-
-
-
-

- Prop Types -

-
-

- " - FlowTypeButton - " Component -

- - - - - - - - - - - - - - - - - - - - -
- property - - propType - - required - - default - - description -
- disabled - - - - - - false - - - -
- onClick - - - - - - onClick() - - - -
-
-
-
-
-
- -`; - -exports[`Storyshots App full app 1`] = ` -
-
- logo -

- Welcome to React -

-
-

- To get started, edit - - src/App.js - - and save to reload. -

-
-`; - -exports[`Storyshots Button addons composition 1`] = ` -
-
-
- click the - - - Show Info - - - label in top right for info about " - addons composition - " -
-
- - Show Info - -
- - × - -
-
-
-

- Button -

-

- addons composition -

-
-
-

- see Notes panel for composition info -

-
-
-

- Story Source -

- 
-            

-              

-                
-                  <
-                  div
-                
-                
-                
-                  >
-                
-              

-              

-                
-              

-              

-                
-                  click the 
-                
-              

-              

-                
-                  <
-                  InfoButton
-                
-                
-                
-                  />
-                
-              

-              

-                
-                   label in top right for info about "
-                
-              

-              

-                
-                  addons composition
-                
-              

-              

-                
-                  "
-                
-              

-              

-                
-                  </
-                  div
-                  >
-                
-              

-            

-
-
-
-

- Prop Types -

-
-

- " - InfoButton - " Component -

- - No propTypes defined! - -
-
-
-
-
-
-`; - -exports[`Storyshots Button with knobs 1`] = ` -
-

- My name is Storyteller, I'm 70 years old, and my favorite fruit is apple. -

-

- My birthday is: - January 20, 2017 -

-

- My wallet contains: $ - 12.50 -

-

- In my backpack, I have: -

- -

- Nice to meet you! -

-
-`; - -exports[`Storyshots Button with new info 1`] = ` -
-
-
- click the - - - Show Info - - - label in top right for info about " - with new info - " - -
-
- - Show Info - -
- - × - -
-
-
-

- Button -

-

- with new info -

-
-
-

- Use the - - info addon - - with its new painless API. -

-
-
-

- Story Source -

- 
-            

-              

-                
-                  <
-                  Container
-                
-                
-                
-                  >
-                
-              

-              

-                
-              

-              

-                
-                  click the 
-                
-              

-              

-                
-                  <
-                  InfoButton
-                
-                
-                
-                  />
-                
-              

-              

-                
-                   label in top right for info about "
-                
-              

-              

-                
-                  with new info
-                
-              

-              

-                
-                  "
-                
-              

-              

-                
-                  </
-                  Container
-                  >
-                
-              

-            

-
-
-
-

- Prop Types -

-
-

- " - Container - " Component -

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- property - - propType - - required - - default - - description -
- children - - node - - yes - - - - -
- isAmazing - - bool - - no - - - - false - - - -
- age - - number - - no - - - - 0 - - - -
- title - - string - - no - - - " - the best container ever - " - - -
-
-
-

- " - InfoButton - " Component -

- - No propTypes defined! - -
-
-
-
-
+ } +> +

+ My name is Storyteller, I'm 70 years old, and my favorite fruit is apple. +

+

+ My birthday is: + January 20, 2017 +

+

+ My wallet contains: $ + 12.50 +

+

+ In my backpack, I have: +

+ +

+ Nice to meet you! +

`; @@ -1870,6 +95,15 @@ exports[`Storyshots Button with notes 1`] = ` `; +exports[`Storyshots Button with setInfoOptions 1`] = ` + +`; + exports[`Storyshots Button with some emoji 1`] = ` +`; + +exports[`Storyshots Cells.Molecules.Atoms with some emoji2 1`] = ` + +`; + +exports[`Storyshots Cells.Molecules.Atoms with text2 1`] = ` + +`; + +exports[`Storyshots Cells/Molecules with some emoji 1`] = ` + +`; + +exports[`Storyshots Cells/Molecules with text 1`] = ` + +`; + +exports[`Storyshots Cells/Molecules.Atoms/simple with some emoji 1`] = ` + +`; + +exports[`Storyshots Cells/Molecules.Atoms/simple with text 1`] = ` + +`; + +exports[`Storyshots Cells/Molecules/Atoms.more with some emoji2 1`] = ` + +`; + +exports[`Storyshots Cells/Molecules/Atoms.more with text2 1`] = ` + +`; + +exports[`Storyshots Info Addon DocgenButton 1`] = ` + +`; + +exports[`Storyshots Info Addon FlowTypeButton 1`] = ` + +`; + +exports[`Storyshots Info Addon Info default 1`] = ` +
+ click the + + + Show Info + + + label in top right for info about " + Info default + " + +
+`; + +exports[`Storyshots Info Addon Info with options 1`] = ` +
+ click the + + + Show Info + + + label in top right for info about " + Info with options + " this button has very-very-very-very looooooong title + +
+`; + +exports[`Storyshots Info Addon JSX as an argument 1`] = ` +
+ click the + + + Show Info + + + label in top right for info about " + JSX as an argument + " + +
+`; + +exports[`Storyshots Info Addon Only component source 1`] = ` +
+ click the + + + Show Info + + + label in top right for info about " + Only component source + " + +
+`; + +exports[`Storyshots Info Addon Only propTypes and header 1`] = `
-
-
- click the - - - Show Info - - - label in top right for info about " - with some info - " - -
-
- + label in top right for info about " + Only propTypes and header + " +
+`; + +exports[`Storyshots Info Addon Only summary with markdown 1`] = ` +
+ click the + + + Show Info + + + label in top right for info about " + Only summary with markdown + " + +
+`; + +exports[`Storyshots Info Addon React Element in summary 1`] = ` +
+ click the + + + Show Info + + + label in top right for info about " + React Element in summary + " + +
+`; + +exports[`Storyshots Info Addon With custom components 1`] = ` +
+ click the + + + Show Info + + + label in top right for info about " + With custom components + " + +
+`; + +exports[`Storyshots Info Addon addons composition 1`] = ` +
+ click the + + + Show Info + + + label in top right for info about " + addons composition + " +
+`; + +exports[`Storyshots Info Addon decoratorInfo 1`] = ` +
+
- Show Info - +
+
+ click the + + + Show Info + + + label in top right for info about " + decoratorInfo + " + +
+
+ + Show Info + +
@@ -2004,74 +598,77 @@ exports[`Storyshots Button with some info 1`] = ` style={ Object { "borderBottom": "1px solid #eee", - "marginBottom": 10, - "paddingTop": 10, + "marginBottom": 6, + "paddingTop": 6, } } >

- Button + Info Addon

- with some info + decoratorInfo

-

- Use the - +

- info addon - - with its painful API. -

+ Use the + + info addon + + with its new painless API. +

+ 

-            

-              

-                
+              

+                

-                  <
-                  Container
-                
-                
-                
-                  >
-                
-              

-              

-                
+                    <
+                    Container
+                  
+                  
+                  
-                  click the 
-                
-              

-              

-                
+                    >
+                  
+                

+                

-                  <
-                  InfoButton
-                
-                
-                
+                    click the 
+                  
+                

+                

-                  />
-                
-              

-              

-                
+                    <
+                    InfoButton
+                  
+                  
+                  
+                    />
+                  
+                

+                

-                   label in top right for info about "
-                
-              

-              

-                
+                     label in top right for info about "
+                  
+                

+                

-                  with some info
-                
-              

-              

-                
+                    decoratorInfo
+                  
+                

+                

-                  "
-                
-              

-              

-                
+                    "
+                  
+                

+                

-                  </
-                  Container
-                  >
-                
+                  
+                    </
+                    Container
+                    >
+                  
+                

               

-            

+

@@ -2250,7 +850,8 @@ exports[`Storyshots Button with some info 1`] = ` style={ Object { "borderBottom": "1px solid #EEE", - "fontSize": "25px", + "color": "rgba(0,0,0,0.5)", + "fontSize": "18px", "margin": "20px 0 0 0", "padding": "0 0 5px 0", } @@ -2262,24 +863,45 @@ exports[`Storyshots Button with some info 1`] = `

- " - Container - " Component + + < + Container + /> +

- +
property @@ -2397,13 +1019,26 @@ exports[`Storyshots Button with some info 1`] = `

- " - InfoButton - " Component + + < + InfoButton + /> +

No propTypes defined! @@ -2416,77 +1051,31 @@ exports[`Storyshots Button with some info 1`] = ` `; -exports[`Storyshots Button with text 1`] = ` - -`; - -exports[`Storyshots Cells.Molecules.Atoms with some emoji2 1`] = ` - -`; - -exports[`Storyshots Cells.Molecules.Atoms with text2 1`] = ` - -`; - -exports[`Storyshots Cells/Molecules with some emoji 1`] = ` - -`; - -exports[`Storyshots Cells/Molecules with text 1`] = ` - -`; - -exports[`Storyshots Cells/Molecules.Atoms/simple with some emoji 1`] = ` - -`; - -exports[`Storyshots Cells/Molecules.Atoms/simple with text 1`] = ` - -`; - -exports[`Storyshots Cells/Molecules/Atoms.more with some emoji2 1`] = ` - -`; - -exports[`Storyshots Cells/Molecules/Atoms.more with text2 1`] = ` - +exports[`Storyshots Info Addon deprecated addWithInfo 1`] = ` +
+ click the + + + Show Info + + + label in top right for info about " + deprecated addWithInfo + " +
`; exports[`Storyshots Navigation Menu link 1`] = ` diff --git a/examples/cra-kitchen-sink/src/stories/index.js b/examples/cra-kitchen-sink/src/stories/index.js index ada77d629f7c..4481cb736095 100644 --- a/examples/cra-kitchen-sink/src/stories/index.js +++ b/examples/cra-kitchen-sink/src/stories/index.js @@ -19,15 +19,17 @@ import { object, } from '@storybook/addon-knobs'; import centered from '@storybook/addon-centered'; -import { withInfo } from '@storybook/addon-info'; +import { withInfo, setInfoOptions } from '@storybook/addon-info'; import { Button, Welcome } from '@storybook/react/demo'; import App from '../App'; +import reactLogo from '../logo.svg'; import Logger from './Logger'; import Container from './Container'; import DocgenButton from '../components/DocgenButton'; import FlowTypeButton from '../components/FlowTypeButton'; +import markdown from '../../../../addons/info/src/components/stories/mock-data/summary.md'; const EVENTS = { TEST_EVENT_1: 'test-event-1', @@ -57,7 +59,12 @@ const InfoButton = () => {' '}Show Info{' '} ; +setInfoOptions({ + summary: 'This is common info', +}); + storiesOf('Button', module) + .addDecorator((storyFn, context) => withInfo('This is **Button** info')(storyFn)(context)) .addDecorator(withKnobs) .add('with text', () => ; + }); + +storiesOf('Info Addon', module) + .add( + 'Info default', + withInfo( + 'Use the [info addon](https://github.com/storybooks/storybook/tree/master/addons/info) with its new painless API.' + )(context => + + {setOptions({ selectedAddonPanel: 'storybook/info/info-panel' })} + click the label in top right for info about "{context.story}" + + ) + ) + .add( + 'DocgenButton', + withInfo(` + # Docgen Button + + It demonstrates how your component can be documented via [babel-plugin-react-docgen](https://github.com/storybooks/babel-plugin-react-docgen). You just need to add comments in your component \`propTypes\` this way: + + ~~~js + DocgenButton.propTypes = { + /** Boolean indicating whether the button should render as disabled */ + disabled: PropTypes.bool, + /** button label. */ + label: PropTypes.string.isRequired, + /** onClick handler */ + onClick: PropTypes.func, + } + ~~~ + + See results in the **Prop Types** section below + + `)(() => ) + ) + .add( + 'FlowTypeButton', + withInfo(` + # FlowType Button + + It demonstrates how your component can be documented via [Flow](https://flow.org/). You just need to add types and comments to your component this way: + + ~~~js + type PropsType = { + /** The text to be rendered in the button */ + label: string, + /** Function to be called when the button is clicked */ + onClick?: Function, + /** Boolean representing wether the button is disabled */ + disabled?: boolean, + }; + ~~~ + + See results in the **Prop Types** section below + + `)(() => ) + ) + .add( + 'Info with options', + withInfo({ + summary: + 'Use the [info addon](https://github.com/storybooks/storybook/tree/master/addons/info) with its new painless API.', + inline: false, + propTables: false, + header: false, + source: true, + })(context => + + click the label in top right for info about "{context.story}" this button has + very-very-very-very looooooong title + + ) + ) + .add( + 'Only summary with markdown', + withInfo({ + summary: markdown, + inline: false, + propTables: false, + header: false, + source: false, + })(context => click the label in top right for info about "{context.story}" + ) + ) + .add( + 'React Element in summary', + withInfo({ + summary: ( +
+

This is a JSX info section

+

+ Storybook is very easy to use. You can use it with any kind of React or Vue project. + Follow these steps to get started with Storybook: +

+ + {'cd my-react-app'} +
+ {'npm i -g @storybook/cli'} +
+ {'getstorybook'} +
+ +

+ + react logo +

+

+ + @storybook/addon-info + +

+
+ ), + inline: false, + propTables: false, + header: false, + source: false, + })(context => + + click the label in top right for info about "{context.story}" + + ) ) .add( - 'with new info', + 'Only component source', + withInfo({ + summary: null, + inline: false, + propTables: false, + header: false, + source: true, + })(context => + + click the label in top right for info about "{context.story}" + + ) + ) + .add( + 'Only propTypes and header', + withInfo({ + summary: null, + inline: false, + propTables: [Container], + propTablesExclude: [InfoButton], + header: true, + source: false, + })(context => +
+ click the label in top right for info about "{context.story}" +
+ ) + ) + .add( + 'decoratorInfo', + withInfo({ + summary: + 'Use the [info addon](https://github.com/storybooks/storybook/tree/master/addons/info) with its new painless API.', + inline: false, + sendToPanel: false, + infoButton: true, + })(context => + + click the label in top right for info about "{context.story}" + + ) + ) + .add( + 'JSX as an argument', withInfo( - 'Use the [info addon](https://github.com/storybooks/storybook/tree/master/addons/info) with its new painless API.' +
+ This is summary with element +
)(context => {setOptions({ selectedAddonPanel: 'storybook/info/info-panel' })} @@ -152,6 +348,40 @@ storiesOf('Button', module) ) ) + .add( + 'With custom components', + withInfo({ + summary: ` + # Components overriding + + Here we can override some components. We support previous API - \`marksyConf\` but it will be deprecated. So better to use new API - \`components\` with the same syntax. + + In order to pass your own component to markdown set this option this way: + + ~~~js + components: { + h2: props =>

, + } + ~~~ + + Lets override **H2** heading via \`components\` and **H3** via old \`marksyConf\` API: + + ## H2 - it should be blue + + ### H3 - it should be brown + `, + marksyConf: { + h3: props =>

, // eslint-disable-line + }, + components: { + h2: props =>

, // eslint-disable-line + }, + })(context => + + click the label in top right for info about "{context.story}" + + ) + ) .add( 'addons composition', withInfo('see Notes panel for composition info')( @@ -162,18 +392,28 @@ storiesOf('Button', module) ) ) + ) + .addWithInfo( + 'deprecated addWithInfo', + 'Use the [info addon](https://github.com/storybooks/storybook/tree/master/addons/info) with its painful API.', + context => +
+ click the label in top right for info about "{context.story}" +
); -storiesOf('AddonInfo.DocgenButton', module).addWithInfo('DocgenButton', 'Some Description', () => - -); - -storiesOf( - 'AddonInfo.FlowTypeButton', - module -).addWithInfo('FlowTypeButton', 'Some Description', () => - -); +storiesOf('Addons composition', module) + .addDecorator((storyFn, context) => + withInfo()(withNotes('the non-trivial form of addons composition')(storyFn))(context) + ) + .add('with text', () => { + setInfoOptions('this *button* contain **text**'); + return ; + }) + .add('with some emoji', () => { + setInfoOptions('this *button* contain **some emoji**'); + return ; + }); storiesOf('App', module).add('full app', () => );