Skip to content

Commit 57ac0a2

Browse files
mydeamydea
committed
WIP WIP
1 parent 0e0ca25 commit 57ac0a2

File tree

5 files changed

+154
-66
lines changed

5 files changed

+154
-66
lines changed

‎docs/platforms/javascript/common/apis.mdx‎

Lines changed: 37 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -26,40 +26,43 @@ Sentry.setTag("tag", "value");
2626
{
2727
name: "breadcrumb",
2828
required: true,
29-
type: [
30-
{
31-
name: "message",
32-
type: "string",
33-
description:
34-
"If a message is provided, it is rendered as text with all whitespace preserved.",
35-
},
36-
{
37-
name: "type",
38-
type: '"default" | "debug" | "error" | "info" | "navigation" | "http" | "query" | "ui" | "user"',
39-
defaultValue: '"default"',
40-
description:
41-
"The type influences how a breadcrumb is rendered in Sentry. When in doubt, leave it at `default`.",
42-
},
43-
{
44-
name: "level",
45-
type: '"fatal" | "error" | "warning" | "log" | "info" | "debug"',
46-
defaultValue: '"info"',
47-
description:
48-
"The level is used in the UI to emphasize or deemphasize the breadcrumb.",
49-
},
50-
{
51-
name: "category",
52-
type: "string",
53-
description:
54-
"Typically it is a module name or a descriptive string. For instance, `ui.click` could be used to indicate that a click happened",
55-
},
56-
{
57-
name: "data",
58-
type: "Record<string, unknown>",
59-
description:
60-
"Additional data that should be sent with the breadcrumb.",
61-
},
62-
],
29+
type: {
30+
name: "Breadcrumb",
31+
properties: [
32+
{
33+
name: "message",
34+
type: "string",
35+
description:
36+
"If a message is provided, it is rendered as text with all whitespace preserved.",
37+
},
38+
{
39+
name: "type",
40+
type: '"default" | "debug" | "error" | "info" | "navigation" | "http" | "query" | "ui" | "user"',
41+
defaultValue: '"default"',
42+
description:
43+
"The type influences how a breadcrumb is rendered in Sentry. When in doubt, leave it at `default`.",
44+
},
45+
{
46+
name: "level",
47+
type: '"fatal" | "error" | "warning" | "log" | "info" | "debug"',
48+
defaultValue: '"info"',
49+
description:
50+
"The level is used in the UI to emphasize or deemphasize the breadcrumb.",
51+
},
52+
{
53+
name: "category",
54+
type: "string",
55+
description:
56+
"Typically it is a module name or a descriptive string. For instance, `ui.click` could be used to indicate that a click happened",
57+
},
58+
{
59+
name: "data",
60+
type: "Record<string, unknown>",
61+
description:
62+
"Additional data that should be sent with the breadcrumb.",
63+
},
64+
],
65+
},
6366
},
6467
{
6568
name: "hint",

‎src/components/apiExamples/apiExamples.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import {toJsxRuntime} from 'hast-util-to-jsx-runtime';
77
import {Nodes} from 'hastscript/lib/create-h';
88
import bash from 'refractor/lang/bash.js';
99
import json from 'refractor/lang/json.js';
10+
import typescript from 'refractor/lang/typescript.js';
1011
import {refractor} from 'refractor/lib/core.js';
1112

1213
import {type API} from 'sentry-docs/build/resolveOpenAPI';
@@ -19,6 +20,7 @@ import {CodeTabs} from '../codeTabs';
1920

2021
refractor.register(bash);
2122
refractor.register(json);
23+
refractor.register(typescript);
2224

2325
const strFormat = (str: string) => {
2426
const s = str.trim();

‎src/components/callout/styles.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,7 @@
5555

5656
.callout-content {
5757
min-width: 0;
58+
flex-grow: 1;
5859
}
5960

6061
.callout-info {

‎src/components/nestedObject.tsx‎

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
'use client';
2+
3+
import {Fragment, useState} from 'react';
4+
import {jsx, jsxs} from 'react/jsx-runtime';
5+
import {MinusCircledIcon, PlusCircledIcon} from '@radix-ui/react-icons';
6+
import {toJsxRuntime} from 'hast-util-to-jsx-runtime';
7+
import {Nodes} from 'hastscript/lib/create-h';
8+
import {refractor} from 'refractor/lib/core.js';
9+
10+
import {ParameterDef} from './sdkApi';
11+
12+
const codeToJsx = (code: string, lang = 'json') => {
13+
return toJsxRuntime(refractor.highlight(code, lang) as Nodes, {Fragment, jsx, jsxs});
14+
};
15+
16+
export function RenderNestedObject({
17+
name,
18+
objProps,
19+
language,
20+
}: {
21+
language: string;
22+
objProps: ParameterDef[];
23+
name?: string;
24+
}) {
25+
const [expanded, setExpanded] = useState(false);
26+
27+
return (
28+
<div>
29+
<pre className="m-0 pt-1 pb-1">
30+
<div className="flex items-center gap-2">
31+
<code>{name ? name : 'Object'}</code>
32+
<button className="flex items-center" onClick={() => setExpanded(!expanded)}>
33+
{expanded ? (
34+
<Fragment>
35+
{'{'}
36+
<MinusCircledIcon />
37+
</Fragment>
38+
) : (
39+
<Fragment>
40+
{'{'}
41+
<PlusCircledIcon />
42+
{'...}'}
43+
</Fragment>
44+
)}
45+
</button>
46+
</div>
47+
{expanded ? (
48+
<Fragment>
49+
<div className="flex flex-col gap-2 pl-4">
50+
{objProps.map(prop => (
51+
<div key={prop.name}>
52+
{prop.description && (
53+
<div>
54+
<code>{codeToJsx(`// ${prop.description}`, language)}</code>
55+
</div>
56+
)}
57+
{typeof prop.type === 'string' ? (
58+
<code>{prop.name}: {codeToJsx(prop.type, language)},</code>
59+
) : (
60+
<RenderNestedObject
61+
name={prop.type.name}
62+
objProps={prop.type.properties}
63+
language={'json'}
64+
/>
65+
)}
66+
</div>
67+
))}
68+
</div>
69+
<div>{'}'}</div>
70+
</Fragment>
71+
) : null}
72+
</pre>
73+
</div>
74+
);
75+
}

‎src/components/sdkApi.tsx‎

Lines changed: 39 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -4,21 +4,28 @@ import {toJsxRuntime} from 'hast-util-to-jsx-runtime';
44
import {Nodes} from 'hastscript/lib/create-h';
55
import bash from 'refractor/lang/bash.js';
66
import json from 'refractor/lang/json.js';
7+
import typescript from 'refractor/lang/typescript.js';
78
import {refractor} from 'refractor/lib/core.js';
89

910
import {PlatformCategory} from 'sentry-docs/types';
1011

1112
import {Expandable} from './expandable';
12-
import {SdkDefinition, SdkDefinitionTable} from './sdkDefinition';
13+
import {RenderNestedObject} from './nestedObject';
14+
import {SdkDefinition} from './sdkDefinition';
1315

14-
interface ParameterDef {
16+
export interface ParameterDef {
1517
name: string;
16-
type: string | ParameterDef[];
18+
type: string | ObjectParameterDef;
1719
defaultValue?: string;
1820
description?: string;
1921
required?: boolean;
2022
}
2123

24+
type ObjectParameterDef = {
25+
properties: ParameterDef[];
26+
name?: string;
27+
};
28+
2229
type Props = {
2330
name: string;
2431
parameters: ParameterDef[];
@@ -30,6 +37,7 @@ type Props = {
3037

3138
refractor.register(bash);
3239
refractor.register(json);
40+
refractor.register(typescript);
3341

3442
const codeToJsx = (code: string, lang = 'json') => {
3543
return toJsxRuntime(refractor.highlight(code, lang) as Nodes, {Fragment, jsx, jsxs});
@@ -50,11 +58,11 @@ export function SdkApi({
5058

5159
{parameters.length ? (
5260
<Expandable title="Parameters">
53-
<SdkDefinitionTable className="bg-white !w-full">
61+
<div className="space-y-3">
5462
{parameters.map(param => (
55-
<ApiParameterDef key={param.name} {...param} />
63+
<ApiParameterDef key={param.name} language={language} {...param} />
5664
))}
57-
</SdkDefinitionTable>
65+
</div>
5866
</Expandable>
5967
) : null}
6068

@@ -63,37 +71,36 @@ export function SdkApi({
6371
);
6472
}
6573

66-
function ApiParameterDef({name, type, description, required}: ParameterDef) {
74+
function ApiParameterDef({
75+
name,
76+
type,
77+
description,
78+
required,
79+
language,
80+
}: ParameterDef & {language: string}) {
6781
return (
68-
<tr>
69-
<th>
82+
<div className="space-y-1">
83+
<div className="font-bold m-0">
7084
{name}
7185
{required ? <span className="text-red">*</span> : null}
72-
</th>
73-
<td>
74-
{typeof type === 'string' ? (
75-
<code>{type}</code>
76-
) : (
77-
<RenderNestedObject objProps={type} />
78-
)}
86+
</div>
87+
<div className="space-y-1">
88+
<div>
89+
{typeof type === 'string' ? (
90+
<pre className="m-0 pt-1 pb-1">
91+
<code>{codeToJsx(type, language)}</code>
92+
</pre>
93+
) : (
94+
<RenderNestedObject
95+
name={type.name}
96+
objProps={type.properties}
97+
language={language}
98+
/>
99+
)}
100+
</div>
79101

80102
{description ? <p className="m-0">{description}</p> : null}
81-
</td>
82-
</tr>
83-
);
84-
}
85-
86-
function RenderNestedObject({objProps}: {objProps: ParameterDef[]}) {
87-
return (
88-
<Fragment>
89-
<div>
90-
<code>Object:</code>
91103
</div>
92-
<SdkDefinitionTable className="mt-1">
93-
{objProps.map(prop => (
94-
<ApiParameterDef key={prop.name} {...prop} />
95-
))}
96-
</SdkDefinitionTable>
97-
</Fragment>
104+
</div>
98105
);
99106
}

0 commit comments

Comments
 (0)