cratebind · mattfwood · Mar 25, 2020 · Mar 25, 2020
diff --git a/docs/src/@rocketseat/gatsby-theme-docs/components/Sidebar.js b/docs/src/@rocketseat/gatsby-theme-docs/components/Sidebar.js
@@ -32,7 +32,6 @@ export default function Sidebar({ isMenuOpen }) {
     site: {
       siteMetadata: { footer, basePath },
     },
-    allMdx,
     components,
     examples,
   } = useStaticQuery(graphql`

diff --git a/docs/src/docs/components/Input.mdx b/docs/src/docs/components/Input.mdx
@@ -6,7 +6,7 @@ import { Input } from 'minerva-ui';
 
 Extends native `<input />` component
 
-```js
+```jsx
 import { Input } from 'minerva-ui';
 ```
 

diff --git a/package.json b/package.json
@@ -52,6 +52,7 @@
     "@types/jest-axe": "^3.2.1",
     "@types/react": "^16.9.23",
     "@types/react-dom": "^16.9.5",
+    "@types/styled-system__css": "^5.0.6",
     "babel-loader": "^8.0.6",
     "cz-conventional-changelog": "3.1.0",
     "cz-customizable": "^6.2.0",

diff --git a/src/Heading/index.tsx b/src/Heading/index.tsx
@@ -2,7 +2,9 @@ import React, { forwardRef } from 'react';
 import styled from 'styled-components';
 import { MinervaProps, systemProps } from '../layout';
 
-const sizes = {
+type SizeNames = 'xl' | 'lg' | 'md' | 'sm' | 'xs';
+
+const sizes: { [key in SizeNames]: string } = {
   xl: '40px',
   lg: '32px',
   md: '24px',
@@ -11,7 +13,7 @@ const sizes = {
 };
 
 const StyledHeading = styled('h1')<any>(
-  props => ({
+  (props: { theme: any; size: SizeNames; lineHeight?: string }) => ({
     ...props.theme.Heading,
     fontSize: sizes[props.size],
     lineHeight: props.lineHeight,

diff --git a/src/InputField/index.tsx b/src/InputField/index.tsx
@@ -33,7 +33,7 @@ export const StyledRequiredMarker = styled(Text)(() => {
   };
 });
 
-export const RequiredMarker = ({ color }) => {
+export const RequiredMarker = ({ color }: { color?: string }) => {
   return (
     <StyledRequiredMarker aria-hidden="true" color={color}>
       *

diff --git a/src/PseudoBox/index.tsx b/src/PseudoBox/index.tsx
@@ -190,30 +190,6 @@ const PseudoBox = styled(Box)<PseudoProps>(
   }: PseudoBoxProps) => {
     // console.log(transformAliasProps(_hover));
     return css({
-      // [hover]: transformAliasProps(_hover),
-      // [focus]: transformAliasProps(_focus),
-      // [active]: transformAliasProps(_active),
-      // [visited]: transformAliasProps(_visited),
-      // [disabled]: transformAliasProps(_disabled),
-      // [selected]: transformAliasProps(_selected),
-      // [invalid]: transformAliasProps(_invalid),
-      // [expanded]: transformAliasProps(_expanded),
-      // [grabbed]: transformAliasProps(_grabbed),
-      // [readOnly]: transformAliasProps(_readOnly),
-      // [first]: transformAliasProps(_first),
-      // [notFirst]: transformAliasProps(_notFirst),
-      // [notLast]: transformAliasProps(_notLast),
-      // [last]: transformAliasProps(_last),
-      // [odd]: transformAliasProps(_odd),
-      // [even]: transformAliasProps(_even),
-      // [mixed]: transformAliasProps(_mixed),
-      // [checked]: transformAliasProps(_checked),
-      // [pressed]: transformAliasProps(_pressed),
-      // [groupHover]: transformAliasProps(_groupHover),
-      // '&:before': transformAliasProps(_before),
-      // '&:after': transformAliasProps(_after),
-      // '&:focus-within': transformAliasProps(_focusWithin),
-      // '&::placeholder': transformAliasProps(_placeholder),
       [hover]: _hover,
       [focus]: _focus,
       [active]: _active,
@@ -238,7 +214,7 @@ const PseudoBox = styled(Box)<PseudoProps>(
       '&:after': _after,
       '&:focus-within': _focusWithin,
       '&::placeholder': _placeholder,
-    });
+    } as any);
   }
 );
 

diff --git a/src/Tag/index.tsx b/src/Tag/index.tsx
@@ -1,7 +1,8 @@
 import React, { forwardRef } from 'react';
 import styled from 'styled-components';
 import { MinervaProps, systemProps, Box } from '../layout';
-import { Text, Icon } from '..';
+import Text from '../Text';
+import Icon from '../Icon';
 
 const IconContainer = styled('div')`
   margin-left: 5px;

diff --git a/src/theme.ts b/src/theme.ts
@@ -6,10 +6,12 @@ import { ThemeContext } from 'styled-components';
 // import { useContext } from 'react';
 // import { ThemeContext } from 'styled-components';
 
+const AllIcons: { [index: string]: any } = Icon;
+
 const logoColor = '#551A8B';
 
 // https://gist.github.com/thevangelist/8ff91bac947018c9f3bfaad6487fa149
-function toKebabCase(string) {
+function toKebabCase(string: string): string {
   return string
     .replace(/([a-z])([A-Z])/g, '$1-$2')
     .replace(/\s+/g, '-')
@@ -69,8 +71,8 @@ const defaultTheme: MinervaTheme = {
   Select: {},
   Tag: {},
   defaultBorderColor: '#d2d6dc',
-  icons: Object.keys(Icon).reduce((result, iconName) => {
-    result[toKebabCase(iconName)] = Icon[iconName];
+  icons: Object.keys(Icon).reduce((result: any, iconName) => {
+    result[toKebabCase(iconName)] = AllIcons[iconName];
     return result;
   }, {}),
   colors: {

diff --git a/test/tagsInput.test.tsx b/test/tagsInput.test.tsx
@@ -3,12 +3,12 @@ import { render, fireEvent } from '@testing-library/react';
 import 'jest-styled-components';
 import { ThemeProvider, TagsInput } from '../src';
 
-const ExampleTagInput = props => {
+const ExampleTagInput = () => {
   const initialState: string[] = [];
   const [tags, setTags] = useState(initialState);
   const [inputVal, setInputVal] = React.useState('');
 
-  const addTag = e => {
+  const addTag = () => {
     setTags([...tags, inputVal]);
     setInputVal('');
   };
@@ -25,7 +25,7 @@ const ExampleTagInput = props => {
         tags={tags}
         onKeyDown={e => {
           if (e.key === 'Enter' && inputVal) {
-            addTag(e);
+            addTag();
           }
           if (e.key === 'Backspace' && !inputVal) {
             removeTag(tags.length - 1);

diff --git a/tsconfig.json b/tsconfig.json
@@ -17,8 +17,7 @@
     "alwaysStrict": true,
     "allowSyntheticDefaultImports": true,
     "noUnusedLocals": true,
-    "skipLibCheck": true,
-    "noUnusedParameters": false,
+    "noUnusedParameters": true,
     "noImplicitReturns": true,
     "noFallthroughCasesInSwitch": true,
     "moduleResolution": "node",

diff --git a/yarn.lock b/yarn.lock
@@ -3472,6 +3472,13 @@
   dependencies:
     csstype "^2.6.9"
 
+"@types/styled-system__css@^5.0.6":
+  version "5.0.6"
+  resolved "https://registry.yarnpkg.com/@types/styled-system__css/-/styled-system__css-5.0.6.tgz#ceac02d9839026fbbc10978f53947f22167dca54"
+  integrity sha512-i/smjcALDt4JB9/wn1osPWK5W2bWHz06QPELSa/yK5PFiUbsVjsf4qpnLi4oZ4n7T5KM/xvA31Kx8gvam5zQ5w==
+  dependencies:
+    csstype "^2.6.6"
+
 "@types/testing-library__dom@*":
   version "6.10.0"
   resolved "https://registry.yarnpkg.com/@types/testing-library__dom/-/testing-library__dom-6.10.0.tgz#590d76e3875a7c536dc744eb530cbf51b6483404"
@@ -6497,7 +6504,7 @@ csstype@^2.2.0, csstype@^2.5.7:
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.7.tgz#20b0024c20b6718f4eda3853a1f5a1cce7f5e4a5"
   integrity sha512-9Mcn9sFbGBAdmimWb2gLVDtFJzeKtDGIr76TUqmjZrw9LFXBMSU70lcs+C0/7fyCd6iBDqmksUcCOUIkisPHsQ==
 
-csstype@^2.6.9:
+csstype@^2.6.6, csstype@^2.6.9:
   version "2.6.9"
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.9.tgz#05141d0cd557a56b8891394c1911c40c8a98d098"
   integrity sha512-xz39Sb4+OaTsULgUERcCk+TJj8ylkL4aSVDQiX/ksxbELSqwkgt4d4RD7fovIdgJGSuNYqwZEiVjYY5l0ask+Q==
-Original file line number
+Diff line change
@@ Expand Up / @@ -6,7 +6,7 @@ import { Input } from 'minerva-ui'; @@
     Extends native `<input />` component
-    ```js
+    ```jsx
     import { Input } from 'minerva-ui';
     ```
@@ Expand Down @@