From df941ca13c50abc951763a4a5b77c5d04f428a05 Mon Sep 17 00:00:00 2001 From: Lencodes Date: Mon, 27 Nov 2023 15:52:42 +0100 Subject: [PATCH] INIT --- pwa/package-lock.json | 190 ++++-------------- pwa/package.json | 12 +- pwa/src/services/getConfig.ts | 108 +++------- .../ThemeSwitcherTopBar.tsx | 5 +- pwa/static/.env.development | 2 +- 5 files changed, 83 insertions(+), 234 deletions(-) diff --git a/pwa/package-lock.json b/pwa/package-lock.json index e095d960..7a75e61f 100644 --- a/pwa/package-lock.json +++ b/pwa/package-lock.json @@ -8,7 +8,7 @@ "name": "product-website-template", "version": "1.0.0", "dependencies": { - "@conduction/components": "2.2.25", + "@conduction/components": "file:../../conduction-components", "@conduction/theme": "1.0.55", "@fortawesome/fontawesome-svg-core": "^6.1.1", "@fortawesome/free-brands-svg-icons": "6.4.2", @@ -51,7 +51,7 @@ "clsx": "^1.1.1", "dateformat": "^5.0.3", "dedent": "^0.7.0", - "gatsby": "^4.11.1", + "gatsby": "^4.25.7", "gatsby-plugin-breadcrumb": "^12.3.1", "gatsby-plugin-layout": "^3.11.0", "html-react-parser": "^4.0.0", @@ -64,7 +64,7 @@ "react-dom": "^18.2.0", "react-favicon": "^1.0.1", "react-helmet": "^6.1.0", - "react-hook-form": "7.29.0", + "react-hook-form": "7.48.2", "react-hot-toast": "^2.4.1", "react-i18next": "^11.16.6", "react-loading-skeleton": "^3.1.0", @@ -93,6 +93,37 @@ "typescript": "^4.6.3" } }, + "../../conduction-components": { + "name": "@conduction/components", + "version": "2.2.32", + "license": "ISC", + "dependencies": { + "@fortawesome/fontawesome-svg-core": "^6.4.2", + "@fortawesome/free-solid-svg-icons": "^6.4.2", + "@fortawesome/react-fontawesome": "^0.2.0", + "@utrecht/component-library-react": "2.0.0", + "clsx": "^2.0.0", + "gatsby": "^5.12.9", + "react": "^18.2.0", + "react-datepicker": "^4.23.0", + "react-hook-form": "7.48.2", + "react-paginate": "^8.2.0", + "react-select": "5.8.0", + "react-tabs": "^6.0.2", + "react-tooltip": "^5.23.0" + }, + "devDependencies": { + "@types/node": "^20.9.3", + "@types/react": "^18.2.38", + "@types/react-datepicker": "^4.19.3", + "@types/react-dom": "^18.2.16", + "copyfiles": "^2.4.1", + "npm-run-all": "^4.1.5", + "rimraf": "^5.0.5", + "tsc-hooks": "^1.1.2", + "typescript": "^5.3.2" + } + }, "node_modules/@aashutoshrathi/word-wrap": { "version": "1.2.6", "license": "MIT", @@ -2061,59 +2092,8 @@ } }, "node_modules/@conduction/components": { - "version": "2.2.25", - "resolved": "https://registry.npmjs.org/@conduction/components/-/components-2.2.25.tgz", - "integrity": "sha512-83w2RSTr+VqGFNlwKMQeek57LEJUUBX+ypcF9jay+Jx2Q6cCgqlgPj5rhYXQCBZfpe2AoQtIXllfpJi3/p9qyA==", - "dependencies": { - "@fortawesome/fontawesome-svg-core": "^6.2.0", - "@fortawesome/free-solid-svg-icons": "^6.2.0", - "@fortawesome/react-fontawesome": "^0.2.0", - "@utrecht/component-library-react": "^1.0.0-alpha.319", - "clsx": "^1.1.1", - "gatsby": "^4.11.1", - "react": "^18.2.0", - "react-datepicker": "^4.10.0", - "react-hook-form": "7.29.0", - "react-paginate": "^8.2.0", - "react-select": "5.3.2", - "react-tabs": "^6.0.2", - "react-tooltip": "^5.21.3" - } - }, - "node_modules/@conduction/components/node_modules/@fortawesome/react-fontawesome": { - "version": "0.2.0", - "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.2.0.tgz", - "integrity": "sha512-uHg75Rb/XORTtVt7OS9WoK8uM276Ufi7gCzshVWkUJbHhh3svsUUeqXerrM96Wm7fRiDzfKRwSoahhMIkGAYHw==", - "dependencies": { - "prop-types": "^15.8.1" - }, - "peerDependencies": { - "@fortawesome/fontawesome-svg-core": "~1 || ~6", - "react": ">=16.3" - } - }, - "node_modules/@conduction/components/node_modules/memoize-one": { - "version": "5.2.1", - "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-5.2.1.tgz", - "integrity": "sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q==" - }, - "node_modules/@conduction/components/node_modules/react-select": { - "version": "5.3.2", - "resolved": "https://registry.npmjs.org/react-select/-/react-select-5.3.2.tgz", - "integrity": "sha512-W6Irh7U6Ha7p5uQQ2ZnemoCQ8mcfgOtHfw3wuMzG6FAu0P+CYicgofSLOq97BhjMx8jS+h+wwWdCBeVVZ9VqlQ==", - "dependencies": { - "@babel/runtime": "^7.12.0", - "@emotion/cache": "^11.4.0", - "@emotion/react": "^11.8.1", - "@types/react-transition-group": "^4.4.0", - "memoize-one": "^5.0.0", - "prop-types": "^15.6.0", - "react-transition-group": "^4.3.0" - }, - "peerDependencies": { - "react": "^16.8.0 || ^17.0.0 || ^18.0.0", - "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0" - } + "resolved": "../../conduction-components", + "link": true }, "node_modules/@conduction/theme": { "version": "1.0.55", @@ -3979,14 +3959,6 @@ } } }, - "node_modules/@popperjs/core": { - "version": "2.11.8", - "license": "MIT", - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/popperjs" - } - }, "node_modules/@sideway/address": { "version": "4.1.4", "license": "BSD-3-Clause", @@ -6024,10 +5996,6 @@ "version": "2.0.0", "license": "MIT" }, - "node_modules/classnames": { - "version": "2.3.2", - "license": "MIT" - }, "node_modules/clean-stack": { "version": "2.2.0", "dev": true, @@ -8698,8 +8666,9 @@ }, "node_modules/gatsby": { "version": "4.25.7", + "resolved": "https://registry.npmjs.org/gatsby/-/gatsby-4.25.7.tgz", + "integrity": "sha512-kspM1XokxDw2YqC2hkPKQTfWSNSq/AnY8PNYSrUM+MCsyIKFuGqSVchNonZN1g8/nCoh4jQpBYXH5Uw2Hrs6Sw==", "hasInstallScript": true, - "license": "MIT", "dependencies": { "@babel/code-frame": "^7.14.0", "@babel/core": "^7.15.5", @@ -13962,22 +13931,6 @@ "react-dom": "~15 || ~16 || ~17 || ~18" } }, - "node_modules/react-datepicker": { - "version": "4.20.0", - "license": "MIT", - "dependencies": { - "@popperjs/core": "^2.11.8", - "classnames": "^2.2.6", - "date-fns": "^2.30.0", - "prop-types": "^15.7.2", - "react-onclickoutside": "^6.13.0", - "react-popper": "^2.3.0" - }, - "peerDependencies": { - "react": "^16.9.0 || ^17 || ^18", - "react-dom": "^16.9.0 || ^17 || ^18" - } - }, "node_modules/react-dev-utils": { "version": "12.0.1", "license": "MIT", @@ -14079,8 +14032,9 @@ } }, "node_modules/react-hook-form": { - "version": "7.29.0", - "license": "MIT", + "version": "7.48.2", + "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.48.2.tgz", + "integrity": "sha512-H0T2InFQb1hX7qKtDIZmvpU1Xfn/bdahWBN1fH19gSe4bBEqTfmlr7H3XWTaVtiK4/tpPaI1F3355GPMZYge+A==", "engines": { "node": ">=12.22.0" }, @@ -14141,18 +14095,6 @@ "react": ">=16.8.0" } }, - "node_modules/react-onclickoutside": { - "version": "6.13.0", - "license": "MIT", - "funding": { - "type": "individual", - "url": "https://github.com/Pomax/react-onclickoutside/blob/master/FUNDING.md" - }, - "peerDependencies": { - "react": "^15.5.x || ^16.x || ^17.x || ^18.x", - "react-dom": "^15.5.x || ^16.x || ^17.x || ^18.x" - } - }, "node_modules/react-paginate": { "version": "8.2.0", "license": "MIT", @@ -14163,19 +14105,6 @@ "react": "^16 || ^17 || ^18" } }, - "node_modules/react-popper": { - "version": "2.3.0", - "license": "MIT", - "dependencies": { - "react-fast-compare": "^3.0.1", - "warning": "^4.0.2" - }, - "peerDependencies": { - "@popperjs/core": "^2.0.0", - "react": "^16.8.0 || ^17 || ^18", - "react-dom": "^16.8.0 || ^17 || ^18" - } - }, "node_modules/react-property": { "version": "2.0.0", "license": "MIT" @@ -14263,36 +14192,6 @@ "react": "^16.3.0 || ^17.0.0 || ^18.0.0" } }, - "node_modules/react-tabs": { - "version": "6.0.2", - "license": "MIT", - "dependencies": { - "clsx": "^2.0.0", - "prop-types": "^15.5.0" - }, - "peerDependencies": { - "react": "^18.0.0" - } - }, - "node_modules/react-tabs/node_modules/clsx": { - "version": "2.0.0", - "license": "MIT", - "engines": { - "node": ">=6" - } - }, - "node_modules/react-tooltip": { - "version": "5.21.5", - "license": "MIT", - "dependencies": { - "@floating-ui/dom": "^1.0.0", - "classnames": "^2.3.0" - }, - "peerDependencies": { - "react": ">=16.14.0", - "react-dom": ">=16.14.0" - } - }, "node_modules/react-transition-group": { "version": "4.4.5", "license": "BSD-3-Clause", @@ -16452,13 +16351,6 @@ "node": ">=0.10.0" } }, - "node_modules/warning": { - "version": "4.0.3", - "license": "MIT", - "dependencies": { - "loose-envify": "^1.0.0" - } - }, "node_modules/watchpack": { "version": "2.4.0", "license": "MIT", diff --git a/pwa/package.json b/pwa/package.json index 947173bc..1de35b2f 100644 --- a/pwa/package.json +++ b/pwa/package.json @@ -4,7 +4,9 @@ "private": true, "description": "Product Website Template", "author": "Conduction", - "keywords": ["gatsby"], + "keywords": [ + "gatsby" + ], "scripts": { "develop": "gatsby develop", "start": "gatsby develop", @@ -22,7 +24,7 @@ "prepare": "cd .. && husky install" }, "dependencies": { - "@conduction/components": "2.2.25", + "@conduction/components": "file:../../conduction-components", "@conduction/theme": "1.0.55", "@fortawesome/fontawesome-svg-core": "^6.1.1", "@fortawesome/free-brands-svg-icons": "6.4.2", @@ -65,7 +67,7 @@ "clsx": "^1.1.1", "dateformat": "^5.0.3", "dedent": "^0.7.0", - "gatsby": "^4.11.1", + "gatsby": "^4.25.7", "gatsby-plugin-breadcrumb": "^12.3.1", "gatsby-plugin-layout": "^3.11.0", "html-react-parser": "^4.0.0", @@ -78,7 +80,7 @@ "react-dom": "^18.2.0", "react-favicon": "^1.0.1", "react-helmet": "^6.1.0", - "react-hook-form": "7.29.0", + "react-hook-form": "7.48.2", "react-hot-toast": "^2.4.1", "react-i18next": "^11.16.6", "react-loading-skeleton": "^3.1.0", @@ -93,9 +95,9 @@ "@types/dedent": "^0.7.0", "@types/node": "^17.0.23", "@types/react-helmet": "^6.1.5", + "@types/showdown": "2.0.3", "@typescript-eslint/eslint-plugin": "^5.55.0", "@typescript-eslint/parser": "^5.55.0", - "@types/showdown": "2.0.3", "eslint": "^8.36.0", "eslint-config-prettier": "^8.8.0", "eslint-plugin-react": "^7.32.2", diff --git a/pwa/src/services/getConfig.ts b/pwa/src/services/getConfig.ts index 9b1c47de..636f8f7d 100644 --- a/pwa/src/services/getConfig.ts +++ b/pwa/src/services/getConfig.ts @@ -17,6 +17,7 @@ import Waddinxveen from "./../../static/configFiles/waddinxveen..json"; import RijssenHolten from "./../../static/configFiles/rijssen-holten.json"; import HoekscheWaard from "./../../static/configFiles/hoeksche-waard.json"; import Texel from "./../../static/configFiles/texel.json"; +import { TGroupedSelectOption } from "@conduction/components/lib/components/formFields/select/select"; export const getConfig = (themeOrDomainName: string): Record | undefined => { switch (themeOrDomainName) { @@ -72,83 +73,34 @@ export const getConfig = (themeOrDomainName: string): Record | unde } }; -export const availableThemes: { label: string; value: string }[] = [ - { - label: "Alle organisaties", - value: "open-webconcept-theme", - }, - { - label: "Albrandswaard", - value: "albrandswaard", - }, - { - label: "Barendrecht", - value: "barendrecht", - }, - { - label: "Buren", - value: "buren", - }, - // { - // label: "Conduction", - // value: "conduction-theme", - // }, - // development purposes - { - label: "Dinkelland", - value: "dinkelland-theme", - }, - { - label: "Epe", - value: "epe-theme", - }, - { - label: "Hoeksche Waard", - value: "hoeksche-waard", - }, - { - label: "Lansingerland", - value: "lansingerland", - }, - { - label: "Noaberkracht", - value: "noaberkracht-theme", - }, - { - label: "Noordwijk", - value: "noordwijk-theme", - }, - { - label: "Ridderkerk", - value: "ridderkerk", - }, - { - label: "Rijssen-Holten", - value: "rijssen-holten", - }, - { - label: "Rotterdam", - value: "rotterdam-theme", - }, - { - label: "Stede Broec", - value: "stedebroec", - }, - { - label: "Texel", - value: "texel", - }, - { - label: "Tubbergen", - value: "tubbergen-theme", - }, - { - label: "Waddinxveen", - value: "waddinxveen", +export const availableThemes: TGroupedSelectOption[] = [ + { + label: "Organisaties", + options: [ + { label: "Alle organisaties", value: "open-webconcept-theme" }, + { label: "Conduction", value: "conduction-theme" }, + { label: "Noaberkracht", value: "noaberkracht-theme" }, + { label: "XXLLNC", value: "xxllnc-theme" }, + ], + }, + { + label: "Gemeenten", + options: [ + { label: "Albrandswaard", value: "albrandswaard" }, + { label: "Barendrecht", value: "barendrecht" }, + { label: "Buren", value: "buren" }, + { label: "Dinkelland", value: "dinkelland-theme" }, + { label: "Epe", value: "epe-theme" }, + { label: "Hoeksche Waard", value: "hoeksche-waard" }, + { label: "Lansingerland", value: "lansingerland" }, + { label: "Noordwijk", value: "noordwijk-theme" }, + { label: "Ridderkerk", value: "ridderkerk" }, + { label: "Rijssen-Holten", value: "rijssen-holten" }, + { label: "Rotterdam", value: "rotterdam-theme" }, + { label: "Stede Broec", value: "stedebroec" }, + { label: "Texel", value: "texel" }, + { label: "Tubbergen", value: "tubbergen-theme" }, + { label: "Waddinxveen", value: "waddinxveen" }, + ], }, - // { - // label: "XXLLNC", - // value: "xxllnc-theme", - // }, - // development purposes ]; diff --git a/pwa/src/templates/templateParts/themeSwitcherTopBar/ThemeSwitcherTopBar.tsx b/pwa/src/templates/templateParts/themeSwitcherTopBar/ThemeSwitcherTopBar.tsx index 2d3df37f..66148515 100644 --- a/pwa/src/templates/templateParts/themeSwitcherTopBar/ThemeSwitcherTopBar.tsx +++ b/pwa/src/templates/templateParts/themeSwitcherTopBar/ThemeSwitcherTopBar.tsx @@ -7,6 +7,7 @@ import { useEnvironment } from "../../../hooks/useEnvironment"; import { navigate } from "gatsby"; import clsx from "clsx"; import { Heading3, Paragraph } from "@utrecht/component-library-react"; +import { TSelectOption } from "@conduction/components/lib/components/formFields/select/select"; export const ThemeSwitcherTopBar: React.FC = () => { const { initiateFromJSON } = useEnvironment(); @@ -24,9 +25,11 @@ export const ThemeSwitcherTopBar: React.FC = () => { React.useEffect(() => { if (watchTheme) return; + const themeOptions: TSelectOption[] = availableThemes.flatMap((group) => group.options); + setValue( "theme", - availableThemes.find((theme) => theme.value === window.sessionStorage.getItem("NL_DESIGN_THEME_CLASSNAME")), + themeOptions.find((theme) => theme.value === window.sessionStorage.getItem("NL_DESIGN_THEME_CLASSNAME")), ); // init select field based on domain name }, []); diff --git a/pwa/static/.env.development b/pwa/static/.env.development index 88b72b08..f915d4c3 100644 --- a/pwa/static/.env.development +++ b/pwa/static/.env.development @@ -29,7 +29,7 @@ GATSBY_FOOTER_CONTENT_HEADER="" GATSBY_OIDN_NUMBER="" #Theme switcher -GATSBY_SHOW_THEME_SWITCHER="false" +GATSBY_SHOW_THEME_SWITCHER="true" # Deployment option, if you're using this .env file DO NOT REMOVE OR EDIT THIS GATSBY_ENV_VARS_SET="true"