diff --git a/docs/src/@rocketseat/gatsby-theme-docs/components/Sidebar.js b/docs/src/@rocketseat/gatsby-theme-docs/components/Sidebar.js
index 92d95db2..5b75cd33 100644
--- 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
index 77fdeb05..ef3432c5 100644
--- 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 `` component
-```js
+```jsx
import { Input } from 'minerva-ui';
```
diff --git a/package.json b/package.json
index 581714a2..1f73a092 100644
--- 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
index 5cde4a08..f0d9d7ad 100644
--- 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')(
- 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
index 87e07fd7..e35cfa41 100644
--- 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 (
*
diff --git a/src/PseudoBox/index.tsx b/src/PseudoBox/index.tsx
index f8364955..a2a38a3a 100644
--- a/src/PseudoBox/index.tsx
+++ b/src/PseudoBox/index.tsx
@@ -190,30 +190,6 @@ const PseudoBox = styled(Box)(
}: 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)(
'&:after': _after,
'&:focus-within': _focusWithin,
'&::placeholder': _placeholder,
- });
+ } as any);
}
);
diff --git a/src/Tag/index.tsx b/src/Tag/index.tsx
index f3c70c72..c8442f67 100644
--- 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
index 5261f63d..5e5e34be 100644
--- 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
index e111f536..01993ff4 100644
--- 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
index 8ceab4cb..6bdfa823 100644
--- 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
index 3b944ebf..0c6f3983 100644
--- 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==