chore(docs): add strict mode to website (#1911)

Author: gpbl

website/examples/date-picker-dialog.tsx

@@ -2,7 +2,7 @@ import React, { ChangeEventHandler, useRef, useState } from 'react';
 
 import { format, isValid, parse } from 'date-fns';
 import FocusTrap from 'focus-trap-react';
-import { DayPicker } from 'react-day-picker';
+import { DayPicker, SelectSingleEventHandler } from 'react-day-picker';
 import { usePopper } from 'react-popper';
 
 export default function DatePickerDialog() {
@@ -39,7 +39,7 @@ export default function DatePickerDialog() {
     setIsPopperOpen(true);
   };
 
-  const handleDaySelect = (date: Date) => {
+  const handleDaySelect: SelectSingleEventHandler = (date) => {
     setSelected(date);
     if (date) {
       setInputValue(format(date, 'y-MM-dd'));
@@ -76,7 +76,7 @@ export default function DatePickerDialog() {
             allowOutsideClick: true,
             clickOutsideDeactivates: true,
             onDeactivate: closePopper,
-            fallbackFocus: buttonRef.current
+            fallbackFocus: buttonRef.current || undefined
           }}
         >
           <div

website/examples/testcase-1567.tsx

@@ -8,7 +8,7 @@ import { DateRange, DayPicker } from 'react-day-picker';
  * @see https://github.com/gpbl/react-day-picker/issues/1567
  */
 export default function App() {
-  const [selected, setSelected] = useState<DateRange>({
+  const [selected, setSelected] = useState<DateRange | undefined>({
     from: new Date(2022, 8, 25),
     to: new Date(2022, 9, 1)
   });

website/src/pages/render.tsx

@@ -26,7 +26,7 @@ export default function Render(): JSX.Element {
                 display: 'inline-block',
                 padding: '1em'
               }}
-              name={name}
+              name={name || 'date-picker'}
             />
           );
         }}

website/src/theme/CodeBlock/index.tsx

@@ -33,7 +33,7 @@ export default function CodeBlockWithSandpack(props: {
   const fileName = props.children.replace(/\n*/gi, '');
   const src = require(`!!raw-loader!@site/examples/${fileName}`)
     .default as string;
-  const dependencies: Record<string, string> = props.dependencies
+  const dependencies: Record<string, string> | undefined = props.dependencies
     ?.split(',')
     .reduce(
       (result, dependency) => ({ ...result, [dependency]: 'latest' }),
@@ -52,7 +52,7 @@ export default function CodeBlockWithSandpack(props: {
             title="Open the rendered example in a new window."
             onClick={() => {
               const win = window.open(`/render?example=${fileName}`, '_blank');
-              win.focus();
+              win?.focus();
             }}
           >
             New Window ↗

website/test-integration/examples/spanish-week-starts-on.test.tsx

@@ -13,7 +13,7 @@ freezeBeforeAll(today);
 beforeEach(() => render(<Example />));
 
 test('should have "Domingo" as first day of week', () => {
-  expect(getMonthGrid().firstChild.firstChild.firstChild).toHaveAccessibleName(
-    'domingo'
-  );
+  expect(
+    getMonthGrid().firstChild?.firstChild?.firstChild
+  ).toHaveAccessibleName('domingo');
 });

website/tsconfig.json

@@ -1,6 +1,7 @@
 {
   "extends": "@tsconfig/docusaurus/tsconfig.json",
   "compilerOptions": {
+    "strict": true,
     "jsx": "react",
     "baseUrl": ".",
     "lib": ["es2019", "DOM"],