skillrecordings · vojtaholik · Jul 29, 2022 · Jul 29, 2022 · Jul 29, 2022 · Jul 29, 2022
diff --git a/apps/badass/package.json b/apps/badass/package.json
@@ -73,9 +73,9 @@
     "pluralize": "^8.0.0",
     "postcss": "^8.4.14",
     "query-string": "^7.1.1",
-    "react": "17.0.2",
+    "react": "18.2.0",
     "react-countdown": "^2.3.2",
-    "react-dom": "17.0.2",
+    "react-dom": "18.2.0",
     "react-hot-toast": "^2.2.0",
     "react-markdown": "^8.0.2",
     "react-refractor": "^2.1.7",
@@ -108,8 +108,8 @@
     "@types/node": "^17.0.0",
     "@types/nodemailer": "^6.4.4",
     "@types/pluralize": "^0.0.29",
-    "@types/react": "^17.0.42",
-    "@types/react-dom": "^17.0.17",
+    "@types/react": "^18.0.15",
+    "@types/react-dom": "^18.0.6",
     "@types/react-scroll": "^1.8.3",
     "@types/speakingurl": "^13.0.3",
     "assert": "^2.0.0",

diff --git a/apps/badass/src/components/call-to-action-form.tsx b/apps/badass/src/components/call-to-action-form.tsx
@@ -10,7 +10,9 @@ import {
   SubscribeToConvertkitForm,
 } from '@skillrecordings/convertkit'
 
-export const CallToActionForm: React.FC<any> = ({content}) => {
+export const CallToActionForm: React.FC<React.PropsWithChildren<any>> = ({
+  content,
+}) => {
   const router = useRouter()
 
   return (

diff --git a/apps/badass/src/components/layout.tsx b/apps/badass/src/components/layout.tsx
@@ -5,12 +5,9 @@ import config from '../config'
 import {first} from 'lodash'
 import Navigation from './navigation'
 
-const Layout: React.FC<LayoutProps & {withFooter?: boolean}> = ({
-  children,
-  withFooter,
-  meta,
-  ...props
-}) => {
+const Layout: React.FC<
+  React.PropsWithChildren<LayoutProps & {withFooter?: boolean}>
+> = ({children, withFooter, meta, ...props}) => {
   const defaultMeta = {
     title: config.defaultTitle,
     description: config.description,

diff --git a/apps/badass/src/components/navigation.tsx b/apps/badass/src/components/navigation.tsx
@@ -42,7 +42,7 @@ const Navigation = () => {
   )
 }
 
-const DesktopNav: React.FC = () => {
+const DesktopNav: React.FC<React.PropsWithChildren<unknown>> = () => {
   return (
     <div className={cx('sm:flex hidden w-full pl-10 gap-2 h-full justify-end')}>
       <NavSlots>
@@ -53,7 +53,7 @@ const DesktopNav: React.FC = () => {
   )
 }
 
-const MobileNav: React.FC = () => {
+const MobileNav: React.FC<React.PropsWithChildren<unknown>> = () => {
   return (
     <Menu as="div" className="sm:hidden relative inline-block text-left z-10">
       {({open}) => (
@@ -98,11 +98,15 @@ const MobileNav: React.FC = () => {
   )
 }
 
-const NavSlots: React.FC = ({children}) => {
+const NavSlots: React.FC<React.PropsWithChildren<unknown>> = ({children}) => {
   return <div className="flex items-center">{children}</div>
 }
 
-const NavLink: React.FC<{href: string}> = ({href, children, ...props}) => {
+const NavLink: React.FC<React.PropsWithChildren<{href: string}>> = ({
+  href,
+  children,
+  ...props
+}) => {
   const router = useRouter()
   const isActive = href.endsWith(router.pathname)
 

diff --git a/apps/badass/src/components/podcast-player.tsx b/apps/badass/src/components/podcast-player.tsx
@@ -1,6 +1,8 @@
 import * as React from 'react'
 
-const PodcastPlayer: React.FC<{simplecastId: string}> = ({simplecastId}) => {
+const PodcastPlayer: React.FC<
+  React.PropsWithChildren<{simplecastId: string}>
+> = ({simplecastId}) => {
   return (
     <div className="relative">
       <iframe

diff --git a/apps/badass/src/components/spinner.tsx b/apps/badass/src/components/spinner.tsx
@@ -1,9 +1,11 @@
 import * as React from 'react'
 import cx from 'classnames'
 
-const Spinner: React.FunctionComponent<{
-  className?: string
-}> = ({className = '', ...rest}) => (
+const Spinner: React.FunctionComponent<
+  React.PropsWithChildren<{
+    className?: string
+  }>
+> = ({className = '', ...rest}) => (
   <svg
     className={cx('animate-spin', className)}
     xmlns="http://www.w3.org/2000/svg"

diff --git a/apps/badass/src/pages/[article].tsx b/apps/badass/src/pages/[article].tsx
@@ -88,7 +88,10 @@ type ArticlePageProps = {
   hasSubscribed: boolean
 }
 
-const ArticlePage: React.FC<ArticlePageProps> = ({article, hasSubscribed}) => {
+const ArticlePage: React.FC<React.PropsWithChildren<ArticlePageProps>> = ({
+  article,
+  hasSubscribed,
+}) => {
   return <ArticleTemplate article={article} hasSubscribed={hasSubscribed} />
 }
 

diff --git a/apps/badass/src/pages/answer.tsx b/apps/badass/src/pages/answer.tsx
@@ -3,7 +3,9 @@ import {QuizAnswerPage} from '@skillrecordings/quiz'
 import {QuestionSet} from '@skillrecordings/types'
 import Layout from '@skillrecordings/react/dist/layouts'
 
-const Answer: React.FC<{questionSet: QuestionSet}> = ({questionSet}) => {
+const Answer: React.FC<React.PropsWithChildren<{questionSet: QuestionSet}>> = ({
+  questionSet,
+}) => {
   return (
     <Layout noIndex meta={{title: 'Quiz'}}>
       <div className="h-full w-full flex flex-col items-center justify-center py-24 px-5">

diff --git a/apps/badass/src/pages/articles.tsx b/apps/badass/src/pages/articles.tsx
@@ -18,7 +18,9 @@ type ArticlesProps = {
   articles: SanityDocument[]
 }
 
-const Articles: React.FC<ArticlesProps> = ({articles}) => {
+const Articles: React.FC<React.PropsWithChildren<ArticlesProps>> = ({
+  articles,
+}) => {
   return (
     <Layout meta={meta} className="overflow-hidden">
       <header className="relative px-5 py-28 overflow-hidden text-white bg-[#082C1B] bg-noise">

diff --git a/apps/badass/src/pages/index.tsx b/apps/badass/src/pages/index.tsx
@@ -31,7 +31,7 @@ const LandingPage = () => {
 
 export default LandingPage
 
-const Header: React.FC<any> = ({content}) => {
+const Header: React.FC<React.PropsWithChildren<any>> = ({content}) => {
   return (
     <header className="lg:min-h-[calc(100vh-200px)] flex flex-col items-center lg:justify-center justify-start text-center px-5">
       <Image
@@ -58,7 +58,9 @@ const Header: React.FC<any> = ({content}) => {
   )
 }
 
-const SecretSauceSection: React.FC<any> = ({content}) => {
+const SecretSauceSection: React.FC<React.PropsWithChildren<any>> = ({
+  content,
+}) => {
   return (
     <section className="relative sm:pb-16 pb-8 flex flex-col items-center justify-center text-center px-5">
       <div className="relative translate-y-10">
@@ -117,7 +119,7 @@ const SecretSauceSection: React.FC<any> = ({content}) => {
   )
 }
 
-const ProjectsSection: React.FC<any> = ({content}) => {
+const ProjectsSection: React.FC<React.PropsWithChildren<any>> = ({content}) => {
   return (
     <section className="flex flex-col items-center justify-center py-16 text-center px-5">
       <div

diff --git a/apps/badass/src/templates/article-template.tsx b/apps/badass/src/templates/article-template.tsx
@@ -23,10 +23,9 @@ type ArticleTemplateProps = {
   hasSubscribed: boolean
 }
 
-const ArticleTemplate: React.FC<ArticleTemplateProps> = ({
-  article,
-  hasSubscribed,
-}) => {
+const ArticleTemplate: React.FC<
+  React.PropsWithChildren<ArticleTemplateProps>
+> = ({article, hasSubscribed}) => {
   const {title, description, body, subscribersOnly, date, cta, ogImage} =
     article
   const shortDescription =
@@ -70,7 +69,9 @@ const ArticleTemplate: React.FC<ArticleTemplateProps> = ({
 
 export default ArticleTemplate
 
-const Header: React.FC<{title: string; date: string}> = ({title, date}) => {
+const Header: React.FC<
+  React.PropsWithChildren<{title: string; date: string}>
+> = ({title, date}) => {
   return (
     <header className="flex flex-col items-center relative px-5 pt-16 pb-8 overflow-hidden text-white bg-[#082C1B] bg-noise">
       <div className="flex flex-col items-center max-w-screen-md mx-auto w-full relative z-10">
@@ -103,7 +104,9 @@ const Header: React.FC<{title: string; date: string}> = ({title, date}) => {
   )
 }
 
-const CTAContainer: React.FC = ({children}) => {
+const CTAContainer: React.FC<React.PropsWithChildren<unknown>> = ({
+  children,
+}) => {
   return (
     <section
       id="subscribe"
@@ -121,7 +124,7 @@ type GetCTAProps = {
   router: NextRouter
 }
 
-const getCTA: React.FC<GetCTAProps> = ({
+const getCTA: React.FC<React.PropsWithChildren<GetCTAProps>> = ({
   subscribersOnly,
   hasSubscribed,
   cta,
@@ -236,7 +239,7 @@ const ContinueReadingSubscribeForm = () => {
   )
 }
 
-const Share: React.FC<{title: string}> = ({title}) => {
+const Share: React.FC<React.PropsWithChildren<{title: string}>> = ({title}) => {
   const router = useRouter()
   const url = process.env.NEXT_PUBLIC_URL + router.asPath
   const className =

diff --git a/apps/compilersforhumans/package.json b/apps/compilersforhumans/package.json
@@ -54,14 +54,13 @@
     "lodash": "^4.17.21",
     "mdx-prism": "^0.3.4",
     "next": "^12.2.3",
-
     "next-sitemap": "^3.0.5",
     "next-themes": "^0.1.1",
     "pluralize": "^8.0.0",
     "query-string": "^7.1.1",
-    "react": "17.0.2",
+    "react": "18.2.0",
     "react-countdown": "^2.3.2",
-    "react-dom": "17.0.2",
+    "react-dom": "18.2.0",
     "react-markdown": "^7.1.0",
     "react-scroll": "^1.8.6",
     "react-stripe-checkout": "^2.6.3",
@@ -94,8 +93,8 @@
     "@types/node": "^17.0.0",
     "@types/nodemailer": "^6.4.4",
     "@types/pluralize": "^0.0.29",
-    "@types/react": "^17.0.42",
-    "@types/react-dom": "^17.0.17",
+    "@types/react": "^18.0.15",
+    "@types/react-dom": "^18.0.6",
     "@types/react-scroll": "^1.8.3",
     "@types/remove-markdown": "^0.3.1",
     "@types/three": "^0.141.0",

diff --git a/apps/compilersforhumans/src/components/blob.tsx b/apps/compilersforhumans/src/components/blob.tsx
@@ -93,7 +93,9 @@ const Scene = ({theme}: any) => {
   )
 }
 
-const Blob: React.FC<{className?: string}> = ({className = ''}) => {
+const Blob: React.FC<React.PropsWithChildren<{className?: string}>> = ({
+  className = '',
+}) => {
   const {resolvedTheme: theme} = useTheme()
 
   return (

diff --git a/apps/compilersforhumans/src/components/color-mode-toggle.tsx b/apps/compilersforhumans/src/components/color-mode-toggle.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
 import {useTheme} from 'next-themes'
 
-const DarkModeToggle: React.FC = () => {
+const DarkModeToggle: React.FC<React.PropsWithChildren<unknown>> = () => {
   const [mounted, setMounted] = React.useState(false)
   const {theme, setTheme} = useTheme()
   React.useEffect(() => setMounted(true), [])

diff --git a/apps/compilersforhumans/src/components/icon.tsx b/apps/compilersforhumans/src/components/icon.tsx
@@ -1,6 +1,8 @@
 import * as React from 'react'
 
-const Icon: React.FC<{className: string}> = ({className}) => {
+const Icon: React.FC<React.PropsWithChildren<{className: string}>> = ({
+  className,
+}) => {
   return (
     <svg
       className={className}

diff --git a/apps/compilersforhumans/src/components/spinner.tsx b/apps/compilersforhumans/src/components/spinner.tsx
@@ -1,10 +1,12 @@
 import * as React from 'react'
 
-const Spinner: React.FunctionComponent<{
-  className?: string
-  size?: number
-  color?: string
-}> = ({className = '', size = 6}) => (
+const Spinner: React.FunctionComponent<
+  React.PropsWithChildren<{
+    className?: string
+    size?: number
+    color?: string
+  }>
+> = ({className = '', size = 6}) => (
   <svg
     className={`animate-spin h-${size} w-${size} ${className}`}
     xmlns="http://www.w3.org/2000/svg"

diff --git a/apps/compilersforhumans/src/layouts/index.tsx b/apps/compilersforhumans/src/layouts/index.tsx
@@ -9,7 +9,7 @@ type LayoutProps = {
   className?: string
 }
 
-const Layout: FunctionComponent<LayoutProps> = ({
+const Layout: FunctionComponent<React.PropsWithChildren<LayoutProps>> = ({
   children,
   className,
   meta,

diff --git a/apps/compilersforhumans/src/pages/answer.tsx b/apps/compilersforhumans/src/pages/answer.tsx
@@ -4,7 +4,9 @@ import {QuizAnswerPage} from '@skillrecordings/quiz'
 import {QuestionSet} from '@skillrecordings/types'
 import getConfig from '@skillrecordings/quiz/dist/config'
 
-const Answer: React.FC<{questionSet: QuestionSet}> = ({questionSet}) => {
+const Answer: React.FC<React.PropsWithChildren<{questionSet: QuestionSet}>> = ({
+  questionSet,
+}) => {
   return (
     <Layout noIndex meta={{title: 'Quiz'}}>
       <div className="h-full w-full flex flex-col items-center justify-center py-24 px-5">

diff --git a/apps/compilersforhumans/src/templates/article.tsx b/apps/compilersforhumans/src/templates/article.tsx
@@ -6,7 +6,9 @@ type ArticleTemplateProps = {
   meta?: any
 }
 
-const ArticleTemplate: React.FC<ArticleTemplateProps> = ({meta, children}) => {
+const ArticleTemplate: React.FC<
+  React.PropsWithChildren<ArticleTemplateProps>
+> = ({meta, children}) => {
   const {title} = meta
 
   return (

diff --git a/apps/cssdestructured/package.json b/apps/cssdestructured/package.json
@@ -69,15 +69,14 @@
     "lodash": "^4.17.21",
     "mdx-prism": "^0.3.4",
     "next": "^12.2.3",
-
     "next-sitemap": "^3.0.5",
     "next-themes": "^0.1.1",
     "pluralize": "^8.0.0",
     "postcss": "^8.4.14",
     "query-string": "^7.1.1",
-    "react": "17.0.2",
+    "react": "18.2.0",
     "react-countdown": "^2.3.2",
-    "react-dom": "17.0.2",
+    "react-dom": "18.2.0",
     "react-hot-toast": "^2.2.0",
     "react-intersection-observer-hook": "^2.0.3",
     "react-markdown": "^7.1.0",
@@ -111,8 +110,8 @@
     "@types/node": "^17.0.0",
     "@types/nodemailer": "^6.4.4",
     "@types/pluralize": "^0.0.29",
-    "@types/react": "^17.0.42",
-    "@types/react-dom": "^17.0.17",
+    "@types/react": "^18.0.15",
+    "@types/react-dom": "^18.0.6",
     "@types/react-scroll": "^1.8.3",
     "@types/react-syntax-highlighter": "^13.5.2",
     "assert": "^2.0.0",

diff --git a/apps/cssdestructured/src/components/app/layout.tsx b/apps/cssdestructured/src/components/app/layout.tsx
@@ -13,7 +13,7 @@ type LayoutProps = {
   nav?: React.ReactElement | null
 }
 
-const Layout: FunctionComponent<LayoutProps> = ({
+const Layout: FunctionComponent<React.PropsWithChildren<LayoutProps>> = ({
   children,
   className,
   meta,