Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Upgrade node and npm packages #484

Merged
merged 10 commits into from
May 4, 2022
Merged

Upgrade node and npm packages #484

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
bcb01c2
Upgrade to node 18
MrOrz Apr 28, 2022
94294c6
Update NodeJS to 18
MrOrz Apr 28, 2022
a422e2d
Update packages and test snapshots
MrOrz Apr 28, 2022
a6510bb
Fix new lint error due to lint tool upgrade
MrOrz Apr 28, 2022
98b7da8
Rollback to nodejs 16
MrOrz Apr 28, 2022
5d5dfcf
Make nextjs build properly
MrOrz Apr 28, 2022
d0b05b9
Fix instruction in README
MrOrz Apr 28, 2022
6277309
Use alpine image to shrink final image size
MrOrz Apr 28, 2022
49e6d87
Fix static storybook in Docker images
MrOrz Apr 28, 2022
b0d2fd5
Upgrade eslint, storybook and jest
MrOrz Apr 28, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
36 changes: 18 additions & 18 deletions .eslintrc.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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: {
Expand All @@ -32,6 +32,6 @@ module.exports = {
},
settings: {
'import/resolver': { 'babel-module': {} },
'react': { version: 'detect' }
}
react: { version: 'detect' },
},
};
8 changes: 6 additions & 2 deletions .storybook/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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',
}),
};
4 changes: 2 additions & 2 deletions Dockerfile
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
FROM node:12 AS builder
FROM node:16 AS builder
WORKDIR /srv/www

# make node_modules cached.
Expand Down Expand Up @@ -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
Expand Down
6 changes: 3 additions & 3 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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.
Expand Down
73 changes: 37 additions & 36 deletions components/ActionMenu/__snapshots__/ActionMenu.stories.storyshot
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ exports[`Storyshots ActionMenu Default 1`] = `
className="MuiButton-label"
>
<svg
aria-hidden="true"
aria-hidden={true}
className="MuiSvgIcon-root"
focusable="false"
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Does storybook forget to change focusable="false" to focusable={false} ?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Personally I don't know why this would change XD
For DOM elements, {true} and "true" are probably identical

viewBox="0 0 24 24"
Expand All @@ -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
Expand All @@ -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}
Expand Down Expand Up @@ -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}
Expand All @@ -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>
Expand All @@ -163,7 +164,7 @@ exports[`Storyshots ActionMenu Default 1`] = `
data-test="sentinelEnd"
tabIndex={0}
/>
</TrapFocus>
</Unstable_TrapFocus>
</div>
</Portal>
</ActionMenu>
Expand Down
2 changes: 1 addition & 1 deletion components/AppLayout/AppHeader.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}>
Expand Down
15 changes: 11 additions & 4 deletions components/AppLayout/__snapshots__/UpgradeDialog.stories.storyshot
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -345,7 +352,7 @@ exports[`Storyshots UpgradeDialog Default 1`] = `
data-test="sentinelEnd"
tabIndex={0}
/>
</TrapFocus>
</Unstable_TrapFocus>
</div>
</Portal>
</UpgradeDialogLayout>
Expand Down
64 changes: 29 additions & 35 deletions ...s/ArticleReplyFeedbackControl/__snapshots__/ArticleReplyFeedbackControl.stories.storyshot
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand All @@ -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"
Expand Down Expand Up @@ -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"
Expand All @@ -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"
Expand All @@ -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>
Expand Down
1 change: 1 addition & 0 deletions components/Card.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 => ({
Expand Down
6 changes: 4 additions & 2 deletions components/Infos/TimeInfo.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -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(
Expand Down
Loading