From cac1af310ba9724326dca14043b564e033135400 Mon Sep 17 00:00:00 2001 From: "Node.js Crowdin Bot" <148437438+nodejs-crowdin@users.noreply.github.com> Date: Sun, 1 Mar 2026 21:27:23 +0000 Subject: [PATCH 1/2] [automated]: crowdin sync (#8663) * chore: synced translations from crowdin * chore: automated format of translated files Signed-off-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> --------- Signed-off-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: Crowdin Bot Co-authored-by: github-merge-queue <118344674+github-merge-queue@users.noreply.github.com> --- apps/site/pages/ja/about/branding.mdx | 67 ++++++++++++++----- apps/site/pages/ja/about/eol.mdx | 4 +- .../pages/ja/about/security-reporting.mdx | 14 ++-- apps/site/pages/ja/download/current.mdx | 43 ++++++++---- apps/site/pages/ja/download/index.mdx | 43 ++++++++---- apps/site/pages/ja/index.mdx | 8 +-- apps/site/pages/ro/about/branding.mdx | 67 ++++++++++++++----- apps/site/pages/ro/index.mdx | 8 +-- apps/site/pages/uk/about/branding.mdx | 67 ++++++++++++++----- apps/site/pages/uk/about/eol.mdx | 4 +- apps/site/pages/uk/download/current.mdx | 32 +++++---- apps/site/pages/uk/download/index.mdx | 32 +++++---- apps/site/pages/uk/index.mdx | 8 +-- apps/site/snippets/ja/download/nvm.bash | 2 +- apps/site/snippets/ro/download/nvm.bash | 2 +- apps/site/snippets/uk/download/nvm.bash | 2 +- packages/i18n/package.json | 2 +- 17 files changed, 266 insertions(+), 139 deletions(-) diff --git a/apps/site/pages/ja/about/branding.mdx b/apps/site/pages/ja/about/branding.mdx index 51619c8ecd20b..5ac55faf84b62 100644 --- a/apps/site/pages/ja/about/branding.mdx +++ b/apps/site/pages/ja/about/branding.mdx @@ -37,14 +37,24 @@ Node.jsのロゴやシンボルマークの許可されている利用方法に - Node.jsダーク横型ロゴ + Node.jsダーク横型ロゴ - - Node.jsライト横型ロゴ + Node.jsライト横型ロゴ - @@ -54,24 +64,39 @@ Node.jsのロゴやシンボルマークの許可されている利用方法に - Node.jsダークスタック型ロゴ + Node.jsダークスタック型ロゴ - - Node.jsライトスタック型ロゴ + Node.jsライトスタック型ロゴ - - Node.jsブラックスタック型ロゴ + Node.jsブラックスタック型ロゴ - - Node.jsホワイトスタック型ロゴ + Node.jsホワイトスタック型ロゴ - @@ -81,13 +106,23 @@ Node.jsのロゴやシンボルマークの許可されている利用方法に - JSアイコングリーン + JSアイコングリーン - - JSアイコンホワイト + JSアイコンホワイト - diff --git a/apps/site/pages/ja/about/eol.mdx b/apps/site/pages/ja/about/eol.mdx index 8ee35a391d04c..78adc943c9e36 100644 --- a/apps/site/pages/ja/about/eol.mdx +++ b/apps/site/pages/ja/about/eol.mdx @@ -14,9 +14,7 @@ Node.jsのメジャーバージョンは予定されたスケジュールでリ - -または - + または diff --git a/apps/site/pages/ja/about/security-reporting.mdx b/apps/site/pages/ja/about/security-reporting.mdx index 5342407ad9c9c..170a8a67e102a 100644 --- a/apps/site/pages/ja/about/security-reporting.mdx +++ b/apps/site/pages/ja/about/security-reporting.mdx @@ -11,6 +11,8 @@ layout: about Node.jsのセキュリティーに関する問題は[HackerOne](https://hackerone.com/nodejs)を通して報告してください。 +> **注意：** HackerOneでレポートを提出するには、[Signal](https://docs.hackerone.com/en/articles/8369891-signal-impact)スコアが **1.0** 以上必要です。スコアがこの基準を下回る場合は、[OpenJS Foundation Slack](https://slack-invite.openjsf.org/)を通じてNode.jsのセキュリティーリリース担当者に直接ご連絡ください。 + 通常、報告は5日以内に確認され、詳細な回答を10日以内に回答します。その回答には報告の処理に関する次の手順が明記されます。これらのスケジュールは当団体のボランティアが休暇中である場合（特に年末の時期）、延長される可能性があります。 あなたの報告への最初の返信の後、セキュリティーチームは修正と最終的な発表に向けて進捗をお知らせします。また、報告された問題に関する追加情報やガイダンスを求める場合があります。 @@ -51,15 +53,9 @@ Node.jsプロジェクトはセキュリティー研究者と責任ある情報 ## OpenSSFベストプラクティス - - OpenSSFバッジ + + + OpenSSFバッジ オープンソースセキュリティー財団（OpenSSF）の[ベストプラクティスバッジ](https://github.com/coreinfrastructure/best-practices-badge)は、Free/Libre and Open Source Software（FLOSS）プロジェクトがベストプラクティスに従っていることを示す方法です。プロジェクトはそれぞれのベストプラクティスに従っている方法を自発的に自己認証できます。バッジを使うことでどのFLOSSプロジェクトがベストプラクティスに従っているかを迅速に評価でき、結果としてより高品質で安全なソフトウェアを製造する可能性が高くなります。 diff --git a/apps/site/pages/ja/download/current.mdx b/apps/site/pages/ja/download/current.mdx index 1dffb99443dd8..f31a114b60cc9 100644 --- a/apps/site/pages/ja/download/current.mdx +++ b/apps/site/pages/ja/download/current.mdx @@ -4,20 +4,30 @@ title: Node.js®をダウンロードする ---
- 用のNode.js® とをを使ってダウンロードする + + +用のNode.js® とを + +を使ってダウンロードする - - アーキテクチャーで動作する用のビルド済みのNode.js®も利用できます。 + + + +アーキテクチャーで動作する + +用のビルド済みのNode.js®も利用できます。 + + - + -
- このバージョンの変更点やブログ記事を確認できます。 + +このバージョンの変更点やブログ記事を確認できます。 リリーススケジュールやLTSに関する詳しい内容は[Node.jsのリリース](/ja/about/previous-releases)を確認してください。 @@ -25,8 +35,16 @@ title: Node.js®をダウンロードする 署名済みのNode.jsのソースコードのtarballもダウンロードできます。 - ナイトリーバイナリーや全ての過去のリリース、 - 他のプラットフォーム向けの非公式バイナリーもダウンロードできます。 + + ナイトリーバイナリー + +や全ての過去のリリース、 +他のプラットフォーム向けの + + 非公式バイナリー + +もダウンロードできます。 +
--- @@ -34,12 +52,9 @@ title: Node.js®をダウンロードする

下記のパートナー企業からご支援いただいております：

- - これらのパートナー企業をはじめ{' '} - 数多くの企業{' '} - からのご支援により、Node.jsのダウンロードの提供やインフラの維持を行っています。 - - + + これらのパートナー企業をはじめ 数多くの企業 からのご支援により、Node.jsのダウンロードの提供やインフラの維持を行っています。 +
diff --git a/apps/site/pages/ja/download/index.mdx b/apps/site/pages/ja/download/index.mdx index 047628c37f35c..fe1214eb0a608 100644 --- a/apps/site/pages/ja/download/index.mdx +++ b/apps/site/pages/ja/download/index.mdx @@ -4,20 +4,30 @@ title: Node.js®をダウンロードする ---
- 用のNode.js® とをを使ってダウンロードする + + +用のNode.js® とを + +を使ってダウンロードする - - アーキテクチャーで動作する用のビルド済みのNode.js®も利用できます。 + + + +アーキテクチャーで動作する + +用のビルド済みのNode.js®も利用できます。 + + - + -
- このバージョンの変更点やブログ記事を確認できます。 + +このバージョンの変更点やブログ記事を確認できます。 リリーススケジュールやLTSに関する詳しい内容は[Node.jsのリリース](/ja/about/previous-releases)を確認してください。 @@ -25,8 +35,16 @@ title: Node.js®をダウンロードする 署名済みのNode.jsのソースコードのtarballもダウンロードできます。 - ナイトリーバイナリーや全ての過去のリリース、 - 他のプラットフォーム向けの非公式バイナリーもダウンロードできます。 + + ナイトリーバイナリー + +や全ての過去のリリース、 +他のプラットフォーム向けの + + 非公式バイナリー + +もダウンロードできます。 +
--- @@ -34,12 +52,9 @@ title: Node.js®をダウンロードする

下記のパートナー企業からご支援いただいております：

- - これらのパートナー企業をはじめ{' '} - 数多くの企業{' '} - からのご支援により、Node.jsのダウンロードの提供やインフラの維持を行っています。 - - + + これらのパートナー企業をはじめ 数多くの企業 からのご支援により、Node.jsのダウンロードの提供やインフラの維持を行っています。 +
diff --git a/apps/site/pages/ja/index.mdx b/apps/site/pages/ja/index.mdx index 5b3b61e1c6dc2..9e77091eccabf 100644 --- a/apps/site/pages/ja/index.mdx +++ b/apps/site/pages/ja/index.mdx @@ -14,6 +14,7 @@ layout: home
+
@@ -21,16 +22,13 @@ layout: home
- Node.jsは上記パートナー企業など数多くの企業からご支援いただいています。
@@ -125,7 +123,5 @@ layout: home ```
- -私たちの[学習コンテンツ](/learn)でNode.jsでできることをさらに学んでみましょう。 - + 私たちの[学習コンテンツ](/learn)でNode.jsでできることをさらに学んでみましょう。
diff --git a/apps/site/pages/ro/about/branding.mdx b/apps/site/pages/ro/about/branding.mdx index fe2a5ef11dffa..91bd4ff9cab88 100644 --- a/apps/site/pages/ro/about/branding.mdx +++ b/apps/site/pages/ro/about/branding.mdx @@ -37,14 +37,24 @@ Mulțumiri către [Angela Angelini](https://www.linkedin.com/in/angeliningl/) pe - Logo orizontal întunecat Node.js + Logo orizontal întunecat Node.js - - Logo orizontal deschis Node.js + Logo orizontal deschis Node.js - @@ -54,24 +64,39 @@ Mulțumiri către [Angela Angelini](https://www.linkedin.com/in/angeliningl/) pe - Logo stivuit întunecat Node.js + Logo stivuit întunecat Node.js - - Logo stivuit deschis Node.js + Logo stivuit deschis Node.js - - Logo stivuit negru Node.js + Logo stivuit negru Node.js - - Logo stivuit alb Node.js + Logo stivuit alb Node.js - @@ -81,13 +106,23 @@ Mulțumiri către [Angela Angelini](https://www.linkedin.com/in/angeliningl/) pe - Pictogramă JS verde + Pictogramă JS verde - - Pictogramă JS albă + Pictogramă JS albă - diff --git a/apps/site/pages/ro/index.mdx b/apps/site/pages/ro/index.mdx index ec2f60407d098..9a1bb893f7446 100644 --- a/apps/site/pages/ro/index.mdx +++ b/apps/site/pages/ro/index.mdx @@ -16,6 +16,7 @@ layout: home
+
@@ -23,16 +24,13 @@ layout: home
- Node.js este susținut cu mândrie de partenerii de mai sus și mulți alții.
@@ -127,7 +125,5 @@ layout: home ```
- -Află ce poate oferi Node.js mai mult cu [materialele noastre de învățare](/learn). - + Află ce poate oferi Node.js mai mult cu [materialele noastre de învățare](/learn).
diff --git a/apps/site/pages/uk/about/branding.mdx b/apps/site/pages/uk/about/branding.mdx index e81f51a46b75d..08611035af270 100644 --- a/apps/site/pages/uk/about/branding.mdx +++ b/apps/site/pages/uk/about/branding.mdx @@ -37,14 +37,24 @@ layout: about - Темний горизонтальний логотип Node.js + Темний горизонтальний логотип Node.js - - Світлий горизонтальний логотип Node.js + Світлий горизонтальний логотип Node.js - @@ -54,24 +64,39 @@ layout: about - Темний складений логотип Node.js® + Темний складений логотип Node.js® - - Світлий складений логотип Node.js® + Світлий складений логотип Node.js® - - Чорний складений логотип Node.js® + Чорний складений логотип Node.js® - - Білий складений логотип Node.js® + Білий складений логотип Node.js® - @@ -81,13 +106,23 @@ layout: about - Зелений значок JS + Зелений значок JS - - Білий значок JS + Білий значок JS - diff --git a/apps/site/pages/uk/about/eol.mdx b/apps/site/pages/uk/about/eol.mdx index 034a7d1717e13..0697184aaf334 100644 --- a/apps/site/pages/uk/about/eol.mdx +++ b/apps/site/pages/uk/about/eol.mdx @@ -14,9 +14,7 @@ description: З'ясуйте, що таке кінець підтримки (End - -або - + або diff --git a/apps/site/pages/uk/download/current.mdx b/apps/site/pages/uk/download/current.mdx index 8a47dc9b68f00..e1218b40793bb 100644 --- a/apps/site/pages/uk/download/current.mdx +++ b/apps/site/pages/uk/download/current.mdx @@ -4,20 +4,24 @@ title: Завантажити Node.js® ---
- Отримати Node.js® для за допомогою з + +Отримати Node.js® для за допомогою з - - Або отримайте збудований Node.js® для з архітектурою . + + +Або отримайте збудований Node.js® для з архітектурою . + + - + -
- Читайте список змін або публікацію в блозі про цю версію. + +Читайте список змін або публікацію в блозі про цю версію. Дізнайтеся більше про [релізи Node.js](/about/previous-releases), у тому числі про розклад релізів та статус підтримки. @@ -28,7 +32,11 @@ title: Завантажити Node.js® Перегляньте наші нічні бінарні файли, усі попередні релізи чи - неофіційні бінарні файли для інших платформ. + + неофіційні + +бінарні файли для інших платформ. +
--- @@ -36,12 +44,10 @@ title: Завантажити Node.js®

Нас підтримують наступні партнери:

- - Ми можемо надавати завантаження Node.js та обслуговувати нашу інфраструктуру - завдяки підтримці цих партнерів{' '} - і не тільки. - - + + Ми можемо надавати завантаження Node.js та обслуговувати нашу інфраструктуру + завдяки підтримці цих партнерів і не тільки. +
diff --git a/apps/site/pages/uk/download/index.mdx b/apps/site/pages/uk/download/index.mdx index 54482e06783ef..8b861b4629792 100644 --- a/apps/site/pages/uk/download/index.mdx +++ b/apps/site/pages/uk/download/index.mdx @@ -4,20 +4,24 @@ title: Завантажити Node.js® ---
- Отримати Node.js® для за допомогою з + +Отримати Node.js® для за допомогою з - - Або отримайте збудований Node.js® для з архітектурою . + + +Або отримайте збудований Node.js® для з архітектурою . + + - + -
- Читайте список змін або публікацію в блозі про цю версію. + +Читайте список змін або публікацію в блозі про цю версію. Дізнайтеся більше про [релізи Node.js](/about/previous-releases), у тому числі про розклад релізів та статус підтримки. @@ -28,7 +32,11 @@ title: Завантажити Node.js® Перегляньте наші нічні бінарні файли, усі попередні релізи чи - неофіційні бінарні файли для інших платформ. + + неофіційні + +бінарні файли для інших платформ. +
--- @@ -36,12 +44,10 @@ title: Завантажити Node.js®

Нас підтримують наступні партнери:

- - Ми можемо надавати завантаження Node.js та обслуговувати нашу інфраструктуру - завдяки підтримці цих партнерів{' '} - і не тільки. - - + + Ми можемо надавати завантаження Node.js та обслуговувати нашу інфраструктуру + завдяки підтримці цих партнерів і не тільки. +
diff --git a/apps/site/pages/uk/index.mdx b/apps/site/pages/uk/index.mdx index ad9476793d8f5..7107e5353a7c7 100644 --- a/apps/site/pages/uk/index.mdx +++ b/apps/site/pages/uk/index.mdx @@ -15,6 +15,7 @@ layout: home
+
@@ -22,16 +23,13 @@ layout: home
- Node.js підтримується партнерами вище і не тільки.
@@ -126,7 +124,5 @@ layout: home ```
- -Дізнайтеся більше про можливості Node.js із [нашими навчальними матеріалами](/learn). - + Дізнайтеся більше про можливості Node.js із [нашими навчальними матеріалами](/learn).
diff --git a/apps/site/snippets/ja/download/nvm.bash b/apps/site/snippets/ja/download/nvm.bash index a7b2d5ae4e136..78b3781f594c9 100644 --- a/apps/site/snippets/ja/download/nvm.bash +++ b/apps/site/snippets/ja/download/nvm.bash @@ -1,5 +1,5 @@ # nvmをダウンロードしてインストールする： -curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.3/install.sh | bash +curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.4/install.sh | bash # シェルを再起動する代わりに実行する \. "$HOME/.nvm/nvm.sh" diff --git a/apps/site/snippets/ro/download/nvm.bash b/apps/site/snippets/ro/download/nvm.bash index b425ddf7d301f..8ff7a2cf56f29 100644 --- a/apps/site/snippets/ro/download/nvm.bash +++ b/apps/site/snippets/ro/download/nvm.bash @@ -1,5 +1,5 @@ # Descarcă și instalează nvm: -curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.3/install.sh | bash +curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.4/install.sh | bash # în loc de a reporni shell-ul \. "$HOME/.nvm/nvm.sh" diff --git a/apps/site/snippets/uk/download/nvm.bash b/apps/site/snippets/uk/download/nvm.bash index 88a9f582d124c..ed5331506a10d 100644 --- a/apps/site/snippets/uk/download/nvm.bash +++ b/apps/site/snippets/uk/download/nvm.bash @@ -1,5 +1,5 @@ # Завантажує й установлює nvm: -curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.3/install.sh | bash +curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.4/install.sh | bash # Замість перезапуску оболонки можна виконати: \. "$HOME/.nvm/nvm.sh" diff --git a/packages/i18n/package.json b/packages/i18n/package.json index 494e023d3a399..96898cc148fe7 100644 --- a/packages/i18n/package.json +++ b/packages/i18n/package.json @@ -1,6 +1,6 @@ { "name": "@node-core/website-i18n", - "version": "1.1.20", + "version": "1.1.21", "type": "module", "exports": { "./*": [ From f4a4823d93110fbbc183d2f6ac0517a706911dba Mon Sep 17 00:00:00 2001 From: Caner Akdas Date: Mon, 2 Mar 2026 00:30:29 +0300 Subject: [PATCH 2/2] feat(ui-components): add Signature and FunctionSignature components (#8667) * feat(ui-components): add Signature and FunctionSignature components * fix: title overflow and mobile return icon alignment * chore: patch version * fix: static heading tag can cause semantic problems * chore: unnecessary fragment removed * fix: wrong naming on signature stories * chore: unused classnames removed * chore: try to make Vercel happy * Update index.stories.tsx --- packages/ui-components/package.json | 2 +- .../SignatureHeader/index.module.css | 45 ++++++ .../Signature/SignatureHeader/index.tsx | 51 ++++++ .../Signature/SignatureItem/index.module.css | 50 ++++++ .../Common/Signature/SignatureItem/index.tsx | 36 +++++ .../Signature/SignatureRoot/index.module.css | 24 +++ .../Common/Signature/SignatureRoot/index.tsx | 26 +++ .../src/Common/Signature/index.stories.tsx | 100 ++++++++++++ .../src/Common/Signature/index.tsx | 41 +++++ .../FunctionSignature/index.stories.tsx | 152 ++++++++++++++++++ .../Containers/FunctionSignature/index.tsx | 42 +++++ 11 files changed, 568 insertions(+), 1 deletion(-) create mode 100644 packages/ui-components/src/Common/Signature/SignatureHeader/index.module.css create mode 100644 packages/ui-components/src/Common/Signature/SignatureHeader/index.tsx create mode 100644 packages/ui-components/src/Common/Signature/SignatureItem/index.module.css create mode 100644 packages/ui-components/src/Common/Signature/SignatureItem/index.tsx create mode 100644 packages/ui-components/src/Common/Signature/SignatureRoot/index.module.css create mode 100644 packages/ui-components/src/Common/Signature/SignatureRoot/index.tsx create mode 100644 packages/ui-components/src/Common/Signature/index.stories.tsx create mode 100644 packages/ui-components/src/Common/Signature/index.tsx create mode 100644 packages/ui-components/src/Containers/FunctionSignature/index.stories.tsx create mode 100644 packages/ui-components/src/Containers/FunctionSignature/index.tsx diff --git a/packages/ui-components/package.json b/packages/ui-components/package.json index 0844f43a9d062..3ba8e119f0aa5 100644 --- a/packages/ui-components/package.json +++ b/packages/ui-components/package.json @@ -1,6 +1,6 @@ { "name": "@node-core/ui-components", - "version": "1.6.0", + "version": "1.6.1", "type": "module", "exports": { "./*": { diff --git a/packages/ui-components/src/Common/Signature/SignatureHeader/index.module.css b/packages/ui-components/src/Common/Signature/SignatureHeader/index.module.css new file mode 100644 index 0000000000000..da2da6867d349 --- /dev/null +++ b/packages/ui-components/src/Common/Signature/SignatureHeader/index.module.css @@ -0,0 +1,45 @@ +@reference "../../../styles/index.css"; + +.header { + @apply flex + items-start + gap-1; +} + +.attribute { + @apply font-ibm-plex-mono + inline-flex + flex-wrap + items-center + gap-1 + text-sm + font-semibold; + + .longName { + @apply break-all + sm:break-keep; + } + + &.return { + @apply font-open-sans + shrink-0; + + svg { + @apply size-4; + } + } +} + +.type { + @apply font-ibm-plex-mono + inline-flex + flex-wrap + gap-0.5 + text-sm + break-all; + + a { + @apply text-green-700 + dark:text-green-400; + } +} diff --git a/packages/ui-components/src/Common/Signature/SignatureHeader/index.tsx b/packages/ui-components/src/Common/Signature/SignatureHeader/index.tsx new file mode 100644 index 0000000000000..ee8040b13df0c --- /dev/null +++ b/packages/ui-components/src/Common/Signature/SignatureHeader/index.tsx @@ -0,0 +1,51 @@ +import { ArrowTurnDownLeftIcon } from '@heroicons/react/24/outline'; +import classNames from 'classnames'; + +import type Signature from '#ui/Common/Signature'; +import type { ComponentProps, FC } from 'react'; + +import styles from './index.module.css'; + +type SignatureHeaderProps = { isReturn?: boolean } & Omit< + ComponentProps, + 'title' | 'description' +>; + +const SignatureHeader: FC = ({ + name, + type, + optional, + isReturn = false, +}) => ( +
+ {name && ( + + {isReturn && } + 16, + })} + > + {name}: + {optional && ( + + ? + + )} + + + )} + {type && {type}} +
+); + +export default SignatureHeader; diff --git a/packages/ui-components/src/Common/Signature/SignatureItem/index.module.css b/packages/ui-components/src/Common/Signature/SignatureItem/index.module.css new file mode 100644 index 0000000000000..d1554950a9370 --- /dev/null +++ b/packages/ui-components/src/Common/Signature/SignatureItem/index.module.css @@ -0,0 +1,50 @@ +@reference "../../../styles/index.css"; + +.item { + @apply flex + flex-col + gap-1; +} + +.return { + @apply rounded-sm + bg-green-100 + px-4 + py-3 + dark:bg-neutral-900/40; +} + +.children { + @apply relative + flex + flex-col + rounded-sm + border + border-neutral-200 + dark:border-neutral-900; + + &:has(> .return:only-child) { + @apply border-0; + } + + &:not(:has(.return:only-child)) .return { + @apply mx-4 + mb-3; + } + + .item:not(.return) { + @apply mx-4 + py-3; + } + + .item:not(:last-child, :has(+ .return)) { + @apply border-b + border-neutral-200 + dark:border-neutral-900; + } +} + +.description { + @apply text-sm + break-all; +} diff --git a/packages/ui-components/src/Common/Signature/SignatureItem/index.tsx b/packages/ui-components/src/Common/Signature/SignatureItem/index.tsx new file mode 100644 index 0000000000000..df079276d70dd --- /dev/null +++ b/packages/ui-components/src/Common/Signature/SignatureItem/index.tsx @@ -0,0 +1,36 @@ +import classNames from 'classnames'; + +import SignatureHeader from '#ui/Common/Signature/SignatureHeader'; + +import type Signature from '#ui/Common/Signature'; +import type { ComponentProps, FC, PropsWithChildren } from 'react'; + +import styles from './index.module.css'; + +type SignatureItemProps = Omit, 'title'>; + +const SignatureItem: FC> = ({ + kind = 'default', + name, + type, + description, + optional, + children, +}) => ( +
+ + {description &&
{description}
} + {children &&
{children}
} +
+); + +export default SignatureItem; diff --git a/packages/ui-components/src/Common/Signature/SignatureRoot/index.module.css b/packages/ui-components/src/Common/Signature/SignatureRoot/index.module.css new file mode 100644 index 0000000000000..15d730563dc28 --- /dev/null +++ b/packages/ui-components/src/Common/Signature/SignatureRoot/index.module.css @@ -0,0 +1,24 @@ +@reference "../../../styles/index.css"; + +.container { + @apply flex + flex-col + gap-3; +} + +.title { + @apply text-base + font-semibold; +} + +.root { + @apply flex + flex-col + gap-4 + rounded-sm + border + border-neutral-200 + px-4 + py-3 + dark:border-neutral-900; +} diff --git a/packages/ui-components/src/Common/Signature/SignatureRoot/index.tsx b/packages/ui-components/src/Common/Signature/SignatureRoot/index.tsx new file mode 100644 index 0000000000000..79e3f145b0d84 --- /dev/null +++ b/packages/ui-components/src/Common/Signature/SignatureRoot/index.tsx @@ -0,0 +1,26 @@ +import { useId } from 'react'; + +import type Signature from '#ui/Common/Signature'; +import type { ComponentProps, FC, PropsWithChildren } from 'react'; + +import styles from './index.module.css'; + +type SignatureRootProps = Pick, 'title'>; + +const SignatureRoot: FC> = ({ + title, + children, +}) => { + const titleId = useId(); + + return ( +
+
+ {title} +
+
{children}
+
+ ); +}; + +export default SignatureRoot; diff --git a/packages/ui-components/src/Common/Signature/index.stories.tsx b/packages/ui-components/src/Common/Signature/index.stories.tsx new file mode 100644 index 0000000000000..686a11779b58b --- /dev/null +++ b/packages/ui-components/src/Common/Signature/index.stories.tsx @@ -0,0 +1,100 @@ +import Signature from '#ui/Common/Signature'; + +import type { Meta as MetaObj, StoryObj } from '@storybook/react-webpack5'; + +type Story = StoryObj; +type Meta = MetaObj; + +export const Default: Story = { + args: { + title: 'Attributes', + children: ( + <> + + <Type1>|<Type2> + + } + /> + <Object>} + description="An optional attribute." + > + <Type1>} /> + <Type2>} /> + <Type3>} + description="One of the available options." + /> + + <Type4>} + description="Returns the result of the function." + kind="return" + /> + + ), + }, +}; + +export const WithLongAttributeNames: Story = { + args: { + title: 'Attributes', + children: ( + <> + + <Type1>|<Type3> + + } + /> + + ), + }, +}; + +export const WithLongTypeAndAttributeNames: Story = { + args: { + title: 'Attributes', + children: ( + <> + + + <ThisIsATypeWithAnExcessivelyLongNameToTestTextWrapping> + + + } + /> + + ), + }, +}; + +export const OptionalAttribute: Story = { + args: { + title: 'Attributes', + children: ( + <Object>} + description="An optional attribute." + /> + ), + }, +}; + +export default { + component: Signature, +} as Meta; diff --git a/packages/ui-components/src/Common/Signature/index.tsx b/packages/ui-components/src/Common/Signature/index.tsx new file mode 100644 index 0000000000000..e24ef4fca18cc --- /dev/null +++ b/packages/ui-components/src/Common/Signature/index.tsx @@ -0,0 +1,41 @@ +import SignatureItem from '#ui/Common/Signature/SignatureItem'; +import SignatureRoot from '#ui/Common/Signature/SignatureRoot'; + +import type { FC, PropsWithChildren, ReactNode } from 'react'; + +export type SignatureProps = { + title?: string; + kind?: 'default' | 'return'; + name?: string; + type?: ReactNode; + description?: ReactNode; + optional?: boolean; +}; + +const Signature: FC> = ({ + kind = 'default', + name, + type, + description, + optional, + title, + children, +}) => { + if (title) { + return {children}; + } + + return ( + + {children} + + ); +}; + +export default Signature; diff --git a/packages/ui-components/src/Containers/FunctionSignature/index.stories.tsx b/packages/ui-components/src/Containers/FunctionSignature/index.stories.tsx new file mode 100644 index 0000000000000..4aebee4bdee88 --- /dev/null +++ b/packages/ui-components/src/Containers/FunctionSignature/index.stories.tsx @@ -0,0 +1,152 @@ +import FunctionSignature from '#ui/Containers/FunctionSignature'; + +import type { Meta as MetaObj, StoryObj } from '@storybook/react-webpack5'; + +type Story = StoryObj; +type Meta = MetaObj; + +export const Default: Story = { + args: { + title: 'Attributes', + items: [ + { + name: 'streams', + type: ( + <> + <Stream[]>|<Iterable[]>| + <AsyncIterable[]>| + <Function[]> + + ), + }, + { + name: 'options', + optional: true, + type: <Object>, + children: [ + { + name: 'Signal', + type: <AbortSignal>, + }, + { + name: 'end', + type: <boolean>, + description: ( + <> + End the destination stream when the source stream ends. + Transform streams are always ended, even if this value is  + false.Default: true. + + ), + }, + ], + }, + { + name: 'Returns', + type: <Promise>, + description: 'Fulfills when the pipeline is complete.', + kind: 'return', + }, + ], + }, +}; + +export const Nested: Story = { + args: { + title: 'Attributes', + items: [ + { + name: 'source', + type: ( + <> + <Stream>|<Iterable>| + <AsyncIterable>| + <Function> + + ), + children: [ + { + name: 'attribute1', + type: <Attribute1>, + }, + { + name: 'attribute2', + type: <Attribute2>, + }, + { + name: 'attribute3', + type: <Attribute3>, + }, + { + name: 'Returns', + kind: 'return', + description: 'description', + type: ( + <> + <Promise>| + <AsyncIterable> + + ), + }, + ], + }, + { + name: '...transforms', + type: ( + <> + <Stream>|<Function> + + ), + children: [ + { + name: 'source', + description: 'description', + type: <AsyncIterable>, + children: [ + { + name: 'Returns', + kind: 'return', + description: 'description', + type: ( + <> + <Promise>| + <AsyncIterable> + + ), + }, + ], + }, + ], + }, + ], + }, +}; + +export const ReturnType: Story = { + args: { + items: [ + { + name: 'Returns', + type: <Promise>, + description: 'Fulfills when the pipeline is complete.', + kind: 'return', + }, + ], + }, +}; + +export const HasOnlyTypeDefinition: Story = { + args: { + title: 'Type', + items: [ + { + type: <Promise>, + description: 'A simple type definition.', + }, + ], + }, +}; + +export default { + component: FunctionSignature, +} as Meta; diff --git a/packages/ui-components/src/Containers/FunctionSignature/index.tsx b/packages/ui-components/src/Containers/FunctionSignature/index.tsx new file mode 100644 index 0000000000000..96eeaf00b53be --- /dev/null +++ b/packages/ui-components/src/Containers/FunctionSignature/index.tsx @@ -0,0 +1,42 @@ +import Signature from '#ui/Common/Signature'; + +import type { ComponentProps, FC } from 'react'; + +type SignatureDefinition = Omit< + ComponentProps, + 'children' +> & { + children?: Array; +}; + +type FunctionSignatureProps = { + title?: string; + items: Array; +}; + +const renderSignature = (param: SignatureDefinition, index: number) => ( + + {param.children?.map((child, i) => renderSignature(child, i))} + +); + +const FunctionSignature: FC = ({ title, items }) => { + if (title) { + return ( + + {items.map((param, i) => renderSignature(param, i))} + + ); + } + + return items.map((param, i) => renderSignature(param, i)); +}; + +export default FunctionSignature;