feat: export TypeScript typings

.gitignore

@@ -24,7 +24,8 @@ node_modules
 lib/
 stats.json
 cypress/
-bundles
+bundles/
+typings/
 cli/index.js
 
 /benchmark/revisions

.npmignore

@@ -1,5 +1,6 @@
 *
 !bundles/*
+!typings/*
 !package.json
 !README.md
 !LICENSE

package.json

@@ -23,6 +23,7 @@
     "React.js"
   ],
   "main": "bundles/redoc.lib.js",
+  "types": "typings/index.d.ts",
   "scripts": {
     "start": "webpack-dev-server --mode=development --env.playground --hot --config demo/webpack.config.ts",
     "start:prod": "webpack-dev-server --env.playground --mode=production --config demo/webpack.config.ts",
@@ -37,6 +38,7 @@
     "bundle:standalone": "webpack --env.standalone --mode=production",
     "bundle:lib": "webpack --mode=production",
     "bundle": "npm run bundle:clean && npm run bundle:lib && npm run bundle:standalone",
+    "declarations": "rimraf typings && tsc --emitDeclarationOnly -p tsconfig.lib.json",
     "stats": "webpack --env.standalone --json --profile --mode=production > stats.json",
     "prettier": "prettier --write \"src/**/*.{ts,tsx}\"",
     "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s -r 1",

src/common-elements/dropdown.ts

@@ -1,6 +1,11 @@
+import * as React from 'react';
 import Dropdown from 'react-dropdown';
 
-import styled, { StyledComponentClass, withProps } from '../styled-components';
+import styled, {
+  ResolvedThemeInterface,
+  StyledComponentClass,
+  withProps,
+} from '../styled-components';
 
 export interface DropdownOption {
   label: string;

src/common-elements/fields-layout.ts

@@ -1,5 +1,11 @@
 import { transparentize } from 'polished';
-import styled, { withProps } from '../styled-components';
+import * as React from 'react';
+
+import styled, {
+  ResolvedThemeInterface,
+  StyledComponentClass,
+  withProps,
+} from '../styled-components';
 import { deprecatedCss } from './mixins';
 
 export const PropertiesTableCaption = styled.caption`

src/common-elements/fields.ts

@@ -1,5 +1,7 @@
 import { transparentize } from 'polished';
-import styled from '../styled-components';
+import * as React from 'react';
+
+import styled, { ResolvedThemeInterface, StyledComponentClass } from '../styled-components';
 import { PropertyNameCell } from './fields-layout';
 
 export const ClickablePropertyNameCell = PropertyNameCell.extend`

src/common-elements/headers.ts

@@ -1,4 +1,7 @@
-import styled, { css } from '../styled-components';
+import * as React from 'react';
+import { InterpolationFunction, Styles, ThemeProps } from 'styled-components';
+
+import styled, { css, ResolvedThemeInterface, StyledComponentClass } from '../styled-components';
 
 const headerFontSize = {
   1: '1.85714em',

src/common-elements/linkify.ts

@@ -1,4 +1,7 @@
-import styled, { css } from '../styled-components';
+import * as React from 'react';
+import { InterpolationFunction, Styles, ThemeProps } from 'styled-components';
+
+import styled, { css, ResolvedThemeInterface, StyledComponentClass } from '../styled-components';
 
 // tslint:disable-next-line
 export const linkifyMixin = className => css`

src/common-elements/mixins.ts

@@ -1,4 +1,6 @@
-import { css } from '../styled-components';
+import { InterpolationFunction, Styles, ThemeProps } from 'styled-components';
+
+import { css, StyledComponentClass } from '../styled-components';
 
 export const deprecatedCss = css`
   text-decoration: line-through;

src/common-elements/panels.ts

@@ -1,4 +1,5 @@
-import styled, { media } from '../styled-components';
+import * as React from 'react';
+import styled, { media, ResolvedThemeInterface, StyledComponentClass } from '../styled-components';
 
 export const MiddlePanel = styled.div`
   width: calc(100% - ${props => props.theme.rightPanel.width});

src/common-elements/samples.tsx

@@ -1,4 +1,6 @@
-import styled from '../styled-components';
+import * as React from 'react';
+
+import styled, { ResolvedThemeInterface, StyledComponentClass } from '../styled-components';
 
 export const SampleControls = styled.div`
   opacity: 0.4;

src/common-elements/schema.ts

@@ -1,4 +1,9 @@
-import styled, { withProps } from '../styled-components';
+import * as React from 'react';
+import styled, {
+  ResolvedThemeInterface,
+  StyledComponentClass,
+  withProps,
+} from '../styled-components';
 
 export const OneOfList = styled.ul`
   margin: 0;

src/common-elements/shelfs.tsx

@@ -1,5 +1,9 @@
 import * as React from 'react';
-import styled, { withProps } from '../styled-components';
+import styled, {
+  ResolvedThemeInterface,
+  StyledComponentClass,
+  withProps,
+} from '../styled-components';
 
 const directionMap = {
   left: '90deg',

src/common-elements/tabs.ts

@@ -1,5 +1,5 @@
-import { Tabs as ReactTabs } from 'react-tabs';
-import styled from '../styled-components';
+import { Tabs as ReactTabs, TabsProps } from 'react-tabs';
+import styled, { ResolvedThemeInterface, StyledComponentClass } from '../styled-components';
 
 export { Tab, TabList, TabPanel } from 'react-tabs';
 

src/components/ApiInfo/ApiInfo.tsx

@@ -15,7 +15,7 @@ import {
   InfoSpanBoxWrap,
 } from './styled.elements';
 
-interface ApiInfoProps {
+export interface ApiInfoProps {
   store: AppStore;
 }
 

src/components/ApiInfo/styled.elements.ts

@@ -1,6 +1,7 @@
-import styled from '../../styled-components';
+import { AnchorHTMLAttributes, ClassAttributes, HTMLAttributes } from 'react';
 
 import { H1, MiddlePanel } from '../../common-elements';
+import styled, { ResolvedThemeInterface, StyledComponentClass } from '../../styled-components';
 
 const delimiterWidth = 15;
 

src/components/ApiLogo/styled.elements.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import styled from '../../styled-components';
+import styled, { ResolvedThemeInterface, StyledComponentClass } from '../../styled-components';
 
 export const LogoImgEl = styled.img`
   max-height: ${props => props.theme.logo.maxHeight};

src/components/ContentItems/ContentItems.tsx

@@ -22,7 +22,7 @@ export class ContentItems extends React.Component<{
   }
 }
 
-interface ContentItemProps {
+export interface ContentItemProps {
   item: ContentItemModel;
 }
 

src/components/Endpoint/styled.elements.ts

@@ -1,4 +1,10 @@
-import styled, { withProps } from '../../styled-components';
+import { ClassAttributes, HTMLAttributes, HTMLProps } from 'react';
+
+import styled, {
+  ResolvedThemeInterface,
+  StyledComponentClass,
+  withProps,
+} from '../../styled-components';
 
 export const OperationEndpointWrap = styled.div`
   cursor: pointer;

src/components/JsonViewer/JsonViewer.tsx

@@ -1,12 +1,12 @@
 import * as React from 'react';
-import styled from '../../styled-components';
+import styled, { ResolvedThemeInterface, StyledComponentClass } from '../../styled-components';
 
 import { SampleControls } from '../../common-elements';
 import { CopyButtonWrapper } from '../../common-elements/CopyButtonWrapper';
 import { jsonToHTML } from '../../utils/jsonToHtml';
 import { jsonStyles } from './style';
 
-interface JsonProps {
+export interface JsonProps {
   data: any;
   className?: string;
 }

src/components/JsonViewer/style.ts

@@ -1,4 +1,5 @@
-import { css } from '../../styled-components';
+import { InterpolationFunction, Styles, ThemeProps } from 'styled-components';
+import { css, ResolvedThemeInterface, StyledComponentClass } from '../../styled-components';
 
 export const jsonStyles = css`
   .redoc-json > .collapser {

src/components/Loading/Spinner.svg.tsx

@@ -1,5 +1,9 @@
 import * as React from 'react';
-import styled, { keyframes } from '../../styled-components';
+import styled, {
+  keyframes,
+  ResolvedThemeInterface,
+  StyledComponentClass,
+} from '../../styled-components';
 
 const _Spinner = (props: { className?: string; color: string }) => (
   <svg className={props.className} version="1.1" width="512" height="512" viewBox="0 0 512 512">

src/components/Markdown/Markdown.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import styled from '../../styled-components';
+import styled, { ResolvedThemeInterface, StyledComponentClass } from '../../styled-components';
 
 import * as DOMPurify from 'dompurify';
 import { AppStore, MarkdownRenderer } from '../../services';

src/components/Markdown/styles.ts

@@ -1,5 +1,7 @@
+import { InterpolationFunction, Styles, ThemeProps } from 'styled-components';
+
 import { headerCommonMixin, linkifyMixin } from '../../common-elements';
-import { css } from '../../styled-components';
+import { css, ResolvedThemeInterface, StyledComponentClass } from '../../styled-components';
 
 export const markdownCss = css`
   p {

src/components/Operation/Operation.tsx

@@ -35,7 +35,7 @@ const OperationRow = Row.extend`
   }
 `;
 
-interface OperationProps {
+export interface OperationProps {
   operation: OperationType;
 }
 

src/components/OptionsProvider.ts

@@ -3,19 +3,6 @@ import * as React from 'react';
 
 import { RedocNormalizedOptions } from '../services/RedocNormalizedOptions';
 
-// TODO: contribute declarations to @types/react once 16.3 is released
-type ReactProviderComponent<T> = React.ComponentType<{ value: T }>;
-type ReactConsumerComponent<T> = React.ComponentType<{ children: ((value: T) => React.ReactNode) }>;
-
-interface ReactContext<T> {
-  Provider: ReactProviderComponent<T>;
-  Consumer: ReactConsumerComponent<T>;
-}
-
-declare module 'react' {
-  function createContext<T>(defatulValue: T): ReactContext<T>;
-}
-
 export const OptionsContext = React.createContext(new RedocNormalizedOptions({}));
 export const OptionsProvider = OptionsContext.Provider;
 export const OptionsConsumer = OptionsContext.Consumer;

src/components/Parameters/Parameters.tsx

@@ -17,7 +17,7 @@ function safePush(obj, prop, item) {
   obj[prop].push(item);
 }
 
-interface ParametersProps {
+export interface ParametersProps {
   parameters?: FieldModel[];
   body?: RequestBodyModel;
 }

src/components/PayloadSamples/styled.elements.ts

@@ -1,6 +1,7 @@
-import styled from '../../styled-components';
+import { ClassAttributes, HTMLAttributes } from 'react';
+import styled, { ResolvedThemeInterface, StyledComponentClass } from '../../styled-components';
 
-import { StyledDropdown } from '../../common-elements';
+import { DropdownProps, StyledDropdown } from '../../common-elements';
 
 export const MimeLabel = styled.div`
   border-bottom: 1px solid rgba(255, 255, 255, 0.9);

src/components/Redoc/Redoc.tsx

@@ -32,7 +32,9 @@ export class Redoc extends React.Component<RedocProps> {
   }
 
   render() {
-    const { store: { spec, menu, options, search, marker } } = this.props;
+    const {
+      store: { spec, menu, options, search, marker },
+    } = this.props;
     const store = this.props.store;
     return (
       <ThemeProvider theme={options.theme}>

src/components/Redoc/elements.tsx

@@ -1,5 +1,10 @@
-import styled, { media } from '../../styled-components';
-export { ClassAttributes } from 'react';
+import { ClassAttributes, HTMLAttributes } from 'react';
+
+import styled, {
+  media,
+  ResolvedThemeInterface,
+  StyledComponentClass,
+} from '../../styled-components';
 
 export const RedocWrap = styled.div`
   font-family: ${props => props.theme.baseFont.family};

src/components/Responses/styled.elements.ts

@@ -1,8 +1,9 @@
-import styled from '../../styled-components';
-
 import { transparentize } from 'polished';
+import { ClassAttributes, HTMLAttributes } from 'react';
+
 import { UnderlinedHeader } from '../../common-elements';
-import { ResponseTitle } from './ResponseTitle';
+import styled, { ResolvedThemeInterface, StyledComponentClass } from '../../styled-components';
+import { ResponseTitle, ResponseTitleProps } from './ResponseTitle';
 
 export const StyledResponseTitle = styled(ResponseTitle)`
   padding: 10px;

src/components/Schema/ObjectSchema.tsx

@@ -24,7 +24,11 @@ export class ObjectSchema extends React.Component<ObjectSchemaProps> {
   }
 
   render() {
-    const { schema: { fields = [] }, showTitle, discriminator } = this.props;
+    const {
+      schema: { fields = [] },
+      showTitle,
+      discriminator,
+    } = this.props;
 
     const needFilter = this.props.skipReadOnly || this.props.skipWriteOnly;
 

src/components/Schema/OneOfSchema.tsx

@@ -34,7 +34,10 @@ export class OneOfButton extends React.Component<OneOfButtonProps> {
 @observer
 export class OneOfSchema extends React.Component<SchemaProps> {
   render() {
-    const { schema: { oneOf }, schema } = this.props;
+    const {
+      schema: { oneOf },
+      schema,
+    } = this.props;
 
     if (oneOf === undefined) {
       return null;

src/components/SearchBox/SearchBox.tsx

@@ -7,7 +7,13 @@ import { MenuItem } from '../SideMenu/MenuItem';
 import { MarkerService } from '../../services/MarkerService';
 import { SearchDocument } from '../../services/SearchWorker.worker';
 
-import { ClearIcon, SearchIcon, SearchInput, SearchResultsBox, SearchWrap } from './elements';
+import {
+  ClearIcon,
+  SearchIcon,
+  SearchInput,
+  SearchResultsBox,
+  SearchWrap,
+} from './styled.elements';
 
 export interface SearchBoxProps {
   search: SearchStore;

src/components/SearchBox/styled.elements.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
-import styled from '../../styled-components';
+
+import styled, { ResolvedThemeInterface, StyledComponentClass } from '../../styled-components';
 import { MenuItemLabel } from '../SideMenu/styled.elements';
 
 export const SearchWrap = styled.div`

src/components/SecurityRequirement/SecuirityRequirement.tsx

@@ -1,5 +1,6 @@
 import { transparentize } from 'polished';
 import * as React from 'react';
+
 import styled from '../../styled-components';
 
 import { UnderlinedHeader } from '../../common-elements/headers';

src/components/SideMenu/MenuItem.tsx

@@ -6,7 +6,7 @@ import { IMenuItem, OperationModel } from '../../services';
 import { MenuItems } from './MenuItems';
 import { MenuItemLabel, MenuItemLi, MenuItemTitle, OperationBadge } from './styled.elements';
 
-interface MenuItemProps {
+export interface MenuItemProps {
   item: IMenuItem;
   onActivate?: (item: IMenuItem) => void;
   withoutChildren?: boolean;

src/components/SideMenu/MenuItems.tsx

@@ -6,7 +6,7 @@ import { IMenuItem } from '../../services';
 import { MenuItem } from './MenuItem';
 import { MenuItemUl } from './styled.elements';
 
-interface MenuItemsProps {
+export interface MenuItemsProps {
   items: IMenuItem[];
   active?: boolean;
   onActivate?: (item: IMenuItem) => void;

src/components/SideMenu/index.ts

@@ -0,0 +1,4 @@
+export * from './MenuItem';
+export * from './MenuItems';
+export * from './SideMenu';
+export * from './styled.elements';

src/components/SideMenu/styled.elements.ts

@@ -1,7 +1,14 @@
 import * as classnames from 'classnames';
+import * as React from 'react';
+import { InterpolationFunction, Styles, ThemeProps } from 'styled-components';
 
 import { deprecatedCss } from '../../common-elements';
-import styled, { css, withProps } from '../../styled-components';
+import styled, {
+  css,
+  ResolvedThemeInterface,
+  StyledComponentClass,
+  withProps,
+} from '../../styled-components';
 
 export const OperationBadge = withProps<{ type: string }>(styled.span).attrs({
   className: props => `operation-type ${props.type}`,

src/components/StoreProvider.ts

@@ -5,7 +5,7 @@ import { RedocRawOptions } from '../services/RedocNormalizedOptions';
 import { OpenAPISpec } from '../types';
 import { loadAndBundleSpec } from '../utils';
 
-interface StoreProviderProps {
+export interface StoreProviderProps {
   specUrl?: string;
   spec?: object;
   store?: AppStore;
@@ -15,7 +15,7 @@ interface StoreProviderProps {
   children: (props: { loading: boolean; store?: AppStore }) => any;
 }
 
-interface StoreProviderState {
+export interface StoreProviderState {
   error?: Error;
   loading: boolean;
   store?: AppStore;

src/components/index.ts

@@ -10,4 +10,6 @@ export * from './JsonViewer';
 
 export * from './ErrorBoundary';
 export * from './StoreProvider';
-// re-export the rest of components
+export * from './SideMenu/';
+export * from './StickySidebar/StickyResponsiveSidebar';
+export * from './SearchBox/SearchBox';

src/index.ts

@@ -1,3 +1,6 @@
 export * from './components';
 export * from './services';
 export * from './utils';
+
+export * from './styled-components';
+export { default as styled } from './styled-components';

src/services/HistoryService.ts

@@ -8,7 +8,7 @@ function isSameHash(a: string, b: string): boolean {
   return a === b || '#' + a === b || a === '#' + b;
 }
 
-class IntHistoryService {
+export class IntHistoryService {
   private causedHashChange: boolean = false;
   private _emiter;
 

src/services/MarkdownRenderer.ts

@@ -19,7 +19,7 @@ export function buildComponentComment(name: string) {
   return `<!-- ReDoc-Inject: <${name}> -->`;
 }
 
-interface MarkdownHeading {
+export interface MarkdownHeading {
   id: string;
   name: string;
   items?: MarkdownHeading[];

src/services/SearchStore.ts

@@ -2,7 +2,9 @@ import { IS_BROWSER } from '../utils/';
 import { IMenuItem } from './MenuStore';
 import { OperationModel } from './models';
 
-let worker;
+import Worker, { SearchDocument, SearchResult } from './SearchWorker.worker';
+
+let worker: new () => Worker;
 
 if (IS_BROWSER) {
   try {

src/services/SearchWorker.worker.ts

@@ -60,7 +60,7 @@ export async function load(state: any) {
   resolveIndex(lunr.Index.load(state.index));
 }
 
-export async function search(q: string): Promise<SearchResult[]> {
+export async function search(q: string): Promise<Array<SearchDocument & SearchResult>> {
   if (q.trim().length === 0) {
     return [];
   }

src/services/SpecStore.ts

@@ -1,9 +1,8 @@
 import { computed, observable } from 'mobx';
-import { OpenAPISpec } from '../types';
-
-// import { OpenAPIExternalDocumentation, OpenAPIInfo } from '../types';
+import { OpenAPIExternalDocumentation, OpenAPISpec } from '../types';
 
 import { MenuBuilder } from './MenuBuilder';
+import { GroupModel, OperationModel } from './models/';
 import { ApiInfoModel } from './models/ApiInfo';
 import { SecuritySchemesModel } from './models/SecuritySchemes';
 import { OpenAPIParser } from './OpenAPIParser';

src/services/models/SecurityRequirement.ts

@@ -2,7 +2,7 @@ import { OpenAPISecurityRequirement } from '../../types';
 import { SECURITY_SCHEMES_SECTION } from '../../utils/openapi';
 import { OpenAPIParser } from '../OpenAPIParser';
 
-interface SecurityScheme {
+export interface SecurityScheme {
   id: string;
   sectionId: string;
   type: string;

src/styled-components.ts

@@ -1,7 +1,12 @@
+import { ComponentClass, StatelessComponent } from 'react';
 import * as styledComponents from 'styled-components';
 
 import { ResolvedThemeInterface } from './theme';
 
+export { ResolvedThemeInterface };
+
+export type InterpolationFunction<P> = styledComponents.InterpolationFunction<P>;
+
 export type StyledFunction<T> = styledComponents.ThemedStyledFunction<T, ResolvedThemeInterface>;
 
 function withProps<T, U extends HTMLElement = HTMLElement>(

tsconfig.json

@@ -7,7 +7,8 @@
     "noUnusedParameters": true,
     "strictNullChecks": true,
     "sourceMap": true,
-    // "declaration": true,
+    "declaration": true,
+    "declarationDir": "typings",
     "noEmitHelpers": true,
     "importHelpers": true,
     "outDir": "lib",

tsconfig.lib.json

@@ -0,0 +1,7 @@
+{
+  "extends": "./tsconfig.json",
+  "include": [
+    "./custom.d.ts",
+    "src/index.ts"
+  ]
+}

tslint.json

@@ -17,7 +17,7 @@
     "quotemark": [true, "single", "avoid-template", "jsx-double"],
     "variable-name": [true, "ban-keywords", "check-format", "allow-leading-underscore", "allow-pascal-case"],
     "arrow-parens": [true, "ban-single-arg-parens"],
-    "no-submodule-imports": [true, "prismjs", "perfect-scrollbar"],
+    "no-submodule-imports": [true, "prismjs", "perfect-scrollbar", "core-js"],
     "object-literal-key-quotes": [true, "as-needed"],
     "no-unused-expression": [true, "allow-tagged-template"],
     "semicolon": [true, "always", "ignore-bound-class-methods"],