Fix typings (codesandbox#2693)

Author: MichaelDeBoey

packages/app/src/app/pages/common/UserMenu/Menu/elements.tsx

@@ -1,66 +1,72 @@
-import React from 'react';
-import styled from 'styled-components';
-import { Link } from 'react-router-dom';
 import delayEffect from '@codesandbox/common/lib/utils/animation/delay-effect';
+import React, { ComponentProps, forwardRef } from 'react';
+import { Link } from 'react-router-dom';
 import { MenuSeparator } from 'reakit';
+import styled, { css } from 'styled-components';
 
 export const Container = styled.div`
-  background-color: ${props => props.theme.background4};
-  box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.75);
+  ${({ theme }) => css`
+    background-color: ${theme.background4};
+    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.75);
 
-  ${delayEffect(0)};
+    ${delayEffect(0)};
 
-  min-width: 200px;
+    min-width: 200px;
 
-  z-index: 20;
+    z-index: 20;
+  `};
 `;
 
-const StyledMenu = styled(Link)<{ to?: string; href?: string }>`
-  transition: 0.3s ease all;
-  display: flex;
-  align-items: center;
-  font-size: 0.875rem;
-  padding: 0.5rem 1rem;
+const StyledMenu = styled(Link)<{ href?: string; to?: string }>`
+  ${({ theme }) => css`
+    transition: 0.3s ease all;
+    display: flex;
+    align-items: center;
+    font-size: 0.875rem;
+    padding: 0.5rem 1rem;
 
-  text-decoration: none;
+    text-decoration: none;
 
-  color: rgba(255, 255, 255, 0.8);
-  border: 0;
-  outline: 0;
-  outline-width: 0 !important;
-  box-sizing: border-box;
-  border-left: 2px solid transparent;
-  background-color: transparent;
-  width: 100%;
+    color: rgba(255, 255, 255, 0.8);
+    border: 0;
+    outline: 0 !important;
+    box-sizing: border-box;
+    border-left: 2px solid transparent;
+    background-color: transparent;
+    width: 100%;
 
-  cursor: pointer;
+    cursor: pointer;
 
-  &:focus {
-    border-color: ${props => props.theme.secondary};
-    color: white;
-    background-color: ${props => props.theme.secondary.clearer(0.9)};
-    outline: 0;
-  }
+    &:focus {
+      border-color: ${theme.secondary};
+      color: white;
+      background-color: ${theme.secondary.clearer(0.9)};
+      outline: 0;
+    }
 
-  &:hover {
-    border-color: ${props => props.theme.secondary};
-    color: white;
-    background-color: ${props => props.theme.secondary.clearer(0.9)};
-  }
+    &:hover {
+      border-color: ${theme.secondary};
+      color: white;
+      background-color: ${theme.secondary.clearer(0.9)};
+    }
+  `};
 `;
 
 const StyledMenuA = StyledMenu.withComponent('a');
 const StyledMenuButton = StyledMenu.withComponent('button');
 
-export const ItemA = React.forwardRef((props: any, ref) => (
-  <StyledMenuA {...props} ref={ref} />
-));
-export const ItemButton = React.forwardRef((props: any, ref) => (
-  <StyledMenuButton {...props} ref={ref} />
-));
-export const ItemLink = React.forwardRef((props: any, ref) => (
-  <StyledMenu {...props} innerRef={ref} />
-));
+export const ItemA = forwardRef<
+  HTMLAnchorElement,
+  ComponentProps<typeof StyledMenuA>
+>((props, ref) => <StyledMenuA {...props} ref={ref} />);
+export const ItemButton = forwardRef<
+  HTMLButtonElement,
+  ComponentProps<typeof StyledMenuButton>
+>((props, ref) => <StyledMenuButton {...props} ref={ref} />);
+export const ItemLink = forwardRef<
+  HTMLAnchorElement,
+  ComponentProps<typeof StyledMenu>
+>((props, ref) => <StyledMenu {...props} innerRef={ref} />);
 
 export const Icon = styled.span`
   margin-right: 0.75rem;
@@ -69,11 +75,13 @@ export const Icon = styled.span`
 `;
 
 export const Separator = styled(MenuSeparator)`
-  height: 1px;
-  width: 100%;
-  margin: 0.5rem 0;
+  ${({ theme }) => css`
+    height: 1px;
+    width: 100%;
+    margin: 0.5rem 0;
 
-  background-color: ${props => props.theme.background};
-  border: 0;
-  outline: 0;
+    background-color: ${theme.background};
+    border: 0;
+    outline: 0;
+  `};
 `;

packages/common/src/templates/icons.ts

@@ -58,14 +58,7 @@ import {
   TemplateType,
 } from '.';
 
-export type ReturnedIcon = React.SFC<{
-  width?: number;
-  height?: number;
-  className?: string;
-  style?: React.CSSProperties;
-}>;
-
-export default function getIcon(theme: TemplateType): ReturnedIcon {
+export default function getIcon(theme: TemplateType) {
   switch (theme) {
     case adonis.name:
       return AdonisIcon;

packages/common/src/templates/iconsDark.ts

@@ -58,14 +58,7 @@ import {
   TemplateType,
 } from '.';
 
-export type ReturnedIcon = React.SFC<{
-  width?: number;
-  height?: number;
-  className?: string;
-  style?: React.CSSProperties;
-}>;
-
-export default function getIcon(theme: TemplateType): ReturnedIcon {
+export default function getIcon(theme: TemplateType) {
   switch (theme) {
     case adonis.name:
       return AdonisIconDark;

packages/common/src/templates/iconsLight.ts

@@ -58,14 +58,7 @@ import {
   TemplateType,
 } from '.';
 
-export type ReturnedIcon = React.SFC<{
-  width?: number;
-  height?: number;
-  className?: string;
-  style?: React.CSSProperties;
-}>;
-
-export default function getIcon(theme: TemplateType): ReturnedIcon {
+export default function getIcon(theme: TemplateType) {
   switch (theme) {
     case adonis.name:
       return AdonisIconLight;