feat: upgrade to HDS v3.1.0 and HCRC that uses HDS v3.1.0 & update tests

- upgrade to hds-react 3.1.0 - upgrade to react-helsinki-headless-cms 1.0.0-alpha229 - UI components: - <Footer> was rebuilt in HDS v3 so needed to make changes to it - rename flipHorizontal to flipVertical per HDS v3 release notes - tests: - update snapshots - NOTE: **snapshot updating** updated **suspiciously** e.g. "tag_hds-tag__label__I6mc8" to **"undefined"**, maybe there's something broken? - fix browser tests because language selector changed in HCRC's Navigation component which is now actually using HDS v3's Header component underneath - storybook: - fix "yarn build-storybook" and "yarn storybook" failing under packages/components - NOTE: the storybook looks broken but at least it builds and runs - add "crypto-browserify" because it was needed by HDS v3 - fix graphql code generation creating unusable enumeration values by making sure the enum keys don't start with a digit - miscellaneous fixes - fix use(Events|Hobbies|Sports)RHHCConfig.tsx by adding missing second argument organisationPrefixes with value CITY_OF_HELSINKI_LINKED_EVENTS_ORGANIZATION_PREFIXES to getEventCardProps See react-helsinki-headless-cms 1.0.0-alpha229 PR: City-of-Helsinki/react-helsinki-headless-cms#131 refs LIIKUNTA-584
City-of-Helsinki · Nov 13, 2023 · 390d8b7 · 390d8b7
1 parent 5c56baa
commit 390d8b7
Show file tree

Hide file tree

Showing 43 changed files with 828 additions and 440 deletions.
diff --git a/README.md b/README.md
@@ -192,7 +192,8 @@ While `deps:check` will give you a detailed info about about dep versions across
 
 ### Symbolic links
 
-Monorepo uses symbolic links to share assets and locales between apps and packages, e.g.:
+Monorepo uses symbolic links to share assets, locales and GraphQL schema generation
+related code between apps and packages, e.g.:
 
 Shared assets:
 
@@ -204,6 +205,13 @@ Locales:
 
 - packages/common-i18n/src/locales/default → packages/common-i18n/src/locales/fi/
 
+GraphQL schema generation related code:
+
+- apps/events-helsinki/pascalCaseWithUnderscoreBeforeLeadingDigit.js → packages/components/src/codegen/pascalCaseWithUnderscoreBeforeLeadingDigit.js
+- apps/hobbies-helsinki/pascalCaseWithUnderscoreBeforeLeadingDigit.js → packages/components/src/codegen/pascalCaseWithUnderscoreBeforeLeadingDigit.js
+- apps/sports-helsinki/pascalCaseWithUnderscoreBeforeLeadingDigit.js → packages/components/src/codegen/pascalCaseWithUnderscoreBeforeLeadingDigit.js
+- packages/components/pascalCaseWithUnderscoreBeforeLeadingDigit.js → packages/components/src/codegen/pascalCaseWithUnderscoreBeforeLeadingDigit.js
+
 You can find all used symbolic links in the monorepo by running in the monorepo's root:
 
 ```bash

diff --git a/apps/events-helsinki/README.md b/apps/events-helsinki/README.md
@@ -86,7 +86,7 @@ Transpiles the TypeScript code and reports the errors.
 
 ### `yarn generate:graphql`
 
-Uses the codegen tool to generate Graphql Schema file out from the graphql files inside the app. Note that the [graphql.tsx](../../packages/components/src/types/generated/graphql.tsx) inside the packages/components -directory contains the common types and hooks, so it would most likely make sense to copy the generated result and override the graphql file in the common components-package.
+Uses the codegen tool to generate Graphql Schema file out from the graphql files inside the app. Note that the [graphql.tsx](../../packages/components/src/types/generated/graphql.tsx) inside the packages/components -directory contains the common types and hooks, so you should always copy the generated result and override the graphql file in the common components-package.
 
 ## Headless CMS React Component (HCRC) -library implementation
 

diff --git a/apps/events-helsinki/package.json b/apps/events-helsinki/package.json
@@ -23,7 +23,7 @@
     "lint": "eslint . --ext .ts,.tsx,.js,.jsx,.cjs,.mjs,.mdx,.graphql --cache --cache-location ../../.cache/eslint/events-helsinki.eslintcache",
     "lint-fix": "eslint . --ext .ts,.tsx,.js,.jsx,.cjs,.mjs,.mdx,.graphql --fix",
     "get-translations": "node ./scripts/get-translations.js",
-    "generate:graphql": "DOTENV_CONFIG_PATH=./.env.local graphql-codegen -r dotenv/config --config ../../packages/components/codegen.yml",
+    "generate:graphql": "DOTENV_CONFIG_PATH=./.env.local graphql-codegen -r dotenv/config --config ../../packages/components/codegen.ts",
     "?test:browser": "echo 'Run browser-tests locally. You need to have production build of the application running locally (yarn build & yarn start)",
     "test:browser": "testcafe \"chrome --window-size='1249,720'\" browser-tests/ --live --dev",
     "test:browser:wsl2win": "testcafe 'path:`/mnt/c/Program Files/Google/Chrome/Application/chrome.exe`' browser-tests/ --live --dev",
@@ -56,7 +56,7 @@
     "dotenv": "^16.3.1",
     "file-saver": "^2.0.5",
     "graphql": "16.7.1",
-    "hds-react": "2.15.0",
+    "hds-react": "3.1.0",
     "i18next": "23.2.3",
     "ics": "^3.2.0",
     "lodash": "4.17.21",
@@ -72,7 +72,7 @@
     "react-datepicker": "^4.14.1",
     "react-dom": "18.2.0",
     "react-error-boundary": "4.0.10",
-    "react-helsinki-headless-cms": "1.0.0-alpha224",
+    "react-helsinki-headless-cms": "1.0.0-alpha229",
     "react-i18next": "13.0.1",
     "react-scroll": "^1.8.9",
     "react-toastify": "^9.1.3",
@@ -115,6 +115,7 @@
     "@typescript-eslint/parser": "^5.60.1",
     "babel-eslint": "^10.1.0",
     "babel-jest": "^29.5.0",
+    "change-case-all": "1.0.15",
     "cross-env": "7.0.3",
     "domain": "0.0.1",
     "es-check": "7.1.1",

diff --git a/apps/events-helsinki/pascalCaseWithUnderscoreBeforeLeadingDigit.js b/apps/events-helsinki/pascalCaseWithUnderscoreBeforeLeadingDigit.js
@@ -0,0 +1 @@
+../../packages/components/src/codegen/pascalCaseWithUnderscoreBeforeLeadingDigit.js
diff --git a/...rc/common-events/components/category/__tests__/__snapshots__/CategoryFilter.test.tsx.snap b/...rc/common-events/components/category/__tests__/__snapshots__/CategoryFilter.test.tsx.snap
@@ -17,23 +17,19 @@ exports[`matches snapshot 1`] = `
         class="LinkBase-module_iconLeft__Joa9y LinkBase_hds-icon-left__e0wBz"
       >
         <svg
+          aria-hidden="true"
+          aria-label="home"
           class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik"
           role="img"
           viewBox="0 0 24 24"
           xmlns="http://www.w3.org/2000/svg"
         >
-          <g
-            fill="none"
+          <path
+            clip-rule="evenodd"
+            d="M1 13L12 2L23 13L21.5 14.5L20 13V21H4V13L2.5 14.5L1 13ZM12 5L6 11V19L8.999 18.999L9 12H15L14.999 18.999L18 19V11L12 5ZM13 14H11L10.999 18.999H12.999L13 14Z"
+            fill="currentColor"
             fill-rule="evenodd"
-          >
-            <path
-              d="M0 0h24v24H0z"
-            />
-            <path
-              d="M1 13L12 2l11 11-1.5 1.5L20 13v8H4v-8l-1.5 1.5L1 13zm11-8l-6 6v8l2.999-.001L9 12h6l-.001 6.999L18 19v-8l-6-6zm1 9h-2l-.001 4.999h2L13 14z"
-              fill="currentColor"
-            />
-          </g>
+          />
         </svg>
       </span>
       <span
@@ -47,23 +43,18 @@ exports[`matches snapshot 1`] = `
       >
         <svg
           aria-hidden="true"
+          aria-label="angle-right"
           class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik"
           role="img"
           viewBox="0 0 24 24"
           xmlns="http://www.w3.org/2000/svg"
         >
-          <g
-            fill="none"
+          <path
+            clip-rule="evenodd"
+            d="M13.5 12L8.5 7L10 5.5L16.5 12L10 18.5L8.5 17L13.5 12Z"
+            fill="currentColor"
             fill-rule="evenodd"
-          >
-            <polygon
-              points="0 24 0 0 24 0 24 24"
-            />
-            <polygon
-              fill="currentColor"
-              points="13.5 12 8.5 7 10 5.5 16.5 12 10 18.5 8.5 17"
-            />
-          </g>
+          />
         </svg>
       </span>
     </a>

diff --git a/apps/events-helsinki/src/domain/error/ErrorHero.tsx b/apps/events-helsinki/src/domain/error/ErrorHero.tsx
@@ -34,7 +34,7 @@ const NotFound: React.FC<Props> = ({
           className={classNames(styles.koros, {
             [styles.smallMargin]: smallMargin,
           })}
-          flipHorizontal={true}
+          flipVertical={true}
           type="basic"
         />
       )}

diff --git a/...ain/search/eventSearch/searchResultList/__tests__/__snapshots__/ResultsInfo.test.tsx.snap b/...ain/search/eventSearch/searchResultList/__tests__/__snapshots__/ResultsInfo.test.tsx.snap
@@ -10,23 +10,18 @@ exports[`events with 0 results matches snapshot for no results 1`] = `
     >
       <svg
         aria-hidden="true"
+        aria-label="search"
         class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik"
         role="img"
         viewBox="0 0 24 24"
         xmlns="http://www.w3.org/2000/svg"
       >
-        <g
-          fill="none"
+        <path
+          clip-rule="evenodd"
+          d="M15 1C19.4183 1 23 4.58172 23 9C23 13.4183 19.4183 17 15 17C13.2001 17 11.539 16.4056 10.2023 15.4023L3.80101 21.8021L2.21002 20.2111L8.60822 13.8117C7.59861 12.4726 7.00002 10.8062 7.00002 9C7.00002 4.58172 10.5817 1 15 1ZM15 3C11.6863 3 9.00002 5.68629 9.00002 9C9.00002 12.3137 11.6863 15 15 15C18.3137 15 21 12.3137 21 9C21 5.68629 18.3137 3 15 3Z"
+          fill="currentColor"
           fill-rule="evenodd"
-        >
-          <path
-            d="M0 0h24v24H0z"
-          />
-          <path
-            d="M15 1a8 8 0 11-4.798 14.402l-6.401 6.4-1.591-1.59 6.398-6.4A8 8 0 0115 1zm0 2a6 6 0 100 12 6 6 0 000-12z"
-            fill="currentColor"
-          />
-        </g>
+        />
       </svg>
     </div>
     <div

diff --git a/apps/events-helsinki/src/hooks/useEventsRHHCConfig.tsx b/apps/events-helsinki/src/hooks/useEventsRHHCConfig.tsx
@@ -8,6 +8,7 @@ import {
   useEventTranslation,
   MAIN_CONTENT_ID,
   useCommonCmsConfig,
+  CITY_OF_HELSINKI_LINKED_EVENTS_ORGANIZATION_PREFIXES,
 } from '@events-helsinki/components';
 import Head from 'next/head';
 import Link from 'next/link';
@@ -85,7 +86,11 @@ export default function useEventsRHHCConfig(args: {
         ...rhhcDefaultConfig.utils,
         getEventCardProps: AppConfig.showEnrolmentStatusInCardDetails
           ? (item: EventFieldsFragment, locale: string) => ({
-              ...rhhcDefaultConfig.utils.getEventCardProps(item, locale),
+              ...rhhcDefaultConfig.utils.getEventCardProps(
+                item,
+                CITY_OF_HELSINKI_LINKED_EVENTS_ORGANIZATION_PREFIXES,
+                locale
+              ),
               getLinkArrowLabel: getLinkArrowLabel({
                 item,
                 locale,

diff --git a/apps/hobbies-helsinki/package.json b/apps/hobbies-helsinki/package.json
@@ -23,7 +23,7 @@
     "lint": "eslint . --ext .ts,.tsx,.js,.jsx,.cjs,.mjs,.mdx,.graphql --cache --cache-location ../../.cache/eslint/hobbies-helsinki.eslintcache",
     "lint-fix": "eslint . --ext .ts,.tsx,.js,.jsx,.cjs,.mjs,.mdx,.graphql --fix",
     "get-translations": "node ./scripts/get-translations.js",
-    "generate:graphql": "DOTENV_CONFIG_PATH=./.env.local graphql-codegen -r dotenv/config --config ../../packages/components/codegen.yml",
+    "generate:graphql": "DOTENV_CONFIG_PATH=./.env.local graphql-codegen -r dotenv/config --config ../../packages/components/codegen.ts",
     "?test:browser": "echo 'Run browser-tests locally. You need to have production build of the application running locally (yarn build & yarn start)",
     "test:browser": "testcafe \"chrome --window-size='1249,720'\" browser-tests/ --live --dev",
     "test:browser:wsl2win": "testcafe 'path:`/mnt/c/Program Files/Google/Chrome/Application/chrome.exe`' browser-tests/ --live --dev",
@@ -56,7 +56,7 @@
     "dotenv": "^16.3.1",
     "file-saver": "^2.0.5",
     "graphql": "16.7.1",
-    "hds-react": "2.15.0",
+    "hds-react": "3.1.0",
     "i18next": "23.2.3",
     "ics": "^3.2.0",
     "lodash": "4.17.21",
@@ -72,7 +72,7 @@
     "react-datepicker": "^4.14.1",
     "react-dom": "18.2.0",
     "react-error-boundary": "4.0.10",
-    "react-helsinki-headless-cms": "1.0.0-alpha224",
+    "react-helsinki-headless-cms": "1.0.0-alpha229",
     "react-i18next": "13.0.1",
     "react-scroll": "^1.8.9",
     "react-toastify": "^9.1.3",
@@ -115,6 +115,7 @@
     "@typescript-eslint/parser": "^5.60.1",
     "babel-eslint": "^10.1.0",
     "babel-jest": "^29.5.0",
+    "change-case-all": "1.0.15",
     "cross-env": "7.0.3",
     "domain": "0.0.1",
     "es-check": "7.1.1",

diff --git a/apps/hobbies-helsinki/pascalCaseWithUnderscoreBeforeLeadingDigit.js b/apps/hobbies-helsinki/pascalCaseWithUnderscoreBeforeLeadingDigit.js
@@ -0,0 +1 @@
+../../packages/components/src/codegen/pascalCaseWithUnderscoreBeforeLeadingDigit.js
diff --git a/...rc/common-events/components/category/__tests__/__snapshots__/CategoryFilter.test.tsx.snap b/...rc/common-events/components/category/__tests__/__snapshots__/CategoryFilter.test.tsx.snap
@@ -17,23 +17,19 @@ exports[`matches snapshot 1`] = `
         class="LinkBase-module_iconLeft__Joa9y LinkBase_hds-icon-left__e0wBz"
       >
         <svg
+          aria-hidden="true"
+          aria-label="home"
           class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik"
           role="img"
           viewBox="0 0 24 24"
           xmlns="http://www.w3.org/2000/svg"
         >
-          <g
-            fill="none"
+          <path
+            clip-rule="evenodd"
+            d="M1 13L12 2L23 13L21.5 14.5L20 13V21H4V13L2.5 14.5L1 13ZM12 5L6 11V19L8.999 18.999L9 12H15L14.999 18.999L18 19V11L12 5ZM13 14H11L10.999 18.999H12.999L13 14Z"
+            fill="currentColor"
             fill-rule="evenodd"
-          >
-            <path
-              d="M0 0h24v24H0z"
-            />
-            <path
-              d="M1 13L12 2l11 11-1.5 1.5L20 13v8H4v-8l-1.5 1.5L1 13zm11-8l-6 6v8l2.999-.001L9 12h6l-.001 6.999L18 19v-8l-6-6zm1 9h-2l-.001 4.999h2L13 14z"
-              fill="currentColor"
-            />
-          </g>
+          />
         </svg>
       </span>
       <span
@@ -47,23 +43,18 @@ exports[`matches snapshot 1`] = `
       >
         <svg
           aria-hidden="true"
+          aria-label="angle-right"
           class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik"
           role="img"
           viewBox="0 0 24 24"
           xmlns="http://www.w3.org/2000/svg"
         >
-          <g
-            fill="none"
+          <path
+            clip-rule="evenodd"
+            d="M13.5 12L8.5 7L10 5.5L16.5 12L10 18.5L8.5 17L13.5 12Z"
+            fill="currentColor"
             fill-rule="evenodd"
-          >
-            <polygon
-              points="0 24 0 0 24 0 24 24"
-            />
-            <polygon
-              fill="currentColor"
-              points="13.5 12 8.5 7 10 5.5 16.5 12 10 18.5 8.5 17"
-            />
-          </g>
+          />
         </svg>
       </span>
     </a>

diff --git a/apps/hobbies-helsinki/src/domain/error/ErrorHero.tsx b/apps/hobbies-helsinki/src/domain/error/ErrorHero.tsx
@@ -34,7 +34,7 @@ const NotFound: React.FC<Props> = ({
           className={classNames(styles.koros, {
             [styles.smallMargin]: smallMargin,
           })}
-          flipHorizontal={true}
+          flipVertical={true}
           type="basic"
         />
       )}

diff --git a/...ain/search/eventSearch/searchResultList/__tests__/__snapshots__/ResultsInfo.test.tsx.snap b/...ain/search/eventSearch/searchResultList/__tests__/__snapshots__/ResultsInfo.test.tsx.snap
@@ -10,23 +10,18 @@ exports[`events with 0 results matches snapshot for no results 1`] = `
     >
       <svg
         aria-hidden="true"
+        aria-label="search"
         class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik"
         role="img"
         viewBox="0 0 24 24"
         xmlns="http://www.w3.org/2000/svg"
       >
-        <g
-          fill="none"
+        <path
+          clip-rule="evenodd"
+          d="M15 1C19.4183 1 23 4.58172 23 9C23 13.4183 19.4183 17 15 17C13.2001 17 11.539 16.4056 10.2023 15.4023L3.80101 21.8021L2.21002 20.2111L8.60822 13.8117C7.59861 12.4726 7.00002 10.8062 7.00002 9C7.00002 4.58172 10.5817 1 15 1ZM15 3C11.6863 3 9.00002 5.68629 9.00002 9C9.00002 12.3137 11.6863 15 15 15C18.3137 15 21 12.3137 21 9C21 5.68629 18.3137 3 15 3Z"
+          fill="currentColor"
           fill-rule="evenodd"
-        >
-          <path
-            d="M0 0h24v24H0z"
-          />
-          <path
-            d="M15 1a8 8 0 11-4.798 14.402l-6.401 6.4-1.591-1.59 6.398-6.4A8 8 0 0115 1zm0 2a6 6 0 100 12 6 6 0 000-12z"
-            fill="currentColor"
-          />
-        </g>
+        />
       </svg>
     </div>
     <div

diff --git a/apps/hobbies-helsinki/src/hooks/useHobbiesRHHCConfig.tsx b/apps/hobbies-helsinki/src/hooks/useHobbiesRHHCConfig.tsx
@@ -8,6 +8,7 @@ import {
   useEventTranslation,
   MAIN_CONTENT_ID,
   useCommonCmsConfig,
+  CITY_OF_HELSINKI_LINKED_EVENTS_ORGANIZATION_PREFIXES,
 } from '@events-helsinki/components';
 import Head from 'next/head';
 import Link from 'next/link';
@@ -86,7 +87,11 @@ export default function useHobbiesRHHCConfig(args: {
         ...rhhcDefaultConfig.utils,
         getEventCardProps: AppConfig.showEnrolmentStatusInCardDetails
           ? (item: EventFieldsFragment, locale: string) => ({
-              ...rhhcDefaultConfig.utils.getEventCardProps(item, locale),
+              ...rhhcDefaultConfig.utils.getEventCardProps(
+                item,
+                CITY_OF_HELSINKI_LINKED_EVENTS_ORGANIZATION_PREFIXES,
+                locale
+              ),
               linkArrowLabel: getLinkArrowLabel({
                 item,
                 locale,

diff --git a/apps/sports-helsinki/package.json b/apps/sports-helsinki/package.json
@@ -24,7 +24,7 @@
     "lint": "eslint . --ext .ts,.tsx,.js,.jsx,.cjs,.mjs,.mdx,.graphql --cache --cache-location ../../.cache/eslint/sports-helsinki.eslintcache",
     "lint-fix": "eslint . --ext .ts,.tsx,.js,.jsx,.cjs,.mjs,.mdx,.graphql --fix",
     "get-translations": "node ./scripts/get-translations.js",
-    "generate:graphql": "DOTENV_CONFIG_PATH=./.env.local graphql-codegen -r dotenv/config --config ../../packages/components/codegen.yml",
+    "generate:graphql": "DOTENV_CONFIG_PATH=./.env.local graphql-codegen -r dotenv/config --config ../../packages/components/codegen.ts",
     "?test:browser": "echo 'Run browser-tests locally. You need to have production build of the application running locally (yarn build & yarn start)",
     "test:browser": "testcafe \"chrome --window-size='1249,720'\" browser-tests/ --live --dev",
     "test:browser:wsl2win": "testcafe 'path:`/mnt/c/Program Files/Google/Chrome/Application/chrome.exe`' browser-tests/ --live --dev",
@@ -63,7 +63,7 @@
     "dotenv": "^16.3.1",
     "file-saver": "^2.0.5",
     "graphql": "16.7.1",
-    "hds-react": "2.15.0",
+    "hds-react": "3.1.0",
     "i18next": "23.2.3",
     "ics": "^3.2.0",
     "leaflet": "1.9.4",
@@ -80,7 +80,7 @@
     "react-datepicker": "^4.14.1",
     "react-dom": "18.2.0",
     "react-error-boundary": "4.0.10",
-    "react-helsinki-headless-cms": "1.0.0-alpha224",
+    "react-helsinki-headless-cms": "1.0.0-alpha229",
     "react-i18next": "13.0.1",
     "react-leaflet": "4.2.1",
     "react-scroll": "^1.8.9",
@@ -125,6 +125,7 @@
     "@typescript-eslint/parser": "^5.60.1",
     "babel-eslint": "^10.1.0",
     "babel-jest": "^29.5.0",
+    "change-case-all": "1.0.15",
     "cross-env": "7.0.3",
     "domain": "0.0.1",
     "es-check": "7.1.1",

diff --git a/apps/sports-helsinki/pascalCaseWithUnderscoreBeforeLeadingDigit.js b/apps/sports-helsinki/pascalCaseWithUnderscoreBeforeLeadingDigit.js
@@ -0,0 +1 @@
+../../packages/components/src/codegen/pascalCaseWithUnderscoreBeforeLeadingDigit.js
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		../../packages/components/src/codegen/pascalCaseWithUnderscoreBeforeLeadingDigit.js