refactor: update example of storybook (#17936)

## Change

- Update package versions
- Replace @storybook/addons, @storybook/addon-actions to @storybook/addon-essentials
- Replace examples of button, the action function is legacy: https://storybook.js.org/docs/react/essentials/actions#advanced--legacy-usage

examples/with-storybook/.storybook/main.js

@@ -1,4 +1,4 @@
 module.exports = {
   stories: ['../stories/*.stories.@(ts|tsx|js|jsx|mdx)'],
-  addons: ['@storybook/addon-actions', '@storybook/addon-links'],
+  addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
 }

examples/with-storybook/package.json

@@ -16,10 +16,9 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@storybook/addon-actions": "6.0.5",
+    "@storybook/addon-essentials": "6.0.26",
-    "@storybook/addon-links": "6.0.5",
+    "@storybook/addon-links": "6.0.26",
-    "@storybook/addons": "6.0.5",
+    "@storybook/react": "6.0.26",
-    "@storybook/react": "6.0.5",
     "babel-loader": "^8.0.5"
   }
 }

examples/with-storybook/stories/button.stories.js

@@ -1,17 +1,25 @@
 import React from 'react'
-import { action } from '@storybook/addon-actions'
 import { Button } from '@storybook/react/demo'
 
-export default { title: 'Button' }
+export default {
+  title: 'Button',
+  argTypes: { onClick: { action: 'clicked' } },
+}
 
-export const withText = () => (
+const TemplateWithText = (args) => <Button {...args}>Hello Button</Button>
-  <Button onClick={action('clicked')}>Hello Button</Button>
-)
 
-export const withSomeEmoji = () => (
+const TemplateWithEmoji = (args) => (
-  <Button onClick={action('clicked')}>
+  <Button {...args}>
     <span role="img" aria-label="so cool">
       😀 😎 👍 💯
     </span>
   </Button>
 )
+
+export const withText = TemplateWithText.bind({})
+
+withText.args = {}
+
+export const withSomeEmoji = TemplateWithEmoji.bind({})
+
+withSomeEmoji.args = {}