Added specific react typescript handling for default value

addons/docs/src/frameworks/react/extractProps.ts

@@ -4,6 +4,7 @@ import { PropDef } from '@storybook/components';
 import { hasDocgen, extractComponentProps, PropsExtractor, TypeSystem } from '../../lib/docgen';
 import { Component } from '../../blocks/shared';
 import { enhancePropTypesProps } from './propTypes/handleProp';
+import { enhanceTypeScriptProps } from './typeScript/handleProp';
 
 export interface PropDefMap {
   [p: string]: PropDef;
@@ -37,11 +38,14 @@ function getPropDefs(component: Component, section: string): PropDef[] {
     return [];
   }
 
-  if (extractedProps[0].typeSystem === TypeSystem.JAVASCRIPT) {
-    return enhancePropTypesProps(extractedProps, component);
+  switch (extractedProps[0].typeSystem) {
+    case TypeSystem.JAVASCRIPT:
+      return enhancePropTypesProps(extractedProps, component);
+    case TypeSystem.TYPESCRIPT:
+      return enhanceTypeScriptProps(extractedProps);
+    default:
+      return extractedProps.map(x => x.propDef);
   }
-
-  return extractedProps.map(x => x.propDef);
 }
 
 export const extractProps: PropsExtractor = component => ({

addons/docs/src/frameworks/react/inspection/types.ts

@@ -1,79 +0,0 @@
-export enum InspectionType {
-  IDENTIFIER = 'Identifier',
-  LITERAL = 'Literal',
-  OBJECT = 'Object',
-  ARRAY = 'Array',
-  FUNCTION = 'Function',
-  CLASS = 'Class',
-  ELEMENT = 'Element',
-  UNKNOWN = 'Unknown',
-}
-
-export interface BaseInspectionInferedType {
-  type: InspectionType;
-}
-
-// TODO: Fix this.
-// export interface OptionalIdentifierInspectionType extends BaseInspectionInferedType {
-//   identifier?: string;
-// }
-
-// export interface RequiredIdentifierInspectionType extends BaseInspectionInferedType {
-//   identifier: string;
-// }
-
-// export type IdentifiableInspectionType =
-//   | OptionalIdentifierInspectionType
-//   | RequiredIdentifierInspectionType;
-
-export interface InspectionIdentifier extends BaseInspectionInferedType {
-  type: InspectionType.IDENTIFIER;
-  identifier: string;
-}
-
-export interface InspectionLiteral extends BaseInspectionInferedType {
-  type: InspectionType.LITERAL;
-}
-
-export interface InspectionObject extends BaseInspectionInferedType {
-  type: InspectionType.OBJECT;
-}
-
-export interface InspectionArray extends BaseInspectionInferedType {
-  type: InspectionType.ARRAY;
-}
-
-export interface InspectionClass extends BaseInspectionInferedType {
-  type: InspectionType.CLASS;
-  identifier: string;
-}
-
-export interface InspectionFunction extends BaseInspectionInferedType {
-  type: InspectionType.FUNCTION;
-  identifier?: string;
-  hasArguments: boolean;
-}
-
-export interface InspectionElement extends BaseInspectionInferedType {
-  type: InspectionType.ELEMENT;
-  identifier?: string;
-}
-
-export interface InspectionUnknown extends BaseInspectionInferedType {
-  type: InspectionType.UNKNOWN;
-}
-
-export type InspectionInferedType =
-  | InspectionIdentifier
-  | InspectionLiteral
-  | InspectionObject
-  | InspectionArray
-  | InspectionClass
-  | InspectionFunction
-  | InspectionElement
-  | InspectionUnknown;
-
-export interface InspectionResult {
-  inferedType: InspectionInferedType;
-  ast?: any;
-}

addons/docs/src/frameworks/react/lib/createDefaultValue.ts

@@ -1,25 +1,32 @@
 import { isNil } from 'lodash';
 // @ts-ignore
 import { PropDefaultValue } from '@storybook/components';
-import { inspectValue } from '../inspection/inspectValue';
-import { OBJECT_CAPTION, FUNCTION_CAPTION, ELEMENT_CAPTION, ARRAY_CAPTION } from './captions';
-import { generateCode } from '../utils/generateCode';
+import {
+  OBJECT_CAPTION,
+  FUNCTION_CAPTION,
+  ELEMENT_CAPTION,
+  ARRAY_CAPTION,
+} from '../propTypes/captions';
+import { generateCode } from './generateCode';
 import {
   InspectionFunction,
   InspectionResult,
   InspectionType,
   InspectionElement,
-} from '../inspection/types';
-import { isHtmlTag } from '../utils/isHtmlTag';
+  InspectionIdentifiableInferedType,
+  inspectValue,
+} from './inspection';
+import { isHtmlTag } from './isHtmlTag';
 import { createSummaryValue, isTooLongForDefaultValueSummary } from '../../../lib';
 
-// TODO: Fix this any type.
-function getPrettyIdentifier(inferedType: any): string {
+function getPrettyIdentifier(inferedType: InspectionIdentifiableInferedType): string {
   const { type, identifier } = inferedType;
 
   switch (type) {
     case InspectionType.FUNCTION:
-      return inferedType.hasArguments ? `${identifier}( ... )` : `${identifier}()`;
+      return (inferedType as InspectionFunction).hasArguments
+        ? `${identifier}( ... )`
+        : `${identifier}()`;
     case InspectionType.ELEMENT:
       return `<${identifier} />`;
     default:
@@ -45,7 +52,10 @@ function generateFunc({ inferedType, ast }: InspectionResult): PropDefaultValue
   const { identifier } = inferedType as InspectionFunction;
 
   if (!isNil(identifier)) {
-    return createSummaryValue(getPrettyIdentifier(inferedType), generateCode(ast));
+    return createSummaryValue(
+      getPrettyIdentifier(inferedType as InspectionIdentifiableInferedType),
+      generateCode(ast)
+    );
   }
 
   const prettyCaption = generateCode(ast, true);
@@ -66,7 +76,9 @@ function generateElement(
 
   if (!isNil(identifier)) {
     if (!isHtmlTag(identifier)) {
-      const prettyIdentifier = getPrettyIdentifier(inferedType);
+      const prettyIdentifier = getPrettyIdentifier(
+        inferedType as InspectionIdentifiableInferedType
+      );
 
       return createSummaryValue(
         prettyIdentifier,

addons/docs/src/frameworks/react/lib/inspection/index.ts

@@ -0,0 +1,2 @@
+export * from './types';
+export * from './inspectValue';

addons/docs/src/frameworks/react/lib/inspection/types.ts

@@ -0,0 +1,62 @@
+export enum InspectionType {
+  IDENTIFIER = 'Identifier',
+  LITERAL = 'Literal',
+  OBJECT = 'Object',
+  ARRAY = 'Array',
+  FUNCTION = 'Function',
+  CLASS = 'Class',
+  ELEMENT = 'Element',
+  UNKNOWN = 'Unknown',
+}
+
+export interface InspectionInferedType {
+  type: InspectionType;
+}
+
+export interface InspectionIdentifier extends InspectionInferedType {
+  type: InspectionType.IDENTIFIER;
+  identifier: string;
+}
+
+export interface InspectionLiteral extends InspectionInferedType {
+  type: InspectionType.LITERAL;
+}
+
+export interface InspectionObject extends InspectionInferedType {
+  type: InspectionType.OBJECT;
+}
+
+export interface InspectionArray extends InspectionInferedType {
+  type: InspectionType.ARRAY;
+}
+
+export interface InspectionClass extends InspectionInferedType {
+  type: InspectionType.CLASS;
+  identifier: string;
+}
+
+export interface InspectionFunction extends InspectionInferedType {
+  type: InspectionType.FUNCTION;
+  identifier?: string;
+  hasArguments: boolean;
+}
+
+export interface InspectionElement extends InspectionInferedType {
+  type: InspectionType.ELEMENT;
+  identifier?: string;
+}
+
+export interface InspectionUnknown extends InspectionInferedType {
+  type: InspectionType.UNKNOWN;
+}
+
+export type InspectionIdentifiableInferedType =
+  | InspectionIdentifier
+  | InspectionClass
+  | InspectionFunction
+  | InspectionElement;
+
+export interface InspectionResult {
+  inferedType: InspectionInferedType;
+  ast?: any;
+}

addons/docs/src/frameworks/react/propTypes/createType.ts

@@ -2,8 +2,7 @@ import { isNil } from 'lodash';
 import { PropSummaryValue, PropType } from '@storybook/components';
 import { createSummaryValue, isTooLongForTypeSummary } from '../../../lib';
 import { ExtractedProp, DocgenPropType } from '../../../lib/docgen';
-import { inspectValue } from '../inspection/inspectValue';
-import { generateCode } from '../utils/generateCode';
+import { generateCode } from '../lib/generateCode';
 import { generateFuncSignature } from './generateFuncSignature';
 import {
   OBJECT_CAPTION,
@@ -13,8 +12,8 @@ import {
   ELEMENT_CAPTION,
   CUSTOM_CAPTION,
 } from './captions';
-import { InspectionType } from '../inspection/types';
-import { isHtmlTag } from '../utils/isHtmlTag';
+import { InspectionType, inspectValue } from '../lib/inspection';
+import { isHtmlTag } from '../lib/isHtmlTag';
 
 enum PropTypesType {
   CUSTOM = 'custom',

addons/docs/src/frameworks/react/propTypes/handleProp.ts

@@ -2,7 +2,7 @@ import { isNil } from 'lodash';
 import { PropDef } from '@storybook/components';
 import { ExtractedProp } from '../../../lib/docgen';
 import { createType } from './createType';
-import { createDefaultValue } from './createDefaultValue';
+import { createDefaultValue } from '../lib/createDefaultValue';
 import { Component } from '../../../blocks/shared';
 import { keepOriginalDefinitionOrder } from './sortProps';
 

addons/docs/src/frameworks/react/typeScript/handleProp.ts

@@ -0,0 +1,22 @@
+import { isNil } from 'lodash';
+import { PropDef } from '@storybook/components';
+import { ExtractedProp } from '../../../lib/docgen';
+import { createDefaultValue } from '../lib/createDefaultValue';
+
+export function enhanceTypeScriptProp(extractedProp: ExtractedProp): PropDef {
+  const { propDef } = extractedProp;
+
+  const { defaultValue } = extractedProp.docgenInfo;
+  if (!isNil(defaultValue)) {
+    const newDefaultValue = createDefaultValue(defaultValue.value);
+    if (!isNil(newDefaultValue)) {
+      propDef.defaultValue = newDefaultValue;
+    }
+  }
+
+  return propDef;
+}
+
+export function enhanceTypeScriptProps(extractedProps: ExtractedProp[]): PropDef[] {
+  return extractedProps.map(enhanceTypeScriptProp);
+}