From d2cc30bfc99c8a7809ba33ebcdc34282c10913ef Mon Sep 17 00:00:00 2001 From: Caner Akdas Date: Thu, 26 Feb 2026 03:02:20 +0300 Subject: [PATCH 1/9] feat(ui-components): add Signature and FunctionSignature components --- .../SignatureHeader/index.module.css | 40 +++++ .../Signature/SignatureHeader/index.tsx | 48 ++++++ .../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 | 106 ++++++++++++ .../src/Common/Signature/index.tsx | 41 +++++ .../FunctionSignature/index.stories.tsx | 152 ++++++++++++++++++ .../Containers/FunctionSignature/index.tsx | 42 +++++ 10 files changed, 565 insertions(+) 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/src/Common/Signature/SignatureHeader/index.module.css b/packages/ui-components/src/Common/Signature/SignatureHeader/index.module.css new file mode 100644 index 0000000000000..45dc3d9327258 --- /dev/null +++ b/packages/ui-components/src/Common/Signature/SignatureHeader/index.module.css @@ -0,0 +1,40 @@ +@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 + break-all; + + &.return { + @apply font-open-sans; + + 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..f39462ea7eb19 --- /dev/null +++ b/packages/ui-components/src/Common/Signature/SignatureHeader/index.tsx @@ -0,0 +1,48 @@ +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 && } + + {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..00618124cbaed --- /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..f4bf7cbc03362 --- /dev/null +++ b/packages/ui-components/src/Common/Signature/index.stories.tsx @@ -0,0 +1,106 @@ +import FunctionDefinition 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." + > + <Type3>} + /> + <Type3>} + /> + <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>|<Type2> + + } + /> + + ), + }, +}; + +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: FunctionDefinition, +} 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..0efcfb1296a1a --- /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; From a34cc13aac3596c20d0788a635c06c90afa907eb Mon Sep 17 00:00:00 2001 From: Caner Akdas Date: Thu, 26 Feb 2026 03:26:31 +0300 Subject: [PATCH 2/9] fix: title overflow and mobile return icon alignment --- .../Common/Signature/SignatureHeader/index.module.css | 11 ++++++++--- .../src/Common/Signature/SignatureHeader/index.tsx | 6 +++++- 2 files changed, 13 insertions(+), 4 deletions(-) diff --git a/packages/ui-components/src/Common/Signature/SignatureHeader/index.module.css b/packages/ui-components/src/Common/Signature/SignatureHeader/index.module.css index 45dc3d9327258..da2da6867d349 100644 --- a/packages/ui-components/src/Common/Signature/SignatureHeader/index.module.css +++ b/packages/ui-components/src/Common/Signature/SignatureHeader/index.module.css @@ -13,11 +13,16 @@ items-center gap-1 text-sm - font-semibold - break-all; + font-semibold; + + .longName { + @apply break-all + sm:break-keep; + } &.return { - @apply font-open-sans; + @apply font-open-sans + shrink-0; svg { @apply size-4; diff --git a/packages/ui-components/src/Common/Signature/SignatureHeader/index.tsx b/packages/ui-components/src/Common/Signature/SignatureHeader/index.tsx index f39462ea7eb19..9269c29be9232 100644 --- a/packages/ui-components/src/Common/Signature/SignatureHeader/index.tsx +++ b/packages/ui-components/src/Common/Signature/SignatureHeader/index.tsx @@ -25,7 +25,11 @@ const SignatureHeader: FC = ({ })} > {isReturn && } - + 16, + })} + > {name}: {optional && ( Date: Thu, 26 Feb 2026 03:32:16 +0300 Subject: [PATCH 3/9] chore: patch version --- packages/ui-components/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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": { "./*": { From 607f618e35997f87184362a3e97f68964e1d6b63 Mon Sep 17 00:00:00 2001 From: Caner Akdas Date: Thu, 26 Feb 2026 03:37:29 +0300 Subject: [PATCH 4/9] fix: static heading tag can cause semantic problems --- .../src/Common/Signature/SignatureRoot/index.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/ui-components/src/Common/Signature/SignatureRoot/index.tsx b/packages/ui-components/src/Common/Signature/SignatureRoot/index.tsx index 00618124cbaed..79e3f145b0d84 100644 --- a/packages/ui-components/src/Common/Signature/SignatureRoot/index.tsx +++ b/packages/ui-components/src/Common/Signature/SignatureRoot/index.tsx @@ -15,9 +15,9 @@ const SignatureRoot: FC> = ({ return (
-

+
{title} -

+
{children}
); From 82ac683357868299af3f591a66280a4c575be726 Mon Sep 17 00:00:00 2001 From: Caner Akdas Date: Fri, 27 Feb 2026 22:00:15 +0300 Subject: [PATCH 5/9] chore: unnecessary fragment removed --- .../ui-components/src/Containers/FunctionSignature/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/ui-components/src/Containers/FunctionSignature/index.tsx b/packages/ui-components/src/Containers/FunctionSignature/index.tsx index 0efcfb1296a1a..96eeaf00b53be 100644 --- a/packages/ui-components/src/Containers/FunctionSignature/index.tsx +++ b/packages/ui-components/src/Containers/FunctionSignature/index.tsx @@ -36,7 +36,7 @@ const FunctionSignature: FC = ({ title, items }) => { ); } - return <>{items.map((param, i) => renderSignature(param, i))}; + return items.map((param, i) => renderSignature(param, i)); }; export default FunctionSignature; From 8ba0056d5391d77964877e5b94648eb63d14018c Mon Sep 17 00:00:00 2001 From: Caner Akdas Date: Fri, 27 Feb 2026 22:08:43 +0300 Subject: [PATCH 6/9] fix: wrong naming on signature stories --- .../src/Common/Signature/index.stories.tsx | 34 ++++++++----------- 1 file changed, 14 insertions(+), 20 deletions(-) diff --git a/packages/ui-components/src/Common/Signature/index.stories.tsx b/packages/ui-components/src/Common/Signature/index.stories.tsx index f4bf7cbc03362..222903634779b 100644 --- a/packages/ui-components/src/Common/Signature/index.stories.tsx +++ b/packages/ui-components/src/Common/Signature/index.stories.tsx @@ -1,16 +1,16 @@ -import FunctionDefinition from '#ui/Common/Signature'; +import Signature from '#ui/Common/Signature'; import type { Meta as MetaObj, StoryObj } from '@storybook/react-webpack5'; -type Story = StoryObj; -type Meta = MetaObj; +type Story = StoryObj; +type Meta = MetaObj; export const Default: Story = { args: { title: 'Attributes', children: ( <> - @@ -18,27 +18,21 @@ export const Default: Story = { } /> - <Object>} description="An optional attribute." > - <Type3>} - /> - <Type3>} - /> - <Type3>} /> + <Type3>} /> + <Type3>} description="One of the available options." /> - - + <Type4>} description="Returns the result of the function." @@ -54,7 +48,7 @@ export const WithLongAttributeNames: Story = { title: 'Attributes', children: ( <> - @@ -72,7 +66,7 @@ export const WithLongTypeAndAttributeNames: Story = { title: 'Attributes', children: ( <> - @@ -91,7 +85,7 @@ export const OptionalAttribute: Story = { args: { title: 'Attributes', children: ( - <Object>} @@ -102,5 +96,5 @@ export const OptionalAttribute: Story = { }; export default { - component: FunctionDefinition, + component: Signature, } as Meta; From 4b9890e4a0ba831b70ee980e20eddc40f1d2e574 Mon Sep 17 00:00:00 2001 From: Caner Akdas Date: Fri, 27 Feb 2026 22:12:45 +0300 Subject: [PATCH 7/9] chore: unused classnames removed --- .../src/Common/Signature/SignatureHeader/index.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/ui-components/src/Common/Signature/SignatureHeader/index.tsx b/packages/ui-components/src/Common/Signature/SignatureHeader/index.tsx index 9269c29be9232..ee8040b13df0c 100644 --- a/packages/ui-components/src/Common/Signature/SignatureHeader/index.tsx +++ b/packages/ui-components/src/Common/Signature/SignatureHeader/index.tsx @@ -26,14 +26,13 @@ const SignatureHeader: FC = ({ > {isReturn && } 16, })} > {name}: {optional && ( Date: Sat, 28 Feb 2026 02:40:17 +0300 Subject: [PATCH 8/9] chore: try to make Vercel happy --- packages/ui-components/src/Common/Signature/index.stories.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/ui-components/src/Common/Signature/index.stories.tsx b/packages/ui-components/src/Common/Signature/index.stories.tsx index 222903634779b..2ea26918a1880 100644 --- a/packages/ui-components/src/Common/Signature/index.stories.tsx +++ b/packages/ui-components/src/Common/Signature/index.stories.tsx @@ -24,8 +24,8 @@ export const Default: Story = { type={<Object>} description="An optional attribute." > - <Type3>} /> - <Type3>} /> + <Type1>} /> + <Type2>} /> <Type3>} From 988a4895a21da2f44b03111386068edfced684c2 Mon Sep 17 00:00:00 2001 From: Caner Akdas Date: Sat, 28 Feb 2026 17:49:18 +0300 Subject: [PATCH 9/9] Update index.stories.tsx --- packages/ui-components/src/Common/Signature/index.stories.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/ui-components/src/Common/Signature/index.stories.tsx b/packages/ui-components/src/Common/Signature/index.stories.tsx index 2ea26918a1880..686a11779b58b 100644 --- a/packages/ui-components/src/Common/Signature/index.stories.tsx +++ b/packages/ui-components/src/Common/Signature/index.stories.tsx @@ -52,7 +52,7 @@ export const WithLongAttributeNames: Story = { name="thisIsAnAttributeWithAnExcessivelyLongNameToTestTextWrapping" type={ <> - <Type1>|<Type2> + <Type1>|<Type3> } />