From 03ea1031663f276b5ec562b97e9418e12c4b3847 Mon Sep 17 00:00:00 2001 From: Joao Ribeiro Date: Tue, 8 Aug 2017 20:49:23 +0200 Subject: [PATCH 1/6] Add flowtype example again --- .../src/components/FlowTypeButton.js | 24 +++++++++++++++++++ .../cra-kitchen-sink/src/stories/index.js | 8 +++++++ 2 files changed, 32 insertions(+) create mode 100644 examples/cra-kitchen-sink/src/components/FlowTypeButton.js diff --git a/examples/cra-kitchen-sink/src/components/FlowTypeButton.js b/examples/cra-kitchen-sink/src/components/FlowTypeButton.js new file mode 100644 index 00000000000..3ef725f86de --- /dev/null +++ b/examples/cra-kitchen-sink/src/components/FlowTypeButton.js @@ -0,0 +1,24 @@ +// @flow +import React from 'react'; + +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, +}; + +/** Flow type button description */ +const FlowTypeButton = ({ label, onClick, disabled }: PropsType) => + ; + +FlowTypeButton.defaultProps = { + disabled: false, + onClick: () => {}, +}; + +export default FlowTypeButton; diff --git a/examples/cra-kitchen-sink/src/stories/index.js b/examples/cra-kitchen-sink/src/stories/index.js index 38db317317c..ada77d629f7 100644 --- a/examples/cra-kitchen-sink/src/stories/index.js +++ b/examples/cra-kitchen-sink/src/stories/index.js @@ -27,6 +27,7 @@ import App from '../App'; import Logger from './Logger'; import Container from './Container'; import DocgenButton from '../components/DocgenButton'; +import FlowTypeButton from '../components/FlowTypeButton'; const EVENTS = { TEST_EVENT_1: 'test-event-1', @@ -167,6 +168,13 @@ storiesOf('AddonInfo.DocgenButton', module).addWithInfo('DocgenButton', 'Some De ); +storiesOf( + 'AddonInfo.FlowTypeButton', + module +).addWithInfo('FlowTypeButton', 'Some Description', () => + +); + storiesOf('App', module).add('full app', () => ); storiesOf('Some really long story kind description', module) From 0b0b26dd044d955c035121f1debcdf9019db5e7e Mon Sep 17 00:00:00 2001 From: Daniel Duan Date: Fri, 18 Aug 2017 11:13:25 -0400 Subject: [PATCH 2/6] snapshot update --- .../src/__snapshots__/storyshots.test.js.snap | 852 +++++++++++++++++- 1 file changed, 851 insertions(+), 1 deletion(-) diff --git a/examples/cra-kitchen-sink/src/__snapshots__/storyshots.test.js.snap b/examples/cra-kitchen-sink/src/__snapshots__/storyshots.test.js.snap index 89c3bf934c3..cc4aa4c9334 100644 --- a/examples/cra-kitchen-sink/src/__snapshots__/storyshots.test.js.snap +++ b/examples/cra-kitchen-sink/src/__snapshots__/storyshots.test.js.snap @@ -1,5 +1,855 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP +exports[`Storyshots AddonInfo.DocgenButton DocgenButton 1`] = ` +
+
+ +
+ + Show Info + +
+ + × + +
+
+
+

+ AddonInfo.DocgenButton +

+

+ DocgenButton +

+
+
+

+ Some Description +

+
+
+

+ Story Source +

+ 
+            

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

+
+
+
+

+ Prop Types +

+
+

+ " + DocgenButton + " Component +

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ property + + propType + + required + + default + + description +
+ disabled + + bool + + no + + + + false + + + +
+ enm + + other + + no + + - + +
+ label + + string + + yes + + - + +
+ msg + + other + + no + + - + +
+ onClick + + func + + no + + + + onClick() + + + +
+ one + + other + + no + + - + +
+ two + + other + + no + + - + +
+ union + + other + + no + + - + +
+
+
+
+
+
+
+`; + +exports[`Storyshots AddonInfo.FlowTypeButton FlowTypeButton 1`] = ` +
+
+ +
+ + 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`] = `

Welcome to React From 9b931abf792ff944c8d7e35bd5dcd9abb9cfca4b Mon Sep 17 00:00:00 2001 From: Daniel Duan Date: Fri, 18 Aug 2017 12:38:46 -0400 Subject: [PATCH 3/6] needs global --- addons/centered/package.json | 3 +++ 1 file changed, 3 insertions(+) diff --git a/addons/centered/package.json b/addons/centered/package.json index c4a25a5fa69..6a14372c94b 100644 --- a/addons/centered/package.json +++ b/addons/centered/package.json @@ -10,5 +10,8 @@ }, "peerDependencies": { "react": "*" + }, + "dependencies": { + "global": "^4.3.2" } } From 9fece604b9cf22c5fc84253a4084f07b478a4add Mon Sep 17 00:00:00 2001 From: Daniel Duan Date: Fri, 18 Aug 2017 13:50:39 -0400 Subject: [PATCH 4/6] pr reminders --- .github/PULL_REQUEST_TEMPLATE.md | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md index 05dd8d61c90..7d174a73ff8 100644 --- a/.github/PULL_REQUEST_TEMPLATE.md +++ b/.github/PULL_REQUEST_TEMPLATE.md @@ -5,3 +5,13 @@ Issue: ## How to test + + + +Is this testable with jest or storyshots? + +Does this need a new example in the kitchen sink apps? + +Does this need an update to the documentation? + +If your answer is yes to any of these, please make sure to include it in your PR. From 3679a49a5a8ff115fe25846725762e4ebb666e26 Mon Sep 17 00:00:00 2001 From: gustojs Date: Fri, 18 Aug 2017 20:25:40 +0200 Subject: [PATCH 5/6] Emit a custom 'click' event The story listens for a custom 'click' event emited from `MyButton.vue` component, but `MyButton.vue` lacks such a functionality. When the button is clicked, only an empty method is called. The change I suggested is the less intrusive one, keeping the method code as opposite to removing it and emitting an event directly from the template. --- lib/cli/generators/VUE/template/stories/MyButton.js | 1 + 1 file changed, 1 insertion(+) diff --git a/lib/cli/generators/VUE/template/stories/MyButton.js b/lib/cli/generators/VUE/template/stories/MyButton.js index aea1ebbf27f..785d4c29e53 100644 --- a/lib/cli/generators/VUE/template/stories/MyButton.js +++ b/lib/cli/generators/VUE/template/stories/MyButton.js @@ -23,6 +23,7 @@ export default { methods: { onClick () { + this.$emit('click') } } } From b26ec2d452758876b973a0c1e703080bf5d67878 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Fri, 18 Aug 2017 22:11:32 +0200 Subject: [PATCH 6/6] FIX snapshots --- .../src/__snapshots__/storyshots.test.js.snap | 22 +++++-------------- 1 file changed, 5 insertions(+), 17 deletions(-) diff --git a/examples/cra-kitchen-sink/src/__snapshots__/storyshots.test.js.snap b/examples/cra-kitchen-sink/src/__snapshots__/storyshots.test.js.snap index cc4aa4c9334..87b857bfac7 100644 --- a/examples/cra-kitchen-sink/src/__snapshots__/storyshots.test.js.snap +++ b/examples/cra-kitchen-sink/src/__snapshots__/storyshots.test.js.snap @@ -91,10 +91,7 @@ exports[`Storyshots AddonInfo.DocgenButton DocgenButton 1`] = ` "borderRadius": "2px", "boxShadow": "0px 2px 3px rgba(0, 0, 0, 0.05)", "color": "#444", - "fontFamily": " - -apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", \\"Roboto\\", - \\"Segoe UI\\", \\"Helvetica Neue\\", \\"Lucida Grande\\", sans-serif - ", + "fontFamily": "-apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Roboto\\", \\"Oxygen\\", \\"Ubuntu\\", \\"Cantarell\\", \\"Fira Sans\\", \\"Droid Sans\\", \\"Helvetica Neue\\", \\"Lucida Grande\\", \\"Arial\\", sans-serif", "fontSize": "15px", "fontWeight": 300, "lineHeight": 1.45, @@ -148,10 +145,7 @@ exports[`Storyshots AddonInfo.DocgenButton DocgenButton 1`] = ` Object { "WebkitFontSmoothing": "antialiased", "color": "#444", - "fontFamily": " - -apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", \\"Roboto\\", - \\"Segoe UI\\", \\"Helvetica Neue\\", \\"Lucida Grande\\", sans-serif - ", + "fontFamily": "-apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Roboto\\", \\"Oxygen\\", \\"Ubuntu\\", \\"Cantarell\\", \\"Fira Sans\\", \\"Droid Sans\\", \\"Helvetica Neue\\", \\"Lucida Grande\\", \\"Arial\\", sans-serif", "fontSize": "15px", } } @@ -565,10 +559,7 @@ exports[`Storyshots AddonInfo.FlowTypeButton FlowTypeButton 1`] = ` "borderRadius": "2px", "boxShadow": "0px 2px 3px rgba(0, 0, 0, 0.05)", "color": "#444", - "fontFamily": " - -apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", \\"Roboto\\", - \\"Segoe UI\\", \\"Helvetica Neue\\", \\"Lucida Grande\\", sans-serif - ", + "fontFamily": "-apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Roboto\\", \\"Oxygen\\", \\"Ubuntu\\", \\"Cantarell\\", \\"Fira Sans\\", \\"Droid Sans\\", \\"Helvetica Neue\\", \\"Lucida Grande\\", \\"Arial\\", sans-serif", "fontSize": "15px", "fontWeight": 300, "lineHeight": 1.45, @@ -622,10 +613,7 @@ exports[`Storyshots AddonInfo.FlowTypeButton FlowTypeButton 1`] = ` Object { "WebkitFontSmoothing": "antialiased", "color": "#444", - "fontFamily": " - -apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", \\"Roboto\\", - \\"Segoe UI\\", \\"Helvetica Neue\\", \\"Lucida Grande\\", sans-serif - ", + "fontFamily": "-apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Roboto\\", \\"Oxygen\\", \\"Ubuntu\\", \\"Cantarell\\", \\"Fira Sans\\", \\"Droid Sans\\", \\"Helvetica Neue\\", \\"Lucida Grande\\", \\"Arial\\", sans-serif", "fontSize": "15px", } } @@ -860,7 +848,7 @@ exports[`Storyshots App full app 1`] = ` logo

Welcome to React