Merge pull request #316 from nekochans/feature/issue315/upgrade-npm-p…

…ackages npm packageを最新安定版に更新
nekochans · Aug 22, 2023 · 7e307f1 · 7e307f1
2 parents 98fe207 + 17bcfd4
commit 7e307f1
Show file tree

Hide file tree

Showing 37 changed files with 11,844 additions and 9,383 deletions.
diff --git a/.storybook/main.ts b/.storybook/main.ts
@@ -5,9 +5,9 @@ const config: StorybookConfig = {
   addons: [
     '@storybook/addon-links',
     '@storybook/addon-essentials',
+    '@storybook/addon-onboarding',
     '@storybook/addon-interactions',
     '@storybook/addon-a11y',
-    'storybook-css-modules',
   ],
   framework: {
     name: '@storybook/nextjs',

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -43,66 +43,64 @@
   },
   "homepage": "https://github.com/nekochans/lgtm-cat-ui#readme",
   "devDependencies": {
-    "@storybook/addon-a11y": "^7.0.2",
-    "@storybook/addon-essentials": "^7.0.2",
-    "@storybook/addon-interactions": "^7.0.2",
-    "@storybook/addon-links": "^7.0.2",
-    "@storybook/blocks": "^7.0.2",
-    "@storybook/nextjs": "^7.0.2",
-    "@storybook/react": "^7.0.2",
-    "@storybook/testing-library": "^0.1.0",
+    "@storybook/addon-a11y": "^7.3.2",
+    "@storybook/addon-essentials": "^7.3.2",
+    "@storybook/addon-interactions": "^7.3.2",
+    "@storybook/addon-links": "^7.3.2",
+    "@storybook/addon-onboarding": "^1.0.8",
+    "@storybook/blocks": "^7.3.2",
+    "@storybook/nextjs": "^7.3.2",
+    "@storybook/react": "^7.3.2",
+    "@storybook/testing-library": "^0.2.0",
     "@types/clipboard": "^2.0.7",
-    "@types/eslint": "^8.21.3",
-    "@types/jest": "^29.5.0",
-    "@types/node": "^18.15.5",
-    "@types/prettier": "^2.7.2",
-    "@types/react": "^18.0.28",
-    "@types/react-modal": "^3.13.1",
-    "@typescript-eslint/eslint-plugin": "^5.56.0",
-    "@vitejs/plugin-react-swc": "^3.2.0",
-    "chromatic": "^6.17.2",
+    "@types/eslint": "^8.44.2",
+    "@types/jest": "^29.5.3",
+    "@types/node": "^20.5.1",
+    "@types/prettier": "^2.7.3",
+    "@types/react": "^18.2.20",
+    "@types/react-modal": "^3.16.0",
+    "@typescript-eslint/eslint-plugin": "^6.4.0",
+    "@vitejs/plugin-react-swc": "^3.3.2",
+    "chromatic": "^6.22.0",
     "clipboard": "^2.0.11",
-    "eslint": "^8.36.0",
-    "eslint-config-prettier": "^8.8.0",
-    "eslint-config-standard-with-typescript": "^34.0.1",
-    "eslint-plugin-import": "^2.27.5",
-    "eslint-plugin-jest": "^27.2.1",
+    "eslint": "^8.47.0",
+    "eslint-config-prettier": "^9.0.0",
+    "eslint-config-standard-with-typescript": "^38.0.0",
+    "eslint-plugin-import": "^2.28.1",
+    "eslint-plugin-jest": "^27.2.3",
     "eslint-plugin-jsx-a11y": "^6.7.1",
-    "eslint-plugin-n": "^15.6.1",
+    "eslint-plugin-n": "^16.0.1",
     "eslint-plugin-promise": "^6.1.1",
-    "eslint-plugin-react": "^7.32.2",
+    "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-storybook": "^0.6.11",
-    "jest": "^29.5.0",
-    "next": "^13.2.4",
+    "eslint-plugin-storybook": "^0.6.13",
+    "jest": "^29.6.2",
+    "next": "^13.4.19",
     "npm-run-all": "^4.1.5",
-    "postcss": "^8.4.21",
-    "postcss-jsx": "^0.36.4",
-    "postcss-syntax": "^0.36.2",
-    "prettier": "^2.8.6",
+    "postcss": "^8.4.28",
+    "prettier": "^3.0.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-dropzone": "^14.2.3",
-    "react-icons": "^4.8.0",
-    "react-markdown": "^8.0.6",
+    "react-icons": "^4.10.1",
+    "react-markdown": "^8.0.7",
     "react-modal": "^3.16.1",
     "ress": "^5.0.2",
-    "storybook": "^7.0.2",
-    "storybook-css-modules": "^1.0.8",
-    "stylelint": "^15.6.2",
+    "storybook": "^7.3.2",
+    "stylelint": "^15.10.3",
     "stylelint-config-prettier": "^9.0.5",
-    "stylelint-config-recess-order": "^4.0.0",
-    "stylelint-config-standard": "^31.0.0",
+    "stylelint-config-recess-order": "^4.3.0",
+    "stylelint-config-standard": "^34.0.0",
     "stylelint-order": "^6.0.3",
-    "ts-jest": "^29.0.5",
+    "ts-jest": "^29.1.1",
     "typed-css-modules": "^0.7.2",
-    "typescript": "^5.0.3",
-    "valtio": "^1.10.3",
-    "vite": "^4.2.1",
-    "vite-plugin-dts": "^2.1.0"
+    "typescript": "^5.1.6",
+    "valtio": "^1.11.2",
+    "vite": "^4.4.9",
+    "vite-plugin-dts": "^3.5.2"
   },
   "peerDependencies": {
-    "next": "^13.2.4",
+    "next": "^13.4.19",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   }

diff --git a/src/components/Button/CatButtonGroup/CatButtonGroup.module.css b/src/components/Button/CatButtonGroup/CatButtonGroup.module.css
@@ -4,7 +4,7 @@
   background: var(--white-color);
 }
 
-@media (max-width: 767px) {
+@media (width <= 767px) {
   .wrapper {
     display: flex;
     flex-direction: column;
@@ -21,7 +21,7 @@
   padding: 0;
 }
 
-@media (max-width: 767px) {
+@media (width <= 767px) {
   .button-group {
     flex: none;
     flex-direction: column;

diff --git a/src/components/ErrorContent/ErrorContent.tsx b/src/components/ErrorContent/ErrorContent.tsx
@@ -54,7 +54,7 @@ type ErrorMessageText = JaErrorMessageText | EnErrorMessageText;
 
 const createErrorMessageText = (
   type: ErrorType,
-  language: Language
+  language: Language,
 ): ErrorMessageText => {
   switch (type) {
     case errorType.notFound:

diff --git a/src/components/Header/LanguageButton.module.css b/src/components/Header/LanguageButton.module.css
@@ -12,7 +12,7 @@
   border-radius: 4px;
 }
 
-@media (max-width: 767px) {
+@media (width <= 767px) {
   .wrapper {
     padding: 12px 0;
   }

diff --git a/src/components/Header/LanguageMenu.module.css b/src/components/Header/LanguageMenu.module.css
@@ -13,7 +13,7 @@
   padding: 0;
 }
 
-@media (max-width: 767px) {
+@media (width <= 767px) {
   .wrapper {
     right: 0;
   }

diff --git a/src/components/LgtmImages/LgtmImages.module.css b/src/components/LgtmImages/LgtmImages.module.css
@@ -4,7 +4,7 @@
   gap: 20px;
 }
 
-@media (max-width: 767px) {
+@media (width <= 767px) {
   .wrapper {
     grid-template-columns: 1fr;
     gap: 10px;

diff --git a/src/components/MarkdownContents/MarkdownContents.module.css b/src/components/MarkdownContents/MarkdownContents.module.css
@@ -12,7 +12,7 @@
   list-style-position: inside;
 }
 
-@media (max-width: 767px) {
+@media (width <= 767px) {
   .wrapper {
     max-width: 380px;
   }

diff --git a/src/components/Upload/UploadErrorMessageArea/UploadErrorMessageArea.module.css b/src/components/Upload/UploadErrorMessageArea/UploadErrorMessageArea.module.css
@@ -14,7 +14,7 @@
   border: 1px solid var(--primary-color);
 }
 
-@media (max-width: 767px) {
+@media (width <= 767px) {
   .wrapper {
     width: 380px;
   }
@@ -48,7 +48,7 @@
   text-align: center;
 }
 
-@media (max-width: 767px) {
+@media (width <= 767px) {
   .message-text {
     width: 380px;
   }

diff --git a/src/components/Upload/UploadForm/UploadForm.module.css b/src/components/Upload/UploadForm/UploadForm.module.css
@@ -16,7 +16,7 @@
   width: 500px;
 }
 
-@media (max-width: 767px) {
+@media (width <= 767px) {
   .form {
     width: 380px;
   }

diff --git a/src/components/Upload/UploadForm/UploadForm.stories.tsx b/src/components/Upload/UploadForm/UploadForm.stories.tsx
@@ -27,7 +27,7 @@ type Story = StoryObj<typeof UploadForm>;
 
 const imageValidator: ImageValidator = async (
   image: string,
-  imageExtension: AcceptedTypesImageExtension
+  imageExtension: AcceptedTypesImageExtension,
 ) => {
   await sleep();
 
@@ -39,7 +39,7 @@ const imageValidator: ImageValidator = async (
 
 const returnFalseImageValidator: ImageValidator = async (
   image: string,
-  imageExtension: AcceptedTypesImageExtension
+  imageExtension: AcceptedTypesImageExtension,
 ) => {
   await sleep();
 
@@ -53,7 +53,7 @@ const returnFalseImageValidator: ImageValidator = async (
 
 const throwErrorImageValidator: ImageValidator = async (
   image: string,
-  imageExtension: AcceptedTypesImageExtension
+  imageExtension: AcceptedTypesImageExtension,
 ) => {
   await sleep();
 
@@ -62,7 +62,7 @@ const throwErrorImageValidator: ImageValidator = async (
 
 const imageUploader: ImageUploader = async (
   image: string,
-  imageExtension: AcceptedTypesImageExtension
+  imageExtension: AcceptedTypesImageExtension,
 ) => {
   await sleep();
 
@@ -75,7 +75,7 @@ const imageUploader: ImageUploader = async (
 
 const imageUploaderWithErrors: ImageUploader = async (
   image: string,
-  imageExtension: AcceptedTypesImageExtension
+  imageExtension: AcceptedTypesImageExtension,
 ) => {
   await sleep();
 
@@ -88,7 +88,7 @@ const imageUploaderWithErrors: ImageUploader = async (
 
 const throwErrorImageUploader: ImageUploader = async (
   image: string,
-  imageExtension: AcceptedTypesImageExtension
+  imageExtension: AcceptedTypesImageExtension,
 ) => {
   await sleep();
 

diff --git a/src/components/Upload/UploadForm/UploadForm.tsx b/src/components/Upload/UploadForm/UploadForm.tsx
@@ -14,6 +14,7 @@ import {
   isValidFileType,
   extractImageExtFromValidFileType,
   createPrivacyPolicyLinksFromLanguages,
+  isLgtmImageUrl,
 } from '../../../features';
 import { isAcceptableFileSize } from '../../../features/lgtmImage';
 import type {
@@ -96,15 +97,19 @@ export const UploadForm: FC<Props> = ({
   const [base64Image, setBase64Image] = useState<string>('');
   const [imagePreviewUrl, setImagePreviewUrl] = useState<string>('');
   const [uploadImageExtension, setUploadImageExtension] = useState<
+    // FormをResetする際に空文字を受け付ける必要があるので @typescript-eslint/no-redundant-type-constituents を無効化
+    // eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents
     AcceptedTypesImageExtension | string
   >('');
   const [modalIsOpen, setModalIsOpen] = useState(false);
   const [uploaded, setUploaded] = useState<boolean>();
   const [createdLgtmImageUrl, setCreatedLgtmImageUrl] = useState<
+    // FormをResetする際に空文字を受け付ける必要があるので @typescript-eslint/no-redundant-type-constituents を無効化
+    // eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents
     LgtmImageUrl | string
   >('');
   const [displayErrorMessages, setDisplayErrorMessages] = useState<string[]>(
-    []
+    [],
   );
   const [isLoading, setIsLoading] = useState<boolean>(false);
 
@@ -145,7 +150,7 @@ export const UploadForm: FC<Props> = ({
     const fileType = file.type;
     if (!isValidFileType(fileType)) {
       setDisplayErrorMessages(
-        createNotAllowedImageExtensionErrorMessage(fileType, language)
+        createNotAllowedImageExtensionErrorMessage(fileType, language),
       );
       stateInitAtError();
 
@@ -204,7 +209,7 @@ export const UploadForm: FC<Props> = ({
     try {
       const imageValidationResult = await imageValidator(
         base64Image,
-        uploadImageExtension as AcceptedTypesImageExtension
+        uploadImageExtension as AcceptedTypesImageExtension,
       );
 
       if (
@@ -213,7 +218,7 @@ export const UploadForm: FC<Props> = ({
         imageValidationResult.value.notAcceptableReason.length !== 0
       ) {
         setDisplayErrorMessages(
-          imageValidationResult.value.notAcceptableReason
+          imageValidationResult.value.notAcceptableReason,
         );
         stateInitAtError();
 
@@ -222,7 +227,7 @@ export const UploadForm: FC<Props> = ({
 
       const imageUploadResult = await imageUploader(
         base64Image,
-        uploadImageExtension as AcceptedTypesImageExtension
+        uploadImageExtension as AcceptedTypesImageExtension,
       );
 
       setIsLoading(false);
@@ -319,7 +324,7 @@ export const UploadForm: FC<Props> = ({
           />
         </div>
       </form>
-      {imagePreviewUrl || createdLgtmImageUrl ? (
+      {imagePreviewUrl || isLgtmImageUrl(createdLgtmImageUrl) ? (
         <UploadModal
           isOpen={modalIsOpen}
           language={language}
@@ -329,7 +334,7 @@ export const UploadForm: FC<Props> = ({
           onClickClose={onClickClose}
           isLoading={isLoading}
           uploaded={uploaded}
-          createdLgtmImageUrl={createdLgtmImageUrl}
+          createdLgtmImageUrl={createdLgtmImageUrl as LgtmImageUrl}
           onClickCreatedLgtmImage={onClickCreatedLgtmImage}
           onClickMarkdownSourceCopyButton={onClickMarkdownSourceCopyButton}
           appUrl={appUrl}

diff --git a/src/components/Upload/UploadForm/i18n.ts b/src/components/Upload/UploadForm/i18n.ts
@@ -58,7 +58,7 @@ export const noteList = (language: Language): string[] => {
 
 export const createNotAllowedImageExtensionErrorMessage = (
   fileType: string,
-  language: Language
+  language: Language,
 ): string[] => {
   switch (language) {
     case 'ja':
@@ -77,7 +77,7 @@ export const createNotAllowedImageExtensionErrorMessage = (
 };
 
 export const createImageSizeTooLargeErrorMessage = (
-  language: Language
+  language: Language,
 ): string[] => {
   switch (language) {
     case 'ja':

diff --git a/src/components/Upload/UploadModal/CreatedLgtmImage.module.css b/src/components/Upload/UploadModal/CreatedLgtmImage.module.css
@@ -12,7 +12,7 @@
   height: 270px;
 }
 
-@media (max-width: 767px) {
+@media (width <= 767px) {
   .image {
     max-width: 355px;
   }

diff --git a/src/components/Upload/UploadModal/CreatedLgtmImage.tsx b/src/components/Upload/UploadModal/CreatedLgtmImage.tsx
@@ -7,7 +7,7 @@ import styles from './CreatedLgtmImage.module.css';
 
 type Props = {
   imagePreviewUrl: string;
-  createdLgtmImageUrl: LgtmImageUrl | string;
+  createdLgtmImageUrl: LgtmImageUrl;
   appUrl?: AppUrl;
   callback?: () => void;
 };