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

Frontend library bumps #95

Merged
merged 4 commits into from
Sep 30, 2021
Merged

Frontend library bumps #95

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
00c48ce
Update node & libraries, removing unused ones. Fix sass deprecation w…
Sep 22, 2021
88cd467
Move build dependencies to devDependencies as per advice in https://g…
Sep 22, 2021
5c06e11
Use node 16 as it will be LTS in four days and it doesn't log noise a…
Sep 22, 2021
ed81978
Mention Node version and nvm in README and
Sep 23, 2021
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
1 change: 1 addition & 0 deletions .nvmrc
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
16
2 changes: 1 addition & 1 deletion Dockerfile
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
FROM node:12-alpine AS builder
FROM node:16-alpine AS builder

WORKDIR /home/foodbank/frontend

Expand Down
4 changes: 3 additions & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,9 @@ When running locally, you have two options:

#### Prerequisites
* Install **Make** - Mac (builtin in *[Xcode](https://developer.apple.com/xcode/)*) | Ubuntu (builtin)
* Install **NodeJS & npmjs** - [Mac](https://nodejs.org/en/download/) | [Ubuntu](https://github.com/nodesource/distributions)
* Install **NodeJS v16 or above** - [Mac](https://nodejs.org/en/download/) | [Ubuntu](https://github.com/nodesource/distributions)
* [nvm](https://github.com/nvm-sh/nvm) can be helpful to manage separate versions of node on Mac or Linux
* Once installed run `nvm install 16` and `nvm use`.
* Install **Python 3.8** - [Mac](https://www.python.org/downloads/mac-osx/) | [Ubuntu](https://launchpad.net/~deadsnakes/+archive/ubuntu/ppa) (*python3.8 python3.8-dev python3.8-venv*)
* Install **Git** - Mac (builtin in *[Xcode](https://developer.apple.com/xcode/)*) | Ubuntu (builtin)
* Install **WeasyPrint's Dependencies** - [All Platforms](https://weasyprint.readthedocs.io/en/stable/install.html#)
Expand Down
55,101 changes: 44,258 additions & 10,843 deletions frontend/package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

39 changes: 17 additions & 22 deletions frontend/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,28 +3,23 @@
"version": "0.1.0",
"private": true,
"dependencies": {
"@fortawesome/fontawesome-svg-core": "^1.2.28",
"@fortawesome/free-regular-svg-icons": "^5.13.0",
"@fortawesome/free-solid-svg-icons": "^5.13.0",
"@fortawesome/react-fontawesome": "^0.1.9",
"@testing-library/jest-dom": "^4.2.4",
Copy link
Collaborator Author

Choose a reason for hiding this comment

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

We've not got any tests :) we can put these back when we add some

"@testing-library/react": "^9.5.0",
"@testing-library/user-event": "^7.2.1",
"babel-polyfill": "^6.26.0",
Copy link
Collaborator Author

Choose a reason for hiding this comment

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

Hmm I need to revisit this one, I thought Create React App would include the polyfills based on the browserlist key but we might need to import it manually maybe (https://babeljs.io/docs/en/babel-polyfill.html).

We might not need polyfills at all, I wonder what the minimum Safari version is in use in the warehouse

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

Hmm so a quick look at https://caniuse.com/es6 and Safari has not needed a polyfill since v10, release in Sep 20 2016. So I think we're probably fine? If not Create React App has their own polyfill we can use which doesn't tie us to Babel (I can dream that one day CRA will drop it haha)

"cross-fetch": "^3.0.4",
Copy link
Collaborator Author

Choose a reason for hiding this comment

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

I'm pretty sure fetch is supported in all the browsers we target and we're not doing any server-side rendering which is the other use case for these libraries

"date-fns": "^2.13.0",
"node-sass": "^4.14.1",
Copy link
Collaborator Author

Choose a reason for hiding this comment

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

This is deprecated in favour of sass, which as a bonus is pure javascript so no more horrible node-gyp build failures after upgrades.

"prop-types": "^15.7.2",
Copy link
Collaborator Author

@mbarton mbarton Sep 22, 2021 •
edited
Loading

Choose a reason for hiding this comment

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

We only had PropTypes in one component and tbh I'd rather incrementally adopt Typescript than add more of them

"react": "^16.13.1",
"react-datepicker": "^2.14.1",
"react-dom": "^16.13.1",
"react-redux": "^7.2.0",
"react-router-dom": "^5.2.0",
"react-scripts": "3.4.1",
"react-select": "^3.1.0",
"redux": "^4.0.5",
"redux-thunk": "^2.3.0",
"typescript": "^3.8.3"
Copy link
Collaborator Author

Choose a reason for hiding this comment

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

No Typescript yet but we can add it back when we need it :)

"@fortawesome/fontawesome-svg-core": "1.2.36",
Copy link
Collaborator Author

Choose a reason for hiding this comment

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

I've pinned each version exactly. We've got a minimal set of direct dependencies but still better safe than investigating random errors because we pulled in a new version :)

"@fortawesome/free-regular-svg-icons": "5.15.4",
"@fortawesome/free-solid-svg-icons": "5.15.4",
"@fortawesome/react-fontawesome": "0.1.15",
"date-fns": "2.23.0",
"react": "17.0.2",
"react-datepicker": "4.2.1",
"react-dom": "17.0.2",
"react-redux": "7.2.5",
"react-router-dom": "5.3.0",
"react-select": "4.3.1",
"redux": "4.1.1",
"redux-thunk": "2.3.0"
},
"devDependencies": {
"react-scripts": "4.0.3",
Copy link
Collaborator Author

@mbarton mbarton Sep 22, 2021 •
edited
Loading

Choose a reason for hiding this comment

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

With our build deps as devDependencies we can run npm audit --production to get the actual number of affected vulnerabilities not thousands of nonsense Regex DoS CVEs that only affect our build tools. This is official advice from Create React App too (facebook/create-react-app#11174)

"sass": "1.42.1"
},
"scripts": {
"start": "react-scripts start",
Expand Down
14 changes: 0 additions & 14 deletions frontend/src/components/common/paginator.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import React from 'react';
import PropTypes from 'prop-types';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import './styles/paginator.scss';

Expand Down Expand Up @@ -139,14 +138,6 @@ export default class Paginator extends React.Component {
}
}

Paginator.propTypes = {
pages: PropTypes.number,
selectedPage: PropTypes.number,
pageSize: PropTypes.number,
totalRecords: PropTypes.number,
onSelect: PropTypes.func
}

function Page(props) {
return (
<span className={'page' + (props.selected ? ' selected' : '')}
Expand All @@ -155,8 +146,3 @@ function Page(props) {
</span>
);
}

Page.propTypes = {
page: PropTypes.number.isRequired,
selected: PropTypes.bool
};
7 changes: 4 additions & 3 deletions frontend/src/components/common/styles/paginator.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
@import 'include';
@use 'sass:math';
Copy link
Collaborator Author

Choose a reason for hiding this comment

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

This fixes a deprecation warning, the division syntax is going away in future versions of sass


@import 'include';

.paginator {

Expand All @@ -8,7 +9,7 @@
align-items: flex-end;

.page {
margin: 0 $pad-half / 2;
margin: 0 math.div($pad-half, 2);
padding: $pad-half;
display: inline-block;
min-width: $pad-double;
Expand Down Expand Up @@ -44,7 +45,7 @@
.page-spacer {
display: inline-block;
min-width: $pad-double;
margin: 0 $pad-half / 2;
margin: 0 math.div($pad-half, 2);
text-align: center;
padding: $pad-half 0;
}
Expand Down
12 changes: 7 additions & 5 deletions frontend/src/components/header/styles/tab.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,15 @@
@use 'sass:math';

@import 'include';

.tab {
display: flex;
margin-right: $pad-half / 2;
margin-right: math.div($pad-half, 2);
background-color: $colour-tab;
color: $colour-tab-text;
cursor: pointer;
border-top-right-radius: $pad-half / 2;
border-top-left-radius: $pad-half / 2;
border-top-right-radius: math.div($pad-half, 2);
border-top-left-radius: math.div($pad-half, 2);
font-size: 1.25rem;

&:hover {
Expand All @@ -30,8 +32,8 @@
a {
display: inline-block;
padding: $pad-standard $pad-standard .8rem;
border-top-right-radius: $pad-half / 2;
border-top-left-radius: $pad-half / 2;
border-top-right-radius: math.div($pad-half, 2);
border-top-left-radius: math.div($pad-half, 2);
color: inherit;
background-color: inherit;
}
Expand Down
5 changes: 3 additions & 2 deletions frontend/src/components/lists/styles/item-form.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
@import 'include';
@use 'sass:math';

@import 'include';

.item-form {

Expand All @@ -19,7 +20,7 @@
box-sizing: border-box;
border: 1px solid $colour-border;
border-radius: 2px;
padding: $pad-half / 2;
padding: math.div($pad-half, 2);
font-size: 14px;

&:focus {
Expand Down
4 changes: 3 additions & 1 deletion frontend/src/index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
@use 'sass:math';

@import 'include';
@import 'fontawesome/fontawesome.scss';
@import 'fontawesome/regular.scss';
Expand Down Expand Up @@ -211,7 +213,7 @@ button, .button {
}

&.btn-small {
padding: $pad-half / 2 $pad-half;
padding: math.div($pad-half, 2) $pad-half;
}

&:disabled {
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/redux/reducers/calendars.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ const initialState = {
calendars: []
};

export default function(state = initialState, action) {
export default function calendars(state = initialState, action) {
switch(action.type) {
case LOAD_CALENDARS:
return { ...state, status: STATUS_LOADING };
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/redux/reducers/lists.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ const initialState = {
unsaved: false
};

export default function(state = initialState, action) {
export default function lists(state = initialState, action) {
switch (action.type) {

case LOAD_LISTS:
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/redux/reducers/requests.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,7 +80,7 @@ const initialState = {
editUrl: ''
};

export default function(state = initialState, action) {
export default function requests(state = initialState, action) {
switch (action.type) {

case LOAD_REQUESTS: {
Expand Down
1 change: 0 additions & 1 deletion frontend/src/service/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
import fetch from 'cross-fetch';
import { format, parse } from 'date-fns';
import { COLLECTION_CENTRES_FILTER_KEY, TIME_OF_DAY_FILTER_KEY, STATUSES_FILTER_KEY, DATE_FORMAT_REQUEST, DATE_FORMAT_TIMESTAMP } from '../constants';

Expand Down
5 changes: 0 additions & 5 deletions frontend/src/setupTests.js
View file
Open in desktop

This file was deleted.

6 changes: 4 additions & 2 deletions frontend/src/styles/fontawesome/_larger.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,12 @@
@use 'sass:math';

// Icon Sizes
// -------------------------

// makes the font 33% larger relative to the icon container
.#{$fa-css-prefix}-lg {
font-size: (4em / 3);
line-height: (3em / 4);
font-size: math.div(4em, 3);
line-height: math.div(3em, 4);
vertical-align: -.0667em;
}

Expand Down
4 changes: 3 additions & 1 deletion frontend/src/styles/fontawesome/_list.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,11 @@
@use 'sass:math';

// List Icons
// -------------------------

.#{$fa-css-prefix}-ul {
list-style-type: none;
margin-left: $fa-li-width * 5/4;
margin-left: math.div($fa-li-width * 5, 4);
padding-left: 0;

> li { position: relative; }
Expand Down
4 changes: 3 additions & 1 deletion frontend/src/styles/fontawesome/_variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
@use 'sass:math';

// Variables
// --------------------------

Expand All @@ -10,7 +12,7 @@ $fa-version: "5.13.0" !default;
$fa-border-color: #eee !default;
$fa-inverse: #fff !default;
$fa-li-width: 2em !default;
$fa-fw-width: (20em / 16);
$fa-fw-width: math.div(20em, 16);
$fa-primary-opacity: 1 !default;
$fa-secondary-opacity: .4 !default;

Expand Down