Merge origin/next

2025-03-17 05:02:23 +08:00 · 2020-02-22 21:01:58 +01:00 · 2020-02-22 21:01:58 +01:00 · 98ce57e65b
commit 98ce57e65b
parent f84afe50a5 9c9c52600b
347 changed files with 9781 additions and 4046 deletions
--- a/.ci/danger/dangerfile.ts
+++ b/.ci/danger/dangerfile.ts
@ -3,7 +3,9 @@ import { execSync } from 'child_process';

 execSync('npm install lodash');

-const { flatten, intersection, isEmpty } = require('lodash');
+const flatten = require('lodash/flatten');
+const intersection = require('lodash/intersection');
+const isEmpty = require('lodash/isEmpty');

 const pkg = require('../../package.json'); // eslint-disable-line import/newline-after-import
 const prLogConfig = pkg['pr-log'];
--- a/.eslintrc.js
+++ b/.eslintrc.js
@ -1,46 +1,11 @@
 module.exports = {
  root: true,
  extends: ['@storybook/eslint-config-storybook'],
-  rules: {
-    'import/extensions': [
-      'error',
-      'never',
-      { ignorePackages: true, md: 'always', svg: 'always', json: 'always', tag: 'always' },
-    ],
-    'import/no-unresolved': ['error', { ignore: ['@storybook'] }],
-    'react/state-in-constructor': 'off',
-    'react/static-property-placement': 'off',
-    'react/jsx-props-no-spreading': 'off',
-    'react/jsx-fragments': 'off',
-    '@typescript-eslint/ban-ts-ignore': 'off',
-    '@typescript-eslint/no-object-literal-type-assertion': 'off',
-    '@typescript-eslint/no-empty-function': 'off',
-    'react/sort-comp': [
-      'error',
-      {
-        order: [
-          'staticLifecycle',
-          'static-methods',
-          'instance-variables',
-          'lifecycle',
-          '/^on.+$/',
-          '/^(get|set)(?!(DerivedStateFromProps|SnapshotBeforeUpdate$)).+$/',
-          'instance-methods',
-          'instance-variables',
-          'everything-else',
-          'render',
-        ],
-        groups: {
-          staticLifecycle: ['displayName', 'propTypes', 'defaultProps', 'getDerivedStateFromProps'],
-        },
-      },
-    ],
-    'max-classes-per-file': 'off',
-  },
  overrides: [
    {
      files: [
        '**/__tests__/**',
+        '**/__testfixtures__/**',
        '**/*.test.*',
        '**/*.stories.*',
        '**/storyshots/**/stories/**',
--- a/.github/workflows/tests-cli.yml
+++ b/.github/workflows/tests-cli.yml
@ -1,6 +1,6 @@
 name: CLI tests

-on: 
+on:
  push
  # push:
 # disabled for now:
@ -33,6 +33,30 @@ jobs:
    - name: cli
      run: |
        yarn test --cli
+  cli-yarn-2:
+    name: CLI Fixtures with Yarn 2
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/setup-node@v1
+      with:
+        node-version: '10.x'
+    - uses: actions/checkout@v1
+    - name: Cache node modules
+      uses: actions/cache@v1
+      with:
+        path: node_modules
+        key: ${{ runner.OS }}-build-${{ hashFiles('**/yarn.lock') }}
+        restore-keys: |
+          ${{ runner.OS }}-build-${{ env.cache-name }}-
+          ${{ runner.OS }}-build-
+          ${{ runner.OS }}-
+    - name: install, bootstrap
+      run: |
+        yarn bootstrap --core
+    - name: cli with Yarn 2
+      run: |
+        cd lib/cli
+        yarn test-yarn-2
  latest-cra:
    name: Latest CRA
    runs-on: ubuntu-latest
@ -46,4 +70,4 @@ jobs:
        yarn bootstrap --core
    - name: latest-cra
      run: |
-        yarn test-latest-cra
+        yarn test-latest-cra
--- a/.gitignore
+++ b/.gitignore
@ -7,6 +7,7 @@ node_modules
 *.sw*
 npm-shrinkwrap.json
 dist
+ts3.5
 .tern-port
 *.DS_Store
 .cache
--- a/.prettierignore
+++ b/.prettierignore
@ -1 +0,0 @@
-.yarn
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
--- a/MIGRATION.md
+++ b/MIGRATION.md
@ -3,7 +3,10 @@
 - [Migration](#migration)
  - [From version 5.3.x to 6.0.x](#from-version-53x-to-60x)
    - [New addon presets](#new-addon-presets)
-    - [Removed legacy story APIs](#removed-legacy-story-apis)
+    - [Client API changes](#client-api-changes)
+      - [Removed legacy story APIs](#removed-legacy-story-apis)
+      - [Can no longer add decorators/parameters after stories](#can-no-longer-add-decorators-parameters-after-stories)
+      - [Changed Parameter Handling](#changed-parameter-handling)
  - [From version 5.2.x to 5.3.x](#from-version-52x-to-53x)
    - [To main.js configuration](#to-mainjs-configuration)
    - [Create React App preset](#create-react-app-preset)
@ -126,7 +129,9 @@ MyNonCheckedStory.story = {
 };
 ```

-### Removed Legacy Story APIs
+### Client API changes
+
+#### Removed Legacy Story APIs

 In 6.0 we removed a set of APIs from the underlying `StoryStore` (which wasn't publicly accessible):

@ -134,6 +139,48 @@ In 6.0 we removed a set of APIs from the underlying `StoryStore` (which wasn't p

 Although these were private APIs, if you were using them, you could probably use the newer APIs (which are still private): `getStoriesForKind`, `getRawStory`, `removeStoryKind`, `remove`.

+#### Can no longer add decorators/parameters after stories
+
+You can no longer add decorators and parameters globally after you added your first story, and you can no longer add decorators and parameters to a kind after you've added your first story to it.
+
+It unclear and confusing what happened if you did. If you want to disable a decorator for certain stories, use a parameter to do so:
+
+```js
+export StoryOne = ...;
+StoryOne.story = { parameters: { addon: { disable: true } } };
+```
+
+If you want to use a parameter for a subset of stories in a kind, simply use a variable to do so:
+
+```js
+const commonParameters = { x: { y: 'z' } };
+export StoryOne = ...;
+StoryOne.story = { parameters: { ...commonParameters, other: 'things' } };
+```
+
+#### Changed Parameter Handling
+
+There have been a few rationalizations of parameter handling in 6.0 to make things more predictable and fit better with the intention of parameters:
+
+_All parameters are now merged recursively to arbitrary depth._
+
+In 5.3 we sometimes merged parameters all the way down and sometimes did not depending on where you added them. It was confusing. If you were relying on this behaviour, let us know.
+
+_Array parameters are no longer "merged"._
+
+If you override an array parameter, the override will be the end product. If you want the old behaviour (appending a new value to an array parameter), export the original and use array spread. This will give you maximum flexibility:
+
+```js
+import { allBackgrounds } from './util/allBackgrounds';
+
+export StoryOne = ...;
+StoryOne.story = { parameters: { backgrounds: [...allBackgrounds, '#zyx' ] } };
+```
+
+_You cannot set parameters from decorators_
+
+Parameters are intended to be statically set at story load time. So setting them via a decorator doesn't quite make sense. If you were using this to control the rendering of a story, chances are using the new `args` feature is a more idiomatic way to do this.
+
 ## From version 5.2.x to 5.3.x

 ### To main.js configuration
@ -236,14 +283,14 @@ To avoid that now you have to manually pass asyncStorage to React Native Storybo

 Solution:

- Use `require('@react-native-community/async-storage').AsyncStorage` for React Native v0.59 and above.
+- Use `require('@react-native-community/async-storage').default` for React Native v0.59 and above.
 - Use `require('react-native').AsyncStorage` for React Native v0.58 or below.
 - Use `null` to disable Async Storage completely.

 ```javascript
 getStorybookUI({
  ...
-  asyncStorage: require('@react-native-community/async-storage').AsyncStorage || require('react-native').AsyncStorage || null
+  asyncStorage: require('@react-native-community/async-storage').default || require('react-native').AsyncStorage || null
 });
 ```

--- a/README.md
+++ b/README.md
@ -123,7 +123,7 @@ For additional help, join us [in our Discord](https://discord.gg/sMFvFsG) or [Sl
 | [Riot](app/riot)                 | [v5.1.0](https://storybooks-riot.netlify.com/)    | [![Riot](https://img.shields.io/npm/dm/@storybook/riot.svg)](app/riot)                         |
 | [Ember](app/ember)               | [v5.1.0](https://storybooks-ember.netlify.com/)   | [![Ember](https://img.shields.io/npm/dm/@storybook/ember.svg)](app/ember)                      |
 | [Preact](app/preact)             | [v5.1.0](https://storybooks-preact.netlify.com/)  | [![Preact](https://img.shields.io/npm/dm/@storybook/preact.svg)](app/preact)                   |
-| [Rax](app/rax)             | [v5.1.0](https://storybooks-rax.netlify.com/)  | [![Rax](https://img.shields.io/npm/dm/@storybook/rax.svg)](app/rax)                   |
+| [Rax](app/rax)             | [v5.1.0](https://storybookjs.netlify.com/)  | [![Rax](https://img.shields.io/npm/dm/@storybook/rax.svg)](app/rax)                   |

 ### Sub Projects

--- a/ROADMAP.md
+++ b/ROADMAP.md
@ -1,88 +0,0 @@
-# Roadmap
-
-## Table of contents
-
-* [New features](#new-features)
-  + [Responsive + multi-device viewports preview.](#responsive--multi-device-viewports-preview)
-  + [Automatic story detection](#automatic-story-detection)
-  + [Theme ability and override core UI components](#theme-ability-and-override-core-ui-components)
-  + [Add a playground addon](#add-a-playground-addon)
-  + [See multiple (or all) stories in 1 preview.](#see-multiple--or-all--stories-in-1-preview)
-* [Supporting other frameworks and libraries](#supporting-other-frameworks-and-libraries)
-  + [Aurelia](#aurelia)
-* [Breaking changes](#breaking-changes)
-  + [Addon API](#addon-api)
-  + [API for adding stories](#api-for-adding-stories)
-* [Documentation](#documentation)
-  + [Better design](#better-design)
-  + [Record videos and write blog post on how to use, tweak & develop storybook](#record-videos-and-write-blog-post-on-how-to-use--tweak---develop-storybook)
-
-## New features
-
-Doing these will be backwards compatible.
-
-### Responsive + multi-device viewports preview.
-
-If you're smart about it you can already view the preview on multiple devices and windows. It's an iframe after-all.
-But story selection and addon-settings are not synced.
-We want to make this much much simpler and a core feature of storybook.
-
-### Automatic story detection
-
-Some tools are doing automatic file detection, jest for example.
-We think such a feature is highly needed. A lot of users are already hacking this themselves using webpack specific features.
-
-### Themeability and override core UI components
-
-Storybook is often used inside product companies and agencies. We want to help them have a sense of quality and immersion.
-We're interested in full customizability of our UI, though addons and options.
-
-### Add a playground addon
-
-Many other styleguide-type projects have what's called a playground, where developers can change the code rendering the component inside the app.
-Storybook has a very tight connection with your editor, and it has a knobs addon.
-But we still see value in an addon that will allow the workflow of a playground.
-
-### See multiple (or all) stories in 1 preview.
-
-Storybook's philosophy is about describing small bits in a variety of states.
-However, some components are best understood when viewed in multiple varieties in 1 view.
-It's quite common to see users write a single story, with wrapper components and multiple instances of the component the story is about.
-We plan to add a second mode to storybook that will allow you to see all stories in 1 preview.
-That way you can write your stories how they are best, and preview them how you like.
-
-## Supporting other frameworks and libraries
-
-We believe in the power of react, and think it's the right choice for a lot of projects.
-But it's up to you and your team to decide your stack.
-Unfortunately, if you choose anything not from the list of [supported frameworks](README.md#supported-frameworks) you can not use storybook.
-
-We want you to be able to use storybook with the framework / library of your choice.
-
-### Aurelia
-
-We're reaching out to the Aurelia maintainers to cooperate on this.
-
-## Breaking changes
-
-### Addon API
-
-Our addon api is limited and will eventually have to be improved to accommodate better more optimized and modern addons.
-
-### API for adding stories
-
-Currently, it's getting hard to set up a story that has data/options for multiple addons.
-We want to support this but will likely mean we will have to change the `add` method's API.
-
-## Documentation
-
-### Better design
-
-We have a new logo, so the next step is an overhaul of our documentation site.
-
-### Record videos and write blog posts on how to use, tweak & develop storybook
-
-   writing addons,
-   choosing the right addons.
-   how to start developing on our codebase.
-   how to use storybook itself and the CLI.
--- a/mocks/fs.js
+++ b/mocks/fs.js
@ -14,10 +14,14 @@ function __setMockFiles(newMockFiles) {
 // file list set via __setMockFiles
 const readFileSync = (filePath = '') => mockFiles[filePath];
 const existsSync = filePath => !!mockFiles[filePath];
+const lstatSync = filePath => ({
+  isFile: () => !!mockFiles[filePath],
+});

 // eslint-disable-next-line no-underscore-dangle
 fs.__setMockFiles = __setMockFiles;
 fs.readFileSync = readFileSync;
 fs.existsSync = existsSync;
+fs.lstatSync = lstatSync;

 module.exports = fs;
--- a/addons/a11y/package.json
+++ b/addons/a11y/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-a11y",
-  "version": "6.0.0-alpha.10",
+  "version": "6.0.0-alpha.18",
  "description": "a11y addon for storybook",
  "keywords": [
    "a11y",
@ -26,19 +26,20 @@
    "dist/**/*",
    "README.md",
    "*.js",
-    "*.d.ts"
+    "*.d.ts",
+    "ts3.5/**/*"
  ],
  "scripts": {
    "prepare": "node ../../scripts/prepare.js"
  },
  "dependencies": {
-    "@storybook/addons": "6.0.0-alpha.10",
-    "@storybook/api": "6.0.0-alpha.10",
-    "@storybook/client-api": "6.0.0-alpha.10",
-    "@storybook/client-logger": "6.0.0-alpha.10",
-    "@storybook/components": "6.0.0-alpha.10",
-    "@storybook/core-events": "6.0.0-alpha.10",
-    "@storybook/theming": "6.0.0-alpha.10",
+    "@storybook/addons": "6.0.0-alpha.18",
+    "@storybook/api": "6.0.0-alpha.18",
+    "@storybook/client-api": "6.0.0-alpha.18",
+    "@storybook/client-logger": "6.0.0-alpha.18",
+    "@storybook/components": "6.0.0-alpha.18",
+    "@storybook/core-events": "6.0.0-alpha.18",
+    "@storybook/theming": "6.0.0-alpha.18",
    "axe-core": "^3.3.2",
    "core-js": "^3.0.1",
    "global": "^4.3.2",
@ -47,19 +48,27 @@
    "react-redux": "^7.0.2",
    "react-sizeme": "^2.5.2",
    "redux": "^4.0.1",
+    "regenerator-runtime": "^0.13.3",
    "ts-dedent": "^1.1.1",
    "util-deprecate": "^1.0.2"
  },
  "devDependencies": {
    "@types/react-redux": "^7.0.6",
-    "@types/webpack-env": "^1.15.1"
+    "@types/webpack-env": "^1.15.1",
+    "enzyme": "^3.11.0"
  },
  "peerDependencies": {
-    "react-dom": "*",
-    "regenerator-runtime": "*"
+    "react-dom": "*"
  },
  "publishConfig": {
    "access": "public"
  },
-  "gitHead": "4b9d901add9452525135caae98ae5f78dd8da9ff"
+  "gitHead": "4b9d901add9452525135caae98ae5f78dd8da9ff",
+  "typesVersions": {
+    "<=3.5": {
+      "*": [
+        "ts3.5/*"
+      ]
+    }
+  }
 }
--- a/addons/a11y/src/components/Report/Item.tsx
+++ b/addons/a11y/src/components/Report/Item.tsx
@ -84,7 +84,7 @@ export const Item = (props: ItemProps) => {
          <HighlightToggle
            toggleId={highlightToggleId}
            type={type}
-            elementsToHighlight={item ? item.nodes : null}
+            elementsToHighlight={item.nodes}
          />
        </HighlightToggleElement>
      </Wrapper>
--- a/addons/a11y/src/preset/addDecorator.ts
+++ b/addons/a11y/src/preset/addDecorator.ts
@ -1,4 +1,3 @@
-import { addDecorator } from '@storybook/client-api';
 import { withA11Y } from '../index';

-addDecorator(withA11Y);
+export const decorators = [withA11Y];
--- a/addons/actions/package.json
+++ b/addons/actions/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-actions",
-  "version": "6.0.0-alpha.10",
+  "version": "6.0.0-alpha.18",
  "description": "Action Logger addon for storybook",
  "keywords": [
    "storybook"
@ -21,18 +21,19 @@
    "dist/**/*",
    "README.md",
    "*.js",
-    "*.d.ts"
+    "*.d.ts",
+    "ts3.5/**/*"
  ],
  "scripts": {
    "prepare": "node ../../scripts/prepare.js"
  },
  "dependencies": {
-    "@storybook/addons": "6.0.0-alpha.10",
-    "@storybook/api": "6.0.0-alpha.10",
-    "@storybook/client-api": "6.0.0-alpha.10",
-    "@storybook/components": "6.0.0-alpha.10",
-    "@storybook/core-events": "6.0.0-alpha.10",
-    "@storybook/theming": "6.0.0-alpha.10",
+    "@storybook/addons": "6.0.0-alpha.18",
+    "@storybook/api": "6.0.0-alpha.18",
+    "@storybook/client-api": "6.0.0-alpha.18",
+    "@storybook/components": "6.0.0-alpha.18",
+    "@storybook/core-events": "6.0.0-alpha.18",
+    "@storybook/theming": "6.0.0-alpha.18",
    "core-js": "^3.0.1",
    "fast-deep-equal": "^3.1.1",
    "global": "^4.3.2",
@ -40,6 +41,7 @@
    "prop-types": "^15.7.2",
    "react": "^16.8.3",
    "react-inspector": "^4.0.0",
+    "regenerator-runtime": "^0.13.3",
    "uuid": "^3.3.2"
  },
  "devDependencies": {
@ -48,11 +50,17 @@
    "@types/webpack-env": "^1.15.1"
  },
  "peerDependencies": {
-    "react-dom": "*",
-    "regenerator-runtime": "*"
+    "react-dom": "*"
  },
  "publishConfig": {
    "access": "public"
  },
-  "gitHead": "4b9d901add9452525135caae98ae5f78dd8da9ff"
+  "gitHead": "4b9d901add9452525135caae98ae5f78dd8da9ff",
+  "typesVersions": {
+    "<=3.5": {
+      "*": [
+        "ts3.5/*"
+      ]
+    }
+  }
 }
--- a/addons/backgrounds/package.json
+++ b/addons/backgrounds/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-backgrounds",
-  "version": "6.0.0-alpha.10",
+  "version": "6.0.0-alpha.18",
  "description": "A storybook addon to show different backgrounds for your preview",
  "keywords": [
    "addon",
@ -25,21 +25,23 @@
    "dist/**/*",
    "README.md",
    "*.js",
-    "*.d.ts"
+    "*.d.ts",
+    "ts3.5/**/*"
  ],
  "scripts": {
    "prepare": "node ../../scripts/prepare.js"
  },
  "dependencies": {
-    "@storybook/addons": "6.0.0-alpha.10",
-    "@storybook/api": "6.0.0-alpha.10",
-    "@storybook/client-logger": "6.0.0-alpha.10",
-    "@storybook/components": "6.0.0-alpha.10",
-    "@storybook/core-events": "6.0.0-alpha.10",
-    "@storybook/theming": "6.0.0-alpha.10",
+    "@storybook/addons": "6.0.0-alpha.18",
+    "@storybook/api": "6.0.0-alpha.18",
+    "@storybook/client-logger": "6.0.0-alpha.18",
+    "@storybook/components": "6.0.0-alpha.18",
+    "@storybook/core-events": "6.0.0-alpha.18",
+    "@storybook/theming": "6.0.0-alpha.18",
    "core-js": "^3.0.1",
    "memoizerific": "^1.11.3",
    "react": "^16.8.3",
+    "regenerator-runtime": "^0.13.3",
    "util-deprecate": "^1.0.2"
  },
  "devDependencies": {
@ -47,11 +49,17 @@
    "@types/webpack-env": "^1.15.1"
  },
  "peerDependencies": {
-    "react-dom": "*",
-    "regenerator-runtime": "*"
+    "react-dom": "*"
  },
  "publishConfig": {
    "access": "public"
  },
-  "gitHead": "4b9d901add9452525135caae98ae5f78dd8da9ff"
+  "gitHead": "4b9d901add9452525135caae98ae5f78dd8da9ff",
+  "typesVersions": {
+    "<=3.5": {
+      "*": [
+        "ts3.5/*"
+      ]
+    }
+  }
 }
--- a/addons/centered/package.json
+++ b/addons/centered/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-centered",
-  "version": "6.0.0-alpha.10",
+  "version": "6.0.0-alpha.18",
  "description": "Storybook decorator to center components",
  "keywords": [
    "addon",
@ -23,15 +23,17 @@
    "dist/**/*",
    "README.md",
    "*.js",
-    "*.d.ts"
+    "*.d.ts",
+    "ts3.5/**/*"
  ],
  "scripts": {
    "prepare": "node ../../scripts/prepare.js"
  },
  "dependencies": {
-    "@storybook/addons": "6.0.0-alpha.10",
+    "@storybook/addons": "6.0.0-alpha.18",
    "core-js": "^3.0.1",
    "global": "^4.3.2",
+    "regenerator-runtime": "^0.13.3",
    "util-deprecate": "^1.0.2"
  },
  "devDependencies": {
@ -39,11 +41,34 @@
    "@types/webpack-env": "^1.15.1",
    "mithril": "*",
    "preact": "*",
+    "rax": "*",
+    "rax-view": "*",
    "react": "*"
  },
  "peerDependencies": {
-    "react-dom": "*",
-    "regenerator-runtime": "*"
+    "mithril": "*",
+    "preact": "*",
+    "rax": "*",
+    "rax-view": "*",
+    "react": "*",
+    "react-dom": "*"
+  },
+  "peerDependenciesMeta": {
+    "mithril": {
+      "optional": true
+    },
+    "preact": {
+      "optional": true
+    },
+    "rax": {
+      "optional": true
+    },
+    "rax-view": {
+      "optional": true
+    },
+    "react": {
+      "optional": true
+    }
  },
  "gitHead": "4b9d901add9452525135caae98ae5f78dd8da9ff"
 }
--- a/addons/centered/src/mithril.tsx
+++ b/addons/centered/src/mithril.tsx
@ -1,5 +1,4 @@
 /** @jsx m */
-/* eslint-disable import/no-extraneous-dependencies */
 import m, { ComponentTypes } from 'mithril';
 import { makeDecorator } from '@storybook/addons';
 import parameters from './parameters';
--- a/addons/centered/src/preact.tsx
+++ b/addons/centered/src/preact.tsx
@ -1,5 +1,4 @@
 /** @jsx h */
-/* eslint-disable import/no-extraneous-dependencies */
 import { Component, h } from 'preact';
 import { makeDecorator } from '@storybook/addons';
 import parameters from './parameters';
--- a/addons/centered/src/rax.js
+++ b/addons/centered/src/rax.js
@ -1,5 +1,4 @@
 /** @jsx createElement */
-/* eslint-disable import/no-extraneous-dependencies */
 import { createElement } from 'rax';
 import View from 'rax-view';
 import { makeDecorator } from '@storybook/addons';
--- a/addons/centered/src/react.tsx
+++ b/addons/centered/src/react.tsx
@ -1,4 +1,3 @@
-/* eslint-disable import/no-extraneous-dependencies */
 import React, { ReactNode } from 'react';
 import { makeDecorator, StoryFn } from '@storybook/addons';
 import parameters from './parameters';
--- a/addons/contexts/package.json
+++ b/addons/contexts/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-contexts",
-  "version": "6.0.0-alpha.10",
+  "version": "6.0.0-alpha.18",
  "description": "Storybook Addon Contexts",
  "keywords": [
    "preact",
@ -20,20 +20,26 @@
    "dist/**/*",
    "README.md",
    "*.js",
-    "*.d.ts"
+    "*.d.ts",
+    "ts3.5/**/*"
  ],
  "scripts": {
    "dev:check-types": "tsc --noEmit",
    "prepare": "node ../../scripts/prepare.js"
  },
  "dependencies": {
-    "@storybook/addons": "6.0.0-alpha.10",
-    "@storybook/api": "6.0.0-alpha.10",
-    "@storybook/components": "6.0.0-alpha.10",
-    "@storybook/core-events": "6.0.0-alpha.10",
+    "@storybook/addons": "6.0.0-alpha.18",
+    "@storybook/api": "6.0.0-alpha.18",
+    "@storybook/components": "6.0.0-alpha.18",
+    "@storybook/core-events": "6.0.0-alpha.18",
    "core-js": "^3.0.1",
    "global": "^4.3.2",
-    "qs": "^6.6.0"
+    "qs": "^6.6.0",
+    "regenerator-runtime": "^0.13.3"
+  },
+  "devDependencies": {
+    "@types/enzyme": "^3.10.5",
+    "enzyme": "^3.11.0"
  },
  "peerDependencies": {
    "global": "*",
@ -42,7 +48,6 @@
    "rax": "*",
    "react": "*",
    "react-dom": "*",
-    "regenerator-runtime": "*",
    "vue": "*"
  },
  "peerDependenciesMeta": {
@ -59,5 +64,12 @@
  "publishConfig": {
    "access": "public"
  },
-  "gitHead": "4b9d901add9452525135caae98ae5f78dd8da9ff"
+  "gitHead": "4b9d901add9452525135caae98ae5f78dd8da9ff",
+  "typesVersions": {
+    "<=3.5": {
+      "*": [
+        "ts3.5/*"
+      ]
+    }
+  }
 }
--- a/addons/contexts/src/preview/frameworks/vue.ts
+++ b/addons/contexts/src/preview/frameworks/vue.ts
@ -12,7 +12,7 @@ export const renderVue: Render<Vue.Component> = (contextNodes, propsMap, getStor
  const reactiveProps = updateReactiveSystem(propsMap);
  return Vue.extend({
    name: ID,
-    data: () => reactiveProps,
+    data: () => reactiveProps, // deepscan-disable-line
    render: createElement =>
      getRendererFrom((Component, props, children) => {
        const { key, ref, style, classNames, ...rest } = props || Object();
--- a/addons/cssresources/package.json
+++ b/addons/cssresources/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-cssresources",
-  "version": "6.0.0-alpha.10",
+  "version": "6.0.0-alpha.18",
  "description": "A storybook addon to switch between css resources at runtime for your story",
  "keywords": [
    "addon",
@ -25,31 +25,42 @@
    "dist/**/*",
    "README.md",
    "*.js",
-    "*.d.ts"
+    "*.d.ts",
+    "ts3.5/**/*"
  ],
  "scripts": {
    "prepare": "node ../../scripts/prepare.js"
  },
  "dependencies": {
-    "@storybook/addons": "6.0.0-alpha.10",
-    "@storybook/api": "6.0.0-alpha.10",
-    "@storybook/components": "6.0.0-alpha.10",
-    "@storybook/core-events": "6.0.0-alpha.10",
-    "@storybook/theming": "6.0.0-alpha.10",
+    "@storybook/addons": "6.0.0-alpha.18",
+    "@storybook/api": "6.0.0-alpha.18",
+    "@storybook/components": "6.0.0-alpha.18",
+    "@storybook/core-events": "6.0.0-alpha.18",
+    "@storybook/theming": "6.0.0-alpha.18",
    "core-js": "^3.0.1",
    "global": "^4.3.2",
-    "react": "^16.8.3"
+    "react": "^16.8.3",
+    "regenerator-runtime": "^0.13.3"
  },
  "devDependencies": {
-    "@types/webpack-env": "^1.15.1"
+    "@types/webpack-env": "^1.15.1",
+    "enzyme": "^3.11.0",
+    "enzyme-adapter-react-16": "^1.15.2",
+    "react-dom": "^16.12.0"
  },
  "peerDependencies": {
    "react": "*",
-    "react-dom": "*",
-    "regenerator-runtime": "*"
+    "react-dom": "*"
  },
  "publishConfig": {
    "access": "public"
  },
-  "gitHead": "4b9d901add9452525135caae98ae5f78dd8da9ff"
+  "gitHead": "4b9d901add9452525135caae98ae5f78dd8da9ff",
+  "typesVersions": {
+    "<=3.5": {
+      "*": [
+        "ts3.5/*"
+      ]
+    }
+  }
 }
--- a/addons/cssresources/src/css-resource-panel.tsx
+++ b/addons/cssresources/src/css-resource-panel.tsx
@ -1,4 +1,4 @@
-import React, { Component, Fragment } from 'react';
+import React, { Component } from 'react';
 import { SyntaxHighlighter, Placeholder, Spaced, Icons } from '@storybook/components';
 import { STORY_RENDERED } from '@storybook/core-events';
 import { API } from '@storybook/api';
--- a/addons/design-assets/package.json
+++ b/addons/design-assets/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-design-assets",
-  "version": "6.0.0-alpha.10",
+  "version": "6.0.0-alpha.18",
  "description": "Design asset preview for storybook",
  "keywords": [
    "addon",
@ -27,30 +27,38 @@
    "dist/**/*",
    "README.md",
    "*.js",
-    "*.d.ts"
+    "*.d.ts",
+    "ts3.5/**/*"
  ],
  "scripts": {
    "prepare": "node ../../scripts/prepare.js"
  },
  "dependencies": {
-    "@storybook/addons": "6.0.0-alpha.10",
-    "@storybook/api": "6.0.0-alpha.10",
-    "@storybook/client-logger": "6.0.0-alpha.10",
-    "@storybook/components": "6.0.0-alpha.10",
-    "@storybook/core-events": "6.0.0-alpha.10",
-    "@storybook/theming": "6.0.0-alpha.10",
+    "@storybook/addons": "6.0.0-alpha.18",
+    "@storybook/api": "6.0.0-alpha.18",
+    "@storybook/client-logger": "6.0.0-alpha.18",
+    "@storybook/components": "6.0.0-alpha.18",
+    "@storybook/core-events": "6.0.0-alpha.18",
+    "@storybook/theming": "6.0.0-alpha.18",
    "core-js": "^3.0.1",
    "global": "^4.3.2",
    "react": "^16.8.3",
+    "regenerator-runtime": "^0.13.3",
    "ts-dedent": "^1.1.1",
    "use-image": "^1.0.3"
  },
  "peerDependencies": {
-    "react-dom": "*",
-    "regenerator-runtime": "*"
+    "react-dom": "*"
  },
  "publishConfig": {
    "access": "public"
  },
-  "gitHead": "4b9d901add9452525135caae98ae5f78dd8da9ff"
+  "gitHead": "4b9d901add9452525135caae98ae5f78dd8da9ff",
+  "typesVersions": {
+    "<=3.5": {
+      "*": [
+        "ts3.5/*"
+      ]
+    }
+  }
 }
--- a/addons/docs/docs/docspage.md
+++ b/addons/docs/docs/docspage.md
@ -2,27 +2,26 @@
  <img src="https://raw.githubusercontent.com/storybookjs/storybook/master/addons/docs/docs/media/docspage-hero.png" width="100%" />
 </center>

-# Storybook DocsPage
+<h1>Storybook DocsPage</h1>

 When you install [Storybook Docs](../README.md), `DocsPage` is the zero-config default documentation that all stories get out of the box. It aggregates your stories, text descriptions, docgen comments, props tables, and code examples into a single page for each component.

- [Storybook DocsPage](#storybook-docspage)
-  - [Motivation](#motivation)
-  - [Component parameter](#component-parameter)
-  - [Subcomponents parameter](#subcomponents-parameter)
-  - [DocsPage slots](#docspage-slots)
-  - [Slot values](#slot-values)
-    - [Title](#title)
-    - [Subtitle](#subtitle)
-    - [Description](#description)
-    - [Primary](#primary)
-    - [Props](#props)
-    - [Stories](#stories)
-  - [Slot functions](#slot-functions)
-  - [Replacing DocsPage](#replacing-docspage)
-  - [Story file names](#story-file-names)
-  - [Inline stories vs. Iframe stories](#inline-stories-vs-iframe-stories)
-  - [More resources](#more-resources)
+- [Motivation](#motivation)
+- [Component parameter](#component-parameter)
+- [Subcomponents parameter](#subcomponents-parameter)
+- [DocsPage slots](#docspage-slots)
+- [Slot values](#slot-values)
+  - [Title](#title)
+  - [Subtitle](#subtitle)
+  - [Description](#description)
+  - [Primary](#primary)
+  - [Props](#props)
+  - [Stories](#stories)
+- [Slot functions](#slot-functions)
+- [Replacing DocsPage](#replacing-docspage)
+- [Story file names](#story-file-names)
+- [Inline stories vs. Iframe stories](#inline-stories-vs-iframe-stories)
+- [More resources](#more-resources)

 ## Motivation

@ -296,10 +295,7 @@ With that function, anyone using the docs addon for `@storybook/vue` can make th

 ## More resources

-Want to learn more? Here are some more articles on Storybook Docs:
-
- References: [README](../README.md) / [MDX](mdx.md) / [FAQ](faq.md) / [Recipes](recipes.md) / [Theming](theming.md)
- Vision: [Storybook Docs sneak peak](https://medium.com/storybookjs/storybook-docs-sneak-peak-5be78445094a)
- Announcement: [DocsPage](https://medium.com/storybookjs/storybook-docspage-e185bc3622bf)
+- References: [README](../README.md) / [DocsPage](docspage.md) / [MDX](mdx.md) / [FAQ](faq.md) / [Recipes](recipes.md) / [Theming](theming.md)
+- Framework-specific docs: [React](../react/README.md) / [Vue](../vue/README.md) / [Angular](../angular/README.md) / [Web components](../web-components/README.md) / [Ember](../ember/README.md)
+- Announcements: [Vision](https://medium.com/storybookjs/storybook-docs-sneak-peak-5be78445094a) / [DocsPage](https://medium.com/storybookjs/storybook-docspage-e185bc3622bf) / [MDX](https://medium.com/storybookjs/rich-docs-with-storybook-mdx-61bc145ae7bc) / [Framework support](https://medium.com/storybookjs/storybook-docs-for-new-frameworks-b1f6090ee0ea)
 - Example: [Storybook Design System](https://github.com/storybookjs/design-system)
- [Technical preview guide](https://docs.google.com/document/d/1un6YX7xDKEKl5-MVb-egnOYN8dynb5Hf7mq0hipk8JE/edit?usp=sharing)
--- a/addons/docs/docs/faq.md
+++ b/addons/docs/docs/faq.md
@ -1,12 +1,11 @@
-# Storybook Docs FAQs
+<h1>Storybook Docs FAQs</h1>

 You've read the [Storybook Docs README](../README.md). You're already familiar with both [DocsPage](./docspage.md) and [MDX](./mdx.md). You've even browsed our [Docs recipes](/./recipes.md). But Docs is a big project and you've still got questions! Maybe you'll find your answer here:

- [Storybook Docs FAQs](#storybook-docs-faqs)
-  - [Does Docs support framework X?](#does-docs-support-framework-x)
-  - [How does Docs interact with existing addons?](#how-does-docs-interact-with-existing-addons)
-  - [How do I debug my MDX story?](#how-do-i-debug-my-mdx-story)
-  - [More resources](#more-resources)
+- [Does Docs support framework X?](#does-docs-support-framework-x)
+- [How does Docs interact with existing addons?](#how-does-docs-interact-with-existing-addons)
+- [How do I debug my MDX story?](#how-do-i-debug-my-mdx-story)
+- [More resources](#more-resources)

 ## Does Docs support framework X?

@ -44,10 +43,7 @@ This is [Component Story Format (CSF)](https://medium.com/storybookjs/component-

 ## More resources

-Want to learn more? Here are some more articles on Storybook Docs:
-
- References: [README](../README.md) / [DocsPage](docspage.md) / [MDX](mdx.md) / [Recipes](recipes.md) / [Theming](theming.md)
- Vision: [Storybook Docs sneak peak](https://medium.com/storybookjs/storybook-docs-sneak-peak-5be78445094a)
- Announcement: [DocsPage](https://medium.com/storybookjs/storybook-docspage-e185bc3622bf)
+- References: [README](../README.md) / [DocsPage](docspage.md) / [MDX](mdx.md) / [FAQ](faq.md) / [Recipes](recipes.md) / [Theming](theming.md)
+- Framework-specific docs: [React](../react/README.md) / [Vue](../vue/README.md) / [Angular](../angular/README.md) / [Web components](../web-components/README.md) / [Ember](../ember/README.md)
+- Announcements: [Vision](https://medium.com/storybookjs/storybook-docs-sneak-peak-5be78445094a) / [DocsPage](https://medium.com/storybookjs/storybook-docspage-e185bc3622bf) / [MDX](https://medium.com/storybookjs/rich-docs-with-storybook-mdx-61bc145ae7bc) / [Framework support](https://medium.com/storybookjs/storybook-docs-for-new-frameworks-b1f6090ee0ea)
 - Example: [Storybook Design System](https://github.com/storybookjs/design-system)
- [Technical preview guide](https://docs.google.com/document/d/1un6YX7xDKEKl5-MVb-egnOYN8dynb5Hf7mq0hipk8JE/edit?usp=sharing)
--- a/addons/docs/docs/mdx.md
+++ b/addons/docs/docs/mdx.md
@ -2,19 +2,18 @@
  <img src="https://raw.githubusercontent.com/storybookjs/storybook/master/addons/docs/docs/media/mdx-hero.png" width="100%" />
 </center>

-# Storybook Docs MDX
+<h1>Storybook Docs MDX</h1>

 `MDX` is the syntax [Storybook Docs](../README.md) uses to capture long-form markdown documentation and stories in one file. You can also write pure documentation pages in `MDX` and add them to Storybook alongside your stories.

- [Storybook Docs MDX](#storybook-docs-mdx)
-  - [Basic example](#basic-example)
-  - [MDX-Flavored CSF](#mdx-flavored-csf)
-  - [Writing stories](#writing-stories)
-  - [Embedding stories](#embedding-stories)
-  - [Decorators and parameters](#decorators-and-parameters)
-  - [Documentation-only MDX](#documentation-only-mdx)
-  - [MDX file names](#mdx-file-names)
-  - [More resources](#more-resources)
+- [Basic example](#basic-example)
+- [MDX-Flavored CSF](#mdx-flavored-csf)
+- [Writing stories](#writing-stories)
+- [Embedding stories](#embedding-stories)
+- [Decorators and parameters](#decorators-and-parameters)
+- [Documentation-only MDX](#documentation-only-mdx)
+- [MDX file names](#mdx-file-names)
+- [More resources](#more-resources)

 ## Basic example

@ -195,10 +194,7 @@ Be sure to update your Storybook config file to load `.stories.mdx` stories, as

 ## More resources

-`MDX` is an experimental feature and there's a lot more that hasn't been documented yet. Here are some more articles on Storybook Docs that contain more information:
-
- References: [README](../README.md) / [DocsPage](docspage.md) / [FAQ](faq.md) / [Recipes](recipes.md) / [Theming](theming.md)
- Vision: [Storybook Docs sneak peak](https://medium.com/storybookjs/storybook-docs-sneak-peak-5be78445094a)
- Announcement: [DocsPage](https://medium.com/storybookjs/storybook-docspage-e185bc3622bf)
+- References: [README](../README.md) / [DocsPage](docspage.md) / [MDX](mdx.md) / [FAQ](faq.md) / [Recipes](recipes.md) / [Theming](theming.md)
+- Framework-specific docs: [React](../react/README.md) / [Vue](../vue/README.md) / [Angular](../angular/README.md) / [Web components](../web-components/README.md) / [Ember](../ember/README.md)
+- Announcements: [Vision](https://medium.com/storybookjs/storybook-docs-sneak-peak-5be78445094a) / [DocsPage](https://medium.com/storybookjs/storybook-docspage-e185bc3622bf) / [MDX](https://medium.com/storybookjs/rich-docs-with-storybook-mdx-61bc145ae7bc) / [Framework support](https://medium.com/storybookjs/storybook-docs-for-new-frameworks-b1f6090ee0ea)
 - Example: [Storybook Design System](https://github.com/storybookjs/design-system)
- [Technical preview guide](https://docs.google.com/document/d/1un6YX7xDKEKl5-MVb-egnOYN8dynb5Hf7mq0hipk8JE/edit?usp=sharing)
--- a/addons/docs/docs/media/props-tables-hero.png
+++ b/addons/docs/docs/media/props-tables-hero.png
--- a/addons/docs/docs/multiframework.md
+++ b/addons/docs/docs/multiframework.md
@ -1,4 +1,4 @@
-# Storybook Docs framework dev guide
+<h1>Storybook Docs framework dev guide</h1>

 Storybook Docs [provides basic support for all non-RN Storybook view layers](../README.md#framework-support) out of the box. However, some frameworks have been docs-optimized, adding features like automatic props table generation and inline story rendering. This document is a dev guide for how to optimize a new framework in docs.

@ -6,6 +6,7 @@ Storybook Docs [provides basic support for all non-RN Storybook view layers](../
 - [Props tables](#props-tables)
 - [Component descriptions](#component-descriptions)
 - [Inline story rendering](#inline-story-rendering)
+- [More resources](#more-resources)

 ## Framework-specific configuration

@ -96,3 +97,10 @@ addParameters({
 ```

 The input is the story function, and the output is a React element, because we render docs pages in react. In the case of Vue, all of the work is done by the `@egoist/vue-to-react` library. If there's no analogous library for your framework, you may need to figure it out yourself!
+
+## More resources
+
+- References: [README](../README.md) / [DocsPage](docspage.md) / [MDX](mdx.md) / [FAQ](faq.md) / [Recipes](recipes.md) / [Theming](theming.md)
+- Framework-specific docs: [React](../react/README.md) / [Vue](../vue/README.md) / [Angular](../angular/README.md) / [Web components](../web-components/README.md) / [Ember](../ember/README.md)
+- Announcements: [Vision](https://medium.com/storybookjs/storybook-docs-sneak-peak-5be78445094a) / [DocsPage](https://medium.com/storybookjs/storybook-docspage-e185bc3622bf) / [MDX](https://medium.com/storybookjs/rich-docs-with-storybook-mdx-61bc145ae7bc) / [Framework support](https://medium.com/storybookjs/storybook-docs-for-new-frameworks-b1f6090ee0ea)
+- Example: [Storybook Design System](https://github.com/storybookjs/design-system)
--- a/addons/docs/docs/props-tables.md
+++ b/addons/docs/docs/props-tables.md
@ -0,0 +1,97 @@
+<center>
+  <img src="./media/props-tables-hero.png" width="100%" />
+</center>
+
+<h1>Storybook Docs Props Tables</h1>
+
+Storybook Docs automatically generates props tables for components in supported frameworks. This document is a consolidated summary of prop tables, provides instructions for reporting bugs, and list known limitations for each framework.
+
+- [Usage](#usage)
+- [Reporting a bug](#reporting-a-bug)
+- [Known limitations](#known-limitations)
+  - [React](#react)
+  - [Vue](#vue)
+  - [Angular](#angular)
+  - [Web components](#web-components)
+  - [Ember](#ember)
+- [More resources](#more-resources)
+
+## Usage
+
+For framework-specific setup instructions, see the framework's README: [React](../../react/README.md), [Vue](../../vue/README.md), [Angular](../../angular/README.md), [Web Components](../../web-components/README.md), [Ember](../../ember/README.md).
+
+To use the props table in [DocsPage](./docspage.md), simply export a component property on your stories metadata:
+
+```js
+// MyComponent.stories.js
+import { MyComponent } from './MyComponent';
+
+export default {
+  title: 'MyComponent',
+  component: MyComponent,
+};
+// stories etc...
+```
+
+To use the props table in [MDX](./mdx.md), use the `Props` block:
+
+```js
+// MyComponent.stories.mdx
+import { Props } from '@storybook/addon-docs/blocks';
+import { MyComponent } from './MyComponent';
+
+# My Component!
+
+<Props of={MyComponent} />
+```
+
+## Reporting a bug
+
+Extracting component properties from source is a tricky problem with thousands of corner cases. We've designed this package and its tests to accurately isolate problems, since the cause could either be in this package or (likely) one of the packages it depends on.
+
+If you're seeing a problem with your prop table, here's what to do.
+
+First, look to see if there's already a test case that corresponds to your situation. If there is, it should be documented in the [Known Limitations](#known-limitations) section above. There should also be one or more corresponding test fixtures contained in this package. For example, if you are using React, look under the directory `./src/frameworks/react/__testfixtures__`.
+
+If your problem is not already represented here, do the following:
+
+1. Create a **MINIMAL** repro for your problem. Each case should be just a few lines of code.
+2. Place it in the appropriate directory `./src/frameworks/<framework>/__testfixtures__/`, e.g. `./src/frameworks/react/__testfixtures__/XXXX-some-description`, where `XXXX` is the corresponding github issue.
+3. Run the tests for your `<framework>`, e.g. `yarn jest --testPathPattern=react-properties.test.ts --watch`
+4. Inspect the output files for your test case.
+5. Add the example to the appropriate stories file, e.g. `react-properties.stories.ts` for `react`, for a visual repro
+
+If the problem appears to be an issue with this library, file an issue and include a PR that includes your repro.
+
+If the problem appears to be an issue with the sub-package, please file an issue on the appropriate sub-package, document the limitation in [Known Limitations](#known-limitations) below, link to that issue, and submit a PR including the updated documentation and fixtures/snapshots.
+
+## Known limitations
+
+This package relies on a variety of sub-packages to extract property information from components. Many of the bugs in this package correspond to bugs in a sub-package. Since we don't maintain the sub-packages, the best we can do for now is (1) document these limitations, (2) provide clean reproductions to the sub-package, (3) optionally provide PRs to those packages to fix the problems.
+
+### React
+
+SB Docs for React uses `babel-plugin-react-docgen`/`react-docgen` for both JS PropTypes prop tables and, as of 6.0, TypeScript-driven props tables.
+
+### Vue
+
+SB Docs for Vue uses `vue-docgen-loader`/`vue-docgen-api` for SFC and JSX components.
+
+### Angular
+
+SB Docs for Angular uses `compodoc` for prop table information.
+
+### Web components
+
+SB Docs for Web-components uses `custom-elements.json` for prop table information.
+
+### Ember
+
+SB Docs for Ember uses `yui-doc` for prop table information.
+
+## More resources
+
+- References: [README](../README.md) / [DocsPage](docspage.md) / [MDX](mdx.md) / [FAQ](faq.md) / [Recipes](recipes.md) / [Theming](theming.md)
+- Framework-specific docs: [React](../react/README.md) / [Vue](../vue/README.md) / [Angular](../angular/README.md) / [Web components](../web-components/README.md) / [Ember](../ember/README.md)
+- Announcements: [Vision](https://medium.com/storybookjs/storybook-docs-sneak-peak-5be78445094a) / [DocsPage](https://medium.com/storybookjs/storybook-docspage-e185bc3622bf) / [MDX](https://medium.com/storybookjs/rich-docs-with-storybook-mdx-61bc145ae7bc) / [Framework support](https://medium.com/storybookjs/storybook-docs-for-new-frameworks-b1f6090ee0ea)
+- Example: [Storybook Design System](https://github.com/storybookjs/design-system)
--- a/addons/docs/docs/recipes.md
+++ b/addons/docs/docs/recipes.md
@ -1,4 +1,4 @@
-# Storybook Docs Recipes
+<h1>Storybook Docs Recipes</h1>

 [Storybook Docs](../README.md) consists of two basic mechanisms, [DocsPage](docspage.md) and [MDX](mdx.md). But how should you use them in your project?

@ -13,6 +13,7 @@
 - [Disabling docs stories](#disabling-docs-stories)
  - [DocsPage](#docspage)
  - [MDX Stories](#mdx-stories)
+- [Controlling a story's view mode](#controlling-a-storys-view-mode)
 - [More resources](#more-resources)

 ## Component Story Format (CSF) with DocsPage
@ -57,7 +58,7 @@ basic.story = {

 ```md
 import { Meta, Story } from '@storybook/addon-docs/blocks';
-import * as stories from './Button.stories.js';
+import \* as stories from './Button.stories.js';
 import { SomeComponent } from 'path/to/SomeComponent';

 <Meta title="Demo/Button" component={Button} />
@ -236,10 +237,7 @@ addParameters({

 ## More resources

-Want to learn more? Here are some more articles on Storybook Docs:
-
- References: [README](../README.md) / [DocsPage](docspage.md) / [MDX](mdx.md) / [FAQ](faq.md) / [Theming](theming.md)
- Vision: [Storybook Docs sneak peak](https://medium.com/storybookjs/storybook-docs-sneak-peak-5be78445094a)
- Announcement: [DocsPage](https://medium.com/storybookjs/storybook-docspage-e185bc3622bf)
+- References: [README](../README.md) / [DocsPage](docspage.md) / [MDX](mdx.md) / [FAQ](faq.md) / [Recipes](recipes.md) / [Theming](theming.md)
+- Framework-specific docs: [React](../react/README.md) / [Vue](../vue/README.md) / [Angular](../angular/README.md) / [Web components](../web-components/README.md) / [Ember](../ember/README.md)
+- Announcements: [Vision](https://medium.com/storybookjs/storybook-docs-sneak-peak-5be78445094a) / [DocsPage](https://medium.com/storybookjs/storybook-docspage-e185bc3622bf) / [MDX](https://medium.com/storybookjs/rich-docs-with-storybook-mdx-61bc145ae7bc) / [Framework support](https://medium.com/storybookjs/storybook-docs-for-new-frameworks-b1f6090ee0ea)
 - Example: [Storybook Design System](https://github.com/storybookjs/design-system)
- [Technical preview guide](https://docs.google.com/document/d/1un6YX7xDKEKl5-MVb-egnOYN8dynb5Hf7mq0hipk8JE/edit?usp=sharing)
--- a/addons/docs/docs/theming.md
+++ b/addons/docs/docs/theming.md
@ -1,17 +1,18 @@
-# Storybook Docs Theming
+<h1>Storybook Docs Theming</h1>

 [Storybook Docs](../README.md) is themable! There are three different levels of theming, just to keep things interesting:

 - [Storybook theming](#storybook-theming)
 - [CSS escape hatches](#css-escape-hatches)
 - [MDX component overrides](#mdx-component-overrides)
+- [More resources](#more-resources)

 ## Storybook theming

 Storybook theming is the **recommended way** to theme your docs. If you update your storybook theme according to [the documentation](https://storybook.js.org/docs/configurations/theming/), Storybook Docs should adapt in reasonable ways.

 > In the documentation it will say you can theme storybook in `manager.js`, That's a newer more optimal way to theme storybook, but it's currently incompatible with docs.
-> 
+>
 > We're working on making it compatible in 6.0.0, so for now use the method described below.

 Here's how to change your docs (and Storybook) to the dark theme, by modifying `.storybook/preview.js`:
@ -64,7 +65,7 @@ addParameters({
 });
 ```

-You can even override a Storybook *block* component.
+You can even override a Storybook _block_ component.

 Here's how you might insert a custom `<Preview />` block:

@ -82,10 +83,7 @@ addParameters({

 ## More resources

-Want to learn more? Here are some more articles on Storybook Docs:
-
- References: [README](../README.md) / [DocsPage](docspage.md) / [MDX](mdx.md) / [FAQ](faq.md) / [Recipes](recipes.md)
- Vision: [Storybook Docs sneak peak](https://medium.com/storybookjs/storybook-docs-sneak-peak-5be78445094a)
- Announcement: [DocsPage](https://medium.com/storybookjs/storybook-docspage-e185bc3622bf)
+- References: [README](../README.md) / [DocsPage](docspage.md) / [MDX](mdx.md) / [FAQ](faq.md) / [Recipes](recipes.md) / [Theming](theming.md)
+- Framework-specific docs: [React](../react/README.md) / [Vue](../vue/README.md) / [Angular](../angular/README.md) / [Web components](../web-components/README.md) / [Ember](../ember/README.md)
+- Announcements: [Vision](https://medium.com/storybookjs/storybook-docs-sneak-peak-5be78445094a) / [DocsPage](https://medium.com/storybookjs/storybook-docspage-e185bc3622bf) / [MDX](https://medium.com/storybookjs/rich-docs-with-storybook-mdx-61bc145ae7bc) / [Framework support](https://medium.com/storybookjs/storybook-docs-for-new-frameworks-b1f6090ee0ea)
 - Example: [Storybook Design System](https://github.com/storybookjs/design-system)
- [Technical preview guide](https://docs.google.com/document/d/1un6YX7xDKEKl5-MVb-egnOYN8dynb5Hf7mq0hipk8JE/edit?usp=sharing)
--- a/addons/docs/package.json
+++ b/addons/docs/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-docs",
-  "version": "6.0.0-alpha.10",
+  "version": "6.0.0-alpha.18",
  "description": "Superior documentation for your components",
  "keywords": [
    "addon",
@ -31,7 +31,8 @@
    "web-components/**/*",
    "README.md",
    "*.js",
-    "*.d.ts"
+    "*.d.ts",
+    "ts3.5/**/*"
  ],
  "scripts": {
    "prepare": "node ../../scripts/prepare.js"
@ -45,14 +46,15 @@
    "@mdx-js/loader": "^1.5.1",
    "@mdx-js/mdx": "^1.5.1",
    "@mdx-js/react": "^1.5.1",
-    "@storybook/addons": "6.0.0-alpha.10",
-    "@storybook/api": "6.0.0-alpha.10",
-    "@storybook/components": "6.0.0-alpha.10",
-    "@storybook/core-events": "6.0.0-alpha.10",
+    "@storybook/addons": "6.0.0-alpha.18",
+    "@storybook/api": "6.0.0-alpha.18",
+    "@storybook/client-api": "6.0.0-alpha.18",
+    "@storybook/components": "6.0.0-alpha.18",
+    "@storybook/core-events": "6.0.0-alpha.18",
    "@storybook/csf": "0.0.1",
-    "@storybook/postinstall": "6.0.0-alpha.10",
-    "@storybook/source-loader": "6.0.0-alpha.10",
-    "@storybook/theming": "6.0.0-alpha.10",
+    "@storybook/postinstall": "6.0.0-alpha.18",
+    "@storybook/source-loader": "6.0.0-alpha.18",
+    "@storybook/theming": "6.0.0-alpha.18",
    "acorn": "^7.1.0",
    "acorn-jsx": "^5.1.0",
    "acorn-walk": "^7.0.0",
@ -65,31 +67,47 @@
    "lodash": "^4.17.15",
    "prop-types": "^15.7.2",
    "react-element-to-jsx-string": "^14.1.0",
+    "regenerator-runtime": "^0.13.3",
    "remark-external-links": "^5.0.0",
    "remark-slug": "^5.1.2",
    "ts-dedent": "^1.1.1",
    "util-deprecate": "^1.0.2",
-    "vue-docgen-api": "^4.1.0",
-    "vue-docgen-loader": "^1.3.0-beta.0"
+    "vue-docgen-api": "^4.7.0",
+    "vue-docgen-loader": "^1.4.0"
  },
  "devDependencies": {
+    "@storybook/react": "6.0.0-alpha.18",
+    "@storybook/web-components": "6.0.0-alpha.18",
    "@types/doctrine": "^0.0.3",
    "@types/enzyme": "^3.10.3",
    "@types/jest": "^25.1.1",
    "@types/prop-types": "^15.5.9",
    "@types/util-deprecate": "^1.0.0",
-    "jest-specific-snapshot": "^2.0.0"
+    "babel-plugin-react-docgen": "^4.1.0",
+    "cross-spawn": "^7.0.1",
+    "jest-specific-snapshot": "^2.0.0",
+    "lit-html": "^1.0.0",
+    "require-from-string": "^2.0.2",
+    "styled-components": "^5.0.1",
+    "tmp": "^0.1.0",
+    "web-component-analyzer": "^1.0.3"
  },
  "peerDependencies": {
    "@babel/core": "^7.0.0-0",
    "babel-loader": "^8.0.0",
    "react": "^16.9.0",
    "react-dom": "*",
-    "react-is": "^16.8.0",
-    "regenerator-runtime": "*"
+    "react-is": "^16.8.0"
  },
  "publishConfig": {
    "access": "public"
  },
-  "gitHead": "4b9d901add9452525135caae98ae5f78dd8da9ff"
+  "gitHead": "4b9d901add9452525135caae98ae5f78dd8da9ff",
+  "typesVersions": {
+    "<=3.5": {
+      "*": [
+        "ts3.5/*"
+      ]
+    }
+  }
 }
--- a/addons/docs/src/frameworks/angular/testfixtures/doc-button/compodoc.snapshot
+++ b/addons/docs/src/frameworks/angular/testfixtures/doc-button/compodoc.snapshot
--- a/addons/docs/src/frameworks/angular/testfixtures/doc-button/input.ts
+++ b/addons/docs/src/frameworks/angular/testfixtures/doc-button/input.ts
@ -0,0 +1,185 @@
+// @ts-nocheck
+/* eslint-disable no-console */
+/* eslint-disable no-underscore-dangle */
+import {
+  Component,
+  EventEmitter,
+  Input,
+  Output,
+  ViewChild,
+  HostListener,
+  HostBinding,
+  ElementRef,
+} from '@angular/core';
+
+export const exportedConstant = 'An exported constant';
+
+export type ButtonSize = 'small' | 'medium' | 'large' | 'xlarge';
+
+export interface ISomeInterface {
+  one: string;
+  two: boolean;
+  three: any[];
+}
+
+/**
+ * This is a simple button that demonstrates various JSDoc handling in Storybook Docs for Angular.
+ *
+ * It supports [markdown](https://en.wikipedia.org/wiki/Markdown), so you can embed formatted text,
+ * like **bold**, _italic_, and `inline code`.
+ *
+ * > How you like dem apples?! It's never been easier to document all your components.
+ *
+ * @string Hello world
+ * @link [Example](http://example.com)
+ * @code `ThingThing`
+ * @html <span class="badge">aaa</span>
+ */
+@Component({
+  selector: 'doc-button',
+})
+export class InputComponent<T> {
+  @ViewChild('buttonRef', { static: false }) buttonRef: ElementRef;
+
+  /** Appearance style of the button. */
+  @Input()
+  public appearance: 'primary' | 'secondary' = 'secondary';
+
+  /** Sets the button to a disabled state. */
+  @Input()
+  public isDisabled = false;
+
+  /**
+   * The inner text of the button.
+   *
+   * @required
+   */
+  @Input()
+  public label: string;
+
+  /** Size of the button. */
+  @Input()
+  public size?: ButtonSize = 'medium';
+
+  /**
+   * Some input you shouldn't use.
+   *
+   * @deprecated
+   */
+  @Input()
+  public somethingYouShouldNotUse = false;
+
+  /**
+   * Handler to be called when the button is clicked by a user.
+   *
+   * Will also block the emission of the event if `isDisabled` is true.
+   */
+  @Output()
+  public onClick = new EventEmitter<Event>();
+
+  /**
+   * This is an internal method that we don't want to document and have added the `ignore` annoation to.
+   *
+   * @ignore
+   */
+  public handleClick(event: Event) {
+    event.stopPropagation();
+
+    if (!this.isDisabled) {
+      this.onClick.emit(event);
+    }
+  }
+
+  private _inputValue = 'some value';
+
+  /** Setter for `inputValue` that is also an `@Input`. */
+  @Input()
+  public set inputValue(value: string) {
+    this._inputValue = value;
+  }
+
+  /** Getter for `inputValue`. */
+  public get inputValue() {
+    return this._inputValue;
+  }
+
+  @HostListener('click', ['$event.target'])
+  onClickListener(btn) {
+    console.log('button', btn);
+  }
+
+  @HostBinding('class.focused') focus = false;
+
+  /**
+   * Returns all the CSS classes for the button.
+   *
+   * @ignore
+   */
+  public get classes(): string[] {
+    return [this.appearance, this.size].filter(_class => !!_class).map(_class => `btn-${_class}`);
+  }
+
+  /**
+   * @ignore
+   */
+  public ignoredProperty = 'Ignore me';
+
+  /** Public value. */
+  public internalProperty = 'Public hello';
+
+  /** Private value. */
+  private _value = 'Private hello';
+
+  /** Set the private value. */
+  public set value(value: string | number) {
+    this._value = `${value}`;
+  }
+
+  /** Get the private value. */
+  public get value(): string | number {
+    return this._value;
+  }
+
+  /**
+   * An internal calculation method which adds `x` and `y` together.
+   *
+   * @param x Some number you'd like to use.
+   * @param y Some other number or string you'd like to use, will have `parseInt()` applied before calculation.
+   */
+  public calc(x: number, y: string | number): number {
+    return x + parseInt(`${y}`, 10);
+  }
+
+  /** A public method using an interface. */
+  public publicMethod(things: ISomeInterface) {
+    console.log(things);
+  }
+
+  /**
+   * A protected method.
+   *
+   * @param id Some `id`.
+   */
+  protected protectedMethod(id?: number) {
+    console.log(id);
+  }
+
+  /**
+   * A private method.
+   *
+   * @param password Some `password`.
+   */
+  private privateMethod(password: string) {
+    console.log(password);
+  }
+
+  @Input('showKeyAlias')
+  public showKey: keyof T;
+
+  @Input()
+  public set item(item: T[]) {
+    this.processedItem = item;
+  }
+
+  public processedItem: T[];
+}
--- a/addons/docs/src/frameworks/angular/testfixtures/doc-button/properties.snapshot
+++ b/addons/docs/src/frameworks/angular/testfixtures/doc-button/properties.snapshot
@ -0,0 +1,230 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`angular component properties doc-button 1`] = `
+Object {
+  "sections": Object {
+    "inputs": Array [
+      Object {
+        "defaultValue": Object {
+          "summary": "'secondary'",
+        },
+        "description": "<p>Appearance style of the button. </p>
+",
+        "name": "appearance",
+        "required": true,
+        "type": Object {
+          "summary": "\\"primary\\" | \\"secondary\\"",
+        },
+      },
+      Object {
+        "defaultValue": Object {
+          "summary": undefined,
+        },
+        "description": "<p>Setter for <code>inputValue</code> that is also an <code>@Input</code>. </p>
+",
+        "name": "inputValue",
+        "required": true,
+        "type": Object {
+          "summary": "string",
+        },
+      },
+      Object {
+        "defaultValue": Object {
+          "summary": "false",
+        },
+        "description": "<p>Sets the button to a disabled state. </p>
+",
+        "name": "isDisabled",
+        "required": true,
+        "type": Object {
+          "summary": undefined,
+        },
+      },
+      Object {
+        "defaultValue": Object {
+          "summary": undefined,
+        },
+        "description": undefined,
+        "name": "item",
+        "required": true,
+        "type": Object {
+          "summary": "[]",
+        },
+      },
+      Object {
+        "defaultValue": Object {
+          "summary": undefined,
+        },
+        "description": "<p>The inner text of the button.</p>
+",
+        "name": "label",
+        "required": true,
+        "type": Object {
+          "summary": "string",
+        },
+      },
+      Object {
+        "defaultValue": Object {
+          "summary": undefined,
+        },
+        "description": undefined,
+        "name": "showKeyAlias",
+        "required": true,
+        "type": Object {
+          "summary": "",
+        },
+      },
+      Object {
+        "defaultValue": Object {
+          "summary": "'medium'",
+        },
+        "description": "<p>Size of the button. </p>
+",
+        "name": "size",
+        "required": true,
+        "type": Object {
+          "summary": "ButtonSize",
+        },
+      },
+      Object {
+        "defaultValue": Object {
+          "summary": "false",
+        },
+        "description": "<p>Some input you shouldn&#39;t use.</p>
+",
+        "name": "somethingYouShouldNotUse",
+        "required": true,
+        "type": Object {
+          "summary": undefined,
+        },
+      },
+    ],
+    "methods": Array [
+      Object {
+        "defaultValue": Object {
+          "summary": "",
+        },
+        "description": "<p>An internal calculation method which adds <code>x</code> and <code>y</code> together.</p>
+",
+        "name": "calc",
+        "required": false,
+        "type": Object {
+          "summary": "(x: number, y: string | number) => number",
+        },
+      },
+      Object {
+        "defaultValue": Object {
+          "summary": "",
+        },
+        "description": "<p>A private method.</p>
+",
+        "name": "privateMethod",
+        "required": false,
+        "type": Object {
+          "summary": "(password: string) => void",
+        },
+      },
+      Object {
+        "defaultValue": Object {
+          "summary": "",
+        },
+        "description": "<p>A protected method.</p>
+",
+        "name": "protectedMethod",
+        "required": false,
+        "type": Object {
+          "summary": "(id?: number) => void",
+        },
+      },
+      Object {
+        "defaultValue": Object {
+          "summary": "",
+        },
+        "description": "<p>A public method using an interface. </p>
+",
+        "name": "publicMethod",
+        "required": false,
+        "type": Object {
+          "summary": "(things: ISomeInterface) => void",
+        },
+      },
+    ],
+    "outputs": Array [
+      Object {
+        "defaultValue": Object {
+          "summary": "new EventEmitter<Event>()",
+        },
+        "description": "<p>Handler to be called when the button is clicked by a user.</p>
+<p>Will also block the emission of the event if <code>isDisabled</code> is true.</p>
+",
+        "name": "onClick",
+        "required": true,
+        "type": Object {
+          "summary": "EventEmitter",
+        },
+      },
+    ],
+    "properties": Array [
+      Object {
+        "defaultValue": Object {
+          "summary": "'some value'",
+        },
+        "description": "",
+        "name": "_inputValue",
+        "required": true,
+        "type": Object {
+          "summary": "string",
+        },
+      },
+      Object {
+        "defaultValue": Object {
+          "summary": "'Private hello'",
+        },
+        "description": "<p>Private value. </p>
+",
+        "name": "_value",
+        "required": true,
+        "type": Object {
+          "summary": "string",
+        },
+      },
+      Object {
+        "defaultValue": Object {
+          "summary": "'Public hello'",
+        },
+        "description": "<p>Public value. </p>
+",
+        "name": "internalProperty",
+        "required": true,
+        "type": Object {
+          "summary": "string",
+        },
+      },
+      Object {
+        "defaultValue": Object {
+          "summary": undefined,
+        },
+        "description": "",
+        "name": "processedItem",
+        "required": true,
+        "type": Object {
+          "summary": "T[]",
+        },
+      },
+    ],
+    "view child": Array [
+      Object {
+        "defaultValue": Object {
+          "summary": undefined,
+        },
+        "description": "",
+        "name": "buttonRef",
+        "required": true,
+        "type": Object {
+          "summary": "ElementRef",
+        },
+      },
+    ],
+  },
+}
+`;
--- a/addons/docs/src/frameworks/angular/testfixtures/doc-button/tsconfig.json
+++ b/addons/docs/src/frameworks/angular/testfixtures/doc-button/tsconfig.json
@ -0,0 +1,7 @@
+{
+  "extends": "../../../tsconfig.json",
+  "compilerOptions": {
+    "rootDir": "."
+  },
+  "include": ["./*.ts"]
+}
--- a/addons/docs/src/frameworks/angular/angular-properties.test.ts
+++ b/addons/docs/src/frameworks/angular/angular-properties.test.ts
@ -0,0 +1,50 @@
+import 'jest-specific-snapshot';
+import path from 'path';
+import fs from 'fs';
+import tmp from 'tmp';
+import { sync as spawnSync } from 'cross-spawn';
+
+import { findComponentByName, extractPropsFromData } from './compodoc';
+
+// File hierarchy: __testfixtures__ / some-test-case / input.*
+const inputRegExp = /^input\..*$/;
+
+const runCompodoc = (inputPath: string) => {
+  const testDir = path.dirname(inputPath);
+  const { name: tmpDir, removeCallback } = tmp.dirSync();
+
+  // FIXME: for now, this requires a tsconfig.json for each test case. Tried generating
+  // one dynamically in tmpDir, but compodoc doesn't handle absolute paths properly
+  // (and screwed around with relative paths as well, but couldn't get it working)
+  spawnSync('compodoc', ['-p', `${testDir}/tsconfig.json`, '-e', 'json', '-d', tmpDir], {
+    stdio: 'inherit',
+  });
+  const output = fs.readFileSync(`${tmpDir}/documentation.json`, 'utf8');
+  removeCallback();
+  return output;
+};
+
+describe('angular component properties', () => {
+  const fixturesDir = path.join(__dirname, '__testfixtures__');
+  fs.readdirSync(fixturesDir, { withFileTypes: true }).forEach(testEntry => {
+    if (testEntry.isDirectory()) {
+      const testDir = path.join(fixturesDir, testEntry.name);
+      const testFile = fs.readdirSync(testDir).find(fileName => inputRegExp.test(fileName));
+      if (testFile) {
+        it(testEntry.name, () => {
+          const inputPath = path.join(testDir, testFile);
+
+          // snapshot the output of compodoc
+          const compodocOutput = runCompodoc(inputPath);
+          const compodocJson = JSON.parse(compodocOutput);
+          expect(compodocJson).toMatchSpecificSnapshot(path.join(testDir, 'compodoc.snapshot'));
+
+          // snapshot the output of addon-docs angular-properties
+          const componentData = findComponentByName('InputComponent', compodocJson);
+          const properties = extractPropsFromData(componentData);
+          expect(properties).toMatchSpecificSnapshot(path.join(testDir, 'properties.snapshot'));
+        });
+      }
+    }
+  });
+});
--- a/addons/docs/src/frameworks/angular/compodoc.ts
+++ b/addons/docs/src/frameworks/angular/compodoc.ts
@ -71,6 +71,10 @@ const mapItemToSection = (key: string, item: Method | Property): string => {
  }
 };

+export const findComponentByName = (name: string, compodocJson: CompodocJson) =>
+  compodocJson.components.find((c: Component) => c.name === name) ||
+  compodocJson.directives.find((c: Directive) => c.name === name);
+
 const getComponentData = (component: Component | Directive) => {
  if (!component) {
    return null;
@ -79,10 +83,7 @@ const getComponentData = (component: Component | Directive) => {
  const compodocJson = getCompdocJson();
  checkValidCompodocJson(compodocJson);
  const { name } = component;
-  return (
-    compodocJson.components.find((c: Component) => c.name === name) ||
-    compodocJson.directives.find((c: Directive) => c.name === name)
-  );
+  return findComponentByName(name, compodocJson);
 };

 const displaySignature = (item: Method): string => {
@ -92,12 +93,7 @@ const displaySignature = (item: Method): string => {
  return `(${args.join(', ')}) => ${item.returnType}`;
 };

-export const extractProps = (component: Component | Directive) => {
-  const componentData = getComponentData(component);
-  if (!componentData) {
-    return null;
-  }
-
+export const extractPropsFromData = (componentData: Directive) => {
  const sectionToItems: Sections = {};
  const compodocClasses = ['propertiesClass', 'methodsClass', 'inputsClass', 'outputsClass'];
  type COMPODOC_CLASS = 'propertiesClass' | 'methodsClass' | 'inputsClass' | 'outputsClass';
@ -143,6 +139,11 @@ export const extractProps = (component: Component | Directive) => {
  return isEmpty(sections) ? null : { sections };
 };

+export const extractProps = (component: Component | Directive) => {
+  const componentData = getComponentData(component);
+  return componentData && extractPropsFromData(componentData);
+};
+
 export const extractComponentDescription = (component: Component | Directive) => {
  const componentData = getComponentData(component);
  if (!componentData) {
--- a/addons/docs/src/frameworks/angular/config.ts
+++ b/addons/docs/src/frameworks/angular/config.ts
@ -1,4 +1,3 @@
-/* eslint-disable import/no-extraneous-dependencies */
 import { addParameters } from '@storybook/client-api';
 import { extractProps, extractComponentDescription } from './compodoc';

--- a/addons/docs/src/frameworks/common/config.ts
+++ b/addons/docs/src/frameworks/common/config.ts
@ -1,5 +1,5 @@
-/* eslint-disable import/no-extraneous-dependencies */
 import { addParameters } from '@storybook/client-api';
+/* eslint-disable-next-line import/no-extraneous-dependencies */
 import { DocsPage, DocsContainer } from '@storybook/addon-docs/blocks';

 addParameters({
--- a/addons/docs/src/frameworks/ember/config.js
+++ b/addons/docs/src/frameworks/ember/config.js
@ -1,4 +1,3 @@
-/* eslint-disable import/no-extraneous-dependencies */
 import { addParameters } from '@storybook/client-api';
 import { extractProps, extractComponentDescription } from './jsondoc';

--- a/addons/docs/src/frameworks/react/testfixtures/8140-js-prop-types-oneof/docgen.snapshot
+++ b/addons/docs/src/frameworks/react/testfixtures/8140-js-prop-types-oneof/docgen.snapshot
@ -0,0 +1,102 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`react component properties 8140-js-prop-types-oneof 1`] = `
+"/* eslint-disable react/no-unused-prop-types */
+
+/* eslint-disable react/require-default-props */
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const Alert = props => React.createElement(React.Fragment, null, JSON.stringify(props));
+
+Alert.defaultProps = {
+  mode: 'static',
+  type: 'warning'
+};
+Alert.propTypes = {
+  mode: PropTypes.oneOf(['static', 'timed']),
+  type: PropTypes.oneOf(['success', 'warning', 'error', 'primary']),
+  message: PropTypes.string.isRequired,
+
+  /**
+   * No background or border if static alert
+   */
+  blank: PropTypes.bool,
+
+  /**
+   * Allows icon override, accepts material icon name
+   */
+  icon: PropTypes.string
+};
+export const component = Alert;
+Alert.__docgenInfo = {
+  \\"description\\": \\"\\",
+  \\"methods\\": [],
+  \\"displayName\\": \\"Alert\\",
+  \\"props\\": {
+    \\"mode\\": {
+      \\"defaultValue\\": {
+        \\"value\\": \\"'static'\\",
+        \\"computed\\": false
+      },
+      \\"type\\": {
+        \\"name\\": \\"enum\\",
+        \\"value\\": [{
+          \\"value\\": \\"'static'\\",
+          \\"computed\\": false
+        }, {
+          \\"value\\": \\"'timed'\\",
+          \\"computed\\": false
+        }]
+      },
+      \\"required\\": false,
+      \\"description\\": \\"\\"
+    },
+    \\"type\\": {
+      \\"defaultValue\\": {
+        \\"value\\": \\"'warning'\\",
+        \\"computed\\": false
+      },
+      \\"type\\": {
+        \\"name\\": \\"enum\\",
+        \\"value\\": [{
+          \\"value\\": \\"'success'\\",
+          \\"computed\\": false
+        }, {
+          \\"value\\": \\"'warning'\\",
+          \\"computed\\": false
+        }, {
+          \\"value\\": \\"'error'\\",
+          \\"computed\\": false
+        }, {
+          \\"value\\": \\"'primary'\\",
+          \\"computed\\": false
+        }]
+      },
+      \\"required\\": false,
+      \\"description\\": \\"\\"
+    },
+    \\"message\\": {
+      \\"type\\": {
+        \\"name\\": \\"string\\"
+      },
+      \\"required\\": true,
+      \\"description\\": \\"\\"
+    },
+    \\"blank\\": {
+      \\"type\\": {
+        \\"name\\": \\"bool\\"
+      },
+      \\"required\\": false,
+      \\"description\\": \\"No background or border if static alert\\"
+    },
+    \\"icon\\": {
+      \\"type\\": {
+        \\"name\\": \\"string\\"
+      },
+      \\"required\\": false,
+      \\"description\\": \\"Allows icon override, accepts material icon name\\"
+    }
+  }
+};"
+`;
--- a/addons/docs/src/frameworks/react/testfixtures/8140-js-prop-types-oneof/input.js
+++ b/addons/docs/src/frameworks/react/testfixtures/8140-js-prop-types-oneof/input.js
@ -0,0 +1,27 @@
+/* eslint-disable react/no-unused-prop-types */
+/* eslint-disable react/require-default-props */
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const Alert = props => <>{JSON.stringify(props)}</>;
+
+Alert.defaultProps = {
+  mode: 'static',
+  type: 'warning',
+};
+
+Alert.propTypes = {
+  mode: PropTypes.oneOf(['static', 'timed']),
+  type: PropTypes.oneOf(['success', 'warning', 'error', 'primary']),
+  message: PropTypes.string.isRequired,
+  /**
+   * No background or border if static alert
+   */
+  blank: PropTypes.bool,
+  /**
+   * Allows icon override, accepts material icon name
+   */
+  icon: PropTypes.string,
+};
+
+export const component = Alert;
--- a/addons/docs/src/frameworks/react/testfixtures/8140-js-prop-types-oneof/properties.snapshot
+++ b/addons/docs/src/frameworks/react/testfixtures/8140-js-prop-types-oneof/properties.snapshot
@ -0,0 +1,64 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`react component properties 8140-js-prop-types-oneof 1`] = `
+Object {
+  "rows": Array [
+    Object {
+      "defaultValue": Object {
+        "detail": undefined,
+        "summary": "'static'",
+      },
+      "description": "",
+      "name": "mode",
+      "required": false,
+      "type": Object {
+        "detail": undefined,
+        "summary": "'static' | 'timed'",
+      },
+    },
+    Object {
+      "defaultValue": Object {
+        "detail": undefined,
+        "summary": "'warning'",
+      },
+      "description": "",
+      "name": "type",
+      "required": false,
+      "type": Object {
+        "detail": undefined,
+        "summary": "'success' | 'warning' | 'error' | 'primary'",
+      },
+    },
+    Object {
+      "defaultValue": null,
+      "description": "",
+      "name": "message",
+      "required": true,
+      "type": Object {
+        "detail": undefined,
+        "summary": "string",
+      },
+    },
+    Object {
+      "defaultValue": null,
+      "description": "No background or border if static alert",
+      "name": "blank",
+      "required": false,
+      "type": Object {
+        "detail": undefined,
+        "summary": "bool",
+      },
+    },
+    Object {
+      "defaultValue": null,
+      "description": "Allows icon override, accepts material icon name",
+      "name": "icon",
+      "required": false,
+      "type": Object {
+        "detail": undefined,
+        "summary": "string",
+      },
+    },
+  ],
+}
+`;
--- a/addons/docs/src/frameworks/react/testfixtures/8143-ts-imported-types/docgen.snapshot
+++ b/addons/docs/src/frameworks/react/testfixtures/8143-ts-imported-types/docgen.snapshot
@ -0,0 +1,22 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`react component properties 8143-ts-imported-types 1`] = `
+"import React from 'react';
+export const FooComponent = foo => React.createElement(React.Fragment, null, JSON.stringify(foo));
+export const component = FooComponent;
+FooComponent.__docgenInfo = {
+  \\"description\\": \\"\\",
+  \\"methods\\": [],
+  \\"displayName\\": \\"FooComponent\\",
+  \\"props\\": {
+    \\"bar\\": {
+      \\"required\\": true,
+      \\"tsType\\": {
+        \\"name\\": \\"Foo['bar']\\",
+        \\"raw\\": \\"Foo['bar']\\"
+      },
+      \\"description\\": \\"\\"
+    }
+  }
+};"
+`;
--- a/addons/docs/src/frameworks/react/testfixtures/8143-ts-imported-types/input.tsx
+++ b/addons/docs/src/frameworks/react/testfixtures/8143-ts-imported-types/input.tsx
@ -0,0 +1,10 @@
+import React from 'react';
+import { Foo } from './types';
+
+interface FooProps {
+  bar: Foo['bar'];
+}
+
+export const FooComponent = (foo: FooProps) => <>{JSON.stringify(foo)}</>;
+
+export const component = FooComponent;
--- a/addons/docs/src/frameworks/react/testfixtures/8143-ts-imported-types/properties.snapshot
+++ b/addons/docs/src/frameworks/react/testfixtures/8143-ts-imported-types/properties.snapshot
@ -0,0 +1,18 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`react component properties 8143-ts-imported-types 1`] = `
+Object {
+  "rows": Array [
+    Object {
+      "defaultValue": null,
+      "description": "",
+      "name": "bar",
+      "required": true,
+      "type": Object {
+        "detail": undefined,
+        "summary": "Foo['bar']",
+      },
+    },
+  ],
+}
+`;
--- a/addons/docs/src/frameworks/react/testfixtures/8143-ts-imported-types/types.ts
+++ b/addons/docs/src/frameworks/react/testfixtures/8143-ts-imported-types/types.ts
@ -0,0 +1,3 @@
+export interface Foo {
+  bar: number;
+}
--- a/addons/docs/src/frameworks/react/testfixtures/8143-ts-react-fc-generics/docgen.snapshot
+++ b/addons/docs/src/frameworks/react/testfixtures/8143-ts-react-fc-generics/docgen.snapshot
@ -0,0 +1,24 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`react component properties 8143-ts-react-fc-generics 1`] = `
+"import React from 'react';
+export const Text = ({
+  padding = '0',
+  margin
+}) => React.createElement(React.Fragment, null, \\"Text\\");
+export const component = Text;
+Text.__docgenInfo = {
+  \\"description\\": \\"\\",
+  \\"methods\\": [],
+  \\"displayName\\": \\"Text\\",
+  \\"props\\": {
+    \\"padding\\": {
+      \\"defaultValue\\": {
+        \\"value\\": \\"'0'\\",
+        \\"computed\\": false
+      },
+      \\"required\\": false
+    }
+  }
+};"
+`;
--- a/addons/docs/src/frameworks/react/testfixtures/8143-ts-react-fc-generics/input.tsx
+++ b/addons/docs/src/frameworks/react/testfixtures/8143-ts-react-fc-generics/input.tsx
@ -0,0 +1,10 @@
+import React from 'react';
+
+interface Props {
+  padding: string;
+  margin: number;
+}
+
+export const Text: React.FC<Props> = ({ padding = '0', margin }) => <>Text</>;
+
+export const component = Text;
--- a/addons/docs/src/frameworks/react/testfixtures/8143-ts-react-fc-generics/properties.snapshot
+++ b/addons/docs/src/frameworks/react/testfixtures/8143-ts-react-fc-generics/properties.snapshot
@ -0,0 +1,21 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`react component properties 8143-ts-react-fc-generics 1`] = `
+Object {
+  "rows": Array [
+    Object {
+      "defaultValue": Object {
+        "detail": undefined,
+        "summary": "'0'",
+      },
+      "description": undefined,
+      "name": "padding",
+      "required": false,
+      "type": Object {
+        "detail": undefined,
+        "summary": "unknown",
+      },
+    },
+  ],
+}
+`;
--- a/addons/docs/src/frameworks/react/testfixtures/8279-js-styled-docgen/docgen.snapshot
+++ b/addons/docs/src/frameworks/react/testfixtures/8279-js-styled-docgen/docgen.snapshot
@ -0,0 +1,24 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`react component properties 8279-js-styled-docgen 1`] = `
+"import styled from 'styled-components';
+import PropTypes from 'prop-types';
+/**
+ * Use \`A\` to provide a regular link
+ */
+
+const A = styled('a')({
+  margin: '8px 0',
+  outline: 'none'
+});
+A.displayName = 'Link';
+A.defaultProps = {
+  children: 'This is a link'
+};
+A.propTypes = {
+  /** That should be the clickable element */
+  children: PropTypes.node.isRequired
+};
+export default A;
+export const component = A;"
+`;
--- a/addons/docs/src/frameworks/react/testfixtures/8279-js-styled-docgen/input.js
+++ b/addons/docs/src/frameworks/react/testfixtures/8279-js-styled-docgen/input.js
@ -0,0 +1,23 @@
+import styled from 'styled-components';
+import PropTypes from 'prop-types';
+
+/**
+ * Use `A` to provide a regular link
+ */
+const A = styled('a')({
+  margin: '8px 0',
+  outline: 'none',
+});
+
+A.displayName = 'Link';
+A.defaultProps = {
+  children: 'This is a link',
+};
+
+A.propTypes = {
+  /** That should be the clickable element */
+  children: PropTypes.node.isRequired,
+};
+export default A;
+
+export const component = A;
--- a/addons/docs/src/frameworks/react/testfixtures/8279-js-styled-docgen/properties.snapshot
+++ b/addons/docs/src/frameworks/react/testfixtures/8279-js-styled-docgen/properties.snapshot
@ -0,0 +1,7 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`react component properties 8279-js-styled-docgen 1`] = `
+Object {
+  "rows": Array [],
+}
+`;
--- a/addons/docs/src/frameworks/react/testfixtures/8428-js-static-prop-types/docgen.snapshot
+++ b/addons/docs/src/frameworks/react/testfixtures/8428-js-static-prop-types/docgen.snapshot
@ -0,0 +1,41 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`react component properties 8428-js-static-prop-types 1`] = `
+"function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+/* eslint-disable react/no-unused-prop-types */
+
+/* eslint-disable react/require-default-props */
+import React from 'react';
+import PropTypes from 'prop-types'; // eslint-disable-next-line react/prefer-stateless-function
+
+export default class Test extends React.Component {
+  render() {
+    return React.createElement(\\"div\\", null, \\"test\\");
+  }
+
+}
+
+_defineProperty(Test, \\"propTypes\\", {
+  /**
+   * Please work...
+   */
+  test: PropTypes.string
+});
+
+export const component = Test;
+Test.__docgenInfo = {
+  \\"description\\": \\"\\",
+  \\"methods\\": [],
+  \\"displayName\\": \\"Test\\",
+  \\"props\\": {
+    \\"test\\": {
+      \\"type\\": {
+        \\"name\\": \\"string\\"
+      },
+      \\"required\\": false,
+      \\"description\\": \\"Please work...\\"
+    }
+  }
+};"
+`;
--- a/addons/docs/src/frameworks/react/testfixtures/8428-js-static-prop-types/input.js
+++ b/addons/docs/src/frameworks/react/testfixtures/8428-js-static-prop-types/input.js
@ -0,0 +1,20 @@
+/* eslint-disable react/no-unused-prop-types */
+/* eslint-disable react/require-default-props */
+import React from 'react';
+import PropTypes from 'prop-types';
+
+// eslint-disable-next-line react/prefer-stateless-function
+export default class Test extends React.Component {
+  static propTypes = {
+    /**
+     * Please work...
+     */
+    test: PropTypes.string,
+  };
+
+  render() {
+    return <div>test</div>;
+  }
+}
+
+export const component = Test;
--- a/addons/docs/src/frameworks/react/testfixtures/8428-js-static-prop-types/properties.snapshot
+++ b/addons/docs/src/frameworks/react/testfixtures/8428-js-static-prop-types/properties.snapshot
@ -0,0 +1,18 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`react component properties 8428-js-static-prop-types 1`] = `
+Object {
+  "rows": Array [
+    Object {
+      "defaultValue": null,
+      "description": "Please work...",
+      "name": "test",
+      "required": false,
+      "type": Object {
+        "detail": undefined,
+        "summary": "string",
+      },
+    },
+  ],
+}
+`;
--- a/addons/docs/src/frameworks/react/testfixtures/8663-js-styled-components/docgen.snapshot
+++ b/addons/docs/src/frameworks/react/testfixtures/8663-js-styled-components/docgen.snapshot
@ -0,0 +1,33 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`react component properties 8663-js-styled-components 1`] = `
+"import React from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+const Box = styled.div\`
+  background-color: \${props => props.bg};
+\`;
+Box.propTypes = {
+  bg: PropTypes.string
+};
+export const MyBox = props => React.createElement(Box, props);
+MyBox.propTypes = {
+  // eslint-disable-next-line react/require-default-props
+  bg: PropTypes.string
+};
+export const component = MyBox;
+MyBox.__docgenInfo = {
+  \\"description\\": \\"\\",
+  \\"methods\\": [],
+  \\"displayName\\": \\"MyBox\\",
+  \\"props\\": {
+    \\"bg\\": {
+      \\"type\\": {
+        \\"name\\": \\"string\\"
+      },
+      \\"required\\": false,
+      \\"description\\": \\"\\"
+    }
+  }
+};"
+`;
--- a/addons/docs/src/frameworks/react/testfixtures/8663-js-styled-components/input.js
+++ b/addons/docs/src/frameworks/react/testfixtures/8663-js-styled-components/input.js
@ -0,0 +1,20 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+
+const Box = styled.div`
+  background-color: ${props => props.bg};
+`;
+
+Box.propTypes = {
+  bg: PropTypes.string,
+};
+
+export const MyBox = props => <Box {...props} />;
+
+MyBox.propTypes = {
+  // eslint-disable-next-line react/require-default-props
+  bg: PropTypes.string,
+};
+
+export const component = MyBox;
--- a/addons/docs/src/frameworks/react/testfixtures/8663-js-styled-components/properties.snapshot
+++ b/addons/docs/src/frameworks/react/testfixtures/8663-js-styled-components/properties.snapshot
@ -0,0 +1,18 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`react component properties 8663-js-styled-components 1`] = `
+Object {
+  "rows": Array [
+    Object {
+      "defaultValue": null,
+      "description": "",
+      "name": "bg",
+      "required": false,
+      "type": Object {
+        "detail": undefined,
+        "summary": "string",
+      },
+    },
+  ],
+}
+`;
--- a/addons/docs/src/frameworks/react/testfixtures/8740-ts-multi-props/docgen.snapshot
+++ b/addons/docs/src/frameworks/react/testfixtures/8740-ts-multi-props/docgen.snapshot
@ -0,0 +1,49 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`react component properties 8740-ts-multi-props 1`] = `
+"import React from 'react';
+export const Header = ({
+  size = 'a',
+  children
+}) => React.createElement(\\"div\\", {
+  className: size
+}, children);
+export const Paragraph = ({
+  size,
+  children
+}) => React.createElement(\\"div\\", {
+  className: size
+}, children);
+Paragraph.defaultProps = {
+  size: 'md'
+};
+export const component = Header;
+Header.__docgenInfo = {
+  \\"description\\": \\"\\",
+  \\"methods\\": [],
+  \\"displayName\\": \\"Header\\",
+  \\"props\\": {
+    \\"size\\": {
+      \\"defaultValue\\": {
+        \\"value\\": \\"'a'\\",
+        \\"computed\\": false
+      },
+      \\"required\\": false
+    }
+  }
+};
+Paragraph.__docgenInfo = {
+  \\"description\\": \\"\\",
+  \\"methods\\": [],
+  \\"displayName\\": \\"Paragraph\\",
+  \\"props\\": {
+    \\"size\\": {
+      \\"defaultValue\\": {
+        \\"value\\": \\"'md'\\",
+        \\"computed\\": false
+      },
+      \\"required\\": false
+    }
+  }
+};"
+`;
--- a/addons/docs/src/frameworks/react/testfixtures/8740-ts-multi-props/input.tsx
+++ b/addons/docs/src/frameworks/react/testfixtures/8740-ts-multi-props/input.tsx
@ -0,0 +1,21 @@
+import React from 'react';
+
+export interface ElemAProps {
+  size?: 'a' | 'b' | 'c' | 'd';
+}
+
+export const Header: React.SFC<ElemAProps> = ({ size = 'a', children }) => (
+  <div className={size}>{children}</div>
+);
+
+export interface ElemBProps {
+  size?: 'sm' | 'md' | 'lg';
+}
+
+export const Paragraph: React.SFC<ElemBProps> = ({ size, children }) => (
+  <div className={size}>{children}</div>
+);
+
+Paragraph.defaultProps = { size: 'md' };
+
+export const component = Header;
--- a/addons/docs/src/frameworks/react/testfixtures/8740-ts-multi-props/properties.snapshot
+++ b/addons/docs/src/frameworks/react/testfixtures/8740-ts-multi-props/properties.snapshot
@ -0,0 +1,21 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`react component properties 8740-ts-multi-props 1`] = `
+Object {
+  "rows": Array [
+    Object {
+      "defaultValue": Object {
+        "detail": undefined,
+        "summary": "'a'",
+      },
+      "description": undefined,
+      "name": "size",
+      "required": false,
+      "type": Object {
+        "detail": undefined,
+        "summary": "unknown",
+      },
+    },
+  ],
+}
+`;
--- a/addons/docs/src/frameworks/react/testfixtures/8894-9511-ts-forward-ref/docgen.snapshot
+++ b/addons/docs/src/frameworks/react/testfixtures/8894-9511-ts-forward-ref/docgen.snapshot
@ -0,0 +1,36 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`react component properties 8894-9511-ts-forward-ref 1`] = `
+"import React, { forwardRef } from 'react';
+const Button = forwardRef(({
+  disabled = false,
+  variant = 'small',
+  children
+}, ref) => // eslint-disable-next-line react/button-has-type
+React.createElement(\\"button\\", {
+  disabled: disabled,
+  ref: ref
+}, children, \\" \\", variant));
+Button.__docgenInfo = {
+  \\"description\\": \\"\\",
+  \\"methods\\": [],
+  \\"props\\": {
+    \\"disabled\\": {
+      \\"defaultValue\\": {
+        \\"value\\": \\"false\\",
+        \\"computed\\": false
+      },
+      \\"required\\": false
+    },
+    \\"variant\\": {
+      \\"defaultValue\\": {
+        \\"value\\": \\"'small'\\",
+        \\"computed\\": false
+      },
+      \\"required\\": false
+    }
+  }
+};
+export default Button;
+export const component = Button;"
+`;
--- a/addons/docs/src/frameworks/react/testfixtures/8894-9511-ts-forward-ref/input.tsx
+++ b/addons/docs/src/frameworks/react/testfixtures/8894-9511-ts-forward-ref/input.tsx
@ -0,0 +1,25 @@
+import React, { forwardRef } from 'react';
+
+interface ButtonProps {
+  /**
+   * Sets the button size.
+   */
+  variant?: 'small' | 'large';
+  /**
+   * Disables the button.
+   */
+  disabled?: boolean;
+}
+
+const Button = forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ disabled = false, variant = 'small', children }, ref) => (
+    // eslint-disable-next-line react/button-has-type
+    <button disabled={disabled} ref={ref}>
+      {children} {variant}
+    </button>
+  )
+);
+
+export default Button;
+
+export const component = Button;
--- a/addons/docs/src/frameworks/react/testfixtures/8894-9511-ts-forward-ref/properties.snapshot
+++ b/addons/docs/src/frameworks/react/testfixtures/8894-9511-ts-forward-ref/properties.snapshot
@ -0,0 +1,34 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`react component properties 8894-9511-ts-forward-ref 1`] = `
+Object {
+  "rows": Array [
+    Object {
+      "defaultValue": Object {
+        "detail": undefined,
+        "summary": "false",
+      },
+      "description": undefined,
+      "name": "disabled",
+      "required": false,
+      "type": Object {
+        "detail": undefined,
+        "summary": "unknown",
+      },
+    },
+    Object {
+      "defaultValue": Object {
+        "detail": undefined,
+        "summary": "'small'",
+      },
+      "description": undefined,
+      "name": "variant",
+      "required": false,
+      "type": Object {
+        "detail": undefined,
+        "summary": "unknown",
+      },
+    },
+  ],
+}
+`;
--- a/addons/docs/src/frameworks/react/testfixtures/9023-js-hoc/docgen.snapshot
+++ b/addons/docs/src/frameworks/react/testfixtures/9023-js-hoc/docgen.snapshot
@ -0,0 +1,89 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`react component properties 9023-js-hoc 1`] = `
+"/* eslint-disable react/forbid-prop-types */
+
+/* eslint-disable react/require-default-props */
+
+/* eslint-disable react/no-unused-prop-types */
+
+/* eslint-disable react/prefer-stateless-function */
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const withStyles = themeFn => Comp => Comp;
+
+class Alert extends React.Component {
+  render() {
+    return React.createElement(React.Fragment, null, \\"Alert\\");
+  }
+
+}
+
+Alert.propTypes = {
+  variant: PropTypes.string,
+  dismissible: PropTypes.bool,
+  icon: PropTypes.elementType,
+  classes: PropTypes.object.isRequired
+};
+Alert.defaultProps = {
+  variant: 'primary',
+  dismissible: false
+};
+const StyledAlert = withStyles(theme => ({
+  alert: props => ({
+    backgroundColor: theme.palette[props.variant].main
+  }),
+  message: {
+    display: 'flex',
+    alignItems: 'center'
+  },
+  icon: {
+    marginRight: theme.spacing(2)
+  }
+}))(Alert);
+export const component = StyledAlert;
+Alert.__docgenInfo = {
+  \\"description\\": \\"\\",
+  \\"methods\\": [],
+  \\"displayName\\": \\"Alert\\",
+  \\"props\\": {
+    \\"variant\\": {
+      \\"defaultValue\\": {
+        \\"value\\": \\"'primary'\\",
+        \\"computed\\": false
+      },
+      \\"type\\": {
+        \\"name\\": \\"string\\"
+      },
+      \\"required\\": false,
+      \\"description\\": \\"\\"
+    },
+    \\"dismissible\\": {
+      \\"defaultValue\\": {
+        \\"value\\": \\"false\\",
+        \\"computed\\": false
+      },
+      \\"type\\": {
+        \\"name\\": \\"bool\\"
+      },
+      \\"required\\": false,
+      \\"description\\": \\"\\"
+    },
+    \\"icon\\": {
+      \\"type\\": {
+        \\"name\\": \\"elementType\\"
+      },
+      \\"required\\": false,
+      \\"description\\": \\"\\"
+    },
+    \\"classes\\": {
+      \\"type\\": {
+        \\"name\\": \\"object\\"
+      },
+      \\"required\\": true,
+      \\"description\\": \\"\\"
+    }
+  }
+};"
+`;
--- a/addons/docs/src/frameworks/react/testfixtures/9023-js-hoc/input.js
+++ b/addons/docs/src/frameworks/react/testfixtures/9023-js-hoc/input.js
@ -0,0 +1,39 @@
+/* eslint-disable react/forbid-prop-types */
+/* eslint-disable react/require-default-props */
+/* eslint-disable react/no-unused-prop-types */
+/* eslint-disable react/prefer-stateless-function */
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const withStyles = themeFn => Comp => Comp;
+
+class Alert extends React.Component {
+  render() {
+    return <>Alert</>;
+  }
+}
+Alert.propTypes = {
+  variant: PropTypes.string,
+  dismissible: PropTypes.bool,
+  icon: PropTypes.elementType,
+  classes: PropTypes.object.isRequired,
+};
+Alert.defaultProps = {
+  variant: 'primary',
+  dismissible: false,
+};
+
+const StyledAlert = withStyles(theme => ({
+  alert: props => ({
+    backgroundColor: theme.palette[props.variant].main,
+  }),
+  message: {
+    display: 'flex',
+    alignItems: 'center',
+  },
+  icon: {
+    marginRight: theme.spacing(2),
+  },
+}))(Alert);
+
+export const component = StyledAlert;
--- a/addons/docs/src/frameworks/react/testfixtures/9023-js-hoc/properties.snapshot
+++ b/addons/docs/src/frameworks/react/testfixtures/9023-js-hoc/properties.snapshot
@ -0,0 +1,54 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`react component properties 9023-js-hoc 1`] = `
+Object {
+  "rows": Array [
+    Object {
+      "defaultValue": Object {
+        "detail": undefined,
+        "summary": "'primary'",
+      },
+      "description": "",
+      "name": "variant",
+      "required": false,
+      "type": Object {
+        "detail": undefined,
+        "summary": "string",
+      },
+    },
+    Object {
+      "defaultValue": Object {
+        "detail": undefined,
+        "summary": "false",
+      },
+      "description": "",
+      "name": "dismissible",
+      "required": false,
+      "type": Object {
+        "detail": undefined,
+        "summary": "bool",
+      },
+    },
+    Object {
+      "defaultValue": null,
+      "description": "",
+      "name": "icon",
+      "required": false,
+      "type": Object {
+        "detail": undefined,
+        "summary": "elementType",
+      },
+    },
+    Object {
+      "defaultValue": null,
+      "description": "",
+      "name": "classes",
+      "required": true,
+      "type": Object {
+        "detail": undefined,
+        "summary": "object",
+      },
+    },
+  ],
+}
+`;
--- a/addons/docs/src/frameworks/react/testfixtures/9399-js-proptypes-shape/docgen.snapshot
+++ b/addons/docs/src/frameworks/react/testfixtures/9399-js-proptypes-shape/docgen.snapshot
@ -0,0 +1,47 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`react component properties 9399-js-proptypes-shape 1`] = `
+"import React from 'react';
+import PropTypes from 'prop-types';
+export const Credits = ({
+  areas
+}) => React.createElement(React.Fragment, null, JSON.stringify(areas)); // https://github.com/storybookjs/storybook/issues/9399
+
+Credits.propTypes = {
+  areas: PropTypes.arrayOf(PropTypes.shape({
+    position: PropTypes.string.isRequired,
+    names: PropTypes.arrayOf(PropTypes.string).isRequired
+  })).isRequired
+};
+export const component = Credits;
+Credits.__docgenInfo = {
+  \\"description\\": \\"\\",
+  \\"methods\\": [],
+  \\"displayName\\": \\"Credits\\",
+  \\"props\\": {
+    \\"areas\\": {
+      \\"type\\": {
+        \\"name\\": \\"arrayOf\\",
+        \\"value\\": {
+          \\"name\\": \\"shape\\",
+          \\"value\\": {
+            \\"position\\": {
+              \\"name\\": \\"string\\",
+              \\"required\\": true
+            },
+            \\"names\\": {
+              \\"name\\": \\"arrayOf\\",
+              \\"value\\": {
+                \\"name\\": \\"string\\"
+              },
+              \\"required\\": true
+            }
+          }
+        }
+      },
+      \\"required\\": true,
+      \\"description\\": \\"\\"
+    }
+  }
+};"
+`;
--- a/addons/docs/src/frameworks/react/testfixtures/9399-js-proptypes-shape/input.js
+++ b/addons/docs/src/frameworks/react/testfixtures/9399-js-proptypes-shape/input.js
@ -0,0 +1,16 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+export const Credits = ({ areas }) => <>{JSON.stringify(areas)}</>;
+
+// https://github.com/storybookjs/storybook/issues/9399
+Credits.propTypes = {
+  areas: PropTypes.arrayOf(
+    PropTypes.shape({
+      position: PropTypes.string.isRequired,
+      names: PropTypes.arrayOf(PropTypes.string).isRequired,
+    })
+  ).isRequired,
+};
+
+export const component = Credits;
--- a/addons/docs/src/frameworks/react/testfixtures/9399-js-proptypes-shape/properties.snapshot
+++ b/addons/docs/src/frameworks/react/testfixtures/9399-js-proptypes-shape/properties.snapshot
@ -0,0 +1,18 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`react component properties 9399-js-proptypes-shape 1`] = `
+Object {
+  "rows": Array [
+    Object {
+      "defaultValue": null,
+      "description": "",
+      "name": "areas",
+      "required": true,
+      "type": Object {
+        "detail": "[object]",
+        "summary": "object[]",
+      },
+    },
+  ],
+}
+`;
--- a/addons/docs/src/frameworks/react/testfixtures/9465-ts-type-props/docgen.snapshot
+++ b/addons/docs/src/frameworks/react/testfixtures/9465-ts-type-props/docgen.snapshot
@ -0,0 +1,33 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`react component properties 9465-ts-type-props 1`] = `
+"import React from 'react';
+
+const Component = ({
+  disabled = false,
+  children
+}) => // eslint-disable-next-line react/button-has-type
+React.createElement(\\"button\\", {
+  disabled: disabled
+}, children);
+
+export const component = Component;
+Component.__docgenInfo = {
+  \\"description\\": \\"\\",
+  \\"methods\\": [],
+  \\"displayName\\": \\"Component\\",
+  \\"props\\": {
+    \\"disabled\\": {
+      \\"defaultValue\\": {
+        \\"value\\": \\"false\\",
+        \\"computed\\": false
+      },
+      \\"required\\": false,
+      \\"tsType\\": {
+        \\"name\\": \\"boolean\\"
+      },
+      \\"description\\": \\"\\"
+    }
+  }
+};"
+`;
--- a/addons/docs/src/frameworks/react/testfixtures/9465-ts-type-props/input.tsx
+++ b/addons/docs/src/frameworks/react/testfixtures/9465-ts-type-props/input.tsx
@ -0,0 +1,12 @@
+import React from 'react';
+
+type Props = React.ButtonHTMLAttributes<HTMLButtonElement> & {
+  disabled?: boolean;
+};
+
+const Component = ({ disabled = false, children }: Props) => (
+  // eslint-disable-next-line react/button-has-type
+  <button disabled={disabled}>{children}</button>
+);
+
+export const component = Component;
--- a/addons/docs/src/frameworks/react/testfixtures/9465-ts-type-props/properties.snapshot
+++ b/addons/docs/src/frameworks/react/testfixtures/9465-ts-type-props/properties.snapshot
@ -0,0 +1,21 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`react component properties 9465-ts-type-props 1`] = `
+Object {
+  "rows": Array [
+    Object {
+      "defaultValue": Object {
+        "detail": undefined,
+        "summary": "false",
+      },
+      "description": "",
+      "name": "disabled",
+      "required": false,
+      "type": Object {
+        "detail": undefined,
+        "summary": "boolean",
+      },
+    },
+  ],
+}
+`;
--- a/addons/docs/src/frameworks/react/testfixtures/9493-ts-display-name/docgen.snapshot
+++ b/addons/docs/src/frameworks/react/testfixtures/9493-ts-display-name/docgen.snapshot
@ -0,0 +1,59 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`react component properties 9493-ts-display-name 1`] = `
+"import styled from '@emotion/styled';
+import React from 'react';
+const Wrapper = styled('div')(({
+  theme
+}) => ({
+  backgroundColor: 'tomato',
+  color: 'white',
+  padding: 10
+}));
+
+/**
+ * This message should show up in the Docs panel if everything works fine.
+ */
+export const EmpireAlert = ({
+  title = 'Code Yellow',
+  message
+}) => React.createElement(Wrapper, null, React.createElement(\\"h1\\", null, title), React.createElement(\\"p\\", null, message));
+EmpireAlert.displayName = 'SomeOtherDisplayName';
+export const component = EmpireAlert;
+EmpireAlert.__docgenInfo = {
+  \\"description\\": \\"This message should show up in the Docs panel if everything works fine.\\",
+  \\"methods\\": [],
+  \\"displayName\\": \\"SomeOtherDisplayName\\",
+  \\"props\\": {
+    \\"title\\": {
+      \\"defaultValue\\": {
+        \\"value\\": \\"'Code Yellow'\\",
+        \\"computed\\": false
+      },
+      \\"required\\": false,
+      \\"tsType\\": {
+        \\"name\\": \\"union\\",
+        \\"raw\\": \\"'Code Red' | 'Code Yellow' | 'Code Green'\\",
+        \\"elements\\": [{
+          \\"name\\": \\"literal\\",
+          \\"value\\": \\"'Code Red'\\"
+        }, {
+          \\"name\\": \\"literal\\",
+          \\"value\\": \\"'Code Yellow'\\"
+        }, {
+          \\"name\\": \\"literal\\",
+          \\"value\\": \\"'Code Green'\\"
+        }]
+      },
+      \\"description\\": \\"A title that brings attention to the alert.\\"
+    },
+    \\"message\\": {
+      \\"required\\": true,
+      \\"tsType\\": {
+        \\"name\\": \\"string\\"
+      },
+      \\"description\\": \\"A message alerting about Empire activities.\\"
+    }
+  }
+};"
+`;
--- a/addons/docs/src/frameworks/react/testfixtures/9493-ts-display-name/input.tsx
+++ b/addons/docs/src/frameworks/react/testfixtures/9493-ts-display-name/input.tsx
@ -0,0 +1,37 @@
+import styled from '@emotion/styled';
+import React from 'react';
+
+const Wrapper = styled('div')<{}>(({ theme }) => ({
+  backgroundColor: 'tomato',
+  color: 'white',
+  padding: 10,
+}));
+
+type AlertCode = 'Code Red' | 'Code Yellow' | 'Code Green';
+
+export interface EmpireAlertProps {
+  /**
+   * A title that brings attention to the alert.
+   */
+  title: AlertCode;
+  /**
+   * A message alerting about Empire activities.
+   */
+  message: string;
+}
+
+/**
+ * This message should show up in the Docs panel if everything works fine.
+ */
+export const EmpireAlert: React.FC<EmpireAlertProps> = ({
+  title = 'Code Yellow',
+  message,
+}: EmpireAlertProps) => (
+  <Wrapper>
+    <h1>{title}</h1>
+    <p>{message}</p>
+  </Wrapper>
+);
+EmpireAlert.displayName = 'SomeOtherDisplayName';
+
+export const component = EmpireAlert;
--- a/addons/docs/src/frameworks/react/testfixtures/9493-ts-display-name/properties.snapshot
+++ b/addons/docs/src/frameworks/react/testfixtures/9493-ts-display-name/properties.snapshot
@ -0,0 +1,31 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`react component properties 9493-ts-display-name 1`] = `
+Object {
+  "rows": Array [
+    Object {
+      "defaultValue": Object {
+        "detail": undefined,
+        "summary": "'Code Yellow'",
+      },
+      "description": "A title that brings attention to the alert.",
+      "name": "title",
+      "required": false,
+      "type": Object {
+        "detail": undefined,
+        "summary": "union",
+      },
+    },
+    Object {
+      "defaultValue": null,
+      "description": "A message alerting about Empire activities.",
+      "name": "message",
+      "required": true,
+      "type": Object {
+        "detail": undefined,
+        "summary": "string",
+      },
+    },
+  ],
+}
+`;
--- a/addons/docs/src/frameworks/react/testfixtures/9556-ts-react-default-exports/docgen.snapshot
+++ b/addons/docs/src/frameworks/react/testfixtures/9556-ts-react-default-exports/docgen.snapshot
@ -0,0 +1,33 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`react component properties 9556-ts-react-default-exports 1`] = `
+"function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+/* eslint-disable react/button-has-type */
+import React from 'react';
+export const Button = ({
+  isDisabled = false,
+  ...props
+}) => React.createElement(\\"button\\", _extends({
+  disabled: isDisabled
+}, props));
+export const component = Button;
+Button.__docgenInfo = {
+  \\"description\\": \\"\\",
+  \\"methods\\": [],
+  \\"displayName\\": \\"Button\\",
+  \\"props\\": {
+    \\"isDisabled\\": {
+      \\"defaultValue\\": {
+        \\"value\\": \\"false\\",
+        \\"computed\\": false
+      },
+      \\"required\\": false,
+      \\"tsType\\": {
+        \\"name\\": \\"boolean\\"
+      },
+      \\"description\\": \\"\\"
+    }
+  }
+};"
+`;
--- a/addons/docs/src/frameworks/react/testfixtures/9556-ts-react-default-exports/input.tsx
+++ b/addons/docs/src/frameworks/react/testfixtures/9556-ts-react-default-exports/input.tsx
@ -0,0 +1,12 @@
+/* eslint-disable react/button-has-type */
+import React from 'react';
+
+export interface Props extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  isDisabled?: boolean;
+}
+
+export const Button: React.FC<Props> = ({ isDisabled = false, ...props }: Props) => (
+  <button disabled={isDisabled} {...props} />
+);
+
+export const component = Button;
--- a/addons/docs/src/frameworks/react/testfixtures/9556-ts-react-default-exports/properties.snapshot
+++ b/addons/docs/src/frameworks/react/testfixtures/9556-ts-react-default-exports/properties.snapshot
@ -0,0 +1,21 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`react component properties 9556-ts-react-default-exports 1`] = `
+Object {
+  "rows": Array [
+    Object {
+      "defaultValue": Object {
+        "detail": undefined,
+        "summary": "false",
+      },
+      "description": "",
+      "name": "isDisabled",
+      "required": false,
+      "type": Object {
+        "detail": undefined,
+        "summary": "boolean",
+      },
+    },
+  ],
+}
+`;
--- a/addons/docs/src/frameworks/react/testfixtures/9575-ts-camel-case/docgen.snapshot
+++ b/addons/docs/src/frameworks/react/testfixtures/9575-ts-camel-case/docgen.snapshot
@ -0,0 +1,40 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`react component properties 9575-ts-camel-case 1`] = `
+"import PropTypes from 'prop-types';
+import React from 'react';
+
+const iconButton = function IconButton(props) {
+  return React.createElement(\\"div\\", {
+    className: \\"icon-button\\"
+  }, \\"icon-button\\");
+};
+
+iconButton.propTypes = {
+  // eslint-disable-next-line react/no-unused-prop-types
+  color: PropTypes.string
+};
+iconButton.defaultProps = {
+  color: 'primary'
+};
+iconButton.__docgenInfo = {
+  \\"description\\": \\"\\",
+  \\"methods\\": [],
+  \\"displayName\\": \\"iconButton\\",
+  \\"props\\": {
+    \\"color\\": {
+      \\"defaultValue\\": {
+        \\"value\\": \\"'primary'\\",
+        \\"computed\\": false
+      },
+      \\"type\\": {
+        \\"name\\": \\"string\\"
+      },
+      \\"required\\": false,
+      \\"description\\": \\"\\"
+    }
+  }
+};
+export default iconButton;
+export const component = iconButton;"
+`;
--- a/addons/docs/src/frameworks/react/testfixtures/9575-ts-camel-case/input.tsx
+++ b/addons/docs/src/frameworks/react/testfixtures/9575-ts-camel-case/input.tsx
@ -0,0 +1,25 @@
+import PropTypes from 'prop-types';
+import React, { FC } from 'react';
+
+export interface IProps {
+  /**
+   * button color
+   */
+  color?: string;
+}
+
+const iconButton: FC<IProps> = function IconButton(props) {
+  return <div className="icon-button">icon-button</div>;
+};
+
+iconButton.propTypes = {
+  // eslint-disable-next-line react/no-unused-prop-types
+  color: PropTypes.string,
+};
+
+iconButton.defaultProps = {
+  color: 'primary',
+};
+
+export default iconButton;
+export const component = iconButton;
--- a/addons/docs/src/frameworks/react/testfixtures/9575-ts-camel-case/properties.snapshot
+++ b/addons/docs/src/frameworks/react/testfixtures/9575-ts-camel-case/properties.snapshot
@ -0,0 +1,21 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`react component properties 9575-ts-camel-case 1`] = `
+Object {
+  "rows": Array [
+    Object {
+      "defaultValue": Object {
+        "detail": undefined,
+        "summary": "'primary'",
+      },
+      "description": "",
+      "name": "color",
+      "required": false,
+      "type": Object {
+        "detail": undefined,
+        "summary": "string",
+      },
+    },
+  ],
+}
+`;
--- a/addons/docs/src/frameworks/react/testfixtures/9586-js-react-memo/docgen.snapshot
+++ b/addons/docs/src/frameworks/react/testfixtures/9586-js-react-memo/docgen.snapshot
@ -0,0 +1,44 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`react component properties 9586-js-react-memo 1`] = `
+"import React from 'react';
+import PropTypes from 'prop-types';
+
+function Button({
+  label,
+  onClick
+}) {
+  // eslint-disable-next-line react/button-has-type
+  return React.createElement(\\"button\\", {
+    onClick: onClick
+  }, label);
+}
+
+Button.propTypes = {
+  label: PropTypes.string.isRequired,
+  onClick: PropTypes.func.isRequired
+};
+const MemoButton = React.memo(Button);
+export const component = MemoButton;
+Button.__docgenInfo = {
+  \\"description\\": \\"\\",
+  \\"methods\\": [],
+  \\"displayName\\": \\"Button\\",
+  \\"props\\": {
+    \\"label\\": {
+      \\"type\\": {
+        \\"name\\": \\"string\\"
+      },
+      \\"required\\": true,
+      \\"description\\": \\"\\"
+    },
+    \\"onClick\\": {
+      \\"type\\": {
+        \\"name\\": \\"func\\"
+      },
+      \\"required\\": true,
+      \\"description\\": \\"\\"
+    }
+  }
+};"
+`;
--- a/addons/docs/src/frameworks/react/testfixtures/9586-js-react-memo/input.js
+++ b/addons/docs/src/frameworks/react/testfixtures/9586-js-react-memo/input.js
@ -0,0 +1,15 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+function Button({ label, onClick }) {
+  // eslint-disable-next-line react/button-has-type
+  return <button onClick={onClick}>{label}</button>;
+}
+
+Button.propTypes = {
+  label: PropTypes.string.isRequired,
+  onClick: PropTypes.func.isRequired,
+};
+
+const MemoButton = React.memo(Button);
+export const component = MemoButton;
--- a/addons/docs/src/frameworks/react/testfixtures/9586-js-react-memo/properties.snapshot
+++ b/addons/docs/src/frameworks/react/testfixtures/9586-js-react-memo/properties.snapshot
@ -0,0 +1,7 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`react component properties 9586-js-react-memo 1`] = `
+Object {
+  "rows": Array [],
+}
+`;
--- a/addons/docs/src/frameworks/react/testfixtures/9591-ts-import-types/Bar.tsx
+++ b/addons/docs/src/frameworks/react/testfixtures/9591-ts-import-types/Bar.tsx
@ -0,0 +1,3 @@
+export type BarProps = {
+  foo?: string;
+};
--- a/addons/docs/src/frameworks/react/testfixtures/9591-ts-import-types/docgen.snapshot
+++ b/addons/docs/src/frameworks/react/testfixtures/9591-ts-import-types/docgen.snapshot
@ -0,0 +1,23 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`react component properties 9591-ts-import-types 1`] = `
+"import React from 'react';
+
+const Other = props => React.createElement(\\"span\\", props, \\"Other\\");
+
+export const component = Other;
+Other.__docgenInfo = {
+  \\"description\\": \\"\\",
+  \\"methods\\": [],
+  \\"displayName\\": \\"Other\\",
+  \\"props\\": {
+    \\"other\\": {
+      \\"required\\": false,
+      \\"tsType\\": {
+        \\"name\\": \\"number\\"
+      },
+      \\"description\\": \\"\\"
+    }
+  }
+};"
+`;
--- a/addons/docs/src/frameworks/react/testfixtures/9591-ts-import-types/input.tsx
+++ b/addons/docs/src/frameworks/react/testfixtures/9591-ts-import-types/input.tsx
@ -0,0 +1,10 @@
+import React from 'react';
+import { BarProps } from './Bar';
+
+type OtherProps = BarProps & {
+  other?: number;
+};
+
+const Other = (props: OtherProps) => <span {...props}>Other</span>;
+
+export const component = Other;
--- a/addons/docs/src/frameworks/react/testfixtures/9591-ts-import-types/properties.snapshot
+++ b/addons/docs/src/frameworks/react/testfixtures/9591-ts-import-types/properties.snapshot
@ -0,0 +1,18 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`react component properties 9591-ts-import-types 1`] = `
+Object {
+  "rows": Array [
+    Object {
+      "defaultValue": null,
+      "description": "",
+      "name": "other",
+      "required": false,
+      "type": Object {
+        "detail": undefined,
+        "summary": "number",
+      },
+    },
+  ],
+}
+`;
--- a/addons/docs/src/frameworks/react/testfixtures/9592-ts-styled-props/docgen.snapshot
+++ b/addons/docs/src/frameworks/react/testfixtures/9592-ts-styled-props/docgen.snapshot
@ -0,0 +1,33 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`react component properties 9592-ts-styled-props 1`] = `
+"import React from 'react';
+import styled from 'styled-components';
+const StyledHello = styled.div\`
+  color: red;
+\`;
+
+const Hello = ({
+  title
+}) => {
+  return React.createElement(StyledHello, {
+    className: \\"hello\\"
+  }, \\"Hello Component \\", title);
+};
+
+export const component = Hello;
+Hello.__docgenInfo = {
+  \\"description\\": \\"\\",
+  \\"methods\\": [],
+  \\"displayName\\": \\"Hello\\",
+  \\"props\\": {
+    \\"title\\": {
+      \\"required\\": true,
+      \\"tsType\\": {
+        \\"name\\": \\"string\\"
+      },
+      \\"description\\": \\"\\"
+    }
+  }
+};"
+`;
--- a/addons/docs/src/frameworks/react/testfixtures/9592-ts-styled-props/input.tsx
+++ b/addons/docs/src/frameworks/react/testfixtures/9592-ts-styled-props/input.tsx
@ -0,0 +1,16 @@
+import React from 'react';
+import styled from 'styled-components';
+
+interface HelloProps {
+  title: string;
+}
+
+const StyledHello = styled.div`
+  color: red;
+`;
+
+const Hello = ({ title }: HelloProps) => {
+  return <StyledHello className="hello">Hello Component {title}</StyledHello>;
+};
+
+export const component = Hello;
--- a/addons/docs/src/frameworks/react/testfixtures/9592-ts-styled-props/properties.snapshot
+++ b/addons/docs/src/frameworks/react/testfixtures/9592-ts-styled-props/properties.snapshot
@ -0,0 +1,18 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`react component properties 9592-ts-styled-props 1`] = `
+Object {
+  "rows": Array [
+    Object {
+      "defaultValue": null,
+      "description": "",
+      "name": "title",
+      "required": true,
+      "type": Object {
+        "detail": undefined,
+        "summary": "string",
+      },
+    },
+  ],
+}
+`;
--- a/addons/docs/src/frameworks/react/testfixtures/9626-js-default-values/docgen.snapshot
+++ b/addons/docs/src/frameworks/react/testfixtures/9626-js-default-values/docgen.snapshot
@ -0,0 +1,24 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`react component properties 9626-js-default-values 1`] = `
+"import React from 'react'; // eslint-disable-next-line react/prop-types
+
+export const Tag = ({
+  title = 'Beta'
+}) => React.createElement(\\"div\\", null, title);
+export const component = Tag;
+Tag.__docgenInfo = {
+  \\"description\\": \\"\\",
+  \\"methods\\": [],
+  \\"displayName\\": \\"Tag\\",
+  \\"props\\": {
+    \\"title\\": {
+      \\"defaultValue\\": {
+        \\"value\\": \\"'Beta'\\",
+        \\"computed\\": false
+      },
+      \\"required\\": false
+    }
+  }
+};"
+`;
--- a/addons/docs/src/frameworks/react/testfixtures/9626-js-default-values/input.js
+++ b/addons/docs/src/frameworks/react/testfixtures/9626-js-default-values/input.js
@ -0,0 +1,5 @@
+import React from 'react';
+
+// eslint-disable-next-line react/prop-types
+export const Tag = ({ title = 'Beta' }) => <div>{title}</div>;
+export const component = Tag;
--- a/addons/docs/src/frameworks/react/testfixtures/9626-js-default-values/properties.snapshot
+++ b/addons/docs/src/frameworks/react/testfixtures/9626-js-default-values/properties.snapshot
@ -0,0 +1,21 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`react component properties 9626-js-default-values 1`] = `
+Object {
+  "rows": Array [
+    Object {
+      "defaultValue": Object {
+        "detail": undefined,
+        "summary": "'Beta'",
+      },
+      "description": undefined,
+      "name": "title",
+      "required": false,
+      "type": Object {
+        "detail": undefined,
+        "summary": "unknown",
+      },
+    },
+  ],
+}
+`;
--- a/addons/docs/src/frameworks/react/testfixtures/9668-js-proptypes-no-jsdoc/docgen.snapshot
+++ b/addons/docs/src/frameworks/react/testfixtures/9668-js-proptypes-no-jsdoc/docgen.snapshot
@ -0,0 +1,40 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`react component properties 9668-js-proptypes-no-jsdoc 1`] = `
+"/* eslint-disable react/require-default-props */
+
+/* eslint-disable react/no-unused-prop-types */
+
+/* eslint-disable react/forbid-prop-types */
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const CCTable = props => React.createElement(React.Fragment, null, JSON.stringify(props));
+
+CCTable.propTypes = {
+  heads: PropTypes.array.isRequired,
+  onAddClick: PropTypes.func
+};
+export const component = CCTable;
+CCTable.__docgenInfo = {
+  \\"description\\": \\"\\",
+  \\"methods\\": [],
+  \\"displayName\\": \\"CCTable\\",
+  \\"props\\": {
+    \\"heads\\": {
+      \\"type\\": {
+        \\"name\\": \\"array\\"
+      },
+      \\"required\\": true,
+      \\"description\\": \\"\\"
+    },
+    \\"onAddClick\\": {
+      \\"type\\": {
+        \\"name\\": \\"func\\"
+      },
+      \\"required\\": false,
+      \\"description\\": \\"\\"
+    }
+  }
+};"
+`;
--- a/Show More
+++ b/Show More