Merge pull request #322 from nekochans/feature/issue270/add-prettier-…

…plugin-sort-imports

prettier-plugin-sort-imports を導入

.eslintrc.json

@@ -72,51 +72,6 @@
         }
       }
     ],
-    "import/order": [
-      "error",
-      {
-        "groups": [
-          "builtin",
-          "external",
-          "internal",
-          "parent",
-          "sibling",
-          "object",
-          "index"
-        ],
-        "pathGroups": [
-          {
-            "pattern": "{react,react-dom/**,react-router*}",
-            "group": "builtin",
-            "position": "before"
-          },
-          {
-            "pattern": "{routes/**,stores/**,utils/**,hooks/**,domains/**}",
-            "group": "internal",
-            "position": "after"
-          },
-          {
-            "pattern": "{A-Z]*,**/[A-Z]*}",
-            "group": "internal",
-            "position": "after"
-          },
-          {
-            "pattern": "assets/**}",
-            "group": "internal",
-            "position": "after"
-          },
-          {
-            "pattern": "./*.{css,scss,sass,less}",
-            "group": "index",
-            "position": "after"
-          }
-        ],
-        "pathGroupsExcludedImportTypes": ["builtin"],
-        "alphabetize": {
-          "order": "asc"
-        }
-      }
-    ],
     "react/display-name": "off"
   },
   "overrides": [

.prettierrc.json

@@ -1,4 +1,6 @@
 {
   "singleQuote": true,
-  "endOfLine": "auto"
+  "endOfLine": "auto",
+  "plugins": ["@ianvs/prettier-plugin-sort-imports"],
+  "importOrderTypeScriptVersion": "5.3.3"
 }

package.json

@@ -43,6 +43,7 @@
   },
   "homepage": "https://github.com/nekochans/lgtm-cat-ui#readme",
   "devDependencies": {
+    "@ianvs/prettier-plugin-sort-imports": "^4.1.1",
     "@storybook/addon-a11y": "^7.6.6",
     "@storybook/addon-essentials": "^7.6.6",
     "@storybook/addon-interactions": "^7.6.6",

src/components/Button/CatRandomCopyButton/CatRandomCopyButton.tsx

@@ -1,4 +1,4 @@
-import type { FC, ComponentProps } from 'react';
+import type { ComponentProps, FC } from 'react';
 import { FaRandom } from 'react-icons/fa';
 import { defaultAppUrl, type AppUrl } from '../../../constants';
 import { useClipboardMarkdown, useCopySuccess } from '../../../hooks';

src/components/Button/UploadCatButton/UploadCatButton.tsx

@@ -1,5 +1,5 @@
-import type { FC } from 'react';
 import Link from 'next/link';
+import type { FC } from 'react';
 import { FaCloudUploadAlt } from 'react-icons/fa';
 import type { CustomDataAttrGtmClick } from '../../../types';
 import styles from './UploadCatButton.module.css';

src/components/ErrorContent/BackToTopButton.tsx

@@ -1,5 +1,5 @@
-import type { FC } from 'react';
 import Link from 'next/link';
+import type { FC } from 'react';
 import type { Language } from '../../types';
 import { assertNever } from '../../utils';
 import styles from './BackToTopButton.module.css';

src/components/ErrorContent/ErrorContent.stories.tsx

@@ -1,10 +1,8 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import Image from 'next/image';
-
 import internalServerError from '../../images/internal_server_error.webp';
 import notFound from '../../images/not_found.webp';
 import serviceUnavailable from '../../images/service_unavailable.webp';
-
 import { ErrorContent } from './';
 
 const meta: Meta<typeof ErrorContent> = {

src/components/Footer/Footer.tsx

@@ -1,5 +1,5 @@
-import type { FC } from 'react';
 import Link from 'next/link';
+import type { FC } from 'react';
 import {
   createPrivacyPolicyLinksFromLanguages,
   createTermsOfUseLinksFromLanguages,

src/components/GlobalMenu/GlobalMenu.tsx

@@ -1,11 +1,10 @@
-import type { FC } from 'react';
 import Link from 'next/link';
-import { FaTimes, FaCloudUploadAlt } from 'react-icons/fa';
+import type { FC } from 'react';
+import { FaCloudUploadAlt, FaTimes } from 'react-icons/fa';
 import {
   createPrivacyPolicyLinksFromLanguages,
   createTermsOfUseLinksFromLanguages,
 } from '../../features';
-
 import type { Language } from '../../types';
 import styles from './GlobalMenu.module.css';
 

src/components/Header/Header.tsx

@@ -1,11 +1,11 @@
-import { useState, type FC, type MouseEvent } from 'react';
 import Link from 'next/link';
+import { useState, type FC, type MouseEvent } from 'react';
 import { FaBars } from 'react-icons/fa';
 import Modal from 'react-modal';
 import { GlobalMenu } from '../GlobalMenu';
+import styles from './Header.module.css';
 import { LanguageButton } from './LanguageButton';
 import { LanguageMenu, type Props as LanguageMenuProps } from './LanguageMenu';
-import styles from './Header.module.css';
 
 export type Props = LanguageMenuProps & {
   isLanguageMenuDisplayed: boolean;

src/components/Header/LanguageMenu.tsx

@@ -1,5 +1,5 @@
-import type { FC } from 'react';
 import Link from 'next/link';
+import type { FC } from 'react';
 import { FaAngleRight } from 'react-icons/fa';
 import type { Language } from '../../types';
 import styles from './LanguageMenu.module.css';

src/components/LgtmImages/LgtmImageContent.tsx

@@ -1,6 +1,6 @@
-import type { FC } from 'react';
 import Image from 'next/image';
-import { type AppUrl, defaultAppUrl } from '../../constants';
+import type { FC } from 'react';
+import { defaultAppUrl, type AppUrl } from '../../constants';
 import { useClipboardMarkdown, useCopySuccess } from '../../hooks';
 import type { LgtmImage } from '../../types';
 import { CopiedGithubMarkdownMessage } from './CopiedGithubMarkdownMessage';

src/components/LgtmImages/LgtmImages.stories.tsx

@@ -1,6 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { type LgtmImage } from '../../types';
-
 import { LgtmImages } from './';
 
 const meta: Meta<typeof LgtmImages> = {

src/components/Upload/UploadForm/UploadForm.stories.tsx

@@ -1,5 +1,6 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
 import type { Meta, StoryObj } from '@storybook/react';
+import { UploadForm } from '.';
 import { createSuccessResult } from '../../../features';
 import type {
   AcceptedTypesImageExtension,
@@ -8,8 +9,6 @@ import type {
 } from '../../../types';
 import { sleep } from '../../../utils';
 
-import { UploadForm } from '.';
-
 const meta: Meta<typeof UploadForm> = {
   component: UploadForm,
   argTypes: {

src/components/Upload/UploadForm/UploadForm.tsx

@@ -1,35 +1,34 @@
 /* eslint-disable max-lines */
+import Link from 'next/link';
 import {
-  useState,
   useCallback,
+  useState,
+  type ChangeEvent,
   type FC,
   type FormEvent,
-  type ChangeEvent,
 } from 'react';
-import Link from 'next/link';
 import { useDropzone } from 'react-dropzone';
 import { FaCloudUploadAlt } from 'react-icons/fa';
 import type { AppUrl } from '../../../constants';
 import {
-  isValidFileType,
-  extractImageExtFromValidFileType,
   createPrivacyPolicyLinksFromLanguages,
+  extractImageExtFromValidFileType,
   isLgtmImageUrl,
+  isValidFileType,
 } from '../../../features';
 import { isAcceptableFileSize } from '../../../features/lgtmImage';
 import type {
   AcceptedTypesImageExtension,
   ImageUploader,
   ImageValidator,
-  LgtmImageUrl,
   Language,
+  LgtmImageUrl,
 } from '../../../types';
 import { assertNever } from '../../../utils';
 import { UploadButton } from '../UploadButton';
 import { UploadErrorMessageArea } from '../UploadErrorMessageArea';
 import { UploadModal } from '../UploadModal';
 import { UploadTitleArea } from '../UploadTitleArea';
-
 import {
   cautionText,
   createImageSizeTooLargeErrorMessage,

src/components/Upload/UploadProgressBar/UploadProgressBar.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect, type FC } from 'react';
+import { useEffect, useState, type FC } from 'react';
 import type { Language } from '../../../types';
 import { assertNever } from '../../../utils';
 import styles from './UploadProgressBar.module.css';

src/hooks/useClipboardMarkdown.ts

@@ -1,6 +1,5 @@
-import { type MutableRefObject, useEffect, useRef } from 'react';
 import Clipboard from 'clipboard';
-
+import { useEffect, useRef, type MutableRefObject } from 'react';
 import type { LgtmImageUrl } from '../types';
 
 type Request = {

src/hooks/useCopySuccess.ts

@@ -1,4 +1,4 @@
-import { useState, useCallback } from 'react';
+import { useCallback, useState } from 'react';
 
 type Response = {
   copied: boolean;

src/hooks/useSwitchLanguage.ts

@@ -1,6 +1,5 @@
 import type { MouseEvent, MouseEventHandler } from 'react';
 import { useSnapshot } from 'valtio';
-
 import { commonStateSelector, updateIsLanguageMenuDisplayed } from '../stores';
 
 type UseSwitchLanguageResponse = {

src/index.ts

@@ -1,4 +1,5 @@
 import './styles/globals.css';
+
 export { useSwitchLanguage } from './hooks';
 
 export * from './templates';

src/layouts/ResponsiveLayout/ResponsiveLayout.stories.tsx

@@ -1,5 +1,5 @@
-import type { FC } from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
+import type { FC } from 'react';
 import { ResponsiveLayout } from './';
 
 const meta: Meta<typeof ResponsiveLayout> = {

src/stores/valtio/common.ts

@@ -1,5 +1,4 @@
 import { proxy } from 'valtio';
-
 import type { Language } from '../../types';
 
 export type CommonState = {

src/stores/valtio/lgtmImage.ts

@@ -1,5 +1,4 @@
 import { proxy } from 'valtio';
-
 import type { LgtmImage } from '../../types';
 
 export type LgtmImageState = {

src/templates/ErrorTemplate/ErrorTemplate.stories.tsx

@@ -1,10 +1,8 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import Image from 'next/image';
-
 import internalServerError from '../../images/internal_server_error.webp';
 import notFound from '../../images/not_found.webp';
 import serviceUnavailable from '../../images/service_unavailable.webp';
-
 import { ErrorTemplate } from './';
 
 const meta: Meta<typeof ErrorTemplate> = {

src/templates/TermsOrPrivacyTemplate/TermsOrPrivacyTemplate.stories.tsx

@@ -1,12 +1,11 @@
-import type { FC } from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
+import type { FC } from 'react';
+import { TermsOrPrivacyTemplate, type TemplateType } from '.';
 import { MarkdownContents } from '../../components/MarkdownContents';
 import { useSwitchLanguage } from '../../hooks';
 import type { Language } from '../../types';
 import { assertNever } from '../../utils';
 
-import { TermsOrPrivacyTemplate, type TemplateType } from '.';
-
 const privacyPolicyJa = `
 # プライバシーポリシー
 

src/templates/TopTemplate/TopTemplate.stories.tsx

@@ -1,9 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import Image from 'next/image';
-
 import internalServerError from '../../images/internal_server_error.webp';
-
-import { type LgtmImage, type CatImagesFetcher } from '../../types';
+import { type CatImagesFetcher, type LgtmImage } from '../../types';
 import { TopTemplate } from './.';
 
 const meta: Meta<typeof TopTemplate> = {