Merge pull request #484 from cofacts/upgrade-node-pkg

Upgrade node and npm packages
cofacts · May 4, 2022 · 5326cca · 5326cca
2 parents 61c7e77 + b0d2fd5
commit 5326cca
Show file tree

Hide file tree

Showing 31 changed files with 38,150 additions and 44,597 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -1,26 +1,26 @@
 module.exports = {
-  parser: "babel-eslint",
+  parser: '@babel/eslint-parser',
   extends: [
-    "eslint:recommended",
-    "plugin:import/errors",
-    "plugin:import/warnings",
-    "plugin:react/recommended",
-    "plugin:react-hooks/recommended",
-    "prettier",
-    "prettier/react",
-  ],
-  plugins: [
-    "react",
-    "prettier",
+    'eslint:recommended',
+    'plugin:import/errors',
+    'plugin:import/warnings',
+    'plugin:react/recommended',
+    'plugin:react-hooks/recommended',
+    'prettier',
+    'plugin:storybook/recommended',
   ],
+  plugins: ['react', 'prettier'],
   rules: {
     'react/prop-types': 'off', // we don't use propTypes.
     'react/react-in-jsx-scope': 'off', // React import not needed in Next.js
     'react-hooks/exhaustive-deps': 'error', // Require explicit ignore when we want to skip deps
-    'prettier/prettier': ["error", {
-      "trailingComma": "es5",
-      "singleQuote": true,
-    }],
+    'prettier/prettier': [
+      'error',
+      {
+        trailingComma: 'es5',
+        singleQuote: true,
+      },
+    ],
     'no-console': ['error', { allow: ['warn', 'error'] }], // no console.log, but can use .warn and .error.
   },
   env: {
@@ -32,6 +32,6 @@ module.exports = {
   },
   settings: {
     'import/resolver': { 'babel-module': {} },
-    'react': { version: 'detect' }
-  }
+    react: { version: 'detect' },
+  },
 };
diff --git a/.storybook/main.js b/.storybook/main.js
@@ -1,8 +1,12 @@
 module.exports = {
   stories: ['../components/**/*.stories.js'],
   addons: [
-    '@storybook/addon-actions/register',
-    '@storybook/addon-knobs/register',
+    '@storybook/addon-actions',
+    '@storybook/addon-knobs',
     '@storybook/addon-storysource',
   ],
+  env: config => ({
+    ...config,
+    LOCALE: config.LOCALE ?? 'en_US',
+  }),
 };
diff --git a/Dockerfile b/Dockerfile
@@ -1,4 +1,4 @@
-FROM node:12 AS builder
+FROM node:16 AS builder
 WORKDIR /srv/www
 
 # make node_modules cached.
@@ -26,7 +26,7 @@ RUN npm run build
 RUN npm prune --production
 
 #########################################
-FROM node:12-stretch-slim
+FROM node:16-alpine
 
 WORKDIR /srv/www
 EXPOSE 3000

diff --git a/README.md b/README.md
@@ -12,7 +12,7 @@ For production via [rumors-deploy](http://github.com/cofacts/rumors-deploy), do
 
 ## Development
 
-This project uses NodeJS 12+.
+This project uses NodeJS 16+.
 
 ``` bash
 $ npm install
@@ -35,9 +35,9 @@ Build docker image.
 
 ``` bash
 # build en version
-$ docker build --build-arg APP_ID=RUMORS_SITE --build-arg LOCALE=en_US -t rumors-site-test-tw
+$ docker build --build-arg APP_ID=RUMORS_SITE --build-arg LOCALE=en_US -t rumors-site-test-en .
 # build tw version
-$ docker build --build-arg APP_ID=RUMORS_SITE --build-arg LOCALE=zh_TW -t rumors-site-test-tw
+$ docker build --build-arg APP_ID=RUMORS_SITE --build-arg LOCALE=zh_TW -t rumors-site-test-tw .
 ```
 
 This will build both `rumors-site-test` image.

diff --git a/components/ActionMenu/__snapshots__/ActionMenu.stories.storyshot b/components/ActionMenu/__snapshots__/ActionMenu.stories.storyshot
@@ -33,7 +33,7 @@ exports[`Storyshots ActionMenu Default 1`] = `
         className="MuiButton-label"
       >
         <svg
-          aria-hidden="true"
+          aria-hidden={true}
           className="MuiSvgIcon-root"
           focusable="false"
           viewBox="0 0 24 24"
@@ -43,17 +43,15 @@ exports[`Storyshots ActionMenu Default 1`] = `
           />
         </svg>
       </span>
-      <NoSsr>
-        <span
-          className="MuiTouchRipple-root"
-        >
-          <TransitionGroup
-            childFactory={[Function]}
-            component={null}
-            exit={true}
-          />
-        </span>
-      </NoSsr>
+      <span
+        className="MuiTouchRipple-root"
+      >
+        <TransitionGroup
+          childFactory={[Function]}
+          component={null}
+          exit={true}
+        />
+      </span>
     </button>
     <Portal>
       <div
@@ -72,7 +70,14 @@ exports[`Storyshots ActionMenu Default 1`] = `
           }
         }
       >
-        <TrapFocus>
+        <Unstable_TrapFocus
+          disableAutoFocus={false}
+          disableEnforceFocus={false}
+          disableRestoreFocus={false}
+          getDoc={[Function]}
+          isEnabled={[Function]}
+          open={false}
+        >
           <div
             data-test="sentinelStart"
             tabIndex={0}
@@ -114,17 +119,15 @@ exports[`Storyshots ActionMenu Default 1`] = `
                   tabIndex={0}
                 >
                   Option 1
-                  <NoSsr>
-                    <span
-                      className="MuiTouchRipple-root"
-                    >
-                      <TransitionGroup
-                        childFactory={[Function]}
-                        component={null}
-                        exit={true}
-                      />
-                    </span>
-                  </NoSsr>
+                  <span
+                    className="MuiTouchRipple-root"
+                  >
+                    <TransitionGroup
+                      childFactory={[Function]}
+                      component={null}
+                      exit={true}
+                    />
+                  </span>
                 </li>
                 <li
                   aria-disabled={false}
@@ -144,17 +147,15 @@ exports[`Storyshots ActionMenu Default 1`] = `
                   tabIndex={-1}
                 >
                   Option 2
-                  <NoSsr>
-                    <span
-                      className="MuiTouchRipple-root"
-                    >
-                      <TransitionGroup
-                        childFactory={[Function]}
-                        component={null}
-                        exit={true}
-                      />
-                    </span>
-                  </NoSsr>
+                  <span
+                    className="MuiTouchRipple-root"
+                  >
+                    <TransitionGroup
+                      childFactory={[Function]}
+                      component={null}
+                      exit={true}
+                    />
+                  </span>
                 </li>
               </ul>
             </div>
@@ -163,7 +164,7 @@ exports[`Storyshots ActionMenu Default 1`] = `
             data-test="sentinelEnd"
             tabIndex={0}
           />
-        </TrapFocus>
+        </Unstable_TrapFocus>
       </div>
     </Portal>
   </ActionMenu>

diff --git a/components/AppLayout/AppHeader.js b/components/AppLayout/AppHeader.js
@@ -336,7 +336,7 @@ function AppHeader({
       <Box
         display={['flex', 'flex', 'none']}
         height={TABS_HEIGHT}
-        css={{ backgroundColor: theme.palette.secondary[50] }}
+        sx={{ backgroundColor: theme.palette.secondary[50] }}
       >
         <Links classes={classes} unsolvedCount={unsolvedCount} />
         <div className={classes.menuToggleButton} onClick={onMenuButtonClick}>

diff --git a/components/AppLayout/__snapshots__/UpgradeDialog.stories.storyshot b/components/AppLayout/__snapshots__/UpgradeDialog.stories.storyshot
@@ -39,16 +39,23 @@ exports[`Storyshots UpgradeDialog Default 1`] = `
           }
         />
       </Transition>
-      <TrapFocus>
+      <Unstable_TrapFocus
+        disableAutoFocus={false}
+        disableEnforceFocus={false}
+        disableRestoreFocus={false}
+        getDoc={[Function]}
+        isEnabled={[Function]}
+        open={false}
+      >
         <div
           data-test="sentinelStart"
           tabIndex={0}
         />
         <Transition>
           <div
             className="MuiDialog-container MuiDialog-scrollBody"
-            onClick={[Function]}
             onMouseDown={[Function]}
+            onMouseUp={[Function]}
             role="none presentation"
             style={
               Object {
@@ -76,7 +83,7 @@ exports[`Storyshots UpgradeDialog Default 1`] = `
                   >
                     <CloseIcon>
                       <svg
-                        aria-hidden="true"
+                        aria-hidden={true}
                         className="MuiSvgIcon-root"
                         focusable="false"
                         viewBox="0 0 14 14"
@@ -345,7 +352,7 @@ exports[`Storyshots UpgradeDialog Default 1`] = `
           data-test="sentinelEnd"
           tabIndex={0}
         />
-      </TrapFocus>
+      </Unstable_TrapFocus>
     </div>
   </Portal>
 </UpgradeDialogLayout>

diff --git a/...s/ArticleReplyFeedbackControl/__snapshots__/ArticleReplyFeedbackControl.stories.storyshot b/...s/ArticleReplyFeedbackControl/__snapshots__/ArticleReplyFeedbackControl.stories.storyshot
@@ -67,7 +67,7 @@ exports[`Storyshots ArticleReplyFeedbackControl With Article Reply And Reply Set
               className="makeStyles-thumbIcon"
             >
               <svg
-                aria-hidden="true"
+                aria-hidden={true}
                 className="MuiSvgIcon-root makeStyles-thumbIcon"
                 focusable="false"
                 viewBox="0 0 17 15"
@@ -78,17 +78,15 @@ exports[`Storyshots ArticleReplyFeedbackControl With Article Reply And Reply Set
               </svg>
             </ThumbUpIcon>
           </span>
-          <NoSsr>
-            <span
-              className="MuiTouchRipple-root"
-            >
-              <TransitionGroup
-                childFactory={[Function]}
-                component={null}
-                exit={true}
-              />
-            </span>
-          </NoSsr>
+          <span
+            className="MuiTouchRipple-root"
+          >
+            <TransitionGroup
+              childFactory={[Function]}
+              component={null}
+              exit={true}
+            />
+          </span>
         </button>
         <button
           className="MuiButtonBase-root MuiButton-root MuiButton-outlined MuiButtonGroup-grouped MuiButtonGroup-groupedHorizontal MuiButtonGroup-groupedOutlined MuiButtonGroup-groupedOutlinedHorizontal MuiButtonGroup-groupedOutlined makeStyles-vote"
@@ -117,7 +115,7 @@ exports[`Storyshots ArticleReplyFeedbackControl With Article Reply And Reply Set
               className="makeStyles-thumbIcon"
             >
               <svg
-                aria-hidden="true"
+                aria-hidden={true}
                 className="MuiSvgIcon-root makeStyles-thumbIcon"
                 focusable="false"
                 viewBox="0 0 17 15"
@@ -128,17 +126,15 @@ exports[`Storyshots ArticleReplyFeedbackControl With Article Reply And Reply Set
               </svg>
             </ThumbDownIcon>
           </span>
-          <NoSsr>
-            <span
-              className="MuiTouchRipple-root"
-            >
-              <TransitionGroup
-                childFactory={[Function]}
-                component={null}
-                exit={true}
-              />
-            </span>
-          </NoSsr>
+          <span
+            className="MuiTouchRipple-root"
+          >
+            <TransitionGroup
+              childFactory={[Function]}
+              component={null}
+              exit={true}
+            />
+          </span>
         </button>
         <button
           className="MuiButtonBase-root MuiButton-root MuiButton-outlined MuiButtonGroup-grouped MuiButtonGroup-groupedHorizontal MuiButtonGroup-groupedOutlined MuiButtonGroup-groupedOutlinedHorizontal MuiButtonGroup-groupedOutlined makeStyles-vote"
@@ -163,17 +159,15 @@ exports[`Storyshots ArticleReplyFeedbackControl With Article Reply And Reply Set
           >
             See Reasons
           </span>
-          <NoSsr>
-            <span
-              className="MuiTouchRipple-root"
-            >
-              <TransitionGroup
-                childFactory={[Function]}
-                component={null}
-                exit={true}
-              />
-            </span>
-          </NoSsr>
+          <span
+            className="MuiTouchRipple-root"
+          >
+            <TransitionGroup
+              childFactory={[Function]}
+              component={null}
+              exit={true}
+            />
+          </span>
         </button>
       </div>
     </ButtonGroupDisplay>

diff --git a/components/Card.js b/components/Card.js
@@ -16,6 +16,7 @@ export const Card = withStyles(theme => ({
       '--card-px': '36px',
     },
   },
+  // eslint-disable-next-line react/display-name
 }))(forwardRef((props, ref) => <MuiCard ref={ref} elevation={0} {...props} />));
 
 export const CardHeader = withStyles(theme => ({

diff --git a/components/Infos/TimeInfo.js b/components/Infos/TimeInfo.js
@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useState, useMemo } from 'react';
 import { t } from 'ttag';
 import differenceInCalendarDays from 'date-fns/differenceInCalendarDays';
 import isValid from 'date-fns/isValid';
@@ -90,7 +90,9 @@ export function formatDate(date) {
  * @param {(t: string) => React.ReactChild} props.children - Render of string
  */
 function TimeInfo({ time, children = t => t }) {
-  const date = time instanceof Date ? time : new Date(time);
+  const date = useMemo(() => (time instanceof Date ? time : new Date(time)), [
+    time,
+  ]);
   const dateIsValid = time && isValid(date);
 
   const [timeAgoStr, setTimeAgoStr] = useState(