From 0f3dc340b646c8354c99e3638bae36175258f433 Mon Sep 17 00:00:00 2001 From: syam babu Date: Thu, 10 Oct 2024 10:33:34 +0530 Subject: [PATCH 1/5] fix: updated font style to only affect calendar widget and its children --- src/App.css | 1 + src/index.css | 2 -- src/utils/dynamicStylePropertyInjector.js | 6 +++++- 3 files changed, 6 insertions(+), 3 deletions(-) diff --git a/src/App.css b/src/App.css index 5fa5706..b6dd9db 100644 --- a/src/App.css +++ b/src/App.css @@ -1,5 +1,6 @@ #calendar-widget { height: 100%; + font-family: Roboto; } #calendar-widget .loader-wrapper { diff --git a/src/index.css b/src/index.css index 684199b..7ddf9e1 100644 --- a/src/index.css +++ b/src/index.css @@ -5,11 +5,9 @@ html { body { margin: 0; padding: 0; - font-family: Roboto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; max-width: 100vw !important; - /* max-height: 100vh; */ height: 100%; } diff --git a/src/utils/dynamicStylePropertyInjector.js b/src/utils/dynamicStylePropertyInjector.js index 2d1a8d4..d8640b5 100644 --- a/src/utils/dynamicStylePropertyInjector.js +++ b/src/utils/dynamicStylePropertyInjector.js @@ -23,5 +23,9 @@ export const dynamicFontInjector = (fontName) => { )}&display=swap`; document.head.appendChild(fontLink); - document.body.style.fontFamily = `'${fontName}', sans-serif`; + + const calendarWidget = document.getElementById('calendar-widget'); + if (calendarWidget) { + calendarWidget.style.fontFamily = `'${fontName}', sans-serif`; + } }; From 928eb4491acfa4ec5a452b42971bdf3ce8d9a2b1 Mon Sep 17 00:00:00 2001 From: syam babu Date: Fri, 11 Oct 2024 14:30:36 +0530 Subject: [PATCH 2/5] feat: Refactor dynamicFontInjector to handle font loading errors with fallback to Roboto - Added try-catch block for robust error handling during font injection - Implemented onerror event for font link element to handle loading failures - Introduced fallback mechanism to apply 'Roboto' font if the requested font fails to load - Ensured fallback applies if #calendar-widget is not found in the DOM - Removed all font inherits and replaced with dynamically added css font variable --- src/App.css | 1 - .../customCalendar/customCalendar.css | 2 +- src/components/search/search.css | 2 +- src/index.css | 18 +++++--- src/utils/dynamicStylePropertyInjector.js | 45 ++++++++++++++----- 5 files changed, 48 insertions(+), 20 deletions(-) diff --git a/src/App.css b/src/App.css index b6dd9db..5fa5706 100644 --- a/src/App.css +++ b/src/App.css @@ -1,6 +1,5 @@ #calendar-widget { height: 100%; - font-family: Roboto; } #calendar-widget .loader-wrapper { diff --git a/src/components/customCalendar/customCalendar.css b/src/components/customCalendar/customCalendar.css index fc9be3f..f40d5a6 100644 --- a/src/components/customCalendar/customCalendar.css +++ b/src/components/customCalendar/customCalendar.css @@ -129,7 +129,7 @@ } #calendar-widget > .widget-layout .react-calendar-wrapper * { - font-family: inherit !important; + font-family: var(--calendar-font-family) !important; } @media screen and (max-width: 820px) { diff --git a/src/components/search/search.css b/src/components/search/search.css index 8f73391..f5c1d20 100644 --- a/src/components/search/search.css +++ b/src/components/search/search.css @@ -5,7 +5,7 @@ border-radius: 68px; border: 1px solid #b6c1c9; flex: 1; - font-family: inherit !important; + font-family: var(--calendar-font-family) !important; font-size: 16px; font-weight: 400; line-height: 24px; diff --git a/src/index.css b/src/index.css index 7ddf9e1..f10ab90 100644 --- a/src/index.css +++ b/src/index.css @@ -23,18 +23,24 @@ body { --primary-black: #222732; } -ul, -li, -p { +#calendar-widget ul, +#calendar-widget li, +#calendar-widget p { all: unset; display: block; } -button { - font-family: inherit; +#calendar-widget button, +#calendar-widget ul, +#calendar-widget li, +#calendar-widget p, +#calendar-widget span, +#calendar-widget input, +#calendar-widget div { + font-family: var(--calendar-font-family); } -* :focus-visible { +#calendar-widget * :focus-visible { outline: none; } diff --git a/src/utils/dynamicStylePropertyInjector.js b/src/utils/dynamicStylePropertyInjector.js index d8640b5..efbca10 100644 --- a/src/utils/dynamicStylePropertyInjector.js +++ b/src/utils/dynamicStylePropertyInjector.js @@ -13,19 +13,42 @@ export const dynamicCssColorInjector = (palette) => { }; export const dynamicFontInjector = (fontName) => { - if (fontName === 'Roboto') return; + const fallbackFont = 'Roboto'; - const fontLink = document.createElement('link'); - fontLink.rel = 'stylesheet'; - fontLink.href = `https://fonts.googleapis.com/css2?family=${fontName.replace( - /\s+/g, - '+', - )}&display=swap`; + try { + // Inject Google Fonts link + const fontLink = document.createElement('link'); + fontLink.rel = 'stylesheet'; + fontLink.href = `https://fonts.googleapis.com/css2?family=${fontName.replace( + /\s+/g, + '+', + )}&display=swap`; - document.head.appendChild(fontLink); + fontLink.onerror = () => { + console.error(`Failed to load the font: ${fontName}. Falling back to ${fallbackFont}.`); + setFallbackFont(); + }; - const calendarWidget = document.getElementById('calendar-widget'); - if (calendarWidget) { - calendarWidget.style.fontFamily = `'${fontName}', sans-serif`; + document.head.appendChild(fontLink); + + // Apply the font to the #calendar-widget as a CSS variable + const calendarWidget = document.getElementById('calendar-widget'); + if (calendarWidget) { + calendarWidget.style.setProperty('--calendar-font-family', `'${fontName}', sans-serif`); + } else { + console.error('Calendar widget not found.'); + setFallbackFont(); + } + } catch (error) { + console.error('Error during font injection:', error); + setFallbackFont(); } + + // Function to apply fallback font + const setFallbackFont = () => { + const calendarWidget = document.getElementById('calendar-widget'); + if (calendarWidget) { + calendarWidget.style.setProperty('--calendar-font-family', `'${fallbackFont}', sans-serif`); + } + }; }; From 2489e53994c1a2dbd12bc4690439eb7b94f7e932 Mon Sep 17 00:00:00 2001 From: syam babu Date: Fri, 11 Oct 2024 17:22:22 +0530 Subject: [PATCH 3/5] fix: test fix for chunkLoad error --- src/App.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/App.js b/src/App.js index 6615920..bbf2c9a 100644 --- a/src/App.js +++ b/src/App.js @@ -29,7 +29,7 @@ function App(props) { } } - loadLocale(); + locale && loadLocale(); }, [locale]); useEffect(() => { From ccda272f1d69e7ec34e99ffa2af15498edb89441 Mon Sep 17 00:00:00 2001 From: syam babu Date: Mon, 14 Oct 2024 17:50:35 +0530 Subject: [PATCH 4/5] fix: fixed chunkload error caused by dynamic locale import. --- src/App.js | 36 ++++++++++++++++++++++-------------- 1 file changed, 22 insertions(+), 14 deletions(-) diff --git a/src/App.js b/src/App.js index bbf2c9a..d061e26 100644 --- a/src/App.js +++ b/src/App.js @@ -9,29 +9,37 @@ import { useEffect, useState } from 'react'; import dayjs from 'dayjs'; import Loader from './components/loader/Loader'; +const locales = { + en: () => import('dayjs/locale/en'), + fr: () => import('dayjs/locale/fr'), +}; + function App(props) { const { color, font, ...widgetProps } = props; const locale = widgetProps.locale; const [loading, setLoading] = useState(true); - const palette = getColors(color); - dynamicCssColorInjector(palette); - useEffect(() => { - async function loadLocale() { - try { - await import(`dayjs/locale/${locale}.js`); - dayjs.locale(widgetProps.locale); - } catch (error) { - console.error(`Failed to load locale: ${locale}`, error); - } finally { - setLoading(false); - } + if (locales[locale]) { + locales[locale]() + .then(() => { + dayjs.locale(locale); + setLoading(false); + }) + .catch((error) => { + console.error(`Failed to load locale: ${locale}`, error); + dayjs.locale('en'); // Fallback to 'en' + setLoading(false); + }); + } else { + dayjs.locale('en'); + setLoading(false); } - - locale && loadLocale(); }, [locale]); + const palette = getColors(color); + dynamicCssColorInjector(palette); + useEffect(() => { dynamicFontInjector(font); }, [font]); From 10e91a364da128a1bcce5f45d95fe8f6f133e511 Mon Sep 17 00:00:00 2001 From: syam babu Date: Mon, 14 Oct 2024 18:10:57 +0530 Subject: [PATCH 5/5] fix: import of locale from dayjs static --- src/App.js | 28 +++++++++++----------------- 1 file changed, 11 insertions(+), 17 deletions(-) diff --git a/src/App.js b/src/App.js index d061e26..1ca884c 100644 --- a/src/App.js +++ b/src/App.js @@ -8,11 +8,8 @@ import { dynamicCssColorInjector, dynamicFontInjector } from './utils/dynamicSty import { useEffect, useState } from 'react'; import dayjs from 'dayjs'; import Loader from './components/loader/Loader'; - -const locales = { - en: () => import('dayjs/locale/en'), - fr: () => import('dayjs/locale/fr'), -}; +require('dayjs/locale/en'); +require('dayjs/locale/fr'); function App(props) { const { color, font, ...widgetProps } = props; @@ -20,18 +17,15 @@ function App(props) { const [loading, setLoading] = useState(true); useEffect(() => { - if (locales[locale]) { - locales[locale]() - .then(() => { - dayjs.locale(locale); - setLoading(false); - }) - .catch((error) => { - console.error(`Failed to load locale: ${locale}`, error); - dayjs.locale('en'); // Fallback to 'en' - setLoading(false); - }); - } else { + try { + if (locale) { + dayjs.locale(locale); + } else { + dayjs.locale('en'); + } + setLoading(false); + } catch (error) { + console.error(`Failed to set locale: ${locale}`, error); dayjs.locale('en'); setLoading(false); }