Skip to content

feat: show example values and improve section spacing #60

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
rsbh merged 1 commit into from
May 13, 2026
Merged

feat: show example values and improve section spacing #60

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 14 additions & 0 deletions packages/chronicle/src/components/api/api-field-list.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,20 @@
color: var(--rs-color-foreground-base-secondary);
}

.fieldExample {
font-size: var(--rs-font-size-small);
line-height: var(--rs-line-height-small);
color: var(--rs-color-foreground-base-tertiary);
}

.fieldExample code {
font-family: var(--rs-font-mono);
font-size: var(--rs-font-size-mono-small);
background: var(--rs-color-background-neutral-secondary);
padding: 1px var(--rs-space-2);
border-radius: 3px;
}

.statusDescription {
font-size: var(--rs-font-size-regular);
line-height: var(--rs-line-height-regular);
Expand Down
4 changes: 4 additions & 0 deletions packages/chronicle/src/components/api/api-field-list.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,10 +44,14 @@ function FieldItem({ field }: { field: SchemaField }) {
<Flex align="center" gap={3}>
<Badge variant="neutral" size="micro">{field.name}</Badge>
<span className={styles.fieldType}>{field.type}</span>
{field.required && <Badge variant="danger" size="micro">required</Badge>}
</Flex>
{field.description && (
<span className={styles.fieldDescription}>{field.description}</span>
)}
{field.example !== undefined && (
<span className={styles.fieldExample}>Example: <code>{JSON.stringify(field.example)}</code></span>
Copy link
Copy Markdown
Member

@rohilsurana rohilsurana May 13, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

JSON.stringify wraps string examples in quotes, so a string example like active renders as Example: "active" with escaped double-quotes. For primitive types it'd look cleaner to show the raw value and only stringify objects/arrays.

Suggested change
<span className={styles.fieldExample}>Example: <code>{JSON.stringify(field.example)}</code></span>
<span className={styles.fieldExample}>Example: <code>{typeof field.example === 'object' ? JSON.stringify(field.example) : String(field.example)}</code></span>

)}
{hasChildren && <ExpandableChildren field={field} />}
</Flex>
)
Expand Down
2 changes: 1 addition & 1 deletion packages/chronicle/src/components/api/api-overview.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@

.divider {
padding: 0;
margin: var(--rs-space-2) 0;
margin: var(--rs-space-4) 0;
}

@media (max-width: 1100px) {
Expand Down
2 changes: 1 addition & 1 deletion packages/chronicle/src/components/api/api-overview.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@ export function ApiOverview({ method, path, operation, auth }: ApiOverviewProps)

return (
<Flex className={styles.layout}>
<Flex direction='column' gap={10} className={styles.left}>
<Flex direction='column' gap={9} className={styles.left}>
<Flex direction='column' gap={7}>
<Flex direction='column' gap={4}>
{operation.summary && (
Expand Down
4 changes: 2 additions & 2 deletions packages/chronicle/src/components/api/playground-dialog.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -486,7 +486,7 @@ function BodyFieldRow({ field, value, onChange }: {
return (
<div className={styles.arrayField}>
<div className={styles.fieldRow}>
<span className={styles.fieldLabel}>{field.name}</span>
<span className={styles.fieldLabel}>{field.name} {field.required && <Badge variant="danger" size="micro">required</Badge>}</span>
Copy link
Copy Markdown
Member

@rohilsurana rohilsurana May 13, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The <Badge> component is nested inside a text <span> alongside the field name. In api-field-list.tsx you put the required badge inside a <Flex> container which handles alignment properly. Doing the same here would keep it consistent and avoid potential inline layout quirks.

Suggested change
<span className={styles.fieldLabel}>{field.name} {field.required && <Badge variant="danger" size="micro">required</Badge>}</span>
<span className={styles.fieldLabel}><Flex align="center" gap={2}>{field.name} {field.required && <Badge variant="danger" size="micro">required</Badge>}</Flex></span>

<IconButton size={2} onClick={() => onChange([...items, ''])} aria-label="Add item">
<PlusIcon />
</IconButton>
Expand Down Expand Up @@ -537,7 +537,7 @@ function BodyFieldRow({ field, value, onChange }: {

return (
<div className={styles.fieldRow}>
<span className={styles.fieldLabel}>{field.name}</span>
<span className={styles.fieldLabel}>{field.name} {field.required && <Badge variant="danger" size="micro">required</Badge>}</span>
Copy link
Copy Markdown
Member

@rohilsurana rohilsurana May 13, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same as above - wrapping in <Flex> would be more consistent with how the required badge is rendered in the field list.

Suggested change
<span className={styles.fieldLabel}>{field.name} {field.required && <Badge variant="danger" size="micro">required</Badge>}</span>
<span className={styles.fieldLabel}><Flex align="center" gap={2}>{field.name} {field.required && <Badge variant="danger" size="micro">required</Badge>}</Flex></span>

<div className={styles.fieldInput}>
<InputField
size="small"
Expand Down
2 changes: 2 additions & 0 deletions packages/chronicle/src/lib/schema.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ export interface SchemaField {
required: boolean
description?: string
default?: unknown
example?: unknown
enum?: unknown[]
children?: SchemaField[]
}
Expand Down Expand Up @@ -90,6 +91,7 @@ export function flattenSchema(
required: required.includes(name),
description: rawProp.description ?? prop.description,
default: prop.default,
example: prop.example,
Copy link
Copy Markdown
Member

@rohilsurana rohilsurana May 13, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice addition. One gap though: paramsToFields in api-overview.tsx (and playground-dialog.tsx) doesn't pass example through when building SchemaField objects from ParameterObjects. So path/query params that have examples defined in the OpenAPI spec won't display them - only request body fields will. Worth adding example: p.example ?? schema.example in paramsToFields to be consistent.

enum: prop.enum,
children: children?.length ? children : undefined,
}
Expand Down
Loading