openapi2html - npm Package Compare versions

Comparing version 1.0.0-beta.2 to 1.0.0-beta.3

package.json

 {
   "name": "openapi2html",
-  "version": "1.0.0-beta.2",
+  "version": "1.0.0-beta.3",
   "description": "Yet another static html generator for Open API 2.0 / Swagger 2.0",
@@ -56,3 +56,3 @@ "main": "src/index.js",
     "nyc": "^11.4.1",
-    "sinon": "^4.2.2",
+    "sinon": "^4.2.3",
     "sinon-chai": "^2.14.0",
@@ -67,2 +67,3 @@ "swagger-parser": "^4.0.2"
     "json-stringify-safe": "^5.0.1",
+    "prop-types": "^15.6.0",
     "react": "^16.2.0",
@@ -69,0 +70,0 @@ "react-dom": "^16.2.0",

README.md

@@ -23,2 +23,3 @@ # openapi2html
 
+First, use `swagger-parser` to parse your api from `json` or `yaml`. Then, use `openapi2html` to generate html, e.g.:
 ```js
@@ -33,2 +34,18 @@ const parser = require('swagger-parser');
 
+## Options
+
+`openapi2html` may take a second parameter for options, e.g.:
+```js
+const options = {
+  tagColors: {
+    pet: 'primary',
+    store: 'warning',
+    user: 'success'
+  }
+};
+const openapi2html = require('openapi2html', options);
+```
+There are the following options:
+* `tagColors` maps your operations' tags to Bootstrap theme colors `primary`, `secondary`, `success`, `danger`, `warning`, `info`, `light`, `dark`. Please do not use `danger` because this is already used for `deprecated`. The default theme color is `secondary`. If you use custom colors, you need to provide the according CSS classes, e.g., `badge-mycolor`. Hex color values are not supported.
+
 ## Styling
@@ -39,3 +56,3 @@
 In addition, there are classes `o2h-*` attached such as
-`o2h-data-type` to allow some customized styling.
+`o2h-operation-get` to allow some customized styling.
 
@@ -42,0 +59,0 @@ This is what worked for me:

src/components/Api.jsx

@@ -9,4 +9,5 @@ const React = require('react');
 const SwaggerSecurityRequirement = require('./SwaggerSecurityRequirement');
+const ThemeProvider = require('./ThemeProvider');
 
-const Api = ({ api }) => {
+const Api = ({ api, options = {} }) => {
   const classname = 'o2h-api';
@@ -17,27 +18,31 @@ if (api.swagger !== '2.0') {
   const {
-    info, host, basePath, schemes, consumes, produces, paths, definitions,
+    info, host, basePath, schemes, consumes, produces,
+    paths = {}, definitions = {},
     securityDefinitions, security,
   } = api;
   const { title, description, version } = info;
+  const { tagColors = {} } = options;
   return (
-    <div className={classname}>
-      <h1>{title}</h1>
-      <Description format="gfm">{description}</Description>
-      <div className="o2h-info">
-        <div className="o2h-info-version">Version <code>{version}</code></div>
-        <div className="o2h-info-host">Host <code>{host}</code></div>
-        <div className="o2h-info-basepath">Base path <code>{basePath}</code></div>
+    <ThemeProvider tagColors={tagColors}>
+      <div className={classname}>
+        <h1>{title}</h1>
+        <Description format="gfm">{description}</Description>
+        <div className="o2h-info">
+          <div className="o2h-info-version">Version <code>{version}</code></div>
+          <div className="o2h-info-host">Host <code>{host}</code></div>
+          <div className="o2h-info-basepath">Base path <code>{basePath}</code></div>
+        </div>
+        { schemes &&
+          <div className="o2h-schemes">Schemes <Codes codes={schemes} /></div> }
+        { consumes &&
+          <div className="o2h-consumes">Consumes <Codes codes={consumes} /></div> }
+        { produces &&
+          <div className="o2h-produces">Produces <Codes codes={produces} /></div> }
+        <Summary api={api} />
+        <SwaggerSecurityDefinitions securityDefinitions={securityDefinitions} />
+        <SwaggerSecurityRequirement security={security} />
+        <SwaggerPaths paths={paths} />
+        <SwaggerDefinitions definitions={definitions} />
       </div>
-      { schemes &&
-        <div className="o2h-schemes">Schemes <Codes codes={schemes} /></div> }
-      { consumes &&
-        <div className="o2h-consumes">Consumes <Codes codes={consumes} /></div> }
-      { produces &&
-        <div className="o2h-produces">Produces <Codes codes={produces} /></div> }
-      <Summary api={api} />
-      <SwaggerSecurityDefinitions securityDefinitions={securityDefinitions} />
-      <SwaggerSecurityRequirement security={security} />
-      <SwaggerPaths paths={paths} />
-      <SwaggerDefinitions definitions={definitions} />
-    </div>
+    </ThemeProvider>
   );
@@ -44,0 +49,0 @@ };

src/components/Summary.jsx

 const React = require('react');
+const Badges = require('./Badges');
 
@@ -7,3 +8,3 @@ const Summary = ({ api }) => {
   Object.entries(api.paths).forEach(([path, operations]) => {
-    Object.entries(operations).forEach(([operation, { summary }]) => {
+    Object.entries(operations).forEach(([operation, { summary, tags, deprecated }]) => {
       endpoints.push({
@@ -14,2 +15,4 @@ path,
         href: `#/operations/${operation}${path}`,
+        tags,
+        deprecated,
       });
@@ -23,7 +26,7 @@ });
           .map(({
-            path, method, href, summary,
+            path, method, href, summary, tags, deprecated,
           }, i) => (
             <dl key={`summary-${i}`}>
               <dt><a href={href}>{method}{' '}{path}</a></dt>
-              { summary && <dd>{summary}</dd> }
+              { <dd>{summary} <Badges tags={tags} deprecated={deprecated} /></dd> }
             </dl>
@@ -30,0 +33,0 @@ ))

src/components/SwaggerOperation.jsx

 const React = require('react');
 const {
-  Card, CardHeader, CardBody, CardTitle, CardSubtitle, Badge,
+  Card, CardHeader, CardBody, CardTitle, CardSubtitle,
 } = require('reactstrap');
@@ -10,9 +10,11 @@ const SwaggerParameters = require('./SwaggerParameters');
 const Codes = require('./Codes');
+const Badges = require('./Badges');
 
 const SwaggerOperation = ({ operation, path, details }) => {
-  const classname = 'o2h-operation';
+  const classname = `o2h-operation o2h-operation-${operation}`;
   const anchor = `/operations/${operation}${path}`;
   const method = operation.toUpperCase();
   const {
-    summary, description, schemes, consumes, produces, parameters, responses, security,
+    summary, description, schemes, consumes, produces,
+    parameters, responses, security, tags, deprecated,
   } = details;
@@ -26,6 +28,5 @@ return (
               {method}{' '}{path}{' '}
-              { details.deprecated && <Badge color="danger">deprecated</Badge> }
             </a>
           </CardTitle>
-          { summary && <CardSubtitle>{summary}</CardSubtitle> }
+          <CardSubtitle>{summary} <Badges tags={tags} deprecated={deprecated} /></CardSubtitle>
         </CardHeader>
@@ -32,0 +33,0 @@ <CardBody>

src/index.js

 const ReactDomServer = require('react-dom/server');
 const Api = require('./components/Api');
 
-const openapi2html = api => ReactDomServer.renderToStaticMarkup(Api({ api }));
+const openapi2html = (api, options) => ReactDomServer.renderToStaticMarkup(Api({ api, options }));
 
 module.exports = openapi2html;

src/server.js

@@ -36,3 +36,9 @@ const Hapi = require('hapi'); // eslint-disable-line import/no-extraneous-dependencies
       });
-      const html = openapi2html(api);
+      const html = openapi2html(api, {
+        tagColors: {
+          pet: 'primary',
+          store: 'warning',
+          user: 'success',
+        },
+      });
       const frame = await readFile(path.join(__dirname, 'frame.html'), 'UTF-8');
@@ -39,0 +45,0 @@ const page = frame

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

58046

increased by4.35%

Number of package files

36

increased by5.88%

Lines of code

1734

increased by3.28%

Number of lines in readme file

98

increased by20.99%

Worsened metrics

Dependency count

10

increased by11.11%

Dependency changes

• + Addedprop-types@^15.6.0

• + Added@types/node@22.9.4(transitive)

• - Removed@types/node@22.9.1(transitive)