v1 models

Author: nolannbiron

packages/gitbook/src/components/DocumentView/OpenAPI/style.css

@@ -3,6 +3,10 @@
     @apply flex-1 flex flex-col gap-4 mb-14;
 }
 
+.openapi-models {
+    @apply flex flex-col mb-14 flex-1;
+}
+
 .openapi-columns {
     @apply grid grid-cols-1 lg:grid-cols-2 gap-6 print-mode:grid-cols-1 justify-stretch;
 }
@@ -189,7 +193,7 @@
     @apply select-all font-mono font-normal text-tint-strong;
 }
 
-.openapi-schema-propertyname[data-deprecated="true"] {
+.openapi-schema-propertyname[data-deprecated='true'] {
     @apply line-through opacity-9;
 }
 
@@ -398,7 +402,7 @@
     -ms-overflow-style: none;
 }
 
-.openapi-path-title[data-deprecated="true"] {
+.openapi-path-title[data-deprecated='true'] {
     @apply line-through;
 }
 
@@ -477,7 +481,7 @@
     @apply transition-all;
 }
 
-.openapi-section-toggle[aria-expanded="true"] > svg {
+.openapi-section-toggle[aria-expanded='true'] > svg {
     @apply rotate-90;
 }
 
@@ -500,7 +504,7 @@
     @apply hover:bg-primary-hover whitespace-nowrap font-mono font-normal tabular-nums hover:text-primary cursor-pointer transition-all relative text-[0.813rem] text-tint px-1 border border-transparent rounded;
 }
 
-.openapi-tabs-tab[aria-selected="true"] {
+.openapi-tabs-tab[aria-selected='true'] {
     @apply text-primary after:absolute after:-bottom-2 after:left-0 after:w-full after:h-px after:bg-primary-solid after:transition-all;
 }
 
@@ -538,7 +542,7 @@
     @apply invisible;
 }
 
-.openapi-disclosure-group-trigger[aria-expanded="true"] .openapi-response-description {
+.openapi-disclosure-group-trigger[aria-expanded='true'] .openapi-response-description {
     @apply whitespace-normal;
 }
 
@@ -554,7 +558,7 @@
     @apply pb-2.5;
 }
 
-.openapi-disclosure-group-trigger[aria-expanded="true"] > .openapi-disclosure-group-icon > svg {
+.openapi-disclosure-group-trigger[aria-expanded='true'] > .openapi-disclosure-group-icon > svg {
     @apply rotate-90;
 }
 
@@ -583,19 +587,19 @@
     @apply size-3 shrink-0 transition-transform duration-300;
 }
 
-.openapi-disclosure-trigger[aria-expanded="true"] svg {
+.openapi-disclosure-trigger[aria-expanded='true'] svg {
     @apply rotate-45;
 }
 
-.openapi-disclosure-trigger[aria-expanded="true"] {
+.openapi-disclosure-trigger[aria-expanded='true'] {
     @apply w-full rounded-lg border-b rounded-b-none;
 }
 
-.openapi-disclosure-trigger[aria-expanded="false"] {
+.openapi-disclosure-trigger[aria-expanded='false'] {
     @apply w-auto;
 }
 
-.openapi-disclosure-panel[aria-hidden="false"] {
+.openapi-disclosure-panel[aria-hidden='false'] {
     @apply border-b border-x border-tint-subtle rounded-b-lg;
 }
 

packages/react-openapi/src/OpenAPIDisclosureGroup.tsx

@@ -17,12 +17,18 @@ interface Props {
 type TDisclosureGroup = {
     id: string;
     label: string | React.ReactNode;
-    tabs?: {
-        id: string;
-        label: string | React.ReactNode;
-        body?: React.ReactNode;
-    }[];
-};
+} & (
+    | {
+          tabs?: {
+              id: string;
+              label: string | React.ReactNode;
+              body?: React.ReactNode;
+          }[];
+      }
+    | {
+          body?: React.ReactNode;
+      }
+);
 
 const DisclosureGroupStateContext = createContext<DisclosureGroupState | null>(null);
 
@@ -61,7 +67,7 @@ function DisclosureItem(props: { group: TDisclosureGroup; icon?: React.ReactNode
 
     const panelRef = useRef<HTMLDivElement | null>(null);
     const triggerRef = useRef<HTMLButtonElement | null>(null);
-    const isDisabled = groupState?.isDisabled || !group.tabs?.length || false;
+    const isDisabled = groupState?.isDisabled || ('tabs' in group && !group.tabs?.length) || false;
     const { buttonProps: triggerProps, panelProps } = useDisclosure(
         {
             ...props,
@@ -74,9 +80,19 @@ function DisclosureItem(props: { group: TDisclosureGroup; icon?: React.ReactNode
     const { buttonProps } = useButton(triggerProps, triggerRef);
     const { isFocusVisible, focusProps } = useFocusRing();
 
-    const defaultTab = group.tabs?.[0]?.id || '';
+    const defaultTab =
+        'tabs' in group && group.tabs?.[0]
+            ? (group.tabs[0]?.id ?? '')
+            : 'body' in group
+              ? 'body'
+              : '';
     const [selectedTabKey, setSelectedTabKey] = useState(defaultTab);
-    const selectedTab = group.tabs?.find((tab) => tab.id === selectedTabKey);
+    const selectedTab =
+        'tabs' in group
+            ? group.tabs?.find((tab) => tab.id === selectedTabKey)
+            : 'body' in group
+              ? { id: 'body', body: group.body }
+              : null;
 
     return (
         <div className="openapi-disclosure-group" aria-expanded={state.isExpanded}>
@@ -103,7 +119,7 @@ function DisclosureItem(props: { group: TDisclosureGroup; icon?: React.ReactNode
 
                     {group.label}
                 </button>
-                {group.tabs ? (
+                {'tabs' in group && group.tabs ? (
                     <div className="openapi-disclosure-group-mediatype">
                         {group.tabs?.length > 1 ? (
                             <select
@@ -121,7 +137,7 @@ function DisclosureItem(props: { group: TDisclosureGroup; icon?: React.ReactNode
                                     </option>
                                 ))}
                             </select>
-                        ) : group.tabs[0] ? (
+                        ) : group.tabs[0]?.label ? (
                             <span>{group.tabs[0].label}</span>
                         ) : null}
                     </div>

packages/react-openapi/src/index.ts

@@ -1,4 +1,5 @@
-export * from './resolveOpenAPIOperation';
+export * from './models';
 export * from './OpenAPIOperation';
 export * from './OpenAPIOperationContext';
+export * from './resolveOpenAPIOperation';
 export type { OpenAPIOperationData } from './types';

packages/react-openapi/src/models/OpenAPIModelSchema.tsx

@@ -0,0 +1,3 @@
+export function OpenAPIModelSchema(): JSX.Element {
+    return <></>;
+}

packages/react-openapi/src/models/OpenAPIModels.tsx

@@ -0,0 +1,43 @@
+import clsx from 'clsx';
+
+import { OpenAPIDisclosureGroup } from '../OpenAPIDisclosureGroup';
+import { OpenAPISchemaProperty } from '../OpenAPISchema';
+import type { OpenAPIClientContext, OpenAPIContextProps, OpenAPIOperationData } from '../types';
+
+/**
+ * Display OpenAPI Models.
+ */
+export function OpenAPIModels(props: {
+    className?: string;
+    data: OpenAPIOperationData;
+    context: OpenAPIContextProps;
+}) {
+    const { className, data, context } = props;
+    const { components } = data;
+
+    const clientContext: OpenAPIClientContext = {
+        defaultInteractiveOpened: context.defaultInteractiveOpened,
+        icons: context.icons,
+        blockKey: context.blockKey,
+    };
+
+    return (
+        <div className={clsx('openapi-models', className)}>
+            {components.length ? (
+                <OpenAPIDisclosureGroup
+                    allowsMultipleExpanded
+                    icon={context.icons.chevronRight}
+                    groups={components.map(([name, schema]) => ({
+                        id: name,
+                        label: (
+                            <div className="openapi-response-tab-content" key={`model-${name}`}>
+                                <span className="openapi-response-statuscode">{name}</span>
+                            </div>
+                        ),
+                        body: <OpenAPISchemaProperty schema={schema} context={clientContext} />,
+                    }))}
+                />
+            ) : null}
+        </div>
+    );
+}

packages/react-openapi/src/models/index.ts

@@ -0,0 +1 @@
+export { OpenAPIModels } from './OpenAPIModels';

packages/react-openapi/src/resolveOpenAPIOperation.ts

@@ -6,11 +6,12 @@ import {
     type OpenAPIV3_1,
     type OpenAPIV3xDocument,
     dereference,
+    shouldIgnoreEntity,
 } from '@gitbook/openapi-parser';
 import type { OpenAPIOperationData } from './types';
 import { checkIsReference } from './utils';
 
-export { toJSON, fromJSON };
+export { fromJSON, toJSON };
 
 /**
  * Resolve an OpenAPI operation in a file and compile it to a more usable format.
@@ -39,7 +40,7 @@ export async function resolveOpenAPIOperation(
         };
     }
 
-    const servers = 'servers' in schema ? (schema.servers ?? []) : [];
+    const servers = 'servers' in schema ? schema.servers ?? [] : [];
     const security = flattenSecurities(operation.security ?? schema.security ?? []);
 
     // Resolve securities
@@ -54,12 +55,15 @@ export async function resolveOpenAPIOperation(
         }
     }
 
+    const components = flattenComponents(schema);
+
     return {
         servers,
         operation,
         method,
         path,
         securities,
+        components,
         'x-codeSamples':
             typeof schema['x-codeSamples'] === 'boolean' ? schema['x-codeSamples'] : undefined,
         'x-hideTryItPanel':
@@ -162,3 +166,16 @@ function flattenSecurities(security: OpenAPIV3.SecurityRequirementObject[]) {
         }));
     });
 }
+
+function flattenComponents(
+    schema: OpenAPIV3.Document | OpenAPIV3_1.Document
+): [string, OpenAPIV3.SchemaObject][] {
+    const components = Object.keys(schema?.components?.schemas ?? {}).length
+        ? schema?.components?.schemas
+        : {};
+
+    return Object.entries(components ?? {})
+        .filter(([, schema]) => !shouldIgnoreEntity(schema))
+        .sort((a, b) => a[0].localeCompare(b[0]))
+        .map(([name, schema]) => [name, schema]);
+}

packages/react-openapi/src/types.ts

@@ -54,4 +54,7 @@ export interface OpenAPIOperationData extends OpenAPICustomSpecProperties {
 
     /** Securities that should be used for this operation */
     securities: [string, OpenAPIV3.SecuritySchemeObject][];
+
+    /** Components schemas */
+    components: [string, OpenAPIV3.SchemaObject][];
 }