Add support for examples in OpenAPI block (#2314)

Author: vibhanshub

packages/react-openapi/src/OpenAPISchema.tsx

@@ -47,6 +47,9 @@ export function OpenAPISchemaProperty(
         ? null
         : getSchemaAlternatives(schema, new Set(circularRefs.keys()));
 
+    const shouldDisplayExample = (schema: OpenAPIV3.SchemaObject): boolean => {
+        return (typeof schema.example === 'string' || typeof schema.example === 'number' || typeof schema.example === 'boolean')
+    }
     return (
         <InteractiveSection
             id={id}
@@ -92,6 +95,9 @@ export function OpenAPISchemaProperty(
                             className="openapi-schema-description"
                         />
                     ) : null}
+                    {shouldDisplayExample(schema) ? (
+                        <span className="openapi-schema-example">Example: <code>{JSON.stringify(schema.example)}</code></span>
+                    ) : null}
                 </div>
             }
         >

packages/react-openapi/src/OpenAPISpec.tsx

@@ -48,6 +48,7 @@ export function OpenAPISpec(props: { rawData: any; context: OpenAPIClientContext
                                 // Description of the parameter is defined at the parameter level
                                 // we use display it if the schema doesn't override it
                                 description: parameter.description,
+                                example: parameter.example,
                                 ...(noReference(parameter.schema) ?? {}),
                             },
                             required: parameter.required,

src/components/DocumentView/OpenAPI/style.css

@@ -172,6 +172,10 @@
     @apply prose-sm;
 }
 
+.openapi-schema-example {
+    @apply prose-sm mt-2 text-dark/10 dark:text-light/10;
+}
+
 /** Authentication */
 
 .openapi-securities {