├── .babelrc ├── .eslintignore ├── .gitignore ├── .nvmrc ├── CNAME ├── Makefile ├── README.md ├── build └── index.html ├── button ├── api.js ├── code-highlighter │ ├── CodeHighlighter.js │ ├── code-highlighter.styl │ ├── highlight.js │ └── languages │ │ ├── http.js │ │ ├── json.js │ │ ├── markdown.js │ │ ├── swift.js │ │ └── yaml.js ├── components │ ├── code-highlighter │ │ ├── CodeHighlighter.js │ │ ├── code-highlighter.styl │ │ ├── highlight.js │ │ └── languages │ │ │ ├── http.js │ │ │ ├── json.js │ │ │ ├── markdown.js │ │ │ ├── swift.js │ │ │ └── yaml.js │ ├── header │ │ ├── Header.js │ │ └── header.styl │ ├── icons │ │ └── WarnIcon.js │ ├── logos │ │ ├── ConsoleRest.js │ │ ├── Curl.js │ │ ├── OpenAPI.js │ │ ├── Paw.js │ │ ├── PawMini.js │ │ ├── Postman.js │ │ └── RAML.js │ ├── modal │ │ ├── Modal.js │ │ └── modal.styl │ ├── outer │ │ └── Outer.js │ ├── pages │ │ ├── MainPage.js │ │ ├── SelectionPage.js │ │ ├── main.styl │ │ ├── pages.styl │ │ └── selection.styl │ ├── simple-select │ │ ├── SimpleSelect.js │ │ └── simple-select.styl │ └── views │ │ ├── CurlViewer.js │ │ ├── PawViewer.js │ │ ├── PostmanViewer.js │ │ ├── RAMLViewer.js │ │ ├── SwaggerViewer.js │ │ ├── UnknownViewer.js │ │ ├── Viewer.js │ │ ├── curl-view.styl │ │ ├── paw-view.styl │ │ ├── postman-view.styl │ │ ├── raml-view.styl │ │ ├── swagger-view.styl │ │ └── view.styl ├── config.js ├── header │ ├── Header.js │ └── header.styl ├── icons │ └── WarnIcon.js ├── index.build.js ├── index.html ├── index.js ├── index.tpl.js ├── logos │ ├── ConsoleRest.js │ ├── Curl.js │ ├── OpenAPI.js │ ├── Paw.js │ ├── PawMini.js │ ├── Postman.js │ └── RAML.js ├── modal │ ├── Modal.js │ └── modal.styl ├── outer │ └── Outer.js ├── pages │ ├── MainPage.js │ ├── SelectionPage.js │ ├── main.styl │ ├── pages.styl │ └── selection.styl ├── simple-select │ ├── SimpleSelect.js │ └── simple-select.styl ├── visual.js └── worker.js ├── configs ├── button │ └── webpack.config.babel.js ├── hot │ └── webpack.config.babel.js └── website │ └── webpack.config.babel.js ├── favicon ├── github.io ├── assets │ ├── buttons │ │ ├── run_with_blue.svg │ │ ├── run_with_deep_orange.svg │ │ ├── run_with_green.svg │ │ ├── run_with_orange.svg │ │ ├── run_with_pink.svg │ │ ├── run_with_purple.svg │ │ ├── run_with_red.svg │ │ ├── run_with_turquoise.svg │ │ └── run_with_yellow.svg │ ├── console-rest-logo.svg │ ├── curl-logo.svg │ ├── drop-area-img.svg │ ├── favicon_16.png │ ├── favicon_192.png │ ├── favicon_32.png │ ├── favicon_96.png │ ├── fileformats.svg │ ├── icon_114.png │ ├── icon_144.png │ ├── icon_180.png │ ├── icon_57.png │ ├── paw-icon.svg │ ├── paw-logo.svg │ ├── paw-screen.png │ ├── postman-logo-2.svg │ ├── raml-logo.svg │ ├── starlights.svg │ └── swagger-logo.png ├── core │ ├── app.css │ ├── main.js │ └── vendor.js ├── libs │ ├── api-flow.js │ ├── console-rest-api.js │ ├── console-rest-visual.js │ └── console-rest.js └── styles │ └── console-rest-visual.css ├── index.html ├── linting ├── dev.yaml ├── eslint_base.yaml └── prod.yaml ├── package.json ├── src ├── _analytics │ └── GAnalytics.js ├── app │ └── converter │ │ ├── Converter.js │ │ └── converter.styl ├── basics │ ├── body.styl │ ├── buttons │ │ ├── EmptyButton.js │ │ ├── GenericButton.js │ │ └── button.styl │ ├── dragdrop │ │ ├── DropArea.js │ │ └── droparea.styl │ ├── filepicker │ │ ├── FilePicker.js │ │ └── file-picker.styl │ ├── inputs │ │ ├── NestedSelect.js │ │ ├── SelectField.js │ │ ├── TextField.js │ │ ├── input.styl │ │ └── nested-select.styl │ ├── media │ │ ├── Rocket.js │ │ ├── arrows │ │ │ ├── DownArrowImg.js │ │ │ ├── LeftArrow.js │ │ │ └── UpArrowImg.js │ │ ├── fileformats.svg │ │ ├── icons │ │ │ ├── BetaImg.js │ │ │ ├── CopyImg.js │ │ │ ├── LoveImg.js │ │ │ └── MiniBuildImg.js │ │ ├── image.styl │ │ ├── logos │ │ │ ├── GithubLogo.js │ │ │ ├── LargeOAIImg.js │ │ │ ├── LargeRAMLImg.js │ │ │ ├── LargeSwaggerImg.js │ │ │ ├── PawLogo.js │ │ │ └── _ConsoleRestLogo.js │ │ ├── starlights.svg │ │ └── status │ │ │ ├── FailureImg.js │ │ │ ├── SuccessImg.js │ │ │ └── WarnImg.js │ ├── notification │ │ ├── Notification.js │ │ └── notification.styl │ └── paw-interface │ │ └── PawInterface.js ├── components │ ├── beta │ │ ├── Banner.js │ │ └── banner.styl │ ├── button-customization │ │ ├── ButtonCustomization.js │ │ └── customization.styl │ ├── collapsible │ │ ├── Collapsible.js │ │ └── collapsible.styl │ ├── color-palette │ │ ├── ColorPalette.js │ │ └── color-palette.styl │ ├── flow-preview │ │ ├── FlowPreview.js │ │ └── preview.styl │ ├── flow-snippet │ │ ├── FlowSnippet.js │ │ ├── snippet.styl │ │ └── snippets │ │ │ ├── HTMLSnippet.js │ │ │ ├── JSSnippet.js │ │ │ └── MarkdownSnippet.js │ ├── flow-warning │ │ ├── FlowWarning.js │ │ └── warning.styl │ ├── helpers │ │ ├── ConsoleHelper.js │ │ ├── CurlHelper.js │ │ ├── MissingHelper.js │ │ ├── PawHelper.js │ │ ├── PostmanHelper.js │ │ ├── SwaggerRAMLHelper.js │ │ └── helper-content.styl │ ├── metadata-editor │ │ ├── MetadataEditor.js │ │ └── editor.styl │ ├── notifier │ │ ├── Notifier.js │ │ └── notifier.styl │ ├── status-bar │ │ ├── StatusBar.js │ │ └── status-bar.styl │ └── tabs │ │ ├── TabView.js │ │ ├── TabViewer.js │ │ └── tabs.styl ├── favicon ├── index.html ├── index.js ├── index_prod.html ├── principles │ ├── Colors.js │ ├── blocks.styl │ ├── border-mixins.styl │ ├── colors.styl │ ├── font-mixins.styl │ ├── gutter-mixins.styl │ ├── layout-mixins.styl │ └── padding-mixins.styl └── templates │ ├── helper │ ├── Helper.js │ └── helper.styl │ ├── landing │ ├── Landing.js │ └── landing.styl │ └── uploader │ ├── Uploader.js │ └── uploader.styl └── webpack.config.babel.js /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | 'presets': [ 3 | 'es2015', 4 | 'stage-0', 5 | 'stage-1', 6 | 'stage-2', 7 | 'stage-3' 8 | ], 9 | 'plugins': ['transform-decorators-legacy', 'transform-runtime', 10 | 'transform-react-jsx'] 11 | } 12 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luckymarmot/console-rest/a331e64887d17988073d892e1ee6d9d801576d62/.eslintignore -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | dist 3 | .DS_Store 4 | -------------------------------------------------------------------------------- /.nvmrc: -------------------------------------------------------------------------------- 1 | v5.10.0 2 | -------------------------------------------------------------------------------- /CNAME: -------------------------------------------------------------------------------- 1 | console.rest 2 | -------------------------------------------------------------------------------- /Makefile: -------------------------------------------------------------------------------- 1 | # generic 2 | configure: 3 | npm install 4 | 5 | clean: 6 | rm -rf node_modules static 7 | 8 | dev-server: 9 | ./node_modules/.bin/webpack-dev-server --config ./configs/hot/webpack.config.babel.js 10 | 11 | # website 12 | test-website: 13 | ./node_modules/.bin/mocha --require mocha --compilers js:babel-core/register --reporter spec "src/**/__tests__/*-test.js" 14 | 15 | lint-website: 16 | ./node_modules/eslint/bin/eslint.js -c linting/prod.yaml src/ 17 | 18 | prod-website: 19 | NODE_ENV=production BUILD_ENV=build ./node_modules/.bin/webpack --config ./configs/website/webpack.config.babel.js 20 | 21 | # button 22 | lint-button: 23 | ./node_modules/eslint/bin/eslint.js -c linting/prod.yaml button/ 24 | 25 | prod-button: 26 | NODE_ENV=production BUILD_ENV=build ./node_modules/.bin/webpack --config ./configs/button/webpack.config.babel.js 27 | cp ./button/index.js ./github.io/libs/console-rest.js 28 | 29 | test-button: 30 | ./node_modules/.bin/mocha --require mocha --compilers js:babel-core/register --reporter spec "button/**/__tests__/*-test.js" 31 | 32 | # all 33 | lint: lint-website lint-button 34 | 35 | test: test-website test-button 36 | 37 | prod: prod-website prod-button 38 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Console.REST 2 | 3 | [![Slack Status](https://console-rest-slackin.herokuapp.com/badge.svg)](https://console-rest-slackin.herokuapp.com) 4 | 5 | Console.REST is a converter service for API description formats and HTTP clients, such as Swagger, RAML, Curl, Postman, and Paw. 6 | 7 | This project is open-source, and can be used in multiple ways: 8 | - as a client-side web service, at [https://console.rest/](https://console.rest). 9 | - as a button present on the documentation of API providers. 10 | - as a Chrome extension for users to use on popular API documentations, based on [apis.guru](https://apis.guru) (Still in development). 11 | - as a JS library that allows users to programmatically convert formats. 12 | 13 | ## Dependencies 14 | 15 | Console.REST uses the open-source library [API-Flow](https://github.com/luckymarmot/API-Flow) to convert between formats. As a standalone, API-Flow is available as a webworker, a web library, and a node module. 16 | 17 | ## Button 18 | 19 | Console.REST provides API providers with 2 snippets to plug into their API docs to allow their users to download them in their preferred format: 20 | - An HTML/JS Snippet for web documentation, that injects itself in the context of the page to give a seamless experience to the user. 21 | - A Markdown Snippet for github documentation, that uses Console.REST as a Service. 22 | 23 | The button looks like this 24 | 25 | [![Run API With...](https://console.rest/github.io/assets/buttons/run_with_red.svg)](https://console.rest/#?name=swagger&format=swagger&version=v2.0&uri=https%3A%2F%2Fapi.apis.guru%2Fv2%2Fspecs%2Fxkcd.com%2F1.0.0%2Fswagger.yaml) 26 | 27 | You can read more about how to use the button in your API documentation in the [wiki](https://github.com/luckymarmot/console-rest/wiki). 28 | 29 | ## URL Scheme 30 | 31 | [Console.REST](https://console.rest) exposes a simple API that allows anyone to open it with a file to convert. You can find more information on the API in the [wiki](https://github.com/luckymarmot/console-rest/wiki/window.location.hash). 32 | 33 | ## JS Library 34 | 35 | A stripped down version of Console.REST without any of the visuals is also available for users and API providers that want to integrate the functionalities of Console.REST and API-Flow even further into their projects. 36 | 37 | You can read more about the API of the JS library in the [wiki](https://github.com/luckymarmot/console-rest/wiki/using-the-js-library). 38 | 39 | ## Chrome Extension (Still in development) 40 | 41 | Some API providers may have a Swagger/RAML/etc. but may not have included Console.REST as a Button in their API docs. Thanks to the awesome work of the guys at [apis.guru](https://apis.guru), the extension can offer the functionalities of Console.REST as a button even on pages that don't have the button. 42 | 43 | ## License 44 | 45 | This repository is released under the [MIT License](LICENSE). Feel free to fork, and modify! 46 | Copyright © 2016 Paw Inc. 47 | 48 | ## Contributors 49 | 50 | See [Contributors](https://github.com/luckymarmot/console-rest/graphs/contributors). 51 | -------------------------------------------------------------------------------- /build/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Console.REST 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /button/code-highlighter/CodeHighlighter.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react' 2 | 3 | import hljs from './highlight' 4 | import lang_http from './languages/http' 5 | import lang_json from './languages/json' 6 | import lang_yaml from './languages/yaml' 7 | import lang_markdown from './languages/markdown' 8 | 9 | hljs.registerLanguage('http', lang_http) 10 | hljs.registerLanguage('json', lang_json) 11 | hljs.registerLanguage('yaml', lang_yaml) 12 | hljs.registerLanguage('markdown', lang_markdown) 13 | 14 | require('./code-highlighter.styl') 15 | 16 | export default class CodeHighlighter extends Component { 17 | static propTypes = { 18 | input: React.PropTypes.string, 19 | lang: React.PropTypes.string 20 | } 21 | static defaultProps = { 22 | lang: 'http' 23 | } 24 | 25 | tokensToLines(input, tokens) { 26 | let tokenPos = 0 27 | let lines = [ [] ] 28 | for (let token of tokens) { 29 | let subInput = input.substr(tokenPos, token.len) 30 | let subLines = subInput.split('\n') 31 | let i = 0 32 | for (let subLine of subLines) { 33 | if (i > 0) { 34 | lines.push([]) 35 | } 36 | lines[lines.length - 1].push({ 37 | text: subLine, 38 | className: token.className 39 | }) 40 | i += 1 41 | } 42 | tokenPos += token.len 43 | } 44 | return lines 45 | } 46 | 47 | renderLine(line) { 48 | let tokenComponents = [] 49 | let count = 0 50 | for (let token of line) { 51 | let className = null 52 | if (token.className) { 53 | className = `hljs-${token.className}` 54 | } 55 | tokenComponents.push( 56 | {token.text || '\r'} 57 | ) 58 | count += 1 59 | } 60 | return tokenComponents 61 | } 62 | 63 | renderText() { 64 | const { input, lang } = this.props 65 | 66 | // parse with highlightjs 67 | const tokens = hljs.highlight(lang, input, true).value 68 | 69 | // get lines 70 | const lines = this.tokensToLines(input, tokens) 71 | 72 | let lineComponents = [] 73 | let count = 0 74 | for (let line of lines) { 75 | lineComponents.push( 76 | {this.renderLine(line)} 77 | ) 78 | count += 1 79 | } 80 | return lineComponents 81 | } 82 | 83 | render() { 84 | const { className } = this.props 85 | return 
{this.renderText()}
86 | } 87 | } 88 | -------------------------------------------------------------------------------- /button/code-highlighter/code-highlighter.styl: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | Atom One Light by Daniel Gamage 4 | Original One Light Syntax theme from https://github.com/atom/one-light-syntax 5 | 6 | base: #fafafa // off-white 7 | mono-1: #383a42 // dark-grey 8 | mono-2: #686b77 // grey 9 | mono-3: #a0a1a7 // light-grey 10 | hue-1: #0184bb 11 | hue-2: #4078f2 12 | hue-3: #a626a4 13 | hue-4: #50a14f 14 | hue-5: #e45649 15 | hue-5-2: #c91243 16 | hue-6: #986801 17 | hue-6-2: #c18401 18 | 19 | */ 20 | 21 | /* 22 | Updated hues 23 | 24 | cherry: #D42C69 25 | purple: #863CC6 26 | blue: #2F78CD 27 | turquoise: #26C29F 28 | orange: #EA6E30 29 | 30 | */ 31 | .oic 32 | .hljs 33 | display: block 34 | overflow-x: auto 35 | padding: 0.5em 36 | color: #383a42 37 | background: #fafafa 38 | 39 | 40 | .hljs-comment 41 | .hljs-quote 42 | color: #a0a1a7 43 | font-style: italic 44 | 45 | 46 | .hljs-doctag 47 | .hljs-keyword 48 | .hljs-formula 49 | color: #26C29F 50 | 51 | .hljs-section 52 | .hljs-name 53 | .hljs-selector-tag 54 | .hljs-deletion 55 | .hljs-subst 56 | color: #863CC6 57 | 58 | 59 | .hljs-literal 60 | color: #EA6E30 61 | 62 | 63 | .hljs-string 64 | .hljs-regexp 65 | .hljs-addition 66 | .hljs-attribute 67 | .hljs-meta-string 68 | color: #2F78CD 69 | 70 | 71 | .hljs-built_in 72 | .hljs-code 73 | .hljs-class .hljs-title 74 | color: #EA6E30 75 | 76 | 77 | .hljs-attr 78 | .hljs-variable 79 | .hljs-template-variable 80 | .hljs-type 81 | .hljs-selector-class 82 | .hljs-selector-attr 83 | .hljs-selector-pseudo 84 | .hljs-number 85 | color: #D42C69 86 | 87 | 88 | .hljs-symbol 89 | .hljs-bullet 90 | .hljs-link 91 | .hljs-meta 92 | .hljs-selector-id 93 | .hljs-title 94 | color: #2F78CD 95 | 96 | 97 | .hljs-emphasis 98 | font-style: italic 99 | 100 | 101 | .hljs-strong 102 | font-weight: bold 103 | 104 | 105 | .hljs-link 106 | text-decoration: underline 107 | 108 | pre 109 | background-image: none 110 | border: none 111 | overflow-x: visible 112 | white-space pre-wrap 113 | word-wrap break-word 114 | padding 0 115 | line-height 0 116 | counter-reset line 117 | margin 0 118 | font-family: 'Roboto Mono', monospace; 119 | span.line 120 | display block 121 | font-size 12px 122 | line-height 16px 123 | margin-left 15px 124 | padding 0px 10px 125 | position relative 126 | color darken(#7F94A1, 30%) 127 | &:first-child 128 | padding-top 5px 129 | 130 | &:before 131 | counter-increment line 132 | content counter(line) 133 | position absolute 134 | padding 0 .5em 135 | color darken(#F3F5F6, 15%) 136 | margin-left -89px 137 | font-size 10px 138 | user-select none 139 | text-align right 140 | width 70px 141 | -------------------------------------------------------------------------------- /button/code-highlighter/languages/http.js: -------------------------------------------------------------------------------- 1 | /*eslint-disable*/ 2 | 3 | /* 4 | Language: HTTP 5 | Description: HTTP request and response headers with automatic body highlighting 6 | Author: Ivan Sagalaev 7 | Category: common, protocols 8 | */ 9 | 10 | let lang = function(hljs) { 11 | var VERSION = 'HTTP/[0-9\\.]+'; 12 | return { 13 | aliases: ['https'], 14 | illegal: '\\S', 15 | contains: [ 16 | { 17 | begin: '^' + VERSION, end: '$', 18 | contains: [{className: 'number', begin: '\\b\\d{3}\\b'}] 19 | }, 20 | { 21 | begin: '^[A-Z]+ (.*?) ' + VERSION + '$', returnBegin: true, end: '$', 22 | contains: [ 23 | { 24 | className: 'string', 25 | begin: ' ', end: ' ', 26 | excludeBegin: true, excludeEnd: true 27 | }, 28 | { 29 | begin: VERSION 30 | }, 31 | { 32 | className: 'keyword', 33 | begin: '[A-Z]+' 34 | } 35 | ] 36 | }, 37 | { 38 | className: 'attribute', 39 | begin: '^\\w', end: ': ', excludeEnd: true, 40 | illegal: '\\n|\\s|=', 41 | starts: {end: '$', relevance: 0} 42 | }, 43 | { 44 | begin: '\\n\\n', 45 | starts: {subLanguage: [], endsWithParent: true} 46 | } 47 | ] 48 | }; 49 | }; 50 | 51 | /*eslint-enable*/ 52 | 53 | export default lang 54 | -------------------------------------------------------------------------------- /button/code-highlighter/languages/json.js: -------------------------------------------------------------------------------- 1 | /*eslint-disable*/ 2 | /* 3 | Language: JSON 4 | Author: Ivan Sagalaev 5 | Category: common, protocols 6 | */ 7 | 8 | let lang = function(hljs) { 9 | var LITERALS = {literal: 'true false null'}; 10 | var TYPES = [ 11 | hljs.QUOTE_STRING_MODE, 12 | hljs.C_NUMBER_MODE 13 | ]; 14 | var VALUE_CONTAINER = { 15 | end: ',', endsWithParent: true, excludeEnd: true, 16 | contains: TYPES, 17 | keywords: LITERALS 18 | }; 19 | var OBJECT = { 20 | begin: '{', end: '}', 21 | contains: [ 22 | { 23 | className: 'attr', 24 | begin: '\\s*"', end: '"\\s*:\\s*', excludeBegin: true, excludeEnd: true, 25 | contains: [hljs.BACKSLASH_ESCAPE], 26 | illegal: '\\n', 27 | starts: VALUE_CONTAINER 28 | } 29 | ], 30 | illegal: '\\S' 31 | }; 32 | var ARRAY = { 33 | begin: '\\[', end: '\\]', 34 | contains: [hljs.inherit(VALUE_CONTAINER)], // inherit is a workaround for a bug that makes shared modes with endsWithParent compile only the ending of one of the parents 35 | illegal: '\\S' 36 | }; 37 | TYPES.splice(TYPES.length, 0, OBJECT, ARRAY); 38 | return { 39 | contains: TYPES, 40 | keywords: LITERALS, 41 | illegal: '\\S' 42 | }; 43 | } 44 | 45 | /*eslint-enable*/ 46 | 47 | export default lang 48 | -------------------------------------------------------------------------------- /button/code-highlighter/languages/markdown.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | /* 3 | Language: Markdown 4 | Requires: xml.js 5 | Author: John Crepezzi 6 | Website: http://seejohncode.com/ 7 | Category: common, markup 8 | */ 9 | 10 | let lang = function(hljs) { 11 | return { 12 | aliases: ['md', 'mkdown', 'mkd'], 13 | contains: [ 14 | // highlight headers 15 | { 16 | className: 'section', 17 | variants: [ 18 | { begin: '^#{1,6}', end: '$' }, 19 | { begin: '^.+?\\n[=-]{2,}$' } 20 | ] 21 | }, 22 | // inline html 23 | { 24 | begin: '<', end: '>', 25 | subLanguage: 'xml', 26 | relevance: 0 27 | }, 28 | // lists (indicators only) 29 | { 30 | className: 'bullet', 31 | begin: '^([*+-]|(\\d+\\.))\\s+' 32 | }, 33 | // strong segments 34 | { 35 | className: 'strong', 36 | begin: '[*_]{2}.+?[*_]{2}' 37 | }, 38 | // emphasis segments 39 | { 40 | className: 'emphasis', 41 | variants: [ 42 | { begin: '\\*.+?\\*' }, 43 | { begin: '_.+?_' 44 | , relevance: 0 45 | } 46 | ] 47 | }, 48 | // blockquotes 49 | { 50 | className: 'quote', 51 | begin: '^>\\s+', end: '$' 52 | }, 53 | // code snippets 54 | { 55 | className: 'code', 56 | variants: [ 57 | { begin: '`.+?`' }, 58 | { begin: '^( {4}|\t)', end: '$' 59 | , relevance: 0 60 | } 61 | ] 62 | }, 63 | // horizontal rules 64 | { 65 | begin: '^[-\\*]{3,}', end: '$' 66 | }, 67 | // using links - title and link 68 | { 69 | begin: '\\[.+?\\][\\(\\[].*?[\\)\\]]', 70 | returnBegin: true, 71 | contains: [ 72 | { 73 | className: 'string', 74 | begin: '\\[', end: '\\]', 75 | excludeBegin: true, 76 | returnEnd: true, 77 | relevance: 0 78 | }, 79 | { 80 | className: 'link', 81 | begin: '\\]\\(', end: '\\)', 82 | excludeBegin: true, excludeEnd: true 83 | }, 84 | { 85 | className: 'symbol', 86 | begin: '\\]\\[', end: '\\]', 87 | excludeBegin: true, excludeEnd: true 88 | } 89 | ], 90 | relevance: 10 91 | }, 92 | { 93 | begin: '^\\[\.+\\]:', 94 | returnBegin: true, 95 | contains: [ 96 | { 97 | className: 'symbol', 98 | begin: '\\[', end: '\\]:', 99 | excludeBegin: true, excludeEnd: true, 100 | starts: { 101 | className: 'link', 102 | end: '$' 103 | } 104 | } 105 | ] 106 | } 107 | ] 108 | }; 109 | } 110 | 111 | /* eslint-enable */ 112 | export default lang 113 | -------------------------------------------------------------------------------- /button/code-highlighter/languages/yaml.js: -------------------------------------------------------------------------------- 1 | /*eslint-disable*/ 2 | /* 3 | Language: YAML 4 | Author: Stefan Wienert 5 | Requires: ruby.js 6 | Description: YAML (Yet Another Markdown Language) 7 | Category: config 8 | */ 9 | let lang = function(hljs) { 10 | var LITERALS = {literal: '{ } true false yes no Yes No True False null'}; 11 | 12 | var keyPrefix = '^[ \\-]*'; 13 | var keyName = '[a-zA-Z_][\\w\\-]*'; 14 | var KEY = { 15 | className: 'attr', 16 | variants: [ 17 | { begin: keyPrefix + keyName + ":"}, 18 | { begin: keyPrefix + '"' + keyName + '"' + ":"}, 19 | { begin: keyPrefix + "'" + keyName + "'" + ":"} 20 | ] 21 | }; 22 | 23 | var TEMPLATE_VARIABLES = { 24 | className: 'template-variable', 25 | variants: [ 26 | { begin: '\{\{', end: '\}\}' }, // jinja templates Ansible 27 | { begin: '%\{', end: '\}' } // Ruby i18n 28 | ] 29 | }; 30 | var STRING = { 31 | className: 'string', 32 | relevance: 0, 33 | variants: [ 34 | {begin: /'/, end: /'/}, 35 | {begin: /"/, end: /"/} 36 | ], 37 | contains: [ 38 | hljs.BACKSLASH_ESCAPE, 39 | TEMPLATE_VARIABLES 40 | ] 41 | }; 42 | 43 | return { 44 | case_insensitive: true, 45 | aliases: ['yml', 'YAML', 'yaml'], 46 | contains: [ 47 | KEY, 48 | { 49 | className: 'meta', 50 | begin: '^---\s*$', 51 | relevance: 10 52 | }, 53 | { // multi line string 54 | className: 'string', 55 | begin: '[\\|>] *$', 56 | returnEnd: true, 57 | contains: STRING.contains, 58 | // very simple termination: next hash key 59 | end: KEY.variants[0].begin 60 | }, 61 | { // Ruby/Rails erb 62 | begin: '<%[%=-]?', end: '[%-]?%>', 63 | subLanguage: 'ruby', 64 | excludeBegin: true, 65 | excludeEnd: true, 66 | relevance: 0 67 | }, 68 | { // data type 69 | className: 'type', 70 | begin: '!!' + hljs.UNDERSCORE_IDENT_RE, 71 | }, 72 | { // fragment id &ref 73 | className: 'meta', 74 | begin: '&' + hljs.UNDERSCORE_IDENT_RE + '$', 75 | }, 76 | { // fragment reference *ref 77 | className: 'meta', 78 | begin: '\\*' + hljs.UNDERSCORE_IDENT_RE + '$' 79 | }, 80 | { // array listing 81 | className: 'bullet', 82 | begin: '^ *-', 83 | relevance: 0 84 | }, 85 | STRING, 86 | hljs.HASH_COMMENT_MODE, 87 | hljs.C_NUMBER_MODE 88 | ], 89 | keywords: LITERALS 90 | }; 91 | } 92 | /*eslint-enable*/ 93 | 94 | export default lang 95 | -------------------------------------------------------------------------------- /button/components/code-highlighter/CodeHighlighter.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react' 2 | 3 | import hljs from './highlight' 4 | import lang_http from './languages/http' 5 | import lang_json from './languages/json' 6 | import lang_yaml from './languages/yaml' 7 | import lang_markdown from './languages/markdown' 8 | 9 | hljs.registerLanguage('http', lang_http) 10 | hljs.registerLanguage('json', lang_json) 11 | hljs.registerLanguage('yaml', lang_yaml) 12 | hljs.registerLanguage('markdown', lang_markdown) 13 | 14 | require('./code-highlighter.styl') 15 | 16 | export default class CodeHighlighter extends Component { 17 | static propTypes = { 18 | input: React.PropTypes.string, 19 | lang: React.PropTypes.string 20 | } 21 | static defaultProps = { 22 | lang: 'http' 23 | } 24 | 25 | tokensToLines(input, tokens) { 26 | let tokenPos = 0 27 | let lines = [ [] ] 28 | for (let token of tokens) { 29 | let subInput = input.substr(tokenPos, token.len) 30 | let subLines = subInput.split('\n') 31 | let i = 0 32 | for (let subLine of subLines) { 33 | if (i > 0) { 34 | lines.push([]) 35 | } 36 | lines[lines.length - 1].push({ 37 | text: subLine, 38 | className: token.className 39 | }) 40 | i += 1 41 | } 42 | tokenPos += token.len 43 | } 44 | return lines 45 | } 46 | 47 | renderLine(line) { 48 | let tokenComponents = [] 49 | let count = 0 50 | for (let token of line) { 51 | let className = null 52 | if (token.className) { 53 | className = `hljs-${token.className}` 54 | } 55 | tokenComponents.push( 56 | {token.text || '\r'} 57 | ) 58 | count += 1 59 | } 60 | return tokenComponents 61 | } 62 | 63 | renderText() { 64 | const { input, lang } = this.props 65 | 66 | // parse with highlightjs 67 | const tokens = hljs.highlight(lang, input, true).value 68 | 69 | // get lines 70 | const lines = this.tokensToLines(input, tokens) 71 | 72 | let lineComponents = [] 73 | let count = 0 74 | for (let line of lines) { 75 | lineComponents.push( 76 | {this.renderLine(line)} 77 | ) 78 | count += 1 79 | } 80 | return lineComponents 81 | } 82 | 83 | render() { 84 | const { className } = this.props 85 | return 
{this.renderText()}
86 | } 87 | } 88 | -------------------------------------------------------------------------------- /button/components/code-highlighter/code-highlighter.styl: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | Atom One Light by Daniel Gamage 4 | Original One Light Syntax theme from https://github.com/atom/one-light-syntax 5 | 6 | base: #fafafa // off-white 7 | mono-1: #383a42 // dark-grey 8 | mono-2: #686b77 // grey 9 | mono-3: #a0a1a7 // light-grey 10 | hue-1: #0184bb 11 | hue-2: #4078f2 12 | hue-3: #a626a4 13 | hue-4: #50a14f 14 | hue-5: #e45649 15 | hue-5-2: #c91243 16 | hue-6: #986801 17 | hue-6-2: #c18401 18 | 19 | */ 20 | 21 | /* 22 | Updated hues 23 | 24 | cherry: #D42C69 25 | purple: #863CC6 26 | blue: #2F78CD 27 | turquoise: #26C29F 28 | orange: #EA6E30 29 | 30 | */ 31 | .oic 32 | .hljs 33 | display: block 34 | overflow-x: auto 35 | padding: 0.5em 36 | color: #383a42 37 | background: #fafafa 38 | 39 | 40 | .hljs-comment 41 | .hljs-quote 42 | color: #a0a1a7 43 | font-style: italic 44 | 45 | 46 | .hljs-doctag 47 | .hljs-keyword 48 | .hljs-formula 49 | color: #26C29F 50 | 51 | .hljs-section 52 | .hljs-name 53 | .hljs-selector-tag 54 | .hljs-deletion 55 | .hljs-subst 56 | color: #863CC6 57 | 58 | 59 | .hljs-literal 60 | color: #EA6E30 61 | 62 | 63 | .hljs-string 64 | .hljs-regexp 65 | .hljs-addition 66 | .hljs-attribute 67 | .hljs-meta-string 68 | color: #2F78CD 69 | 70 | 71 | .hljs-built_in 72 | .hljs-code 73 | .hljs-class .hljs-title 74 | color: #EA6E30 75 | 76 | 77 | .hljs-attr 78 | .hljs-variable 79 | .hljs-template-variable 80 | .hljs-type 81 | .hljs-selector-class 82 | .hljs-selector-attr 83 | .hljs-selector-pseudo 84 | .hljs-number 85 | color: #D42C69 86 | 87 | 88 | .hljs-symbol 89 | .hljs-bullet 90 | .hljs-link 91 | .hljs-meta 92 | .hljs-selector-id 93 | .hljs-title 94 | color: #2F78CD 95 | 96 | 97 | .hljs-emphasis 98 | font-style: italic 99 | 100 | 101 | .hljs-strong 102 | font-weight: bold 103 | 104 | 105 | .hljs-link 106 | text-decoration: underline 107 | 108 | pre 109 | background-image: none 110 | border: none 111 | overflow-x: visible 112 | white-space pre-wrap 113 | word-wrap break-word 114 | padding 0 115 | line-height 0 116 | counter-reset line 117 | margin 0 118 | font-family: 'Roboto Mono', monospace; 119 | span.line 120 | display block 121 | font-size 12px 122 | line-height 16px 123 | margin-left 15px 124 | padding 0px 10px 125 | position relative 126 | color darken(#7F94A1, 30%) 127 | &:first-child 128 | padding-top 5px 129 | 130 | &:before 131 | counter-increment line 132 | content counter(line) 133 | position absolute 134 | padding 0 .5em 135 | color darken(#F3F5F6, 15%) 136 | margin-left -89px 137 | font-size 10px 138 | user-select none 139 | text-align right 140 | width 70px 141 | -------------------------------------------------------------------------------- /button/components/code-highlighter/languages/http.js: -------------------------------------------------------------------------------- 1 | /*eslint-disable*/ 2 | 3 | /* 4 | Language: HTTP 5 | Description: HTTP request and response headers with automatic body highlighting 6 | Author: Ivan Sagalaev 7 | Category: common, protocols 8 | */ 9 | 10 | let lang = function(hljs) { 11 | var VERSION = 'HTTP/[0-9\\.]+'; 12 | return { 13 | aliases: ['https'], 14 | illegal: '\\S', 15 | contains: [ 16 | { 17 | begin: '^' + VERSION, end: '$', 18 | contains: [{className: 'number', begin: '\\b\\d{3}\\b'}] 19 | }, 20 | { 21 | begin: '^[A-Z]+ (.*?) ' + VERSION + '$', returnBegin: true, end: '$', 22 | contains: [ 23 | { 24 | className: 'string', 25 | begin: ' ', end: ' ', 26 | excludeBegin: true, excludeEnd: true 27 | }, 28 | { 29 | begin: VERSION 30 | }, 31 | { 32 | className: 'keyword', 33 | begin: '[A-Z]+' 34 | } 35 | ] 36 | }, 37 | { 38 | className: 'attribute', 39 | begin: '^\\w', end: ': ', excludeEnd: true, 40 | illegal: '\\n|\\s|=', 41 | starts: {end: '$', relevance: 0} 42 | }, 43 | { 44 | begin: '\\n\\n', 45 | starts: {subLanguage: [], endsWithParent: true} 46 | } 47 | ] 48 | }; 49 | }; 50 | 51 | /*eslint-enable*/ 52 | 53 | export default lang 54 | -------------------------------------------------------------------------------- /button/components/code-highlighter/languages/json.js: -------------------------------------------------------------------------------- 1 | /*eslint-disable*/ 2 | /* 3 | Language: JSON 4 | Author: Ivan Sagalaev 5 | Category: common, protocols 6 | */ 7 | 8 | let lang = function(hljs) { 9 | var LITERALS = {literal: 'true false null'}; 10 | var TYPES = [ 11 | hljs.QUOTE_STRING_MODE, 12 | hljs.C_NUMBER_MODE 13 | ]; 14 | var VALUE_CONTAINER = { 15 | end: ',', endsWithParent: true, excludeEnd: true, 16 | contains: TYPES, 17 | keywords: LITERALS 18 | }; 19 | var OBJECT = { 20 | begin: '{', end: '}', 21 | contains: [ 22 | { 23 | className: 'attr', 24 | begin: '\\s*"', end: '"\\s*:\\s*', excludeBegin: true, excludeEnd: true, 25 | contains: [hljs.BACKSLASH_ESCAPE], 26 | illegal: '\\n', 27 | starts: VALUE_CONTAINER 28 | } 29 | ], 30 | illegal: '\\S' 31 | }; 32 | var ARRAY = { 33 | begin: '\\[', end: '\\]', 34 | contains: [hljs.inherit(VALUE_CONTAINER)], // inherit is a workaround for a bug that makes shared modes with endsWithParent compile only the ending of one of the parents 35 | illegal: '\\S' 36 | }; 37 | TYPES.splice(TYPES.length, 0, OBJECT, ARRAY); 38 | return { 39 | contains: TYPES, 40 | keywords: LITERALS, 41 | illegal: '\\S' 42 | }; 43 | } 44 | 45 | /*eslint-enable*/ 46 | 47 | export default lang 48 | -------------------------------------------------------------------------------- /button/components/code-highlighter/languages/markdown.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | /* 3 | Language: Markdown 4 | Requires: xml.js 5 | Author: John Crepezzi 6 | Website: http://seejohncode.com/ 7 | Category: common, markup 8 | */ 9 | 10 | let lang = function(hljs) { 11 | return { 12 | aliases: ['md', 'mkdown', 'mkd'], 13 | contains: [ 14 | // highlight headers 15 | { 16 | className: 'section', 17 | variants: [ 18 | { begin: '^#{1,6}', end: '$' }, 19 | { begin: '^.+?\\n[=-]{2,}$' } 20 | ] 21 | }, 22 | // inline html 23 | { 24 | begin: '<', end: '>', 25 | subLanguage: 'xml', 26 | relevance: 0 27 | }, 28 | // lists (indicators only) 29 | { 30 | className: 'bullet', 31 | begin: '^([*+-]|(\\d+\\.))\\s+' 32 | }, 33 | // strong segments 34 | { 35 | className: 'strong', 36 | begin: '[*_]{2}.+?[*_]{2}' 37 | }, 38 | // emphasis segments 39 | { 40 | className: 'emphasis', 41 | variants: [ 42 | { begin: '\\*.+?\\*' }, 43 | { begin: '_.+?_' 44 | , relevance: 0 45 | } 46 | ] 47 | }, 48 | // blockquotes 49 | { 50 | className: 'quote', 51 | begin: '^>\\s+', end: '$' 52 | }, 53 | // code snippets 54 | { 55 | className: 'code', 56 | variants: [ 57 | { begin: '`.+?`' }, 58 | { begin: '^( {4}|\t)', end: '$' 59 | , relevance: 0 60 | } 61 | ] 62 | }, 63 | // horizontal rules 64 | { 65 | begin: '^[-\\*]{3,}', end: '$' 66 | }, 67 | // using links - title and link 68 | { 69 | begin: '\\[.+?\\][\\(\\[].*?[\\)\\]]', 70 | returnBegin: true, 71 | contains: [ 72 | { 73 | className: 'string', 74 | begin: '\\[', end: '\\]', 75 | excludeBegin: true, 76 | returnEnd: true, 77 | relevance: 0 78 | }, 79 | { 80 | className: 'link', 81 | begin: '\\]\\(', end: '\\)', 82 | excludeBegin: true, excludeEnd: true 83 | }, 84 | { 85 | className: 'symbol', 86 | begin: '\\]\\[', end: '\\]', 87 | excludeBegin: true, excludeEnd: true 88 | } 89 | ], 90 | relevance: 10 91 | }, 92 | { 93 | begin: '^\\[\.+\\]:', 94 | returnBegin: true, 95 | contains: [ 96 | { 97 | className: 'symbol', 98 | begin: '\\[', end: '\\]:', 99 | excludeBegin: true, excludeEnd: true, 100 | starts: { 101 | className: 'link', 102 | end: '$' 103 | } 104 | } 105 | ] 106 | } 107 | ] 108 | }; 109 | } 110 | 111 | /* eslint-enable */ 112 | export default lang 113 | -------------------------------------------------------------------------------- /button/components/code-highlighter/languages/yaml.js: -------------------------------------------------------------------------------- 1 | /*eslint-disable*/ 2 | /* 3 | Language: YAML 4 | Author: Stefan Wienert 5 | Requires: ruby.js 6 | Description: YAML (Yet Another Markdown Language) 7 | Category: config 8 | */ 9 | let lang = function(hljs) { 10 | var LITERALS = {literal: '{ } true false yes no Yes No True False null'}; 11 | 12 | var keyPrefix = '^[ \\-]*'; 13 | var keyName = '[a-zA-Z_][\\w\\-]*'; 14 | var KEY = { 15 | className: 'attr', 16 | variants: [ 17 | { begin: keyPrefix + keyName + ":"}, 18 | { begin: keyPrefix + '"' + keyName + '"' + ":"}, 19 | { begin: keyPrefix + "'" + keyName + "'" + ":"} 20 | ] 21 | }; 22 | 23 | var TEMPLATE_VARIABLES = { 24 | className: 'template-variable', 25 | variants: [ 26 | { begin: '\{\{', end: '\}\}' }, // jinja templates Ansible 27 | { begin: '%\{', end: '\}' } // Ruby i18n 28 | ] 29 | }; 30 | var STRING = { 31 | className: 'string', 32 | relevance: 0, 33 | variants: [ 34 | {begin: /'/, end: /'/}, 35 | {begin: /"/, end: /"/} 36 | ], 37 | contains: [ 38 | hljs.BACKSLASH_ESCAPE, 39 | TEMPLATE_VARIABLES 40 | ] 41 | }; 42 | 43 | return { 44 | case_insensitive: true, 45 | aliases: ['yml', 'YAML', 'yaml'], 46 | contains: [ 47 | KEY, 48 | { 49 | className: 'meta', 50 | begin: '^---\s*$', 51 | relevance: 10 52 | }, 53 | { // multi line string 54 | className: 'string', 55 | begin: '[\\|>] *$', 56 | returnEnd: true, 57 | contains: STRING.contains, 58 | // very simple termination: next hash key 59 | end: KEY.variants[0].begin 60 | }, 61 | { // Ruby/Rails erb 62 | begin: '<%[%=-]?', end: '[%-]?%>', 63 | subLanguage: 'ruby', 64 | excludeBegin: true, 65 | excludeEnd: true, 66 | relevance: 0 67 | }, 68 | { // data type 69 | className: 'type', 70 | begin: '!!' + hljs.UNDERSCORE_IDENT_RE, 71 | }, 72 | { // fragment id &ref 73 | className: 'meta', 74 | begin: '&' + hljs.UNDERSCORE_IDENT_RE + '$', 75 | }, 76 | { // fragment reference *ref 77 | className: 'meta', 78 | begin: '\\*' + hljs.UNDERSCORE_IDENT_RE + '$' 79 | }, 80 | { // array listing 81 | className: 'bullet', 82 | begin: '^ *-', 83 | relevance: 0 84 | }, 85 | STRING, 86 | hljs.HASH_COMMENT_MODE, 87 | hljs.C_NUMBER_MODE 88 | ], 89 | keywords: LITERALS 90 | }; 91 | } 92 | /*eslint-enable*/ 93 | 94 | export default lang 95 | -------------------------------------------------------------------------------- /button/components/header/Header.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react' 2 | 3 | import ConsoleRestLogo from '../logos/ConsoleRest' 4 | 5 | require('./header.styl') 6 | 7 | export default class Header extends Component { 8 | close() { 9 | if (typeof this.props.onClose === 'function') { 10 | this.props.onClose(...arguments) 11 | } 12 | } 13 | 14 | render() { 15 | let classes = this.props.className || '' 16 | classes += ' oic-header' 17 | 18 | let name = this.props.name || 'API' 19 | 20 | const styles = { 21 | backgroundColor: this.props.theme || 'rgb(61, 51, 85)' 22 | } 23 | 24 | return
25 |
26 | 27 |
28 |
29 | Open {name} As... 30 |
31 |
32 | × 33 |
34 |
35 | } 36 | } 37 | -------------------------------------------------------------------------------- /button/components/header/header.styl: -------------------------------------------------------------------------------- 1 | .oic .oic-header 2 | color: #ffffff 3 | font-weight: 200 4 | height: 64px 5 | display: flex 6 | flex-direction: row 7 | justify-content: space-between 8 | align-items: stretch 9 | flex-shrink: 0 10 | flex-grow: 0 11 | .logo-container 12 | max-width: 96px 13 | min-width: 96px 14 | width: 96px 15 | margin: 16px 16 | box-sizing: border-box 17 | display: flex 18 | flex-direction: row 19 | justify-content: flex-start 20 | flex-grow: 0 21 | flex-shrink: 0 22 | .logo 23 | width: 100% 24 | .title 25 | justify-content: center 26 | align-items: center 27 | flex-grow: 1 28 | flex-shrink: 0 29 | font-size: 1em 30 | white-space: nowrap 31 | overflow-y: scroll 32 | text-overflow: ellipsis 33 | @media (max-width: 600px) 34 | max-width: calc(100vw - 256px) 35 | @media (min-width: 600px) and (max-width: 960px) 36 | max-width: calc(80vw - 256px) 37 | @media (min-width: 960px) and (max0width: 1280px) 38 | max-width: 512px 39 | 40 | .close 41 | max-width: 96px 42 | width: 96px 43 | margin: 16px 44 | box-sizing: border-box 45 | justify-content: flex-end 46 | align-items: center 47 | height: 32px 48 | flex-grow: 0 49 | flex-shrink: 0 50 | cursor: pointer 51 | -------------------------------------------------------------------------------- /button/components/icons/WarnIcon.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react' 2 | 3 | export default class CurlLogo extends Component { 4 | clicked() { 5 | if (typeof this.props.onClick === 'function') { 6 | this.props.onClick(...arguments) 7 | } 8 | } 9 | 10 | render() { 11 | let classes = this.props.className 12 | /* eslint-disable max-len */ 13 | return 16 | 17 | 18 | 19 | /* eslint-enable max-len */ 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /button/components/logos/Curl.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react' 2 | 3 | export default class CurlLogo extends Component { 4 | clicked() { 5 | if (typeof this.props.onClick === 'function') { 6 | this.props.onClick(...arguments) 7 | } 8 | } 9 | 10 | render() { 11 | let classes = this.props.className 12 | /* eslint-disable max-len */ 13 | return 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | CURL 24 | 25 | 26 | 27 | 28 | 29 | 30 | /* eslint-enable max-len */ 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /button/components/logos/Paw.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react' 2 | 3 | export default class PawLogo extends Component { 4 | clicked() { 5 | if (typeof this.props.onClick === 'function') { 6 | this.props.onClick(...arguments) 7 | } 8 | } 9 | 10 | render() { 11 | let classes = this.props.className 12 | /* eslint-disable max-len */ 13 | return 15 | 16 | 17 | 18 | 22 | 23 | 24 | 26 | 27 | 29 | 30 | 31 | 33 | 34 | 36 | 37 | 41 | 42 | 43 | /* eslint-enable max-len */ 44 | } 45 | } 46 | -------------------------------------------------------------------------------- /button/components/logos/PawMini.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react' 2 | 3 | export default class PawMiniLogo extends Component { 4 | clicked() { 5 | if (typeof this.props.onClick === 'function') { 6 | this.props.onClick(...arguments) 7 | } 8 | } 9 | 10 | render() { 11 | let classes = this.props.className 12 | /* eslint-disable max-len */ 13 | return 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | /* eslint-enable max-len */ 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /button/components/modal/modal.styl: -------------------------------------------------------------------------------- 1 | .oic-outer 2 | z-index: 1000000 3 | display: flex 4 | align-items: center 5 | justify-content: center 6 | position: fixed 7 | top: 0 8 | left: 0 9 | right: 0 10 | bottom: 0 11 | width: 100vw 12 | height: 100vh 13 | font-size: 16px 14 | background-color: rgba(17,10,34,0.75) 15 | transition: opacity 0.4s ease-in-out 16 | 17 | .oic 18 | flex-grow: 0 19 | flex-shrink: 0 20 | overflow: hidden 21 | display: flex 22 | flex-direction: column 23 | flex-wrap: nowrap 24 | align-items: stretch 25 | justify-content: space-between 26 | text-align: center 27 | font-family: sans-serif 28 | background-color: #ffffff 29 | min-width: 0 30 | min-height: 0 31 | 32 | .oic-middle 33 | display: flex 34 | flex-direction: column 35 | justify-content: center 36 | align-items: center 37 | width: inherit 38 | height: inherit 39 | 40 | /* mdpi */ 41 | @media (min-width: 600px) and (max-width: 960px) 42 | .oic 43 | width: 80% 44 | max-width: 100% 45 | height: 576px 46 | max-height: 100% 47 | 48 | .oic-container 49 | flex-basis: 90% 50 | 51 | /* mdpi */ 52 | @media (min-width: 960px) 53 | .oic 54 | width: 768px 55 | height: 576px 56 | 57 | .oic-container 58 | flex-basis: 90% 59 | 60 | /* mdpi */ 61 | @media (max-width: 600px) 62 | .oic 63 | width: 100% 64 | height: 100% 65 | 66 | .oic-container 67 | flex-basis: 95% 68 | 69 | .oic.fadein 70 | animation: fadeinkeyframes linear 0.4s 71 | animation-iteration-count: 1 72 | animation-timing-function: ease-in-out 73 | 74 | @keyframes fadeinkeyframes 75 | 0% 76 | transform: translate(0px, -800px) 77 | opacity: 0 78 | 79 | 100% 80 | transform: translate(0px, 0px) 81 | opacity: 1 82 | 83 | .oic.fadeout 84 | animation: fadeoutkeyframes linear 0.4s 85 | animation-iteration-count: 1 86 | animation-timing-function: ease-in-out 87 | 88 | @keyframes fadeoutkeyframes 89 | 0% 90 | transform: translate(0px, 0px) 91 | opacity: 1 92 | 93 | 100% 94 | transform: translate(0px, -800px) 95 | opacity: 0 96 | -------------------------------------------------------------------------------- /button/components/outer/Outer.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react' 2 | 3 | import Modal from '../modal/Modal' 4 | 5 | export default class OuterContainer extends Component { 6 | constructor(props) { 7 | super(props) 8 | 9 | this.state = { 10 | open: true, 11 | hidden: false 12 | } 13 | } 14 | 15 | componentWillReceiveProps() { 16 | this.setState({ 17 | open: true, 18 | hidden: false 19 | }) 20 | } 21 | 22 | close(ev) { 23 | if (ev.target === this.refs.outer || ev.target === this.refs.middle) { 24 | this.setState({ 25 | open: false, 26 | hidden: false 27 | }) 28 | } 29 | } 30 | 31 | forceClose() { 32 | this.setState({ 33 | open: false, 34 | hidden: false 35 | }) 36 | } 37 | 38 | animationFinished() { 39 | if (this.state.open) { 40 | this.setState({ 41 | hidden: false 42 | }) 43 | } else { 44 | this.setState({ 45 | hidden: true 46 | }) 47 | } 48 | } 49 | 50 | render() { 51 | let style = { 52 | display: this.state.hidden ? 'none' : 'flex', 53 | opacity: this.state.open ? 1 : 0, 54 | zIndex: 1000000 55 | } 56 | 57 | let classes = this.state.open ? 'fadein' : 'fadeout' 58 | 59 | return
61 |
62 | 67 |
68 |
69 | } 70 | } 71 | -------------------------------------------------------------------------------- /button/components/pages/main.styl: -------------------------------------------------------------------------------- 1 | .oic-main 2 | display: flex 3 | flex-direction: column 4 | justify-content: flex-start 5 | .oic-tab-bar 6 | display: flex 7 | flex-direction: row 8 | justify-content: space-around 9 | align-items: stretch 10 | height: 48px 11 | flex-shrink: 0 12 | flex-grow: 0 13 | .tab-view 14 | cursor: pointer 15 | display: flex 16 | justify-content: center 17 | align-items: center 18 | flex-grow: 1 19 | flex-shrink: 1 20 | flex-basis: 0 21 | font-size: 0.9em 22 | border-bottom: 2px solid #D8D6DD 23 | &.active 24 | border-bottom: 2px solid #D42C69 25 | 26 | .oic-tab-content 27 | flex-grow: 1 28 | flex-shrink: 1 29 | display: flex 30 | flex-direction: column 31 | justify-content: space-between 32 | -------------------------------------------------------------------------------- /button/components/pages/pages.styl: -------------------------------------------------------------------------------- 1 | .oic-page 2 | display: flex 3 | flex-direction: column 4 | justify-content: center 5 | align-items: stretch 6 | flex-grow: 1 7 | flex-shrink: 1 8 | height: calc(100% - 64px) 9 | -------------------------------------------------------------------------------- /button/components/simple-select/SimpleSelect.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react' 2 | 3 | require('./simple-select.styl') 4 | 5 | export default class SimpleSelect extends Component { 6 | constructor(props) { 7 | super(props) 8 | 9 | this.state = { 10 | name: this.props.default.name, 11 | value: this.props.default.value, 12 | mode: this.props.default.mode, 13 | active: false 14 | } 15 | } 16 | 17 | showOptions() { 18 | this.setState({ 19 | active: true 20 | }) 21 | 22 | this.close = () => { 23 | this.hideOptions(null) 24 | } 25 | 26 | document.addEventListener('click', this.close) 27 | } 28 | 29 | hideOptions(option) { 30 | if (option !== null) { 31 | this.setState({ 32 | name: option.name, 33 | value: option.value, 34 | active: false 35 | }) 36 | } else { 37 | this.setState({ 38 | active: false 39 | }) 40 | } 41 | 42 | document.removeEventListener('click', this.close) 43 | } 44 | 45 | onComponentWillUnmount() { 46 | document.removeEventListener('click', this.close) 47 | } 48 | 49 | hideOptionsFunc(option) { 50 | return () => { 51 | return this.hideOptions(option) 52 | } 53 | } 54 | 55 | renderOptionsTitle() { 56 | if (this.props.title) { 57 | return 58 | {this.props.title} 59 | 60 | } 61 | 62 | return null 63 | } 64 | 65 | renderOptions() { 66 | return
67 | {this.renderOptionsTitle()} 68 | {this.props.options.map(option => { 69 | let classes = 'oic-select-option' 70 | 71 | if (option.name === this.state.name) { 72 | classes += ' selected' 73 | } else if (option.mode === 'new') { 74 | classes += ' new' 75 | } 76 | 77 | return 80 | {option.name} 81 | 82 | })} 83 |
84 | } 85 | 86 | render() { 87 | let classes = this.props.className || '' 88 | let style = this.props.style || {} 89 | classes += ' oic-simple-select' 90 | /* eslint-disable max-len */ 91 | return
92 | {this.state.name} 93 | {this.renderOptions()} 94 |
95 | /* eslint-enable max-len */ 96 | } 97 | } 98 | -------------------------------------------------------------------------------- /button/components/views/CurlViewer.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | import Viewer from './Viewer' 4 | 5 | require('./curl-view.styl') 6 | 7 | export default class CurlViewer extends Viewer { 8 | constructor(props) { 9 | super(props) 10 | 11 | this.viewClass = 'oic-curl-view' 12 | this.contentClass = 'oic-curl-preview' 13 | this.extension = 'md' 14 | } 15 | 16 | renderActionBar() { 17 | let buttonStyle = {} 18 | if (this.props.theme) { 19 | buttonStyle = { 20 | backgroundColor: this.props.theme 21 | } 22 | } 23 | 24 | return
25 |
28 | Download file 29 |
30 |
31 | } 32 | } 33 | -------------------------------------------------------------------------------- /button/components/views/PawViewer.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | import Viewer from './Viewer' 4 | 5 | require('./paw-view.styl') 6 | 7 | export default class PawViewer extends Viewer { 8 | static importerMap = { 9 | swagger: 'com.luckymarmot.PawExtensions.SwaggerImporter', 10 | raml: 'com.luckymarmot.PawExtensions.RAMLImporter', 11 | postman: 'com.luckymarmot.PawExtensions.PostmanImporter', 12 | curl: 'com.luckymarmot.PawExtensions.cURLImporter' 13 | } 14 | 15 | constructor(props) { 16 | super(props) 17 | 18 | this.viewClass = 'oic-paw-view' 19 | this.displayErrors = false 20 | this.displayLoading = false 21 | } 22 | 23 | renderView() { 24 | return
25 |
26 |

The most advanced API tool for Mac

27 |
28 | Paw is a full-featured HTTP client that lets you test 29 | the APIs you build or consume. It has a beautiful 30 | native OS X interface to compose requests, inspect server 31 | responses and generate client code out-of-the-box. 32 |
33 |
34 | Watch Video 35 |
36 | 39 | Discover Paw 40 | 41 |
42 |
43 | 44 |
45 |
46 | } 47 | 48 | renderActionBar() { 49 | let buttonStyle = {} 50 | if (this.props.theme) { 51 | buttonStyle = { 52 | backgroundColor: this.props.theme 53 | } 54 | } 55 | 56 | /* eslint-disable no-console */ 57 | let url = 'paw://new.document/open?' 58 | if (this.props.converter.url) { 59 | url += 'url=' + encodeURIComponent(this.props.converter.url) 60 | } else { 61 | url += 'text=' + encodeURIComponent(this.props.converter.content) 62 | } 63 | 64 | const format = (this.props.converter.source || {}).format || 'swagger' 65 | const importer = PawViewer.importerMap[format] 66 | 67 | url += '&importer=' + importer 68 | 69 | return 74 | } 75 | } 76 | -------------------------------------------------------------------------------- /button/components/views/PostmanViewer.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | import Viewer from './Viewer' 4 | 5 | require('./postman-view.styl') 6 | 7 | export default class PostmanViewer extends Viewer { 8 | static versions = [ 9 | { 10 | value: 'v1.0', 11 | name: 'Postman v1.0' 12 | } 13 | ] 14 | 15 | constructor(props) { 16 | super(props) 17 | 18 | this.viewClass = 'oic-postman-view' 19 | this.extension = '.postman_dump.json' 20 | } 21 | 22 | renderView() { 23 | return
24 |

Run In Postman

25 |
26 |
27 | Download File 28 |
29 |
30 | Open Postman 31 |
32 |
33 | Import File 34 |
35 |
36 |
37 |