feat: show example values and improve section spacing#60
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Warning Rate limit exceeded
You’ve run out of usage credits. Purchase more in the billing tab. ⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. ℹ️ Review info⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (6)
📝 WalkthroughWalkthroughThis PR adds optional field example support to Chronicle's API documentation. The ChangesField example support
Estimated code review effort🎯 1 (Trivial) | ⏱️ ~3 minutes Suggested reviewers
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
🧹 Nitpick comments (1)
packages/chronicle/src/components/api/api-field-list.module.css (1)
39-45: ⚡ Quick winUse design tokens for spacing/radius in code-chip styles.
padding: 1px ...andborder-radius: 3pxshould be tokenized for consistency with the Apsara design system.Proposed tokenized update
.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; + padding: var(--rs-space-1) var(--rs-space-2); + border-radius: var(--rs-radius-1); }As per coding guidelines, "Use CSS modules with Apsara design tokens for styling (e.g.,
--rs-color-*,--rs-font-*,--rs-space-*)."🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@packages/chronicle/src/components/api/api-field-list.module.css` around lines 39 - 45, The .fieldExample code rule currently uses hard-coded spacing and radius (padding: 1px var(--rs-space-2); border-radius: 3px); update this rule to use Apsara design tokens instead—replace the 1px vertical padding with the appropriate spacing token (e.g., --rs-space-1) while keeping the horizontal token (--rs-space-2), and replace the 3px radius with the appropriate radius token (e.g., --rs-radii-1 or --rs-radius-small); edit the .fieldExample code selector to use these tokens so spacing and border-radius follow the design system.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Nitpick comments:
In `@packages/chronicle/src/components/api/api-field-list.module.css`:
- Around line 39-45: The .fieldExample code rule currently uses hard-coded
spacing and radius (padding: 1px var(--rs-space-2); border-radius: 3px); update
this rule to use Apsara design tokens instead—replace the 1px vertical padding
with the appropriate spacing token (e.g., --rs-space-1) while keeping the
horizontal token (--rs-space-2), and replace the 3px radius with the appropriate
radius token (e.g., --rs-radii-1 or --rs-radius-small); edit the .fieldExample
code selector to use these tokens so spacing and border-radius follow the design
system.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: 3799471c-7e91-4407-9658-e58f52017ade
📒 Files selected for processing (4)
packages/chronicle/src/components/api/api-field-list.module.csspackages/chronicle/src/components/api/api-field-list.tsxpackages/chronicle/src/components/api/api-overview.module.csspackages/chronicle/src/lib/schema.ts
rsbh
force-pushed
the
fix/api-overview-styling
branch
from
749f7ef to
4359ca9
Compare
- Add example field to SchemaField from OpenAPI schema examples - Display example values inline with field description - Increase divider margin between sections for better readability Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
rsbh
force-pushed
the
fix/api-overview-styling
branch
from
4359ca9 to
34d8a96
Compare
| <span className={styles.fieldDescription}>{field.description}</span> | ||
| )} | ||
| {field.example !== undefined && ( | ||
| <span className={styles.fieldExample}>Example: <code>{JSON.stringify(field.example)}</code></span> |
There was a problem hiding this comment.
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.
| <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> |
| <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> |
There was a problem hiding this comment.
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.
| <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> |
| 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> |
There was a problem hiding this comment.
Same as above - wrapping in <Flex> would be more consistent with how the required badge is rendered in the field list.
| <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> |
| required: required.includes(name), | ||
| description: rawProp.description ?? prop.description, | ||
| default: prop.default, | ||
| example: prop.example, |
There was a problem hiding this comment.
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.
3 participants
Summary
examplevalues from OpenAPI schema inline with field definitions (e.g.,Example: "AOI-D2")Test plan
🤖 Generated with Claude Code