diff --git a/package.json b/package.json index 0673d94c..591f7784 100644 --- a/package.json +++ b/package.json @@ -195,6 +195,7 @@ "singleQuote": true, "trailingComma": "all", "printWidth": 100, - "parser": "typescript" + "parser": "typescript", + "arrowParens": "avoid" } } diff --git a/src/common-elements/headers.ts b/src/common-elements/headers.ts index 3cf0c29e..d8cc0963 100644 --- a/src/common-elements/headers.ts +++ b/src/common-elements/headers.ts @@ -6,7 +6,7 @@ const headerFontSize = { 3: '1.27em', }; -export const headerCommonMixin = (level) => css` +export const headerCommonMixin = level => css` font-family: ${({ theme }) => theme.typography.headings.fontFamily}; font-weight: ${({ theme }) => theme.typography.headings.fontWeight}; font-size: ${headerFontSize[level]}; diff --git a/src/common-elements/tabs.ts b/src/common-elements/tabs.ts index 829c34d0..4e30d66a 100644 --- a/src/common-elements/tabs.ts +++ b/src/common-elements/tabs.ts @@ -31,7 +31,7 @@ export const Tabs = styled(ReactTabs)` font-weight: bold; &.react-tabs__tab--selected { - color: ${(props) => props.theme.rightPanel.tabs.selectedTextColor}; + color: ${props => props.theme.rightPanel.tabs.selectedTextColor}; background: ${({ theme }) => theme.rightPanel.tabs.selectedBackgroundColor}; &:focus { outline: auto; @@ -44,19 +44,19 @@ export const Tabs = styled(ReactTabs)` } &.tab-success { - color: ${(props) => props.theme.colors.responses.success.color}; + color: ${props => props.theme.colors.responses.success.color}; } &.tab-redirect { - color: ${(props) => props.theme.colors.responses.redirect.color}; + color: ${props => props.theme.colors.responses.redirect.color}; } &.tab-info { - color: ${(props) => props.theme.colors.responses.info.color}; + color: ${props => props.theme.colors.responses.info.color}; } &.tab-error { - color: ${(props) => props.theme.colors.responses.error.color}; + color: ${props => props.theme.colors.responses.error.color}; } } } @@ -64,7 +64,7 @@ export const Tabs = styled(ReactTabs)` background: ${({ theme }) => theme.codeBlock.backgroundColor}; & > div, & > pre { - padding: ${(props) => props.theme.spacing.unit * 4}px; + padding: ${props => props.theme.spacing.unit * 4}px; margin: 0; } @@ -101,7 +101,7 @@ export const SmallTabs = styled(Tabs)` > .react-tabs__tab-panel { & > div, & > pre { - padding: ${(props) => props.theme.spacing.unit * 2}px 0; + padding: ${props => props.theme.spacing.unit * 2}px 0; } } `; diff --git a/src/components/Endpoint/styled.elements.ts b/src/components/Endpoint/styled.elements.ts index 758298c7..3a4662da 100644 --- a/src/components/Endpoint/styled.elements.ts +++ b/src/components/Endpoint/styled.elements.ts @@ -7,7 +7,7 @@ export const OperationEndpointWrap = styled.div` `; export const ServerRelativeURL = styled.span` - font-family: ${(props) => props.theme.typography.code.fontFamily}; + font-family: ${props => props.theme.typography.code.fontFamily}; margin-left: 10px; flex: 1; overflow-x: hidden; @@ -20,22 +20,22 @@ export const EndpointInfo = styled.button<{ expanded?: boolean; inverted?: boole width: 100%; text-align: left; cursor: pointer; - padding: 10px 30px 10px ${(props) => (props.inverted ? '10px' : '20px')}; - border-radius: ${(props) => (props.inverted ? '0' : '4px 4px 0 0')}; - background-color: ${(props) => + padding: 10px 30px 10px ${props => (props.inverted ? '10px' : '20px')}; + border-radius: ${props => (props.inverted ? '0' : '4px 4px 0 0')}; + background-color: ${props => props.inverted ? 'transparent' : props.theme.codeBlock.backgroundColor}; display: flex; white-space: nowrap; align-items: center; - border: ${(props) => (props.inverted ? '0' : '1px solid transparent')}; - border-bottom: ${(props) => (props.inverted ? '1px solid #ccc' : '0')}; + border: ${props => (props.inverted ? '0' : '1px solid transparent')}; + border-bottom: ${props => (props.inverted ? '1px solid #ccc' : '0')}; transition: border-color 0.25s ease; - ${(props) => + ${props => (props.expanded && !props.inverted && `border-color: ${props.theme.colors.border.dark};`) || ''} .${ServerRelativeURL} { - color: ${(props) => (props.inverted ? props.theme.colors.text.primary : '#ffffff')} + color: ${props => (props.inverted ? props.theme.colors.text.primary : '#ffffff')} } &:focus { box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.45), 0 2px 0 rgba(128, 128, 128, 0.25); @@ -45,13 +45,13 @@ export const EndpointInfo = styled.button<{ expanded?: boolean; inverted?: boole export const HttpVerb = styled.span.attrs((props: { type: string; compact?: boolean }) => ({ className: `http-verb ${props.type}`, }))<{ type: string; compact?: boolean }>` - font-size: ${(props) => (props.compact ? '0.8em' : '0.929em')}; - line-height: ${(props) => (props.compact ? '18px' : '20px')}; - background-color: ${(props) => props.theme.colors.http[props.type] || '#999999'}; + font-size: ${props => (props.compact ? '0.8em' : '0.929em')}; + line-height: ${props => (props.compact ? '18px' : '20px')}; + background-color: ${props => props.theme.colors.http[props.type] || '#999999'}; color: #ffffff; - padding: ${(props) => (props.compact ? '2px 8px' : '3px 10px')}; + padding: ${props => (props.compact ? '2px 8px' : '3px 10px')}; text-transform: uppercase; - font-family: ${(props) => props.theme.typography.headings.fontFamily}; + font-family: ${props => props.theme.typography.headings.fontFamily}; margin: 0; `; @@ -59,8 +59,8 @@ export const ServersOverlay = styled.div<{ expanded: boolean }>` position: absolute; width: 100%; z-index: 100; - background: ${(props) => props.theme.rightPanel.endpoint.backgroundColor}; - color: ${(props) => props.theme.rightPanel.endpoint.textColor}; + background: ${props => props.theme.rightPanel.endpoint.backgroundColor}; + color: ${props => props.theme.rightPanel.endpoint.textColor}; box-sizing: border-box; box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.33); overflow: hidden; @@ -68,7 +68,7 @@ export const ServersOverlay = styled.div<{ expanded: boolean }>` border-bottom-right-radius: 4px; transition: all 0.25s ease; visibility: hidden; - ${(props) => (props.expanded ? 'visibility: visible;' : 'transform: translateY(-50%) scaleY(0);')} + ${props => (props.expanded ? 'visibility: visible;' : 'transform: translateY(-50%) scaleY(0);')} `; export const ServerItem = styled.div` @@ -78,10 +78,10 @@ export const ServerItem = styled.div` export const ServerUrl = styled.div` padding: 5px; border: 1px solid #ccc; - background: ${(props) => props.theme.rightPanel.endpoint.serverBackgroundColor}; + background: ${props => props.theme.rightPanel.endpoint.serverBackgroundColor}; word-break: break-all; - color: ${(props) => props.theme.rightPanel.endpoint.serverTextColor}; + color: ${props => props.theme.rightPanel.endpoint.serverTextColor}; > span { - color: ${(props) => props.theme.rightPanel.endpoint.serverTextColor}; + color: ${props => props.theme.rightPanel.endpoint.serverTextColor}; } `; diff --git a/src/components/Schema/ArraySchema.tsx b/src/components/Schema/ArraySchema.tsx index 48e7dc41..6e5d1a6c 100644 --- a/src/components/Schema/ArraySchema.tsx +++ b/src/components/Schema/ArraySchema.tsx @@ -4,7 +4,7 @@ import { Schema, SchemaProps } from './Schema'; import { ArrayClosingLabel, ArrayOpenningLabel } from '../../common-elements'; import styled from '../../styled-components'; -import {humanizeConstraints} from "../../utils"; +import { humanizeConstraints } from '../../utils'; const PaddedSchema = styled.div` padding-left: ${({ theme }) => theme.spacing.unit * 2}px; @@ -18,7 +18,9 @@ export class ArraySchema extends React.PureComponent { max: number | undefined = undefined, ) => ({ type: 'array', minItems: min, maxItems: max }); - const minMaxItems = humanizeConstraints(itemConstraintSchema(itemsSchema.schema.minItems, itemsSchema.schema.maxItems)); + const minMaxItems = humanizeConstraints( + itemConstraintSchema(itemsSchema.schema.minItems, itemsSchema.schema.maxItems), + ); return (
diff --git a/src/services/MarkdownRenderer.ts b/src/services/MarkdownRenderer.ts index 9276a096..9ef98d60 100644 --- a/src/services/MarkdownRenderer.ts +++ b/src/services/MarkdownRenderer.ts @@ -121,10 +121,7 @@ export class MarkdownRenderer { prevRegexp = regexp; prevPos = currentPos; } - prevHeading.description = rawText - .substring(prevPos) - .replace(prevRegexp, '') - .trim(); + prevHeading.description = rawText.substring(prevPos).replace(prevRegexp, '').trim(); } headingRule = ( diff --git a/src/services/RedocNormalizedOptions.ts b/src/services/RedocNormalizedOptions.ts index cd354784..f09003cb 100644 --- a/src/services/RedocNormalizedOptions.ts +++ b/src/services/RedocNormalizedOptions.ts @@ -68,7 +68,7 @@ export class RedocNormalizedOptions { } if (typeof value === 'string') { const res = {}; - value.split(',').forEach((code) => { + value.split(',').forEach(code => { res[code.trim()] = true; }); return res; @@ -134,7 +134,7 @@ export class RedocNormalizedOptions { case 'false': return false; default: - return value.split(',').map((ext) => ext.trim()); + return value.split(',').map(ext => ext.trim()); } } diff --git a/src/services/models/Operation.ts b/src/services/models/Operation.ts index 12ba2f6d..be1c3c7e 100644 --- a/src/services/models/Operation.ts +++ b/src/services/models/Operation.ts @@ -102,7 +102,7 @@ export class OperationModel implements IMenuItem { // NOTE: Callbacks by default should not inherit the specification's global `security` definition. // Can be defined individually per-callback in the specification. Defaults to none. this.security = (operationSpec.security || []).map( - (security) => new SecurityRequirementModel(security, parser), + security => new SecurityRequirementModel(security, parser), ); // TODO: update getting pathInfo for overriding servers on path level @@ -116,7 +116,7 @@ export class OperationModel implements IMenuItem { : this.pointer; this.security = (operationSpec.security || parser.spec.security || []).map( - (security) => new SecurityRequirementModel(security, parser), + security => new SecurityRequirementModel(security, parser), ); this.servers = normalizeServers( @@ -208,7 +208,7 @@ export class OperationModel implements IMenuItem { this.operationSpec.pathParameters, this.operationSpec.parameters, // TODO: fix pointer - ).map((paramOrRef) => new FieldModel(this.parser, paramOrRef, this.pointer, this.options)); + ).map(paramOrRef => new FieldModel(this.parser, paramOrRef, this.pointer, this.options)); if (this.options.sortPropsAlphabetically) { return sortByField(_parameters, 'name'); @@ -224,7 +224,7 @@ export class OperationModel implements IMenuItem { get responses() { let hasSuccessResponses = false; return Object.keys(this.operationSpec.responses || []) - .filter((code) => { + .filter(code => { if (code === 'default') { return true; } @@ -235,7 +235,7 @@ export class OperationModel implements IMenuItem { return isStatusCode(code); }) // filter out other props (e.g. x-props) - .map((code) => { + .map(code => { return new ResponseModel( this.parser, code, @@ -248,7 +248,7 @@ export class OperationModel implements IMenuItem { @memoize get callbacks() { - return Object.keys(this.operationSpec.callbacks || []).map((callbackEventName) => { + return Object.keys(this.operationSpec.callbacks || []).map(callbackEventName => { return new CallbackModel( this.parser, callbackEventName, diff --git a/src/theme.ts b/src/theme.ts index 37d266c3..3d77fe00 100644 --- a/src/theme.ts +++ b/src/theme.ts @@ -80,21 +80,21 @@ const defaultTheme: ThemeInterface = { }, }, schema: { - linesColor: (theme) => + linesColor: theme => lighten( theme.colors.tonalOffset, desaturate(theme.colors.tonalOffset, theme.colors.primary.main), ), defaultDetailsWidth: '75%', - typeNameColor: (theme) => theme.colors.text.secondary, - typeTitleColor: (theme) => theme.schema.typeNameColor, - requireLabelColor: (theme) => theme.colors.error.main, + typeNameColor: theme => theme.colors.text.secondary, + typeTitleColor: theme => theme.schema.typeNameColor, + requireLabelColor: theme => theme.colors.error.main, labelsTextSize: '0.9em', nestingSpacing: '1em', nestedBackground: '#fafafa', arrow: { size: '1.1em', - color: (theme) => theme.colors.text.secondary, + color: theme => theme.colors.text.secondary, }, }, typography: { @@ -130,7 +130,7 @@ const defaultTheme: ThemeInterface = { width: '260px', backgroundColor: '#fafafa', textColor: '#333333', - activeTextColor: (theme) => + activeTextColor: theme => theme.sidebar.textColor !== defaultTheme.sidebar!.textColor ? theme.sidebar.textColor : theme.colors.primary.main, @@ -142,7 +142,7 @@ const defaultTheme: ThemeInterface = { }, arrow: { size: '1.5em', - color: (theme) => theme.sidebar.textColor, + color: theme => theme.sidebar.textColor, }, }, logo: { @@ -155,14 +155,14 @@ const defaultTheme: ThemeInterface = { width: '40%', textColor: '#ffffff', tabs: { - selectedBackgroundColor: (theme) => theme.rightPanel.textColor, - selectedTextColor: (theme) => theme.colors.text.primary, + selectedBackgroundColor: theme => theme.rightPanel.textColor, + selectedTextColor: theme => theme.colors.text.primary, }, endpoint: { backgroundColor: '#fafafa', - textColor: (theme) => theme.colors.primary.main, + textColor: theme => theme.colors.primary.main, serverBackgroundColor: '#ffffff', - serverTextColor: (theme) => theme.colors.text.primary, + serverTextColor: theme => theme.colors.text.primary, }, }, codeBlock: { @@ -176,7 +176,7 @@ export function resolveTheme(theme: ThemeInterface): ResolvedThemeInterface { const resolvedValues = {}; let counter = 0; const setProxy = (obj, path: string) => { - Object.keys(obj).forEach((k) => { + Object.keys(obj).forEach(k => { const currentPath = (path ? path + '.' : '') + k; const val = obj[k]; if (typeof val === 'function') { diff --git a/src/utils/decorators.ts b/src/utils/decorators.ts index bfe5726f..ef26087d 100644 --- a/src/utils/decorators.ts +++ b/src/utils/decorators.ts @@ -12,7 +12,7 @@ function throttle(func, wait) { context = args = null; } }; - return function() { + return function () { const now = new Date().getTime(); const remaining = wait - (now - previous); context = this; diff --git a/src/utils/dom.ts b/src/utils/dom.ts index ce91a33a..515d9a2b 100644 --- a/src/utils/dom.ts +++ b/src/utils/dom.ts @@ -27,7 +27,7 @@ export function html2Str(html: string): string { // scrollIntoViewIfNeeded polyfill if (typeof Element !== 'undefined' && !(Element as any).prototype.scrollIntoViewIfNeeded) { - (Element as any).prototype.scrollIntoViewIfNeeded = function(centerIfNeeded) { + (Element as any).prototype.scrollIntoViewIfNeeded = function (centerIfNeeded) { centerIfNeeded = arguments.length === 0 ? true : !!centerIfNeeded; const parent = this.parentNode;