+ {
+ const id = node.id;
+ const isInternal = id.includes('_Internals');
+ const sanitizedId = isInternal ? id.replace('_Internals/', '') : id;
+ const selectedAPI = isInternal ? sanitizedId : sanitizedId.split('/')[1];
+ return useUpdatedUrlFromQuery({ selectedAPI });
+ }}
+ files={apiTree}
+ selected={selectedAPIName}
+ getIcon={getIcon}
+ />
+
+ );
+}
diff --git a/components/explorer/api-reference-explorer/index.ts b/components/explorer/api-reference-explorer/index.ts
new file mode 100644
index 0000000..fb42245
--- /dev/null
+++ b/components/explorer/api-reference-explorer/index.ts
@@ -0,0 +1 @@
+export { APIReferenceExplorer, APIReferenceExplorerProps } from './api-reference-explorer';
diff --git a/components/hooks/use-api-ref-url/index.ts b/components/hooks/use-api-ref-url/index.ts
new file mode 100644
index 0000000..be5769c
--- /dev/null
+++ b/components/hooks/use-api-ref-url/index.ts
@@ -0,0 +1 @@
+export { useAPIRefParam, APIRefQueryParams, useUpdatedUrlFromQuery } from './use-api-ref-url';
diff --git a/components/hooks/use-api-ref-url/use-api-ref-url.ts b/components/hooks/use-api-ref-url/use-api-ref-url.ts
new file mode 100644
index 0000000..275d5d5
--- /dev/null
+++ b/components/hooks/use-api-ref-url/use-api-ref-url.ts
@@ -0,0 +1,24 @@
+import { useQuery } from '@teambit/ui-foundation.ui.react-router.use-query';
+import { useLocation } from '@teambit/base-react.navigation.link';
+
+export type APIRefQueryParams = {
+ selectedAPI?: string;
+};
+
+export function useAPIRefParam(key: keyof APIRefQueryParams): string | undefined {
+ const query = useQuery();
+ const queryParam = query.get(key);
+ return queryParam ?? undefined;
+}
+
+export function useUpdatedUrlFromQuery(queryParams: APIRefQueryParams): string {
+ const query = useQuery();
+ const location = useLocation() || { pathname: '/' };
+ const queryObj = Object.fromEntries(query.entries());
+
+ const updatedObj = { ...queryObj, ...queryParams };
+ const queryString = new URLSearchParams(updatedObj).toString();
+ const isOnAPIRefSubroute = location.pathname.includes('~api-reference');
+ const apiRefSubRoute = isOnAPIRefSubroute ? '' : '/~api-reference';
+ return `${location.pathname}${apiRefSubRoute}?${queryString}`;
+}
diff --git a/components/hooks/use-api-renderers/index.ts b/components/hooks/use-api-renderers/index.ts
new file mode 100644
index 0000000..f0814fb
--- /dev/null
+++ b/components/hooks/use-api-renderers/index.ts
@@ -0,0 +1,2 @@
+export { APIRefRenderersProvider, useAPIRefRenderers, APIRefRenderersContext } from './use-api-renderers';
+export type { APIRefRenderersProviderProps } from './use-api-renderers';
diff --git a/components/hooks/use-api-renderers/use-api-renderers.tsx b/components/hooks/use-api-renderers/use-api-renderers.tsx
new file mode 100644
index 0000000..34d8865
--- /dev/null
+++ b/components/hooks/use-api-renderers/use-api-renderers.tsx
@@ -0,0 +1,30 @@
+import type { APINodeRenderer } from '@teambit/api-reference.models.api-node-renderer';
+import type { ReactNode } from 'react';
+import React, { createContext, useContext } from 'react';
+
+export const APIRefRenderersContext = createContext<{
+ nodeRenderers: APINodeRenderer[];
+}>({
+ nodeRenderers: [],
+});
+
+export type APIRefRenderersProviderProps = {
+ children: ReactNode;
+ nodeRenderers: APINodeRenderer[];
+};
+
+export const APIRefRenderersProvider: React.FC
+ {apiNodesGroupedByType.map(([type, nodes]) => (
+
+ );
+}
+
+function sortGroupedAPINodes(a: [string, unknown], b: [string, unknown]) {
+ const [aType] = a;
+ const [bType] = b;
+ return aType.localeCompare(bType);
+}
diff --git a/components/overview/api-reference-table-of-contents/index.ts b/components/overview/api-reference-table-of-contents/index.ts
new file mode 100644
index 0000000..57afb7f
--- /dev/null
+++ b/components/overview/api-reference-table-of-contents/index.ts
@@ -0,0 +1,2 @@
+export { APIReferenceTableOfContents } from './api-reference.table-of-contents';
+export type { APIReferenceTableOfContentsProps } from './api-reference.table-of-contents';
diff --git a/components/overview/renderers/grouped-schema-nodes-overview-summary/grouped-schema-nodes-overview-summary.module.scss b/components/overview/renderers/grouped-schema-nodes-overview-summary/grouped-schema-nodes-overview-summary.module.scss
new file mode 100644
index 0000000..05bd792
--- /dev/null
+++ b/components/overview/renderers/grouped-schema-nodes-overview-summary/grouped-schema-nodes-overview-summary.module.scss
@@ -0,0 +1,182 @@
+.groupNodesContainer {
+ display: flex;
+ flex-direction: column;
+ gap: 24px;
+ padding: 16px;
+ background-color: var(--surface01-color, #f7f7f5);
+ border-radius: 8px;
+}
+
+.heading {
+ display: grid;
+ grid-template-columns: 240px minmax(500px, 900px);
+}
+
+.headingLeft {
+ grid-column: 1;
+ display: flex;
+ gap: 8px;
+}
+
+.headingRight {
+ grid-column: 2;
+ display: flex;
+ align-items: center;
+ justify-content: flex-end;
+ > img {
+ width: 18px;
+ height: 18px;
+ cursor: pointer;
+ &.collapsed {
+ transform: rotate(-90deg);
+ }
+ transition: transform 0.2s ease-in-out;
+ }
+}
+
+.icon {
+ > img {
+ cursor: pointer;
+ width: 18px;
+ height: 18px;
+ }
+}
+
+.title {
+ font-size: 18px;
+ font-weight: 500;
+}
+
+.signature {
+ min-width: 400px;
+ max-width: 800px;
+}
+
+// .headingRight,
+// .icon {
+// display: flex;
+// align-items: center;
+// justify-content: flex-end;
+// }
+
+.description {
+ font-size: 14px;
+}
+
+.memberSummary {
+ display: flex;
+}
+
+.propertiesOverview {
+ display: flex;
+}
+
+.propertiesTitle {
+ font-weight: 500;
+ font-size: 16px;
+}
+
+.propertiesTitle,
+.memberTitle {
+ width: 240px;
+ font-size: 16px;
+ display: flex;
+ align-items: center;
+ text-transform: capitalize;
+}
+
+.methodMembers {
+ display: flex;
+ flex-direction: column;
+ gap: 16px;
+}
+
+.table,
+.signature {
+ display: flex;
+ flex-direction: column;
+}
+
+.icon {
+ cursor: pointer;
+ flex-shrink: 0;
+ > img {
+ height: 18px;
+ width: 18px;
+ &.collapsed {
+ transform: rotate(-90deg);
+ }
+ transition: transform 0.2s ease-in-out;
+ }
+}
+
+.expandedRowDetails {
+ display: flex;
+ flex-direction: column;
+ flex: 1;
+ gap: 24px;
+}
+
+.description {
+ font-size: 14px;
+ margin-bottom: 16px;
+ font-style: italic;
+}
+
+.subtitle {
+ font-weight: 500;
+ text-transform: uppercase;
+ font-size: var(--bit-p-xxs);
+ padding-right: 16px;
+ margin-bottom: 12px;
+}
+
+.paramHeading {
+ padding: 8px 0px 16px 0px;
+}
+
+.returnContainer {
+ margin-bottom: 16px;
+}
+
+.memberDetails {
+ display: grid;
+ grid-template-columns: 240px minmax(400px, 800px) 50px;
+ width: 100%;
+ align-items: center;
+ gap: 16px 0px;
+}
+
+.collapsedRow {
+ align-items: center;
+}
+
+.collapsedRow,
+.expandedRow {
+ display: contents;
+ padding: 16px 0px;
+}
+
+.memberTitle,
+.leftPlaceholder {
+ grid-column: 1;
+}
+
+.signature,
+.expandedRowDetails,
+.icon {
+ grid-column: 2;
+}
+
+.icon {
+ grid-column: 3;
+ justify-self: end;
+}
+
+.expandedRow {
+ grid-column: 1 / span 3;
+}
+
+.table {
+ padding-top: 8px;
+}
diff --git a/components/overview/renderers/grouped-schema-nodes-overview-summary/grouped-schema-nodes-overview-summary.tsx b/components/overview/renderers/grouped-schema-nodes-overview-summary/grouped-schema-nodes-overview-summary.tsx
new file mode 100644
index 0000000..0d9fab4
--- /dev/null
+++ b/components/overview/renderers/grouped-schema-nodes-overview-summary/grouped-schema-nodes-overview-summary.tsx
@@ -0,0 +1,259 @@
+import type { HTMLAttributes } from 'react';
+import React from 'react';
+import type { SchemaNode, EnumMemberSchema } from '@teambit/semantics.entities.semantic-schema';
+import { SetAccessorSchema } from '@teambit/semantics.entities.semantic-schema';
+import {
+ groupByNodeSignatureType,
+ sortSignatureType,
+} from '@teambit/api-reference.utils.group-schema-node-by-signature';
+import { transformSignature } from '@teambit/api-reference.utils.schema-node-signature-transform';
+import { HeadingRow } from '@teambit/documenter.ui.table-heading-row';
+import type { APINodeRenderProps } from '@teambit/api-reference.models.api-node-renderer';
+import { nodeStyles } from '@teambit/api-reference.models.api-node-renderer';
+import { VariableNodeSummary, EnumMemberSummary } from '@teambit/api-reference.renderers.schema-node-member-summary';
+import { parameterRenderer as defaultParamRenderer } from '@teambit/api-reference.renderers.parameter';
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
+import defaultTheme from '@teambit/api-reference.utils.custom-prism-syntax-highlighter-theme';
+import { Link as BaseLink } from '@teambit/base-react.navigation.link';
+import pluralize from 'pluralize';
+import classnames from 'classnames';
+
+import styles from './grouped-schema-nodes-overview-summary.module.scss';
+
+// @todo - this will be fixed as part of the @teambit/base-react.navigation.link upgrade to latest
+const Link = BaseLink as any;
+
+export type SchemaNodesSummaryProps = {
+ name: string;
+ // signature?: string;
+ description?: string;
+ icon?: { name: string; url: string };
+ nodes: SchemaNode[];
+ apiNodeRendererProps: APINodeRenderProps;
+ headings?: Record
+
+ ))}
+
+
+
+
+
+ 
+ {nodes[0]?.renderer?.nodeType}
+
+
+ {nodes.sort(sortAPINodes).map((node) => (
+
+
+
+ ))}
+
+
+ {node.alias || node.api.name}
+
+
+
+
+ );
+}
+
+function SchemaMethodMember({
+ member,
+ apiNodeRendererProps,
+}: {
+ member: SchemaNode;
+ apiNodeRendererProps: APINodeRenderProps;
+}) {
+ const memberSignature =
+ member.__schema === SetAccessorSchema.name
+ ? `(${(member as SetAccessorSchema).param.toString()}) => void`
+ : (transformSignature(member)?.split(member.name ?? '')[1] ?? member.signature);
+
+ const { renderers } = apiNodeRendererProps;
+ const { doc } = member;
+ const returnType = (member as any).returnType;
+ const returnTypeRenderer = returnType && renderers.find((renderer) => renderer.predicate(returnType));
+ const paramTypeHeadings = ['Parameter', 'type', 'default', 'description'];
+ const params = (member as any).params || [(member as any).param];
+ const filePath = apiNodeRendererProps.apiNode.api.location.filePath;
+ const lang = React.useMemo(() => {
+ const langFromFileEnding = filePath?.split('.').pop();
+ if (langFromFileEnding === 'scss' || langFromFileEnding === 'sass') return 'css';
+ if (langFromFileEnding === 'mdx') return 'md';
+ return langFromFileEnding;
+ }, [filePath]);
+
+ return (
+
+
+ {description &&
+ {icon && (
+
+
+ 
+
+ )}
+
+ {name}
+
+ {description}
}
+ {groupedNodes.map(([type, groupedMembersByType], index) => {
+ const skipRenderingTable = type === 'methods' || type === 'constructors' || type === 'setters';
+ const _headings = (type && headings[type]) || headings.default;
+
+ return (
+
+ {!skipRenderingTable && (
+
+ );
+ })}
+
+
+ )}
+ {skipRenderingTable && (
+
+ {type === 'enum members' ? 'Members' : pluralize(type ?? 'properties')}
+
+
+
+
+ {groupedMembersByType.map((member) => (
+
+ )}
+
+
+ );
+}
diff --git a/components/overview/renderers/grouped-schema-nodes-overview-summary/index.ts b/components/overview/renderers/grouped-schema-nodes-overview-summary/index.ts
new file mode 100644
index 0000000..463fd99
--- /dev/null
+++ b/components/overview/renderers/grouped-schema-nodes-overview-summary/index.ts
@@ -0,0 +1,2 @@
+export { SchemaNodesSummary } from './grouped-schema-nodes-overview-summary';
+export type { SchemaNodesSummaryProps } from './grouped-schema-nodes-overview-summary';
diff --git a/components/renderers/api-node-details/api-node-details.module.scss b/components/renderers/api-node-details/api-node-details.module.scss
new file mode 100644
index 0000000..b8fafb1
--- /dev/null
+++ b/components/renderers/api-node-details/api-node-details.module.scss
@@ -0,0 +1,96 @@
+.apiNodeDetailsContainer {
+ padding: 24px 0px;
+ display: flex;
+ height: calc(100% - 40px);
+}
+.apiDetails {
+ overflow-y: auto;
+ width: 100%;
+ padding-right: 16px;
+}
+.schemaNodesIndex {
+ flex: 0;
+ height: 100%;
+}
+.apiNodeDetailsNameContainer {
+ display: flex;
+ flex-direction: row;
+ padding-bottom: 24px;
+ align-items: center;
+}
+.apiNodeDetailsName {
+ padding-right: 8px;
+}
+.apiTypeIcon {
+ img {
+ height: 18px;
+ }
+ padding-right: 8px;
+}
+.codeEditorContainer {
+ transition: min-height 0.4s ease-in-out;
+ > section {
+ overflow: hidden;
+ border-radius: 8px;
+ // to prevent monaco from overflowing from its parent
+ width: unset !important;
+ }
+}
+.editor {
+ background-color: var(--editor-bg-color, #1e1e1e);
+}
+.apiNodeDetailsComment {
+ font-size: var(--bit-p-xs);
+ padding-bottom: 24px;
+}
+.apiNodeDetailsSignatureContainer {
+ display: flex;
+ flex-direction: column;
+ padding-bottom: 24px;
+}
+.apiNodeDetailsExample {
+ padding-bottom: 24px;
+}
+.apiNodeDetailsExampleTitle {
+ padding: 16px 0px;
+}
+.apiNodeImplementationDrawer {
+ width: 100%;
+}
+.apiNodeDetailsLocationContainer {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ line-height: 16px;
+ padding-bottom: 24px;
+}
+
+.apiNodeImplementationCodeView {
+ padding: 16px 0px;
+ > h1 {
+ display: none !important;
+ }
+}
+.apiNodeDetailsLocation {
+ display: flex;
+ width: 100%;
+}
+.apiNodeDetailsLocationIcon {
+ display: flex;
+ padding-right: 8px;
+ img {
+ height: 14px;
+ }
+}
+.apiNodeDetailsLocationLink {
+ max-width: fit-content;
+ font-size: var(--bit-p-xs);
+}
+.apiNodeDetailsMembersContainer {
+ padding-bottom: 16px;
+}
+
+.apiNodeDetailsLink {
+ font-size: var(--bit-p-xs);
+ padding-bottom: 24px;
+}
diff --git a/components/renderers/api-node-details/api-node-details.tsx b/components/renderers/api-node-details/api-node-details.tsx
new file mode 100644
index 0000000..6fec2ce
--- /dev/null
+++ b/components/renderers/api-node-details/api-node-details.tsx
@@ -0,0 +1,338 @@
+import React, { useState, useRef, useCallback } from 'react';
+import { H6 } from '@teambit/documenter.ui.heading';
+import { CodeEditor, useCodeEditor } from '@teambit/code.ui.code-editor';
+import { useLocation } from '@teambit/base-react.navigation.link';
+import { defaultCodeEditorOptions } from '@teambit/api-reference.utils.code-editor-options';
+import classnames from 'classnames';
+import type { APINodeRenderProps } from '@teambit/api-reference.models.api-node-renderer';
+import { useQuery } from '@teambit/ui-foundation.ui.react-router.use-query';
+import type { APIRefQueryParams } from '@teambit/api-reference.hooks.use-api-ref-url';
+import { useNavigate } from 'react-router-dom';
+import type { APINode } from '@teambit/api-reference.models.api-reference-model';
+import { SchemaNodesIndex } from '@teambit/api-reference.renderers.schema-nodes-index';
+
+import { extractCodeBlock } from './extract-code-block';
+import styles from './api-node-details.module.scss';
+
+const INDEX_THRESHOLD_WIDTH = 600;
+
+export type APINodeDetailsProps = APINodeRenderProps & {
+ displaySignature?: string;
+ options?: {
+ hideIndex?: boolean;
+ };
+};
+
+export function APINodeDetails({
+ apiNode: {
+ api: {
+ name,
+ signature: defaultSignature,
+ doc,
+ location: { filePath },
+ },
+ },
+ displaySignature,
+ children,
+ // eslint-disable-next-line @typescript-eslint/no-unused-vars
+ renderers,
+ apiRefModel,
+ options,
+ ...rest
+}: APINodeDetailsProps) {
+ const routerLocation = useLocation();
+ const query = useQuery();
+ const navigate = useNavigate();
+ const Editor = useCodeEditor();
+
+ const signatureEditorRef = useRef
+
+
+ {member.name}
+ {memberSignature && (
+
+
+ {memberSignature}
+
+
+ )}
+
+
+
+
+ {doc?.comment &&
+ {doc?.comment || ''}
}
+ {params.length > 0 && (
+
+
+ )}
+ {returnType && (
+
+
+ )}
+ Returns
+ {(returnTypeRenderer && ( +{returnType.toString()}
}
+
+
+ );
+}
diff --git a/components/renderers/api-node-details/extract-code-block.spec.ts b/components/renderers/api-node-details/extract-code-block.spec.ts
new file mode 100644
index 0000000..590e49f
--- /dev/null
+++ b/components/renderers/api-node-details/extract-code-block.spec.ts
@@ -0,0 +1,21 @@
+import { extractCodeBlock } from './extract-code-block';
+
+describe('extractCodeBlock', () => {
+ it('should extract code block with language specifier', () => {
+ const text = '```typescript\nconst foo = "bar";\n```';
+ const result = extractCodeBlock(text);
+ expect(result).toEqual({ lang: 'typescript', code: 'const foo = "bar";\n' });
+ });
+
+ it('should extract code block without language specifier', () => {
+ const text = '```\nconst foo = "bar";\n```';
+ const result = extractCodeBlock(text);
+ expect(result).toEqual({ lang: '', code: 'const foo = "bar";\n' });
+ });
+
+ it('should return null if no code block is found', () => {
+ const text = 'const foo = "bar";';
+ const result = extractCodeBlock(text);
+ expect(result).toBeNull();
+ });
+});
diff --git a/components/renderers/api-node-details/extract-code-block.ts b/components/renderers/api-node-details/extract-code-block.ts
new file mode 100644
index 0000000..d961ab1
--- /dev/null
+++ b/components/renderers/api-node-details/extract-code-block.ts
@@ -0,0 +1,23 @@
+/**
+ * Extracts the code block and its language specifier enclosed between triple backticks (```) from a given text string.
+ *
+ * @param text - The text string from which to extract the code block.
+ *
+ * @returns An object containing the extracted code and language specifier, or null if no match is found.
+ */
+export function extractCodeBlock(text: string): { lang: string; code: string } | null {
+ let processedText = text;
+ if (text.endsWith(';') && !text.endsWith('```')) {
+ processedText = text.slice(0, -1) + '```';
+ }
+ const regex = /```([\w+-]*)\s*([\s\S]*?)```/;
+
+ const match = processedText.match(regex);
+
+ if (match) {
+ const lang = match[1];
+ const code = match[2];
+ return { lang, code };
+ }
+ return null;
+}
diff --git a/components/renderers/api-node-details/index.ts b/components/renderers/api-node-details/index.ts
new file mode 100644
index 0000000..f1d9dd8
--- /dev/null
+++ b/components/renderers/api-node-details/index.ts
@@ -0,0 +1,2 @@
+export { APINodeDetails, APINodeDetailsProps } from './api-node-details';
+export { extractCodeBlock } from './extract-code-block';
diff --git a/components/renderers/class/class.renderer.module.scss b/components/renderers/class/class.renderer.module.scss
new file mode 100644
index 0000000..1ffb193
--- /dev/null
+++ b/components/renderers/class/class.renderer.module.scss
@@ -0,0 +1,17 @@
+.members {
+ display: flex;
+ flex-direction: column;
+ gap: 20px;
+}
+
+.decorators {
+ display: flex;
+ flex-direction: column;
+ gap: 18px;
+}
+
+.decoratorsTitle {
+ font-size: var(--bit-p-lg, '18px');
+ font-weight: 500;
+ text-transform: capitalize;
+}
diff --git a/components/renderers/class/class.renderer.tsx b/components/renderers/class/class.renderer.tsx
new file mode 100644
index 0000000..6622464
--- /dev/null
+++ b/components/renderers/class/class.renderer.tsx
@@ -0,0 +1,85 @@
+import React from 'react';
+import { ClassSchema } from '@teambit/semantics.entities.semantic-schema';
+import type { APINodeRenderProps, APINodeRenderer } from '@teambit/api-reference.models.api-node-renderer';
+import { APINodeDetails } from '@teambit/api-reference.renderers.api-node-details';
+import { GroupedSchemaNodesSummary } from '@teambit/api-reference.renderers.grouped-schema-nodes-summary';
+import { SchemaNodesSummary } from '@teambit/api-reference.overview.renderers.grouped-schema-nodes-overview-summary';
+import styles from './class.renderer.module.scss';
+
+export const classRenderer: APINodeRenderer = {
+ predicate: (node) => node.__schema === ClassSchema.name,
+ Component: ClassComponent,
+ OverviewComponent: ClassOverviewComponent,
+ nodeType: 'Classes',
+ icon: { name: 'Class', url: 'https://static.bit.dev/api-reference/class.svg' },
+ default: true,
+};
+
+function ClassComponent(props: APINodeRenderProps) {
+ const {
+ apiNode: { api },
+ metadata,
+ renderers,
+ // depth
+ } = props;
+ const classNode = api as ClassSchema;
+ const { extendsNodes, implementNodes, signature, members, decorators } = classNode;
+
+ if (metadata?.columnView?.[api.__schema]) {
+ // todo handle when recursively rendering a class
+ return
+ {comment &&
+ {!options?.hideIndex && !indexHidden && (
+ {comment}
}
+ {linkComment && (
+
+ {linkPlaceholder && {linkPlaceholder}: }
+
+ {linkURL}
+
+
+ )}
+ {signature && (
+
+ {
+ signatureMonacoRef.current = _monaco;
+ }}
+ onMount={handleEditorDidMount(
+ signatureMonacoRef,
+ signatureEditorRef,
+ signatureContainerRef,
+ undefined,
+ (_monaco, _editor) => {
+ routeToAPICmdId.current =
+ _editor.addCommand(0, () => {
+ apiUrlToRoute.current && navigate(apiUrlToRoute.current);
+ }) ?? null;
+
+ if (!hoverProviderDispose.current) {
+ hoverProviderDispose.current = _monaco.languages.registerHoverProvider('typescript', {
+ provideHover: hoverProvider,
+ });
+ }
+ },
+ () => {
+ hoverProviderDispose.current?.dispose();
+ }
+ )}
+ />
+
+ )}
+ {example && example.comment && (
+
+
+ )}
+ {children}
+ Example
+
+ {
+ exampleMonacoRef.current = _monaco;
+ }}
+ onMount={handleEditorDidMount(exampleMonacoRef, exampleEditorRef, exampleContainerRef)}
+ />
+
+
+ {hasDecorators && (
+
+
+
+ )}
+ Decorators
+ {decorators.map((decorator) => {
+ const decoratorRenderer = renderers.find((renderer) => renderer.predicate(decorator));
+ const DecoratorComponent = decoratorRenderer?.Component;
+ if (!DecoratorComponent) return null;
+ return (
+
+ {
+ return (
+
+ );
+}
diff --git a/components/renderers/decorator/index.ts b/components/renderers/decorator/index.ts
new file mode 100644
index 0000000..888943f
--- /dev/null
+++ b/components/renderers/decorator/index.ts
@@ -0,0 +1 @@
+export { decoratorRenderer } from './decorator.renderer';
diff --git a/components/renderers/default-node-renderers/index.ts b/components/renderers/default-node-renderers/index.ts
new file mode 100644
index 0000000..1c3cd14
--- /dev/null
+++ b/components/renderers/default-node-renderers/index.ts
@@ -0,0 +1,60 @@
+import { classRenderer } from '@teambit/api-reference.renderers.class';
+import { interfaceRenderer } from '@teambit/api-reference.renderers.interface';
+import { typeRenderer } from '@teambit/api-reference.renderers.type';
+import { functionRenderer } from '@teambit/api-reference.renderers.function';
+import { enumRenderer } from '@teambit/api-reference.renderers.enum';
+import { variableRenderer } from '@teambit/api-reference.renderers.variable';
+import { unresolvedRenderer } from '@teambit/api-reference.renderers.unresolved';
+import { typeRefRenderer } from '@teambit/api-reference.renderers.type-ref';
+import { typeUnionRenderer } from '@teambit/api-reference.renderers.type-union';
+import { typeIntersectionRenderer } from '@teambit/api-reference.renderers.type-intersection';
+import { typeLiteralRenderer } from '@teambit/api-reference.renderers.type-literal';
+import { parameterRenderer } from '@teambit/api-reference.renderers.parameter';
+import { inferenceTypeRenderer } from '@teambit/api-reference.renderers.inference-type';
+import { typeArrayRenderer } from '@teambit/api-reference.renderers.type-array';
+import { tupleTypeRenderer } from '@teambit/api-reference.renderers.tuple-type';
+import { thisRenderer } from '@teambit/api-reference.renderers.this';
+import { decoratorRenderer } from '@teambit/api-reference.renderers.decorator';
+import type { APINodeRenderer } from '@teambit/api-reference.models.api-node-renderer';
+
+export const defaultNodeRenderers: APINodeRenderer[] = [
+ classRenderer,
+ interfaceRenderer,
+ typeRenderer,
+ functionRenderer,
+ enumRenderer,
+ variableRenderer,
+ unresolvedRenderer,
+ typeRefRenderer,
+ typeUnionRenderer,
+ typeIntersectionRenderer,
+ typeLiteralRenderer,
+ parameterRenderer,
+ inferenceTypeRenderer,
+ typeArrayRenderer,
+ tupleTypeRenderer,
+ thisRenderer,
+ decoratorRenderer,
+];
+
+export {
+ classRenderer,
+ interfaceRenderer,
+ typeRenderer,
+ functionRenderer,
+ enumRenderer,
+ variableRenderer,
+ unresolvedRenderer,
+ typeRefRenderer,
+ typeUnionRenderer,
+ typeIntersectionRenderer,
+ typeLiteralRenderer,
+ parameterRenderer,
+ inferenceTypeRenderer,
+ typeArrayRenderer,
+ tupleTypeRenderer,
+ thisRenderer,
+ decoratorRenderer,
+};
+
+export default defaultNodeRenderers;
diff --git a/components/renderers/enum/enum.renderer.module.scss b/components/renderers/enum/enum.renderer.module.scss
new file mode 100644
index 0000000..e69de29
diff --git a/components/renderers/enum/enum.renderer.tsx b/components/renderers/enum/enum.renderer.tsx
new file mode 100644
index 0000000..284076d
--- /dev/null
+++ b/components/renderers/enum/enum.renderer.tsx
@@ -0,0 +1,50 @@
+import React from 'react';
+import { EnumSchema } from '@teambit/semantics.entities.semantic-schema';
+import type { APINodeRenderProps, APINodeRenderer } from '@teambit/api-reference.models.api-node-renderer';
+import { APINodeDetails } from '@teambit/api-reference.renderers.api-node-details';
+import { GroupedSchemaNodesSummary } from '@teambit/api-reference.renderers.grouped-schema-nodes-summary';
+import { SchemaNodesSummary } from '@teambit/api-reference.overview.renderers.grouped-schema-nodes-overview-summary';
+
+export const enumRenderer: APINodeRenderer = {
+ predicate: (node) => node.__schema === EnumSchema.name,
+ Component: EnumComponent,
+ OverviewComponent: EnumOverviewComponent,
+ nodeType: 'Enums',
+ icon: { name: 'Enum', url: 'https://static.bit.dev/api-reference/array.svg' },
+ default: true,
+};
+
+function EnumComponent(props: APINodeRenderProps) {
+ const {
+ apiNode: { api },
+ } = props;
+ const enumNode = api as EnumSchema;
+ const { members } = enumNode;
+
+ return (
+ @{name}
+ {(args?.length && (
+ {api.toString()}
;
+ }
+
+ const Params = params.map((param) => {
+ const paramRenderer = renderers.find((renderer) => renderer.predicate(param));
+
+ const ParamComponent = paramRenderer?.Component ? (
+
+
+ )}
+ {Params.length > 0 && (
+ Type Parameters
+
+ {typeParams.map((typeParam) => {
+ return (
+
+
+ {typeParam}
+
+ );
+ })}
+
+
+ )}
+ Parameters
+
+
+ Returns
+ {returnDocComment && {returnDocComment}
}
+
+ {(returnTypeRenderer && (
+
+ {returnType.toString()}
}
+
+ {groupedNodes.map(([type, groupedMembersByType], index) => {
+ const skip = skipNode && type && skipNode(type, groupedMembersByType as any);
+ const skipRenderingTable = type === 'methods' || type === 'constructors' || type === 'setters';
+ const typeId = type && encodeURIComponent(type);
+ const _headings = (type && headings[type]) || headings.default;
+
+ if (skip) return null;
+
+ return (
+
+ );
+}
diff --git a/components/renderers/grouped-schema-nodes-summary/index.ts b/components/renderers/grouped-schema-nodes-summary/index.ts
new file mode 100644
index 0000000..3aa19cb
--- /dev/null
+++ b/components/renderers/grouped-schema-nodes-summary/index.ts
@@ -0,0 +1 @@
+export { GroupedSchemaNodesSummaryProps, GroupedSchemaNodesSummary } from './grouped-schema-nodes-summary';
diff --git a/components/renderers/inference-type/index.ts b/components/renderers/inference-type/index.ts
new file mode 100644
index 0000000..7a4f06d
--- /dev/null
+++ b/components/renderers/inference-type/index.ts
@@ -0,0 +1 @@
+export { inferenceTypeRenderer } from './inference-type.renderer';
diff --git a/components/renderers/inference-type/inference-type.module.scss b/components/renderers/inference-type/inference-type.module.scss
new file mode 100644
index 0000000..51e73ff
--- /dev/null
+++ b/components/renderers/inference-type/inference-type.module.scss
@@ -0,0 +1,37 @@
+.inferenceWrapper {
+ position: relative;
+
+ > pre {
+ // override syntax highlighter inline styles so the type box is theme-aware
+ background: var(--surface01-color, #f1f2f4) !important;
+ color: var(--bit-accent-text, #6c5ce7) !important;
+
+ > code {
+ // override syntax highlighter code font size + force inherit so default text follows the theme
+ font-size: var(--bit-p-xxs, 12px) !important;
+ background: transparent !important;
+ color: inherit !important;
+ }
+ }
+}
+
+.isSpread {
+ > span {
+ font-style: italic;
+ }
+}
+
+.syntaxTooltip {
+ background-color: var(--surface01-color, rgb(241, 242, 244));
+}
+
+.infoIcon {
+ font-style: normal;
+ padding-left: 4px;
+}
+
+.infoIconWrapper {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
diff --git a/components/renderers/inference-type/inference-type.renderer.tsx b/components/renderers/inference-type/inference-type.renderer.tsx
new file mode 100644
index 0000000..3d82e37
--- /dev/null
+++ b/components/renderers/inference-type/inference-type.renderer.tsx
@@ -0,0 +1,95 @@
+import React from 'react';
+import type { APINodeRenderProps, APINodeRenderer } from '@teambit/api-reference.models.api-node-renderer';
+import { nodeStyles } from '@teambit/api-reference.models.api-node-renderer';
+import { InferenceTypeSchema } from '@teambit/semantics.entities.semantic-schema';
+import SyntaxHighlighter from 'react-syntax-highlighter/dist/esm/prism-light';
+import tsxSyntax from 'react-syntax-highlighter/dist/esm/languages/prism/tsx';
+import defaultTheme from '@teambit/api-reference.utils.custom-prism-syntax-highlighter-theme';
+import classNames from 'classnames';
+import { Icon } from '@teambit/evangelist.elements.icon';
+import { Tooltip } from '@teambit/design.ui.tooltip';
+
+import styles from './inference-type.module.scss';
+
+SyntaxHighlighter.registerLanguage('tsx', tsxSyntax);
+
+export const inferenceTypeRenderer: APINodeRenderer = {
+ predicate: (node) => node.__schema === InferenceTypeSchema.name,
+ Component: InferenceTypeComponent,
+ nodeType: 'InferenceType',
+ default: true,
+};
+
+function InferenceTypeComponent(props: APINodeRenderProps) {
+ const {
+ apiNode: { api },
+ className,
+ metadata,
+ } = props;
+
+ const inferenceTypeNode = api as InferenceTypeSchema;
+ const isSpread = inferenceTypeNode.isSpread;
+ const typeToRender = (inferenceTypeNode.type || inferenceTypeNode.name) ?? '';
+
+ const maybeObject = typeToRender.includes('{');
+ const disableHighlight = metadata?.[inferenceTypeNode.__schema]?.disableHighlight || !maybeObject;
+
+ const lang = React.useMemo(() => {
+ const langFromFileEnding = api.location.filePath?.split('.').pop();
+ if (langFromFileEnding === 'scss' || langFromFileEnding === 'sass') return 'css';
+ if (langFromFileEnding === 'mdx') return 'md';
+ return langFromFileEnding;
+ }, [api.location.filePath]);
+
+ return (
+
+ {type && (
+
+ );
+ })}
+
+ {type}
+
+ )}
+ {!skipRenderingTable && (
+
+
+ )}
+ {skipRenderingTable &&
+ groupedMembersByType.map((member) => {
+ if (!type) return null;
+ const params =
+ (member as any).params ||
+ (member as any).props ||
+ ((member as any).param && [(member as any).param]) ||
+ [];
+
+ return (
+
+ {isSpread && (
+
+ {typeToRender}
+
+ }
+ >
+
+ )}
+ {!isSpread &&
+ (!disableHighlight ? (
+
+ {typeToRender}
+
+ ) : (
+ inferenceTypeNode.type || inferenceTypeNode.name
+ ))}
+
+ );
+}
diff --git a/components/renderers/interface/index.ts b/components/renderers/interface/index.ts
new file mode 100644
index 0000000..17e697e
--- /dev/null
+++ b/components/renderers/interface/index.ts
@@ -0,0 +1 @@
+export { interfaceRenderer } from './interface.renderer';
diff --git a/components/renderers/interface/interface.renderer.module.scss b/components/renderers/interface/interface.renderer.module.scss
new file mode 100644
index 0000000..e69de29
diff --git a/components/renderers/interface/interface.renderer.tsx b/components/renderers/interface/interface.renderer.tsx
new file mode 100644
index 0000000..88ca213
--- /dev/null
+++ b/components/renderers/interface/interface.renderer.tsx
@@ -0,0 +1,53 @@
+import React from 'react';
+import { InterfaceSchema } from '@teambit/semantics.entities.semantic-schema';
+import type { APINodeRenderProps, APINodeRenderer } from '@teambit/api-reference.models.api-node-renderer';
+import { APINodeDetails } from '@teambit/api-reference.renderers.api-node-details';
+import { GroupedSchemaNodesSummary } from '@teambit/api-reference.renderers.grouped-schema-nodes-summary';
+import { SchemaNodesSummary } from '@teambit/api-reference.overview.renderers.grouped-schema-nodes-overview-summary';
+
+export const interfaceRenderer: APINodeRenderer = {
+ predicate: (node) => node.__schema === InterfaceSchema.name,
+ Component: InterfaceComponent,
+ OverviewComponent: InterfaceOverviewComponent,
+ nodeType: 'Interfaces',
+ icon: { name: 'Interface', url: 'https://static.bit.dev/api-reference/interface.svg' },
+ default: true,
+};
+
+function InterfaceComponent(props: APINodeRenderProps) {
+ const {
+ apiNode: { api },
+ } = props;
+ const interfaceNode = api as InterfaceSchema;
+ const { extendsNodes, signature, members } = interfaceNode;
+ const extendsSignature = extendsNodes?.[0]?.name;
+ const displaySignature = `${signature}${(extendsSignature && ' '.concat(extendsSignature)) || ''}`;
+
+ return (
+
+ {'...rest'}
+
+ {bindingNode.toString()}
;
+
+ return (
+ {type.toString()}
+ );
+
+ const ParameterTypeTable = () => {
+ const paramTypeHeadings = ['name', 'type', 'default', 'description'];
+
+ return (
+ {api.toString()}
;
+ }
+
+ const paramRenderer = reactProps && renderers.find((renderer) => renderer.predicate(reactProps));
+ const paramRef = reactProps?.type;
+ const paramRefRenderer = paramRef && renderers.find((renderer) => renderer.predicate(paramRef));
+ const PropsRefComponent =
+ paramRef && paramRefRenderer?.Component ? (
+
+
+ )}
+ {ParamComponent && (
+ Type Parameters
+
+ {typeParams.map((typeParam) => {
+ return (
+
+
+ {typeParam}
+
+ );
+ })}
+
+
+ )}
+ Props
+ {PropsRefComponent}
+ {ParamComponent}
+
+
+ Returns
+ {docComment && {docComment}
}
+
+ {(returnTypeRenderer && (
+
+ {returnType.toString()}
}
+
+
+ );
+}
diff --git a/components/renderers/schema-node-member-summary/enum-member-summary.module.scss b/components/renderers/schema-node-member-summary/enum-member-summary.module.scss
new file mode 100644
index 0000000..b73e0b9
--- /dev/null
+++ b/components/renderers/schema-node-member-summary/enum-member-summary.module.scss
@@ -0,0 +1,16 @@
+.signature {
+ display: flex;
+ margin-right: 5px;
+ font-family: Roboto mono;
+ font-size: var(--bit-p-xxs);
+ word-break: normal;
+ color: rgb(57, 115, 0);
+}
+
+.name {
+ word-break: normal;
+}
+
+.row {
+ grid-template-columns: 1fr 2fr 1fr;
+}
diff --git a/components/renderers/schema-node-member-summary/enum-member-summary.tsx b/components/renderers/schema-node-member-summary/enum-member-summary.tsx
new file mode 100644
index 0000000..c59f6a0
--- /dev/null
+++ b/components/renderers/schema-node-member-summary/enum-member-summary.tsx
@@ -0,0 +1,59 @@
+import type { HTMLAttributes } from 'react';
+import React from 'react';
+import type { EnumMemberSchema } from '@teambit/semantics.entities.semantic-schema';
+import { TableRow } from '@teambit/documenter.ui.table-row';
+import classnames from 'classnames';
+import type { APINodeRenderProps } from '@teambit/api-reference.models.api-node-renderer';
+import { transformSignature } from '@teambit/api-reference.utils.schema-node-signature-transform';
+import { trackedElementClassName } from './index';
+
+import styles from './enum-member-summary.module.scss';
+
+export type EnumMemberSummaryProps = {
+ groupElementClassName?: string;
+ node: EnumMemberSchema;
+ headings: string[];
+ name: string;
+ apiNodeRendererProps: APINodeRenderProps;
+} & HTMLAttributes
+
+ {description &&
+ {icon && (
+
+
+
+
+ )}
+
+ {api.name}
+
+ {description}
}
+ {ParamComponent && (
+
+
+ )}
+ Props
+ {PropsRefComponent}
+ {ParamComponent}
+
+
+ Returns
+ {docComment && {docComment}
}
+
+ {(returnTypeRenderer && (
+
+ {returnType.toString()}
}
+ {signature}
,
+ }}
+ row={{
+ name,
+ description: doc?.comment || '',
+ required: false,
+ type: '',
+ }}
+ />
+ );
+}
diff --git a/components/renderers/schema-node-member-summary/function-node-summary.module.scss b/components/renderers/schema-node-member-summary/function-node-summary.module.scss
new file mode 100644
index 0000000..e46a098
--- /dev/null
+++ b/components/renderers/schema-node-member-summary/function-node-summary.module.scss
@@ -0,0 +1,66 @@
+.summaryContainer {
+ padding: 0px 24px;
+ margin-bottom: 16px;
+ border-radius: 8px;
+ background-color: var(--surface01-color, #f7f7f5a1);
+ display: flex;
+ flex-direction: column;
+ gap: 16px;
+}
+
+.signatureTitle {
+ color: var(--on-background-color);
+
+ > pre {
+ // override syntax highlighter inline styles so the signature box is theme-aware
+ background: var(--surface01-color, #f1f2f4) !important;
+ color: var(--bit-accent-text, #6c5ce7) !important;
+
+ > code {
+ // override syntax highlighter code font size + force inherit so default text follows the theme
+ font-size: var(--bit-p-xxs, 12px) !important;
+ background: transparent !important;
+ color: inherit !important;
+ }
+ }
+}
+
+.description {
+ font-size: 14px;
+ margin-bottom: 16px;
+ font-style: italic;
+}
+
+.subtitle {
+ font-weight: 500;
+ text-transform: uppercase;
+ font-size: var(--bit-p-xxs);
+ padding-right: 16px;
+ margin-bottom: 12px;
+}
+
+.returnContainer {
+ margin-bottom: 16px;
+}
+
+.functionName {
+ font-size: var(--bit-p-md);
+ font-weight: 500;
+ padding: 16px 0px 8px 0px;
+}
+
+.hide {
+ padding: 8px 0px !important;
+}
+
+.paramHeading {
+ padding: 8px 0px 16px 0px;
+}
+.apiNodeDetailsExample {
+ padding-bottom: 24px;
+}
+.apiNodeDetailsExampleTitle {
+ padding: 16px 0px;
+ font-weight: bold;
+ font-size: var(--bit-p-xs, '14px');
+}
diff --git a/components/renderers/schema-node-member-summary/function-node-summary.tsx b/components/renderers/schema-node-member-summary/function-node-summary.tsx
new file mode 100644
index 0000000..77b9b1f
--- /dev/null
+++ b/components/renderers/schema-node-member-summary/function-node-summary.tsx
@@ -0,0 +1,138 @@
+import type { HTMLAttributes } from 'react';
+import React, { useMemo } from 'react';
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
+import type { SchemaNode } from '@teambit/semantics.entities.semantic-schema';
+import { SetAccessorSchema } from '@teambit/semantics.entities.semantic-schema';
+import { transformSignature } from '@teambit/api-reference.utils.schema-node-signature-transform';
+import type { APIReferenceModel } from '@teambit/api-reference.models.api-reference-model';
+import type { APINodeRenderProps } from '@teambit/api-reference.models.api-node-renderer';
+import { nodeStyles } from '@teambit/api-reference.models.api-node-renderer';
+import { parameterRenderer as defaultParamRenderer } from '@teambit/api-reference.renderers.parameter';
+import { HeadingRow } from '@teambit/documenter.ui.table-heading-row';
+import defaultTheme from '@teambit/api-reference.utils.custom-prism-syntax-highlighter-theme';
+import { extractCodeBlock } from '@teambit/api-reference.renderers.api-node-details';
+import classNames from 'classnames';
+
+import styles from './function-node-summary.module.scss';
+
+export type FunctionNodeSummaryProps = {
+ groupElementClassName?: string;
+ node: SchemaNode;
+ name: string;
+ hideName?: boolean;
+ headings: string[];
+ apiRefModel: APIReferenceModel;
+ returnType?: SchemaNode;
+ params: SchemaNode[];
+ apiNodeRendererProps: APINodeRenderProps;
+} & HTMLAttributes
+
+ );
+}
diff --git a/components/renderers/schema-node-member-summary/index.ts b/components/renderers/schema-node-member-summary/index.ts
new file mode 100644
index 0000000..0b0bf55
--- /dev/null
+++ b/components/renderers/schema-node-member-summary/index.ts
@@ -0,0 +1,4 @@
+export { EnumMemberSummaryProps, EnumMemberSummary } from './enum-member-summary';
+export { VariableNodeSummary, VariableNodeSummaryProps } from './variable-node-summary';
+export { FunctionNodeSummary, FunctionNodeSummaryProps } from './function-node-summary';
+export const trackedElementClassName = 'tracked-element';
diff --git a/components/renderers/schema-node-member-summary/variable-node-summary.module.scss b/components/renderers/schema-node-member-summary/variable-node-summary.module.scss
new file mode 100644
index 0000000..2b620c3
--- /dev/null
+++ b/components/renderers/schema-node-member-summary/variable-node-summary.module.scss
@@ -0,0 +1,20 @@
+.name {
+ word-break: normal;
+}
+
+.node {
+ font-size: var(--bit-p-xs);
+ word-break: normal;
+ position: relative;
+ line-height: 1.2em;
+ background-color: var(--surface01-color, #fffbff);
+ padding: 4px;
+ border-radius: 4px;
+ word-break: keep-all;
+ flex-wrap: wrap;
+}
+
+.row {
+ padding: 8px 0px !important;
+ margin-bottom: 0;
+}
diff --git a/components/renderers/schema-node-member-summary/variable-node-summary.tsx b/components/renderers/schema-node-member-summary/variable-node-summary.tsx
new file mode 100644
index 0000000..2cdb235
--- /dev/null
+++ b/components/renderers/schema-node-member-summary/variable-node-summary.tsx
@@ -0,0 +1,82 @@
+import type { HTMLAttributes } from 'react';
+import React from 'react';
+import type { IndexSignatureSchema, SchemaNode } from '@teambit/semantics.entities.semantic-schema';
+import { TableRow, DefaultValueCell } from '@teambit/documenter.ui.table-row';
+import classnames from 'classnames';
+import type { APINodeRenderProps } from '@teambit/api-reference.models.api-node-renderer';
+import { nodeStyles } from '@teambit/api-reference.models.api-node-renderer';
+import { trackedElementClassName } from './index';
+
+import styles from './variable-node-summary.module.scss';
+
+export type VariableNodeSummaryProps = {
+ groupElementClassName?: string;
+ node: SchemaNode;
+ headings: string[];
+ name: string;
+ type?: SchemaNode;
+ isOptional?: boolean;
+ apiNodeRendererProps: APINodeRenderProps;
+ defaultValue?: string;
+} & HTMLAttributes
+ {
+ {signature}
+
+ )}
+ {example && example.comment && (
+
+ {params.length > 0 && (
+ {hideName ? '' : name}
}
+ {docs && {docs || ''}
}
+ {signature && (
+
+
+ {extractCodeBlock(example.comment)?.code || example.comment}
+
+
+ )}
+ Example
+
+
+ )}
+ {returnType && (
+
+
+ )}
+ Returns
+ {(returnTypeRenderer && ( +{returnType.toString()}
}
+ {type?.toString()}
;
+
+ return (
+
+
+ );
+}
+
+function groupElements(elements: Element[]) {
+ const grouped = new Map{title}
+ {grouped.map(([group, groupedNodes], groupedIndex) => {
+ if (!group) {
+ return (
+
+ {groupedNodes.map((node, nodeIndex) => {
+ const isActive = node && decodeURIComponent(node) === hash;
+ return (
+
+ );
+ }
+ return (
+
+
+ {node}
+
+
+ );
+ })}
+
+
+ );
+ })}
+
+
+ {decodeURIComponent(group)}
+
+
+
+ {groupedNodes.map((node, nodeIndex) => {
+ const isActive = node && decodeURIComponent(node) === hash;
+
+ return (
+
+
+
+ {node}
+
+
+ );
+ })}
+
+
+ );
+}
+
+function ElementRenderer({ element, ...props }) {
+ const { renderers } = props;
+ const elementRenderer = renderers.find((renderer) => renderer.predicate(element));
+ if (elementRenderer) {
+ return (
+
+
+ {tupleTypeArray.elements.slice(1, -1).map((element, index) => (
+ [
+ {tupleTypeArray.elements[0] && (
+
+
+ )}
+ ,
}
+
+
+ ))}
+ {tupleTypeArray.elements.length > 1 && (
+ ,
+
+
+ )}
+ {tupleTypeArray.elements.length <= 1 &&
+
+ ]
+ ]
}
+
+
+ );
+ }
+
+ return (
+
+ {typeArray.toString()}
+
+ );
+}
diff --git a/components/renderers/type-intersection/index.ts b/components/renderers/type-intersection/index.ts
new file mode 100644
index 0000000..d4d36b2
--- /dev/null
+++ b/components/renderers/type-intersection/index.ts
@@ -0,0 +1 @@
+export { typeIntersectionRenderer } from './type-intersection.renderer';
diff --git a/components/renderers/type-intersection/type-intersection.renderer.module.scss b/components/renderers/type-intersection/type-intersection.renderer.module.scss
new file mode 100644
index 0000000..264a65c
--- /dev/null
+++ b/components/renderers/type-intersection/type-intersection.renderer.module.scss
@@ -0,0 +1,21 @@
+.node {
+ display: flex;
+ flex-direction: column;
+ gap: 24px;
+ font-size: var(--bit-p-m);
+ word-break: normal;
+ color: var(--bit-text-color);
+ padding-bottom: 10px;
+}
+
+.typeTitle {
+ font-size: var(--bit-p-sm);
+ color: var(--bit-accent-primary-color);
+ margin-bottom: 16px;
+ margin-top: 10px;
+}
+
+.typeBody {
+ padding: 8px;
+ border-radius: 5px;
+}
diff --git a/components/renderers/type-intersection/type-intersection.renderer.tsx b/components/renderers/type-intersection/type-intersection.renderer.tsx
new file mode 100644
index 0000000..bb2e29c
--- /dev/null
+++ b/components/renderers/type-intersection/type-intersection.renderer.tsx
@@ -0,0 +1,63 @@
+import React from 'react';
+import type { APINodeRenderProps, APINodeRenderer } from '@teambit/api-reference.models.api-node-renderer';
+import { nodeStyles } from '@teambit/api-reference.models.api-node-renderer';
+import { TypeIntersectionSchema } from '@teambit/semantics.entities.semantic-schema';
+import classnames from 'classnames';
+
+import styles from './type-intersection.renderer.module.scss';
+
+export const typeIntersectionRenderer: APINodeRenderer = {
+ predicate: (node) => node.__schema === TypeIntersectionSchema.name,
+ Component: TypeIntersectionComponent,
+ nodeType: 'TypeIntersection',
+ default: true,
+};
+
+function TypeIntersectionComponent(props: APINodeRenderProps) {
+ const {
+ apiNode: { api },
+ renderers,
+ metadata,
+ } = props;
+
+ const typeNode = api as TypeIntersectionSchema;
+
+ return (
+
+ {typeNode.types.map((type, index) => {
+ const typeRenderer = renderers.find((renderer) => renderer.predicate(type));
+
+ if (typeRenderer) {
+ return (
+
+ );
+}
diff --git a/components/renderers/type-literal/index.ts b/components/renderers/type-literal/index.ts
new file mode 100644
index 0000000..6475af2
--- /dev/null
+++ b/components/renderers/type-literal/index.ts
@@ -0,0 +1 @@
+export { typeLiteralRenderer } from './type-literal.renderer';
diff --git a/components/renderers/type-literal/type-literal.renderer.module.scss b/components/renderers/type-literal/type-literal.renderer.module.scss
new file mode 100644
index 0000000..2aa9986
--- /dev/null
+++ b/components/renderers/type-literal/type-literal.renderer.module.scss
@@ -0,0 +1,14 @@
+.container {
+ height: auto;
+}
+
+.node {
+ display: flex;
+ font-size: var(--bit-p-xs);
+ word-break: normal;
+ position: relative;
+ line-height: 1.2em;
+ background-color: var(--surface01-color, #fffbff);
+ padding: 4px;
+ border-radius: 4px;
+}
diff --git a/components/renderers/type-literal/type-literal.renderer.tsx b/components/renderers/type-literal/type-literal.renderer.tsx
new file mode 100644
index 0000000..a0bedfc
--- /dev/null
+++ b/components/renderers/type-literal/type-literal.renderer.tsx
@@ -0,0 +1,62 @@
+import React from 'react';
+import type { APINodeRenderProps, APINodeRenderer } from '@teambit/api-reference.models.api-node-renderer';
+import { nodeStyles } from '@teambit/api-reference.models.api-node-renderer';
+import { copySchemaNode } from '@teambit/api-reference.utils.copy-schema-node';
+import { GroupedSchemaNodesSummary } from '@teambit/api-reference.renderers.grouped-schema-nodes-summary';
+import { TypeLiteralSchema } from '@teambit/semantics.entities.semantic-schema';
+import { SchemaNodesSummary } from '@teambit/api-reference.overview.renderers.grouped-schema-nodes-overview-summary';
+
+export const typeLiteralRenderer: APINodeRenderer = {
+ predicate: (node) => node.__schema === TypeLiteralSchema.name,
+ Component: TypeLiteralComponent,
+ OverviewComponent: TypeLiteralOverviewComponent,
+ nodeType: 'TypeLiteral',
+ default: true,
+};
+
+function TypeLiteralComponent(props: APINodeRenderProps) {
+ const {
+ apiNode: { api },
+ } = props;
+ const typeLiteralNode = api as TypeLiteralSchema;
+
+ if (props.metadata?.[api.__schema]?.columnView) {
+ return
+ {/* {type.name &&
+ );
+ }
+
+ return (
+ {type.name}
} */}
+ {
+
+
+ }
+
+ {type.toString()}
+ {typeNode.types.length > 1 && index !== typeNode.types.length - 1 ? (
+
+ );
+ })}
+
+ {'&'}
+
+ ) : null}
+ {api.toString()}
;
+ }
+
+ const members = typeLiteralNode.getNodes().map((node) => {
+ if (node.signature) return node;
+ return copySchemaNode(node, { signature: node.toString() });
+ });
+ return (
+
+ {'<'}
+ {args.map((arg) => arg)}
+ {'>'}
+
+
+ 
+
+ )}
+ {children}
+
+
+
+ {name}
+ {children}
+
+ );
+}
+
+function getExportedTypeUrlFromAnotherComp({
+ componentId,
+ selectedAPI,
+}: {
+ componentId: ComponentID;
+ selectedAPI: string;
+}) {
+ const componentUrl = ComponentUrl.toUrl(componentId, { useLocationOrigin: false, includeVersion: true });
+ const [componentIdUrl, versionQuery] = componentUrl.split('?');
+
+ const exportedTypeUrl = `${componentIdUrl}/~api-reference?selectedAPI=${encodeURIComponent(selectedAPI)}${
+ versionQuery ? `&${versionQuery}` : ''
+ }`;
+
+ return exportedTypeUrl;
+}
diff --git a/components/renderers/type-union/index.ts b/components/renderers/type-union/index.ts
new file mode 100644
index 0000000..c281662
--- /dev/null
+++ b/components/renderers/type-union/index.ts
@@ -0,0 +1 @@
+export { typeUnionRenderer } from './type-union.renderer';
diff --git a/components/renderers/type-union/type-union.renderer.module.scss b/components/renderers/type-union/type-union.renderer.module.scss
new file mode 100644
index 0000000..0342489
--- /dev/null
+++ b/components/renderers/type-union/type-union.renderer.module.scss
@@ -0,0 +1,11 @@
+.node {
+ display: flex;
+ font-family: Roboto mono;
+ font-size: var(--bit-p-xxs);
+ word-break: normal;
+ color: rgb(57, 115, 0);
+}
+
+.separator {
+ padding: 0px 4px;
+}
diff --git a/components/renderers/type-union/type-union.renderer.tsx b/components/renderers/type-union/type-union.renderer.tsx
new file mode 100644
index 0000000..550a2d1
--- /dev/null
+++ b/components/renderers/type-union/type-union.renderer.tsx
@@ -0,0 +1,60 @@
+import React from 'react';
+import type { APINodeRenderProps, APINodeRenderer } from '@teambit/api-reference.models.api-node-renderer';
+import { nodeStyles } from '@teambit/api-reference.models.api-node-renderer';
+import { TypeUnionSchema } from '@teambit/semantics.entities.semantic-schema';
+
+import classnames from 'classnames';
+import styles from './type-union.renderer.module.scss';
+
+export const typeUnionRenderer: APINodeRenderer = {
+ predicate: (node) => node.__schema === TypeUnionSchema.name,
+ Component: TypeUnionComponent,
+ nodeType: 'TypeUnion',
+ default: true,
+};
+
+function TypeUnionComponent(props: APINodeRenderProps) {
+ const {
+ apiNode: { api },
+ renderers,
+ } = props;
+ const typeNode = api as TypeUnionSchema;
+
+ return (
+
+ {typeNode.types.map((type, index, types) => {
+ const typeRenderer = renderers.find((renderer) => renderer.predicate(type));
+
+ if (typeRenderer) {
+ return (
+
+
+ );
+ }
+
+ return (
+
+ );
+}
diff --git a/components/renderers/type/index.ts b/components/renderers/type/index.ts
new file mode 100644
index 0000000..4934059
--- /dev/null
+++ b/components/renderers/type/index.ts
@@ -0,0 +1 @@
+export { typeRenderer } from './type.renderer';
diff --git a/components/renderers/type/type.renderer.module.scss b/components/renderers/type/type.renderer.module.scss
new file mode 100644
index 0000000..e69de29
diff --git a/components/renderers/type/type.renderer.tsx b/components/renderers/type/type.renderer.tsx
new file mode 100644
index 0000000..ab77562
--- /dev/null
+++ b/components/renderers/type/type.renderer.tsx
@@ -0,0 +1,63 @@
+import React from 'react';
+import { TypeSchema } from '@teambit/semantics.entities.semantic-schema';
+import type { 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 = {
+ predicate: (node) => node.__schema === TypeSchema.name,
+ Component: TypeComponent,
+ nodeType: 'Types',
+ icon: { name: 'Type', url: 'https://static.bit.dev/api-reference/type.svg' },
+ default: true,
+ OverviewComponent: TypeOverviewComponent,
+};
+
+function TypeComponent(props: APINodeRenderProps) {
+ const {
+ apiNode: { api },
+ renderers,
+ metadata,
+ } = props;
+ const typeNode = api as TypeSchema;
+ const { type } = typeNode;
+
+ const subTypeRenderer = renderers.find((renderer) => renderer.predicate(type));
+
+ if (metadata?.[api.__schema]?.columnView) {
+ return (
+ (subTypeRenderer && (
+
+ {'|'}
+
+ ) : null}
+
+ {type.toString()}
+ {types.length > 1 && index !== types.length - 1 ? (
+
+ );
+ })}
+
+ {'|'}
+
+ ) : null}
+ {type.toString()}
+ );
+ }
+ return
+
+ );
+ }
+
+ if (!apiModel || isEmpty) {
+ return
+
+
+ {icon && (
+
+ {SelectedAPIComponent && (
+
+
+
+ )}
+ + {name} +
+View Code
+
+
+
+
+ );
+}
diff --git a/components/sections/api-reference-page/index.ts b/components/sections/api-reference-page/index.ts
new file mode 100644
index 0000000..afac225
--- /dev/null
+++ b/components/sections/api-reference-page/index.ts
@@ -0,0 +1 @@
+export { APIRefPage, APIRefPageProps } from './api-reference-page';
diff --git a/components/sections/api-reference-section/api-reference.section.tsx b/components/sections/api-reference-section/api-reference.section.tsx
new file mode 100644
index 0000000..afc076e
--- /dev/null
+++ b/components/sections/api-reference-section/api-reference.section.tsx
@@ -0,0 +1,18 @@
+import type { Section } from '@teambit/component';
+import type { APIReferenceUI } from '@teambit/api-reference';
+
+export class APIRefSection implements Section {
+ constructor(private apiReferenceUI: APIReferenceUI) {}
+
+ order = 100;
+
+ route = {
+ path: '~api-reference',
+ element: this.apiReferenceUI.getAPIPage(),
+ };
+
+ navigationLink = {
+ href: '~api-reference',
+ children: 'API Reference',
+ };
+}
diff --git a/components/sections/api-reference-section/index.ts b/components/sections/api-reference-section/index.ts
new file mode 100644
index 0000000..d817c81
--- /dev/null
+++ b/components/sections/api-reference-section/index.ts
@@ -0,0 +1 @@
+export { APIRefSection } from './api-reference.section';
diff --git a/components/tagged-exports/index.ts b/components/tagged-exports/index.ts
new file mode 100644
index 0000000..0970a09
--- /dev/null
+++ b/components/tagged-exports/index.ts
@@ -0,0 +1,2 @@
+export { TaggedExports } from './tagged-exports';
+export type { TaggedExportsProps } from './tagged-exports';
diff --git a/components/tagged-exports/tagged-exports.module.scss b/components/tagged-exports/tagged-exports.module.scss
new file mode 100644
index 0000000..8564181
--- /dev/null
+++ b/components/tagged-exports/tagged-exports.module.scss
@@ -0,0 +1,72 @@
+.section {
+ padding: 20px 40px 10px 40px;
+ display: flex;
+ flex-direction: column;
+ gap: 32px;
+}
+
+.title {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: 8px;
+}
+
+.heading {
+ margin-bottom: 0;
+}
+
+.content {
+ display: flex;
+ border-radius: 8px;
+}
+
+// Override hardcoded light background in @teambit/api-reference.renderers.react
+.section :global([class*='reactOverview']) {
+ background-color: var(--surface01-color, rgba(247, 247, 245, 0.63));
+}
+
+.banner {
+ display: flex;
+ align-items: center;
+ width: fit-content;
+ background-color: var(--surface01-color, #f0f0f0);
+ border-radius: 8px;
+ padding: 16px 32px;
+ font-size: 16px;
+ gap: 8px;
+ > img {
+ background-color: none;
+ }
+}
+
+.highlighted {
+ color: var(--primary-color, #6c5ce7);
+ margin: 0px 4px;
+}
+
+.loader {
+ display: flex;
+ flex-direction: column;
+ gap: 16px;
+ color: var(--bit-accent-bg, #f0f0f0);
+}
+
+.loaderTitle {
+ display: flex;
+ gap: 8px;
+}
+
+.apiSkeleton {
+ margin-top: 8px;
+ border-radius: 4px;
+ align-items: center;
+}
+
+.bannerSkeleton {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ padding: 8px;
+ border-radius: 8px;
+}
diff --git a/components/tagged-exports/tagged-exports.tsx b/components/tagged-exports/tagged-exports.tsx
new file mode 100644
index 0000000..5f36f35
--- /dev/null
+++ b/components/tagged-exports/tagged-exports.tsx
@@ -0,0 +1,98 @@
+import React from 'react';
+import { LinkedHeading } from '@teambit/documenter.ui.linked-heading';
+import { Section } from '@teambit/documenter.ui.section';
+import { useAPI } from '@teambit/api-reference.hooks.use-api';
+import { BlockSkeleton, WordSkeleton, CircleSkeleton } from '@teambit/base-ui.loaders.skeleton';
+import { useAPIRefRenderers } from '@teambit/api-reference.hooks.use-api-renderers';
+import { APIReferenceTableOfContents } from '@teambit/api-reference.overview.api-reference-table-of-contents';
+import type { APIReferenceModel } from '@teambit/api-reference.models.api-reference-model';
+import { useThemePicker } from '@teambit/base-react.themes.theme-switcher';
+
+import styles from './tagged-exports.module.scss';
+
+export type TaggedExportsProps = {
+ componentId: string;
+ showBanner?: boolean;
+} & React.HTMLAttributes
+
+
+
+
+
+
+ 
+ API
+
+
+ API
+
+
+ )}
+ {
+
+ {taggedAPIs?.map((taggedAPI, index) => {
+ const OverviewComponent = taggedAPI.renderer.OverviewComponent;
+ // @todo - change this to be non nullable
+ if (!OverviewComponent) return null;
+ return (
+
+ }
+ {showBanner && (
+
+ 
+
+ Use the
+ @exports
+ jsdoc tag to only show relevant APIs with details for your users
+
+
+ )}
+
+
+ Use the
+ @exports
+ jsdoc tag to only show relevant APIs with details for your users
+
+