diff --git a/packages/docs/.storybook/preview.js b/packages/docs/.storybook/preview.ts similarity index 75% rename from packages/docs/.storybook/preview.js rename to packages/docs/.storybook/preview.ts index 765a031..41f637e 100644 --- a/packages/docs/.storybook/preview.js +++ b/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].*' }, }, diff --git a/packages/docs/package.json b/packages/docs/package.json index 3c6449f..5da464a 100644 --- a/packages/docs/package.json +++ b/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", diff --git a/packages/docs/src/components/FilmCard.jsx b/packages/docs/src/components/FilmCard.tsx similarity index 77% rename from packages/docs/src/components/FilmCard.jsx rename to packages/docs/src/components/FilmCard.tsx index f159ab3..1f7da0e 100644 --- a/packages/docs/src/components/FilmCard.jsx +++ b/packages/docs/src/components/FilmCard.tsx @@ -1,4 +1,6 @@ -export function FilmCard({ film }) { +export function FilmCard({ + film +}: any) { return (

{film.title}

diff --git a/packages/docs/src/demos/apollo/App.stories.jsx b/packages/docs/src/demos/apollo/App.stories.tsx similarity index 100% rename from packages/docs/src/demos/apollo/App.stories.jsx rename to packages/docs/src/demos/apollo/App.stories.tsx diff --git a/packages/docs/src/demos/apollo/App.test.jsx b/packages/docs/src/demos/apollo/App.test.tsx similarity index 96% rename from packages/docs/src/demos/apollo/App.test.jsx rename to packages/docs/src/demos/apollo/App.test.tsx index 86822d4..e44416d 100644 --- a/packages/docs/src/demos/apollo/App.test.jsx +++ b/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' diff --git a/packages/docs/src/demos/apollo/App.jsx b/packages/docs/src/demos/apollo/App.tsx similarity index 89% rename from packages/docs/src/demos/apollo/App.jsx rename to packages/docs/src/demos/apollo/App.tsx index e1e48d4..cbdbd8a 100755 --- a/packages/docs/src/demos/apollo/App.jsx +++ b/packages/docs/src/demos/apollo/App.tsx @@ -36,9 +36,7 @@ export function App() { return (
- {films.map((film) => ( - - ))} + {films.map((film: any) => )}
); } diff --git a/packages/docs/src/demos/axios/App.stories.jsx b/packages/docs/src/demos/axios/App.stories.tsx similarity index 100% rename from packages/docs/src/demos/axios/App.stories.jsx rename to packages/docs/src/demos/axios/App.stories.tsx diff --git a/packages/docs/src/demos/fetch/App.test.jsx b/packages/docs/src/demos/axios/App.test.tsx similarity index 97% rename from packages/docs/src/demos/fetch/App.test.jsx rename to packages/docs/src/demos/axios/App.test.tsx index 201605a..69e8758 100644 --- a/packages/docs/src/demos/fetch/App.test.jsx +++ b/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' diff --git a/packages/docs/src/demos/axios/App.jsx b/packages/docs/src/demos/axios/App.tsx similarity index 96% rename from packages/docs/src/demos/axios/App.jsx rename to packages/docs/src/demos/axios/App.tsx index 01adbe9..ae03981 100755 --- a/packages/docs/src/demos/axios/App.jsx +++ b/packages/docs/src/demos/axios/App.tsx @@ -40,7 +40,7 @@ export function App() { return (
- {films.map((film) => ( + {films.map((film: any) => ( ))}
diff --git a/packages/docs/src/demos/fetch/AddonOnNode.test.jsx b/packages/docs/src/demos/fetch/AddonOnNode.test.tsx similarity index 86% rename from packages/docs/src/demos/fetch/AddonOnNode.test.jsx rename to packages/docs/src/demos/fetch/AddonOnNode.test.tsx index b0e7282..abf2321 100644 --- a/packages/docs/src/demos/fetch/AddonOnNode.test.jsx +++ b/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() }) diff --git a/packages/docs/src/demos/fetch/App.stories.jsx b/packages/docs/src/demos/fetch/App.stories.tsx similarity index 100% rename from packages/docs/src/demos/fetch/App.stories.jsx rename to packages/docs/src/demos/fetch/App.stories.tsx diff --git a/packages/docs/src/demos/axios/App.test.jsx b/packages/docs/src/demos/fetch/App.test.tsx similarity index 97% rename from packages/docs/src/demos/axios/App.test.jsx rename to packages/docs/src/demos/fetch/App.test.tsx index 3cbaad5..0ffd546 100644 --- a/packages/docs/src/demos/axios/App.test.jsx +++ b/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' diff --git a/packages/docs/src/demos/fetch/App.jsx b/packages/docs/src/demos/fetch/App.tsx similarity index 96% rename from packages/docs/src/demos/fetch/App.jsx rename to packages/docs/src/demos/fetch/App.tsx index 27a5c30..6be0e2c 100755 --- a/packages/docs/src/demos/fetch/App.jsx +++ b/packages/docs/src/demos/fetch/App.tsx @@ -45,7 +45,7 @@ export function App() { return (
- {films.map((film) => ( + {films.map((film: any) => ( ))}
diff --git a/packages/docs/src/demos/react-query/App.stories.jsx b/packages/docs/src/demos/react-query/App.stories.tsx similarity index 100% rename from packages/docs/src/demos/react-query/App.stories.jsx rename to packages/docs/src/demos/react-query/App.stories.tsx diff --git a/packages/docs/src/demos/react-query/App.test.jsx b/packages/docs/src/demos/react-query/App.test.tsx similarity index 96% rename from packages/docs/src/demos/react-query/App.test.jsx rename to packages/docs/src/demos/react-query/App.test.tsx index ba526cc..eff60f2 100644 --- a/packages/docs/src/demos/react-query/App.test.jsx +++ b/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' diff --git a/packages/docs/src/demos/react-query/App.jsx b/packages/docs/src/demos/react-query/App.tsx similarity index 89% rename from packages/docs/src/demos/react-query/App.jsx rename to packages/docs/src/demos/react-query/App.tsx index ef3de76..db4e9b3 100755 --- a/packages/docs/src/demos/react-query/App.jsx +++ b/packages/docs/src/demos/react-query/App.tsx @@ -37,9 +37,7 @@ export function App() { return (
- {films.map((film) => ( - - ))} + {films.map((film: any) => )}
); } diff --git a/packages/docs/src/demos/react-router-react-query/App.stories.jsx b/packages/docs/src/demos/react-router-react-query/App.stories.tsx similarity index 100% rename from packages/docs/src/demos/react-router-react-query/App.stories.jsx rename to packages/docs/src/demos/react-router-react-query/App.stories.tsx diff --git a/packages/docs/src/demos/react-router-react-query/App.jsx b/packages/docs/src/demos/react-router-react-query/App.tsx similarity index 100% rename from packages/docs/src/demos/react-router-react-query/App.jsx rename to packages/docs/src/demos/react-router-react-query/App.tsx diff --git a/packages/docs/src/demos/react-router-react-query/pages/Home.jsx b/packages/docs/src/demos/react-router-react-query/pages/Home.tsx similarity index 100% rename from packages/docs/src/demos/react-router-react-query/pages/Home.jsx rename to packages/docs/src/demos/react-router-react-query/pages/Home.tsx diff --git a/packages/docs/src/demos/react-router-react-query/pages/character/Character.stories.jsx b/packages/docs/src/demos/react-router-react-query/pages/character/Character.stories.tsx similarity index 100% rename from packages/docs/src/demos/react-router-react-query/pages/character/Character.stories.jsx rename to packages/docs/src/demos/react-router-react-query/pages/character/Character.stories.tsx diff --git a/packages/docs/src/demos/react-router-react-query/pages/character/Character.jsx b/packages/docs/src/demos/react-router-react-query/pages/character/Character.tsx old mode 100755 new mode 100644 similarity index 84% rename from packages/docs/src/demos/react-router-react-query/pages/character/Character.jsx rename to packages/docs/src/demos/react-router-react-query/pages/character/Character.tsx index b8ffb23..a824a7d --- a/packages/docs/src/demos/react-router-react-query/pages/character/Character.jsx +++ b/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(); 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() {

Films

- {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 ; })} ); } -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}/`), diff --git a/packages/docs/src/demos/react-router-react-query/pages/characters/Characters.stories.jsx b/packages/docs/src/demos/react-router-react-query/pages/characters/Characters.stories.tsx similarity index 100% rename from packages/docs/src/demos/react-router-react-query/pages/characters/Characters.stories.jsx rename to packages/docs/src/demos/react-router-react-query/pages/characters/Characters.stories.tsx diff --git a/packages/docs/src/demos/react-router-react-query/pages/characters/Characters.jsx b/packages/docs/src/demos/react-router-react-query/pages/characters/Characters.tsx similarity index 94% rename from packages/docs/src/demos/react-router-react-query/pages/characters/Characters.jsx rename to packages/docs/src/demos/react-router-react-query/pages/characters/Characters.tsx index b66638e..e624235 100755 --- a/packages/docs/src/demos/react-router-react-query/pages/characters/Characters.jsx +++ b/packages/docs/src/demos/react-router-react-query/pages/characters/Characters.tsx @@ -14,7 +14,7 @@ export default function Characters() { return (

Characters

- {data.results.map((person) => { + {data.results.map((person: any) => { const personUrlParts = person.url.split('/').filter(Boolean); const personId = personUrlParts[personUrlParts.length - 1]; return ( diff --git a/packages/docs/src/demos/react-router-react-query/pages/film/Film.stories.jsx b/packages/docs/src/demos/react-router-react-query/pages/film/Film.stories.tsx similarity index 100% rename from packages/docs/src/demos/react-router-react-query/pages/film/Film.stories.jsx rename to packages/docs/src/demos/react-router-react-query/pages/film/Film.stories.tsx diff --git a/packages/docs/src/demos/react-router-react-query/pages/film/Film.jsx b/packages/docs/src/demos/react-router-react-query/pages/film/Film.tsx similarity index 90% rename from packages/docs/src/demos/react-router-react-query/pages/film/Film.jsx rename to packages/docs/src/demos/react-router-react-query/pages/film/Film.tsx index b386ffd..42263f2 100755 --- a/packages/docs/src/demos/react-router-react-query/pages/film/Film.jsx +++ b/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(); const { data, status } = useQuery(`film-${filmId}`, () => fetch(`https://swapi.dev/api/films/${filmId}/`), ); @@ -19,7 +19,7 @@ export default function Film() {

{data.opening_crawl}


Characters

- {data.characters.map((character) => { + {data.characters.map((character: any) => { const characterUrlParts = character.split('/').filter(Boolean); const characterId = characterUrlParts[characterUrlParts.length - 1]; return ; @@ -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}/`), diff --git a/packages/docs/src/demos/react-router-react-query/pages/films/Films.stories.jsx b/packages/docs/src/demos/react-router-react-query/pages/films/Films.stories.tsx similarity index 100% rename from packages/docs/src/demos/react-router-react-query/pages/films/Films.stories.jsx rename to packages/docs/src/demos/react-router-react-query/pages/films/Films.stories.tsx diff --git a/packages/docs/src/demos/react-router-react-query/pages/films/Films.jsx b/packages/docs/src/demos/react-router-react-query/pages/films/Films.tsx similarity index 95% rename from packages/docs/src/demos/react-router-react-query/pages/films/Films.jsx rename to packages/docs/src/demos/react-router-react-query/pages/films/Films.tsx index ef6bc46..f0c5f55 100755 --- a/packages/docs/src/demos/react-router-react-query/pages/films/Films.jsx +++ b/packages/docs/src/demos/react-router-react-query/pages/films/Films.tsx @@ -16,7 +16,7 @@ export default function Films() { return (

Films

- {data.results.map((film) => { + {data.results.map((film: any) => { const filmUrlParts = film.url.split('/').filter(Boolean); const filmId = filmUrlParts[filmUrlParts.length - 1]; return ( diff --git a/packages/docs/src/demos/react-router-react-query/utils.js b/packages/docs/src/demos/react-router-react-query/utils.js deleted file mode 100644 index 38b71a2..0000000 --- a/packages/docs/src/demos/react-router-react-query/utils.js +++ /dev/null @@ -1,7 +0,0 @@ -export async function fetch(...args) { - const res = await window.fetch(...args); - if (!res.ok) { - throw new Error(res.statusText); - } - return res.json(); -} diff --git a/packages/docs/src/demos/react-router-react-query/utils.ts b/packages/docs/src/demos/react-router-react-query/utils.ts new file mode 100644 index 0000000..bf4aeb4 --- /dev/null +++ b/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(); +} diff --git a/packages/docs/src/demos/urql/App.stories.jsx b/packages/docs/src/demos/urql/App.stories.tsx similarity index 100% rename from packages/docs/src/demos/urql/App.stories.jsx rename to packages/docs/src/demos/urql/App.stories.tsx diff --git a/packages/docs/src/demos/urql/App.test.jsx b/packages/docs/src/demos/urql/App.test.tsx similarity index 97% rename from packages/docs/src/demos/urql/App.test.jsx rename to packages/docs/src/demos/urql/App.test.tsx index 3cbaad5..69e8758 100644 --- a/packages/docs/src/demos/urql/App.test.jsx +++ b/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' diff --git a/packages/docs/src/demos/urql/App.jsx b/packages/docs/src/demos/urql/App.tsx similarity index 89% rename from packages/docs/src/demos/urql/App.jsx rename to packages/docs/src/demos/urql/App.tsx index 72abef4..372068e 100755 --- a/packages/docs/src/demos/urql/App.jsx +++ b/packages/docs/src/demos/urql/App.tsx @@ -39,9 +39,7 @@ export function App() { return (
- {films.map((film) => ( - - ))} + {films.map((film: any) => )}
); } diff --git a/packages/docs/src/setupTests.js b/packages/docs/src/setupTests.ts similarity index 81% rename from packages/docs/src/setupTests.js rename to packages/docs/src/setupTests.ts index 026532a..e23d8a5 100644 --- a/packages/docs/src/setupTests.js +++ b/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' diff --git a/packages/docs/src/test-utils.js b/packages/docs/src/test-utils.ts similarity index 90% rename from packages/docs/src/test-utils.js rename to packages/docs/src/test-utils.ts index bc50543..ec3dbe7 100644 --- a/packages/docs/src/test-utils.js +++ b/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(); diff --git a/packages/docs/vitest.config.ts b/packages/docs/vitest.config.ts index c04c660..1eed6a6 100644 --- a/packages/docs/vitest.config.ts +++ b/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', }, }) ) diff --git a/yarn.lock b/yarn.lock index e50f73d..ceed081 100644 --- a/yarn.lock +++ b/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"