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/elements.tsx → 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';