chore: update styled components typings

Redocly · Nov 27, 2018 · 27d195e · 27d195e
1 parent af3eee1
commit 27d195e
Show file tree

Hide file tree

Showing 19 changed files with 1,646 additions and 487 deletions.
diff --git a/demo/ComboBox.tsx b/demo/ComboBox.tsx
@@ -4,16 +4,10 @@
  */
 
 import * as React from 'react';
-import styled, { StyledFunction } from 'styled-components';
+import styled from '../src/styled-components';
 
-function withProps<T, U extends HTMLElement = HTMLElement>(
-  styledFunction: StyledFunction<React.HTMLProps<U>>,
-): StyledFunction<T & React.HTMLProps<U>> {
-  return styledFunction;
-}
-
-const DropDownItem = withProps<{ active: boolean }>(styled.li)`
-  ${props => ((props as any).active ? 'background-color: #eee' : '')};
+const DropDownItem = styled.li<{ active?: boolean }>`
+  ${(props: any) => (props.active ? 'background-color: #eee' : '')};
   padding: 13px 16px;
   &:hover {
     background-color: #eee;

diff --git a/src/common-elements/dropdown.ts b/src/common-elements/dropdown.ts
@@ -1,7 +1,6 @@
 import Dropdown from 'react-dropdown';
 
-import { StyledComponentClass } from 'styled-components';
-import styled, { withProps } from '../styled-components';
+import styled from '../styled-components';
 
 export interface DropdownOption {
   label: string;
@@ -14,17 +13,17 @@ export interface DropdownProps {
   onChange: (val: DropdownOption) => void;
 }
 
-export const StyledDropdown = withProps<DropdownProps>(styled(Dropdown))`
+export const StyledDropdown = styled(Dropdown)`
   min-width: 100px;
   display: inline-block;
   position: relative;
   width: auto;
   font-family: ${props => props.theme.typography.headings.fontFamily};
 
-  .Dropdown-control  {
+  .Dropdown-control {
     font-family: ${props => props.theme.typography.headings.fontFamily};
     position: relative;
-    font-size: .929em;
+    font-size: 0.929em;
     width: 100%;
     line-height: 1.5em;
     vertical-align: middle;
@@ -84,14 +83,14 @@ export const StyledDropdown = withProps<DropdownProps>(styled(Dropdown))`
     padding: 0.4em;
 
     &.is-selected {
-      background-color: rgba(0, 0, 0, 0.05)
+      background-color: rgba(0, 0, 0, 0.05);
     }
 
     &:hover {
-      background-color: rgba(38, 50, 56, 0.12)
+      background-color: rgba(38, 50, 56, 0.12);
     }
   }
-` as StyledComponentClass<any, DropdownProps>;
+`;
 
 export const SimpleDropdown = styled(StyledDropdown)`
   margin-left: 10px;
@@ -105,7 +104,7 @@ export const SimpleDropdown = styled(StyledDropdown)`
     background: transparent;
 
     &:hover {
-      color: ${props => props.theme.colors.main};
+      color: ${props => props.theme.colors.primary.main};
       box-shadow: none;
     }
   }

diff --git a/src/common-elements/fields-layout.ts b/src/common-elements/fields-layout.ts
@@ -1,6 +1,6 @@
 // import { transparentize } from 'polished';
 
-import styled, { extensionsHook, withProps } from '../styled-components';
+import styled, { extensionsHook } from '../styled-components';
 import { deprecatedCss } from './mixins';
 
 export const PropertiesTableCaption = styled.caption`
@@ -10,7 +10,7 @@ export const PropertiesTableCaption = styled.caption`
   color: ${props => props.theme.colors.text.secondary};
 `;
 
-export const PropertyCell = styled.td`
+export const PropertyCell = styled.td<{ kind?: string }>`
   border-left: 1px solid ${props => props.theme.schema.linesColor};
   box-sizing: border-box;
   position: relative;
@@ -58,7 +58,7 @@ export const PropertyCellWithInner = styled(PropertyCell)`
   padding: 0;
 `;
 
-export const PropertyNameCell = withProps<{ kind?: string }>(styled(PropertyCell))`
+export const PropertyNameCell = styled(PropertyCell)`
   vertical-align: top;
   line-height: 20px;
   white-space: nowrap;

diff --git a/src/common-elements/panels.ts b/src/common-elements/panels.ts
@@ -1,5 +1,5 @@
 import { SECTION_ATTR } from '../services/MenuStore';
-import styled, { media, withProps } from '../styled-components';
+import styled, { media, WithProps } from '../styled-components';
 
 export const MiddlePanel = styled.div`
   width: calc(100% - ${props => props.theme.rightPanel.width});
@@ -12,17 +12,15 @@ export const MiddlePanel = styled.div`
   `};
 `;
 
-export const Section = withProps<{ underlined?: boolean }>(
-  styled.div.attrs({
-    [SECTION_ATTR]: props => props.id,
-  } as any),
-)`
+export const Section = (styled.div as WithProps<'div', { underlined?: boolean }>).attrs(props => ({
+  [SECTION_ATTR]: props.id,
+}))`
   padding: ${props => props.theme.spacing.sectionVertical}px 0;
 
   ${media.lessThan('medium', true)`
     padding: 0;
   `}
-  ${props =>
+  ${(props: any) =>
     (props.underlined &&
       `
     position: relative;

diff --git a/src/common-elements/schema.ts b/src/common-elements/schema.ts
@@ -1,4 +1,4 @@
-import styled, { withProps } from '../styled-components';
+import styled from '../styled-components';
 
 export const OneOfList = styled.ul`
   margin: 0;
@@ -15,7 +15,7 @@ export const OneOfLabel = styled.span`
 }
 `;
 
-export const OneOfButton = withProps<{ active: boolean }>(styled.li)`
+export const OneOfButton = styled.li<{ active: boolean }>`
   display: inline-block;
   margin-right: 10px;
   font-size: 0.8em;

diff --git a/src/common-elements/shelfs.tsx b/src/common-elements/shelfs.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import styled, { withProps } from '../styled-components';
+import styled from '../styled-components';
 
 const directionMap = {
   left: '90deg',
@@ -48,7 +48,7 @@ export const ShelfIcon = styled(IntShelfIcon)`
   }
 `;
 
-export const Badge = withProps<{ type: string }>(styled.span)`
+export const Badge = styled.span<{ type: string }>`
   display: inline-block;
   padding: 0 5px;
   margin: 0;

diff --git a/src/components/ApiLogo/ApiLogo.tsx b/src/components/ApiLogo/ApiLogo.tsx
@@ -11,7 +11,7 @@ export class ApiLogo extends React.Component<{ info: OpenAPIInfo }> {
     if (!logoInfo || !logoInfo.url) {
       return null;
     }
-    
+
     const logoHref = logoInfo.href || (info.contact && info.contact.url);
 
     // Use the english word logo if no alt text is provided
@@ -24,12 +24,6 @@ export class ApiLogo extends React.Component<{ info: OpenAPIInfo }> {
         alt={altText}
       />
     );
-    return (
-      <LogoWrap>
-        {
-          logoHref ? LinkWrap(logoHref)(logo) : logo
-        }
-      </LogoWrap>
-    );
+    return <LogoWrap>{logoHref ? LinkWrap(logoHref)(logo) : logo}</LogoWrap>;
   }
 }
diff --git a/src/components/Endpoint/styled.elements.ts b/src/components/Endpoint/styled.elements.ts
@@ -1,4 +1,4 @@
-import styled, { withProps } from '../../styled-components';
+import styled from '../../styled-components';
 
 export const OperationEndpointWrap = styled.div`
   cursor: pointer;
@@ -14,7 +14,7 @@ export const ServerRelativeURL = styled.span`
   text-overflow: ellipsis;
 `;
 
-export const EndpointInfo = withProps<{ expanded?: boolean; inverted?: boolean }>(styled.div)`
+export const EndpointInfo = styled.div<{ expanded?: boolean; inverted?: boolean }>`
   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' : '#222d32')};
@@ -33,20 +33,20 @@ export const EndpointInfo = withProps<{ expanded?: boolean; inverted?: boolean }
   }
 `;
 
-export const HttpVerb = withProps<{ type: string }>(styled.span).attrs({
-  className: props => `http-verb ${props.type}`,
-})`
+export const HttpVerb = styled.span.attrs((props: { type: string }) => ({
+  className: `http-verb ${props.type}`,
+}))<{ type: string }>`
   font-size: 0.929em;
   line-height: 20px;
-  background-color: ${props => props.theme.colors.http[props.type] || '#999999'};
+  background-color: ${(props: any) => props.theme.colors.http[props.type] || '#999999'};
   color: #ffffff;
   padding: 3px 10px;
   text-transform: uppercase;
   font-family: ${props => props.theme.typography.headings.fontFamily};
   margin: 0;
 `;
 
-export const ServersOverlay = withProps<{ expanded: boolean }>(styled.div)`
+export const ServersOverlay = styled.div<{ expanded: boolean }>`
   position: absolute;
   width: 100%;
   z-index: 100;

diff --git a/src/components/ExternalDocumentation/ExternalDocumentation.tsx b/src/components/ExternalDocumentation/ExternalDocumentation.tsx
@@ -1,10 +1,10 @@
 import { observer } from 'mobx-react';
 import * as React from 'react';
-import styled, { withProps } from '../../styled-components';
+import styled from '../../styled-components';
 import { OpenAPIExternalDocumentation } from '../../types';
 import { linksCss } from '../Markdown/styled.elements';
 
-const LinkWrap = withProps<{ compact?: boolean }>(styled.div)`
+const LinkWrap = styled.div<{ compact?: boolean }>`
   ${linksCss};
   ${({ compact }) => (!compact ? 'margin: 1em 0' : '')}
 `;

diff --git a/src/components/Loading/Loading.tsx b/src/components/Loading/Loading.tsx
@@ -1,9 +1,9 @@
 import * as React from 'react';
-import styled, { withProps } from '../../styled-components';
+import styled from '../../styled-components';
 
 import { Spinner } from './Spinner.svg';
 
-const LoadingMessage = withProps<{ color: string }>(styled.div)`
+const LoadingMessage = styled.div<{ color: string }>`
   font-family: helvetica, sans;
   width: 100%;
   text-align: center;

diff --git a/src/components/Markdown/styled.elements.tsx b/src/components/Markdown/styled.elements.tsx
@@ -1,6 +1,8 @@
 import { headerCommonMixin, linkifyMixin } from '../../common-elements';
 import { PrismDiv } from '../../common-elements/PrismDiv';
-import styled, { css, extensionsHook, withProps } from '../../styled-components';
+import styled, { css, extensionsHook, ResolvedThemeInterface } from '../../styled-components';
+
+import { StyledComponent } from 'styled-components';
 
 export const linksCss = css`
   a {
@@ -17,9 +19,11 @@ export const linksCss = css`
   }
 `;
 
-export const StyledMarkdownBlock = withProps<{ compact?: boolean; inline?: boolean }>(
-  styled(PrismDiv),
-)`
+export const StyledMarkdownBlock = styled(PrismDiv as StyledComponent<
+  'div',
+  ResolvedThemeInterface,
+  { compact?: boolean; inline?: boolean }
+>)`
 
   font-family: ${props => props.theme.typography.fontFamily};
   font-weight: ${props => props.theme.typography.fontWeightRegular};

diff --git a/src/components/PayloadSamples/MediaTypeSamples.tsx b/src/components/PayloadSamples/MediaTypeSamples.tsx
@@ -32,7 +32,7 @@ export class MediaTypeSamples extends React.Component<PayloadSamplesProps> {
     }
     if (examplesNames.length > 1) {
       return (
-        <SmallTabs>
+        <SmallTabs defaultIndex={0}>
           <TabList>
             {examplesNames.map(name => (
               <Tab key={name}> {examples[name].summary || name} </Tab>

diff --git a/src/components/SearchBox/styled.elements.tsx b/src/components/SearchBox/styled.elements.tsx
@@ -7,9 +7,9 @@ export const SearchWrap = styled.div`
   padding: 5px 0;
 `;
 
-export const SearchInput = styled.input.attrs({
+export const SearchInput = styled.input.attrs(() => ({
   className: 'search-input',
-})`
+}))`
   width: calc(100% - ${props => props.theme.spacing.unit * 8}px);
   box-sizing: border-box;
   margin: 0 ${props => props.theme.spacing.unit * 4}px;

diff --git a/src/components/SideMenu/styled.elements.ts b/src/components/SideMenu/styled.elements.ts
@@ -1,11 +1,13 @@
 import * as classnames from 'classnames';
 
 import { deprecatedCss, ShelfIcon } from '../../common-elements';
-import styled, { css, withProps } from '../../styled-components';
+import styled, { css, WithProps } from '../../styled-components';
 
-export const OperationBadge = withProps<{ type: string }>(styled.span).attrs({
-  className: props => `operation-type ${props.type}`,
-})`
+export const OperationBadge = (styled.span as WithProps<'span', { type: string }>).attrs(
+  (props: any) => ({
+    className: `operation-type ${props.type}`,
+  }),
+)`
   width: 32px;
   display: inline-block;
   height: ${props => props.theme.typography.code.fontSize};
@@ -57,7 +59,7 @@ export const OperationBadge = withProps<{ type: string }>(styled.span).attrs({
   }
 
   &.head {
-    background-color:  ${props => props.theme.colors.http.head};
+    background-color: ${props => props.theme.colors.http.head};
   }
 `;
 
@@ -71,7 +73,7 @@ function menuItemActiveBg(depth): string {
   }
 }
 
-export const MenuItemUl = withProps<{ expanded: boolean }>(styled.ul)`
+export const MenuItemUl = styled.ul<{ expanded: boolean }>`
   margin: 0;
   padding: 0;
 
@@ -82,7 +84,7 @@ export const MenuItemUl = withProps<{ expanded: boolean }>(styled.ul)`
   ${props => (props.expanded ? '' : 'display: none;')};
 `;
 
-export const MenuItemLi = withProps<{ depth: number }>(styled.li)`
+export const MenuItemLi = styled.li<{ depth: number }>`
   list-style: none inside none;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -111,18 +113,19 @@ export const menuItemDepth = {
   `,
 };
 
-export const MenuItemLabel = withProps<{
+export interface MenuItemLabelType {
   depth: number;
   active: boolean;
   deprecated?: boolean;
   type?: string;
-}>(styled.label).attrs({
+}
+
+export const MenuItemLabel = styled.label.attrs((props: MenuItemLabelType) => ({
   role: 'menuitem',
-  className: props =>
-    classnames('-depth' + props.depth, {
-      active: props.active,
-    }),
-})`
+  className: classnames('-depth' + props.depth, {
+    active: props.active,
+  }),
+}))<MenuItemLabelType>`
   cursor: pointer;
   color: ${props =>
     props.active ? props.theme.colors.primary.main : props.theme.colors.text.primary};
@@ -151,7 +154,7 @@ export const MenuItemLabel = withProps<{
   }
 `;
 
-export const MenuItemTitle = withProps<{ width?: string }>(styled.span)`
+export const MenuItemTitle = styled.span<{ width?: string }>`
   display: inline-block;
   vertical-align: middle;
   width: ${props => (props.width ? props.width : 'auto')};

diff --git a/src/components/StickySidebar/StickyResponsiveSidebar.tsx b/src/components/StickySidebar/StickyResponsiveSidebar.tsx
@@ -3,7 +3,7 @@ import * as React from 'react';
 
 import { MenuStore } from '../../services/MenuStore';
 import { RedocNormalizedOptions, RedocRawOptions } from '../../services/RedocNormalizedOptions';
-import styled, { media, withProps } from '../../styled-components';
+import styled, { media } from '../../styled-components';
 import { IS_BROWSER } from '../../utils/index';
 import { OptionsContext } from '../OptionsProvider';
 import { AnimatedChevronButton } from './ChevronSvg';
@@ -21,7 +21,7 @@ export interface StickySidebarProps {
 
 const stickyfill = Stickyfill && Stickyfill();
 
-const StyledStickySidebar = withProps<{ open?: boolean }>(styled.div)`
+const StyledStickySidebar = styled.div<{ open?: boolean }>`
   width: ${props => props.theme.menu.width};
   background-color: ${props => props.theme.menu.backgroundColor};
   overflow: hidden;