feat(ui-components): add Signature and FunctionSignature components#8667
feat(ui-components): add Signature and FunctionSignature components#8667canerakdas wants to merge 8 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 #8667 +/- ##
==========================================
+ Coverage 75.08% 75.09% +0.01%
==========================================
Files 104 104
Lines 9098 9159 +61
Branches 315 315
==========================================
+ Hits 6831 6878 +47
- Misses 2265 2279 +14
Partials 2 2 ☔ View full report in Codecov by Sentry. |
There was a problem hiding this comment.
Pull request overview
Adds new UI components to render API/function signatures (including nested parameters, optional markers, and return sections) for use across Node.js Doc Kit’s UI component library.
Changes:
- Introduces
Signature(root/item wrapper) and supporting subcomponents (SignatureRoot,SignatureItem,SignatureHeader) with new styles. - Adds
FunctionSignaturecontainer to render a recursive signature tree from structured data. - Adds Storybook stories for both components and bumps
@node-core/ui-componentspatch version.
Reviewed changes
Copilot reviewed 11 out of 11 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| packages/ui-components/src/Containers/FunctionSignature/index.tsx | Adds the FunctionSignature container and recursive renderer for signature items |
| packages/ui-components/src/Containers/FunctionSignature/index.stories.tsx | Adds Storybook scenarios for nested params, return types, and type-only definitions |
| packages/ui-components/src/Common/Signature/index.tsx | Adds Signature component that switches between root and item rendering |
| packages/ui-components/src/Common/Signature/index.stories.tsx | Adds Storybook examples for optional attributes, long names, and nesting |
| packages/ui-components/src/Common/Signature/SignatureRoot/index.tsx | Adds root wrapper with titled section and aria-labelledby wiring |
| packages/ui-components/src/Common/Signature/SignatureRoot/index.module.css | Styles the root container and title |
| packages/ui-components/src/Common/Signature/SignatureItem/index.tsx | Adds item renderer supporting return-kind styling, description, and nested children |
| packages/ui-components/src/Common/Signature/SignatureItem/index.module.css | Styles items, nested children layout, and return-item presentation |
| packages/ui-components/src/Common/Signature/SignatureHeader/index.tsx | Adds header rendering for name/type with optional marker and return indicator |
| packages/ui-components/src/Common/Signature/SignatureHeader/index.module.css | Styles header layout, long-name wrapping, and type/link presentation |
| packages/ui-components/package.json | Bumps package version to 1.6.1 |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
|
|
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.