migrate example to Typescript

packages/docs/.storybook/preview.js → packages/docs/.storybook/preview.ts

@@ -1,13 +1,11 @@
+import { Preview } from '@storybook/react'
 import { initialize, mswLoader } from 'msw-storybook-addon';
 
 import '../src/styles.css';
 
 initialize();
 
-/**
- * @type {import('@storybook/react').Preview}
- */
-const preview = {
+const preview: Preview = {
   parameters: {
     actions: { argTypesRegex: '^on[A-Z].*' },
   },

packages/docs/package.json

@@ -54,6 +54,7 @@
     "@testing-library/user-event": "^14.5.1",
     "@types/react": "^18.0.27",
     "@types/react-dom": "^18.0.10",
+    "@types/react-router-dom": "^5.3.3",
     "@vitejs/plugin-react": "^3.1.0",
     "chromatic": "^11.0.3",
     "jsdom": "^23.0.0",

packages/docs/src/components/FilmCard.jsx → packages/docs/src/components/FilmCard.tsx

@@ -1,4 +1,6 @@
-export function FilmCard({ film }) {
+export function FilmCard({
+  film
+}: any) {
   return (
     <article className="film-card">
       <h4 className="film-title">{film.title}</h4>

packages/docs/src/demos/apollo/App.test.jsx → packages/docs/src/demos/apollo/App.test.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { render, screen } from '@testing-library/react'
 import { composeStories } from '@storybook/react'
-import { vi } from 'vitest'
+import { vi, afterAll, it, expect } from 'vitest'
 
 import { getServer } from '../../test-utils'
 import * as stories from './App.stories'

packages/docs/src/demos/apollo/App.jsx → packages/docs/src/demos/apollo/App.tsx

@@ -36,9 +36,7 @@ export function App() {
 
   return (
     <div className="films-grid">
-      {films.map((film) => (
-        <FilmCard key={film.episode_id} film={film} />
-      ))}
+      {films.map((film: any) => <FilmCard key={film.episode_id} film={film} />)}
     </div>
   );
 }

packages/docs/src/demos/fetch/App.test.jsx → packages/docs/src/demos/axios/App.test.tsx

@@ -1,6 +1,7 @@
 import React from 'react'
-import { composeStories } from '@storybook/react'
 import { render, screen } from '@testing-library/react'
+import { composeStories } from '@storybook/react'
+import { it, expect } from 'vitest'
 
 import { getServer } from '../../test-utils'
 import * as stories from './App.stories'

packages/docs/src/demos/axios/App.jsx → packages/docs/src/demos/axios/App.tsx

@@ -40,7 +40,7 @@ export function App() {
 
   return (
     <div className="films-grid">
-      {films.map((film) => (
+      {films.map((film: any) => (
         <FilmCard key={film.episode_id} film={film} />
       ))}
     </div>

packages/docs/src/demos/fetch/AddonOnNode.test.jsx → packages/docs/src/demos/fetch/AddonOnNode.test.tsx

@@ -3,10 +3,11 @@
  */
 import { render, screen } from '@testing-library/react'
 import { composeStories, setProjectAnnotations } from '@storybook/react'
+import { describe, afterAll, it, expect } from 'vitest'
 
 import { getWorker, applyRequestHandlers } from 'msw-storybook-addon'
 import * as stories from './App.stories'
-import *  as projectAnnotations from '../../../.storybook/preview'
+import projectAnnotations from '../../../.storybook/preview'
 
 setProjectAnnotations(projectAnnotations)
 
@@ -15,6 +16,7 @@ const { MockedSuccess, MockedError } = composeStories(stories)
 // Useful in scenarios where the addon runs on node, such as with portable stories
 describe('Running msw-addon on node', () => {
   afterAll(() => {
+    // @ts-expect-error TS(2339): Property 'close' does not exist on type 'SetupWork... Remove this comment to see the full error message
     getWorker().close()
   })
 

packages/docs/src/demos/axios/App.test.jsx → packages/docs/src/demos/fetch/App.test.tsx

@@ -1,6 +1,7 @@
 import React from 'react'
-import { render, screen } from '@testing-library/react'
 import { composeStories } from '@storybook/react'
+import { render, screen } from '@testing-library/react'
+import { it, expect } from 'vitest'
 
 import { getServer } from '../../test-utils'
 import * as stories from './App.stories'

packages/docs/src/demos/fetch/App.jsx → packages/docs/src/demos/fetch/App.tsx

@@ -45,7 +45,7 @@ export function App() {
 
   return (
     <div className="films-grid">
-      {films.map((film) => (
+      {films.map((film: any) => (
         <FilmCard key={film.episode_id} film={film} />
       ))}
     </div>

packages/docs/src/demos/react-query/App.test.jsx → packages/docs/src/demos/react-query/App.test.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { render, screen } from '@testing-library/react'
 import { composeStories } from '@storybook/react'
-import { vi } from 'vitest'
+import { vi, afterAll, it, expect } from 'vitest'
 
 import { getServer } from '../../test-utils'
 import * as stories from './App.stories'

packages/docs/src/demos/react-query/App.jsx → packages/docs/src/demos/react-query/App.tsx

@@ -37,9 +37,7 @@ export function App() {
 
   return (
     <div className="films-grid">
-      {films.map((film) => (
-        <FilmCard key={film.episode_id} film={film} />
-      ))}
+      {films.map((film: any) => <FilmCard key={film.episode_id} film={film} />)}
     </div>
   );
 }

packages/docs/src/demos/react-router-react-query/pages/character/Character.jsx → packages/docs/src/demos/react-router-react-query/pages/character/Character.tsx

@@ -4,7 +4,7 @@ import { useQuery } from 'react-query';
 import { fetch } from '../../utils';
 
 export default function Character() {
-  const { characterId } = useParams();
+  const { characterId } = useParams<any>();
   const { status, data } = useQuery(`character-${characterId}`, () =>
     fetch(`https://swapi.dev/api/people/${characterId}/`),
   );
@@ -15,10 +15,12 @@ export default function Character() {
   const homeworldUrlParts = data.homeworld.split('/').filter(Boolean);
   const homeworldId = homeworldUrlParts[homeworldUrlParts.length - 1];
 
+  // @ts-expect-error TS(2367): This condition will always return 'true' since the... Remove this comment to see the full error message
   if (status !== 'success' && status !== 'error') {
     return null;
   }
 
+  // @ts-expect-error TS(2367): This condition will always return 'false' since th... Remove this comment to see the full error message
   if (status === 'error') {
     return `error fetching id: ${characterId}`;
   }
@@ -64,16 +66,17 @@ export default function Character() {
       </table>
       <br />
       <h3>Films</h3>
-      {data.films.map((film) => {
+      {data.films.map((film: any) => {
         const filmUrlParts = film.split('/').filter(Boolean);
         const filmId = filmUrlParts[filmUrlParts.length - 1];
+        // @ts-expect-error TS(2786): 'Film' cannot be used as a JSX component.
         return <Film id={filmId} key={`Film-${filmId}`} />;
       })}
     </div>
   );
 }
 
-function Film(props) {
+function Film(props: any) {
   const { id } = props;
   const { data, status } = useQuery(`film-${id}`, () =>
     fetch(`https://swapi.dev/api/films/${id}/`),
@@ -98,7 +101,7 @@ function Film(props) {
   );
 }
 
-function Homeworld(props) {
+function Homeworld(props: any) {
   const { id } = props;
   const { data, status } = useQuery(`homeworld-${id}`, () =>
     fetch(`https://swapi.dev/api/planets/${id}/`),

packages/docs/src/demos/react-router-react-query/pages/characters/Characters.jsx → packages/docs/src/demos/react-router-react-query/pages/characters/Characters.tsx

@@ -14,7 +14,7 @@ export default function Characters() {
   return (
     <div>
       <h2>Characters</h2>
-      {data.results.map((person) => {
+      {data.results.map((person: any) => {
         const personUrlParts = person.url.split('/').filter(Boolean);
         const personId = personUrlParts[personUrlParts.length - 1];
         return (

packages/docs/src/demos/react-router-react-query/pages/film/Film.jsx → packages/docs/src/demos/react-router-react-query/pages/film/Film.tsx

@@ -4,7 +4,7 @@ import { useQuery } from 'react-query';
 import { fetch } from '../../utils';
 
 export default function Film() {
-  const { filmId } = useParams();
+  const { filmId } = useParams<any>();
   const { data, status } = useQuery(`film-${filmId}`, () =>
     fetch(`https://swapi.dev/api/films/${filmId}/`),
   );
@@ -19,7 +19,7 @@ export default function Film() {
       <p>{data.opening_crawl}</p>
       <br />
       <h3>Characters</h3>
-      {data.characters.map((character) => {
+      {data.characters.map((character: any) => {
         const characterUrlParts = character.split('/').filter(Boolean);
         const characterId = characterUrlParts[characterUrlParts.length - 1];
         return <Character id={characterId} key={characterId} />;
@@ -28,7 +28,7 @@ export default function Film() {
   );
 }
 
-function Character(props) {
+function Character(props: any) {
   const { id } = props;
   const { data, status } = useQuery(`character-${id}`, () =>
     fetch(`https://swapi.dev/api/people/${props.id}/`),

packages/docs/src/demos/react-router-react-query/pages/films/Films.jsx → packages/docs/src/demos/react-router-react-query/pages/films/Films.tsx

@@ -16,7 +16,7 @@ export default function Films() {
   return (
     <div>
       <h2>Films</h2>
-      {data.results.map((film) => {
+      {data.results.map((film: any) => {
         const filmUrlParts = film.url.split('/').filter(Boolean);
         const filmId = filmUrlParts[filmUrlParts.length - 1];
         return (

packages/docs/src/demos/react-router-react-query/utils.ts

@@ -0,0 +1,8 @@
+export async function fetch(...args: any[]) {
+  // @ts-expect-error TS(2556): A spread argument must either have a tuple type or... Remove this comment to see the full error message
+  const res = await window.fetch(...args);
+  if (!res.ok) {
+    throw new Error(res.statusText);
+  }
+  return res.json();
+}

packages/docs/src/demos/urql/App.test.jsx → packages/docs/src/demos/urql/App.test.tsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import { render, screen } from '@testing-library/react'
 import { composeStories } from '@storybook/react'
+import { it, expect } from 'vitest'
 
 import { getServer } from '../../test-utils'
 import * as stories from './App.stories'

packages/docs/src/demos/urql/App.jsx → packages/docs/src/demos/urql/App.tsx

@@ -39,9 +39,7 @@ export function App() {
 
   return (
     <div className="films-grid">
-      {films.map((film) => (
-        <FilmCard key={film.episode_id} film={film} />
-      ))}
+      {films.map((film: any) => <FilmCard key={film.episode_id} film={film} />)}
     </div>
   );
 }

packages/docs/src/setupTests.js → packages/docs/src/setupTests.ts

@@ -1,4 +1,6 @@
 import '@testing-library/jest-dom'
+import { afterAll, beforeAll, afterEach } from 'vitest'
+
 
 // eslint-disable-next-line import/first
 import { startServer } from './test-utils'

packages/docs/src/test-utils.js → packages/docs/src/test-utils.ts

@@ -1,6 +1,6 @@
 import { setupServer } from 'msw/node';
 
-let server;
+let server: any;
 
 export function startServer() {
   server = setupServer();

packages/docs/vitest.config.ts

@@ -12,7 +12,7 @@ export default mergeConfig(
       globals: true,
       environment: 'jsdom',
       clearMocks: true,
-      setupFiles: './src/setupTests.js',
+      setupFiles: './src/setupTests.ts',
     },
   })
 )

yarn.lock

@@ -2928,6 +2928,11 @@
   dependencies:
     "@types/unist" "*"
 
+"@types/history@^4.7.11":
+  version "4.7.11"
+  resolved "https://registry.yarnpkg.com/@types/history/-/history-4.7.11.tgz#56588b17ae8f50c53983a524fc3cc47437969d64"
+  integrity sha512-qjDJRrmvBMiTx+jyLxvLfJU7UznFuokDv4f3WRuriHKERccVpFU+8XMQUAbDzoiJCsmexxRExQeMwwCdamSKDA==
+
 "@types/http-errors@*":
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/@types/http-errors/-/http-errors-2.0.4.tgz#7eb47726c391b7345a6ec35ad7f4de469cf5ba4f"
@@ -3040,6 +3045,23 @@
   dependencies:
     "@types/react" "*"
 
+"@types/react-router-dom@^5.3.3":
+  version "5.3.3"
+  resolved "https://registry.yarnpkg.com/@types/react-router-dom/-/react-router-dom-5.3.3.tgz#e9d6b4a66fcdbd651a5f106c2656a30088cc1e83"
+  integrity sha512-kpqnYK4wcdm5UaWI3fLcELopqLrHgLqNsdpHauzlQktfkHL3npOSwtj1Uz9oKBAzs7lFtVkV8j83voAz2D8fhw==
+  dependencies:
+    "@types/history" "^4.7.11"
+    "@types/react" "*"
+    "@types/react-router" "*"
+
+"@types/react-router@*":
+  version "5.1.20"
+  resolved "https://registry.yarnpkg.com/@types/react-router/-/react-router-5.1.20.tgz#88eccaa122a82405ef3efbcaaa5dcdd9f021387c"
+  integrity sha512-jGjmu/ZqS7FjSH6owMcD5qpq19+1RS9DeVRqfl1FeBMxTDQAGwlMWOcs52NDoXaNKyG3d1cYQFMs9rCrb88o9Q==
+  dependencies:
+    "@types/history" "^4.7.11"
+    "@types/react" "*"
+
 "@types/react@*", "@types/react@^18.0.27":
   version "18.2.66"
   resolved "https://registry.yarnpkg.com/@types/react/-/react-18.2.66.tgz#d2eafc8c4e70939c5432221adb23d32d76bfe451"