Support for x-gitbook-enum

Author: nolannbiron

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

@@ -244,7 +244,11 @@
 
 /* Schema Enum */
 .openapi-schema-enum {
-    @apply flex flex-row text-sm leading-relaxed flex-wrap text-tint;
+    @apply flex flex-row text-sm leading-relaxed gap-2 flex-wrap text-tint;
+}
+
+.openapi-schema-enum-list {
+    @apply flex flex-row gap-1.5 items-center;
 }
 
 .openapi-schema-enum-value {

packages/openapi-parser/src/types.ts

@@ -47,6 +47,21 @@ export interface OpenAPICustomOperationProperties {
      * Description in Document format.
      */
     'x-gitbook-description-document'?: object;
+
+    /**
+     * Enums with name and description
+     */
+    'x-enumDescriptions'?: object;
+
+    /**
+     * Enums with name and description
+     */
+    'x-gitbook-enum'?: {
+        [key: string]: {
+            description?: string;
+            name?: string;
+        };
+    };
 }
 
 /**

packages/react-openapi/src/OpenAPISchema.tsx

@@ -242,38 +242,52 @@ function OpenAPISchemaEnum(props: {
 }) {
     const { schema } = props;
 
-    if (!schema.enum || !schema.enum.length || !schema['x-enumDescriptions']) {
+    if (!schema.enum?.length || (!schema['x-enumDescriptions'] && !schema['x-gitbook-enum'])) {
         return null;
     }
 
     const enumValues = (() => {
+        // Render x-gitbook-enum first, as it has a different format
+        if (schema['x-gitbook-enum']) {
+            return Object.entries(schema['x-gitbook-enum']).map(([name, { description }]) => {
+                return {
+                    value: name,
+                    description,
+                };
+            });
+        }
+
+        if (schema['x-enumDescriptions']) {
+            return Object.entries(schema['x-enumDescriptions']).map(([value, description]) => {
+                return {
+                    value,
+                    description,
+                };
+            });
+        }
+
         return schema.enum.map((value) => {
             return {
                 value,
-                description: schema['x-enumDescriptions']?.[value],
+                description: undefined,
             };
         });
     })();
 
     return (
         <div className="openapi-schema-enum">
-            <span>
-                Options:{' '}
+            <span>Available options:</span>
+            <div className="openapi-schema-enum-list">
                 {enumValues.map((item, index) => (
                     <span key={index} className="openapi-schema-enum-value">
-                        {item.description ? (
-                            <OpenAPITooltip label={item.description} delay={200}>
-                                <OpenAPITooltip.Button className="cursor-default">
-                                    <code>{`${item.value}`}</code>
-                                </OpenAPITooltip.Button>
-                            </OpenAPITooltip>
-                        ) : (
-                            <code>{`${item.value}`}</code>
-                        )}
-                        {index < enumValues.length - 1 ? ', ' : ''}
+                        <OpenAPITooltip label={item.description} delay={200}>
+                            <OpenAPITooltip.Button className="cursor-default">
+                                <code>{`${item.value}`}</code>
+                            </OpenAPITooltip.Button>
+                        </OpenAPITooltip>
                     </span>
                 ))}
-            </span>
+            </div>
         </div>
     );
 }
@@ -443,7 +457,7 @@ function getSchemaTitle(schema: OpenAPIV3.SchemaObject): string {
     // Otherwise try to infer a nice title
     let type = 'any';
 
-    if (schema.enum) {
+    if (schema.enum || schema['x-enumDescriptions'] || schema['x-gitbook-enum']) {
         type = `${schema.type} · enum`;
         // check array AND schema.items as this is sometimes null despite what the type indicates
     } else if (schema.type === 'array' && !!schema.items) {

packages/react-openapi/src/OpenAPITooltip.tsx

@@ -4,11 +4,15 @@ import { Button, type ButtonProps, Tooltip, TooltipTrigger } from 'react-aria-co
 function OpenAPITooltip(
     props: TooltipTriggerProps & {
         children: React.ReactNode;
-        label: string;
+        label?: string;
     }
 ) {
     const { children, label } = props;
 
+    if (!label) {
+        return children;
+    }
+
     return (
         <TooltipTrigger {...props}>
             {children}