Merge pull request #3496 from shockey/v/3.1.2

v3.1.2

.travis.yml

@@ -16,7 +16,7 @@ deploy:
     email: apiteam@swagger.io
     skip_cleanup: true
     api_key:
-      secure: "IJkLaACa+rfERf1O5nwlqOyuo9sbul3FBhBt4Un9P+DvEet3AoDPV9NQVLd8SkmQYKGbGQWF4BIdjrO5nqFD6Te+JTeUX5Uo/DFS/fu9qw1xv0dQpvbJFuoYnnFlbzGTEs4CFa8lbu3ZromFHQGOQxRobjsG1Kf0dWFSSzmND3g="
+      secure: "YKk5L1BL4oAixvLjWp+i85fNFXK85HKOlUt6QypkZkt23My5aywuYsv5VCLjjOtuWc72zbmOzP82DTBsuRswCRViXWCiNYhl42QTdvadHu0uIlM/FL6aNlvPpzXIws4bMvz1aYOTzFTnSnNuvCTzF1daW0+2ClOo3r0nLEdDfFg="
     on:
       tags: true
       repo: swagger-api/swagger-ui

README.md

@@ -20,14 +20,15 @@ For the older version of swagger-ui, refer to the [*2.x branch*](https://github.
 ## Compatibility
 The OpenAPI Specification has undergone 4 revisions since initial creation in 2010.  Compatibility between swagger-ui and the OpenAPI Specification is as follows:
 
-Swagger UI Version | Release Date | OpenAPI Spec compatibility | Notes | Status
------------------- | ------------ | -------------------------- | ----- | ------
-3.0.19              | 2017-07-14   | 2.0                        | [tag v3.0.19](https://github.com/swagger-api/swagger-ui/tree/v3.0.19) |
-2.2.10             | 2017-01-04   | 1.1, 1.2, 2.0              | [tag v2.2.10](https://github.com/swagger-api/swagger-ui/tree/v2.2.10) |
-2.1.5              | 2016-07-20   | 1.1, 1.2, 2.0              | [tag v2.1.5](https://github.com/swagger-api/swagger-ui/tree/v2.1.5) |
-2.0.24             | 2014-09-12   | 1.1, 1.2 | [tag v2.0.24](https://github.com/swagger-api/swagger-ui/tree/v2.0.24) |
-1.0.13             | 2013-03-08   | 1.1, 1.2 | [tag v1.0.13](https://github.com/swagger-api/swagger-ui/tree/v1.0.13) |
-1.0.1              | 2011-10-11   | 1.0, 1.1 | [tag v1.0.1](https://github.com/swagger-api/swagger-ui/tree/v1.0.1)   |
+Swagger UI Version | Release Date | OpenAPI Spec compatibility | Notes
+------------------ | ------------ | -------------------------- | -----
+3.1.2 | 2017-07-31 | 2.0, 3.0 | [tag v3.1.2](https://github.com/swagger-api/swagger-ui/tree/v3.1.2)
+3.0.21 | 2017-07-26 | 2.0 | [tag v3.0.21](https://github.com/swagger-api/swagger-ui/tree/v3.0.21)
+2.2.10 | 2017-01-04 | 1.1, 1.2, 2.0 | [tag v2.2.10](https://github.com/swagger-api/swagger-ui/tree/v2.2.10)
+2.1.5 | 2016-07-20 | 1.1, 1.2, 2.0 | [tag v2.1.5](https://github.com/swagger-api/swagger-ui/tree/v2.1.5)
+2.0.24 | 2014-09-12 | 1.1, 1.2 | [tag v2.0.24](https://github.com/swagger-api/swagger-ui/tree/v2.0.24)
+1.0.13 | 2013-03-08 | 1.1, 1.2 | [tag v1.0.13](https://github.com/swagger-api/swagger-ui/tree/v1.0.13)
+1.0.1 | 2011-10-11 | 1.0, 1.1 | [tag v1.0.1](https://github.com/swagger-api/swagger-ui/tree/v1.0.1)
 
 
 ### How to run
@@ -146,6 +147,7 @@ displayOperationId | Controls the display of operationId in operations list. The
 displayRequestDuration | Controls the display of the request duration (in milliseconds) for `Try it out` requests. The default is `false`.
 maxDisplayedTags | If set, limits the number of tagged operations displayed to at most this many. The default is to show all operations.
 filter | If set, enables filtering. The top bar will show an edit box that you can use to filter the tagged operations that are shown. Can be true/false to enable or disable, or an explicit filter string in which case filtering will be enabled using that string as the filter expression. Filtering is case sensitive matching the filter expression anywhere inside the tag.
+deepLinking | If set to `true`, enables dynamic deep linking for tags and operations. [Docs](https://github.com/swagger-api/swagger-ui/blob/master/docs/deep-linking.md)
 
 ### Plugins
 
@@ -235,6 +237,10 @@ Access-Control-Allow-Headers: Content-Type, api_key, Authorization
 
 Only headers with these names will be allowed to be sent by Swagger-UI.
 
+## Security contact
+
+Please disclose any security-related issues or vulnerabilities by emailing [security@swagger.io](mailto:security@swagger.io), instead of using the public issue tracker.
+
 ## License
 
 Copyright 2017 SmartBear Software

dist/index.html

@@ -76,6 +76,7 @@ window.onload = function() {
   const ui = SwaggerUIBundle({
     url: "http://petstore.swagger.io/v2/swagger.json",
     dom_id: '#swagger-ui',
+    deepLinking: true,
     presets: [
       SwaggerUIBundle.presets.apis,
       SwaggerUIStandalonePreset

dist/swagger-ui-bundle.js.map

@@ -1 +1 @@
-{"version":3,"file":"swagger-ui-bundle.js","sources":["webpack:///swagger-ui-bundle.js"],"mappings":"AAAA;;;;;AAsyKA;;;;;;AAktEA;;;;;;;;;;;;;;;;;;;;;;;;;;AAkqTA;;;;;;;;;;;;;;AAs8JA;;;;;;;;;AA4tnBA;;;;;AAmpQA;;;;;;AA+mXA","sourceRoot":""}
+{"version":3,"file":"swagger-ui-bundle.js","sources":["webpack:///swagger-ui-bundle.js"],"mappings":"AAAA;;;;;AAoyKA;;;;;;AAy+EA;;;;;;;;;;;;;;;;;;;;;;;;;;AA00TA;;;;;;;;;;;;;;AAs8JA;;;;;;;;;AA+5oBA;;;;;AA2lQA;AAm4DA;;;;;;AAo4YA;;;;;;AA0iaA;AAumvBA","sourceRoot":""}

dist/swagger-ui-standalone-preset.js.map

@@ -1 +1 @@
-{"version":3,"file":"swagger-ui-standalone-preset.js","sources":["webpack:///swagger-ui-standalone-preset.js"],"mappings":"AAAA;;;;;AA40CA;;;;;;AAqlFA","sourceRoot":""}
+{"version":3,"file":"swagger-ui-standalone-preset.js","sources":["webpack:///swagger-ui-standalone-preset.js"],"mappings":"AAAA;;;;;AA00CA;;;;;;AAmlFA","sourceRoot":""}

dist/swagger-ui.css.map

@@ -1 +1 @@
-{"version":3,"file":"swagger-ui.css","sources":[],"mappings":";;;","sourceRoot":""}
+{"version":3,"file":"swagger-ui.css","sources":[],"mappings":"","sourceRoot":""}

dist/swagger-ui.js.map

@@ -1 +1 @@
-{"version":3,"file":"swagger-ui.js","sources":["webpack:///swagger-ui.js"],"mappings":"AAAA;;;;;;AAk/aA","sourceRoot":""}
+{"version":3,"file":"swagger-ui.js","sources":["webpack:///swagger-ui.js"],"mappings":"AAAA;;;;;;AAwpcA","sourceRoot":""}

make-webpack-config.js

@@ -61,7 +61,6 @@ module.exports = function(rules, options) {
   }
 
   if( specialOptions.minimize ) {
-
     plugins.push(
       new webpack.optimize.UglifyJsPlugin({
         sourceMap: true,

package.json

@@ -1,6 +1,6 @@
 {
   "name": "swagger-ui",
-  "version": "3.0.19",
+  "version": "3.1.2",
   "main": "dist/swagger-ui.js",
   "repository": "git@github.com:swagger-api/swagger-ui.git",
   "contributors": [
@@ -58,6 +58,7 @@
     "react-height": "^2.0.0",
     "react-hot-loader": "1.3.1",
     "react-immutable-proptypes": "2.1.0",
+    "react-markdown": "^2.5.0",
     "react-motion": "0.4.4",
     "react-object-inspector": "0.2.1",
     "react-redux": "^4.x.x",
@@ -71,7 +72,7 @@
     "scroll-to-element": "^2.0.0",
     "serialize-error": "2.0.0",
     "shallowequal": "0.2.2",
-    "swagger-client": "3.0.18",
+    "swagger-client": "3.0.19",
     "url-parse": "^1.1.8",
     "whatwg-fetch": "0.11.1",
     "worker-loader": "^0.7.1",
@@ -109,7 +110,6 @@
     "karma-sourcemap-loader": "^0.3.7",
     "karma-webpack": "2.0.3",
     "less": "2.7.2",
-    "less-loader": "4.0.4",
     "license-checker": "^11.0.0",
     "mocha": "^3.4.2",
     "node-sass": "^4.5.0",

src/core/components/array-model.jsx

@@ -15,7 +15,7 @@ export default class ArrayModel extends Component {
   }
 
   render(){
-    let { getComponent, required, schema, depth, expandDepth } = this.props
+    let { getComponent, required, schema, depth, expandDepth, name } = this.props
     let items = schema.get("items")
     let title = schema.get("title") || name
     let properties = schema.filter( ( v, key) => ["type", "items", "$$ref"].indexOf(key) === -1 )
@@ -23,7 +23,7 @@ export default class ArrayModel extends Component {
     const ModelCollapse = getComponent("ModelCollapse")
     const Model = getComponent("Model")
 
-    const titleEl = title && 
+    const titleEl = title &&
       <span className="model-title">
         <span className="model-title__text">{ title }</span>
       </span>
@@ -44,4 +44,4 @@ export default class ArrayModel extends Component {
       { required && <span style={{ color: "red" }}>*</span>}
     </span>
   }
-}
+}

src/core/components/content-type.jsx

@@ -8,7 +8,7 @@ const noop = ()=>{}
 export default class ContentType extends React.Component {
 
   static propTypes = {
-    contentTypes: PropTypes.oneOfType([ImPropTypes.list, ImPropTypes.set]),
+    contentTypes: PropTypes.oneOfType([ImPropTypes.list, ImPropTypes.set, ImPropTypes.seq]),
     value: PropTypes.string,
     onChange: PropTypes.func,
     className: PropTypes.string
@@ -22,7 +22,9 @@ export default class ContentType extends React.Component {
 
   componentDidMount() {
     // Needed to populate the form, initially
-    this.props.onChange(this.props.contentTypes.first())
+    if(this.props.contentTypes) {
+      this.props.onChange(this.props.contentTypes.first())
+    }
   }
 
   onChangeWrapper = e => this.props.onChange(e.target.value)

src/core/components/info.jsx

@@ -15,7 +15,7 @@ class Path extends React.Component {
 
     return (
       <pre className="base-url">
-        [ Base url: {host}{basePath}]
+        [ Base URL: {host}{basePath} ]
       </pre>
     )
   }
@@ -88,12 +88,13 @@ export default class Info extends React.Component {
     const { url:externalDocsUrl, description:externalDocsDescription } = (externalDocs || fromJS({})).toJS()
 
     const Markdown = getComponent("Markdown")
+    const VersionStamp = getComponent("VersionStamp")
 
     return (
       <div className="info">
         <hgroup className="main">
           <h2 className="title" >{ title }
-            { version && <small><pre className="version"> { version } </pre></small> }
+            { version && <VersionStamp version={version}></VersionStamp> }
           </h2>
           { host || basePath ? <Path host={ host } basePath={ basePath } /> : null }
           { url && <a target="_blank" href={ url }><span className="url"> { url } </span></a> }

src/core/components/layout-utils.jsx

@@ -129,7 +129,8 @@ export class Select extends React.Component {
     value: PropTypes.any,
     onChange: PropTypes.func,
     multiple: PropTypes.bool,
-    allowEmptyValue: PropTypes.bool
+    allowEmptyValue: PropTypes.bool,
+    className: PropTypes.string
   }
 
   static defaultProps = {
@@ -142,7 +143,7 @@ export class Select extends React.Component {
 
     let value
 
-    if (props.value !== undefined) {
+    if (props.value) {
       value = props.value
     } else {
       value = props.multiple ? [""] : ""
@@ -178,7 +179,7 @@ export class Select extends React.Component {
     let value = this.state.value.toJS ? this.state.value.toJS() : this.state.value
 
     return (
-      <select multiple={ multiple } value={ value } onChange={ this.onChange } >
+      <select className={this.props.className} multiple={ multiple } value={ value } onChange={ this.onChange } >
         { allowEmptyValue ? <option value="">--</option> : null }
         {
           allowedValues.map(function (item, key) {

src/core/components/model-example.jsx

@@ -35,9 +35,9 @@ export default class ModelExample extends React.Component {
         <li className={ "tabitem" + ( isExecute || this.state.activeTab === "example" ? " active" : "") }>
           <a className="tablinks" data-name="example" onClick={ this.activeTab }>Example Value</a>
         </li>
-        <li className={ "tabitem" + ( !isExecute && this.state.activeTab === "model" ? " active" : "") }>
+        { schema ? <li className={ "tabitem" + ( !isExecute && this.state.activeTab === "model" ? " active" : "") }>
           <a className={ "tablinks" + ( isExecute ? " inactive" : "" )} data-name="model" onClick={ this.activeTab }>Model</a>
-        </li>
+        </li> : null }
       </ul>
       <div>
         {

src/core/components/model.jsx

@@ -17,6 +17,9 @@ export default class Model extends Component {
     if ( ref.indexOf("#/definitions/") !== -1 ) {
       return ref.replace(/^.*#\/definitions\//, "")
     }
+    if ( ref.indexOf("#/components/schemas/") !== -1 ) {
+      return ref.replace("#/components/schemas/", "")
+    }
   }
 
   getRefSchema =( model )=> {
@@ -26,7 +29,7 @@ export default class Model extends Component {
   }
 
   render () {
-    let { schema, getComponent, required, name, isRef } = this.props
+    let { getComponent, specSelectors, schema, required, name, isRef } = this.props
     let ObjectModel = getComponent("ObjectModel")
     let ArrayModel = getComponent("ArrayModel")
     let PrimitiveModel = getComponent("PrimitiveModel")
@@ -34,6 +37,8 @@ export default class Model extends Component {
     let modelName = $$ref && this.getModelName( $$ref )
     let modelSchema, type
 
+    const deprecated = specSelectors.isOAS3() && schema.get("deprecated")
+
     if ( schema && (schema.get("type") || schema.get("properties")) ) {
       modelSchema = schema
     } else if ( $$ref ) {
@@ -47,17 +52,30 @@ export default class Model extends Component {
 
     switch(type) {
       case "object":
-        return <ObjectModel className="object" { ...this.props } schema={ modelSchema }
-                                              name={ name || modelName }
-                                              isRef={ isRef!== undefined ? isRef : !!$$ref }/>
+        return <ObjectModel
+          className="object" { ...this.props }
+          schema={ modelSchema }
+          name={ name || modelName }
+          deprecated={deprecated}
+          isRef={ isRef!== undefined ? isRef : !!$$ref } />
       case "array":
-        return <ArrayModel className="array" { ...this.props } schema={ modelSchema } required={ required } />
+        return <ArrayModel
+          className="array" { ...this.props }
+          schema={ modelSchema }
+          name={ name || modelName }
+          deprecated={deprecated}
+          required={ required } />
       case "string":
       case "number":
       case "integer":
       case "boolean":
       default:
-        return <PrimitiveModel getComponent={ getComponent } schema={ modelSchema } required={ required }/>
-    }
+        return <PrimitiveModel
+          { ...this.props }
+          getComponent={ getComponent }
+          schema={ modelSchema }
+          name={ name || modelName }
+          deprecated={deprecated}
+          required={ required }/>    }
   }
-}
+}

src/core/components/models.jsx

@@ -24,8 +24,8 @@ export default class Models extends Component {
     return <section className={ showModels ? "models is-open" : "models"}>
       <h4 onClick={() => layoutActions.show("models", !showModels)}>
         <span>Models</span>
-        <svg width="20" height="20">
-          <use xlinkHref="#large-arrow" />
+        <svg className="arrow" width="20" height="20">
+          <use xlinkHref={showModels ? "#large-arrow-down" : "#large-arrow"} />
         </svg>
       </h4>
       <Collapse isOpened={showModels}>

src/core/components/object-model.jsx

@@ -23,7 +23,7 @@ export default class ObjectModel extends Component {
     let properties = schema.get("properties")
     let additionalProperties = schema.get("additionalProperties")
     let title = schema.get("title") || name
-    let required = schema.get("required")
+    let requiredProperties = schema.get("required")
 
     const JumpToPath = getComponent("JumpToPath", true)
     const Markdown = getComponent("Markdown")
@@ -63,14 +63,16 @@ export default class ObjectModel extends Component {
               {
                 !(properties && properties.size) ? null : properties.entrySeq().map(
                     ([key, value]) => {
-                      let isRequired = List.isList(required) && required.contains(key)
+                      let isRequired = List.isList(requiredProperties) && requiredProperties.contains(key)
                       let propertyStyle = { verticalAlign: "top", paddingRight: "0.2em" }
                       if ( isRequired ) {
                         propertyStyle.fontWeight = "bold"
                       }
 
                       return (<tr key={key}>
-                        <td style={ propertyStyle }>{ key }:</td>
+                        <td style={ propertyStyle }>
+                          { key }{ isRequired && <span style={{ color: "red" }}>*</span> }
+                        </td>
                         <td style={{ verticalAlign: "top" }}>
                           <Model key={ `object-${name}-${key}_${value}` } { ...props }
                                  required={ isRequired }

src/core/components/operation.jsx

@@ -210,6 +210,7 @@ export default class Operation extends PureComponent {
               }
               <Parameters
                 parameters={parameters}
+                operation={operation}
                 onChangeKey={onChangeKey}
                 onTryoutClick = { this.onTryoutClick }
                 onCancelClick = { this.onCancelClick }

src/core/components/parameters.jsx

@@ -72,7 +72,9 @@ export default class Parameters extends Component {
     return (
       <div className="opblock-section">
         <div className="opblock-section-header">
-          <h4 className="opblock-title">Parameters</h4>
+          <div className="tab-header">
+            <h4 className="opblock-title">Parameters</h4>
+          </div>
             { allowTryItOut ? (
               <TryItOutButton enabled={ tryItOutEnabled } onCancelClick={ onCancelClick } onTryoutClick={ onTryoutClick } />
             ) : null }

src/core/components/providers/markdown.jsx

@@ -3,15 +3,8 @@ import PropTypes from "prop-types"
 import Remarkable from "react-remarkable"
 import sanitize from "sanitize-html"
 
-const sanitizeOptions = {
-  textFilter: function(text) {
-    return text
-      .replace(/"/g, "\"")
-  }
-}
-
 function Markdown({ source }) {
-  const sanitized = sanitize(source, sanitizeOptions)
+  const sanitized = sanitizer(source)
 
   // sometimes the sanitizer returns "undefined" as a string
   if(!source || !sanitized || sanitized === "undefined") {
@@ -31,3 +24,14 @@ Markdown.propTypes = {
 }
 
 export default Markdown
+
+const sanitizeOptions = {
+  textFilter: function(text) {
+    return text
+      .replace(/"/g, "\"")
+  }
+}
+
+export function sanitizer(str) {
+  return sanitize(str, sanitizeOptions)
+}

src/core/components/response-body.jsx

@@ -40,7 +40,7 @@ export default class ResponseBody extends React.Component {
 
       // Image
     } else if (/^image\//i.test(contentType)) {
-      bodyEl = <img src={ url } />
+      bodyEl = <img style={{ maxWidth: "100%" }} src={ window.URL.createObjectURL(content) } />
 
       // Audio
     } else if (/^audio\//i.test(contentType)) {

src/core/components/response.jsx

@@ -1,6 +1,6 @@
 import React from "react"
 import PropTypes from "prop-types"
-import { fromJS } from "immutable"
+import { fromJS, Seq } from "immutable"
 import { getSampleSchema } from "core/utils"
 
 const getExampleComponent = ( sampleResponse, examples, HighlightCode ) => {
@@ -31,6 +31,13 @@ const getExampleComponent = ( sampleResponse, examples, HighlightCode ) => {
 }
 
 export default class Response extends React.Component {
+  constructor(props, context) {
+    super(props, context)
+
+    this.state = {
+      responseContentType: ""
+    }
+  }
 
   static propTypes = {
     code: PropTypes.string.isRequired,
@@ -59,16 +66,29 @@ export default class Response extends React.Component {
     } = this.props
 
     let { inferSchema } = fn
+    let { isOAS3 } = specSelectors
 
-    let schema = inferSchema(response.toJS())
     let headers = response.get("headers")
     let examples = response.get("examples")
+    let links = response.get("links")
     const Headers = getComponent("headers")
     const HighlightCode = getComponent("highlightCode")
     const ModelExample = getComponent("modelExample")
     const Markdown = getComponent( "Markdown" )
+    const OperationLink = getComponent("operationLink")
+    const ContentType = getComponent("contentType")
 
-    let sampleResponse = schema ? getSampleSchema(schema, contentType, { includeReadOnly: true }) : null
+    var sampleResponse
+    var schema
+
+    if(isOAS3()) {
+      let oas3SchemaForContentType = response.getIn(["content", this.state.responseContentType, "schema"])
+      sampleResponse = oas3SchemaForContentType ? getSampleSchema(oas3SchemaForContentType.toJS(), this.state.responseContentType, { includeReadOnly: true }) : null
+      schema = oas3SchemaForContentType ? inferSchema(oas3SchemaForContentType.toJS()) : null
+    } else {
+      schema = inferSchema(response.toJS())
+      sampleResponse = schema ? getSampleSchema(schema, contentType, { includeReadOnly: true }) : null
+    }
     let example = getExampleComponent( sampleResponse, examples, HighlightCode )
 
     return (
@@ -82,6 +102,12 @@ export default class Response extends React.Component {
             <Markdown source={ response.get( "description" ) } />
           </div>
 
+          { isOAS3 ? <ContentType
+              value={this.state.responseContentType}
+              contentTypes={ response.get("content") ? response.get("content").keySeq() : Seq() }
+              onChange={(val) => this.setState({ responseContentType: val })}
+              className="response-content-type" /> : null }
+
           { example ? (
             <ModelExample
               getComponent={ getComponent }
@@ -94,8 +120,15 @@ export default class Response extends React.Component {
             <Headers headers={ headers }/>
           ) : null}
 
-        </td>
 
+        </td>
+        {specSelectors.isOAS3() ? <td>
+          { links ?
+            links.toSeq().map((link, key) => {
+              return <OperationLink key={key} name={key} link={ link }/>
+            })
+          : <i>No links</i>}
+        </td> : null}
       </tr>
     )
   }

src/core/components/responses.jsx

@@ -42,13 +42,13 @@ export default class Responses extends React.Component {
       <div className="responses-wrapper">
         <div className="opblock-section-header">
           <h4>Responses</h4>
-            <label>
+            { specSelectors.isOAS3() ? null : <label>
               <span>Response content type</span>
               <ContentType value={producesValue}
                          onChange={this.onChangeProducesWrapper}
                          contentTypes={produces}
                          className="execute-content-type"/>
-                     </label>
+                     </label> }
         </div>
         <div className="responses-inner">
           {
@@ -68,6 +68,7 @@ export default class Responses extends React.Component {
               <tr className="responses-header">
                 <td className="col col_header response-col_status">Code</td>
                 <td className="col col_header response-col_description">Description</td>
+                { specSelectors.isOAS3() ? <td className="col col_header response-col_description">Links</td> : null }
               </tr>
             </thead>
             <tbody>

src/core/components/schemes.jsx

@@ -19,8 +19,9 @@ export default class Schemes extends React.Component {
   }
 
   componentWillReceiveProps(nextProps) {
-    if ( this.props.operationScheme && !nextProps.schemes.has(this.props.operationScheme) ) {
-      //fire 'change' event if our selected scheme is no longer an option
+    if ( !this.props.operationScheme || !nextProps.schemes.has(this.props.operationScheme) ) {
+      // if we don't have a selected operationScheme or if our selected scheme is no longer an option,
+      // then fire 'change' event and select the first scheme in the list of options
       this.setScheme(nextProps.schemes.first())
     }
   }

src/core/components/version-stamp.jsx

@@ -0,0 +1,12 @@
+import React from "react"
+import PropTypes from "prop-types"
+
+const VersionStamp = ({ version }) => {
+  return <small><pre className="version"> { version } </pre></small>
+}
+
+VersionStamp.propTypes = {
+  version: PropTypes.string.isRequired
+}
+
+export default VersionStamp

src/core/index.js

@@ -4,34 +4,7 @@ import System from "core/system"
 import win from "core/window"
 import ApisPreset from "core/presets/apis"
 import * as AllPlugins from "core/plugins/all"
-import { parseSeach, filterConfigs } from "core/utils"
-
-const CONFIGS = [
-  "url",
-  "urls",
-  "urls.primaryName",
-  "spec",
-  "validatorUrl",
-  "onComplete",
-  "onFailure",
-  "authorizations",
-  "docExpansion",
-  "tagsSorter",
-  "maxDisplayedTags",
-  "filter",
-  "operationsSorter",
-  "supportedSubmitMethods",
-  "dom_id",
-  "defaultModelRendering",
-  "oauth2RedirectUrl",
-  "showRequestHeaders",
-  "custom",
-  "modelPropertyMacro",
-  "parameterMacro",
-  "displayOperationId",
-  "displayRequestDuration",
-  "deepLinking",
- ]
+import { parseSearch } from "core/utils"
 
 // eslint-disable-next-line no-undef
 const { GIT_DIRTY, GIT_COMMIT, PACKAGE_VERSION, HOSTNAME, BUILD_TIME } = buildInfo
@@ -67,6 +40,7 @@ module.exports = function SwaggerUI(opts) {
     // Initial set of plugins ( TODO rename this, or refactor - we don't need presets _and_ plugins. Its just there for performance.
     // Instead, we can compile the first plugin ( it can be a collection of plugins ), then batch the rest.
     presets: [
+      ApisPreset
     ],
 
     // Plugins; ( loaded after presets )
@@ -82,7 +56,7 @@ module.exports = function SwaggerUI(opts) {
     store: { },
   }
 
-  let queryConfig = parseSeach()
+  let queryConfig = parseSearch()
 
   const constructorConfig = deepExtend({}, defaults, opts, queryConfig)
 
@@ -125,7 +99,7 @@ module.exports = function SwaggerUI(opts) {
 
     let localConfig = system.specSelectors.getLocalConfig ? system.specSelectors.getLocalConfig() : {}
     let mergedConfig = deepExtend({}, localConfig, constructorConfig, fetchedConfig || {}, queryConfig)
-    store.setConfigs(filterConfigs(mergedConfig, CONFIGS))
+    store.setConfigs(mergedConfig)
 
     if (fetchedConfig !== null) {
       if (!queryConfig.url && typeof mergedConfig.spec === "object" && Object.keys(mergedConfig.spec).length) {

src/core/json-schema-components.js

@@ -57,7 +57,8 @@ export class JsonSchema_string extends Component {
 
     if ( enumValue ) {
       const Select = getComponent("Select")
-      return (<Select allowedValues={ enumValue }
+      return (<Select className={ errors.length ? "invalid" : ""}
+                      allowedValues={ enumValue }
                       value={ value }
                       allowEmptyValue={ !required }
                       onChange={ this.onEnumChange }/>)
@@ -121,6 +122,7 @@ export class JsonSchema_array extends PureComponent {
   render() {
     let { getComponent, required, schema, fn } = this.props
 
+    let errors = schema.errors || []
     let itemSchema = fn.inferSchema(schema.items)
 
     const JsonSchemaForm = getComponent("JsonSchemaForm")
@@ -131,19 +133,17 @@ export class JsonSchema_array extends PureComponent {
 
     if ( enumValue ) {
       const Select = getComponent("Select")
-      return (<Select multiple={ true }
+      return (<Select className={ errors.length ? "invalid" : ""}
+                     multiple={ true }
                      value={ value }
                      allowedValues={ enumValue }
                      allowEmptyValue={ !required }
                      onChange={ this.onEnumChange }/>)
     }
 
-    let errors = schema.errors || []
-
     return (
       <div>
-        { !value || value.count() < 1 ?
-          (errors.length ? <span style={{ color: "red", fortWeight: "bold" }}>{ errors[0] }</span> : null) :
+        { !value || value.count() < 1 ? null :
           value.map( (item,i) => {
             let schema = Object.assign({}, itemSchema)
             if ( errors.length ) {
@@ -153,12 +153,12 @@ export class JsonSchema_array extends PureComponent {
           return (
             <div key={i} className="json-schema-form-item">
               <JsonSchemaForm fn={fn} getComponent={getComponent} value={item} onChange={(val) => this.onItemChange(val, i)} schema={schema} />
-              <Button className="json-schema-form-item-remove" onClick={()=> this.removeItem(i)} > - </Button>
+              <Button className="btn btn-sm json-schema-form-item-remove" onClick={()=> this.removeItem(i)} > - </Button>
             </div>
             )
           }).toArray()
         }
-        <Button className="json-schema-form-item-add" onClick={this.addItem}> Add item </Button>
+        <Button className={`btn btn-sm json-schema-form-item-add ${errors.length ? "invalid" : null}`} onClick={this.addItem}> Add item </Button>
       </div>
     )
   }
@@ -170,12 +170,14 @@ export class JsonSchema_boolean extends Component {
 
   onEnumChange = (val) => this.props.onChange(val)
   render() {
-    let { getComponent, required, value } = this.props
+    let { getComponent, value, schema } = this.props
+    let errors = schema.errors || []
     const Select = getComponent("Select")
 
-    return (<Select value={ String(value) }
+    return (<Select className={ errors.length ? "invalid" : ""}
+                    value={ String(value) }
                     allowedValues={ fromJS(["true", "false"]) }
-                    allowEmptyValue={ !required }
+                    allowEmptyValue={ true }
                     onChange={ this.onEnumChange }/>)
   }
 }

src/core/path-translator.js

@@ -1,67 +0,0 @@
-import get from "lodash/get"
-
-export function transformPathToArray(property, jsSpec) {
-  if(property.slice(0,9) === "instance.") {
-    var str = property.slice(9)
-  } else { // eslint-disable-next-line no-redeclare
-    var str = property
-  }
-
-  var pathArr = []
-
-  str
-    .split(".")
-    .map(item => {
-      // "key[0]" becomes ["key", "0"]
-      if(item.includes("[")) {
-        let index = parseInt(item.match(/\[(.*)\]/)[1])
-        let keyName = item.slice(0, item.indexOf("["))
-        return [keyName, index.toString()]
-      } else {
-        return item
-      }
-    })
-    .reduce(function(a, b) {
-      // flatten!
-      return a.concat(b)
-    }, [])
-    .concat([""]) // add an empty item into the array, so we don't get stuck with something in our buffer below
-    .reduce((buffer, curr) => {
-      let obj = pathArr.length ? get(jsSpec, pathArr) : jsSpec
-
-      if(get(obj, makeAccessArray(buffer, curr))) {
-        if(buffer.length) {
-          pathArr.push(buffer)
-        }
-        if(curr.length) {
-          pathArr.push(curr)
-        }
-        return ""
-      } else {
-        // attach key to buffer
-        return `${buffer}${buffer.length ? "." : ""}${curr}`
-      }
-    }, "")
-
-  if(typeof get(jsSpec, pathArr) !== "undefined") {
-    return pathArr
-  } else {
-    // if our path is not correct (there is no value at the path),
-    // return null
-    return null
-  }
-}
-
-function makeAccessArray(buffer, curr) {
-  let arr = []
-
-  if(buffer.length) {
-    arr.push(buffer)
-  }
-
-  if(curr.length) {
-    arr.push(curr)
-  }
-
-  return arr
-}

src/core/plugins/auth/actions.js

@@ -73,7 +73,7 @@ export const authorizePassword = ( auth ) => ( { authActions } ) => {
   let { schema, name, username, password, passwordType, clientId, clientSecret } = auth
   let form = {
     grant_type: "password",
-    scopes: encodeURIComponent(auth.scopes.join(scopeSeparator))
+    scope: encodeURIComponent(auth.scopes.join(scopeSeparator))
   }
   let query = {}
   let headers = {}

src/core/plugins/oas3/components/callbacks.jsx

@@ -0,0 +1,49 @@
+import React from "react"
+import PropTypes from "prop-types"
+
+const Callbacks = (props) => {
+  let { callbacks, getComponent } = props
+  // const Markdown = getComponent("Markdown")
+  const Operation = getComponent("operation", true)
+
+  if(!callbacks) {
+    return <span>No callbacks</span>
+  }
+
+  let callbackElements = callbacks.map((callback, callbackName) => {
+    return <div key={callbackName}>
+      <h2>{callbackName}</h2>
+      { callback.map((pathItem, pathItemName) => {
+        return <div key={pathItemName}>
+          { pathItem.map((operation, method) => {
+            return <Operation
+              operation={operation}
+              key={method}
+              method={method}
+              isShownKey={["callbacks", operation.get("id"), callbackName]}
+              path={pathItemName}
+              allowTryItOut={false}
+              {...props}></Operation>
+            // return <pre>{JSON.stringify(operation)}</pre>
+          }) }
+        </div>
+      }) }
+    </div>
+    // return <div>
+    //   <h2>{name}</h2>
+    //   {callback.description && <Markdown source={callback.description}/>}
+    //   <pre>{JSON.stringify(callback)}</pre>
+    // </div>
+  })
+  return <div>
+    {callbackElements}
+  </div>
+}
+
+Callbacks.propTypes = {
+  getComponent: PropTypes.func.isRequired,
+  callbacks: PropTypes.array.isRequired
+
+}
+
+export default Callbacks

src/core/plugins/oas3/components/index.js

@@ -0,0 +1,9 @@
+import Callbacks from "./callbacks"
+import RequestBody from "./request-body"
+import OperationLink from "./operation-link.jsx"
+
+export default {
+  Callbacks,
+  RequestBody,
+  operationLink: OperationLink
+}

src/core/plugins/oas3/components/operation-link.jsx

@@ -0,0 +1,37 @@
+import React, { Component } from "react"
+import PropTypes from "prop-types"
+import ImPropTypes from "react-immutable-proptypes"
+
+class OperationLink extends Component {
+  render() {
+    const { link, name } = this.props
+
+    let targetOp = link.get("operationId") || link.get("operationRef")
+    let parameters = link.get("parameters") && link.get("parameters").toJS()
+    let description = link.get("description")
+
+    return <span>
+      <div style={{ padding: "5px 2px" }}>{name}{description ? `: ${description}` : ""}</div>
+      <pre>
+        Operation `{targetOp}`<br /><br />
+        Parameters {padString(0, JSON.stringify(parameters, null, 2)) || "{}"}<br />
+      </pre>
+    </span>
+  }
+
+}
+
+function padString(n, string) {
+  if(typeof string !== "string") { return "" }
+  return string
+    .split("\n")
+    .map((line, i) => i > 0 ? Array(n + 1).join(" ") + line : line)
+    .join("\n")
+}
+
+OperationLink.propTypes = {
+  link: ImPropTypes.orderedMap.isRequired,
+  name: PropTypes.String
+}
+
+export default OperationLink

src/core/plugins/oas3/components/request-body.jsx

@@ -0,0 +1,42 @@
+import React from "react"
+import PropTypes from "prop-types"
+import ImPropTypes from "react-immutable-proptypes"
+import { OrderedMap } from "immutable"
+import { getSampleSchema } from "core/utils"
+
+
+const RequestBody = ({ requestBody, getComponent, specSelectors, contentType }) => {
+  const Markdown = getComponent("Markdown")
+  const ModelExample = getComponent("modelExample")
+  const HighlightCode = getComponent("highlightCode")
+
+  const requestBodyDescription = (requestBody && requestBody.get("description")) || null
+  const requestBodyContent = (requestBody && requestBody.get("content")) || new OrderedMap()
+  contentType = contentType || requestBodyContent.keySeq().first()
+
+  const mediaTypeValue = requestBodyContent.get(contentType)
+
+  const sampleSchema = getSampleSchema(mediaTypeValue.get("schema").toJS(), contentType)
+
+  return <div>
+    { requestBodyDescription &&
+      <Markdown source={requestBodyDescription} />
+    }
+    <ModelExample
+      getComponent={ getComponent }
+      specSelectors={ specSelectors }
+      expandDepth={1}
+      schema={mediaTypeValue.get("schema")}
+      example={<HighlightCode value={sampleSchema} />}
+      />
+  </div>
+}
+
+RequestBody.propTypes = {
+  requestBody: ImPropTypes.orderedMap.isRequired,
+  getComponent: PropTypes.func.isRequired,
+  specSelectors: PropTypes.object.isRequired,
+  contentType: PropTypes.string.isRequired
+}
+
+export default RequestBody

src/core/plugins/oas3/helpers.js

@@ -0,0 +1,36 @@
+import React from "react"
+
+export function isOAS3(jsSpec) {
+  const oasVersion = jsSpec.get("openapi")
+  if(!oasVersion) {
+    return false
+  }
+
+  return oasVersion.startsWith("3.0.0")
+}
+
+export function isSwagger2(jsSpec) {
+  const swaggerVersion = jsSpec.get("swagger")
+  if(!swaggerVersion) {
+    return false
+  }
+
+  return swaggerVersion.startsWith("2")
+}
+
+export function OAS3ComponentWrapFactory(Component) {
+  return (Ori, system) => (props) => {
+    if(system && system.specSelectors && system.specSelectors.specJson) {
+      const spec = system.specSelectors.specJson()
+
+      if(isOAS3(spec)) {
+        return <Component {...props} {...system} Ori={Ori}></Component>
+      } else {
+        return <Ori {...props}></Ori>
+      }
+    } else {
+      console.warn("OAS3 wrapper: couldn't get spec")
+      return null
+    }
+  }
+}

src/core/plugins/oas3/index.js

@@ -0,0 +1,17 @@
+// import reducers from "./reducers"
+// import * as actions from "./actions"
+import * as wrapSelectors from "./wrap-selectors"
+import components from "./components"
+import wrapComponents from "./wrap-components"
+
+export default function() {
+  return {
+    components,
+    wrapComponents,
+    statePlugins: {
+      spec: {
+        wrapSelectors
+      }
+    }
+  }
+}

src/core/plugins/oas3/wrap-components/index.js

@@ -0,0 +1,15 @@
+import Markdown from "./markdown"
+import parameters from "./parameters"
+import VersionStamp from "./version-stamp"
+import OnlineValidatorBadge from "./online-validator-badge"
+import Model from "./model"
+import TryItOutButton from "./try-it-out-button"
+
+export default {
+  Markdown,
+  parameters,
+  VersionStamp,
+  model: Model,
+  onlineValidatorBadge: OnlineValidatorBadge,
+  TryItOutButton
+}

src/core/plugins/oas3/wrap-components/markdown.js

@@ -0,0 +1,11 @@
+import React from "react"
+import ReactMarkdown from "react-markdown"
+import { OAS3ComponentWrapFactory } from "../helpers"
+import { sanitizer } from "core/components/providers/markdown"
+
+export default OAS3ComponentWrapFactory(({ source }) => { return source ? (
+  <ReactMarkdown
+    source={sanitizer(source)}
+    className={"renderedMarkdown"}
+    />
+) : null})

src/core/plugins/oas3/wrap-components/model.jsx

@@ -0,0 +1,37 @@
+import React, { Component } from "react"
+import PropTypes from "prop-types"
+import { OAS3ComponentWrapFactory } from "../helpers"
+import { Model } from "core/components/model"
+
+
+class ModelComponent extends Component {
+  static propTypes = {
+    schema: PropTypes.object.isRequired,
+    name: PropTypes.string,
+    getComponent: PropTypes.func.isRequired,
+    specSelectors: PropTypes.object.isRequired,
+    expandDepth: PropTypes.number
+  }
+
+  render(){
+    let { schema } = this.props
+    let classes = ["model-box"]
+    let isDeprecated = schema.get("deprecated") === true
+    let message = null
+
+    if(isDeprecated) {
+      classes.push("deprecated")
+      message = <span className="model-deprecated-warning">Deprecated:</span>
+    }
+
+    return <div className={classes.join(" ")}>
+      {message}
+      <Model { ...this.props }
+        depth={ 1 }
+        expandDepth={ this.props.expandDepth || 0 }
+        />
+    </div>
+  }
+}
+
+export default OAS3ComponentWrapFactory(ModelComponent)

src/core/plugins/oas3/wrap-components/online-validator-badge.js

@@ -0,0 +1,5 @@
+import { OAS3ComponentWrapFactory } from "../helpers"
+
+// We're disabling the Online Validator Badge until the online validator
+// can handle OAS3 specs.
+export default OAS3ComponentWrapFactory(() => null)

src/core/plugins/oas3/wrap-components/parameters.jsx

@@ -0,0 +1,181 @@
+import React, { Component } from "react"
+import PropTypes from "prop-types"
+import Im, { Map } from "immutable"
+import ImPropTypes from "react-immutable-proptypes"
+import { OAS3ComponentWrapFactory } from "../helpers"
+
+// More readable, just iterate over maps, only
+const eachMap = (iterable, fn) => iterable.valueSeq().filter(Im.Map.isMap).map(fn)
+
+class Parameters extends Component {
+
+  constructor(props) {
+   super(props)
+   this.state = {
+     callbackVisible: false,
+     parametersVisible: true,
+     requestBodyContentType: ""
+   }
+ }
+
+  static propTypes = {
+    parameters: ImPropTypes.list.isRequired,
+    specActions: PropTypes.object.isRequired,
+    operation: PropTypes.object.isRequired,
+    getComponent: PropTypes.func.isRequired,
+    specSelectors: PropTypes.object.isRequired,
+    fn: PropTypes.object.isRequired,
+    tryItOutEnabled: PropTypes.bool,
+    allowTryItOut: PropTypes.bool,
+    onTryoutClick: PropTypes.func,
+    onCancelClick: PropTypes.func,
+    onChangeKey: PropTypes.array,
+    pathMethod: PropTypes.array.isRequired
+  }
+
+
+  static defaultProps = {
+    onTryoutClick: Function.prototype,
+    onCancelClick: Function.prototype,
+    tryItOutEnabled: false,
+    allowTryItOut: true,
+    onChangeKey: [],
+  }
+
+  onChange = ( param, value, isXml ) => {
+    let {
+      specActions: { changeParam },
+      onChangeKey,
+    } = this.props
+
+    changeParam( onChangeKey, param.get("name"), value, isXml)
+  }
+
+  onChangeConsumesWrapper = ( val ) => {
+    let {
+      specActions: { changeConsumesValue },
+      onChangeKey
+    } = this.props
+
+    changeConsumesValue(onChangeKey, val)
+  }
+
+  toggleTab = (tab) => {
+    if(tab === "parameters"){
+      return this.setState({
+        parametersVisible: true,
+        callbackVisible: false
+      })
+    }else if(tab === "callbacks"){
+      return this.setState({
+        callbackVisible: true,
+        parametersVisible: false
+      })
+    }
+  }
+
+  render(){
+
+    let {
+      onTryoutClick,
+      onCancelClick,
+      parameters,
+      allowTryItOut,
+      tryItOutEnabled,
+
+      fn,
+      getComponent,
+      specSelectors,
+      pathMethod,
+      operation
+    } = this.props
+
+    const ParameterRow = getComponent("parameterRow")
+    const TryItOutButton = getComponent("TryItOutButton")
+    const ContentType = getComponent("contentType")
+    const Callbacks = getComponent("Callbacks", true)
+    const RequestBody = getComponent("RequestBody", true)
+
+    const isExecute = tryItOutEnabled && allowTryItOut
+    const { isOAS3 } = specSelectors
+
+    const requestBody = operation.get("requestBody")
+    return (
+      <div className="opblock-section">
+        <div className="opblock-section-header">
+          <div className="tab-header">
+            <div onClick={() => this.toggleTab("parameters")} className={`tab-item ${this.state.parametersVisible && "active"}`}>
+              <h4 className="opblock-title"><span>Parameters</span></h4>
+            </div>
+            { operation.get("callbacks") ?
+              (
+                <div onClick={() => this.toggleTab("callbacks")} className={`tab-item ${this.state.callbackVisible && "active"}`}>
+                  <h4 className="opblock-title"><span>Callbacks</span></h4>
+                </div>
+              ) : null
+            }
+          </div>
+            { allowTryItOut ? (
+              <TryItOutButton enabled={ tryItOutEnabled } onCancelClick={ onCancelClick } onTryoutClick={ onTryoutClick } />
+            ) : null }
+        </div>
+        {this.state.parametersVisible ? <div className="parameters-container">
+          { !parameters.count() ? <div className="opblock-description-wrapper"><p>No parameters</p></div> :
+            <div className="table-container">
+              <table className="parameters">
+                <thead>
+                  <tr>
+                    <th className="col col_header parameters-col_name">Name</th>
+                    <th className="col col_header parameters-col_description">Description</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {
+                    eachMap(parameters, (parameter) => (
+                      <ParameterRow fn={ fn }
+                        getComponent={ getComponent }
+                        param={ parameter }
+                        key={ parameter.get( "name" ) }
+                        onChange={ this.onChange }
+                        onChangeConsumes={this.onChangeConsumesWrapper}
+                        specSelectors={ specSelectors }
+                        pathMethod={ pathMethod }
+                        isExecute={ isExecute }/>
+                    )).toArray()
+                  }
+                </tbody>
+              </table>
+            </div>
+          }
+        </div> : "" }
+
+        {this.state.callbackVisible ? <div className="callbacks-container opblock-description-wrapper">
+          <Callbacks callbacks={Map(operation.get("callbacks"))} />
+        </div> : "" }
+        {
+          isOAS3() && requestBody && this.state.parametersVisible &&
+          <div className="opblock-section">
+            <div className="opblock-section-header">
+              <h4 className={`opblock-title parameter__name ${requestBody.get("required") && "required"}`}>Request body</h4>
+              <label>
+                <ContentType
+                  value={this.state.requestBodyContentType}
+                  contentTypes={ requestBody.get("content").keySeq() }
+                  onChange={(val) => this.setState({ requestBodyContentType: val })}
+                  className="body-param-content-type" />
+              </label>
+            </div>
+            <div className="opblock-description-wrapper">
+              <RequestBody
+                requestBody={requestBody}
+                contentType={this.state.requestBodyContentType}/>
+            </div>
+          </div>
+        }
+      </div>
+    )
+  }
+}
+
+
+export default OAS3ComponentWrapFactory(Parameters)

src/core/plugins/oas3/wrap-components/try-it-out-button.jsx

@@ -0,0 +1,5 @@
+import { OAS3ComponentWrapFactory } from "../helpers"
+
+export default OAS3ComponentWrapFactory(() => {
+  return null
+})

src/core/plugins/oas3/wrap-components/version-stamp.jsx

@@ -0,0 +1,13 @@
+import React from "react"
+import { OAS3ComponentWrapFactory } from "../helpers"
+
+export default OAS3ComponentWrapFactory((props) => {
+  const { Ori } = props
+
+  return <span>
+    <Ori {...props} />
+    <small style={{ backgroundColor: "#89bf04" }}>
+      <pre className="version">OAS3</pre>
+    </small>
+  </span>
+})

src/core/plugins/oas3/wrap-selectors.js

@@ -0,0 +1,67 @@
+import { createSelector } from "reselect"
+import { Map } from "immutable"
+import { isOAS3 as isOAS3Helper, isSwagger2 as isSwagger2Helper } from "./helpers"
+
+
+// Helpers
+
+function onlyOAS3(selector) {
+  return (ori, system) => (...args) => {
+    const spec = system.getSystem().specSelectors.specJson()
+    if(isOAS3Helper(spec)) {
+      return selector(...args)
+    } else {
+      return ori(...args)
+    }
+  }
+}
+
+const state = state => {
+  return state || Map()
+}
+
+const nullSelector =  createSelector(() => null)
+
+const OAS3NullSelector = onlyOAS3(nullSelector)
+
+const specJson = createSelector(
+  state,
+  spec => spec.get("json", Map())
+)
+
+const specResolved = createSelector(
+  state,
+  spec => spec.get("resolved", Map())
+)
+
+const spec = state => {
+  let res = specResolved(state)
+  if(res.count() < 1)
+    res = specJson(state)
+  return res
+}
+
+// Wrappers
+
+export const definitions = onlyOAS3(createSelector(
+  spec,
+  spec => spec.getIn(["components", "schemas"]) || Map()
+))
+
+export const host = OAS3NullSelector
+export const basePath = OAS3NullSelector
+export const consumes = OAS3NullSelector
+export const produces = OAS3NullSelector
+export const schemes = OAS3NullSelector
+
+// New selectors
+
+export const isOAS3 = (ori, system) => () => {
+  const spec = system.getSystem().specSelectors.specJson()
+  return isOAS3Helper(spec)
+}
+
+export const isSwagger2 = (ori, system) => () => {
+  const spec = system.getSystem().specSelectors.specJson()
+  return isSwagger2Helper(spec)
+}

src/core/plugins/spec/selectors.js

@@ -46,6 +46,15 @@ export const spec = state => {
   return res
 }
 
+export const isOAS3 = createSelector(
+  // isOAS3 is stubbed out here to work around an issue with injecting more selectors
+  // in the OAS3 plugin, and to ensure that the function is always available.
+  // It's not perfect, but our hybrid (core+plugin code) implementation for OAS3
+  // needs this. //KS
+  spec,
+	() => false
+)
+
 export const info = createSelector(
   spec,
 	spec => returnSelfOrNewMap(spec && spec.get("info"))

src/core/plugins/split-pane-mode/components/split-pane-mode.jsx

@@ -1,7 +1,6 @@
 import React from "react"
 import PropTypes from "prop-types"
 import SplitPane from "react-split-pane"
-import "./split-pane-mode.less"
 
 const MODE_KEY = ["split-pane-mode"]
 const MODE_LEFT = "left"

src/core/plugins/split-pane-mode/components/split-pane-mode.less

@@ -1,5 +0,0 @@
-.swagger-ui {
-  .Resizer.vertical.disabled {
-    display: none;
-  }
-}

src/core/plugins/util/index.js

@@ -1,8 +1,7 @@
 import { shallowEqualKeys } from "core/utils"
-import { transformPathToArray } from "core/path-translator"
 
 export default function() {
   return {
-    fn: { shallowEqualKeys, transformPathToArray }
+    fn: { shallowEqualKeys }
   }
 }

src/core/presets/apis.js

@@ -1,4 +1,5 @@
 import BasePreset from "./base"
+import OAS3Plugin from "../plugins/oas3"
 
 // Just the base, for now.
 
@@ -6,5 +7,6 @@ export default function PresetApis() {
 
   return [
     BasePreset,
+    OAS3Plugin
   ]
 }

src/core/presets/base.js

@@ -52,6 +52,7 @@ import ObjectModel from "core/components/object-model"
 import ArrayModel from "core/components/array-model"
 import PrimitiveModel from "core/components/primitive-model"
 import TryItOutButton from "core/components/try-it-out-button"
+import VersionStamp from "core/components/version-stamp"
 
 import Markdown from "core/components/providers/markdown"
 
@@ -105,7 +106,8 @@ export default function() {
       PrimitiveModel,
       TryItOutButton,
       Markdown,
-      BaseLayout
+      BaseLayout,
+      VersionStamp
     }
   }
 

src/core/system.js

@@ -76,7 +76,7 @@ export default class Store {
     this.boundSystem = Object.assign({},
         this.getRootInjects(),
         this.getWrappedAndBoundActions(dispatch),
-        this.getBoundSelectors(getState, this.getSystem),
+        this.getWrappedAndBoundSelectors(getState, this.getSystem),
         this.getStateThunks(getState),
         this.getFn(),
         this.getConfigs()
@@ -176,6 +176,36 @@ export default class Store {
       })
   }
 
+  getWrappedAndBoundSelectors(getState, getSystem) {
+    let selectorGroups = this.getBoundSelectors(getState, getSystem)
+      return objMap(selectorGroups, (selectors, selectorGroupName) => {
+        let stateName = [selectorGroupName.slice(0, -9)] // selectors = 9 chars
+        let wrappers = this.system.statePlugins[stateName].wrapSelectors
+          if(wrappers) {
+            return objMap(selectors, (selector, selectorName) => {
+              let wrap = wrappers[selectorName]
+              if(!wrap) {
+                return selector
+              }
+
+              if(!Array.isArray(wrap)) {
+                wrap = [wrap]
+              }
+              return wrap.reduce((acc, fn) => {
+                let wrappedSelector = (...args) => {
+                  return fn(acc, this.getSystem())(getState().getIn(stateName), ...args)
+                }
+                if(!isFn(wrappedSelector)) {
+                  throw new TypeError("wrapSelector needs to return a function that returns a new function (ie the wrapped action)")
+                }
+                return wrappedSelector
+              }, selector || Function.prototype)
+            })
+          }
+        return selectors
+      })
+  }
+
   getStates(state) {
     return Object.keys(this.system.statePlugins).reduce((obj, key) => {
       obj[key] = state.get(key)
@@ -197,8 +227,17 @@ export default class Store {
   }
 
   getComponents(component) {
-    if(typeof component !== "undefined")
+    const res = this.system.components[component]
+
+    if(Array.isArray(res)) {
+      return res.reduce((ori, wrapper) => {
+        return wrapper(ori, this.getSystem())
+      })
+    }
+    if(typeof component !== "undefined") {
       return this.system.components[component]
+    }
+
     return this.system.components
   }
 
@@ -291,6 +330,24 @@ function systemExtend(dest={}, src={}) {
     return dest
   }
 
+  // Wrap components
+  // Parses existing components in the system, and prepares them for wrapping via getComponents
+  if(src.wrapComponents) {
+    objMap(src.wrapComponents, (wrapperFn, key) => {
+      const ori = dest.components[key]
+      if(ori && Array.isArray(ori)) {
+        dest.components[key] = ori.concat([wrapperFn])
+      } else if(ori) {
+        dest.components[key] = [ori, wrapperFn]
+      } else {
+        dest.components[key] = null
+      }
+    })
+
+    delete src.wrapComponents
+  }
+
+
   // Account for wrapActions, make it an array and append to it
   // Modifies `src`
   // 80% of this code is just safe traversal. We need to address that ( ie: use a lib )

src/core/utils.js

@@ -41,7 +41,7 @@ export function fromJSOrdered (js) {
   return !isObject(js) ? js :
     Array.isArray(js) ?
       Im.Seq(js).map(fromJSOrdered).toList() :
-      Im.Seq(js).map(fromJSOrdered).toOrderedMap()
+      Im.OrderedMap(js).map(fromJSOrdered)
 }
 
 export function bindToState(obj, state) {
@@ -468,6 +468,18 @@ export const validateFile = ( val ) => {
   }
 }
 
+export const validateBoolean = ( val ) => {
+  if ( !(val === "true" || val === "false" || val === true || val === false) ) {
+    return "Value must be a boolean"
+  }
+}
+
+export const validateString = ( val ) => {
+  if ( val && typeof val !== "string" ) {
+    return "Value must be a string"
+  }
+}
+
 // validation of parameters before execute
 export const validateParam = (param, isXml) => {
   let errors = []
@@ -475,52 +487,69 @@ export const validateParam = (param, isXml) => {
   let required = param.get("required")
   let type = param.get("type")
 
-  let stringCheck = type === "string" && !value
-  let arrayCheck = type === "array" && Array.isArray(value) && !value.length
-  let listCheck = type === "array" && Im.List.isList(value) && !value.count()
-  let fileCheck = type === "file" && !(value instanceof win.File)
+  /*
+    If the parameter is required OR the parameter has a value (meaning optional, but filled in)
+    then we should do our validation routine.
+    Only bother validating the parameter if the type was specified.
+  */
+  if ( type && (required || value) ) {
+    // These checks should evaluate to true if the parameter's value is valid
+    let stringCheck = type === "string" && value && !validateString(value)
+    let arrayCheck = type === "array" && Array.isArray(value) && value.length
+    let listCheck = type === "array" && Im.List.isList(value) && value.count()
+    let fileCheck = type === "file" && value instanceof win.File
+    let booleanCheck = type === "boolean" && !validateBoolean(value)
+    let numberCheck = type === "number" && !validateNumber(value) // validateNumber returns undefined if the value is a number
+    let integerCheck = type === "integer" && !validateInteger(value) // validateInteger returns undefined if the value is an integer
 
-  if ( required && (stringCheck || arrayCheck || listCheck || fileCheck) ) {
-    errors.push("Required field is not provided")
-    return errors
-  }
+    if ( required && !(stringCheck || arrayCheck || listCheck || fileCheck || booleanCheck || numberCheck || integerCheck) ) {
+      errors.push("Required field is not provided")
+      return errors
+    }
 
-  if ( value === null || value === undefined ) {
-    return errors
-  }
+    if ( type === "string" ) {
+      let err = validateString(value)
+      if (!err) return errors
+      errors.push(err)
+    } else if ( type === "boolean" ) {
+      let err = validateBoolean(value)
+      if (!err) return errors
+      errors.push(err)
+    } else if ( type === "number" ) {
+      let err = validateNumber(value)
+      if (!err) return errors
+      errors.push(err)
+    } else if ( type === "integer" ) {
+      let err = validateInteger(value)
+      if (!err) return errors
+      errors.push(err)
+    } else if ( type === "array" ) {
+      let itemType
 
-  if ( type === "number" ) {
-    let err = validateNumber(value)
-    if (!err) return errors
-    errors.push(err)
-  } else if ( type === "integer" ) {
-    let err = validateInteger(value)
-    if (!err) return errors
-    errors.push(err)
-  } else if ( type === "array" ) {
-    let itemType
+      if ( !value.count() ) { return errors }
 
-    if ( !value.count() ) { return errors }
+      itemType = param.getIn(["items", "type"])
 
-    itemType = param.getIn(["items", "type"])
+      value.forEach((item, index) => {
+        let err
 
-    value.forEach((item, index) => {
-      let err
+        if (itemType === "number") {
+          err = validateNumber(item)
+        } else if (itemType === "integer") {
+          err = validateInteger(item)
+        } else if (itemType === "string") {
+          err = validateString(item)
+        }
 
-      if (itemType === "number") {
-        err = validateNumber(item)
-      } else if (itemType === "integer") {
-        err = validateInteger(item)
-      }
-
-      if ( err ) {
-        errors.push({ index: index, error: err})
-      }
-    })
-  } else if ( type === "file" ) {
-    let err = validateFile(value)
-    if (!err) return errors
-    errors.push(err)
+        if ( err ) {
+          errors.push({ index: index, error: err})
+        }
+      })
+    } else if ( type === "file" ) {
+      let err = validateFile(value)
+      if (!err) return errors
+      errors.push(err)
+    }
   }
 
   return errors
@@ -546,7 +575,7 @@ export const getSampleSchema = (schema, contentType="", config={}) => {
   return JSON.stringify(memoizedSampleFromSchema(schema, config), null, 2)
 }
 
-export const parseSeach = () => {
+export const parseSearch = () => {
   let map = {}
   let search = window.location.search
 
@@ -596,18 +625,6 @@ export const buildFormData = (data) => {
   return formArr.join("&")
 }
 
-export const filterConfigs = (configs, allowed) => {
-    let i, filteredConfigs = {}
-
-    for (i in configs) {
-        if (allowed.indexOf(i) !== -1) {
-            filteredConfigs[i] = configs[i]
-        }
-    }
-
-    return filteredConfigs
-}
-
 // Is this really required as a helper? Perhaps. TODO: expose the system of presets.apis in docs, so we know what is supported
 export const shallowEqualKeys = (a,b, keys) => {
   return !!find(keys, (key) => {

src/plugins/add-plugin.md

@@ -20,7 +20,7 @@ SwaggerUI({
 })
 ```
 
-Or if you're updating the core plugins.. you'll add it to [src/js/bootstrap-plugin](https://github.com/SmartBear/swagger-ux/blob/master/src/js/bootstrap-plugin.js)
+Or if you're updating the core plugins.. you'll add it to the base preset: [src/core/presets/base.js](https://github.com/swagger-api/swagger-ui/blob/master/src/core/presets/base.js)
 
 Each Plugin is a function that returns an object. That object will get merged with the `system` and later bound to the state.
 Here is an example of each `type`

src/plugins/topbar/topbar.jsx

@@ -130,7 +130,7 @@ export default class Topbar extends React.Component {
         <div className="wrapper">
           <div className="topbar-wrapper">
             <Link href="#" title="Swagger UX">
-              <img height="30" width="30" src={ Logo } alt="Swagger UX"/>
+              <img height="30" width="30" src={ Logo } alt="Swagger UI"/>
               <span>swagger</span>
             </Link>
             <form className="download-url-wrapper" onSubmit={formOnSubmit}>

src/plugins/topbar/topbar.less

@@ -1,52 +0,0 @@
-.swagger-ui {
-  .topbar {
-    background-color: #89bf04;
-  }
-
-  .topbar-wrapper {
-    padding: 0.7em;
-  }
-
-  .topbar-logo__img {
-    float: left;
-  }
-
-  .topbar-logo__title {
-    display: inline-block;
-    color: #fff;
-    font-size: 1.5em;
-    font-weight: bold;
-    margin: 0.15em 0 0 0.5em;
-  }
-
-  .download-url-wrapper {
-    text-align: right;
-    float: right;
-  }
-
-  .topbar .download-url__text {
-    width: 28em;
-    height: 2em;
-    margin-right: 0.5em;
-  }
-
-  .download-url__btn {
-    background-color: #547f00;
-    border-color: #547f00;
-    text-decoration: none;
-    font-weight: bold;
-    padding: 0.2em 0.3em;
-    color: white;
-    border-radius: 0.1em;
-
-    &:hover {
-      &:extend(.download-url__btn);
-    }
-  }
-
-  .center-700 {
-    display: block;
-    margin: 0 auto;
-    width: 45em;
-  }
-}

src/standalone/index.js

@@ -1,6 +1,4 @@
 import StandaloneLayout from "./layout"
-import "../style/main.scss"
-
 import TopbarPlugin from "plugins/topbar"
 import ConfigsPlugin from "plugins/configs"
 

src/style/_buttons.scss

@@ -14,6 +14,12 @@
 
     @include text_headline();
 
+    &.btn-sm
+    {
+        font-size: 12px;
+        padding: 4px 23px;
+    }
+
     &[disabled]
     {
         cursor: not-allowed;
@@ -165,6 +171,10 @@
 button
 {
     cursor: pointer;
-
     outline: none;
+
+    &.invalid
+    {
+        @include invalidFormElement();
+    }
 }

src/style/_form.scss

@@ -21,6 +21,10 @@ select
 
         background: #f7f7f7;
     }
+
+    &.invalid {
+        @include invalidFormElement();
+    }
 }
 
 .opblock-body select
@@ -55,10 +59,7 @@ input[type=file]
 
     &.invalid
     {
-        animation: shake .4s 1;
-
-        border-color: $_color-delete;
-        background: lighten($_color-delete, 35%);
+        @include invalidFormElement();
     }
 }
 

src/style/_layout.scss

@@ -74,6 +74,11 @@ body
     {
         border-color: $color;
     }
+
+    .tab-header .tab-item.active h4 span:after
+    {
+        background: $color;
+    }
 }
 
 
@@ -144,6 +149,51 @@ body
     border-radius: 4px;
     box-shadow: 0 0 3px rgba(#000,.19);
 
+    .tab-header
+    {
+        display: flex;
+
+        flex: 1;
+
+        .tab-item
+        {
+            padding: 0 40px;
+
+            cursor: pointer;
+
+            &:first-of-type
+            {
+                padding: 0 40px 0 0;
+            }
+            &.active
+            {
+                h4
+                {
+                    span
+                    {
+                        position: relative;
+
+
+                        &:after
+                        {
+                            position: absolute;
+                            bottom: -15px;
+                            left: 50%;
+
+                            width: 120%;
+                            height: 4px;
+
+                            content: '';
+                            transform: translateX(-50%);
+
+                            background: #888;
+                        }
+                    }
+                }
+            }
+        }
+    }
+
 
     &.is-open
     {
@@ -160,6 +210,8 @@ body
 
         padding: 8px 20px;
 
+        min-height: 50px;
+
         background: rgba(#fff,.8);
         box-shadow: 0 1px 2px rgba(#000,.1);
 
@@ -172,6 +224,7 @@ body
             align-items: center;
 
             margin: 0;
+            margin-left: auto;
 
             @include text_headline();
 
@@ -508,6 +561,15 @@ body
         {
             margin: 0;
         }
+
+        a
+        {
+            @include text_code(#89bf04);
+            text-decoration: underline;
+            &:hover {
+                color: #81b10c;
+            }
+        }
     }
 }
 
@@ -634,6 +696,18 @@ body
     }
 }
 
+.renderedMarkdown {
+  p {
+    @include text_body();
+    font-size: 14px;
+    margin-top: 0px;
+    margin-bottom: 0px;
+  }
+}
+
+.response-content-type {
+  padding-top: 1em;
+}
 
 @keyframes blinker
 {

src/style/_mixins.scss

@@ -166,3 +166,9 @@ $browser-context: 16;
         @warn 'Breakpoint mixin supports: tablet, mobile, desktop';
     }
 }
+
+@mixin invalidFormElement() {
+    animation: shake .4s 1;
+    border-color: $_color-delete;
+    background: lighten($_color-delete, 35%);
+}

src/style/_models.scss

@@ -3,6 +3,13 @@
     font-size: 12px;
     font-weight: 300;
 
+    .deprecated
+    {
+      span, td {
+        color: #aaa !important;
+      }
+    }
+
     @include text_code();
     &-toggle
     {
@@ -192,6 +199,11 @@ section.models
         position: relative;
         top: 4px;
     }
+
+    &.deprecated
+    {
+      opacity: .5;
+    }
 }
 
 
@@ -202,6 +214,14 @@ section.models
     @include text_headline(#555);
 }
 
+.model-deprecated-warning
+{
+    font-size: 16px;
+    font-weight: 600;
+    margin-right: 1em;
+    @include text_headline($_color-delete);
+}
+
 
 span
 {

src/style/_split-pane-mode.scss

@@ -0,0 +1,3 @@
+.Resizer.vertical.disabled {
+  display: none;
+}

src/style/_table.scss

@@ -97,6 +97,10 @@ table
         width: 100%;
         max-width: 340px;
     }
+
+    select {
+        border-width: 1px;
+    }
 }
 
 .parameter__name

src/style/main.scss

@@ -14,4 +14,5 @@
     @import 'information';
     @import 'authorize';
     @import 'errors';
+    @import 'split-pane-mode';
 }

test/.eslintrc

@@ -1,2 +1,5 @@
 env:
   mocha: true
+rules:
+  "react/prop-types": 1 # bah humbug
+  "no-unused-vars": 1 # unused vars in tests can be useful for indicating a full signature

test/components/schemes.js

@@ -0,0 +1,41 @@
+
+/* eslint-env mocha */
+import React from "react"
+import expect, { createSpy } from "expect"
+import { shallow } from "enzyme"
+import { fromJS } from "immutable"
+import Schemes from "components/schemes"
+
+describe("<Schemes/>", function(){
+  it("calls props.specActions.setScheme() when no operationScheme is selected", function(){
+
+    // Given
+    let props = {
+      specActions: {
+        setScheme: createSpy()
+      },
+      schemes: fromJS([
+        "http",
+        "https"
+      ]),
+      operationScheme: undefined,
+      path: "/test",
+      method: "get"
+    }
+    
+    // When
+    let wrapper = shallow(<Schemes {...props}/>)
+
+    // Then operationScheme should default to first scheme in options list
+    expect(props.specActions.setScheme).toHaveBeenCalledWith("http", "/test" , "get")
+
+    // When the operationScheme is no longer in the list of options
+    props.schemes = fromJS([
+      "https"
+    ])
+    wrapper.setProps(props)
+
+    // Then operationScheme should default to first scheme in options list
+    expect(props.specActions.setScheme).toHaveBeenCalledWith("https", "/test", "get")
+  })
+})

test/core/path-translator.js

@@ -1,183 +0,0 @@
-/* eslint-env mocha */
-import expect from "expect"
-import { transformPathToArray } from "core/path-translator"
-
-describe("validation plugin - path translator", function(){
-
-  describe("string paths", function(){
-
-    it("should translate a simple string path to an array", function(){
-      // Given
-      let jsSpec = {
-        one: {
-          a: "a thing",
-          b: "another thing",
-          c: "one more thing"
-        },
-        two: 2
-      }
-
-      let path = "instance.one.a"
-
-      // Then
-      expect(transformPathToArray(path, jsSpec)).toEqual(["one", "a"])
-
-    })
-
-    it("should translate an ambiguous string path to an array", function(){
-      // Since JSONSchema uses periods to mark different properties,
-      // a key with a period in it is ambiguous, because it can mean at least two things.
-      // In our case, the path can mean:
-      // ["google", "com", "a"] or ["google.com", "a"]
-
-      // Given
-      let jsSpec = {
-        "google.com": {
-          a: "a thing",
-          b: "another thing",
-          c: "one more thing"
-        },
-        "gmail.com": {
-          d: "more stuff",
-          e: "even more stuff"
-        }
-      }
-
-      let path = "instance.google.com.a"
-
-      // Then
-      expect(transformPathToArray(path, jsSpec)).toEqual(["google.com", "a"])
-
-    })
-
-    it("should translate an doubly ambiguous string path to an array", function(){
-      // Since JSONSchema uses periods to mark different properties,
-      // a key with two periods in it (like "www.google.com") is doubly ambiguous,
-      // because it can mean at least three things.
-
-
-      // Given
-      let jsSpec = {
-        "www.google.com": {
-          a: "a thing",
-          b: "another thing",
-          c: "one more thing"
-        },
-        "gmail.com": {
-          d: "more stuff",
-          e: "even more stuff"
-        }
-      }
-
-      let path = "instance.www.google.com.a"
-
-      // Then
-      expect(transformPathToArray(path, jsSpec)).toEqual(["www.google.com", "a"])
-
-    })
-
-    it("should return null for an invalid path", function(){
-
-      // Given
-      let jsSpec = {
-        "google.com": {
-          a: "a thing",
-          b: "another thing",
-          c: "one more thing"
-        },
-        "gmail.com": {
-          d: "more stuff",
-          e: "even more stuff"
-        }
-      }
-
-      let path = "instance.google.net.a"
-
-      // Then
-      expect(transformPathToArray(path, jsSpec)).toEqual(null)
-
-    })
-
-    it("should return inline array indices in their own value", function(){
-      // "a[1]" => ["a", "1"]
-
-      // Given
-      let jsSpec = {
-        "google.com": {
-          a: [
-            "hello",
-            "here is the target"
-          ],
-          b: "another thing",
-          c: "one more thing"
-        },
-        "gmail.com": {
-          d: "more stuff",
-          e: "even more stuff"
-        }
-      }
-
-      let path = "instance.google.com.a[1]"
-
-      // Then
-      expect(transformPathToArray(path, jsSpec)).toEqual(["google.com", "a", "1"])
-
-    })
-
-    it("should return the correct path when the last part is ambiguous", function(){
-
-      // Given
-      let jsSpec = {
-        "google.com": {
-          a: [
-            "hello",
-            {
-              "gmail.com": 1234
-            }
-          ],
-          b: "another thing",
-          c: "one more thing"
-        },
-        "gmail.com": {
-          d: "more stuff",
-          e: "even more stuff"
-        }
-      }
-
-      let path = "instance.google.com.a[1].gmail.com"
-
-      // Then
-      expect(transformPathToArray(path, jsSpec)).toEqual(["google.com", "a", "1", "gmail.com"])
-
-    })
-
-    it("should return the correct path when the last part is doubly ambiguous", function(){
-
-      // Given
-      let jsSpec = {
-        "google.com": {
-          a: [
-            "hello",
-            {
-              "www.gmail.com": 1234
-            }
-          ],
-          b: "another thing",
-          c: "one more thing"
-        },
-        "gmail.com": {
-          d: "more stuff",
-          e: "even more stuff"
-        }
-      }
-
-      let path = "instance.google.com.a[1].www.gmail.com"
-
-      // Then
-      expect(transformPathToArray(path, jsSpec)).toEqual(["google.com", "a", "1", "www.gmail.com"])
-
-    })
-
-  })
-
-})

test/core/system/system.js

@@ -326,6 +326,122 @@ describe("bound system", function(){
 
     })
 
+    describe("wrapSelectors", () => {
+      it("should wrap a selector and provide a reference to the original", function(){
+
+        // Given
+        const system = new System({
+          plugins: [
+            {
+              statePlugins: {
+                doge: {
+                  selectors: {
+                    wow: () => (system) => {
+                      return "original"
+                    }
+                  }
+                }
+              }
+            },
+            {
+              statePlugins: {
+                doge: {
+                  wrapSelectors: {
+                    wow: (ori) => (system) => {
+                      // Then
+                      return ori() + " wrapper"
+                    }
+                  }
+                }
+              }
+            }
+          ]
+        })
+
+        // When
+        var res = system.getSystem().dogeSelectors.wow(1)
+        expect(res).toEqual("original wrapper")
+
+      })
+
+      it("should provide a live reference to the system to a wrapper", function(done){
+
+        // Given
+        const mySystem = new System({
+          plugins: [
+            {
+              statePlugins: {
+                doge: {
+                  selectors: {
+                    wow: () => (system) => {
+                      return "original"
+                    }
+                  }
+                }
+              }
+            },
+            {
+              statePlugins: {
+                doge: {
+                  wrapSelectors: {
+                    wow: (ori, system) => () => {
+                      // Then
+                      expect(mySystem.getSystem()).toEqual(system.getSystem())
+                      done()
+                      return ori() + " wrapper"
+                    }
+                  }
+                }
+              }
+            }
+          ]
+        })
+
+        mySystem.getSystem().dogeSelectors.wow(1)
+      })
+
+      it("should provide the state as the first argument to the inner function", function(done){
+
+        // Given
+        const mySystem = new System({
+          state: {
+            doge: {
+              abc: "123"
+            }
+          },
+          plugins: [
+            {
+              statePlugins: {
+                doge: {
+                  selectors: {
+                    wow: () => (system) => {
+                      return "original"
+                    }
+                  }
+                }
+              }
+            },
+            {
+              statePlugins: {
+                doge: {
+                  wrapSelectors: {
+                    wow: (ori, system) => (dogeState) => {
+                      // Then
+                      expect(dogeState.toJS().abc).toEqual("123")
+                      done()
+                      return ori() + " wrapper"
+                    }
+                  }
+                }
+              }
+            }
+          ]
+        })
+
+        mySystem.getSystem().dogeSelectors.wow(1)
+      })
+    })
+
   })
 
 })

test/core/system/wrapComponent.js

@@ -0,0 +1,139 @@
+import React from "react"
+import expect from "expect"
+import { render } from "enzyme"
+import System from "core/system"
+
+describe("wrapComponents", () => {
+  describe("should wrap a component and provide a reference to the original", () => {
+    it("with stateless components", function(){
+      // Given
+      const system = new System({
+        plugins: [
+          {
+            components: {
+              wow: ({ name }) => <div>{name} component</div>
+            }
+          },
+          {
+            wrapComponents: {
+              wow: (OriginalComponent) => (props) => {
+                return <container>
+                  <OriginalComponent {...props}></OriginalComponent>
+                  <OriginalComponent name="Wrapped"></OriginalComponent>
+                </container>
+              }
+            }
+          }
+        ]
+      })
+
+      // When
+      var Component = system.getSystem().getComponents("wow")
+      const wrapper = render(<Component name="Normal" />)
+
+      const container = wrapper.children().first()
+      expect(container[0].name).toEqual("container")
+
+      const children = container.children()
+      expect(children.length).toEqual(2)
+      expect(children.eq(0).text()).toEqual("Normal component")
+      expect(children.eq(1).text()).toEqual("Wrapped component")
+    })
+
+    it("with React classes", function(){
+      class MyComponent extends React.Component {
+        render() {
+          return <div>{this.props.name} component</div>
+        }
+      }
+
+      // Given
+      const system = new System({
+        plugins: [
+          {
+            components: {
+              wow: MyComponent
+            }
+          },
+          {
+            wrapComponents: {
+              wow: (OriginalComponent) => {
+                return class WrapperComponent extends React.Component {
+                  render() {
+                    return <container>
+                      <OriginalComponent {...this.props}></OriginalComponent>
+                      <OriginalComponent name="Wrapped"></OriginalComponent>
+                    </container>
+                  }
+                }
+              }
+            }
+          }
+        ]
+      })
+
+      // When
+      var Component = system.getSystem().getComponents("wow")
+      const wrapper = render(<Component name="Normal" />)
+
+      const container = wrapper.children().first()
+      expect(container[0].name).toEqual("container")
+
+      const children = container.children()
+      expect(children.length).toEqual(2)
+      expect(children.eq(0).text()).toEqual("Normal component")
+      expect(children.eq(1).text()).toEqual("Wrapped component")
+    })
+  })
+
+  it("should provide a reference to the system to the wrapper", function(){
+
+    // Given
+
+    const mySystem = new System({
+      plugins: [
+        {
+          // Make a selector
+          statePlugins: {
+            doge: {
+              selectors: {
+                wow: () => () => {
+                  return "WOW much data"
+                }
+              }
+            }
+          }
+        },
+        {
+          // Create a component
+          components: {
+            wow: () => <div>Original component</div>
+          }
+        },
+        {
+          // Wrap the component and use the system
+          wrapComponents: {
+            wow: (OriginalComponent, system) => (props) => {
+              return <container>
+                <OriginalComponent {...props}></OriginalComponent>
+                <div>{system.dogeSelectors.wow()}</div>
+              </container>
+            }
+          }
+        }
+      ]
+    })
+
+    // Then
+    var Component = mySystem.getSystem().getComponents("wow")
+    const wrapper = render(<Component name="Normal" />)
+
+    const container = wrapper.children().first()
+    expect(container[0].name).toEqual("container")
+
+    const children = container.children()
+    expect(children.length).toEqual(2)
+    expect(children.eq(0).text()).toEqual("Original component")
+    expect(children.eq(1).text()).toEqual("WOW much data")
+  })
+})

test/core/utils.js

@@ -1,10 +1,10 @@
 /* eslint-env mocha */
 import expect from "expect"
 import { fromJS } from "immutable"
-import { mapToList, validateNumber, validateInteger, validateParam, validateFile } from "core/utils"
+import { mapToList, validateNumber, validateInteger, validateParam, validateFile, fromJSOrdered } from "core/utils"
 import win from "core/window"
 
-describe("utils", function(){
+describe("utils", function() {
 
   describe("mapToList", function(){
 
@@ -175,7 +175,19 @@ describe("utils", function(){
     let param = null
     let result = null
 
+    it("skips validation when `type` is not specified", function() {
+      // invalid type
+      param = fromJS({
+        required: false,
+        type: undefined,
+        value: ""
+      })
+      result = validateParam( param, false )
+      expect( result ).toEqual( [] )
+    })
+
     it("validates required strings", function() {
+      // invalid string
       param = fromJS({
         required: true,
         type: "string",
@@ -183,9 +195,39 @@ describe("utils", function(){
       })
       result = validateParam( param, false )
       expect( result ).toEqual( ["Required field is not provided"] )
+
+            // valid string
+      param = fromJS({
+        required: true,
+        type: "string",
+        value: "test string"
+      })
+      result = validateParam( param, false )
+      expect( result ).toEqual( [] )
+    })
+
+    it("validates optional strings", function() {
+      // valid (empty) string
+      param = fromJS({
+        required: false,
+        type: "string",
+        value: ""
+      })
+      result = validateParam( param, false )
+      expect( result ).toEqual( [] )
+
+      // valid string
+      param = fromJS({
+        required: false,
+        type: "string",
+        value: "test"
+      })
+      result = validateParam( param, false )
+      expect( result ).toEqual( [] )
     })
 
     it("validates required files", function() {
+      // invalid file
       param = fromJS({
         required: true,
         type: "file",
@@ -193,9 +235,48 @@ describe("utils", function(){
       })
       result = validateParam( param, false )
       expect( result ).toEqual( ["Required field is not provided"] )
+
+      // valid file
+      param = fromJS({
+        required: true,
+        type: "file",
+        value: new win.File()
+      })
+      result = validateParam( param, false )
+      expect( result ).toEqual( [] )
+    })
+
+    it("validates optional files", function() {
+      // invalid file
+      param = fromJS({
+        required: false,
+        type: "file",
+        value: "not a file"
+      })
+      result = validateParam( param, false )
+      expect( result ).toEqual( ["Value must be a file"] )
+
+      // valid (empty) file
+      param = fromJS({
+        required: false,
+        type: "file",
+        value: undefined
+      })
+      result = validateParam( param, false )
+      expect( result ).toEqual( [] )
+
+      // valid file
+      param = fromJS({
+        required: false,
+        type: "file",
+        value: new win.File()
+      })
+      result = validateParam( param, false )
+      expect( result ).toEqual( [] )
     })
 
     it("validates required arrays", function() {
+      // invalid (empty) array
       param = fromJS({
         required: true,
         type: "array",
@@ -204,75 +285,51 @@ describe("utils", function(){
       result = validateParam( param, false )
       expect( result ).toEqual( ["Required field is not provided"] )
 
+      // invalid (not an array)
       param = fromJS({
         required: true,
         type: "array",
-        value: []
+        value: undefined
       })
       result = validateParam( param, false )
       expect( result ).toEqual( ["Required field is not provided"] )
-    })
 
-    it("validates numbers", function() {
-      // string instead of a number
+      // invalid array, items do not match correct type
       param = fromJS({
-        required: false,
-        type: "number",
-        value: "test"
+        required: true,
+        type: "array",
+        value: [1],
+        items: {
+          type: "string"
+        }
       })
       result = validateParam( param, false )
-      expect( result ).toEqual( ["Value must be a number"] )
+      expect( result ).toEqual( [{index: 0, error: "Value must be a string"}] )
 
-      // undefined value
+      // valid array, with no 'type' for items
       param = fromJS({
-        required: false,
-        type: "number",
-        value: undefined
+        required: true,
+        type: "array",
+        value: ["1"]
       })
       result = validateParam( param, false )
       expect( result ).toEqual( [] )
 
-      // null value
+      // valid array, items match type
       param = fromJS({
-        required: false,
-        type: "number",
-        value: null
+        required: true,
+        type: "array",
+        value: ["1"],
+        items: {
+          type: "string"
+        }
       })
       result = validateParam( param, false )
       expect( result ).toEqual( [] )
     })
 
-    it("validates integers", function() {
-      // string instead of integer
-      param = fromJS({
-        required: false,
-        type: "integer",
-        value: "test"
-      })
-      result = validateParam( param, false )
-      expect( result ).toEqual( ["Value must be an integer"] )
-
-      // undefined value
-      param = fromJS({
-        required: false,
-        type: "integer",
-        value: undefined
-      })
-      result = validateParam( param, false )
-      expect( result ).toEqual( [] )
-
-      // null value
-      param = fromJS({
-        required: false,
-        type: "integer",
-        value: null
-      })
-      result = validateParam( param, false )
-      expect( result ).toEqual( [] )
-    })
-
-    it("validates arrays", function() {
-      // empty array
+    it("validates optional arrays", function() {
+      // valid, empty array
       param = fromJS({
         required: false,
         type: "array",
@@ -281,7 +338,7 @@ describe("utils", function(){
       result = validateParam( param, false )
       expect( result ).toEqual( [] )
 
-      // numbers
+      // invalid, items do not match correct type
       param = fromJS({
         required: false,
         type: "array",
@@ -293,17 +350,236 @@ describe("utils", function(){
       result = validateParam( param, false )
       expect( result ).toEqual( [{index: 0, error: "Value must be a number"}] )
 
-      // integers
+      // valid
       param = fromJS({
         required: false,
         type: "array",
-        value: ["not", "numbers"],
+        value: ["test"],
         items: {
-          type: "integer"
+          type: "string"
         }
       })
       result = validateParam( param, false )
-      expect( result ).toEqual( [{index: 0, error: "Value must be an integer"}, {index: 1, error: "Value must be an integer"}] )
+      expect( result ).toEqual( [] )
+    })
+
+    it("validates required booleans", function() {
+      // invalid boolean value
+      param = fromJS({
+        required: true,
+        type: "boolean",
+        value: undefined
+      })
+      result = validateParam( param, false )
+      expect( result ).toEqual( ["Required field is not provided"] )
+
+      // invalid boolean value (not a boolean)
+      param = fromJS({
+        required: true,
+        type: "boolean",
+        value: "test string"
+      })
+      result = validateParam( param, false )
+      expect( result ).toEqual( ["Required field is not provided"] )
+
+      // valid boolean value
+      param = fromJS({
+        required: true,
+        type: "boolean",
+        value: "true"
+      })
+      result = validateParam( param, false )
+      expect( result ).toEqual( [] )
+
+      // valid boolean value
+      param = fromJS({
+        required: true,
+        type: "boolean",
+        value: false
+      })
+      result = validateParam( param, false )
+      expect( result ).toEqual( [] )
+    })
+
+    it("validates optional booleans", function() {
+      // valid (empty) boolean value
+      param = fromJS({
+        required: false,
+        type: "boolean",
+        value: undefined
+      })
+      result = validateParam( param, false )
+      expect( result ).toEqual( [] )
+
+      // invalid boolean value (not a boolean)
+      param = fromJS({
+        required: false,
+        type: "boolean",
+        value: "test string"
+      })
+      result = validateParam( param, false )
+      expect( result ).toEqual( ["Value must be a boolean"] )
+
+      // valid boolean value
+      param = fromJS({
+        required: false,
+        type: "boolean",
+        value: "true"
+      })
+      result = validateParam( param, false )
+      expect( result ).toEqual( [] )
+
+      // valid boolean value
+      param = fromJS({
+        required: false,
+        type: "boolean",
+        value: false
+      })
+      result = validateParam( param, false )
+      expect( result ).toEqual( [] )
+    })
+
+    it("validates required numbers", function() {
+      // invalid number, string instead of a number
+      param = fromJS({
+        required: true,
+        type: "number",
+        value: "test"
+      })
+      result = validateParam( param, false )
+      expect( result ).toEqual( ["Required field is not provided"] )
+
+      // invalid number, undefined value
+      param = fromJS({
+        required: true,
+        type: "number",
+        value: undefined
+      })
+      result = validateParam( param, false )
+      expect( result ).toEqual( ["Required field is not provided"] )
+
+      // valid number
+      param = fromJS({
+        required: true,
+        type: "number",
+        value: 10
+      })
+      result = validateParam( param, false )
+      expect( result ).toEqual( [] )
+    })
+
+    it("validates optional numbers", function() {
+      // invalid number, string instead of a number
+      param = fromJS({
+        required: false,
+        type: "number",
+        value: "test"
+      })
+      result = validateParam( param, false )
+      expect( result ).toEqual( ["Value must be a number"] )
+
+      // valid (empty) number
+      param = fromJS({
+        required: false,
+        type: "number",
+        value: undefined
+      })
+      result = validateParam( param, false )
+      expect( result ).toEqual( [] )
+
+      // valid number
+      param = fromJS({
+        required: false,
+        type: "number",
+        value: 10
+      })
+      result = validateParam( param, false )
+      expect( result ).toEqual( [] )
+    })
+
+    it("validates required integers", function() {
+      // invalid integer, string instead of an integer
+      param = fromJS({
+        required: true,
+        type: "integer",
+        value: "test"
+      })
+      result = validateParam( param, false )
+      expect( result ).toEqual( ["Required field is not provided"] )
+
+      // invalid integer, undefined value
+      param = fromJS({
+        required: true,
+        type: "integer",
+        value: undefined
+      })
+      result = validateParam( param, false )
+      expect( result ).toEqual( ["Required field is not provided"] )
+
+      // valid integer
+      param = fromJS({
+        required: true,
+        type: "integer",
+        value: 10
+      })
+      result = validateParam( param, false )
+      expect( result ).toEqual( [] )
+    })
+
+    it("validates optional integers", function() {
+      // invalid integer, string instead of an integer
+      param = fromJS({
+        required: false,
+        type: "integer",
+        value: "test"
+      })
+      result = validateParam( param, false )
+      expect( result ).toEqual( ["Value must be an integer"] )
+
+      // valid (empty) integer
+      param = fromJS({
+        required: false,
+        type: "integer",
+        value: undefined
+      })
+      result = validateParam( param, false )
+      expect( result ).toEqual( [] )
+
+      // integers
+      param = fromJS({
+        required: false,
+        type: "integer",
+        value: 10
+      })
+      result = validateParam( param, false )
+      expect( result ).toEqual( [] )
     })
   })
+
+  describe("fromJSOrdered", () => {
+    it("should create an OrderedMap from an object", () => {
+      const param = {
+        value: "test"
+      }
+
+      const result = fromJSOrdered(param).toJS()
+      expect( result ).toEqual( { value: "test" } )
+    })
+
+    it("should not use an object's length property for Map size", () => {
+      const param = {
+        length: 5
+      }
+
+      const result = fromJSOrdered(param).toJS()
+      expect( result ).toEqual( { length: 5 } )
+    })
+
+    it("should create an OrderedMap from an array", () => {
+      const param = [1, 1, 2, 3, 5, 8]
+
+      const result = fromJSOrdered(param).toJS()
+      expect( result ).toEqual( [1, 1, 2, 3, 5, 8] )
+    })
+    })
 })

webpack-dist-bundle.config.js

@@ -1,64 +1,32 @@
-var path = require('path')
-var rules = [
+const path = require("path")
+const styleRules = require("./webpack.dist-style.config.js")
+
+let rules = [
   { test: /\.(worker\.js)(\?.*)?$/,
     use: [
       {
-        loader: 'worker-loader',
+        loader: "worker-loader",
         options: {
           inline: true,
-          name: '[name].js'
+          name: "[name].js"
         }
       },
-      { loader: 'babel-loader' }
-    ]
-  },
-  { test: /\.(css)(\?.*)?$/,
-    use: [
-      'style-loader',
-      'css-loader',
-      'postcss-loader'
-    ]
-  },
-  { test: /\.(scss)(\?.*)?$/,
-    use: [
-      'style-loader',
-      'css-loader',
-      {
-        loader: 'postcss-loader',
-        options: { sourceMap: true }
-      },
-      { loader: 'sass-loader',
-        options: {
-          outputStyle: 'expanded',
-          sourceMap: true,
-          sourceMapContents: 'true'
-        }
-      }
-    ]
-  },
-  { test: /\.(less)(\?.*)?$/,
-    use: [
-      'style-loader',
-      'css-loader',
-      {
-        loader: 'postcss-loader',
-      },
-      'less-loader'
+      { loader: "babel-loader" }
     ]
   }
 ]
 
-module.exports = require('./make-webpack-config.js')(rules, {
+module.exports = require("./make-webpack-config.js")(rules, {
   _special: {
-    separateStylesheets: false,
+    separateStylesheets: true,
     minimize: true,
     sourcemaps: true,
   },
 
   entry: {
-    'swagger-ui-bundle': [
-      './src/polyfills',
-      './src/core/index.js'
+    "swagger-ui-bundle": [
+      "./src/polyfills",
+      "./src/core/index.js"
     ]
   },
 

webpack-dist-standalone.config.js

@@ -1,65 +1,32 @@
-var path = require('path')
+const path = require("path")
+const styleRules = require("./webpack.dist-style.config.js")
 
-var rules = [
+let rules = [
   { test: /\.(worker\.js)(\?.*)?$/,
     use: [
       {
-        loader: 'worker-loader',
+        loader: "worker-loader",
         options: {
           inline: true,
-          name: '[name].js'
+          name: "[name].js"
         }
       },
-      { loader: 'babel-loader' }
-    ]
-  },
-  { test: /\.(css)(\?.*)?$/,
-    use: [
-      'style-loader',
-      'css-loader',
-      'postcss-loader'
-    ]
-  },
-  { test: /\.(scss)(\?.*)?$/,
-    use: [
-      'style-loader',
-      'css-loader',
-      {
-        loader: 'postcss-loader',
-        options: { sourceMap: true }
-      },
-      { loader: 'sass-loader',
-        options: {
-          outputStyle: 'expanded',
-          sourceMap: true,
-          sourceMapContents: 'true'
-        }
-      }
-    ]
-  },
-  { test: /\.(less)(\?.*)?$/,
-    use: [
-      'style-loader',
-      'css-loader',
-      {
-        loader: 'postcss-loader',
-      },
-      'less-loader'
+      { loader: "babel-loader" }
     ]
   }
 ]
 
-module.exports = require('./make-webpack-config.js')(rules, {
+module.exports = require("./make-webpack-config.js")(rules, {
   _special: {
-    separateStylesheets: false,
+    separateStylesheets: true,
     minimize: true,
     sourcemaps: true,
   },
 
   entry: {
-    'swagger-ui-standalone-preset': [
-      './src/polyfills',
-      './src/standalone/index.js'
+    "swagger-ui-standalone-preset": [
+      "./src/polyfills",
+      "./src/standalone/index.js"
     ]
   },
 

webpack-dist.config.js

@@ -1,66 +1,25 @@
-var path = require('path')
-var fs = require('fs')
+const path = require("path")
+const fs = require("fs")
 const nodeModules = fs.readdirSync("node_modules").filter(function(x) { return x !== ".bin" })
-var ExtractTextPlugin = require('extract-text-webpack-plugin')
+const styleRules = require("./webpack.dist-style.config.js")
 
-var rules = [
+let rules = [
   { test: /\.(worker\.js)(\?.*)?$/,
     use: [
       {
-        loader: 'worker-loader',
+        loader: "worker-loader",
         options: {
           inline: true,
-          name: '[name].js'
+          name: "[name].js"
         }
       },
-      { loader: 'babel-loader' }
+      { loader: "babel-loader" }
     ]
-  },
-  { test: /\.(css)(\?.*)?$/,
-    use: ExtractTextPlugin.extract({
-      fallback: 'style-loader',
-      use: [
-        'css-loader',
-        'postcss-loader'
-      ]
-    })
-  },
-  { test: /\.(scss)(\?.*)?$/,
-    use: ExtractTextPlugin.extract({
-      fallback: 'style-loader',
-      use: [
-        {
-          loader: 'css-loader',
-          options: { minimize: true }
-        },
-        {
-          loader: 'postcss-loader',
-          options: { sourceMap: true }
-        },
-        { loader: 'sass-loader',
-          options: {
-            outputStyle: 'expanded',
-            sourceMap: true,
-            sourceMapContents: 'true'
-          }
-        }
-      ]
-    })
-  },
-  { test: /\.(less)(\?.*)?$/,
-    use: ExtractTextPlugin.extract({
-      fallback: 'style-loader',
-      use: ['css-loader',
-        {
-          loader: 'postcss-loader',
-        },
-        'less-loader'
-      ]
-    })
   }
 ]
+rules = rules.concat(styleRules)
 
-module.exports = require('./make-webpack-config.js')(rules, {
+module.exports = require("./make-webpack-config.js")(rules, {
   _special: {
     separateStylesheets: true,
     minimize: true,

webpack-hot-dev-server.config.js

@@ -1,56 +1,46 @@
-var path = require('path')
+const path = require("path")
 
-var rules = [
+const rules = [
   { test: /\.(worker\.js)(\?.*)?$/,
     use: [
       {
-        loader: 'worker-loader',
+        loader: "worker-loader",
         options: {
           inline: true
         }
       },
-      { loader: 'babel-loader' }
+      { loader: "babel-loader" }
     ]
   },
   { test: /\.(jsx)(\?.*)?$/,
     use: [
-      { loader: 'react-hot-loader' }, 
-      { loader: 'babel-loader' }
+      { loader: "react-hot-loader" }, 
+      { loader: "babel-loader" }
     ]
   },
   { test: /\.(css)(\?.*)?$/,
     use: [
-      'style-loader',
-      'css-loader',
-      'postcss-loader'
+      "style-loader",
+      "css-loader",
+      "postcss-loader"
     ]
   },
   { test: /\.(scss)(\?.*)?$/,
     use: [
-      'style-loader',
-      'css-loader',
+      "style-loader",
+      "css-loader",
       {
-        loader: 'postcss-loader',
+        loader: "postcss-loader",
         options: { sourceMap: true }
       },
-      { loader: 'sass-loader',
+      { loader: "sass-loader",
         options: {
-          outputStyle: 'expanded',
+          outputStyle: "expanded",
           sourceMap: true,
-          sourceMapContents: 'true'
+          sourceMapContents: "true"
         }
       }
     ]
-  },
-  { test: /\.(less)(\?.*)?$/,
-    use: [
-      'style-loader',
-      'css-loader',
-      {
-        loader: 'postcss-loader',
-      },
-      'less-loader'
-    ]
   }
 ]
 
@@ -60,25 +50,26 @@ module.exports = require("./make-webpack-config")(rules, {
   },
 	devtool: "eval",
   entry: {
-    'swagger-ui-bundle': [
-      './src/polyfills',
-      './src/core/index.js'
+    "swagger-ui-bundle": [
+      "./src/polyfills",
+      "./src/core/index.js"
     ],
-    'swagger-ui-standalone-preset': [
-      './src/polyfills',
-      './src/standalone/index.js',
+    "swagger-ui-standalone-preset": [
+      "./src/style/main.scss",
+      "./src/polyfills",
+      "./src/standalone/index.js",
     ]
   },
   output: {
     pathinfo: true,
-    filename: '[name].js',
+    filename: "[name].js",
     library: "[name]",
     libraryTarget: "umd",
     chunkFilename: "[id].js"
   },
   devServer: {
     port: 3200,
-    contentBase: path.join(__dirname, 'dev-helpers'),
+    contentBase: path.join(__dirname, "dev-helpers"),
     publicPath: "/",
     noInfo: true,
     hot: true,

webpack-watch.config.js

@@ -1,3 +1,3 @@
-var config = require("./webpack-dist.config.js")
+const config = require("./webpack-dist.config.js")
 
 module.exports = config

webpack.check.js

@@ -1,8 +1,7 @@
-const webpack = require('webpack')
-const path = require('path')
-const deepMerge = require('deepmerge')
-const webpackConfig = require('./webpack-dist-bundle.config.js')
-const DEPS_CHECK_DIR = require('./package.json').config.deps_check_dir
+const path = require("path")
+const deepMerge = require("deepmerge")
+const webpackConfig = require("./webpack-dist-bundle.config.js")
+const DEPS_CHECK_DIR = require("./package.json").config.deps_check_dir
 
 module.exports = deepMerge(
   webpackConfig, {

webpack.config.js

@@ -1,3 +1,3 @@
 module.exports = require("./make-webpack-config")({
 
-});
+})

webpack.dist-style.config.js

@@ -0,0 +1,34 @@
+const ExtractTextPlugin = require("extract-text-webpack-plugin")
+
+module.exports = [{ 
+  test: /\.(css)(\?.*)?$/,
+  use: ExtractTextPlugin.extract({
+    fallback: "style-loader",
+    use: [
+      "css-loader",
+      "postcss-loader"
+    ]
+  })
+},
+{ test: /\.(scss)(\?.*)?$/,
+  use: ExtractTextPlugin.extract({
+    fallback: "style-loader",
+    use: [
+      {
+        loader: "css-loader",
+        options: { minimize: true }
+      },
+      {
+        loader: "postcss-loader",
+        options: { sourceMap: true }
+      },
+      { loader: "sass-loader",
+        options: {
+          outputStyle: "expanded",
+          sourceMap: true,
+          sourceMapContents: "true"
+        }
+      }
+    ]
+  })
+}]