@upendra19/swagger-ui-custom 1.0.0

package/package.json

@@ -0,0 +1,224 @@
+{
+  "name": "@upendra19/swagger-ui-custom",
+  "version": "1.0.0",
+  "description": "Customizable Swagger UI with configuration-based feature control (showAuthorization, showTryItOut, showInfoLinks, operationsCollapsible, showOperationUtilities)",
+  "keywords": [
+    "swagger",
+    "swagger-ui",
+    "api",
+    "documentation",
+    "openapi",
+    "configurable",
+    "customizable"
+  ],
+  "main": "./dist/swagger-ui.js",
+  "module": "./dist/swagger-ui-es-bundle-core.js",
+  "exports": {
+    "./dist/swagger-ui.css": "./dist/swagger-ui.css",
+    "./dist/oauth2-redirect.html": "./dist/oauth2-redirect.html",
+    "./dist/swagger-ui-standalone-preset": "./dist/swagger-ui-standalone-preset.js",
+    ".": {
+      "browser": {
+        "import": "./dist/swagger-ui-es-bundle-core.js",
+        "require": "./dist/swagger-ui.js"
+      },
+      "node": {
+        "import": "./dist/swagger-ui-bundle.js",
+        "require": "./dist/swagger-ui-es-bundle.js"
+      },
+      "default": {
+        "import": "./dist/swagger-ui-bundle.js",
+        "require": "./dist/swagger-ui-es-bundle.js"
+      }
+    }
+  },
+ 
+  "author": "Upendra",
+  "contributors": [
+    "(Original Swagger UI contributors)",
+    "Anna Bodnia <anna.bodnia@gmail.com>",
+    "Buu Nguyen <buunguyen@gmail.com>",
+    "Josh Ponelat <jponelat@gmail.com>",
+    "Kyle Shockey <kyleshockey@gmail.com>",
+    "Robert Barnwell <robert@robertismy.name>",
+    "Sahar Jafari <shr.jafari@gmail.com>",
+    "Vladimir Gorej <vladimir.gorej@gmail.com>"
+  ],
+  "license": "Apache-2.0",
+  "scripts": {
+    "automated-release": "release-it -VV --config ./release/.release-it.json",
+    "build": "npm run build-stylesheets && rimraf ./dist/swagger-ui.js ./dist/swagger-ui.js.map && npm run build-all-bundles",
+    "build-all-bundles": "run-p --aggregate-output build:core build:bundle build:standalone build:es:bundle build:es:bundle:core",
+    "build-stylesheets": "cross-env NODE_ENV=production BABEL_ENV=production BROWSERSLIST_ENV=browser-production webpack --color --config webpack/stylesheets.js && shx sed -i \"s/\\*zoom/zoom/g\" ./dist/swagger-ui.css",
+    "build:bundle": "cross-env NODE_ENV=production BABEL_ENV=production BROWSERSLIST_ENV=isomorphic-production webpack --color --config webpack/bundle.js",
+    "build:core": "cross-env NODE_ENV=production BABEL_ENV=production BROWSERSLIST_ENV=browser-production webpack --color --config webpack/core.js",
+    "build:standalone": "cross-env NODE_ENV=production BABEL_ENV=production BROWSERSLIST_ENV=browser-production webpack --color --config webpack/standalone.js",
+    "build:es:bundle": "cross-env NODE_ENV=production BABEL_ENV=production BROWSERSLIST_ENV=isomorphic-production webpack --color --config webpack/es-bundle.js",
+    "build:es:bundle:core": "cross-env NODE_ENV=production BABEL_ENV=esm BROWSERSLIST_ENV=browser-production webpack --color --config webpack/es-bundle-core.js",
+    "clean": "rimraf ./dist",
+    "dev": "cross-env NODE_ENV=development BABEL_ENV=development BROWSERSLIST_ENV=browser-development webpack serve --config webpack/dev.js",
+    "deps-license": "license-checker --production --csv --out $npm_package_config_deps_check_dir/licenses.csv && license-checker --development --csv --out $npm_package_config_deps_check_dir/licenses-dev.csv",
+    "deps-size": "cross-env NODE_ENV=development webpack -p --config webpack/bundle.js --json | webpack-bundle-size-analyzer >| $npm_package_config_deps_check_dir/sizes.txt",
+    "deps-check": "run-s deps-license deps-size",
+    "lint": "eslint --ext \".js,.jsx\" src test dev-helpers flavors",
+    "lint-errors": "eslint --quiet --ext \".js,.jsx\" src test dev-helpers flavors",
+    "lint-fix": "eslint --ext \".js,.jsx\" src test dev-helpers flavors --fix",
+    "lint-styles": "stylelint \"**/*.scss\"",
+    "lint-styles-fix": "stylelint \"**/*.scss\" --fix",
+    "test": "run-s lint-errors test:unit cy:ci",
+    "test:artifact": "cross-env NODE_ENV=production BABEL_ENV=commonjs BROWSERSLIST_ENV=node-development jest --config ./config/jest/jest.artifact.config.js",
+    "test:unit": "cross-env NODE_ENV=test BABEL_ENV=commonjs BROWSERSLIST_ENV=node-development jest --config ./config/jest/jest.unit.config.js",
+    "cy:mock-api": "json-server --watch test/e2e-selenium/db.json --port 3204",
+    "cy:server": "cross-env NODE_ENV=production BABEL_ENV=production BROWSERSLIST_ENV=browser-production webpack serve --config webpack/dev-e2e.js",
+    "cy:start": "run-p -r cy:server cy:mock-api",
+    "cy:open": "cross-env BROWSERSLIST_ENV=browser-production cypress open",
+    "cy:run": "cross-env BROWSERSLIST_ENV=browser-production cypress run",
+    "cy:ci": "start-server-and-test cy:start http://localhost:3204 cy:run",
+    "cy:dev": "start-server-and-test cy:start http://localhost:3204 cy:open",
+    "open-static": "npx open-cli http://localhost:3002",
+    "security-audit": "run-s -sc security-audit:all security-audit:prod",
+    "security-audit:prod": "npm-audit-ci-wrapper -p -t low",
+    "security-audit:all": "npm-audit-ci-wrapper -t moderate",
+    "serve-static": "ws -d dist/ --hostname 0.0.0.0 -p 3002",
+    "start": "npm-run-all --parallel serve-static open-static"
+  },
+  "dependencies": {
+    "@babel/runtime-corejs3": "^7.27.1",
+    "@scarf/scarf": "=1.4.0",
+    "base64-js": "^1.5.1",
+    "buffer": "^6.0.3",
+    "classnames": "^2.5.1",
+    "css.escape": "1.5.1",
+    "deep-extend": "0.6.0",
+    "dompurify": "=3.2.6",
+    "ieee754": "^1.2.1",
+    "immutable": "^3.x.x",
+    "js-file-download": "^0.4.12",
+    "js-yaml": "=4.1.1",
+    "lodash": "^4.17.21",
+    "prop-types": "^15.8.1",
+    "randexp": "^0.5.3",
+    "randombytes": "^2.1.0",
+    "react": ">=16.8.0 <20",
+    "react-copy-to-clipboard": "5.1.0",
+    "react-debounce-input": "=3.3.0",
+    "react-dom": ">=16.8.0 <20",
+    "react-immutable-proptypes": "2.2.0",
+    "react-immutable-pure-component": "^2.2.0",
+    "react-inspector": "^6.0.1",
+    "react-redux": "^9.2.0",
+    "react-syntax-highlighter": "^16.0.0",
+    "redux": "^5.0.1",
+    "redux-immutable": "^4.0.0",
+    "remarkable": "^2.0.1",
+    "reselect": "^5.1.1",
+    "serialize-error": "^8.1.0",
+    "sha.js": "^2.4.12",
+    "swagger-client": "^3.36.0",
+    "url-parse": "^1.5.10",
+    "xml": "=1.0.1",
+    "xml-but-prettier": "^1.0.1",
+    "zenscroll": "^4.0.2"
+  },
+  "devDependencies": {
+    "@babel/cli": "=7.26.4",
+    "@babel/core": "=7.26.10",
+    "@babel/eslint-parser": "=7.26.10",
+    "@babel/plugin-transform-runtime": "=7.26.10",
+    "@babel/preset-env": "=7.27.2",
+    "@babel/preset-react": "=7.26.3",
+    "@babel/register": "=7.27.1",
+    "@cfaester/enzyme-adapter-react-18": "=0.8.0",
+    "@commitlint/cli": "^19.8.0",
+    "@commitlint/config-conventional": "^19.8.0",
+    "@jest/globals": "=29.7.0",
+    "@pmmmwh/react-refresh-webpack-plugin": "^0.6.0",
+    "@release-it/conventional-changelog": "=10.0.2",
+    "@svgr/webpack": "=8.1.0",
+    "autoprefixer": "^10.4.21",
+    "babel-loader": "^9.2.1",
+    "babel-plugin-lodash": "=3.3.4",
+    "babel-plugin-module-resolver": "=5.0.2",
+    "babel-plugin-transform-react-remove-prop-types": "=0.4.24",
+    "body-parser": "^1.19.0",
+    "cheerio": "=1.0.0",
+    "copy-webpack-plugin": "13.0.1",
+    "cors": "^2.8.5",
+    "cross-env": "=7.0.3",
+    "css-loader": "=7.1.2",
+    "cssnano": "=7.0.7",
+    "cypress": "=14.2.0",
+    "dedent": "^1.6.0",
+    "deepmerge": "^4.3.1",
+    "enzyme": "=3.11.0",
+    "eslint": "^8.57.0",
+    "eslint-config-prettier": "^10.1.1",
+    "eslint-plugin-import": "^2.31.0",
+    "eslint-plugin-jest": "^28.12.0",
+    "eslint-plugin-prettier": "^5.2.3",
+    "eslint-plugin-react": "^7.37.4",
+    "esm": "=3.2.25",
+    "expect": "=29.7.0",
+    "express": "^4.21.2",
+    "git-describe": "^4.1.0",
+    "html-webpack-plugin": "^5.6.3",
+    "html-webpack-skip-assets-plugin": "^1.0.4",
+    "husky": "=9.1.7",
+    "inspectpack": "=4.7.1",
+    "jest": "=29.7.0",
+    "jest-environment-jsdom": "=29.7.0",
+    "jest-transform-stub": "=2.0.0",
+    "jsdom": "=26.0.0",
+    "json-loader": "^0.5.7",
+    "json-merger": "^2.0.0",
+    "json-server": "=0.17.4",
+    "less": "^4.2.2",
+    "license-checker": "^25.0.0",
+    "lint-staged": "^15.5.0",
+    "local-web-server": "^5.4.0",
+    "mini-css-extract-plugin": "^2.9.2",
+    "npm-audit-ci-wrapper": "^3.0.2",
+    "npm-run-all": "^4.1.5",
+    "oauth2-server": "^2.4.1",
+    "open": "^10.1.0",
+    "open-cli": "=8.0.0",
+    "postcss": "^8.5.3",
+    "postcss-loader": "^8.1.1",
+    "postcss-preset-env": "^10.1.6",
+    "postcss-scss": "^4.0.9",
+    "prettier": "^3.5.3",
+    "process": "^0.11.10",
+    "react-refresh": "^0.17.0",
+    "react-test-renderer": "^18.3.1",
+    "release-it": "=19.0.4",
+    "rimraf": "^6.0.1",
+    "sass-embedded": "=1.86.0",
+    "sass-loader": "^16.0.4",
+    "shx": "=0.4.0",
+    "sinon": "=20.0.0",
+    "source-map-support": "^0.5.21",
+    "start-server-and-test": "^2.0.11",
+    "stream-browserify": "^3.0.0",
+    "stylelint": "^16.19.1",
+    "stylelint-prettier": "^5.0.3",
+    "tachyons-sass": "^4.9.5",
+    "terser-webpack-plugin": "^5.3.14",
+    "webpack": "^5.97.1",
+    "webpack-bundle-size-analyzer": "^3.1.0",
+    "webpack-cli": "^6.0.1",
+    "webpack-dev-server": "^5.2.2",
+    "webpack-node-externals": "=3.0.0",
+    "webpack-stats-plugin": "=1.1.3"
+  },
+  "overrides": {
+    "@pmmmwh/react-refresh-webpack-plugin": {
+      "webpack-dev-server": "$webpack-dev-server"
+    },
+    "enzyme": {
+      "cheerio": "=1.0.0-rc.12"
+    }
+  },
+  "config": {
+    "deps_check_dir": ".deps_check"
+  }
+}

package/snapcraft.yaml

@@ -0,0 +1,28 @@
+name: swagger-ui
+version: master
+summary: The World's Most Popular API Framework
+description: |
+  Swagger UI is part of the Swagger project. The Swagger project allows you to
+  produce, visualize and consume your OWN RESTful services. No proxy or 3rd
+  party services required. Do it your own way.
+
+  Swagger UI is a dependency-free collection of HTML, Javascript, and CSS
+  assets that dynamically generate beautiful documentation and sandbox from a
+  Swagger-compliant API. Because Swagger UI has no dependencies, you can host
+  it in any server environment, or on your local machine.
+
+grade: devel
+confinement: strict
+
+apps:
+  swagger-ui:
+    command: sh -c \"cd $SNAP/lib/node_modules/swagger-ui/dist && http-server -a localhost -p 8080\"
+    daemon: simple
+    plugs: [network, network-bind]
+
+parts:
+  swagger-ui:
+    source: .
+    plugin: nodejs
+    npm-run: [build]
+    node-packages: [handlebars, http-server]

package/src/core/assets/rolling-load.svg

@@ -0,0 +1 @@
+<svg width="200px"  height="200px"  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" class="lds-rolling" style="background-image: none; background-position: initial initial; background-repeat: initial initial;"><circle cx="50" cy="50" fill="none" ng-attr-stroke="{{config.color}}" ng-attr-stroke-width="{{config.width}}" ng-attr-r="{{config.radius}}" ng-attr-stroke-dasharray="{{config.dasharray}}" stroke="#555555" stroke-width="10" r="35" stroke-dasharray="164.93361431346415 56.97787143782138"><animateTransform attributeName="transform" type="rotate" calcMode="linear" values="0 50 50;360 50 50" keyTimes="0;1" dur="1s" begin="0s" repeatCount="indefinite"></animateTransform></circle></svg>

package/src/core/components/app.jsx

@@ -0,0 +1,30 @@
+/**
+ * @prettier
+ */
+import React from "react"
+import PropTypes from "prop-types"
+
+class App extends React.Component {
+  getLayout() {
+    const { getComponent, layoutSelectors } = this.props
+    const layoutName = layoutSelectors.current()
+    const Component = getComponent(layoutName, true)
+
+    return Component
+      ? Component
+      : () => <h1> No layout defined for &quot;{layoutName}&quot; </h1>
+  }
+
+  render() {
+    const Layout = this.getLayout()
+
+    return <Layout />
+  }
+}
+
+App.propTypes = {
+  getComponent: PropTypes.func.isRequired,
+  layoutSelectors: PropTypes.object.isRequired,
+}
+
+export default App

package/src/core/components/auth/api-key-auth.jsx

@@ -0,0 +1,93 @@
+import React from "react"
+import PropTypes from "prop-types"
+
+export default class ApiKeyAuth extends React.Component {
+  static propTypes = {
+    authorized: PropTypes.object,
+    getComponent: PropTypes.func.isRequired,
+    errSelectors: PropTypes.object.isRequired,
+    schema: PropTypes.object.isRequired,
+    name: PropTypes.string.isRequired,
+    onChange: PropTypes.func,
+    authSelectors: PropTypes.object.isRequired
+  }
+
+  constructor(props, context) {
+    super(props, context)
+    let { name, schema } = this.props
+    let value = this.getValue()
+
+    this.state = {
+      name: name,
+      schema: schema,
+      value: value
+    }
+  }
+
+  getValue () {
+    let { name, authorized } = this.props
+
+    return authorized && authorized.getIn([name, "value"])
+  }
+
+  onChange =(e) => {
+    let { onChange } = this.props
+    let value = e.target.value
+    let newState = Object.assign({}, this.state, { value: value })
+
+    this.setState(newState)
+    onChange(newState)
+  }
+
+  render() {
+    let { schema, getComponent, errSelectors, name, authSelectors } = this.props
+    const Input = getComponent("Input")
+    const Row = getComponent("Row")
+    const Col = getComponent("Col")
+    const AuthError = getComponent("authError")
+    const Markdown = getComponent("Markdown", true)
+    const JumpToPath = getComponent("JumpToPath", true)
+    const path = authSelectors.selectAuthPath(name)
+    let value = this.getValue()
+    let errors = errSelectors.allErrors().filter( err => err.get("authId") === name)
+
+    return (
+      <div>
+        <h4>
+          <code>{ name || schema.get("name") }</code>&nbsp;(apiKey)
+          <JumpToPath path={path} />
+        </h4>
+        { value && <h6>Authorized</h6>}
+        <Row>
+          <Markdown source={ schema.get("description") } />
+        </Row>
+        <Row>
+          <p>Name: <code>{ schema.get("name") }</code></p>
+        </Row>
+        <Row>
+          <p>In: <code>{ schema.get("in") }</code></p>
+        </Row>
+        <Row>
+          <label htmlFor="api_key_value">Value:</label>
+          {
+            value ? <code> ****** </code>
+                  : <Col>
+                      <Input 
+                        id="api_key_value" 
+                        type="text" 
+                        onChange={ this.onChange } 
+                        autoFocus
+                      />
+                    </Col>
+          }
+        </Row>
+        {
+          errors.valueSeq().map( (error, key) => {
+            return <AuthError error={ error }
+                              key={ key }/>
+          } )
+        }
+      </div>
+    )
+  }
+}

package/src/core/components/auth/auth-item.jsx

@@ -0,0 +1,60 @@
+import React from "react"
+import PropTypes from "prop-types"
+import ImPropTypes from "react-immutable-proptypes"
+
+export default class Auths extends React.Component {
+  static propTypes = {
+    authorized: ImPropTypes.orderedMap.isRequired,
+    schema: ImPropTypes.orderedMap.isRequired,
+    name: PropTypes.string.isRequired,
+    getComponent: PropTypes.func.isRequired,
+    onAuthChange: PropTypes.func.isRequired,
+    errSelectors: PropTypes.object.isRequired,
+    authSelectors: PropTypes.object.isRequired,
+  }
+
+  render() {
+    let {
+      schema,
+      name,
+      getComponent,
+      onAuthChange,
+      authorized,
+      errSelectors,
+      authSelectors
+    } = this.props
+    const ApiKeyAuth = getComponent("apiKeyAuth")
+    const BasicAuth = getComponent("basicAuth")
+
+    let authEl
+
+    const type = schema.get("type")
+
+    switch(type) {
+      case "apiKey": authEl = <ApiKeyAuth key={ name }
+                                        schema={ schema }
+                                        name={ name }
+                                        errSelectors={ errSelectors }
+                                        authorized={ authorized }
+                                        getComponent={ getComponent }
+                                        onChange={ onAuthChange }
+                                        authSelectors = { authSelectors } />
+        break
+      case "basic": authEl = <BasicAuth key={ name }
+                                      schema={ schema }
+                                      name={ name }
+                                      errSelectors={ errSelectors }
+                                      authorized={ authorized }
+                                      getComponent={ getComponent }
+                                      onChange={ onAuthChange }
+                                      authSelectors = { authSelectors } />
+        break
+      default: authEl = <div key={ name }>Unknown security definition type { type }</div>
+    }
+
+    return (<div key={`${name}-jump`}>
+      { authEl }
+    </div>)
+  }
+
+}

package/src/core/components/auth/authorization-popup.jsx

@@ -0,0 +1,59 @@
+import React from "react"
+import PropTypes from "prop-types"
+
+export default class AuthorizationPopup extends React.Component {
+  close =() => {
+    let { authActions } = this.props
+
+    authActions.showDefinitions(false)
+  }
+
+  render() {
+    let { authSelectors, authActions, getComponent, errSelectors, specSelectors, fn: { AST = {} } } = this.props
+    let definitions = authSelectors.shownDefinitions()
+    const Auths = getComponent("auths")
+    const CloseIcon = getComponent("CloseIcon")
+
+    return (
+      <div className="dialog-ux">
+        <div className="backdrop-ux"></div>
+        <div className="modal-ux">
+          <div className="modal-dialog-ux">
+            <div className="modal-ux-inner">
+              <div className="modal-ux-header">
+                <h3>Available authorizations</h3>
+                <button type="button" className="close-modal" onClick={ this.close }>
+                  <CloseIcon />
+                </button>
+              </div>
+              <div className="modal-ux-content">
+
+                {
+                  definitions.valueSeq().map(( definition, key ) => {
+                    return <Auths key={ key }
+                                  AST={AST}
+                                  definitions={ definition }
+                                  getComponent={ getComponent }
+                                  errSelectors={ errSelectors }
+                                  authSelectors={ authSelectors }
+                                  authActions={ authActions }
+                                  specSelectors={ specSelectors }/>
+                  })
+                }
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  static propTypes = {
+    fn: PropTypes.object.isRequired,
+    getComponent: PropTypes.func.isRequired,
+    authSelectors: PropTypes.object.isRequired,
+    specSelectors: PropTypes.object.isRequired,
+    errSelectors: PropTypes.object.isRequired,
+    authActions: PropTypes.object.isRequired,
+  }
+}

package/src/core/components/auth/authorize-btn.jsx

@@ -0,0 +1,30 @@
+import React from "react"
+import PropTypes from "prop-types"
+
+export default class AuthorizeBtn extends React.Component {
+  static propTypes = {
+    onClick: PropTypes.func,
+    isAuthorized: PropTypes.bool,
+    showPopup: PropTypes.bool,
+    getComponent: PropTypes.func.isRequired
+  }
+
+  render() {
+    let { isAuthorized, showPopup, onClick, getComponent } = this.props
+
+    //must be moved out of button component
+    const AuthorizationPopup = getComponent("authorizationPopup", true)
+    const LockAuthIcon = getComponent("LockAuthIcon", true)
+    const UnlockAuthIcon = getComponent("UnlockAuthIcon", true)
+
+    return (
+      <div className="auth-wrapper">
+        <button className={isAuthorized ? "btn authorize locked" : "btn authorize unlocked"} onClick={onClick}>
+          <span>Authorize</span>
+          {isAuthorized ? <LockAuthIcon /> : <UnlockAuthIcon />}
+        </button>
+      { showPopup && <AuthorizationPopup /> }
+      </div>
+    )
+  }
+}

package/src/core/components/auth/authorize-operation-btn.jsx

@@ -0,0 +1,35 @@
+import React from "react"
+import PropTypes from "prop-types"
+
+export default class AuthorizeOperationBtn extends React.Component {
+    static propTypes = {
+      isAuthorized: PropTypes.bool.isRequired,
+      onClick: PropTypes.func,
+      getComponent: PropTypes.func.isRequired
+    }
+
+  onClick =(e) => {
+    e.stopPropagation()
+    let { onClick } = this.props
+
+    if(onClick) {
+      onClick()
+    }
+  }
+
+  render() {
+    let { isAuthorized, getComponent } = this.props
+
+    const LockAuthOperationIcon = getComponent("LockAuthOperationIcon", true)
+    const UnlockAuthOperationIcon = getComponent("UnlockAuthOperationIcon", true)
+
+    return (
+      <button className="authorization__btn"
+        aria-label={isAuthorized ? "authorization button locked" : "authorization button unlocked"}
+        onClick={this.onClick}>
+        {isAuthorized ? <LockAuthOperationIcon className="locked" /> : <UnlockAuthOperationIcon className="unlocked"/>}
+      </button>
+
+    )
+  }
+}