feat(ui-components): add Signature and FunctionSignature components#8660
feat(ui-components): add Signature and FunctionSignature components#8660canerakdas wants to merge 7 commits intonodejs:mainfrom
Conversation
|
Deployment failed with the following error: View Documentation: https://vercel.com/docs/accounts/team-members-and-roles |
👋 Codeowner Review RequestThe following codeowners have been identified for the changed files: Team reviewers: @nodejs/nodejs-website Please review the changes when you have a chance. Thank you! 🙏 |
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #8660 +/- ##
==========================================
+ Coverage 75.08% 75.14% +0.06%
==========================================
Files 104 104
Lines 9098 9098
Branches 315 315
==========================================
+ Hits 6831 6837 +6
+ Misses 2265 2259 -6
Partials 2 2 ☔ View full report in Codecov by Sentry. |
avivkeller
left a comment
There was a problem hiding this comment.
Love it!
(Note on the Figma: I moved the node a bit closer to the rest of the other nodes, just to make it easier to find)
07f2972 to
7d972d0
Compare
7d972d0 to
a38f522
Compare
There was a problem hiding this comment.
Pull request overview
Adds new Signature and FunctionSignature UI components to render API-style function signatures (including nested parameters, return types, and optional markers), plus Storybook stories and styling.
Changes:
- Introduce
Common/Signature(root + item + header subcomponents) with CSS modules. - Add
Containers/FunctionSignaturewrapper to render signature trees from data. - Bump
@node-core/ui-componentsversion to1.6.1.
Reviewed changes
Copilot reviewed 11 out of 11 changed files in this pull request and generated 6 comments.
Show a summary per file
| File | Description |
|---|---|
| packages/ui-components/src/Containers/FunctionSignature/index.tsx | Renders a signature tree from an items definition array. |
| packages/ui-components/src/Containers/FunctionSignature/index.stories.tsx | Storybook coverage for nested/return/type-only signature examples. |
| packages/ui-components/src/Common/Signature/index.tsx | Public Signature component that switches between root vs item rendering. |
| packages/ui-components/src/Common/Signature/index.stories.tsx | Storybook examples for Signature. |
| packages/ui-components/src/Common/Signature/SignatureRoot/index.tsx | Section wrapper + title rendering for grouped signature blocks. |
| packages/ui-components/src/Common/Signature/SignatureRoot/index.module.css | Styles for the signature block container and title area. |
| packages/ui-components/src/Common/Signature/SignatureItem/index.tsx | Renders a single signature row (header + description + children). |
| packages/ui-components/src/Common/Signature/SignatureItem/index.module.css | Styles for items, nested children layout, and return highlighting. |
| packages/ui-components/src/Common/Signature/SignatureHeader/index.tsx | Renders name/type header, optional marker, and return icon. |
| packages/ui-components/src/Common/Signature/SignatureHeader/index.module.css | Header/type styling for signature rows. |
| packages/ui-components/package.json | Version bump to publish the new components. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
|
This PR needs to be re-created for Vercel to deploy it |
Description
Adds new
SignatureandFunctionSignaturecomponents for rendering API function signatures with support for nested parameters, return types, and optional attributes.Ref: nodejs/doc-kit#587
Figma: https://www.figma.com/design/a10cjjw3MzvRQMPT9FP3xz/Node.js?node-id=6382-1517&t=T63PRMdf9tzlCrww-0
Validation
Related Issues
Related to nodejs/doc-kit#587
Check List
pnpm formatto ensure the code follows the style guide.pnpm testto check if all tests are passing.pnpm buildto check if the website builds without errors.