build(editor/website-example): typescript 4.7 introduced a bug which …

…caused the build to silently fail

This caused that Babel transpiled the code but no type checking ever failed, which meant we were basically just writing JavaScript with TypeScript syntax

ref microsoft/TypeScript#53287

apps/editor/src/app/atoms/comment/commentStateDropdown.tsx

@@ -5,7 +5,6 @@ import {useTranslation} from 'react-i18next'
 import {MdArrowDropDown} from 'react-icons/md'
 import {
   Badge,
-  Button,
   ButtonGroup,
   Dropdown,
   IconButton as RIconButton,
@@ -106,14 +105,14 @@ export function CommentStateDropdown({comment, size, onStateChanged}: CommentSta
       )}
       <div>
         <ButtonGroup>
-          <Button
+          <IconButton
             appearance="ghost"
             icon={<MdArrowDropDown />}
             placement="left"
             color={mapCommentStateToColor(comment.state)}
             size={size || 'md'}>
             {t(humanReadableCommentState(comment.state))}
-          </Button>
+          </IconButton>
           <Whisper placement="bottomEnd" trigger="click" speaker={renderMenu}>
             <IconButton
               size={size || 'md'}

apps/editor/src/app/atoms/listInput.tsx

@@ -57,11 +57,11 @@ export interface ListItemProps<T = any> {
   readonly children: (props: FieldProps<T>) => JSX.Element
 }
 
-const DragHandle = SortableHandle(({disabled}: {disabled?: boolean}) => (
+const DragHandle = SortableHandle<{disabled?: boolean}>(({disabled}: {disabled?: boolean}) => (
   <IconButton icon={<MdDragIndicator />} disabled={disabled} />
 ))
 
-const ListItem = SortableElement(
+const ListItem = SortableElement<ListItemProps>(
   ({value, itemIndex, itemDisabled, onChange, onRemove, children}: ListItemProps) => {
     function handleValueChange(fieldValue: React.SetStateAction<any>) {
       onChange(itemIndex, value => ({
@@ -92,7 +92,7 @@ const ListItem = SortableElement(
   }
 )
 
-const SortableList = SortableContainer(
+const SortableList = SortableContainer<ListFieldProps>(
   ({value, defaultValue, disabled, children, onChange}: ListFieldProps) => {
     function handleItemChange(itemIndex: number, itemValue: React.SetStateAction<ListValue>) {
       onChange(value =>

apps/editor/src/app/atoms/poll/pollAnswers.tsx

@@ -76,7 +76,7 @@ function getTotalExternalVoteSourcesByAnswerId(
   return (
     pollExternalVotes
       .filter(externalVote => externalVote.answerId === answerId)
-      .reduce((total, externalVote) => total + externalVote.amount, 0) || 0
+      .reduce((total, externalVote) => total + (externalVote.amount ?? 0), 0) || 0
   )
 }
 

apps/editor/src/app/atoms/poll/pollExternalVotes.tsx

@@ -23,6 +23,7 @@ import {
   toaster
 } from 'rsuite'
 import FormControl from 'rsuite/FormControl'
+import {RowDataType} from 'rsuite-table'
 
 const Row = styled(RRow)`
   margin-top: 20px;
@@ -81,15 +82,15 @@ export function ExternalVoteTable({
       <Table.Column key={answer.id} width={150}>
         <Table.HeaderCell>{answer.answer}</Table.HeaderCell>
         <Table.Cell>
-          {(externalVoteSource: PollExternalVoteSource) => (
+          {(externalVoteSource: RowDataType<PollExternalVoteSource>) => (
             <InputNumber
               value={
                 externalVoteSource.voteAmounts?.find(
                   (externalVote: PollExternalVote) => externalVote.answerId === answer.id
                 )?.amount || 0
               }
               onChange={(newValue: string | number) => {
-                changeSource(answer, externalVoteSource, newValue)
+                changeSource(answer, externalVoteSource as PollExternalVoteSource, newValue)
               }}
             />
           )}
@@ -110,21 +111,25 @@ export function ExternalVoteTable({
       <Table.Column>
         <Table.HeaderCell>{t('delete')}</Table.HeaderCell>
         <Table.Cell>
-          {(voteSource: PollExternalVoteSource) => (
-            <IconButton icon={<MdDelete />} onClick={() => onClickDeleteBtn(voteSource)} />
+          {(voteSource: RowDataType<PollExternalVoteSource>) => (
+            <IconButton
+              icon={<MdDelete />}
+              onClick={() => onClickDeleteBtn(voteSource as PollExternalVoteSource)}
+            />
           )}
         </Table.Cell>
       </Table.Column>
     </Table>
   )
 }
 
-interface addSourceProps {
+interface AddSourceProps {
   poll: FullPoll | undefined
   setLoading(loading: boolean): void
   onPollChange(poll: FullPoll): void
 }
-export function AddSource({poll, setLoading, onPollChange}: addSourceProps) {
+
+export function AddSource({poll, setLoading, onPollChange}: AddSourceProps) {
   const {t} = useTranslation()
   const [newSource, setNewSource] = useState<string | undefined>(undefined)
 

apps/editor/src/app/blocks/teaserGridBlock.tsx

@@ -89,7 +89,7 @@ const Status = styled.div`
   flex-shrink: 0;
 `
 
-const GridItem = SortableElement((props: TeaserBlockProps) => {
+const GridItem = SortableElement<TeaserBlockProps>((props: TeaserBlockProps) => {
   return <TeaserBlock {...props} />
 })
 
@@ -98,7 +98,7 @@ interface GridProps {
   children?: ReactNode
 }
 
-const Grid = SortableContainer(({children, numColumns}: GridProps) => {
+const Grid = SortableContainer<GridProps>(({children, numColumns}: GridProps) => {
   return <SortableContainerComponent numColumns={numColumns}>{children}</SortableContainerComponent>
 })
 

apps/editor/src/app/blocks/teaserGridFlexBlock.tsx

@@ -4,8 +4,8 @@ import 'react-resizable/css/styles.css'
 import styled from '@emotion/styled'
 import i18next from 'i18next'
 import nanoid from 'nanoid'
-import {useEffect, useState} from 'react'
-import GridLayout from 'react-grid-layout'
+import {ComponentType, PropsWithChildren, useEffect, useState} from 'react'
+import GridLayoutWithoutChildren, {ReactGridLayoutProps} from 'react-grid-layout'
 import {useTranslation} from 'react-i18next'
 import {MdAddBox, MdDelete, MdEdit, MdLock, MdLockOpen} from 'react-icons/md'
 import {
@@ -23,6 +23,10 @@ import {TeaserSelectAndEditPanel} from '../panel/teaserSelectAndEditPanel'
 import {ContentForTeaser, IconButton, IconWrapper, Teaser} from './teaserGridBlock'
 import {FlexAlignment, FlexTeaser, Teaser as TeaserType, TeaserGridFlexBlockValue} from './types'
 
+// Fixes that pre React 18, all components had the children prop.
+// With React 18 this is not the case anymore, so some types are wrong
+const GridLayout: ComponentType<PropsWithChildren<ReactGridLayoutProps>> = GridLayoutWithoutChildren
+
 const ButtonToolbar = styled(RButtonToolbar)`
   top: 0;
   left: 0;

apps/editor/src/app/panel/embedEditPanel.tsx

@@ -72,7 +72,7 @@ export function EmbedEditPanel({value, onClose, onConfirm}: EmbedEditPanel) {
       if (input) {
         const parser = new DOMParser()
         const element = parser.parseFromString(input, 'text/html')
-        const [iframe] = element.getElementsByTagName('iframe')
+        const iframe = element.getElementsByTagName('iframe')[0]
 
         if (iframe) {
           const soundCloudMatch = iframe.src.match(/api.soundcloud.com\/tracks\/([0-9]+)/)

apps/editor/src/app/panel/navigationEditPanel.tsx

@@ -296,8 +296,9 @@ function NavigationEditPanel({id, onClose, onSave}: NavigationEditPanelProps) {
                   value={value.type}
                   data={linkTypes}
                   onChange={type => {
-                    if (!type) return
-                    onChange({...value, type})
+                    if (type) {
+                      onChange({...value, type: type as string})
+                    }
                   }}
                 />
                 {value.type === 'PageNavigationLink' || value.type === 'ArticleNavigationLink' ? (

apps/editor/src/app/panel/selectCommentsPanel.tsx

@@ -184,7 +184,7 @@ export function SelectCommentPanel({
             <Table.Column width={36}>
               <Table.HeaderCell>{}</Table.HeaderCell>
               <TableCellNoPadding>
-                {(rowData: FullCommentFragment) => (
+                {(rowData: RowDataType<FullCommentFragment>) => (
                   <CheckboxWrapper>
                     <Checkbox
                       defaultChecked={commentFilter?.includes(rowData.id) ?? false}
@@ -236,7 +236,7 @@ export function SelectCommentPanel({
           <Table.Column width={150} align="center" fixed="right">
             <Table.HeaderCell>{t('comments.overview.edit')}</Table.HeaderCell>
             <PermissionControlWrapper>
-              {(rowData: FullCommentFragment) => (
+              {(rowData: RowDataType<FullCommentFragment>) => (
                 <PermissionControl qualifyingPermissions={['CAN_UPDATE_COMMENTS']}>
                   <IconButtonTooltip caption={t('comments.overview.edit')}>
                     <Link target="_blank" to={`/comments/edit/${rowData.id}`}>

apps/editor/src/app/panel/selectPollPanel.tsx

@@ -89,14 +89,14 @@ export function SelectPollPanel({selectedPoll, onClose, onSelect}: SelectPollPan
           <Table.Column width={250} resizable>
             <Table.HeaderCell>{t('pollList.opensAt')}</Table.HeaderCell>
             <Table.Cell>
-              {(rowData: RowDataType<Poll>) => <PollOpensAtView poll={rowData} />}
+              {(rowData: RowDataType<Poll>) => <PollOpensAtView poll={rowData as Poll} />}
             </Table.Cell>
           </Table.Column>
 
           <Table.Column width={250} resizable>
             <Table.HeaderCell>{t('pollList.closedAt')}</Table.HeaderCell>
             <Table.Cell>
-              {(rowData: RowDataType<Poll>) => <PollClosedAtView poll={rowData} />}
+              {(rowData: RowDataType<Poll>) => <PollClosedAtView poll={rowData as Poll} />}
             </Table.Cell>
           </Table.Column>
 

apps/editor/src/app/panel/teaserSelectPanel.tsx

@@ -3,6 +3,7 @@ import {
   ArticleFilter,
   ArticleSort,
   PageFilter,
+  PeerArticle,
   SortOrder,
   TeaserStyle,
   useArticleListQuery,
@@ -43,7 +44,6 @@ import {generateID} from '../utility'
 import {ImageEditPanel} from './imageEditPanel'
 import {ImageSelectPanel} from './imageSelectPanel'
 import {previewForTeaser, TeaserMetadataProperty} from './teaserEditPanel'
-import {PeerArticle} from '@wepublish/api'
 
 const List = styled(RList)`
   box-shadow: none;
@@ -167,20 +167,25 @@ export function TeaserSelectPanel({onClose, onSelect}: TeaserSelectPanelProps) {
         skip: skipPeer * take
       },
       updateQuery: (prev, {fetchMoreResult}) => {
-        if (!fetchMoreResult?.peerArticles?.nodes) return {peerArticles: undefined}
+        if (!fetchMoreResult?.peerArticles?.nodes) {
+          return fetchMoreResult
+        }
 
         return {
           peerArticles: {
             ...fetchMoreResult.peerArticles,
-            nodes: [...fetchMoreResult.peerArticles.nodes]
+            nodes: [...(fetchMoreResult.peerArticles.nodes as PeerArticle[])]
           }
         }
       }
     })
   }
 
   useEffect(() => {
-    setPeerArticles([...peerArticles, ...(peerArticleListData?.peerArticles?.nodes || [])])
+    setPeerArticles([
+      ...peerArticles,
+      ...((peerArticleListData?.peerArticles?.nodes as PeerArticle[]) || [])
+    ])
   }, [peerArticleListData?.peerArticles])
 
   /**

apps/editor/src/app/routes/commentRatingEditView.tsx

@@ -241,34 +241,38 @@ type PollAnswersProps = {
 export function RatingAnswers({answers, onDeleteAnswer, onUpdateAnswer}: PollAnswersProps) {
   const {t} = useTranslation()
 
-  return answers?.map(answer => (
-    <AnswerGrid key={answer.id}>
-      <Form.Control
-        name={`answer-${answer.id}`}
-        placeholder={t('comments.ratingEdit.placeholder')}
-        value={answer.answer || ''}
-        onChange={(value: string) => onUpdateAnswer(answer.id, value, answer.type)}
-      />
+  return (
+    <>
+      {answers?.map(answer => (
+        <AnswerGrid key={answer.id}>
+          <Form.Control
+            name={`answer-${answer.id}`}
+            placeholder={t('comments.ratingEdit.placeholder')}
+            value={answer.answer || ''}
+            onChange={(value: string) => onUpdateAnswer(answer.id, value, answer.type)}
+          />
 
-      <SelectPicker
-        cleanable={false}
-        value={answer.type}
-        onChange={(value: RatingSystemType) => onUpdateAnswer(answer.id, answer.answer, value)}
-        data={Object.entries(RatingSystemType).map(([label, value]) => ({label, value}))}
-      />
+          <SelectPicker
+            cleanable={false}
+            value={answer.type}
+            onChange={(value: RatingSystemType) => onUpdateAnswer(answer.id, answer.answer, value)}
+            data={Object.entries(RatingSystemType).map(([label, value]) => ({label, value}))}
+          />
 
-      <IconButtonTooltip caption={t('delete')}>
-        <RIconButton
-          icon={<MdDelete />}
-          circle
-          size="sm"
-          appearance="ghost"
-          color="red"
-          onClick={() => onDeleteAnswer(answer.id)}
-        />
-      </IconButtonTooltip>
-    </AnswerGrid>
-  ))
+          <IconButtonTooltip caption={t('delete')}>
+            <RIconButton
+              icon={<MdDelete />}
+              circle
+              size="sm"
+              appearance="ghost"
+              color="red"
+              onClick={() => onDeleteAnswer(answer.id)}
+            />
+          </IconButtonTooltip>
+        </AnswerGrid>
+      ))}
+    </>
+  )
 }
 
 const CheckedPermissionComponent = createCheckedPermissionComponent([