New release v10.0.0 (Update v9.0.0 from upstream aka FTW-daily)

.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

@@ -5,6 +5,7 @@ public/
 src/components/index.js
 src/containers/index.js
 src/containers/ListingPage/ListingImageGallery/image-gallery.css
+src/containers/ListingPage/ImageCarousel/image-gallery.css
 src/examples.js
 src/forms/index.js
 src/routing/routeConfiguration.js

CHANGELOG.md

@@ -14,6 +14,29 @@ way to update this template, but currently, we follow a pattern:
 
 ## Upcoming version 2022-XX-XX
 
+## [v10.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
+
+Changes:
+
+- [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)
+
+  [v10.0.0]: https://github.com/sharetribe/ftw-product/compare/v9.3.1...v10.0.0
+
 ## [v9.3.1] 2022-05-19
 
 - [fix] undefined REACT_APP_GOOGLE_ANALYTICS_ID caused an error.

package.json

@@ -1,12 +1,12 @@
 {
   "name": "app",
-  "version": "9.3.1",
+  "version": "10.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",
@@ -33,7 +33,7 @@
     "jose": "4.8.1",
     "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",
@@ -50,17 +50,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-image-gallery": "^1.2.8",
     "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"
@@ -121,7 +121,7 @@
     ]
   },
   "engines": {
-    "node": "^12.19.0 || >=14.15.0 <17"
+    "node": ">=14.15.0"
   },
   "prettier": {
     "singleQuote": true,

src/components/Button/Button.module.css

@@ -1,21 +1,21 @@
-@import '../../styles/propertySets.css';
+@import '../../styles/customMediaQueries.css';
 
 .root {
-  @apply --marketplaceButtonStyles;
+  composes: button buttonFont buttonText buttonBorders buttonColors from global;
 
   /* Clear padding that is set for link elements looking like buttons */
   padding: 0;
 }
 
 .primaryButtonRoot {
-  @apply --marketplaceButtonStylesPrimary;
+  composes: button buttonFont buttonText buttonBorders buttonColorsPrimary from global;
 
   /* Clear padding that is set for link elements looking like buttons */
   padding: 0;
 }
 
 .secondaryButtonRoot {
-  @apply --marketplaceButtonStylesSecondary;
+  composes: button buttonFont buttonText buttonBordersSecondary buttonColorsSecondary from global;
 
   /* We must lift up the text from the center since it looks better with
    the button border. Also clears the top padding set for link
@@ -24,7 +24,7 @@
 }
 
 .inlineTextButtonRoot {
-  @apply --marketplaceLinkStyles;
+  composes: a from global;
 }
 
 .primaryButton {
@@ -110,11 +110,13 @@
 /* Social logins && SSO buttons */
 
 .socialButtonRoot {
-  @apply --marketplaceButtonStyles;
+  composes: button buttonFont buttonText from global;
+
   min-height: 48px;
-  background-color: var(--matterColorLight);
 
+  background-color: var(--matterColorLight);
   color: var(--matterColorDark);
+
   font-weight: var(--fontWeightMedium);
   font-size: 14px;
 
@@ -134,6 +136,7 @@
   }
   &:disabled {
     background-color: var(--matterColorNegative);
+    color: var(--matterColorLight);
   }
 }
 

src/components/Button/ButtonExample.module.css

@@ -1,19 +1,18 @@
-@import '../../styles/propertySets.css';
-
 .buttonLink {
-  @apply --marketplaceButtonStyles;
+  composes: button buttonFont buttonText buttonBorders buttonColors from global;
 }
 
 .buttonLinkPrimary {
-  @apply --marketplaceButtonStylesPrimary;
+  composes: button buttonFont buttonText buttonBorders buttonColorsPrimary from global;
 }
 
 .buttonLinkSecondary {
-  @apply --marketplaceButtonStylesSecondary;
+  composes: button buttonFont buttonText buttonBordersSecondary buttonColorsSecondary from global;
 }
 
 .customButton {
-  @apply --marketplaceButtonStyles;
+  composes: button buttonFont buttonText buttonBorders buttonColors from global;
+
   padding: 0;
   border-radius: 8px;
   height: 100px;

src/components/CookieConsent/CookieConsent.module.css

@@ -1,4 +1,4 @@
-@import '../../styles/propertySets.css';
+@import '../../styles/customMediaQueries.css';
 
 .root {
   /* Fixed on top of everything */
@@ -26,7 +26,7 @@
 }
 
 .message {
-  @apply --marketplaceH5FontStyles;
+  composes: h5 from global;
   margin-left: 24px;
 }
 
@@ -41,7 +41,7 @@
 
 .continueBtn {
   /* Font */
-  @apply --marketplaceH5FontStyles;
+  composes: h5 from global;
   font-weight: var(--fontWeightSemiBold);
 
   /* Dimensions */

src/components/FieldCheckbox/FieldCheckbox.module.css

@@ -1,4 +1,4 @@
-@import '../../styles/propertySets.css';
+@import '../../styles/customMediaQueries.css';
 
 .root {
   position: relative;
@@ -84,7 +84,7 @@
 .text {
 }
 .textRoot {
-  @apply --marketplaceListingAttributeFontStyles;
+  composes: marketplaceListingAttributeFontStyles from global;
   color: var(--matterColor);
   margin-top: -1px;
   margin-bottom: 1px;

src/components/FieldCheckboxGroup/FieldCheckboxGroup.module.css

@@ -1,3 +1,5 @@
+@import '../../styles/customMediaQueries.css';
+
 .root {
   margin: 0;
   padding: 0;

src/components/FieldDateInput/DateInput.module.css

@@ -1,4 +1,4 @@
-@import '../../styles/propertySets.css';
+@import '../../styles/customMediaQueries.css';
 
 .inputRoot {
   /* Contain repainting to this component only */
@@ -28,17 +28,36 @@
   }
 
   & :global(.DateInput_input) {
-    @apply --marketplaceDefaultFontStyles;
-    @apply --marketplaceInputStyles;
+    font-family: var(--fontFamily);
+    font-weight: var(--fontWeightMedium);
     font-size: 16px;
+    line-height: 24px;
+    letter-spacing: -0.1px;
+
+    /* Dimensions */
+    display: block;
+    width: 100%;
+    margin: 0;
+    padding: 5px 0 5px 0;
+
+    /* Borders */
+    border: none;
+    border-radius: 0;
     border-bottom-style: solid;
     border-bottom-width: 2px;
     border-bottom-color: var(--attentionColor);
+
     transition: border-bottom-color var(--transitionStyle);
     transition: all 0.15s ease-out;
     background: none;
 
+    &::placeholder {
+      color: var(--matterColorAnti);
+    }
+
     @media (--viewportMedium) {
+      font-size: 16px;
+      line-height: 32px;
       padding: 4px 0 9px 0;
       border-bottom-width: 3px;
     }
@@ -100,12 +119,15 @@
   }
 
   & :global(.CalendarMonth_caption) {
+    font-weight: 400;
+    font-size: 21px;
+    line-height: 24px;
     color: var(--matterColorLight);
-    @apply --marketplaceH2FontStyles;
+
     margin: 1px 0 14px;
-    font-weight: 400;
 
     @media (--viewportMedium) {
+      line-height: 32px;
       margin-top: 0;
       margin-bottom: 0;
     }
@@ -119,13 +141,18 @@
     height: 100%;
   }
   & :global(.CalendarDay) {
-    @apply --marketplaceH4FontStyles;
+    font-weight: var(--fontWeightMedium);
+    font-size: 15px;
+    line-height: 24px;
+    letter-spacing: 0;
+
     color: var(--matterColorLight);
     border: 0;
     margin-top: 0;
     margin-bottom: 0;
 
     @media (--viewportMedium) {
+      font-weight: var(--fontWeightMedium);
       margin-top: 0;
       margin-bottom: 0;
     }

src/components/FieldDateInput/FieldDateInput.module.css

@@ -1,3 +1,5 @@
+@import '../../styles/customMediaQueries.css';
+
 .fieldRoot {
 }