fixes #592 - Array Min and Max Items are rendered. fixes #626 Render …

…Titles in schema
rapi-doc · Feb 24, 2022 · 8822e9d · 8822e9d
1 parent 179f5e8
commit 8822e9d
Show file tree

Hide file tree

Showing 8 changed files with 316 additions and 13 deletions.
diff --git a/docs/examples/schema-title-and-descriptions.html b/docs/examples/schema-title-and-descriptions.html
@@ -0,0 +1,48 @@
+<!doctype html>
+<html>
+  <head>
+    <!-- Global site tag (gtag.js) - Google Analytics -->
+    <script async src='https://www.googletagmanager.com/gtag/js?id=UA-132775238-1'></script>
+    <script>
+      window.dataLayer = window.dataLayer || [];
+      function gtag(){dataLayer.push(arguments);}
+      gtag('js', new Date());
+      gtag('config', 'UA-132775238-1');
+    </script>
+    <meta charset='utf-8'>
+    <meta name='viewport' content='width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes'>
+    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;600&family=Roboto+Mono&display=swap" rel="stylesheet">
+    <link href='../index.css' rel='stylesheet'>
+    <script type='module' src='../rapidoc-min.js'></script>
+  </head>
+  <body>
+    <rapi-doc spec-url="../specs/schema-title-and-descriptions.yaml"
+      id = "thedoc"
+      allow-authentication = "false" 
+      allow-search = "false"
+      show-info = "false"
+      show-header = "false"
+      render-style = "read"
+      allow-try = "false" 
+      regular-font = 'Open Sans'
+      mono-font = "Roboto Mono"
+      theme = "dark"
+      schema-style='table'
+    > 
+      <div slot="nav-logo" style="width:100%; display: flex; flex-direction:column;">
+        <div style="text-align: center; padding: 0 0 12px 0; color:#47AFE8"> Schema Display Style </div>
+        <div style="display: flex;justify-content: center; margin: 2px 0">
+          <button class='btn medium' onclick="document.getElementById('thedoc').setAttribute('schema-style', 'tree')" >Tree</button>
+          <button class='btn medium' onclick="document.getElementById('thedoc').setAttribute('schema-style', 'table')" >Table</button>
+        </div>
+
+        <div style="text-align: center; padding: 20px 0 12px 0; color:#47AFE8"> Font Size </div>
+        <div style="display: flex;justify-content: center; margin: 2px 0"">
+          <button class='btn medium' onclick="document.getElementById('thedoc').setAttribute('font-size', 'default')" >Default</button>
+          <button class='btn medium' onclick="document.getElementById('thedoc').setAttribute('font-size', 'large')" >Large</button>
+          <button class='btn medium' onclick="document.getElementById('thedoc').setAttribute('font-size', 'largest')" >Largest</button>
+        </div>
+      </div>
+  </rapi-doc>
+  </body>
+</html>
diff --git a/docs/list.html b/docs/list.html
@@ -511,6 +511,10 @@ <h2 style="font-weight:700"> Mix HTML content </h2>
         <a href="./examples/data-types.html"> Data types </a>
       </td></tr>
 
+      <tr><td class="mono-bold">
+        <a href="./examples/schema-title-and-descriptions.html"> Schema Title and Descriptions </a>
+      </td></tr>
+
       <tr><td class="mono-bold">
         <a href="./examples/readwrite.html"> Read and Write annotations </a>
       </td></tr>

diff --git a/docs/specs/events.yaml b/docs/specs/events.yaml
@@ -57,7 +57,7 @@ info:
 servers:
   - url: https://reqres.in/api/
 paths:
-  /users:
+  /users?delay=2:
     get:
       description: List of users (paginated)
       parameters:

diff --git a/docs/specs/schema-title-and-descriptions.yaml b/docs/specs/schema-title-and-descriptions.yaml
@@ -0,0 +1,96 @@
+openapi: 3.0.0
+info:
+  title: Schema Titles and Description Testcase
+  description: More detailed description of the titles example API
+  version: '1'
+paths:
+  /object:
+    get:
+      summary: Object
+      responses:
+        default:
+          description: Response description.
+          content:
+            application/json:
+              schema:
+                title: Root Object Title
+                description: Root Object Description
+                type: object
+                properties:
+                  propString:
+                    title: Prop 1 Title
+                    description: Property 1 description
+                    type: string
+                  propArrayOfString:  
+                    type: array
+                    title: Array Title
+                    description: Array Description
+                    items:
+                      title: Array Item Title
+                      description: Array Item Description (premitive)
+                      type: string
+                  propArrayOfObject:  
+                    type: array
+                    title: Array Title
+                    description: Array Description
+                    items:
+                      type: object
+                      title: Array Item Title
+                      description: Array Item Description (object)
+                      properties:
+                        name:
+                          type: string
+                          title: Title
+                          description: description
+                        age:
+                          type: integer
+                          title: Title
+                          description: description
+
+  /array-of-string:
+    get:
+      summary: Array Of String
+      responses:
+        default:
+          description: Response description.
+          content:
+            application/json:
+              schema:
+                title: Root Array Title
+                description: Root Array Description
+                type: array
+                items:
+                  title: Array Item Title
+                  description: Array Item Description (premitive)
+                  type: string
+  /array-of-object:
+    get:
+      summary: Array Of Object
+      responses:
+        default:
+          description: Response description.
+          content:
+            application/json:
+              schema:
+                type: object
+                title: Root Object Title
+                description: Root Object Description
+                properties:
+                  array_attribute:
+                    type: array
+                    minItems: 10
+                    maxItems: 20
+                    title: Array Title
+                    description: Array Description
+                    items:
+                      type: object
+                      title: Array Item Title
+                      minProperties: 2
+                      maxProperties: 2
+                      description: Array Item Description
+                      properties:
+                        key:
+                          type: string
+                        value:
+                          type: integer
+                          minimum: 20
diff --git a/docs/specs/titles.txt b/docs/specs/titles.txt
@@ -0,0 +1,129 @@
+{
+  "openapi": "3.0.0",
+  "info": {
+    "title": "Titles example (title)",
+    "description": "More detailed description of the titles example API",
+    "version": "1"
+  },
+  "paths": {
+    "/inline/object": {
+      "get": {
+        "summary": "Example with inline schemas, object",
+        "responses": {
+          "default": {
+            "description": "Response description.",
+            "content": {
+              "*/*": {
+                "schema": {
+                  "title": "Inline object (title)",
+                  "description": "Detailed description of inline object.",
+                  "type": "object",
+                  "properties": {
+                    "prop": {
+                      "title": "Inline property in inline object (title)",
+                      "description": "Detailed description of inline property in inline object.",
+                      "type": "string"
+                    }
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    },
+    "/inline/array": {
+      "get": {
+        "summary": "Example with inline schemas, array",
+        "responses": {
+          "default": {
+            "description": "Response description.",
+            "content": {
+              "*/*": {
+                "schema": {
+                  "title": "Inline array (title)",
+                  "description": "Detailed description of inline array.",
+                  "type": "array",
+                  "items": {
+                    "title": "Inline item in inline array (title)",
+                    "description": "Detailed description of inline item in inline array.",
+                    "type": "string"
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    },
+    "/components/object": {
+      "get": {
+        "summary": "Example with schemas in components, object",
+        "responses": {
+          "default": {
+            "description": "Response description.",
+            "content": {
+              "*/*": {
+                "schema": { "$ref": "#/components/schemas/Object" }
+              }
+            }
+          }
+        }
+      }
+    },
+    "/components/array": {
+      "get": {
+        "summary": "Example with schemas in components, array",
+        "responses": {
+          "default": {
+            "description": "Response description.",
+            "content": {
+              "*/*": {
+                "schema": { "$ref": "#/components/schemas/ArrayOfString" }
+              }
+            }
+          }
+        }
+      }
+    }
+  },
+  "components": {
+    "schemas": {
+      "String": {
+        "title": "Schema String (title)",
+        "description": "Detailed description of schema String.",
+        "type": "string"
+      },
+      "ArrayOfString": {
+        "title": "Schema ArrayOfString (title)",
+        "description": "Detailed description of schema ArrayOfString.",
+        "type": "array",
+        "items": { "$ref": "#/components/schemas/String" }
+      },
+      "Object": {
+        "title": "Schema Object (title)",
+        "description": "Detailed description of schema Object.",
+        "type": "object",
+        "properties": {
+          "componentString": { "$ref": "#/components/schemas/String" },
+          "inlineString": {
+            "title": "Inline string property in schema Object (title)",
+            "description": "Detailed description of inline string property in schema Object.",
+            "type": "string"
+          },
+          "componentArray": { "$ref": "#/components/schemas/ArrayOfString" },
+          "inlineArray": {
+            "title": "Inline array property in schema Object (title)",
+            "description": "Detailed description of inline array property in schema Object.",
+            "type": "array",
+            "items": {
+              "title": "Inline item in inline array property in schema Object (title)",
+              "description": "Detailed description of inline item in inline array property in schema Object.",
+              "type": "string"
+            }
+          }
+        }
+      }
+    }
+  }
+}

diff --git a/src/components/schema-table.js b/src/components/schema-table.js
@@ -234,7 +234,7 @@ export default class SchemaTable extends LitElement {
           ? html`${this.generateTree(data[0], 'xxx-of-option', '', '::ARRAY~OF', '', newSchemaLevel, newIndentLevel, '')}`
           : html`
             ${Object.keys(data).map((dataKey) => html`
-              ${['::description', '::type', '::props', '::deprecated', '::array-type', '::readwrite'].includes(dataKey)
+              ${['::title', '::description', '::type', '::props', '::deprecated', '::array-type', '::readwrite'].includes(dataKey)
                 ? data[dataKey]['::type'] === 'array' || data[dataKey]['::type'] === 'object'
                   ? html`${this.generateTree(
                     data[dataKey]['::type'] === 'array' ? data[dataKey]['::props'] : data[dataKey],
@@ -303,7 +303,7 @@ export default class SchemaTable extends LitElement {
           ${defaultValue ? html`<div style='display:inline-block; line-break:anywhere; margin-right:8px;'> <span class='bold-text'>Default: </span>${defaultValue}</div>` : ''}
           ${allowedValues ? html`<div style='display:inline-block; line-break:anywhere; margin-right:8px;'> <span class='bold-text'>Allowed: </span>${allowedValues}</div>` : ''}
           ${pattern ? html`<div style='display:inline-block; line-break:anywhere; margin-right:8px;'> <span class='bold-text'>Pattern: </span>${pattern}</div>` : ''}
-          ${schemaDescription ? html`<span class="m-markdown-small">${unsafeHTML(marked(schemaDescription))}</span>` : ''}
+          ${schemaDescription ? html`<span class="m-markdown-small">${unsafeHTML(marked(`${schemaTitle ? `**${schemaTitle}:**` : ''} ${schemaDescription}`))}</span>` : ''}
         </div>
       </div>
     `;

diff --git a/src/components/schema-tree.js b/src/components/schema-tree.js
@@ -227,7 +227,7 @@ export default class SchemaTree extends LitElement {
             ? html`${this.generateTree(data[0], 'xxx-of-option', '', '::ARRAY~OF', '', newSchemaLevel, newIndentLevel, data[0]['::readwrite'])}`
             : html`
               ${Object.keys(data).map((dataKey) => html`
-                ${['::description', '::type', '::props', '::deprecated', '::array-type', '::readwrite'].includes(dataKey)
+                ${['::title', '::description', '::type', '::props', '::deprecated', '::array-type', '::readwrite'].includes(dataKey)
                   ? data[dataKey]['::type'] === 'array' || data[dataKey]['::type'] === 'object'
                     ? html`${this.generateTree(
                       data[dataKey]['::type'] === 'array' ? data[dataKey]['::props'] : data[dataKey],
@@ -263,7 +263,7 @@ export default class SchemaTree extends LitElement {
     }
 
     // For Primitive types and array of Primitives
-    const [type, primitiveReadOrWrite, constraint, defaultValue, allowedValues, pattern, schemaDescription, , deprecated] = data.split('~|~');
+    const [type, primitiveReadOrWrite, constraint, defaultValue, allowedValues, pattern, schemaDescription, schemaTitle, deprecated] = data.split('~|~');
     if (primitiveReadOrWrite === '🆁' && this.schemaHideReadOnly === 'true') {
       return;
     }
@@ -310,7 +310,7 @@ export default class SchemaTree extends LitElement {
           ${defaultValue ? html`<div style='display:inline-block; line-break:anywhere; margin-right:8px'><span class='bold-text'>Default: </span>${defaultValue}</div>` : ''}
           ${allowedValues ? html`<div style='display:inline-block; line-break:anywhere; margin-right:8px'><span class='bold-text'>Allowed: </span>${allowedValues}</div>` : ''}
           ${pattern ? html`<div style='display:inline-block; line-break: anywhere; margin-right:8px'><span class='bold-text'>Pattern: </span>${pattern}</div>` : ''}
-          ${schemaDescription ? html`<span class="m-markdown-small">${unsafeHTML(marked(schemaDescription))}</span>` : ''}
+          ${schemaDescription ? html`<span class="m-markdown-small">${unsafeHTML(marked(`${schemaTitle ? `**${schemaTitle}:**` : ''} ${schemaDescription}`))}</span>` : ''}
         </div>
       </div>
     `;