@@ -3,23 +3,34 @@ import { Table, Pane, majorScale, Paragraph, Badge, Text, Heading } from 'evergr
3
3
import InlineCode from './MDX/renderers/InlineCode'
4
4
5
5
interface Props {
6
- data : any
6
+ data : {
7
+ displayName : string
8
+ props : Record < string , PropDefinition >
9
+ }
7
10
}
8
11
9
- const resolveReadableType : ( type : any ) => string = ( type ) => {
10
- switch ( type . name ) {
11
- case 'enum' :
12
- return type . value . map ( ( { value } : { value : string } ) => value ) . join ( ' | ' )
13
- case 'union' :
14
- return type . value . map ( ( subType : any ) => resolveReadableType ( subType ) ) . join ( ' | ' )
15
- case 'custom' :
16
- return type . raw
17
- default :
18
- return type . name
19
- }
12
+ interface PropDefinition {
13
+ description : string
14
+ required : boolean
15
+ type ?: PropType
16
+ tsType ?: PropType
20
17
}
21
18
22
- const COLUMNS = [ 'Property' , 'Type' , 'Description' ] as const
19
+ type PropType =
20
+ | {
21
+ name : 'enum'
22
+ value : Array < { value : string } >
23
+ }
24
+ | {
25
+ name : 'union'
26
+ value : PropType [ ]
27
+ }
28
+ | {
29
+ name : 'custom' | 'signature'
30
+ raw : string
31
+ }
32
+
33
+ const COLUMNS = [ 'Property' , 'Type' , 'Description' ]
23
34
24
35
const PropsTable : React . FC < Props > = ( { data } ) => {
25
36
const { displayName, props } = data
@@ -38,18 +49,17 @@ const PropsTable: React.FC<Props> = ({ data }) => {
38
49
</ Table . Head >
39
50
< Table . Body >
40
51
{ Object . keys ( props ) . map ( ( prop ) => {
41
- const { type, required, description } = props [ prop ]
52
+ const { type, tsType , required, description } = props [ prop ]
42
53
return (
43
54
< Table . Row key = { prop } minHeight = { 64 } height = "unset" paddingY = { majorScale ( 2 ) } >
44
55
< Table . Cell >
45
56
< Pane display = "flex" alignItems = "center" >
46
57
< InlineCode > { prop } </ InlineCode >
47
- { /* <Heading size={400}>{prop}</Heading> */ }
48
58
{ required && < Badge marginLeft = { majorScale ( 2 ) } > Required</ Badge > }
49
59
</ Pane >
50
60
</ Table . Cell >
51
61
< Table . Cell >
52
- < Text > { resolveReadableType ( type ) } </ Text >
62
+ < InlineCode > { resolveReadableType ( tsType ?? type ) } </ InlineCode >
53
63
</ Table . Cell >
54
64
< Table . Cell >
55
65
< Paragraph > { description } </ Paragraph >
@@ -66,4 +76,22 @@ const PropsTable: React.FC<Props> = ({ data }) => {
66
76
)
67
77
}
68
78
79
+ const resolveReadableType = ( type : PropType | undefined ) : string => {
80
+ if ( type == null ) {
81
+ return 'unknown'
82
+ }
83
+
84
+ switch ( type . name ) {
85
+ case 'enum' :
86
+ return type . value . map ( ( { value } ) => value ) . join ( ' | ' )
87
+ case 'union' :
88
+ return type . value . map ( ( subType : PropType ) => resolveReadableType ( subType ) ) . join ( ' | ' )
89
+ case 'custom' :
90
+ case 'signature' :
91
+ return type . raw
92
+ default :
93
+ return ( type as { name : string } ) . name
94
+ }
95
+ }
96
+
69
97
export default PropsTable
0 commit comments