Skip to content

feat(ui-components): add Signature and FunctionSignature components#8660

Closed
canerakdas wants to merge 7 commits intonodejs:mainfrom
canerakdas:feat/signature
Closed

feat(ui-components): add Signature and FunctionSignature components#8660
canerakdas wants to merge 7 commits intonodejs:mainfrom
canerakdas:feat/signature

Conversation

@canerakdas
Copy link
Member

Description

Adds new Signature and FunctionSignature components 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

image image

Related Issues

Related to nodejs/doc-kit#587

Check List

  • I have read the Contributing Guidelines and made commit messages that follow the guideline.
  • I have run pnpm format to ensure the code follows the style guide.
  • I have run pnpm test to check if all tests are passing.
  • I have run pnpm build to check if the website builds without errors.
  • I've covered new added functionality with unit tests if necessary.

@vercel
Copy link

vercel bot commented Feb 26, 2026

Deployment failed with the following error:

You don't have permission to create a Preview Deployment for this Vercel project: nodejs-org.

View Documentation: https://vercel.com/docs/accounts/team-members-and-roles

@github-actions
Copy link
Contributor

👋 Codeowner Review Request

The 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
Copy link

codecov bot commented Feb 26, 2026

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 75.14%. Comparing base (377f606) to head (8908ad4).
⚠️ Report is 1 commits behind head on main.
✅ All tests successful. No failed tests found.

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.
📢 Have feedback on the report? Share it here.

Copy link
Member

@avivkeller avivkeller left a comment

Choose a reason for hiding this comment

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

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)

@canerakdas canerakdas marked this pull request as ready for review February 27, 2026 19:01
@canerakdas canerakdas requested a review from a team as a code owner February 27, 2026 19:01
Copilot AI review requested due to automatic review settings February 27, 2026 19:01
Copy link
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

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

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/FunctionSignature wrapper to render signature trees from data.
  • Bump @node-core/ui-components version to 1.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.

@avivkeller
Copy link
Member

This PR needs to be re-created for Vercel to deploy it

@avivkeller avivkeller closed this Feb 27, 2026
@avivkeller avivkeller reopened this Feb 27, 2026
@canerakdas canerakdas closed this Feb 27, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants