code.js

// using babel-node to run.

var Ast = require("ts-simple-ast");

const a = new Ast.default();

a.addSourceFiles("../src/**/*.tsx");
const sourceFiles = a.getSourceFiles();

// Filter down to files that import react
const reactFiles = sourceFiles.filter(f => 
    f.getImport(i => i.getModuleSpecifier() === "react") !== undefined
)
const classes = reactFiles.reduce((classes, file, index, arr) => {classes.push(...file.getClasses().filter(c => c.getExtends().getExpression().getText() === 'React.Component')); return classes},[])

classes.map(c => c.getName()) // ['Artboard', ...]
classes[0].getExtends().getTypeArguments()[0].getText() // 'StateProps & DispatchProps & OwnProps'


const knobs = classes.reduce((knobs, c) => {
    const props = []
    const e = c.getExtends() // .getText() -> "React.Component"
    const typeArgs = e.getTypeArguments()[0] 
    const pushProps = (typeName) => {
        const inter = c.sourceFile.getInterface(typeName)
        if(!!inter) {
            inter.getProperties().forEach(property => {
                props.push({
                    type: property.getType().getText(),
                    label: property.getName()
                })
            })
        }
    }

    if(typeArgs.getKindName() === "IntersectionType") {
        typeArgs.compilerNode.types.forEach((type) => { 
            pushProps(type.typeName.getText())
        })
    } else if(typeArgs.getKindName() === "TypeReference") {
        const typeName = typeArgs.compilerNode.typeName.getText()
        pushProps(typeName)
    } else {
        // 
        console.log(typeArgs.getKindName()) // Type Literal
        console.log(typeArgs.getText()) // {}
    }
    
    knobs.push({
        component: c.getName(), // Artboard
        props: props
    })

    return knobs
}, [])

console.log(JSON.stringify(knobs, null, 2))

react typescript ast props

[
  {
    "component": "Artboard",
    "props": [
      {
        "type": "string",
        "label": "imageBase64"
      },
      {
        "type": "number",
        "label": "imageScale"
      },
      {
        "type": "number",
        "label": "imageZoom"
      },
      {
        "type": "boolean",
        "label": "isImageLoaded"
      },
      {
        "type": "(scale: number) => void",
        "label": "changeImageScale"
      },
      {
        "type": "boolean",
        "label": "loadedLayers"
      },
      {
        "type": "ClickHandler",
        "label": "clickHandler"
      }
    ]
  },
  {
    "component": "Point",
    "props": [
      {
        "type": "JSX.Element",
        "label": "icon"
      },
      {
        "type": "number",
        "label": "x"
      },
      {
        "type": "number",
        "label": "y"
      },
      {
        "type": "() => void",
        "label": "onMouseEnter"
      },
      {
        "type": "() => void",
        "label": "onMouseLeave"
      },
      {
        "type": "(event: React.MouseEvent<HTMLDivElement>) => void",
        "label": "onClick"
      },
      {
        "type": "() => void",
        "label": "onClickElsewhere"
      },
      {
        "type": "(event: React.DragEvent<HTMLDivElement>, box: ClientRect) => void",
        "label": "onDragEnd"
      },
      {
        "type": "number",
        "label": "iconHeight"
      }
    ]
  },
  {
    "component": "AutosizeInput",
    "props": [
      {
        "type": "FontStyle",
        "label": "font"
      },
      {
        "type": "any",
        "label": "style"
      },
      {
        "type": "number",
        "label": "minWidth"
      },
      {
        "type": "(width: number) => void",
        "label": "onAutosize"
      },
      {
        "type": "(event: any) => void",
        "label": "onChange"
      },
      {
        "type": "(event: any) => void",
        "label": "onKeyUp"
      },
      {
        "type": "(event: any) => void",
        "label": "onBlur"
      },
      {
        "type": "string",
        "label": "placeholder"
      },
      {
        "type": "boolean",
        "label": "placeholderIsMinWidth"
      },
      {
        "type": "string",
        "label": "value"
      },
      {
        "type": "string",
        "label": "defaultValue"
      }
    ]
  },
  {
    "component": "Modal",
    "props": []
  },
  {
    "component": "ScaledImage",
    "props": [
      {
        "type": "string",
        "label": "src"
      },
      {
        "type": "number",
        "label": "scale"
      },
      {
        "type": "(alpha: number, client: Box, natural: Box, offset: Offset) => void",
        "label": "onScale"
      },
      {
        "type": "number",
        "label": "zoom"
      },
      {
        "type": "Partial<Style>",
        "label": "style"
      },
      {
        "type": "(natural: Offset, client: Offset, page: Offset) => void",
        "label": "onClick"
      },
      {
        "type": "number",
        "label": "maxHeight"
      },
      {
        "type": "number",
        "label": "maxWidth"
      }
    ]
  },
  {
    "component": "Size",
    "props": [
      {
        "type": "(w: number, h: number) => void",
        "label": "onResize"
      },
      {
        "type": "React.CSSProperties",
        "label": "style"
      },
      {
        "type": "(w: number, h: number) => void",
        "label": "onMount"
      }
    ]
  },
  {
    "component": "AddingAnnotation",
    "props": []
  },
  {
    "component": "AnnotationBox",
    "props": [
      {
        "type": "number",
        "label": "x"
      },
      {
        "type": "number",
        "label": "y"
      },
      {
        "type": "Pointing",
        "label": "pointing"
      },
      {
        "type": "string",
        "label": "defaultDistance"
      },
      {
        "type": "() => void",
        "label": "onDelete"
      },
      {
        "type": "(distance: string) => void",
        "label": "onChange"
      },
      {
        "type": "boolean",
        "label": "focusOnMount"
      },
      {
        "type": "\"mm\" | \"in\"",
        "label": "unit"
      }
    ]
  },
  {
    "component": "Annotation",
    "props": [
      {
        "type": "number",
        "label": "scale"
      },
      {
        "type": "number",
        "label": "zoom"
      },
      {
        "type": "any",
        "label": "annotation"
      },
      {
        "type": "any[]",
        "label": "polygons"
      },
      {
        "type": "(dim: any, solve: boolean) => void",
        "label": "onDelete"
      },
      {
        "type": "(dim: any, solve: boolean) => void",
        "label": "onChange"
      }
    ]
  },
  {
    "component": "NewAnnotation",
    "props": [
      {
        "type": "number",
        "label": "x"
      },
      {
        "type": "number",
        "label": "y"
      },
      {
        "type": "any[]",
        "label": "words"
      },
      {
        "type": "number",
        "label": "scale"
      },
      {
        "type": "number",
        "label": "zoom"
      },
      {
        "type": "number",
        "label": "width"
      },
      {
        "type": "number",
        "label": "height"
      },
      {
        "type": "\"mm\" | \"in\"",
        "label": "unit"
      },
      {
        "type": "any",
        "label": "direction"
      },
      {
        "type": "string",
        "label": "defaultDistance"
      },
      {
        "type": "(distance: number) => void",
        "label": "onNewDistance"
      },
      {
        "type": "() => void",
        "label": "onDelete"
      }
    ]
  },
  {
    "component": "PickingDirection",
    "props": [
      {
        "type": "(annotationMidPoint: [number, number], axis: any) => void",
        "label": "onClick"
      },
      {
        "type": "any[]",
        "label": "selectedPoints"
      },
      {
        "type": "number",
        "label": "scale"
      },
      {
        "type": "number",
        "label": "zoom"
      }
    ]
  },
  {
    "component": "WordBox",
    "props": [
      {
        "type": "PartOCR",
        "label": "word"
      },
      {
        "type": "number",
        "label": "scale"
      },
      {
        "type": "number",
        "label": "zoom"
      },
      {
        "type": "(value: string) => void",
        "label": "onValueClick"
      }
    ]
  },
  {
    "component": "Point",
    "props": [
      {
        "type": "AnchorPoint",
        "label": "point"
      },
      {
        "type": "boolean",
        "label": "selected"
      },
      {
        "type": "(point: AnchorPoint[]) => void",
        "label": "onClick"
      },
      {
        "type": "number",
        "label": "iconHeight"
      }
    ]
  },
  {
    "component": "Shape",
    "props": [
      {
        "type": "any",
        "label": "polygon"
      },
      {
        "type": "number",
        "label": "scale"
      },
      {
        "type": "number",
        "label": "zoom"
      },
      {
        "type": "number",
        "label": "iconHeight"
      },
      {
        "type": "any[]",
        "label": "selectedPoints"
      },
      {
        "type": "(point: any[]) => void",
        "label": "onPointClick"
      }
    ]
  },
  {
    "component": "ImageUpload",
    "props": [
      {
        "type": "(imageUrl: string) => void",
        "label": "onUpload"
      },
      {
        "type": "() => void",
        "label": "onDelete"
      },
      {
        "type": "string",
        "label": "imageUrl"
      }
    ]
  },
  {
    "component": "NewPart",
    "props": [
      {
        "type": "any",
        "label": "unit"
      },
      {
        "type": "string",
        "label": "image"
      },
      {
        "type": "string",
        "label": "partName"
      },
      {
        "type": "string",
        "label": "manufacturer"
      },
      {
        "type": "string",
        "label": "description"
      },
      {
        "type": "string",
        "label": "dataSheet"
      },
      {
        "type": "string",
        "label": "uuid"
      },
      {
        "type": "boolean",
        "label": "stepCanChange"
      },
      {
        "type": "(partInfo: any, partUUID: string, partImg: string) => void",
        "label": "handleNewPart"
      },
      {
        "type": "() => void",
        "label": "handleUpdatePart"
      },
      {
        "type": "(unit: any) => void",
        "label": "changeUnit"
      },
      {
        "type": "(imageUrl: string) => void",
        "label": "changeImage"
      },
      {
        "type": "(name: string) => void",
        "label": "changeName"
      },
      {
        "type": "(description: string) => void",
        "label": "changeDescription"
      },
      {
        "type": "(manufacturer: string) => void",
        "label": "changeManufacturer"
      },
      {
        "type": "(link: string) => void",
        "label": "changeLink"
      },
      {
        "type": "() => void",
        "label": "clearPart"
      }
    ]
  },
  {
    "component": "Fills",
    "props": [
      {
        "type": "any[]",
        "label": "polygons"
      },
      {
        "type": "string[]",
        "label": "rectangularNames"
      },
      {
        "type": "number",
        "label": "scale"
      },
      {
        "type": "number",
        "label": "zoom"
      },
      {
        "type": "boolean",
        "label": "enabled"
      },
      {
        "type": "(polygon: any) => void",
        "label": "onClick"
      },
      {
        "type": "number",
        "label": "iconHeight"
      }
    ]
  },
  {
    "component": "ReviewPart",
    "props": [
      {
        "type": "PartInfo",
        "label": "part"
      },
      {
        "type": "any[]",
        "label": "pins"
      }
    ]
  },
  {
    "component": "PartPin",
    "props": [
      {
        "type": "number",
        "label": "iconHeight"
      },
      {
        "type": "number",
        "label": "x"
      },
      {
        "type": "number",
        "label": "y"
      },
      {
        "type": "any",
        "label": "pad"
      },
      {
        "type": "(pad: any, name: string) => void",
        "label": "onNameChange"
      },
      {
        "type": "(pad: any) => void",
        "label": "onDelete"
      },
      {
        "type": "(pad: any, naturalX: number, naturalY: number) => void",
        "label": "onMoveEnd"
      },
      {
        "type": "boolean",
        "label": "opened"
      },
      {
        "type": "number",
        "label": "scale"
      }
    ]
  },
  {
    "component": "SelectPins",
    "props": [
      {
        "type": "boolean",
        "label": "labelsVisible"
      },
      {
        "type": "any[]",
        "label": "pads"
      },
      {
        "type": "number",
        "label": "imageScale"
      },
      {
        "type": "string",
        "label": "imageBase64"
      },
      {
        "type": "any",
        "label": "part"
      },
      {
        "type": "(pad: any, save: boolean) => void",
        "label": "onAddPadMark"
      },
      {
        "type": "() => void",
        "label": "onToggleLabels"
      },
      {
        "type": "() => void",
        "label": "onNext"
      },
      {
        "type": "() => void",
        "label": "onBack"
      },
      {
        "type": "(alpha: number) => void",
        "label": "onImageScale"
      },
      {
        "type": "(pad: any, pinName: string, save: boolean) => void",
        "label": "renamePin"
      },
      {
        "type": "(pad: any, save: boolean) => void",
        "label": "deletePad"
      },
      {
        "type": "(pad: any, naturalX: number, naturalY: number, save: boolean) => void",
        "label": "movePin"
      }
    ]
  },
  {
    "component": "Shell",
    "props": []
  },
  {
    "component": "CardList",
    "props": []
  },
  {
    "component": "Directions",
    "props": [
      {
        "type": "string",
        "label": "text"
      },
      {
        "type": "JSX.Element",
        "label": "moreText"
      }
    ]
  },
  {
    "component": "PartInformation",
    "props": [
      {
        "type": "any",
        "label": "part"
      }
    ]
  },
  {
    "component": "PinToPadEditer",
    "props": [
      {
        "type": "any",
        "label": "pad"
      },
      {
        "type": "boolean",
        "label": "hovered"
      },
      {
        "type": "(pad: any, pinName: string) => void",
        "label": "onNameChange"
      },
      {
        "type": "(pad: any) => void",
        "label": "onDelete"
      }
    ]
  },
  {
    "component": "UploadImage",
    "props": [
      {
        "type": "(imageUrl: string) => void",
        "label": "onNext"
      }
    ]
  },
  {
    "component": "Account",
    "props": [
      {
        "type": "string",
        "label": "title"
      },
      {
        "type": "string",
        "label": "primary"
      },
      {
        "type": "(email: string, password: string, onError: (message: string) => void) => void",
        "label": "onPrimaryCick"
      },
      {
        "type": "string",
        "label": "secondaryHint"
      },
      {
        "type": "string",
        "label": "secondary"
      },
      {
        "type": "() => void",
        "label": "onSecondaryClick"
      }
    ]
  },
  {
    "component": "CreatePartWorkflow",
    "props": [
      {
        "type": "any",
        "label": "step"
      },
      {
        "type": "boolean",
        "label": "isPartInformationLoaded"
      },
      {
        "type": "boolean",
        "label": "isLabelPadsLoaded"
      },
      {
        "type": "boolean",
        "label": "isSolveDimsLoaded"
      },
      {
        "type": "boolean",
        "label": "isPurchaseLoaded"
      },
      {
        "type": "string",
        "label": "partName"
      },
      {
        "type": "() => void",
        "label": "clearPart"
      }
    ]
  },
  {
    "component": "NotFound",
    "props": []
  },
  {
    "component": "UsersParts",
    "props": []
  },
  {
    "component": "Part",
    "props": [
      {
        "type": "PartListingWithImage",
        "label": "part"
      },
      {
        "type": "(uuid: string) => void",
        "label": "onDelete"
      },
      {
        "type": "(uuid: string, name: string) => void",
        "label": "onDownload"
      },
      {
        "type": "(uuid: string) => void",
        "label": "onEdit"
      }
    ]
  },
  {
    "component": "DownloadPart",
    "props": [
      {
        "type": "(partId: string, partName: string) => void",
        "label": "onClick"
      },
      {
        "type": "any",
        "label": "part"
      }
    ]
  },
  {
    "component": "EditPart",
    "props": [
      {
        "type": "(partId: string) => void",
        "label": "onClick"
      },
      {
        "type": "any",
        "label": "part"
      }
    ]
  },
  {
    "component": "PartRender",
    "props": [
      {
        "type": "any",
        "label": "part"
      },
      {
        "type": "number",
        "label": "width"
      },
      {
        "type": "number",
        "label": "height"
      }
    ]
  }
]