fix(API Ref): tagged export support for type nodes

components/renderers/class/class.renderer.module.scss

@@ -1,7 +1,7 @@
 .members {
   display: flex;
   flex-direction: column;
-  gap: 24px;
+  gap: 20px;
 }
 
 .decorators {

components/renderers/type/type.renderer.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { TypeSchema } from '@teambit/semantics.entities.semantic-schema';
 import { APINodeRenderProps, APINodeRenderer } from '@teambit/api-reference.models.api-node-renderer';
+import { SchemaNodesSummary } from '@teambit/api-reference.overview.renderers.grouped-schema-nodes-overview-summary';
 import { APINodeDetails } from '@teambit/api-reference.renderers.api-node-details';
 
 export const typeRenderer: APINodeRenderer = {
@@ -9,6 +10,7 @@ export const typeRenderer: APINodeRenderer = {
   nodeType: 'Types',
   icon: { name: 'Type', url: 'https://static.bit.dev/api-reference/type.svg' },
   default: true,
+  OverviewComponent: TypeOverviewComponent,
 };
 
 function TypeComponent(props: APINodeRenderProps) {
@@ -48,3 +50,14 @@ function TypeComponent(props: APINodeRenderProps) {
     </APINodeDetails>
   );
 }
+
+function TypeOverviewComponent(props: APINodeRenderProps) {
+  const {
+    apiNode: { api, renderer },
+  } = props;
+  const typeNode = api as TypeSchema;
+  const icon = renderer?.icon;
+  const { type } = typeNode;
+  const nodes = type.getNodes();
+  return <SchemaNodesSummary name={typeNode.name} nodes={nodes} icon={icon} apiNodeRendererProps={props} />;
+}

components/utils/group-schema-node-by-signature/group-schema-node-by-signature.ts

@@ -7,8 +7,10 @@ export function sortSignatureType(
 ): 0 | 1 | -1 {
   if (!aType) return -1;
   if (!bType) return 1;
+  if (aType === 'constructors') return -1;
+  if (bType === 'constructors') return 1;
   if (aType === 'properties') return -1;
-  if (bType === 'properties') return -1;
+  if (bType === 'properties') return 1;
   if (aType < bType) return -1;
   if (aType > bType) return 1;
   return 0;

components/utils/schema-node-signature-transform/schema-node-signature.transform.ts

@@ -4,6 +4,8 @@ export function transformSignature({ __schema, signature }: SchemaNode): string
   if (!signature) return undefined;
   if (__schema === ConstructorSchema.name && 'constructor') return signature;
   const displaySignatureIndex = signature.indexOf(') ') + 1;
-  const [, ...displaySignature] = signature?.slice(displaySignatureIndex).trim().split('.');
+  const [, ...displaySignature] = signature.includes('.')
+    ? signature?.slice(displaySignatureIndex).trim().split('.')
+    : [undefined, signature?.slice(displaySignatureIndex).trim()];
   return displaySignature.join('.');
 }

scopes/api-reference/renderers/grouped-schema-nodes-overview-summary/grouped-schema-nodes-overview-summary.module.scss

@@ -71,13 +71,18 @@
   display: flex;
 }
 
+.propertiesTitle {
+  font-weight: 500;
+  font-size: 16px;
+}
+
 .propertiesTitle,
 .memberTitle {
   width: 240px;
   font-size: 16px;
-  font-weight: 500;
   display: flex;
   align-items: center;
+  text-transform: capitalize;
 }
 
 .methodMembers {
@@ -137,9 +142,9 @@
 .memberDetails {
   display: grid;
   grid-template-columns: 240px minmax(400px, 800px) 50px;
-  gap: 24px;
   width: 100%;
   align-items: center;
+  gap: 16px 0px;
 }
 
 .collapsedRow {
@@ -149,6 +154,7 @@
 .collapsedRow,
 .expandedRow {
   display: contents;
+  padding: 16px 0px;
 }
 
 .memberTitle,
@@ -170,3 +176,7 @@
 .expandedRow {
   grid-column: 1 / span 3;
 }
+
+.table {
+  padding-top: 8px;
+}

scopes/api-reference/renderers/grouped-schema-nodes-overview-summary/grouped-schema-nodes-overview-summary.tsx

@@ -12,6 +12,7 @@ import { parameterRenderer as defaultParamRenderer } from '@teambit/api-referenc
 import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
 import defaultTheme from '@teambit/api-reference.utils.custom-prism-syntax-highlighter-theme';
 import { Link } from '@teambit/base-react.navigation.link';
+import pluralize from 'pluralize';
 import classnames from 'classnames';
 
 import styles from './grouped-schema-nodes-overview-summary.module.scss';
@@ -95,9 +96,6 @@ export function SchemaNodesSummary({
 
   const rootRef = React.useRef<HTMLDivElement>(null);
 
-  const [areAllExpanded, setAreAllExpanded] = React.useState(false);
-  const expandCollapseIcon = 'https://static.bit.dev/bit-icons/thin-arrow-down.svg';
-
   return (
     <div ref={rootRef} {...rest} className={classnames(styles.groupNodesContainer, className)}>
       <div className={styles.heading}>
@@ -111,13 +109,6 @@ export function SchemaNodesSummary({
             <Link href={`~api-reference?selectedAPI=${name}`}>{name}</Link>
           </div>
         </div>
-        <div className={classnames(styles.headingRight)} onClick={() => setAreAllExpanded(!areAllExpanded)}>
-          <img
-            src={expandCollapseIcon}
-            alt={areAllExpanded ? 'Collapse All' : 'Expand All'}
-            className={areAllExpanded ? styles.expanded : styles.collapsed}
-          />
-        </div>
       </div>
       {description && <div className={styles.description}>{description}</div>}
       {groupedNodes.map(([type, groupedMembersByType], index) => {
@@ -128,7 +119,9 @@ export function SchemaNodesSummary({
           <div key={`${type}-${index}`} className={classnames(styles.memberSummary)}>
             {!skipRenderingTable && (
               <div className={styles.propertiesOverview}>
-                <div className={styles.propertiesTitle}>{type === 'enum members' ? 'Members' : 'Properties'}</div>
+                <div className={styles.propertiesTitle}>
+                  {type === 'enum members' ? 'Members' : pluralize(type ?? 'properties')}
+                </div>
                 <div className={styles.table}>
                   <HeadingRow
                     className={classnames(styles.row, styles.headingRow)}
@@ -147,7 +140,6 @@ export function SchemaNodesSummary({
                   <SchemaMethodMember
                     key={`${member.__schema}-${member.name}`}
                     member={member}
-                    initialState={areAllExpanded}
                     apiNodeRendererProps={apiNodeRendererProps}
                   />
                 ))}
@@ -162,24 +154,15 @@ export function SchemaNodesSummary({
 
 function SchemaMethodMember({
   member,
-  initialState,
   apiNodeRendererProps,
 }: {
   member: SchemaNode;
-  initialState?: boolean;
   apiNodeRendererProps: APINodeRenderProps;
 }) {
-  const [isExpanded, setIsExpanded] = React.useState(initialState);
-  React.useEffect(() => {
-    setIsExpanded(initialState);
-  }, [initialState]);
-
   const memberSignature =
     member.__schema === SetAccessorSchema.name
       ? `(${(member as SetAccessorSchema).param.toString()}) => void`
-      : transformSignature(member)?.split(member.name ?? '')[1];
-
-  const icon = 'https://static.bit.dev/bit-icons/thin-arrow-down.svg';
+      : transformSignature(member)?.split(member.name ?? '')[1] ?? member.signature;
 
   const { renderers } = apiNodeRendererProps;
   const { doc } = member;
@@ -214,63 +197,55 @@ function SchemaMethodMember({
             </SyntaxHighlighter>
           </div>
         )}
-        <div className={styles.icon}>
-          <img
-            className={isExpanded ? styles.expanded : styles.collapsed}
-            src={icon}
-            alt={isExpanded ? 'collapse' : 'expand'}
-            onClick={() => setIsExpanded(!isExpanded)}
-          />
-        </div>
       </div>
-      {isExpanded && (
-        <div className={styles.expandedRow}>
-          <div className={styles.leftPlaceholder}></div>
-          <div className={styles.expandedRowDetails}>
-            {doc?.comment && <div className={styles.description}>{doc?.comment || ''}</div>}
-            {params.length > 0 && (
-              <div className={styles.paramsContainer}>
-                <HeadingRow className={styles.paramHeading} headings={paramTypeHeadings} colNumber={4} />
-                {params.map((param) => {
-                  const paramRenderer = renderers.find((renderer) => renderer.predicate(param));
-                  if (paramRenderer?.Component) {
-                    return (
-                      <paramRenderer.Component
-                        {...apiNodeRendererProps}
-                        key={`param-${param.name}`}
-                        depth={(apiNodeRendererProps.depth ?? 0) + 1}
-                        apiNode={{ ...apiNodeRendererProps.apiNode, renderer: paramRenderer, api: param }}
-                        metadata={{ [param.__schema]: { columnView: true, skipHeadings: true } }}
-                      />
-                    );
-                  }
+
+      <div className={styles.expandedRow}>
+        <div className={styles.leftPlaceholder}></div>
+        <div className={styles.expandedRowDetails}>
+          {doc?.comment && <div className={styles.description}>{doc?.comment || ''}</div>}
+          {params.length > 0 && (
+            <div className={styles.paramsContainer}>
+              <HeadingRow className={styles.paramHeading} headings={paramTypeHeadings} colNumber={4} />
+              {params.map((param) => {
+                const paramRenderer = renderers.find((renderer) => renderer.predicate(param));
+                if (paramRenderer?.Component) {
                   return (
-                    <defaultParamRenderer.Component
+                    <paramRenderer.Component
                       {...apiNodeRendererProps}
                       key={`param-${param.name}`}
                       depth={(apiNodeRendererProps.depth ?? 0) + 1}
-                      apiNode={{ ...apiNodeRendererProps.apiNode, renderer: defaultParamRenderer, api: param }}
+                      apiNode={{ ...apiNodeRendererProps.apiNode, renderer: paramRenderer, api: param }}
                       metadata={{ [param.__schema]: { columnView: true, skipHeadings: true } }}
                     />
                   );
-                })}
-              </div>
-            )}
-            {returnType && (
-              <div className={styles.returnContainer}>
-                <h3 className={styles.subtitle}>Returns</h3>
-                {(returnTypeRenderer && (
-                  <returnTypeRenderer.Component
+                }
+                return (
+                  <defaultParamRenderer.Component
                     {...apiNodeRendererProps}
-                    apiNode={{ ...apiNodeRendererProps.apiNode, api: returnType, renderer: returnTypeRenderer }}
+                    key={`param-${param.name}`}
                     depth={(apiNodeRendererProps.depth ?? 0) + 1}
+                    apiNode={{ ...apiNodeRendererProps.apiNode, renderer: defaultParamRenderer, api: param }}
+                    metadata={{ [param.__schema]: { columnView: true, skipHeadings: true } }}
                   />
-                )) || <div className={nodeStyles.node}>{returnType.toString()}</div>}
-              </div>
-            )}
-          </div>
+                );
+              })}
+            </div>
+          )}
+          {returnType && (
+            <div className={styles.returnContainer}>
+              <h3 className={styles.subtitle}>Returns</h3>
+              {(returnTypeRenderer && (
+                <returnTypeRenderer.Component
+                  {...apiNodeRendererProps}
+                  apiNode={{ ...apiNodeRendererProps.apiNode, api: returnType, renderer: returnTypeRenderer }}
+                  depth={(apiNodeRendererProps.depth ?? 0) + 1}
+                  metadata={{ ...apiNodeRendererProps.metadata, [returnType.__schema]: { columnView: true } }}
+                />
+              )) || <div className={nodeStyles.node}>{returnType.toString()}</div>}
+            </div>
+          )}
         </div>
-      )}
+      </div>
     </div>
   );
 }

scopes/api-reference/renderers/grouped-schema-nodes-summary/grouped-schema-nodes-summary.module.scss

@@ -16,7 +16,7 @@
 }
 
 .paddingTop {
-  padding-top: 8px;
+  padding-top: 20px;
 }
 
 .row {
@@ -53,4 +53,5 @@
 .table {
   display: flex;
   flex: 1;
+  padding-top: 8px;
 }

scopes/api-reference/renderers/schema-node-member-summary/function-node-summary.tsx

@@ -39,7 +39,7 @@ export function FunctionNodeSummary({
   const signature =
     __schema === SetAccessorSchema.name
       ? `(${(node as SetAccessorSchema).param.toString()}) => void`
-      : transformSignature(node)?.split(name)[1];
+      : transformSignature(node)?.split(name)[1] ?? node.signature;
 
   const { renderers } = apiNodeRendererProps;
   const returnTypeRenderer = returnType && renderers.find((renderer) => renderer.predicate(returnType));