Add support for nullable (#393)

Author: sserrata

demo/examples/petstore.yaml

@@ -1037,6 +1037,7 @@ components:
       required:
         - name
         - photoUrls
+        - tags
       discriminator:
         propertyName: petType
         mapping:
@@ -1059,10 +1060,12 @@ components:
           description: The name given to a pet
           type: string
           example: Guru
+          nullable: true
         photoUrls:
           description: The list of URL to a cute photos featuring pet
           type: array
           maxItems: 20
+          nullable: true
           xml:
             name: photoUrl
             wrapped: true
@@ -1076,6 +1079,7 @@ components:
           description: Tags attached to the pet
           type: array
           minItems: 1
+          nullable: true
           xml:
             name: tag
             wrapped: true
@@ -1100,6 +1104,7 @@ components:
     Tag:
       title: tag
       type: object
+      nullable: true
       properties:
         id:
           description: Tag ID

packages/docusaurus-plugin-openapi-docs/src/markdown/createRequestSchema.ts

@@ -414,6 +414,15 @@ function createDetailsNode(
                 style: { opacity: "0.6" },
                 children: ` ${schemaName}`,
               }),
+              guard(schema.nullable && schema.nullable === true, () => [
+                create("strong", {
+                  style: {
+                    fontSize: "var(--ifm-code-font-size)",
+                    color: "var(--openapi-nullable)",
+                  },
+                  children: " nullable",
+                }),
+              ]),
               guard(
                 Array.isArray(required)
                   ? required.includes(name)
@@ -597,11 +606,9 @@ function createEdges({
       collapsible: false,
       name,
       required: Array.isArray(required) ? required.includes(name) : required,
-      deprecated: mergedSchemas.deprecated,
-      schemaDescription: mergedSchemas.description,
       schemaName: schemaName,
       qualifierMessage: getQualifierMessage(schema),
-      defaultValue: mergedSchemas.default,
+      schema: mergedSchemas,
     });
   }
 
@@ -631,11 +638,9 @@ function createEdges({
     collapsible: false,
     name,
     required: Array.isArray(required) ? required.includes(name) : required,
-    deprecated: schema.deprecated,
-    schemaDescription: schema.description,
     schemaName: schemaName,
     qualifierMessage: getQualifierMessage(schema),
-    defaultValue: schema.default,
+    schema: schema,
   });
 }
 

packages/docusaurus-plugin-openapi-docs/src/markdown/createResponseSchema.ts

@@ -419,6 +419,15 @@ function createDetailsNode(
                 style: { opacity: "0.6" },
                 children: ` ${schemaName}`,
               }),
+              guard(schema.nullable && schema.nullable === true, () => [
+                create("strong", {
+                  style: {
+                    fontSize: "var(--ifm-code-font-size)",
+                    color: "var(--openapi-nullable)",
+                  },
+                  children: " nullable",
+                }),
+              ]),
               guard(schema.required && schema.required === true, () => [
                 create("strong", {
                   style: {
@@ -597,11 +606,9 @@ function createEdges({
       collapsible: false,
       name,
       required: false,
-      deprecated: mergedSchemas.deprecated,
-      schemaDescription: mergedSchemas.description,
       schemaName: schemaName,
       qualifierMessage: getQualifierMessage(schema),
-      defaultValue: mergedSchemas.default,
+      schema: mergedSchemas,
     });
   }
 
@@ -631,11 +638,9 @@ function createEdges({
     collapsible: false,
     name,
     required: false,
-    deprecated: schema.deprecated,
-    schemaDescription: schema.description,
     schemaName: schemaName,
     qualifierMessage: getQualifierMessage(schema),
-    defaultValue: schema.default,
+    schema: schema,
   });
 }
 

packages/docusaurus-theme-openapi-docs/src/theme/SchemaItem/index.js

@@ -23,11 +23,19 @@ function SchemaItem({
   name,
   qualifierMessage,
   required,
-  deprecated,
-  schemaDescription,
   schemaName,
-  defaultValue,
+  schema,
 }) {
+  let deprecated;
+  let schemaDescription;
+  let defaultValue;
+  let nullable;
+  if (schema) {
+    deprecated = schema.deprecated;
+    schemaDescription = schema.description;
+    defaultValue = schema.default;
+    nullable = schema.nullable;
+  }
   const renderRequired = guard(
     Array.isArray(required) ? required.includes(name) : required,
     () => <strong className={styles.required}> required</strong>
@@ -37,6 +45,10 @@ function SchemaItem({
     <strong className={styles.deprecated}> deprecated</strong>
   ));
 
+  const renderNullable = guard(nullable, () => (
+    <strong className={styles.nullable}> nullable</strong>
+  ));
+
   const renderSchemaDescription = guard(schemaDescription, (description) => (
     <div>
       <ReactMarkdown
@@ -80,6 +92,7 @@ function SchemaItem({
     <div>
       <strong className={deprecated && styles.strikethrough}>{name}</strong>
       <span className={styles.schemaName}> {schemaName}</span>
+      {renderNullable}
       {!deprecated && renderRequired}
       {renderDeprecated}
       {renderQualifierMessage}

packages/docusaurus-theme-openapi-docs/src/theme/SchemaItem/styles.module.css

@@ -28,6 +28,11 @@
   color: var(--openapi-deprecated);
 }
 
+.nullable {
+  font-size: var(--ifm-code-font-size);
+  color: var(--openapi-nullable);
+}
+
 .strikethrough {
   text-decoration: line-through;
 }

packages/docusaurus-theme-openapi-docs/src/theme/styles.css

@@ -8,6 +8,7 @@
 :root {
   --openapi-required: var(--ifm-color-danger);
   --openapi-deprecated: var(--ifm-color-warning);
+  --openapi-nullable: var(--ifm-color-info);
   --openapi-code-blue: var(--ifm-color-info);
   --openapi-code-red: var(--ifm-color-danger);
   --openapi-code-orange: var(--ifm-color-warning);