feat(ui-components): add Signature and FunctionSignature components#8667
feat(ui-components): add Signature and FunctionSignature components#8667canerakdas wants to merge 9 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.06% 75.09% +0.02%
==========================================
Files 104 104
Lines 9161 9161
Branches 316 315 -1
==========================================
+ Hits 6877 6879 +2
+ Misses 2282 2280 -2
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.
|
|
|
@canerakdas I also noticed there was no Chromatic deployment? |
|
Chromatic deployments run on label |
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
github-actions
bot
removed
the
github_actions:pull-request
avivkeller
force-pushed
the
feat/functionsignature
branch
from
f85d59d to
988a489
Compare
github-actions
bot
removed
the
github_actions:pull-request
|
Lighthouse Results
|
AugustinMauroy
left a comment
AugustinMauroy
left a comment
There was a problem hiding this comment.
NOICE I love this component
| @@ -0,0 +1,51 @@ | |||
| import { ArrowTurnDownLeftIcon } from '@heroicons/react/24/outline'; | |||
There was a problem hiding this comment.
what if we use arrow turn down right so the arrow point to the return keyword ? IMO that make sense that the above part so the function return something so the parent point to the result with the icon.
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.