Skip to content

Instantly share code, notes, and snippets.

@chrisgervang

chrisgervang/code.js

Last active August 25, 2017 00:07
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save chrisgervang/d08194f6d7e6dbc725e7d00f65fd7302 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save chrisgervang/d08194f6d7e6dbc725e7d00f65fd7302 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
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))
Raw
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"
}
]
}
]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment