From 294523f6dbfcfb725abf8d1994162e82a2d080da Mon Sep 17 00:00:00 2001 From: Dmitry Pokidov <124110+dooman87@users.noreply.github.com> Date: Tue, 12 Mar 2024 12:16:12 +1100 Subject: [PATCH 01/48] Nextjs 14 and React 18 --- .eslintrc | 3 +- components/ActionBar/ActionBar.tsx | 17 +- components/actionButton.tsx | 7 +- components/global/Alert/Alert.styled.tsx | 1 + components/global/Button/Button.styled.ts | 3 +- components/global/Button/Button.tsx | 7 +- components/global/Header/Header.styled.tsx | 3 +- components/global/Header/Header.tsx | 9 +- components/global/Nav/Nav.styled.tsx | 3 +- components/global/Nav/Nav.tsx | 13 +- .../global/Nav/components/NavToggle.tsx | 4 +- components/sessionDetails.tsx | 8 +- config/sponsors.ts | 2 +- package-lock.json | 4428 +++++++++++++---- package.json | 15 +- pages/conference-day.tsx | 6 +- staticwebapp.config.json | 5 + 17 files changed, 3389 insertions(+), 1145 deletions(-) create mode 100644 staticwebapp.config.json diff --git a/.eslintrc b/.eslintrc index efb82d5b..17a11a14 100644 --- a/.eslintrc +++ b/.eslintrc @@ -24,7 +24,8 @@ "@typescript-eslint/array-type": [1, { "default": "array-simple" }], "@typescript-eslint/no-unused-vars": 0, "no-console": "warn", - "@typescript-eslint/explicit-module-boundary-types": "off" + "@typescript-eslint/explicit-module-boundary-types": "off", + "@typescript-eslint/ban-ts-comment": "off" }, "overrides": [ { diff --git a/components/ActionBar/ActionBar.tsx b/components/ActionBar/ActionBar.tsx index 66e2a41b..97e77acb 100644 --- a/components/ActionBar/ActionBar.tsx +++ b/components/ActionBar/ActionBar.tsx @@ -1,5 +1,4 @@ import React from 'react' -import Link from 'next/link' import { ButtonAnchor } from 'components/global/Button/Button' import { StyledActionBarContainer } from './ActionBar.styled' import getConferenceActions from 'config/actions' @@ -15,20 +14,16 @@ export const ActionBar = (): JSX.Element => { diff --git a/components/actionButton.tsx b/components/actionButton.tsx index 7081aecc..f74ec8ec 100644 --- a/components/actionButton.tsx +++ b/components/actionButton.tsx @@ -1,4 +1,3 @@ -import Link from 'next/link' import React from 'react' import { Action } from 'config/types' import { ButtonAnchor } from 'components/global/Button/Button' @@ -8,8 +7,8 @@ interface ActionButtonProps { } export const ActionButton = ({ action }: ActionButtonProps) => ( - - {action.Title} - + + {action.Title} + ) ActionButton.displayName = 'ActionButton' diff --git a/components/global/Alert/Alert.styled.tsx b/components/global/Alert/Alert.styled.tsx index 6606db87..bc55731b 100644 --- a/components/global/Alert/Alert.styled.tsx +++ b/components/global/Alert/Alert.styled.tsx @@ -38,6 +38,7 @@ function stylesFromKind(kind: StyledAlertProps['kind'], theme: DDDTheme) { } } +// @ts-ignore export const StyledAlert = styled(Alert, { shouldForwardProp: (prop) => prop !== 'kind', })(({ kind, theme }) => ({ diff --git a/components/global/Button/Button.styled.ts b/components/global/Button/Button.styled.ts index 3885e1e6..2eeb3228 100644 --- a/components/global/Button/Button.styled.ts +++ b/components/global/Button/Button.styled.ts @@ -4,6 +4,7 @@ import { calcRem } from 'components/utils/styles/calcRem' import { DDDTheme } from 'components/utils/styles/theme' import { conditionalStyles } from 'components/utils/styles/conditionalStyles' import { ButtonKinds, Size } from './Button' +import Link from 'next/link' function shouldStyledButtonForwardProps(prop: string) { return !['size', 'kind'].includes(prop) @@ -63,7 +64,7 @@ interface StyledButtonAnchorProps { size?: Size } -export const StyledButtonAnchor = styled('a', { +export const StyledButtonAnchor = styled(Link, { shouldForwardProp: shouldStyledButtonForwardProps, })(({ theme, kind, size }) => ({ display: 'inline-flex', diff --git a/components/global/Button/Button.tsx b/components/global/Button/Button.tsx index 0d0b2949..f8f66e96 100644 --- a/components/global/Button/Button.tsx +++ b/components/global/Button/Button.tsx @@ -13,7 +13,8 @@ export interface ButtonProps export const Button = (props: ButtonProps) => { const Component = props.kind !== 'link' ? StyledButton : StyledLinkButton return ( - + // @ts-ignore + {props.children} ) @@ -25,8 +26,8 @@ interface ButtonAnchorProps size?: Size } -export const ButtonAnchor = ({ children, kind = 'secondary', size = 'normal', ...props }: ButtonAnchorProps) => ( - +export const ButtonAnchor = ({ children, kind = 'secondary', size = 'normal', href, ...props }: ButtonAnchorProps) => ( + {children} ) diff --git a/components/global/Header/Header.styled.tsx b/components/global/Header/Header.styled.tsx index 6dbf43bc..c7b19e8d 100644 --- a/components/global/Header/Header.styled.tsx +++ b/components/global/Header/Header.styled.tsx @@ -2,6 +2,7 @@ import styled from '@emotion/styled' import { calcRem } from 'components/utils/styles/calcRem' import { breakpoint } from 'components/utils/styles/breakpoints' import { zIndex } from 'components/utils/styles/zindex' +import Link from 'next/link' export const StyledHeader = styled('header')(({ theme }) => ({ position: 'sticky', @@ -15,7 +16,7 @@ export const StyledHeader = styled('header')(({ theme }) => ({ zIndex: zIndex.stickyHeader, })) -export const StyledAnchor = styled('a')({ +export const StyledAnchor = styled(Link)({ display: 'flex', margin: 0, marginRight: 'auto', diff --git a/components/global/Header/Header.tsx b/components/global/Header/Header.tsx index 0305e49f..cc8722d2 100644 --- a/components/global/Header/Header.tsx +++ b/components/global/Header/Header.tsx @@ -1,6 +1,5 @@ import React from 'react' import { StyledHeader, StyledAnchor } from './Header.styled' -import Link from 'next/link' import { DDDLogo } from 'components/global/Icons/DDDLogo' import { HeaderSocials } from './components/HeaderSocials' import { NavToggle } from 'components/global/Nav/components/NavToggle' @@ -12,11 +11,9 @@ export const Header = (): JSX.Element => { return ( - - - - - + + + ) diff --git a/components/global/Nav/Nav.styled.tsx b/components/global/Nav/Nav.styled.tsx index 0164f4a1..06e723f4 100644 --- a/components/global/Nav/Nav.styled.tsx +++ b/components/global/Nav/Nav.styled.tsx @@ -3,6 +3,7 @@ import styled from '@emotion/styled' import { zIndex } from 'components/utils/styles/zindex' import { breakpoint } from 'components/utils/styles/breakpoints' import { NavStatus } from './Nav' +import Link from 'next/link' interface StyleNavProps { status: NavStatus @@ -36,7 +37,7 @@ interface StyledNavLinkProps { active?: boolean } -export const StyledNavLink = styled('a')(({ theme, active }) => ({ +export const StyledNavLink = styled(Link)(({ theme, active }) => ({ display: 'flex', alignItems: 'center', padding: calcRem(theme.metrics.lg, theme.metrics.lg), diff --git a/components/global/Nav/Nav.tsx b/components/global/Nav/Nav.tsx index bb374628..df137378 100644 --- a/components/global/Nav/Nav.tsx +++ b/components/global/Nav/Nav.tsx @@ -1,6 +1,5 @@ import React from 'react' import { useRouter } from 'next/router' -import Link from 'next/link' import { MenuItem } from 'config/types' import { StyledNav, StyledNavLink, StyledNavList } from './Nav.styled' import { useNavigationState, useNavigationDispatch } from './Nav.context' @@ -94,8 +93,10 @@ export const Nav = ({ menu }: NavProps) => { } if (expanded) { - document.addEventListener('click', documentClickHandler) - document.addEventListener('touchstart', documentClickHandler) + window.setTimeout(() => { + document.addEventListener('click', documentClickHandler) + document.addEventListener('touchstart', documentClickHandler) + }, 0) } return () => { @@ -116,9 +117,9 @@ export const Nav = ({ menu }: NavProps) => { {item.name} ) : ( - - {item.name} - + + {item.name} + )} ))} diff --git a/components/global/Nav/components/NavToggle.tsx b/components/global/Nav/components/NavToggle.tsx index 6925a47b..8d584542 100644 --- a/components/global/Nav/components/NavToggle.tsx +++ b/components/global/Nav/components/NavToggle.tsx @@ -3,11 +3,11 @@ import { StyledToggle } from './NavToggle.styled' import { useNavigationState, useNavigationDispatch } from '../Nav.context' export const NavToggle = () => { - const { id, expanded } = useNavigationState() + const { expanded } = useNavigationState() const dispatch = useNavigationDispatch() return ( - dispatch('toggle')} aria-controls={id}> + dispatch('toggle')} aria-controls="nav-id">