refactor: FunctionSignature return type container (#8717)

* refactor: function return type container

* chore: patch and unique key

* chore: remove unnecessary container

* chore: review updates

Author: canerakdas

packages/ui-components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@node-core/ui-components",
-  "version": "1.6.2",
+  "version": "1.6.3",
   "type": "module",
   "exports": {
     "./*": {

packages/ui-components/src/Common/Signature/SignatureRoot/index.module.css

@@ -12,7 +12,8 @@
 }
 
 .root {
-  @apply flex
+  @apply mb-3
+    flex
     flex-col
     gap-4
     rounded-sm

packages/ui-components/src/Containers/FunctionSignature/index.stories.tsx

@@ -118,6 +118,17 @@ export const Nested: Story = {
           },
         ],
       },
+      {
+        name: 'Returns',
+        kind: 'return',
+        description: 'description',
+        type: (
+          <>
+            <a href="#">&lt;Promise&gt;</a>|
+            <a href="#">&lt;AsyncIterable&gt;</a>
+          </>
+        ),
+      },
     ],
   },
 };

packages/ui-components/src/Containers/FunctionSignature/index.tsx

@@ -29,10 +29,26 @@ const renderSignature = (param: SignatureDefinition, index: number) => (
 
 const FunctionSignature: FC<FunctionSignatureProps> = ({ title, items }) => {
   if (title) {
+    const attributes: Array<SignatureDefinition> = [];
+    const returnTypes: Array<SignatureDefinition> = [];
+
+    for (const item of items) {
+      const target = item.kind === 'return' ? returnTypes : attributes;
+
+      target.push(item);
+    }
+
     return (
-      <Signature title={title}>
-        {items.map((param, i) => renderSignature(param, i))}
-      </Signature>
+      <>
+        <Signature title={title}>
+          {attributes.map((param, i) => renderSignature(param, i))}
+        </Signature>
+
+        {returnTypes.length > 0 &&
+          returnTypes.map((param, i) =>
+            renderSignature(param, attributes.length + i)
+          )}
+      </>
     );
   }