feat(storybook): upgrade to 5.3.0, prepare for addon-docs

* addon-docs needs the component to be explicitly configured for
  property docs to be generated

references #119

.storybook/addons.js

@@ -0,0 +1 @@
+import "@storybook/addon-info";

.storybook/webpack.config.js → .storybook/main.js

@@ -1,27 +1,31 @@
 const path = require('path')
 
-module.exports = ({ config }) => {
-  config.module.rules = config.module.rules.filter(
-    (rule) => rule.test.toString() !== '/\\.css$/'
-  )
-
+const webpackConfig = (config) => {
   config.module.rules.push({
     test: /\.(ts|tsx)$/,
     include: path.resolve(__dirname, '../src'),
     use: [
       {
-        loader: require.resolve('awesome-typescript-loader'),
+        loader: 'awesome-typescript-loader',
       },
       {
-        loader: require.resolve('react-docgen-typescript-loader'),
+        loader: 'react-docgen-typescript-loader',
+        options: {
+          tsconfigPath: path.resolve(__dirname, '../tsconfig.json'),
+        },
       },
     ],
   })
+  config.resolve.extensions.push('.ts', '.tsx')
 
+  config.module.rules = config.module.rules.filter(
+    (rule) => rule.test.toString() !== '/\\.css$/'
+  )
   config.module.rules.push({
     test: /\.(sa|sc|c)ss$/,
     exclude: /\.module\.(sa|sc|c)ss$/i,
     use: ['style-loader', 'css-loader', 'sass-loader'],
+    include: path.resolve(__dirname, '../'),
   })
 
   config.module.rules.push({
@@ -46,7 +50,14 @@ module.exports = ({ config }) => {
       },
     ],
   })
-  config.resolve.extensions.push('.ts', '.tsx')
 
   return config
 }
+
+module.exports = {
+  stories: ['../src/**/*.stories.@(ts|tsx)'],
+  addons: ['happo-plugin-storybook'],
+  webpackFinal: async (config) => {
+    return webpackConfig(config)
+  },
+}

.storybook/preview.js

@@ -0,0 +1,7 @@
+import { addDecorator } from '@storybook/react'
+import { withInfo } from '@storybook/addon-info'
+
+import 'uswds/dist/css/uswds.css'
+import '../src/styles/index.scss'
+
+addDecorator(withInfo)

package.json

@@ -70,8 +70,8 @@
   "devDependencies": {
     "@babel/core": "^7.6.2",
     "@babel/preset-react": "^7.0.0",
-    "@storybook/addon-info": "^5.2.3",
-    "@storybook/react": "^5.2.1",
+    "@storybook/addon-info": "^5.3.19",
+    "@storybook/react": "^5.3.19",
     "@storybook/storybook-deployer": "^2.8.6",
     "@testing-library/jest-dom": "^5.3.0",
     "@testing-library/react": "^10.0.1",
@@ -106,7 +106,7 @@
     "lint-staged": "^10.0.9",
     "mini-css-extract-plugin": "^0.9.0",
     "prettier": "^2.0.2",
-    "react-docgen-typescript-loader": "^3.3.0",
+    "react-docgen-typescript-loader": "^3.7.2",
     "react-test-renderer": "^16.12.0",
     "sass": "^1.26.0",
     "sass-loader": "^9.0.2",

src/components/Accordion/Accordion.stories.tsx

@@ -3,6 +3,7 @@ import { Accordion } from './Accordion'
 
 export default {
   title: 'Accordion',
+  component: Accordion,
   parameters: {
     info: `
 USWDS 2.0 Accordion component

src/components/Alert/Alert.stories.tsx

@@ -5,6 +5,7 @@ import { Button } from '../Button/Button'
 
 export default {
   title: 'Alert',
+  component: Alert,
   parameters: {
     info: `
 USWDS 2.0 Alert component

src/components/Button/Button.stories.tsx

@@ -3,6 +3,7 @@ import { Button } from './Button'
 
 export default {
   title: 'Button',
+  component: Button,
   parameters: {
     info: `
 USWDS 2.0 Button component

src/components/Footer/Address/Address.stories.tsx

@@ -3,6 +3,7 @@ import { Address } from './Address'
 
 export default {
   title: 'Footer/Address',
+  component: Address,
   parameters: {
     info: `
       Display address items (most likely links or simple text) in a row, wrapped in address tag.  Used in USWDS 2.0 Footer component.

src/components/Footer/Footer/Footer.stories.tsx

@@ -16,6 +16,7 @@ import logoImg from 'uswds/dist/img/logo-img.png'
 
 export default {
   title: 'Footer/Footer',
+  component: Footer,
   parameters: {
     info: `
   USWDS 2.0 Footer component

src/components/Footer/FooterNav/FooterNav.stories.tsx

@@ -6,6 +6,7 @@ import { FooterNav } from './FooterNav'
 
 export default {
   title: 'Footer/FooterNav',
+  component: FooterNav,
   parameters: {
     info: `
      Display single list of nav items, or grouped nav items in an extended nav. Used in USWDS 2.0 Footer component.

src/components/Footer/Logo/Logo.stories.tsx

@@ -7,6 +7,7 @@ import logoImg from 'uswds/src/img/logo-img.png'
 
 export default {
   title: 'Footer/Logo',
+  component: Logo,
   parameters: {
     info: `
     Display logo image with optional heading.  Used in USWDS 2.0 Footer component.

src/components/Footer/SocialLinks/SocialLinks.stories.tsx

@@ -4,6 +4,7 @@ import { SocialLinks } from './SocialLinks'
 
 export default {
   title: 'Footer/SocialLinks',
+  component: SocialLinks,
   parameters: {
     info: `
     Display social links in styled row. Used in USWDS 2.0 Footer component.

src/components/Link/Link.stories.tsx

@@ -3,6 +3,7 @@ import { Link } from './Link'
 
 export default {
   title: 'Link',
+  component: Link,
   parameters: {
     info: `Link component
 

src/components/Modal/Modal.stories.tsx

@@ -6,6 +6,7 @@ import { Modal, Overlay, ModalContainer, connectModal, useModal } from './Modal'
 
 export default {
   title: 'Modal',
+  component: Modal,
   parameters: {
     info: `Truss-designed component`,
   },

src/components/Search/Search.stories.tsx

@@ -3,6 +3,7 @@ import { Search } from './Search'
 
 export default {
   title: 'Search',
+  component: Search,
   parameters: {
     info: `
 USWDS 2.0 Search component

src/components/SideNav/SideNav.stories.tsx

@@ -3,6 +3,7 @@ import { SideNav } from './SideNav'
 
 export default {
   title: 'SideNav',
+  component: SideNav,
 }
 
 const testItems = [

src/components/Table/Table.stories.tsx

@@ -3,6 +3,7 @@ import { Table } from './Table'
 
 export default {
   title: 'Table',
+  component: Table,
   parameters: {
     info: `
 USWDS 2.0 Table component

src/components/Tag/Tag.stories.tsx

@@ -3,6 +3,7 @@ import { Tag } from './Tag'
 
 export default {
   title: 'Tag',
+  component: Tag,
   parameters: {
     info: `
 USWDS 2.0 Tag component

src/components/card/Card.stories.tsx

@@ -10,6 +10,7 @@ import { Button } from '../Button/Button'
 
 export default {
   title: 'Card',
+  component: Card,
   parameters: {
     info: `
 USWDS 2.0 Card components
@@ -408,7 +409,7 @@ export const cardTest = (): React.ReactElement => (
       </CardHeader>
       <CardMedia className="usa-card__media--fix-aspect" aria-hidden="true">
         <img
-          src="https://images.unsplash.com/photo-1497904413339-99e9d634f305?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=600&ixid=eyJhcHBfaWQiOjF9&ixlib=rb-1.2.1&q=80&w=800
"
+          src="https://images.unsplash.com/photo-1497904413339-99e9d634f305?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=600&ixid=eyJhcHBfaWQiOjF9&ixlib=rb-1.2.1&q=80&w=800"
           alt=""
         />
       </CardMedia>

src/components/forms/Checkbox/Checkbox.stories.tsx

@@ -3,6 +3,7 @@ import { Checkbox } from './Checkbox'
 
 export default {
   title: 'Forms/Checkbox',
+  component: Checkbox,
   parameters: {
     info: `
 USWDS 2.0 Checkbox component

src/components/forms/DateInput/DateInput.stories.tsx

@@ -5,6 +5,7 @@ import { Fieldset } from '../Fieldset/Fieldset'
 
 export default {
   title: 'Forms/DateInput',
+  component: DateInput,
   parameters: {
     info: `
 USWDS 2.0 DateInput component

src/components/forms/Dropdown/Dropdown.stories.tsx

@@ -5,6 +5,7 @@ import { Label } from '../Label/Label'
 
 export default {
   title: 'Forms/Dropdown',
+  component: Dropdown,
   parameters: {
     info: `
 USWDS 2.0 Dropdown component

src/components/forms/ErrorMessage/ErrorMessage.stories.tsx

@@ -3,6 +3,7 @@ import { ErrorMessage } from './ErrorMessage'
 
 export default {
   title: 'Forms/ErrorMessage',
+  component: ErrorMessage,
   parameters: {
     info: `
 USWDS 2.0 ErrorMessage component

src/components/forms/Fieldset/Fieldset.stories.tsx

@@ -8,6 +8,7 @@ import { Radio } from '../Radio/Radio'
 
 export default {
   title: 'Forms/Fieldset',
+  component: Fieldset,
   parameters: {
     info: `
 USWDS 2.0 Fieldset component

src/components/forms/Form/Form.stories.tsx

@@ -14,6 +14,7 @@ import { Textarea } from '../Textarea/Textarea'
 
 export default {
   title: 'Forms/Form',
+  component: Form,
   parameters: {
     info: `
 USWDS 2.0 Form component

src/components/forms/FormGroup/FormGroup.stories.tsx

@@ -7,6 +7,7 @@ import { ErrorMessage } from '../ErrorMessage/ErrorMessage'
 
 export default {
   title: 'Forms/FormGroup',
+  component: FormGroup,
   parameters: {
     info: `
 USWDS 2.0 FormGroup component

src/components/forms/Label/Label.stories.tsx

@@ -3,6 +3,7 @@ import { Label } from './Label'
 
 export default {
   title: 'Forms/Label',
+  component: Label,
   parameters: {
     info: `
 USWDS 2.0 Label component

src/components/forms/Radio/Radio.stories.tsx

@@ -3,6 +3,7 @@ import { Radio } from './Radio'
 
 export default {
   title: 'Forms/Radio',
+  component: Radio,
   parameters: {
     info: `
 USWDS 2.0 Radio component

src/components/forms/RangeInput/RangeInput.stories.tsx

@@ -4,6 +4,7 @@ import { Label } from '../Label/Label'
 
 export default {
   title: 'Forms/RangeInput',
+  component: RangeInput,
   parameters: {
     info: `
 USWDS 2.0 RangeInput component

src/components/forms/TextInput/TextInput.stories.tsx

@@ -3,6 +3,7 @@ import { TextInput } from './TextInput'
 
 export default {
   title: 'Forms/TextInput',
+  component: TextInput,
   parameters: {
     info: `
 USWDS 2.0 TextInput component

src/components/forms/Textarea/Textarea.stories.tsx

@@ -3,6 +3,7 @@ import { Textarea } from './Textarea'
 
 export default {
   title: 'Forms/Textarea',
+  component: Textarea,
   parameters: {
     info: `
 USWDS 2.0 Textarea component

src/components/grid/Grid.stories.tsx

@@ -5,6 +5,7 @@ import { Grid } from './Grid/Grid'
 
 export default {
   title: 'Grid',
+  component: Grid,
   parameters: {
     info: `
 USWDS 2.0 Grid components

src/components/header/ExtendedNav/ExtendedNav.stories.tsx

@@ -3,6 +3,7 @@ import { ExtendedNav } from './ExtendedNav'
 
 export default {
   title: 'Header/ExtendedNav',
+  component: ExtendedNav,
   parameters: {
     info: `
 USWDS 2.0 ExtendedNav component used within the Header component

src/components/header/Header/Header.stories.tsx

@@ -12,6 +12,7 @@ import { ExtendedNav } from '../ExtendedNav/ExtendedNav'
 
 export default {
   title: 'Header/Header',
+  component: Header,
   parameters: {
     info: `
 USWDS 2.0 Header component

src/components/header/MegaMenu/MegaMenu.stories.tsx

@@ -3,6 +3,7 @@ import { MegaMenu } from './MegaMenu'
 
 export default {
   title: 'Header/MegaMenu',
+  component: MegaMenu,
   parameters: {
     info: `
 USWDS 2.0 MegaMenu component used within the Header component

src/components/header/Menu/Menu.stories.tsx

@@ -3,6 +3,7 @@ import { Menu } from './Menu'
 
 export default {
   title: 'Header/Menu',
+  component: Menu,
   parameters: {
     info: `
 USWDS 2.0 Menu component used within the Header component

src/components/header/NavCloseButton/NavCloseButton.stories.tsx

@@ -3,6 +3,7 @@ import { NavCloseButton } from './NavCloseButton'
 
 export default {
   title: 'Header/NavCloseButton',
+  component: NavCloseButton,
   parameters: {
     info: `
 USWDS 2.0 NavCloseButton Component used within the Header component

src/components/header/NavDropDownButton/NavDropDownButton.stories.tsx

@@ -5,6 +5,7 @@ import { PrimaryNav } from '../PrimaryNav/PrimaryNav'
 
 export default {
   title: 'Header/NavDropDownButton',
+  component: NavDropDownButton,
   parameters: {
     info: `
 USWDS 2.0 NavDropDownButton component used within the Header component

src/components/header/NavList/NavList.stories.tsx

@@ -3,6 +3,7 @@ import { NavList } from './NavList'
 
 export default {
   title: 'Header/NavList',
+  component: NavList,
   parameters: {
     info: `
 USWDS 2.0 NavList component used within the Header component

src/components/header/NavMenuButton/NavMenuButton.stories.tsx

@@ -3,6 +3,7 @@ import { NavMenuButton } from './NavMenuButton'
 
 export default {
   title: 'Header/NavMenuButton',
+  component: NavMenuButton,
   parameters: {
     info: `
 USWDS 2.0 NavMenuButton used within the Header component