Integrate new Storybook config (#435)

* Add new dependencies for Docs

* Update config

* Redefine demo component and story

Author: Kyle Holmberg

src/templates/react-with-storybook.ts

@@ -8,8 +8,12 @@ const storybookTemplate: Template = {
     '@babel/core',
     '@storybook/addon-actions',
     '@storybook/addon-links',
+    '@storybook/addon-info',
+    '@storybook/addon-docs',
     '@storybook/addons',
     '@storybook/react',
+    'react-docgen-typescript-loader',
+    'react-is',
     'babel-loader',
     'ts-loader',
   ],

templates/react-with-storybook/.storybook/addons.ts

@@ -0,0 +1,24 @@
+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;
+  },
+};

templates/react-with-storybook/.storybook/config.ts

@@ -1,6 +1,11 @@
-import * as React from 'react';
+import React, { FC, HTMLAttributes, ReactChild } from 'react';
 
-// Delete me
-export const Thing = () => {
-  return <div>the snozzberries taste like snozzberries</div>;
+export interface Props extends HTMLAttributes<HTMLDivElement> {
+  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
+export const Thing: FC<Props> = ({ children }) => {
+  return <div>{children || `the snozzberries taste like snozzberries`}</div>;
 };

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

@@ -0,0 +1,10 @@
+import React from 'react';
+import { Thing, Props } from '../src';
+
+export default {
+  title: 'Welcome',
+};
+
+// 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} />;

templates/react-with-storybook/.storybook/webpack.config.js

@@ -1,8 +1,8 @@
-import * as React from 'react';
+import React from 'react';
 import * as ReactDOM from 'react-dom';
-import { Thing } from '../src';
+import { Default as Thing } from '../stories/Thing.stories';
 
-describe('it', () => {
+describe('Thing', () => {
   it('renders without crashing', () => {
     const div = document.createElement('div');
     ReactDOM.render(<Thing />, div);