update react-with-storybook template for Storybook v6 (#805)

- remove `@storybook/addon-actions`, `@storybook/addon-docs`, `react-docgen-typescript-loader`, and `ts-loader`
  - add`@storybook/addon-essentials`

- significantly simplify Storybook config
  - add JS/JSX support
  - fix a now deprecated globbing pattern

- update the example Story to v6 usage

- add JSDoc comments to example component to display Storybook docs generation
- add a `preview.js` to automatically turn on all actions for event handlers
- update/fix file structure in README

src/templates/react-with-storybook.ts

@@ -6,16 +6,13 @@ const storybookTemplate: Template = {
   dependencies: [
     ...reactTemplate.dependencies,
     '@babel/core',
-    '@storybook/addon-actions',
+    '@storybook/addon-essentials',
     '@storybook/addon-links',
     '@storybook/addon-info',
-    '@storybook/addon-docs',
     '@storybook/addons',
     '@storybook/react',
-    'react-docgen-typescript-loader',
     'react-is',
     'babel-loader',
-    'ts-loader',
   ],
   name: 'react-with-storybook',
   packageJson: {

templates/react-with-storybook/.storybook/main.js

@@ -1,24 +1,4 @@
 module.exports = {
-  stories: ['../stories/**/*.stories.(ts|tsx)'],
-  addons: ['@storybook/addon-actions', '@storybook/addon-links', '@storybook/addon-docs'],
-  webpackFinal: async (config) => {
-    config.module.rules.push({
-      test: /\.(ts|tsx)$/,
-      use: [
-        {
-          loader: require.resolve('ts-loader'),
-          options: {
-            transpileOnly: true,
-          },
-        },
-        {
-          loader: require.resolve('react-docgen-typescript-loader'),
-        },
-      ],
-    });
-
-    config.resolve.extensions.push('.ts', '.tsx');
-
-    return config;
-  },
+  stories: ['../stories/**/*.stories.@(ts|tsx|js|jsx)'],
+  addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
 };

templates/react-with-storybook/.storybook/preview.js

@@ -0,0 +1,5 @@
+// https://storybook.js.org/docs/react/writing-stories/parameters#global-parameters
+export const parameters = {
+  // https://storybook.js.org/docs/react/essentials/actions#automatically-matching-args
+  actions: { argTypesRegex: '^on.*' },
+};

templates/react-with-storybook/README.md

@@ -70,6 +70,11 @@ This is the folder structure we set up for you:
   index.tsx       # EDIT THIS
 /test
   blah.test.tsx   # EDIT THIS
+/stories
+  Thing.stories.tsx # EDIT THIS
+/.storybook
+  main.js
+  preview.js
 .gitignore
 package.json
 README.md         # EDIT THIS

templates/react-with-storybook/src/index.tsx

@@ -1,11 +1,15 @@
 import React, { FC, HTMLAttributes, ReactChild } from 'react';
 
 export interface Props extends HTMLAttributes<HTMLDivElement> {
+  /** custom content, defaults to 'the snozzberries taste like snozzberries' */
   children?: ReactChild;
 }
 
 // Please do not use types off of a default export module or else Storybook Docs will suffer.
 // see: https://github.com/storybookjs/storybook/issues/9556
+/**
+ * A custom Thing component. Neat!
+ */
 export const Thing: FC<Props> = ({ children }) => {
   return <div>{children || `the snozzberries taste like snozzberries`}</div>;
 };

templates/react-with-storybook/stories/Thing.stories.tsx

@@ -1,10 +1,28 @@
 import React from 'react';
+import { Meta, Story } from '@storybook/react';
 import { Thing, Props } from '../src';
 
-export default {
+const meta: Meta = {
   title: 'Welcome',
+  component: Thing,
+  argTypes: {
+    children: {
+      control: {
+        type: 'text',
+      },
+    },
+  },
+  parameters: {
+    controls: { expanded: true },
+  },
 };
 
-// By passing optional props to this story, you can control the props of the component when
-// you consume the story in a test.
-export const Default = (props?: Partial<Props>) => <Thing {...props} />;
+export default meta;
+
+const Template: Story<Props> = args => <Thing {...args} />;
+
+// By passing using the Args format for exported stories, you can control the props for a component for reuse in a test
+// https://storybook.js.org/docs/react/workflows/unit-testing
+export const Default = Template.bind({});
+
+Default.args = {};