diff --git a/app/react/src/server/config/babel.prod.js b/app/react/src/server/config/babel.prod.js index 59a87fe49bc3..c2914f4ce748 100644 --- a/app/react/src/server/config/babel.prod.js +++ b/app/react/src/server/config/babel.prod.js @@ -16,6 +16,12 @@ module.exports = { require.resolve('babel-preset-minify'), ], plugins: [ + [ + require.resolve('babel-plugin-react-docgen'), + { + DOC_GEN_COLLECTION_NAME: 'STORYBOOK_REACT_CLASSES', + }, + ], require.resolve('babel-plugin-transform-regenerator'), [ require.resolve('babel-plugin-transform-runtime'), diff --git a/examples/cra-kitchen-sink/src/components/ImportedPropsButton.js b/examples/cra-kitchen-sink/src/components/ImportedPropsButton.js new file mode 100644 index 000000000000..6ee56cbca6d1 --- /dev/null +++ b/examples/cra-kitchen-sink/src/components/ImportedPropsButton.js @@ -0,0 +1,14 @@ +import React from 'react'; +import DocgenButton from './DocgenButton'; + +/** Button component description */ +const ImportedPropsButton = ({ disabled, label, onClick }) => + ; + +ImportedPropsButton.defaultProps = DocgenButton.defaultProps; + +ImportedPropsButton.propTypes = DocgenButton.propTypes; + +export default ImportedPropsButton; diff --git a/examples/cra-kitchen-sink/src/stories/__snapshots__/index.storyshot b/examples/cra-kitchen-sink/src/stories/__snapshots__/index.storyshot index 3b27e86a5a5c..70e110e98387 100644 --- a/examples/cra-kitchen-sink/src/stories/__snapshots__/index.storyshot +++ b/examples/cra-kitchen-sink/src/stories/__snapshots__/index.storyshot @@ -150,7 +150,7 @@ exports[`Storyshots AddonInfo.DocgenButton DocgenButton 1`] = ` } } > - Some Description + Button with PropTypes and doc comments

@@ -618,7 +618,7 @@ exports[`Storyshots AddonInfo.FlowTypeButton FlowTypeButton 1`] = ` } } > - Some Description + Button with Flow type documentation comments

@@ -838,6 +838,474 @@ exports[`Storyshots AddonInfo.FlowTypeButton FlowTypeButton 1`] = `
`; +exports[`Storyshots AddonInfo.ImportedPropsButton ImportedPropsButton 1`] = ` +
+
+ +
+ + Show Info + +
+ + × + +
+
+
+

+ AddonInfo.ImportedPropsButton +

+

+ ImportedPropsButton +

+
+
+

+ Button with PropTypes imported from another file. Should fallback to using PropTypes for data. +

+
+
+

+ Story Source +

+ 
+            

+              
+                <
+                ImportedPropsButton
+              
+              
+                
+                   
+                  
+                    onClick
+                  
+                  
+                    =
+                    
+                      
+                        
+                          clicked()
+                        
+                      
+                    
+                  
+                
+                
+                   
+                  
+                    label
+                  
+                  
+                    =
+                    
+                      
+                        "
+                        Docgen Button
+                        "
+                      
+                    
+                  
+                   
+                
+              
+              
+                />
+              
+            

+
+
+
+

+ Prop Types +

+
+

+ " + ImportedPropsButton + " Component +

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ property + + propType + + required + + default + + description +
+ disabled + + bool + + no + + + + false + + + +
+ label + + string + + yes + + - + +
+ onClick + + func + + no + + + + onClick() + + + +
+ one + + other + + no + + - + +
+ two + + other + + no + + - + +
+ msg + + other + + no + + - + +
+ enm + + other + + no + + - + +
+ union + + other + + no + + - + +
+
+
+
+
+
+
+`; + exports[`Storyshots App full app 1`] = `
+storiesOf( + 'AddonInfo.DocgenButton', + module +).addWithInfo('DocgenButton', 'Button with PropTypes and doc comments', () => ); +storiesOf( + 'AddonInfo.ImportedPropsButton', + module +).addWithInfo( + 'ImportedPropsButton', + 'Button with PropTypes imported from another file. Should fallback to using PropTypes for data.', + () => +); + storiesOf( 'AddonInfo.FlowTypeButton', module -).addWithInfo('FlowTypeButton', 'Some Description', () => +).addWithInfo('FlowTypeButton', 'Button with Flow type documentation comments', () => );