React-swipeable-viewsからSwiperへのリプレイス

.eslintrc.js

@@ -10,6 +10,7 @@ module.exports = {
     "plugin:@typescript-eslint/eslint-recommended",
     "plugin:prettier/recommended",
     "plugin:react-hooks/recommended",
+    "plugin:tailwindcss/recommended",
     "prettier",
   ],
   overrides: [],
@@ -18,7 +19,11 @@ module.exports = {
     ecmaVersion: "latest",
     sourceType: "module",
   },
-  plugins: ["react", "@typescript-eslint"],
+  plugins: [
+    "react",
+    "@typescript-eslint",
+    "tailwindcss",
+  ],
   rules: {
     "react/jsx-uses-react": "off",
     "react/react-in-jsx-scope": "off",

.github/workflows/firebase-hosting-merge.yml

@@ -11,7 +11,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v2
-      - run: npm ci --force && npm run build --force
+      - run: npm ci && npm run build
       - uses: FirebaseExtended/action-hosting-deploy@v0
         with:
           repoToken: "${{ secrets.GITHUB_TOKEN }}"

.github/workflows/firebase-hosting-pull-request.yml

@@ -9,7 +9,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v2
-      - run: npm ci --force && npm run build --force
+      - run: npm ci && npm run build 
       - uses: FirebaseExtended/action-hosting-deploy@v0
         with:
           repoToken: "${{ secrets.GITHUB_TOKEN }}"

package.json

@@ -20,25 +20,33 @@
     "axios": "^0.27.2",
     "classnames": "^2.3.2",
     "cors": "^2.8.5",
+    "css-select": "^5.1.0",
     "dayjs": "^1.11.3",
+    "decode-uri-component": "^0.4.1",
     "eslint-plugin-prettier": "^4.2.1",
     "firebase": "^9.8.3",
+    "json5": "^2.2.3",
+    "loader-utils": "^3.2.1",
+    "minimatch": "^7.2.0",
     "notistack": "^2.0.5",
+    "nth-check": "^2.1.1",
     "promise": "^8.1.0",
     "qrcode.react": "^3.1.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-native-swiper": "^1.6.0",
     "react-redux": "^8.0.4",
     "react-router-dom": "^6.3.0",
-    "react-scripts": "5.0.1",
+    "react-scripts": "^5.0.1",
     "react-slick": "^0.29.0",
-    "react-swipeable-views": "^0.14.0",
     "react-window": "^1.8.7",
     "redux": "^4.2.0",
     "slick-carousel": "^1.8.1",
     "stripe": "^8.222.0",
     "styled-components": "^5.3.6",
+    "svgo": "^3.0.2",
+    "swiper": "^9.0.5",
+    "terser": "^5.16.5",
     "typescript": "^4.7.3",
     "web-vitals": "^2.1.4",
     "workbox-background-sync": "^5.1.4",
@@ -58,7 +66,9 @@
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "eject": "react-scripts eject",
+    "lint": "eslint src",
+    "fix": "prettier --write .  && eslint --fix ."
   },
   "eslintConfig": {
     "extends": [
@@ -79,6 +89,7 @@
     ]
   },
   "devDependencies": {
+    "@svgr/webpack": "^6.5.1",
     "@types/react-slick": "^0.23.9",
     "@types/react-swipeable-views": "^0.13.1",
     "@types/react-window": "^1.8.5",
@@ -89,9 +100,10 @@
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-tailwindcss": "^3.10.0",
     "postcss": "^8.4.19",
-    "prettier": "^2.8.0",
-    "prettier-plugin-tailwindcss": "^0.2.0",
-    "tailwindcss": "^3.2.4"
+    "prettier": "^2.8.4",
+    "prettier-plugin-tailwindcss": "^0.2.3",
+    "tailwindcss": "^3.2.7"
   }
 }

src/component/FoodCard.tsx

@@ -36,8 +36,8 @@ export const FoodCard = (props: FoodCardProps) => {
         />
 
         {!isSale && (
-          <div className="z-1 absolute top-1/2 left-1/2 w-[80%] -translate-x-1/2 -translate-y-1/2 rotate-[-20deg] transform border-[3px] border-solid border-[#FC3f46] text-center">
-            <span className="font-[clamp(0.5rem_4.2vw_2rem)] text-[#FC3f46]">
+          <div className="absolute top-1/2 left-1/2 z-10 w-[80%] -translate-x-1/2 -translate-y-1/2 rotate-[-20deg] border-[3px] border-solid border-[#c81b20] text-center">
+            <span className="font-[clamp(0.5rem_4.2vw_2rem)] text-[#c81b20]">
               SOLD OUT
             </span>
           </div>
@@ -68,7 +68,7 @@ export const FoodCard = (props: FoodCardProps) => {
       </CardActionArea>
       {props.deleteButton && (
         <div
-          className="z-1 absolute top-[5%] right-[5%] flex rounded-full bg-white"
+          className="absolute top-[5%] right-[5%] z-10 flex rounded-full bg-white"
           onClick={props.onDelete}
         >
           <CancelIcon className="text-{rgba(0,0,0,0.8)} text-[25px]" />

src/component/LoadingAnimation.tsx

@@ -8,14 +8,14 @@ export const LoadingAnimation = (props: LoadingAnimationProps) => {
     <>
       {props.type === "jelly" && (
         <div className="relative h-[80vh] w-full">
-          <div className="absolute top-[35%] right-1/2 translate-x-1/2 -translate-y-1/2 transform">
+          <div className="absolute top-[35%] right-1/2 translate-x-1/2 -translate-y-1/2">
             <Jelly size={100} speed={0.8} color="#006C9B" />
           </div>
         </div>
       )}
       {props.type === "orbit" && (
         <div className="relative h-[12vw] w-full">
-          <div className="absolute top-[35%] right-1/2 translate-x-1/2 -translate-y-1/2 transform">
+          <div className="absolute top-[35%] right-1/2 translate-x-1/2 -translate-y-1/2">
             <Orbit size={60} speed={1.2} color="#006C9B" />
           </div>
         </div>

src/component/Order.tsx

@@ -75,7 +75,7 @@ export const Order = (props: OrderProps) => {
         <Box />
         <div className="w-full bg-[#eeece4]">
           <div
-            className={classNames("box mx-auto flex overflow-x-auto py-5", {
+            className={classNames("box mx-auto flex overflow-x-auto py-3", {
               "max-w-4xl": orderList.length <= 4,
             })}
           >

src/component/RedirectModal.tsx

@@ -26,7 +26,7 @@ export const RedirectModal = (props: RedirectModalProps) => {
     <>
       {props.isModal ? (
         <Modal open={props.isModal}>
-          <div className="fixed top-1/2 left-1/2 z-10 h-auto w-[80%] max-w-[500px] -translate-x-1/2 -translate-y-1/2 transform rounded-2xl bg-white p-5">
+          <div className="fixed top-1/2 left-1/2 z-10 h-auto w-[80%] max-w-[500px] -translate-x-1/2 -translate-y-1/2 rounded-2xl bg-white p-5">
             <h2 className="text-center text-2xl font-bold">
               注文に失敗しました
             </h2>

src/component/ResponsiveAppBar.tsx

@@ -63,7 +63,7 @@ const ResponsiveAppBar = (props: ResponsiveAppBarProps) => {
             onClick={() => {
               window.location.href = "/";
             }}
-            className="absolute left-1/2 max-w-[260px] -translate-x-1/2 transform text-2xl text-white"
+            className="absolute left-1/2 max-w-[260px] -translate-x-1/2 text-2xl text-white"
           >
             <img
               src="https://firebasestorage.googleapis.com/v0/b/mobile-order-4d383.appspot.com/o/runticket.png?alt=media&token=f27edb3e-3806-43bf-b1fb-2179dcc23f07"

src/component/SwipeTabs.tsx

@@ -1,20 +1,22 @@
 import * as React from "react";
-import SwipeableViews from "react-swipeable-views";
 import Tabs from "@mui/material/Tabs";
 import Tab from "@mui/material/Tab";
 import { FoodCard } from "./FoodCard";
 import { Grid } from "@mui/material";
 import { MenuData } from "../types";
 import { CategoryProp } from "../views/Menu";
 import styled from "@emotion/styled";
+import { Swiper, SwiperSlide } from "swiper/react";
+import type { Swiper as SwiperCore } from "swiper";
+import "swiper/css";
+import { useMemo, useRef, useState } from "react";
 
 interface TabPanelProps {
   children?: React.ReactNode;
   dir?: string;
   index: number;
   value: number;
 }
-
 interface SwipeTabsProps {
   menu: MenuData[];
   category: CategoryProp[];
@@ -50,14 +52,20 @@ function a11yProps(index: number) {
 }
 
 export default function SwipeTabs(props: SwipeTabsProps) {
-  const [value, setValue] = React.useState(0);
   const menuCategoryArray: CategoryProp[] = props.category;
+  const [value, setValue] = useState(0);
+  const swiperRef = useRef<SwiperCore | null>(null);
+
   const handleChange = (event: React.SyntheticEvent, newValue: number) => {
     setValue(newValue);
+    swiperRef.current?.slideTo(newValue);
   };
-
-  const handleChangeIndex = (index: number) => {
-    setValue(index);
+  const onSwiper = (currentSwiper: SwiperCore) => {
+    const swiperInstance = currentSwiper;
+    swiperRef.current = swiperInstance;
+  };
+  const onSlideChange = (currentSwiper: SwiperCore) => {
+    setValue(currentSwiper.activeIndex);
   };
 
   return (
@@ -72,59 +80,63 @@ export default function SwipeTabs(props: SwipeTabsProps) {
           aria-label="full width tabs example"
         >
           {menuCategoryArray.map((e, i) => {
-            return <Tab key={e} label={e} {...a11yProps(i)} />;
+            return <Tab key={i} label={e} {...a11yProps(i)} />;
           })}
         </Tabs>
       </SwipeTabsWapper>
-      <SwipeableViews
-        className="mx-auto max-w-[730px] py-1"
-        index={value}
-        onChangeIndex={handleChangeIndex}
+      <Swiper
+        simulateTouch={false}
+        spaceBetween={50}
+        slidesPerView={1}
+        onSwiper={onSwiper}
+        onSlideChange={onSlideChange}
       >
         {menuCategoryArray.map((category: string, index: number) => {
           return (
-            <TabPanel value={value} index={index} key={index}>
-              <FilterMenuData
-                menu={props.menu}
-                categoryMode={category}
-                setChosenMenu={props.setChosenMenu}
-                setDetailDialogOpen={props.setDetailDialogOpen}
-                category={props.category}
-              />
-            </TabPanel>
+            <SwiperSlide key={index}>
+              <TabPanel value={value} index={index}>
+                <FilterMenuData
+                  menu={props.menu}
+                  categoryMode={category}
+                  setChosenMenu={props.setChosenMenu}
+                  setDetailDialogOpen={props.setDetailDialogOpen}
+                  category={props.category}
+                />
+              </TabPanel>
+            </SwiperSlide>
           );
         })}
-      </SwipeableViews>
+      </Swiper>
     </div>
   );
 }
 
 const FilterMenuData = (props: FilterMenuDataProps) => {
+  const filteredMenu = useMemo(() => {
+    return props.menu.filter(
+      (item: MenuData) => item.category === props.categoryMode && item.isStatus
+    );
+  }, [props.categoryMode, props.menu]);
   return (
-    <Grid padding={1.5} container spacing={1.5} justifyContent="center">
+    <Grid padding={1.5} container spacing={1.5} justifyContent="start">
       <Spacer appBarHeight={props.appBarHeight || 56} mode={"menu"} />
-      {props.menu
-        .filter(
-          (item: MenuData) =>
-            item.category === props.categoryMode && item.isStatus
-        )
-        .map((menu: MenuData, index: number) => {
-          return (
-            <Grid item key={index} xs={6} sm={4}>
-              <FoodCard
-                menu={menu as MenuData}
-                deleteButton={false}
-                onClick={function (): void {
-                  menu.isBigSize === true &&
-                    props.setChosenMenu(menu as MenuData);
-                  menu.isBigSize === false &&
-                    props.setChosenMenu(menu as MenuData);
-                  props.setDetailDialogOpen(true);
-                }}
-              />
-            </Grid>
-          );
-        })}
+      {filteredMenu.map((menu: MenuData, index: number) => {
+        return (
+          <Grid item key={index} xs={6} sm={4}>
+            <FoodCard
+              menu={menu as MenuData}
+              deleteButton={false}
+              onClick={function (): void {
+                menu.isBigSize === true &&
+                  props.setChosenMenu(menu as MenuData);
+                menu.isBigSize === false &&
+                  props.setChosenMenu(menu as MenuData);
+                props.setDetailDialogOpen(true);
+              }}
+            />
+          </Grid>
+        );
+      })}
     </Grid>
   );
 };
@@ -135,7 +147,7 @@ const SwipeTabsWapper = styled.div`
   left: 0;
   width: 100%;
   height: 100%;
-  z-index: 1;
+  z-index: 10;
   pointer-events: none;
 `;
 

src/component/icons/PhoneMock.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable tailwindcss/no-custom-classname */
 import { CSSProperties } from "react";
 
 interface Props {

src/component/icons/QrCodeMock.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable tailwindcss/no-custom-classname */
 import { CSSProperties } from "react";
 
 interface Props {

src/views/Help.tsx

@@ -61,13 +61,13 @@ export const Help = (props: { appBarHeight: number }) => {
               src="/help/printer.svg"
               alt="menu"
               width={"50%"}
-              className="rotate-[-10deg] transform"
+              className="rotate-[-10deg]"
             />
             <img
               src="/help/scanner.svg"
               alt="menu"
               width={"50%"}
-              className="rotate-[-10deg] transform"
+              className="rotate-[-10deg]"
             />
           </div>
         </div>

src/views/Menu.tsx

@@ -71,7 +71,7 @@ export const Menu = ({ appBarHeight }: Props) => {
   }, [orderData.length]);
 
   return (
-    <div className="relative">
+    <div className="relative mx-auto max-w-3xl">
       {isGetMenu ? (
         <div>
           {isTodayNotReceived && (

src/views/OrderCompleted.tsx

@@ -78,7 +78,7 @@ export const OrderCompleted = ({ appBarHeight }: Props) => {
                     </h2>
                     <div className="relative h-full w-full py-20">
                       <QRCodeSVG
-                        className="absolute top-0 right-1/2 translate-x-1/2 transform"
+                        className="absolute top-0 right-1/2 translate-x-1/2"
                         value={orderData?.id}
                         size={150}
                       />