/
parameter-view.tsx
105 lines (100 loc) · 3.18 KB
/
parameter-view.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
import { Lookup } from '@nrwl/nx-dev/data-access-packages';
import { JsonSchema } from '@nrwl/nx-dev/models-package';
import { getParameterMetadata } from './parameter-metadata';
import { getEnum } from './types/get-enum';
import { Type } from './types/type';
import { Heading3 } from './ui/headings';
import { Markdown } from './ui/markdown/markdown';
export const ParameterView = (props: {
key: string;
name: string;
alias: string;
description: string;
required: boolean;
deprecated: boolean;
schema: JsonSchema | undefined;
reference: string;
lookup: Lookup;
}) => (
<div key={'property-' + props.name} className="mb-8">
<div className="mb-2 flex items-center">
<Heading3 title={props.name} />
<div className="ml-4 flex-grow space-x-2">
{props.alias && (
<span
data-tooltip="Property alias"
className="relative -top-0.5 inline-flex rounded-md border px-2 text-xs font-semibold uppercase leading-5 text-gray-600"
>
{props.alias}
</span>
)}
{props.required && (
<span className="relative -top-0.5 inline-flex rounded-md bg-gray-300 px-2 text-xs font-semibold uppercase leading-5 text-gray-800">
Required
</span>
)}
{props.deprecated && (
<span className="relative -top-0.5 inline-flex rounded-md bg-red-100 px-2 text-xs font-semibold uppercase leading-5 text-gray-800">
Deprecated
</span>
)}
{((props.schema as any)['hidden'] as boolean) && (
<span className="relative -top-0.5 inline-flex rounded-md bg-yellow-300 px-2 text-xs font-semibold uppercase leading-5 text-yellow-800">
Hidden
</span>
)}
</div>
</div>
<div className="mb-2 text-sm">
<div className="mb-1 text-green-600">
<Type
s={props.schema}
reference={props.reference}
lookup={props.lookup}
/>
</div>
{props.schema && <ParameterMetadata schema={props.schema} />}
{props.schema && (
<ParameterEnums schema={props.schema} lookup={props.lookup} />
)}
</div>
<Markdown content={props.description} />
{props.deprecated && props.schema['x-deprecated'] && (
<div className="mt-2 rounded-md bg-red-100 p-4">
<Markdown content={props.schema['x-deprecated'] as string} />
</div>
)}
</div>
);
function ParameterMetadata({ schema }: { schema: JsonSchema }) {
const data = getParameterMetadata(schema);
return !!data.length ? (
<div className="mb-1">
{data.map((i) => (
<span key={i.key}>
{i.name}: <code>{i.value}</code>
</span>
))}
</div>
) : null;
}
function ParameterEnums({
schema,
lookup,
}: {
schema: JsonSchema;
lookup: Lookup;
}) {
const potentialEnums = (getEnum(schema, lookup) as string[]) ?? [];
return !!potentialEnums.length ? (
<div className="mb-1">
Accepted values:{' '}
{potentialEnums.map((e, i) => (
<span key={'enums-' + e}>
<code>{JSON.stringify(e).replace(/"/g, '')}</code>
{potentialEnums.length === i + 1 ? null : ', '}
</span>
))}
</div>
) : null;
}