Merge pull request #339 from nekochans/feature/issue335/update-npm-pa…

…ckages

npm packageを最新安定版に更新（デザインリニューアル前の最後のアップデート）

eslint.config.mjs

@@ -7,6 +7,8 @@ import typescriptEslint from '@typescript-eslint/eslint-plugin';
 import jsxA11Y from 'eslint-plugin-jsx-a11y';
 import react from 'eslint-plugin-react';
 import reactHooks from 'eslint-plugin-react-hooks';
+import storybook from 'eslint-plugin-storybook';
+import vitest from 'eslint-plugin-vitest';
 import globals from 'globals';
 
 const __filename = fileURLToPath(import.meta.url);
@@ -48,9 +50,6 @@ export default [
       'plugin:react/recommended',
       'plugin:react/jsx-runtime',
       'plugin:react-hooks/recommended',
-      'plugin:vitest/recommended',
-      'plugin:storybook/recommended',
-      'next/core-web-vitals',
       'prettier',
     ),
   ),
@@ -60,6 +59,8 @@ export default [
       'jsx-a11y': fixupPluginRules(jsxA11Y),
       react: fixupPluginRules(react),
       'react-hooks': fixupPluginRules(reactHooks),
+      storybook,
+      vitest,
     },
 
     languageOptions: {

package.json

@@ -23,80 +23,80 @@
     "chromatic": "chromatic --project-token=$CHROMATIC_PROJECT_TOKEN"
   },
   "dependencies": {
-    "@sentry/nextjs": "8.13.0",
-    "@upstash/ratelimit": "^1.1.3",
-    "@upstash/redis": "^1.30.0",
-    "@vercel/edge-config": "^1.1.0",
+    "@sentry/nextjs": "8.26.0",
+    "@upstash/ratelimit": "^2.0.1",
+    "@upstash/redis": "^1.34.0",
+    "@vercel/edge-config": "^1.2.1",
     "clipboard": "^2.0.11",
     "lodash.throttle": "^4.1.1",
-    "next": "^14.2.3",
+    "next": "^14.2.5",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-dropzone": "^14.2.3",
-    "react-icons": "^5.1.0",
+    "react-icons": "^5.3.0",
     "react-markdown": "^9.0.1",
     "react-modal": "^3.16.1",
     "ress": "^5.0.2",
     "valtio": "^1.13.2",
-    "zod": "^3.23.4"
+    "zod": "^3.23.8"
   },
   "devDependencies": {
-    "@chromatic-com/storybook": "^1.3.3",
+    "@chromatic-com/storybook": "^1.6.1",
     "@eslint/compat": "^1.1.1",
     "@eslint/eslintrc": "^3.1.0",
-    "@eslint/js": "^9.8.0",
-    "@ianvs/prettier-plugin-sort-imports": "^4.2.1",
-    "@next/env": "^14.2.3",
-    "@storybook/addon-a11y": "^8.0.9",
-    "@storybook/addon-essentials": "^8.0.9",
-    "@storybook/addon-interactions": "^8.0.9",
-    "@storybook/addon-links": "^8.0.9",
-    "@storybook/addon-onboarding": "^8.0.9",
-    "@storybook/blocks": "^8.0.9",
-    "@storybook/nextjs": "^8.0.9",
-    "@storybook/react": "^8.0.9",
-    "@storybook/test": "^8.0.9",
+    "@eslint/js": "^9.9.0",
+    "@ianvs/prettier-plugin-sort-imports": "^4.3.1",
+    "@next/env": "^14.2.5",
+    "@storybook/addon-a11y": "^8.2.9",
+    "@storybook/addon-essentials": "^8.2.9",
+    "@storybook/addon-interactions": "^8.2.9",
+    "@storybook/addon-links": "^8.2.9",
+    "@storybook/addon-onboarding": "^8.2.9",
+    "@storybook/blocks": "^8.2.9",
+    "@storybook/nextjs": "^8.2.9",
+    "@storybook/react": "^8.2.9",
+    "@storybook/test": "^8.2.9",
     "@storybook/testing-library": "^0.2.2",
-    "@testing-library/jest-dom": "^6.4.2",
-    "@testing-library/react": "^15.0.5",
+    "@testing-library/jest-dom": "^6.4.8",
+    "@testing-library/react": "^16.0.0",
     "@testing-library/react-hooks": "^8.0.1",
     "@types/clipboard": "^2.0.7",
-    "@types/eslint": "^8.56.10",
+    "@types/eslint": "^9.6.0",
     "@types/lodash.throttle": "^4.1.9",
     "@types/prettier": "^2.7.3",
-    "@types/react": "18.3.1",
+    "@types/react": "18.3.3",
     "@types/react-modal": "^3.16.3",
-    "@typescript-eslint/eslint-plugin": "^7.7.1",
-    "@vitejs/plugin-react-swc": "^3.6.0",
-    "@vitest/coverage-v8": "^1.5.2",
-    "chromatic": "^11.3.0",
-    "eslint": "8.57.0",
-    "eslint-config-next": "^14.2.3",
+    "@typescript-eslint/eslint-plugin": "7.18.0",
+    "@vitejs/plugin-react-swc": "^3.7.0",
+    "@vitest/coverage-v8": "^2.0.5",
+    "chromatic": "^11.7.1",
+    "eslint": "9.9.0",
+    "eslint-config-next": "^14.2.5",
     "eslint-config-prettier": "^9.1.0",
     "eslint-config-standard-with-typescript": "^43.0.1",
-    "eslint-plugin-jsx-a11y": "^6.8.0",
-    "eslint-plugin-n": "^17.3.1",
-    "eslint-plugin-promise": "^6.1.1",
-    "eslint-plugin-react": "^7.34.1",
+    "eslint-plugin-jsx-a11y": "^6.9.0",
+    "eslint-plugin-n": "^17.10.2",
+    "eslint-plugin-promise": "^7.1.0",
+    "eslint-plugin-react": "^7.35.0",
     "eslint-plugin-react-hooks": "^4.6.2",
     "eslint-plugin-storybook": "^0.8.0",
-    "eslint-plugin-vitest": "^0.3.22",
+    "eslint-plugin-vitest": "^0.5.4",
     "globals": "^15.9.0",
-    "happy-css-modules": "^2.1.2",
-    "jsdom": "^24.0.0",
-    "msw": "^2.2.14",
-    "msw-storybook-addon": "2.0.0",
+    "happy-css-modules": "^3.1.1",
+    "jsdom": "^24.1.1",
+    "msw": "^2.3.5",
+    "msw-storybook-addon": "2.0.3",
     "npm-run-all": "^4.1.5",
-    "postcss": "^8.4.38",
-    "prettier": "^3.2.5",
-    "storybook": "^8.0.9",
-    "stylelint": "^16.4.0",
+    "postcss": "^8.4.41",
+    "prettier": "^3.3.3",
+    "storybook": "^8.2.9",
+    "stylelint": "^16.8.2",
     "stylelint-config-recess-order": "^5.0.1",
-    "stylelint-config-standard": "^36.0.0",
+    "stylelint-config-standard": "^36.0.1",
     "stylelint-order": "^6.0.4",
-    "typescript": "5.4.5",
-    "vite-tsconfig-paths": "^4.3.2",
-    "vitest": "^1.5.2"
+    "typescript": "5.5.4",
+    "vite-tsconfig-paths": "^5.0.1",
+    "vitest": "^2.0.5"
   },
   "msw": {
     "workerDirectory": "public"

public/mockServiceWorker.js

@@ -8,7 +8,7 @@
  * - Please do NOT serve this file on production.
  */
 
-const PACKAGE_VERSION = '2.2.14'
+const PACKAGE_VERSION = '2.3.5'
 const INTEGRITY_CHECKSUM = '26357c79639bfa20d64c0efca2a87423'
 const IS_MOCKED_RESPONSE = Symbol('isMockedResponse')
 const activeClientIds = new Set()

src/api/cognito/openIdConnect.ts

@@ -6,7 +6,7 @@ import { IssueClientCredentialsAccessTokenError } from './IssueClientCredentials
 
 type CognitoTokenResponseBody = {
   access_token: string;
-  // eslint-disable-next-line no-magic-numbers
+
   expires_in: 3600;
   token_type: 'Bearer';
 };
@@ -95,7 +95,6 @@ export const issueClientCredentialsAccessToken: IssueClientCredentialsAccessToke
       );
     }
 
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
     const responseBody = (await response.json()) as unknown;
 
     if (isCognitoTokenResponseBody(responseBody)) {

src/api/lgtmeow/lgtmImage.ts

@@ -21,7 +21,6 @@ import {
 } from '@/features';
 import { mightSetRequestIdToSentry } from '@/utils';
 
-// eslint-disable-next-line require-await
 export const fetchLgtmImagesInRandom: FetchLgtmImages = async (
   appBaseUrl,
   revalidate,
@@ -41,7 +40,6 @@ export const fetchLgtmImagesInRandom: FetchLgtmImages = async (
   return (await response.json()) as LgtmImage[];
 };
 
-// eslint-disable-next-line require-await
 export const fetchLgtmImagesInRecentlyCreated: FetchLgtmImages = async (
   appBaseUrl,
   revalidate,

src/app/api/lgtm-images/recently-created/route.ts

@@ -52,7 +52,6 @@ export const GET = async (request: NextRequest): Promise<Response> => {
     options,
   );
 
-  // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
   const responseBody = (await response.json()) as unknown;
   if (isFetchLgtmImagesResponseBody(responseBody)) {
     const lgtmImages = responseBody.lgtmImages.map((value) => {

src/app/api/lgtm-images/route.ts

@@ -53,7 +53,6 @@ export const GET = async (request: NextRequest): Promise<Response> => {
 
   const response = await fetch(`${lgtmeowApiUrl()}/lgtm-images`, options);
 
-  // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
   const responseBody = (await response.json()) as unknown;
   if (isFetchLgtmImagesResponseBody(responseBody)) {
     const lgtmImages = responseBody.lgtmImages.map((value) => {

src/app/en/layout.tsx

@@ -50,7 +50,7 @@ export const metadata: Metadata = {
 
 const InternationalizationLayout = ({ children }: Props): JSX.Element => {
   return (
-    <html lang={language} prefix="og: https://ogp.me/ns#">
+    <html lang={language}>
       <head>
         <link
           href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP&family=Roboto&family=Zen+Kaku+Gothic+New&display=swap"

src/app/layout.tsx

@@ -50,7 +50,7 @@ export const metadata: Metadata = {
 
 const RootLayout = ({ children }: Props): JSX.Element => {
   return (
-    <html lang={language} prefix="og: https://ogp.me/ns#">
+    <html lang={language}>
       <head>
         <link
           href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP&family=Roboto&family=Zen+Kaku+Gothic+New&display=swap"

src/components/LgtmImages/LgtmImages.stories.tsx

@@ -74,7 +74,7 @@ export const WithAppUrl: Story = {
 export const WithCallbackFunc: Story = {
   args: {
     images,
-    // eslint-disable-next-line no-alert
+
     callback: () => {
       alert('run callback func!');
     },

src/components/Upload/UploadForm/UploadForm.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable max-lines */
 'use client';
 
 import type { AppUrl } from '@/constants';
@@ -83,7 +82,6 @@ export type Props = {
   appUrl?: AppUrl;
 };
 
-// eslint-disable-next-line max-lines-per-function, max-statements
 export const UploadForm: FC<Props> = ({
   language,
   imageValidator,
@@ -143,7 +141,6 @@ export const UploadForm: FC<Props> = ({
     setBase64Image(window.btoa(binaryString));
   };
 
-  // eslint-disable-next-line max-statements
   const mightConvertImageToBase64 = (file: File) => {
     setUploaded(false);
     const fileType = file.type;
@@ -175,10 +172,9 @@ export const UploadForm: FC<Props> = ({
     openModal();
   };
 
-  // eslint-disable-next-line max-statements
   const handleFileUpload = (event: ChangeEvent<HTMLInputElement>) => {
     event.preventDefault();
-    // eslint-disable-next-line no-magic-numbers
+
     if (event.target.files && event.target.files.length > 0) {
       const targetIndex = 0;
       const file = event.target.files[targetIndex];
@@ -187,7 +183,6 @@ export const UploadForm: FC<Props> = ({
   };
 
   const shouldDisableButton = (): boolean => {
-    // eslint-disable-next-line no-magic-numbers
     if (displayErrorMessages.length !== 0) {
       return true;
     }
@@ -201,7 +196,6 @@ export const UploadForm: FC<Props> = ({
     openModal();
   };
 
-  // eslint-disable-next-line max-statements, max-lines-per-function
   const executeUpload = async () => {
     setIsLoading(true);
 
@@ -213,7 +207,6 @@ export const UploadForm: FC<Props> = ({
 
       if (
         !imageValidationResult.value.isAcceptableCatImage ||
-        // eslint-disable-next-line no-magic-numbers
         imageValidationResult.value.notAcceptableReason.length !== 0
       ) {
         setDisplayErrorMessages(
@@ -242,7 +235,6 @@ export const UploadForm: FC<Props> = ({
         }
       }
 
-      // eslint-disable-next-line no-magic-numbers
       if (imageUploadResult.value.displayErrorMessages.length !== 0) {
         setDisplayErrorMessages(imageUploadResult.value.displayErrorMessages);
         stateInitAtError();
@@ -264,7 +256,6 @@ export const UploadForm: FC<Props> = ({
   };
 
   const onDrop = useCallback((acceptedFiles: File[]) => {
-    // eslint-disable-next-line no-magic-numbers
     if (acceptedFiles.length > 0) {
       const targetIndex = 0;
       const file = acceptedFiles[targetIndex];
@@ -278,15 +269,15 @@ export const UploadForm: FC<Props> = ({
 
   return (
     <div className={styles.wrapper}>
-      {/* eslint-disable no-magic-numbers */}
+      {}
       {displayErrorMessages.length === 0 ? (
         ''
       ) : (
         <UploadErrorMessageArea messages={displayErrorMessages} />
       )}
       <UploadTitleArea language={language} />
       <form className={styles.form}>
-        {/* eslint-disable-next-line react/jsx-props-no-spreading */}
+        {}
         <div {...getRootProps()} className={styles['input-file-area']}>
           <FaCloudUploadAlt className={styles['fa-cloud-upload-alt']} />
           <div className={styles.text}>{imageDropAreaText(language)}</div>

src/components/Upload/UploadModal/UploadModal.tsx

@@ -65,7 +65,6 @@ const modalStyle = {
   },
 };
 
-// eslint-disable-next-line max-lines-per-function
 export const UploadModal: FC<Props> = ({
   isOpen,
   language,

src/features/imageData.ts

@@ -1,4 +1,3 @@
-/* eslint-disable max-lines */
 import type { LgtmImage } from './lgtmImage';
 
 export const imageData: LgtmImage[] = [

src/features/lgtmImage.ts

@@ -99,12 +99,10 @@ export const isLgtmImageUrl = (value: unknown): value is LgtmImageUrl => {
 
 export const isLgtmImages = (value: unknown): value is LgtmImage[] => {
   if (Array.isArray(value)) {
-    // eslint-disable-next-line no-magic-numbers
     if (Object.prototype.toString.call(value[0]) !== '[object Object]') {
       return false;
     }
 
-    // eslint-disable-next-line no-magic-numbers
     const lgtmImage = value[0] as LgtmImage;
 
     return (
@@ -120,11 +118,9 @@ export const extractRandomImages = (numberToExtract: number): LgtmImage[] => {
   const copiedLgtmImages = [...imageData];
   const result = [];
 
-  // eslint-disable-next-line id-length, no-magic-numbers
   for (let i = numberToExtract; i > 0; i -= 1) {
-    // eslint-disable-next-line no-magic-numbers
     const rand = Math.floor(Math.random() * (copiedLgtmImages.length + 1)) - 1;
-    // eslint-disable-next-line no-magic-numbers
+
     result.push(...copiedLgtmImages.splice(rand, 1));
   }
 
@@ -150,10 +146,9 @@ export const extractImageExtFromValidFileType = (
 
 const calculateFileSize = (file: File): number => {
   const kb = 1024;
-  // eslint-disable-next-line no-magic-numbers
+
   const mb = kb ** 2;
 
-  // eslint-disable-next-line no-magic-numbers
   return Math.round((file.size / mb) * 100.0) / 100.0;
 };
 

src/features/result.ts

@@ -7,13 +7,13 @@ export type Result<T, E> = SuccessResult<T> | FailureResult<E>;
 
 export const createSuccessResult = <T>(value: T): SuccessResult<T> => ({
   value,
-  // eslint-disable-next-line id-length
+
   _: SuccessMarker,
 });
 
 export const createFailureResult = <E>(value: E): FailureResult<E> => ({
   value,
-  // eslint-disable-next-line id-length
+
   _: FailureMarker,
 });