Skip to content

Commit 266a177

Browse files
author
Tiko
committed
fixed navbar typing and changed navbar to be arrow function
1 parent 9f3ce3c commit 266a177

18 files changed

+2219
-1517
lines changed

‎gatsby-node.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,7 @@ exports.createPages = async ({ actions, graphql }) => {
5757
data.allMdx.edges.forEach(edge => {
5858
const { id } = edge.node;
5959
const { slug } = edge.node.fields;
60-
const template = path.resolve(`./src/templates/BlogpostTemplate.jsx`);
60+
const template = path.resolve(`./src/templates/BlogpostTemplate.tsx`);
6161
actions.createPage({
6262
path: slug,
6363
component: template,

‎package.json‎

Lines changed: 30 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -21,18 +21,18 @@
2121
"reinstall": "rm -rf node_modules && yarn"
2222
},
2323
"dependencies": {
24-
"@mdx-js/mdx": "^1.0.14",
25-
"@mdx-js/react": "^1.0.6",
24+
"@mdx-js/mdx": "^1.6.22",
25+
"@mdx-js/react": "^1.6.22",
2626
"@types/jest": "^26.0.19",
2727
"@types/node": "^14.14.12",
2828
"@types/react": "^17.0.0",
2929
"@types/react-router-dom": "^5.1.6",
30-
"axios": "^0.19.0",
31-
"babel-preset-gatsby": "^0.2.13",
32-
"change-case": "^4.1.1",
30+
"axios": "^0.21.0",
31+
"babel-preset-gatsby": "^0.8.0",
32+
"change-case": "^4.1.2",
3333
"gatsby": "^2.18.21",
3434
"gatsby-image": "^2.2.18",
35-
"gatsby-mdx": "^0.6.2",
35+
"gatsby-mdx": "^0.6.3",
3636
"gatsby-plugin-babel": "^1.0.0",
3737
"gatsby-plugin-manifest": "^2.2.16",
3838
"gatsby-plugin-offline": "^3.0.5",
@@ -44,34 +44,36 @@
4444
"gatsby-remark-images": "^3.1.42",
4545
"gatsby-source-filesystem": "^2.1.22",
4646
"gatsby-transformer-sharp": "^2.3.12",
47-
"polished": "^3.2.0",
48-
"prop-types": "^15.7.2",
49-
"react": "^16.12.0",
50-
"react-dom": "^16.12.0",
51-
"react-grid-system": "^4.4.3",
52-
"react-helmet": "^5.2.1",
53-
"styled-components": "^5.0.0",
47+
"polished": "^4.0.5",
48+
"react": "^17.0.1",
49+
"react-dom": "^17.0.1",
50+
"react-grid-system": "^7.1.1",
51+
"react-helmet": "^6.1.0",
52+
"styled-components": "^5.2.1",
5453
"styled-components-style-utils": "^1.2.1",
5554
"to-style": "^1.3.3",
56-
"yarn": "^1.17.3"
55+
"yarn": "^1.22.10"
5756
},
5857
"devDependencies": {
59-
"@babel/plugin-transform-modules-commonjs": "^7.6.0",
60-
"@typescript-eslint/eslint-plugin": "^2.2.0",
61-
"@typescript-eslint/parser": "^2.16.0",
62-
"eslint": "^6.3.0",
63-
"eslint-config-airbnb": "^18.0.1",
64-
"eslint-config-prettier": "^6.2.0",
65-
"eslint-plugin-import": "^2.18.2",
66-
"eslint-plugin-jest": "^22.17.0",
67-
"eslint-plugin-jsx-a11y": "^6.2.3",
68-
"eslint-plugin-prettier": "^3.1.0",
69-
"eslint-plugin-react": "^7.14.3",
58+
"@babel/plugin-transform-modules-commonjs": "^7.12.1",
59+
"@types/react-dom": "^17.0.0",
60+
"@types/react-helmet": "^6.1.0",
61+
"@types/styled-components": "^5.1.5",
62+
"@typescript-eslint/eslint-plugin": "^4.9.1",
63+
"@typescript-eslint/parser": "^4.9.1",
64+
"eslint": "^7.15.0",
65+
"eslint-config-airbnb": "^18.2.1",
66+
"eslint-config-prettier": "^7.0.0",
67+
"eslint-plugin-import": "^2.22.1",
68+
"eslint-plugin-jest": "^24.1.3",
69+
"eslint-plugin-jsx-a11y": "^6.4.1",
70+
"eslint-plugin-prettier": "^3.2.0",
71+
"eslint-plugin-react": "^7.21.5",
7072
"eslint-plugin-security": "^1.4.0",
71-
"jest": "^24.9.0",
72-
"prettier": "^1.18.2",
73+
"jest": "^26.6.3",
74+
"prettier": "^2.2.1",
7375
"ts-migrate": "^0.1.10",
74-
"typescript": "^3.7.4"
76+
"typescript": "^4.1.2"
7577
},
7678
"repository": {
7779
"type": "git",

‎src/.eslintrc‎

Whitespace-only changes.

‎src/components/Typography.tsx‎

Lines changed: 14 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,9 @@
11
import React from 'react';
2-
// @ts-expect-error ts-migrate(7016) FIXME: Could not find a declaration file for module 'styl... Remove this comment to see the full error message
32
import styled from 'styled-components';
43
import theme from '../styles/theme';
4+
import { QuoteProps } from './Typography.types';
55

66
const { fontWeights, fonts } = theme;
7-
8-
type Props = {
9-
author: string,
10-
url: string,
11-
children: string,
12-
};
13-
14-
export const Quote = ({ author, url, children }: Props) => {
15-
return (
16-
// @ts-expect-error ts-migrate(17004) FIXME: Cannot use JSX unless the '--jsx' flag is provided... Remove this comment to see the full error message
17-
<div>
18-
{/* @ts-expect-error ts-migrate(17004) FIXME: Cannot use JSX unless the '--jsx' flag is provided... Remove this comment to see the full error message */}
19-
<QuoteText>{children}</QuoteText>
20-
{/* @ts-expect-error ts-migrate(17004) FIXME: Cannot use JSX unless the '--jsx' flag is provided... Remove this comment to see the full error message */}
21-
<p>
22-
{/* @ts-expect-error ts-migrate(17004) FIXME: Cannot use JSX unless the '--jsx' flag is provided... Remove this comment to see the full error message */}
23-
<a href={url}>{author}</a>
24-
</p>
25-
</div>
26-
);
27-
};
28-
297
const QuoteText = styled.blockquote`
308
font-weight: ${fontWeights.light};
319
line-height: 1.2em;
@@ -43,9 +21,20 @@ export const Small = styled.span`
4321
`;
4422

4523
export const Subtitle = styled.h6`
46-
size: '0.85rem';
47-
height: '1.2em';
24+
size: 0.85rem;
25+
height: 1.2em;
4826
font-family: ${fonts.paragraph};
4927
font-weight: ${fontWeights.bold};
5028
color: ${theme.colors.primary};
5129
`;
30+
31+
export const Quote: React.FC<QuoteProps> = ({ author, url, children }) => {
32+
return (
33+
<div>
34+
<QuoteText>{children}</QuoteText>
35+
<p>
36+
<a href={url}>{author}</a>
37+
</p>
38+
</div>
39+
);
40+
};

‎src/components/Typography.types.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
export interface QuoteProps {
2+
author: string;
3+
url: string;
4+
children: string;
5+
}

‎src/containers/Navbar/Navbar.components.tsx‎

Lines changed: 38 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,29 @@
11
import React from 'react';
2-
// @ts-expect-error ts-migrate(7016) FIXME: Could not find a declaration file for module 'styl... Remove this comment to see the full error message
32
import styled from 'styled-components';
43
import { transparentize } from 'polished'; // TODO: Remove dependency
54
import { Link } from 'gatsby';
65
import theme from '../../styles/theme';
76

8-
// @ts-expect-error ts-migrate(2339) FIXME: Property 'mediaQueryMin' does not exist on type '{... Remove this comment to see the full error message
97
const { mediaQueryMin, colors } = theme;
108

119
const NavBarLi = styled.li`
1210
margin: 1em 0;
1311
`;
1412

15-
export const NavbarContainer = styled.nav`
13+
interface ContainerProps {
14+
atScrollTop?: boolean;
15+
noBackground?: boolean;
16+
}
17+
18+
export const NavbarContainer =
19+
styled.nav <
20+
ContainerProps >
21+
`
1622
position: fixed;
1723
width: 100%;
1824
z-index: 10000;
1925
padding: 0 3rem;
20-
background: ${(props: any) =>
26+
background: ${(props) =>
2127
props.atScrollTop ? 'transparent' : colors.background};
2228
@media (max-width: ${theme.breakpointMobileMenu}) {
2329
width: 100vw;
@@ -31,7 +37,7 @@ export const NavbarContainer = styled.nav`
3137
justify-content: space-between;
3238
}
3339
@media (min-width: ${theme.breakpointMobileMenu}) {
34-
background: ${(props: any) =>
40+
background: ${(props) =>
3541
props.noBackground
3642
? 'transparent'
3743
: `linear-gradient(to bottom, ${colors.mediumgray}, transparent)`};
@@ -45,8 +51,13 @@ export const NavbarContainer = styled.nav`
4551
@media (${mediaQueryMin.lg}) {
4652
}
4753
`;
48-
49-
export const NavbarContent = styled.div`
54+
interface ContentProps {
55+
menuIsOpen?: boolean;
56+
}
57+
export const NavbarContent =
58+
styled.div <
59+
ContentProps >
60+
`
5061
display: flex;
5162
align-items: center;
5263
justify-content: space-between;
@@ -58,7 +69,7 @@ export const NavbarContent = styled.div`
5869
5970
position: fixed;
6071
transform: translateX(
61-
${(props: any) => (props.menuIsOpen ? 0 : '65em')}
72+
${(props) => (props.menuIsOpen ? 0 : '65em')}
6273
);
6374
top: 0;
6475
bottom: 0;
@@ -101,30 +112,23 @@ const StyledLink = styled(Link)`
101112
}
102113
`;
103114

104-
type OwnProps = {
105-
className?: string,
106-
href: string,
107-
text: string,
108-
};
109-
110-
// @ts-expect-error ts-migrate(2456) FIXME: Type alias 'Props' circularly references itself.
111-
type Props = OwnProps & typeof NavbarItemBase.defaultProps;
112-
113-
// @ts-expect-error ts-migrate(7022) FIXME: 'NavbarItemBase' implicitly has type 'any' because... Remove this comment to see the full error message
114-
const NavbarItemBase = ({ className, href, text }: Props) => (
115-
// @ts-expect-error ts-migrate(17004) FIXME: Cannot use JSX unless the '--jsx' flag is provided... Remove this comment to see the full error message
115+
interface ItemBaseProps {
116+
className?: string;
117+
href: string;
118+
text: string;
119+
}
120+
const NavbarItemBase: React.FC<ItemBaseProps> = ({
121+
className = '',
122+
href,
123+
text,
124+
}) => (
116125
<NavBarLi className={className}>
117-
{/* @ts-expect-error ts-migrate(17004) FIXME: Cannot use JSX unless the '--jsx' flag is provided... Remove this comment to see the full error message */}
118126
<StyledLink to={href} className="menuitem">
119127
{text}
120128
</StyledLink>
121129
</NavBarLi>
122130
);
123131

124-
NavbarItemBase.defaultProps = {
125-
className: '',
126-
};
127-
128132
export const NavbarItem = styled(NavbarItemBase)`
129133
display: inline-block;
130134
padding: 0 1.33em;
@@ -195,7 +199,13 @@ export const CloseMenuButton = styled(MenuButton)`
195199
}
196200
`;
197201

198-
export const BlackOverlay = styled.div`
202+
interface OverlayProps {
203+
menuIsOpen?: boolean;
204+
}
205+
export const BlackOverlay =
206+
styled.div <
207+
OverlayProps >
208+
`
199209
position: fixed;
200210
top: 0;
201211
right: 0;
@@ -206,7 +216,7 @@ export const BlackOverlay = styled.div`
206216
opacity: 0;
207217
display: none;
208218
@media (max-width: ${theme.breakpointMobileMenu}) {
209-
display: ${(props: any) => (props.menuIsOpen ? 'block' : 'none')};
210-
opacity: ${(props: any) => (props.menuIsOpen ? 0.5 : 0)};
219+
display: ${(props) => (props.menuIsOpen ? 'block' : 'none')};
220+
opacity: ${(props) => (props.menuIsOpen ? 0.5 : 0)};
211221
}
212222
`;

0 commit comments

Comments
 (0)