New release v11.0.0 (Update v9.0.0 from upstream aka FTW-hourly)

.circleci/config.yml

@@ -2,7 +2,7 @@ version: 2
 jobs:
   format:
     docker:
-      - image: circleci/node:12.20
+      - image: cimg/node:14.19
     steps:
       - checkout
       - restore_cache:
@@ -25,7 +25,7 @@ jobs:
           command: yarn run format-ci
   test:
     docker:
-      - image: circleci/node:12.20
+      - image: cimg/node:14.19
     steps:
       - checkout
       - restore_cache:
@@ -48,7 +48,7 @@ jobs:
           command: yarn run test-ci
   build:
     docker:
-      - image: circleci/node:12.20
+      - image: cimg/node:14.19
     steps:
       - checkout
       - restore_cache:
@@ -71,7 +71,7 @@ jobs:
           command: yarn run build
   audit:
     docker:
-      - image: circleci/node:12.20
+      - image: cimg/node:14.19
     steps:
       - checkout
       - restore_cache:

.prettierignore

@@ -6,3 +6,4 @@ src/components/index.js
 src/containers/index.js
 src/forms/index.js
 src/routeConfiguration.js
+src/components/ImageCarousel/image-gallery.css

CHANGELOG.md

@@ -17,6 +17,29 @@ https://github.com/sharetribe/flex-template-web/
 
 ## Upcoming version 2022-XX-XX
 
+## [v11.0.0] 2022-07-11
+
+This is a major release since it includes a major update to sharetribe-scripts aka our fork of
+Create React App.It includes major update to Webpack (v4 > v5) and PostCSS (v7 > v8). These caused
+some advanced CSS syntax to be invalid - and therefore some changes must be done to CSS files.
+
+- CSS Property Sets are deprecated and the related file is removed from the codebase
+- Custom media queries file need to be imported in all the files, that use them.
+
+Read more from PR: https://github.com/sharetribe/ftw-daily/pull/1531
+
+### Updates from upstream (FTW-daily v9.0.0)
+
+- [change] sharetribe-scripts is updated to v6.0.0. This causes a new major release for FTW
+  templates. Because most of the CSS files need to be updated!
+  [#1531](https://github.com/sharetribe/ftw-daily/pull/1531)
+
+- [change] ImageCarousel uses react-image-gallery. It renders all the images early on and supports
+  touch swipes. [#1529](https://github.com/sharetribe/ftw-daily/pull/1529)
+- [fix] Fixing a small typo. [#1518](https://github.com/sharetribe/ftw-daily/pull/1518)
+
+[v11.0.0]: https://github.com/sharetribe/ftw-hourly/compare/v10.6.1...v11.0.0
+
 ## [v10.6.1] 2022-05-19
 
 - [fix] undefined REACT_APP_GOOGLE_ANALYTICS_ID caused an error. There was also invalid characters

package.json

@@ -1,12 +1,12 @@
 {
   "name": "app",
-  "version": "10.6.1",
+  "version": "11.0.0",
   "private": true,
   "license": "Apache-2.0",
   "dependencies": {
     "@babel/runtime": "^7.17.9",
-    "@loadable/component": "^5.14.1",
-    "@loadable/server": "^5.14.2",
+    "@loadable/component": "^5.15.2",
+    "@loadable/server": "^5.15.2",
     "@mapbox/polyline": "^1.1.1",
     "@sentry/browser": "^6.19.7",
     "@sentry/node": "^6.19.7",
@@ -21,8 +21,8 @@
     "core-js": "^3.22.5",
     "cors": "^2.8.5",
     "decimal.js": "^10.3.1",
-    "dotenv": "8.2.0",
-    "dotenv-expand": "5.1.0",
+    "dotenv": "^10.0.0",
+    "dotenv-expand": "^5.1.0",
     "express": "^4.18.1",
     "express-enforces-ssl": "^1.1.0",
     "express-sitemap": "^1.8.0",
@@ -34,7 +34,7 @@
     "jstimezonedetect": "^1.0.7",
     "lodash": "^4.17.21",
     "mapbox-gl-multitouch": "^1.0.3",
-    "moment": "^2.29.3",
+    "moment": "^2.29.4",
     "moment-timezone": "^0.5.34",
     "object.entries": "^1.1.5",
     "object.values": "^1.1.5",
@@ -51,16 +51,17 @@
     "react-final-form": "^6.5.9",
     "react-final-form-arrays": "^3.1.3",
     "react-helmet-async": "^1.3.0",
+    "react-image-gallery": "^1.0.9",
     "react-intl": "^5.25.1",
     "react-moment-proptypes": "^1.8.1",
     "react-redux": "^7.2.8",
     "react-router-dom": "^5.3.2",
     "react-with-direction": "^1.4.0",
-    "redux": "^4.1.2",
+    "redux": "^4.2.0",
     "redux-thunk": "^2.4.1",
     "seedrandom": "^3.0.5",
     "sharetribe-flex-sdk": "^1.17.0",
-    "sharetribe-scripts": "5.0.1",
+    "sharetribe-scripts": "6.0.0",
     "smoothscroll-polyfill": "^0.4.0",
     "source-map-support": "^0.5.21",
     "url": "^0.11.0"
@@ -122,7 +123,7 @@
     ]
   },
   "engines": {
-    "node": "^12.19.0 || >=14.15.0 <17"
+    "node": ">=14.15.0"
   },
   "prettier": {
     "singleQuote": true,

src/components/ActivityFeed/ActivityFeed.module.css

@@ -1,17 +1,17 @@
-@import '../../styles/propertySets.css';
+@import '../../styles/customMediaQueries.css';
 
 .root {
   margin: 0;
 
   /* Clearfix */
-  @apply --clearfix;
+  composes: clearfix from global;
 }
 
 .messageItem {
   margin-bottom: 20px;
 
   /* Clearfix */
-  @apply --clearfix;
+  composes: clearfix from global;
 
   @media (--viewportMedium) {
     margin-bottom: 17px;
@@ -48,12 +48,12 @@
 }
 
 .ownMessageContentWrapper {
-  @apply --clearfix;
+  composes: clearfix from global;
 }
 
 .messageContent,
 .ownMessageContent {
-  @apply --marketplaceMessageFontStyles;
+  composes: marketplaceMessageFontStyles from global;
 
   display: inline-block;
   margin: 0;
@@ -79,7 +79,7 @@
 
 .messageDate,
 .ownMessageDate {
-  @apply --marketplaceMessageDateFontStyles;
+  composes: marketplaceMessageDateFontStyles from global;
 
   margin: 11px 0 0 0;
   color: var(--matterColorAnti);
@@ -97,7 +97,7 @@
   margin-bottom: 18px;
 
   /* Clearfix */
-  @apply --clearfix;
+  composes: clearfix from global;
 
   @media (--viewportMedium) {
     margin-bottom: 16px;
@@ -119,12 +119,12 @@
 }
 
 .transitionContent {
-  @apply --marketplaceTxTransitionFontStyles;
+  composes: marketplaceTxTransitionFontStyles from global;
   margin: 0;
 }
 
 .transitionDate {
-  @apply --marketplaceMessageDateFontStyles;
+  composes: marketplaceMessageDateFontStyles from global;
   color: var(--matterColorAnti);
   margin: 7px 0 0 0;
 
@@ -138,7 +138,7 @@
 }
 
 .reviewContent {
-  @apply --marketplaceH4FontStyles;
+  composes: h4 from global;
   font-style: italic;
   white-space: pre-line;
   margin: 8px 0 0 0;

src/components/BookingBreakdown/BookingBreakdown.module.css

@@ -1,4 +1,4 @@
-@import '../../styles/propertySets.css';
+@import '../../styles/customMediaQueries.css';
 
 .root {
   display: flex;
@@ -10,7 +10,7 @@
 }
 
 .lineItem {
-  @apply --marketplaceH4FontStyles;
+  composes: h4 from global;
   margin: 0;
 
   @media (--viewportMedium) {
@@ -40,7 +40,7 @@
 }
 
 .dayLabel {
-  @apply --marketplaceH5FontStyles;
+  composes: h5 from global;
   margin: 0;
   color: var(--matterColorAnti);
   line-height: 24px;
@@ -54,11 +54,11 @@
 }
 
 .dayInfo {
-  @apply --marketplaceButtonFontStyles;
+  composes: buttonFont from global;
 }
 
 .subTotalLineItem {
-  @apply --marketplaceH4FontStyles;
+  composes: h4 from global;
   font-weight: var(--fontWeightBold);
   margin: 0;
   padding: 5px 0 1px 0;
@@ -73,7 +73,7 @@
 }
 
 .lineItemTotal {
-  @apply --marketplaceH4FontStyles;
+  composes: h4 from global;
   margin: 0;
   padding-top: 6px;
   padding-bottom: 6px;
@@ -87,13 +87,21 @@
     padding-bottom: 2px;
   }
 }
+
+.smallFontStyles {
+  font-family: var(--fontFamily);
+  font-weight: var(--fontWeightMedium);
+  font-size: 14px;
+  line-height: 24px;
+}
+
 .itemLabel {
-  @apply --marketplaceSmallFontStyles;
+  composes: smallFontStyles;
   flex: 1;
 }
 
 .itemValue {
-  @apply --marketplaceSmallFontStyles;
+  composes: smallFontStyles;
   margin: 0 0 0 10px;
 }
 
@@ -112,17 +120,17 @@
 }
 
 .totalLabel {
-  @apply --marketplaceSmallFontStyles;
+  composes: smallFontStyles;
 }
 
 .totalPrice {
-  @apply --marketplaceButtonFontStyles;
+  composes: buttonFont from global;
   margin: 0 0 0 10px;
   padding-top: 0px;
 }
 
 .feeInfo {
-  @apply --marketplaceTinyFontStyles;
+  composes: marketplaceTinyFontStyles from global;
   flex-shrink: 0;
   margin: 0;
   color: var(--matterColorAnti);

src/components/BookingPanel/BookingPanel.module.css

@@ -1,9 +1,9 @@
-@import '../../styles/propertySets.css';
+@import '../../styles/customMediaQueries.css';
 
 /* Booking form inside modalContainer needs special handling */
 /* since "inMobile" breakpoint is actually --viewportLarge */
 .modalContainer {
-  @apply --marketplaceModalInMobileBaseStyles;
+  composes: marketplaceModalInMobileBaseStyles from global;
 
   height: 100vh;
 
@@ -40,7 +40,6 @@
 
 .title {
   /* Font */
-  @apply --marketplaceH1FontStyles;
   color: var(--matterColor);
 
   /* Layout */
@@ -55,7 +54,7 @@
 
 .author {
   width: 100%;
-  @apply --marketplaceH4FontStyles;
+  composes: h4 from global;
   margin-top: 7px;
   margin-bottom: 0;
 
@@ -90,7 +89,7 @@
 
 .desktopPriceValue {
   /* Font */
-  @apply --marketplaceH2FontStyles;
+  composes: h2 from global;
   color: var(--marketplaceColor);
 
   @media (--viewportMedium) {
@@ -101,7 +100,7 @@
 
 .desktopPerUnit {
   /* Font */
-  @apply --marketplaceH5FontStyles;
+  composes: h5 from global;
   color: var(--matterColor);
 
   @media (--viewportMedium) {
@@ -113,16 +112,16 @@
 
 .bookingTitle {
   /* Font */
-  @apply --marketplaceH3FontStyles;
+  composes: h3 from global;
   color: var(--matterColor);
 
   margin-top: 0;
   margin-bottom: 2px;
 }
 
 .bookingHelp {
+  composes: h5 from global;
   display: none;
-  @apply --marketplaceH5FontStyles;
 
   @media (--viewportMedium) {
     color: var(--matterColor);
@@ -202,7 +201,7 @@
 
 .priceValue {
   /* Font */
-  @apply --marketplaceH2FontStyles;
+  composes: h2 from global;
   color: var(--matterColor);
 
   margin-top: 0;
@@ -215,7 +214,7 @@
 
 .perUnit {
   /* Font */
-  @apply --marketplaceTinyFontStyles;
+  composes: marketplaceTinyFontStyles from global;
   color: var(--matterColor);
 
   margin-top: 0;
@@ -227,7 +226,7 @@
 }
 
 .bookButton {
-  @apply --marketplaceButtonStylesPrimary;
+  composes: button buttonFont buttonText buttonBorders buttonColorsPrimary from global;
 
   /* Clear padding that is set for link elements looking like buttons */
   padding: 0;