redesign preparation: Rewrite to TypeScript, fetch Github stars

Author: xxczaki

components/box.js renamed to components/box.ts

@@ -1,26 +1,22 @@
 import React from 'react';
 import styled from 'styled-components';
 import {motion, useReducedMotion} from 'framer-motion';
-import PropTypes from 'prop-types';
 
 import Header from './header';
 import Nav from './nav';
 import NavLink from './navlink';
 
-const Wrapper = styled.div`
-    display: flex;
-    flex-direction: column;
-    flex-wrap: wrap;
-    margin: 0 auto 30px;
-	padding-left: 3em;
-	padding-right: 20px;
+interface Props {
+	children: React.ReactNode;
+}
 
-	@media (min-width: 320px) and (max-width: 480px) {
-		padding-left: 20px;
-	}
+const Wrapper = styled.div`
+	display: flex;
+	flex-direction: column;
+	flex-wrap: wrap;
 `;
 
-const Container = props => {
+const Container = ({children}: Props): JSX.Element => {
 	const shouldReduceMotion = useReducedMotion();
 
 	const config = {
@@ -51,13 +47,9 @@ const Container = props => {
 				<NavLink title="Projects" href="/projects"/>
 				<NavLink title="Contact" href="/contact"/>
 			</Nav>
-			{props.children}
+			{children}
 		</Wrapper>
 	);
 };
 
-Container.propTypes = {
-	children: PropTypes.node.isRequired
-};
-
 export default Container;

components/container.js renamed to components/container.tsx

@@ -1,7 +1,7 @@
 import styled from 'styled-components';
 
-const Box = styled.details`
+const Details = styled.details`
 	cursor: pointer;
 `;
 
-export default Box;
+export default Details;

components/details.js renamed to components/details.ts

@@ -16,6 +16,7 @@ const shake = keyframes`
 	}
 `;
 
+/* eslint-disable @typescript-eslint/no-base-to-string */
 const Animated = styled.div`
 	&:hover {
 		animation: ${shake} 0.82s cubic-bezier(.36,.07,.19,.97) both;
@@ -24,6 +25,7 @@ const Animated = styled.div`
   		perspective: 1000px;
 	}
 `;
+/* eslint-enable @typescript-eslint/no-base-to-string */
 
 const Wrapper = styled.a`
 	text-align: center;
@@ -32,7 +34,7 @@ const Wrapper = styled.a`
     font-size: 25px;
 `;
 
-const Mail = () => (
+const Mail = (): JSX.Element => (
 	<Animated>
 		<Wrapper href="mailto:a@kepinski.me">
 			a@kepinski.me

components/extlink.js renamed to components/extlink.ts

@@ -4,6 +4,11 @@ const Main = styled.main`
 	display: flex;
     align-items: flex-start;
 	flex-wrap: wrap;
+
+	@media (min-width: 320px) and (max-width: 480px) {
+		align-items: center;
+		justify-content: center;
+	}
 `;
 
 export default Main;

components/header.js renamed to components/header.ts

@@ -9,11 +9,14 @@ import imagePlaceholder from '../public/images/me-placeholder.svg';
 const Wrapper = styled.div`
 	border: 10px solid #212121;
 	transform: rotate(2deg);
+	margin-bottom: 1em;
 `;
 
-const Me = () => (
+const Me = (): JSX.Element => (
 	<Tilt>
 		<Wrapper>
+			{/*
+  				// @ts-ignore */}
 			<SimpleImg src={imageSrc} placeholder={imagePlaceholder} draggable={false} width="18em" height="auto" alt="Me"/>
 		</Wrapper>
 	</Tilt>

components/mail.js renamed to components/mail.tsx

@@ -1,7 +1,11 @@
 import React from 'react';
 import Link from 'next/link';
 import styled from 'styled-components';
-import PropTypes from 'prop-types';
+
+interface Props {
+	title: string;
+	href: string;
+}
 
 const Wrapper = styled.a`
 	color: #fafff7;
@@ -19,16 +23,10 @@ const Wrapper = styled.a`
     }
 `;
 
-const NavLink = ({title, href}) => (
+const NavLink = ({title, href}: Props): JSX.Element => (
 	<Link scroll={false} href={href}>
-		{/* eslint-disable-next-line react/jsx-no-comment-textnodes */}
 		<Wrapper>//{title}</Wrapper>
 	</Link>
 );
 
-NavLink.propTypes = {
-	title: PropTypes.string.isRequired,
-	href: PropTypes.string.isRequired
-};
-
 export default NavLink;

components/main.js renamed to components/main.ts

@@ -1,42 +1,37 @@
 [
+	{
+		"id": "node-fetch",
+        "name": "Node Fetch",
+        "description": "A light-weight module that brings window.fetch to Node.js",
+        "url": "https://github.com/node-fetch/node-fetch",
+        "tags": [
+            "Node.js"
+        ]
+	},
+	{
+		"id": "oji",
+        "name": "Oji",
+        "description": "Easily create text emoticons from your terminal",
+        "url": "https://github.com/xxczaki/oji",
+        "tags": [
+            "CLI",
+            "Node.js"
+        ]
+	},
     {
+		"id": "pizzaql",
         "name": "PizzaQL",
-        "description": "Modern order placement & management system for pizza restaurants.",
+        "description": "Modern order placement & management system for pizza restaurants",
         "url": "https://github.com/xxczaki/pizzaql",
         "tags": [
             "React",
             "Next.js",
 			"GraphQL",
 			"Prisma"
         ]
-    },
-    {
-        "name": "Quick Air",
-        "description": "Check air quality near you quickly, using Airly API.",
-        "url": "https://quick-air.now.sh",
-        "tags": [
-            "React",
-            "Next.js"
-        ]
 	},
 	{
-        "name": "Welding Toolbox 2",
-        "description": "An app containing a set of useful welding tools, written in React Native",
-        "url": "https://play.google.com/store/apps/details?id=me.kepinski.weldingtoolbox2",
-        "tags": [
-            "React Native"
-        ]
-    },
-    {
-        "name": "Cash CLI",
-        "description": "Convert currency rates directly from your terminal!",
-        "url": "https://github.com/xxczaki/cash-cli/",
-        "tags": [
-			"CLI",
-            "Node.js"
-        ]
-    },
-    {
+		"id": "cashify",
         "name": "Cashify",
         "description": "Lightweight currency conversion library, successor of money.js",
         "url": "https://github.com/xxczaki/cashify",
@@ -46,9 +41,21 @@
         ]
 	},
 	{
-        "name": "odc",
-        "description": "Update npm dependencies easily!",
-        "url": "https://github.com/xxczaki/odc",
+		"id": "styled-react-boilerplate",
+        "name": "Styled Boilerplate",
+        "description": "Minimal & modern boilerplate for building apps with React & styled-components",
+        "url": "https://github.com/xxczaki/styled-react-boilerplate",
+        "tags": [
+			"React",
+			"Styled Components",
+            "Webpack"
+        ]
+    },
+    {
+		"id": "cash-cli",
+        "name": "Cash CLI",
+        "description": "Convert currency rates directly from your terminal",
+        "url": "https://github.com/xxczaki/cash-cli/",
         "tags": [
 			"CLI",
             "Node.js"

components/me.js renamed to components/me.tsx

@@ -2,24 +2,43 @@ import React from 'react';
 import styled from 'styled-components';
 import {SimpleImg} from 'react-simple-img';
 
+import {Response} from '../../utils/fetcher';
+
 import imageSrc from '../../public/images/open.svg';
 import data from './data.json';
 
+interface Props {
+	stars: Response | undefined;
+}
+
+interface Project {
+	id: string;
+	name: string;
+	description: string;
+	url: string;
+	tags: string[];
+}
+
 const Wrapper = styled.div`
 	display: grid;
 	grid-template-columns: repeat(auto-fill, minmax(20em, 1fr));
 	gap: 17px;
 	padding-top: 2em;
+	max-width: 70em;
+
+	@media (min-width: 320px) and (max-width: 480px) {
+		max-width: 100%;
+	}
 `;
 
 const Element = styled.a`
-	box-shadow: #212121 0px 10px 30px -15px;
+	box-shadow: #232527 0px 10px 30px -15px;
     display: flex;
     justify-content: space-between;
     flex-direction: column;
     align-items: flex-start;
     position: relative;
-    background-color: #212121;
+    background-color: #232527;
     padding: 2rem 1.75rem;
     border-radius: 3px;
     transition: all 0.25s cubic-bezier(0.645, 0.045, 0.355, 1) 0s;
@@ -74,28 +93,33 @@ const Tag = styled.li`
     margin-right: 15px;
 `;
 
-const Projects = () => (
+const Projects = ({stars}: Props): JSX.Element => (
 	<Wrapper>
-		{data.map(element => (
-			<Element key={element.name} href={element.url} target="_blank" rel="noopener noreferrer">
-				<header>
-					<Top>
-						<Header>{element.name}</Header>
-						<Img src={imageSrc} placeholder="black" width="1.3em" height="1.3em" alt="Open"/>
-					</Top>
-					<Description>
-						{element.description}
-					</Description>
-				</header>
-				<footer>
-					<Tags>
-						{element.tags.map(name => (
-							<Tag key={name}>{name}</Tag>
-						))}
-					</Tags>
-				</footer>
-			</Element>
-		))}
+		{data.map((element: Project) => {
+			const starCount = stars?.repositoryOwner.repositories.nodes.filter(data => element.id === data.name).map(element => element.stargazers.totalCount);
+
+			return (
+				<Element key={element.name} href={element.url} target="_blank" rel="noopener noreferrer">
+					<header>
+						<Top>
+							<Header>{element.name}</Header>
+							<Img src={imageSrc} placeholder="black" width="1.3em" height="1.3em" alt="Open"/>
+						</Top>
+						{stars ? <p>🟊 {starCount}</p> : ''}
+						<Description>
+							{element.description}
+						</Description>
+					</header>
+					<footer>
+						<Tags>
+							{element.tags.map(name => (
+								<Tag key={name}>{name}</Tag>
+							))}
+						</Tags>
+					</footer>
+				</Element>
+			);
+		})}
 	</Wrapper>
 );
 

components/nav.js renamed to components/nav.ts

@@ -27,7 +27,7 @@ const Element = styled.li`
 	}
 `;
 
-const Skills = () => (
+const Skills = (): JSX.Element => (
 	<List>
 		<Element>JavaScript (ES6+)</Element>
 		<Element>React</Element>

components/navlink.js renamed to components/navlink.tsx

@@ -1,8 +1,12 @@
 import React from 'react';
 import {AnimatePresence, motion, useReducedMotion} from 'framer-motion';
-import PropTypes from 'prop-types';
 
-const Transition = props => {
+interface Props {
+	children: React.ReactNode;
+	id: string;
+}
+
+const Transition = ({children, id}: Props) => {
 	const shouldReduceMotion = useReducedMotion();
 
 	const spring = {
@@ -16,23 +20,17 @@ const Transition = props => {
 		<AnimatePresence exitBeforeEnter>
 			<div className="page-transition-wrapper">
 				<motion.div
-					key={props.id}
+					key={id}
 					transition={spring}
-					initial={shouldReduceMotion ? {opacity: 0} : {x: 300, opacity: 0}}
-					animate={shouldReduceMotion ? {opacity: 1} : {x: 0, opacity: 1}}
-					exit={shouldReduceMotion ? {opacity: 0} : {x: -300, opacity: 0}}
+					initial={shouldReduceMotion ? {opacity: 0} : {y: 100, opacity: 0}}
+					animate={shouldReduceMotion ? {opacity: 1} : {y: 0, opacity: 1}}
 					id="page-transition-container"
 				>
-					{props.children}
+					{children}
 				</motion.div>
 			</div>
 		</AnimatePresence>
 	);
 };
 
-Transition.propTypes = {
-	children: PropTypes.node.isRequired,
-	id: PropTypes.string.isRequired
-};
-
 export default Transition;

components/projects/data.json

@@ -0,0 +1,7 @@
+/// <reference types="next" />
+/// <reference types="next/types/global" />
+
+declare module '*.woff';
+declare module '*.woff2';
+declare module '*.jpg';
+declare module '*.svg';