143 Upgrade Packages (#148)

* #143 upgrade packages to minor version * #143 upgrade storybook * #143 upgrate storybook test * #143 upgrade react-query * #143 upgrade testing-library * #143 upgrade msw * #143 upgrade nanoid * #143 upgrade vite * #143 delete async tag for a non-async function * #143 upgrade gh-pages * #143 upgrade prettier + format code base * #143 upgrade eslint-prettier * #143 upgrade react-markdown & remark-gfm, fix weird error message behavior * #143 upgrade eslint plugins * #143 upgrade automatic package if possible, upgrade storybook * #143 uprade eslint plugins * #143 upgrade vite * #143 upgrade react query
Sonatai · Dec 18, 2023 · fd5af75 · fd5af75
1 parent f9eb693
commit fd5af75
Show file tree

Hide file tree

Showing 17 changed files with 3,580 additions and 3,871 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -9,7 +9,7 @@
         "eslint:recommended",
         "plugin:react/recommended",
         "standard-with-typescript",
-        "plugin:@typescript-eslint/recommended",
+        "plugin:@typescript-eslint/recommended-type-checked",
         "prettier",
         "plugin:testing-library/react",
         "plugin:vitest/recommended",
@@ -20,7 +20,7 @@
     "parserOptions": {
         "ecmaVersion": "latest",
         "sourceType": "module",
-        "project": "./tsconfig.json"
+        "project": true
     },
     "plugins": [
         "react",
@@ -88,7 +88,6 @@
         "testing-library/no-await-sync-events": "error",
         "testing-library/no-manual-cleanup": "error",
         "testing-library/prefer-user-event": "error",
-        "testing-library/prefer-explicit-assert": "error",
-        "testing-library/prefer-wait-for": "warn"
+        "testing-library/prefer-explicit-assert": "error"
     }
 }
diff --git a/.gitignore b/.gitignore
@@ -22,3 +22,5 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
+storybook-static/
diff --git a/index.html b/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
     <head>
         <meta charset="UTF-8" />

diff --git a/package.json b/package.json
@@ -22,66 +22,66 @@
         "@fortawesome/free-regular-svg-icons": "^6.1.2",
         "@fortawesome/free-solid-svg-icons": "^6.1.2",
         "@fortawesome/react-fontawesome": "^0.2.0",
-        "@tanstack/react-query": "^4.29.19",
-        "axios": "^1.00",
-        "nanoid": "^4.0.0",
+        "@tanstack/react-query": "5.14.1",
+        "axios": "^1.6.2",
+        "nanoid": "5.0.4",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
-        "react-error-boundary": "^4.0.10",
-        "react-markdown": "^8.0.7",
-        "react-router-dom": "^6.14.0",
+        "react-error-boundary": "^4.0.11",
+        "react-markdown": "9.0.1",
+        "react-router-dom": "^6.20.1",
         "react-syntax-highlighter": "^15.5.0",
         "reakit": "^1.3.11",
-        "remark-gfm": "^3.0.1",
-        "storybook": "^7.0.24",
+        "remark-gfm": "4.0.0",
+        "storybook": "^7.6.5",
         "zustand": "^4.3.8"
     },
     "devDependencies": {
-        "@storybook/addon-essentials": "7.0.24",
-        "@storybook/addon-interactions": "7.0.24",
-        "@storybook/addon-links": "7.0.24",
-        "@storybook/addon-styling": "^1.3.6",
-        "@storybook/blocks": "7.0.24",
-        "@storybook/react": "7.0.24",
-        "@storybook/react-vite": "7.0.24",
-        "@storybook/testing-library": "0.0.14-next.2",
+        "@storybook/addon-essentials": "7.6.5",
+        "@storybook/addon-interactions": "7.6.4",
+        "@storybook/addon-links": "7.6.5",
+        "@storybook/addon-styling": "^1.3.7",
+        "@storybook/blocks": "7.6.5",
+        "@storybook/react": "7.6.5",
+        "@storybook/react-vite": "7.6.5",
+        "@storybook/testing-library": "0.2.2",
         "@tailwindcss/typography": "^0.5.4",
-        "@testing-library/jest-dom": "^5.16.5",
+        "@testing-library/jest-dom": "6.1.5",
         "@testing-library/react": "^14.0.0",
         "@testing-library/react-hooks": "^8.0.1",
         "@types/jsonfile": "^6.1.0",
-        "@types/node": "^20.3.2",
+        "@types/node": "^20.10.4",
         "@types/react": "^18.2.14",
-        "@types/react-dom": "^18.2.6",
+        "@types/react-dom": "^18.2.17",
         "@types/react-syntax-highlighter": "^15.5.7",
-        "@typescript-eslint/eslint-plugin": "^5.60.1",
-        "@typescript-eslint/parser": "^5.60.1",
+        "@typescript-eslint/eslint-plugin": "6.15.0",
+        "@typescript-eslint/parser": "6.15.0",
         "@vitejs/plugin-react": "^4.0.1",
         "autoprefixer": "^10.4.8",
-        "eslint": "^8.43.0",
-        "eslint-config-prettier": "^8.8.0",
-        "eslint-config-standard-with-typescript": "^36.0.0",
-        "eslint-plugin-import": "^2.25.2",
+        "eslint": "^8.55.0",
+        "eslint-config-prettier": "9.1.0",
+        "eslint-config-standard-with-typescript": "43.0.0",
+        "eslint-plugin-import": "^2.29.0",
         "eslint-plugin-jest-dom": "^5.0.1",
         "eslint-plugin-n": "^16.0.1",
-        "eslint-plugin-prettier": "^4.2.1",
+        "eslint-plugin-prettier": "5.0.1",
         "eslint-plugin-promise": "^6.0.0",
         "eslint-plugin-react": "^7.32.2",
         "eslint-plugin-react-hooks": "^4.6.0",
         "eslint-plugin-storybook": "^0.6.12",
         "eslint-plugin-tailwindcss": "^3.13.0",
-        "eslint-plugin-testing-library": "^5.11.0",
+        "eslint-plugin-testing-library": "6.2.0",
         "eslint-plugin-vitest": "^0.2.6",
-        "gh-pages": "^5.0.0",
+        "gh-pages": "6.1.0",
         "happy-dom": "^9.20.3",
         "husky": "^8.0.3",
-        "msw": "^1.2.2",
+        "msw": "2.0.11",
         "postcss": "^8.4.24",
-        "prettier": "^2.8.4",
+        "prettier": "3.1.1",
         "prop-types": "15.8.1",
         "tailwindcss": "^3.1.7",
         "typescript": "^5.1.6",
-        "vite": "^4.3.9",
+        "vite": "5.0.10",
         "vite-plugin-markdown": "^2.1.0",
         "vitest": "0.32.2"
     }

diff --git a/public/404.html b/public/404.html
@@ -3,7 +3,7 @@
 Insights spa-github-pages/404.html @rafgraph rafgraph Update script to make
 reidrect more readable Latest commit 487f403 on 26 Sep 2020 History 1
 contributor 40 lines (37 sloc) 1.7 KB
-<!DOCTYPE html>
+<!doctype html>
 <html>
     <head>
         <meta charset="utf-8" />

diff --git a/src/Hooks/useGetSpec.ts b/src/Hooks/useGetSpec.ts
@@ -42,10 +42,10 @@ interface ISpec {
     generator: string;
 }
 
-const getSpec = async (file: string) => {
+const getSpec = async (file: string): Promise<ISpec> => {
     const data = await axios.get(`${config.specUrl}/${file}.json`);
 
-    return data.data;
+    return data.data as ISpec;
 };
 
 interface IGetSpec {
@@ -55,8 +55,10 @@ interface IGetSpec {
 export const useGetSpec = (props: IGetSpec): UseQueryResult<ISpec, unknown> => {
     const { fileName } = props;
 
-    return useQuery<ISpec>([fileName], async () => await getSpec(fileName), {
-        cacheTime: 60 * 60 * 24,
+    return useQuery<ISpec>({
+        queryKey: [fileName],
+        queryFn: async () => await getSpec(fileName),
+        gcTime: 60 * 60 * 24,
         staleTime: 60 * 60 * 24,
     });
 };
diff --git a/src/Hooks/useGetSummary.ts b/src/Hooks/useGetSummary.ts
@@ -4,10 +4,10 @@ import { useQuery, UseQueryResult } from '@tanstack/react-query';
 
 import config from '../../environment.json';
 
-const getSummary = async () => {
+const getSummary = async (): Promise<ISummary> => {
     const data = await axios.get(config.summaryUrl);
 
-    return data.data;
+    return data.data as ISummary;
 };
 
 export interface IExecutedFeatures {
@@ -46,8 +46,10 @@ export interface ISummary {
 }
 
 export const useGetSummary = (): UseQueryResult<ISummary, unknown> => {
-    return useQuery<ISummary>(['summary'], async () => await getSummary(), {
-        cacheTime: 60 * 60 * 24,
+    return useQuery<ISummary>({
+        queryKey: ['summary'],
+        queryFn: async () => await getSummary(),
+        gcTime: 60 * 60 * 24,
         staleTime: 60 * 60 * 24,
     });
 };
diff --git a/src/Hooks/useMarkdown.ts b/src/Hooks/useMarkdown.ts
@@ -12,12 +12,10 @@ interface IMarkdown {
 export const useMarkdown = (props: IMarkdown) => {
     const { filePath } = props;
 
-    return useQuery<string, string>(
-        [filePath],
-        async () => await getMarkdown(filePath),
-        {
-            cacheTime: 60 * 60 * 24,
-            staleTime: 60 * 60 * 24,
-        }
-    );
+    return useQuery<string, string>({
+        queryKey: [filePath],
+        queryFn: async () => await getMarkdown(filePath),
+        gcTime: 60 * 60 * 24,
+        staleTime: 60 * 60 * 24,
+    });
 };
diff --git a/src/components/shared/MarkdownPage.tsx b/src/components/shared/MarkdownPage.tsx
@@ -24,7 +24,7 @@ export const MarkdownPage = (props: IMarkdownPage): JSX.Element => {
                 <a href={config.LinkToIssueReport}>issue</a>.
             </Message>
         );
-    } else if (isLoading) {
+    } else if (isLoading || data === undefined) {
         return <LoadingSpinner isLoading={isLoading} />;
     } else {
         return (

diff --git a/src/components/shared/MarkdownRenderer.tsx b/src/components/shared/MarkdownRenderer.tsx
@@ -1,5 +1,4 @@
-import ReactMarkdown from 'react-markdown';
-import remarkGfm from 'remark-gfm';
+import Markdown from 'react-markdown';
 
 import { Divide } from './Divide/Divide';
 import { SyntaxHighlighter } from './SyntaxHighlighter';
@@ -11,6 +10,7 @@ import {
     MdTableHeader,
     MdTableRow,
 } from './Table';
+import remarkGfm from 'remark-gfm';
 
 interface IMarkdownRenderer {
     children: string;
@@ -20,12 +20,11 @@ export const MarkdownRenderer = (props: IMarkdownRenderer) => {
     const { children: content } = props;
 
     return (
-        <ReactMarkdown
+        <Markdown
             components={{
-                code: ({ inline, className, children, ...props }) => {
+                code: ({ className, children, ...props }) => {
                     const match = /language-(\w+)/.exec(className ?? '');
-                    return (inline === undefined || !inline) &&
-                        match !== null ? (
+                    return match !== null ? (
                         <SyntaxHighlighter
                             code={String(children)}
                             language={match[1]}
@@ -73,6 +72,6 @@ export const MarkdownRenderer = (props: IMarkdownRenderer) => {
             remarkPlugins={[remarkGfm]}
         >
             {content}
-        </ReactMarkdown>
+        </Markdown>
     );
 };
diff --git a/src/main.tsx b/src/main.tsx
@@ -13,7 +13,7 @@ import * as config from '../environment.json';
 
 const queryClient = new QueryClient();
 
-ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
+ReactDOM.createRoot(document.getElementById('root')!).render(
     <React.StrictMode>
         <BrowserRouter basename={config.rootUrl}>
             <QueryClientProvider client={queryClient}>

diff --git a/src/mocks/handlers.ts b/src/mocks/handlers.ts
@@ -1,12 +1,14 @@
-import { rest } from 'msw';
+import { http, HttpResponse } from 'msw';
 
 export const handlers = [
-    rest.get('*summary.json', async (req, res, ctx) => {
-        return await res(
-            ctx.status(200),
-            ctx.json({
+    http.get('*summary.json', () => {
+        return new HttpResponse(
+            JSON.stringify({
                 name: '',
-            })
+            }),
+            {
+                status: 200,
+            }
         );
     }),
 ];
diff --git a/src/pages/Document.tsx b/src/pages/Document.tsx
@@ -28,14 +28,14 @@ export const Document = (props: IExampleOne): JSX.Element => {
                 <a href={config.LinkToIssueReport}>issue</a>.
             </Message>
         );
-    } else if (isLoading) {
+    } else if (isLoading || data === undefined) {
         return <LoadingSpinner isLoading={isLoading} />;
     } else {
         return (
-            <Layout hasOnPageNav features={data.features}>
+            <Layout hasOnPageNav features={data?.features}>
                 <div className="mb-[3rem]">
                     <h1 className="mb-[0.5rem]">
-                        {data.title !== '' ? data.title : data.className}
+                        {data?.title !== '' ? data.title : data.className}
                     </h1>
 
                     {`Class name: ${data.className}`}
@@ -45,7 +45,7 @@ export const Document = (props: IExampleOne): JSX.Element => {
                 <pre className="whitespace-pre-line">{data.narrative}</pre>
 
                 <h2>Features</h2>
-                {data.features.map((feature: any, index: number) => (
+                {data.features.map((feature, index) => (
                     <Fragment key={nanoid()}>
                         <Feature
                             blocks={feature.blocks}

diff --git a/src/setupTest.ts b/src/setupTest.ts
@@ -4,6 +4,8 @@
 // learn more: https://github.com/testing-library/jest-dom
 import '@testing-library/jest-dom';
 
+import { afterAll, afterEach, beforeAll } from 'vitest';
+
 import { server } from './mocks/server';
 
 beforeAll(() => {

diff --git a/src/test-utils.tsx b/src/test-utils.tsx
@@ -9,15 +9,9 @@ export const HookProvider = ({ children }: { children: any }) => {
         defaultOptions: {
             queries: {
                 retry: false,
-                cacheTime: Infinity,
+                gcTime: Infinity,
             },
         },
-        logger: {
-            // eslint-disable-next-line no-console
-            log: console.log,
-            warn: console.warn,
-            error: console.error,
-        },
     });
 
     return (

diff --git a/src/tests/example.test.tsx b/src/tests/example.test.tsx
@@ -4,7 +4,7 @@ import { describe, expect, test } from 'vitest';
 import { renderHook } from '@testing-library/react-hooks';
 
 import { App } from '../App';
-import { useGetSummary } from '../Hooks/useGetSummary';
+import { ISummary, useGetSummary } from '../Hooks/useGetSummary';
 import { HookProvider, render } from '../test-utils';
 
 describe('test', () => {
@@ -24,12 +24,12 @@ describe('test', () => {
     });
 
     test('Axios example', async () => {
-        const getSummary = async () => {
+        const getSummary = async (): Promise<ISummary> => {
             const data = await axios.get(
                 'https://raw.githubusercontent.com/Gleethos/neureka/master/docs/spock/reports/summary.json'
             );
 
-            return data.data;
+            return data.data as ISummary;
         };
 
         const result = await getSummary();