STCOM-1094 Replace momentJS with dayJS

README.md

@@ -156,6 +156,18 @@ Useful recipes for UI patterns appearing in FOLIO modules.
 * [Show/Hide Columns in MCL](guides/patterns/ColumnSelector.stories.mdx) -- Give users the ability to select only the data they need to see.
 * [Accessible Routing](guides/patterns/AccessibleRouting.stories.mdx) -- Detail the approaches to implementing accessible focus management.
 
+## Working with dates/times in UI-Modules
+
+We provide a handful of components and utilities for date/time functionality.
+
+* **Datepicker, Timepicker, DateRangeWrapper components** - UI-widgets for accepting date/time input.
+* **FormattedDate, FormattedUTCDate, FormattedTime** - Cross-browser convenience components for displaying localized representations of system ISO8601 timestamps.
+* [dateTimeUtils](util/DateUtils_readme.md) - A handful of utility functions for working with date/time code in application logic.
+* **Hooks**
+  * useFormatDate - presentational date-formatting.
+  * useFormatTime - presentational time-formatting.
+  * useDynamicLocale - loading DayJS locale information within functional components (also available in component form, via `DynamicLocaleRenderer`).
+
 ## Testing
 Stripes Components' tests are automated browser tests powered by
 [Karma](http://karma-runner.github.io) and written using

hooks/useDynamicLocale/DynamicLocaleRenderer.js

@@ -0,0 +1,20 @@
+import { useEffect } from 'react';
+import PropTypes from 'prop-types';
+import useDynamicLocale from './useDynamicLocale';
+
+const DynamicLocaleRenderer = ({ children, onLoaded }) => {
+  const { localeLoaded, isEnglishLang } = useDynamicLocale();
+  useEffect(() => {
+    if (localeLoaded) {
+      onLoaded({ isEnglishLang });
+    }
+  }, [localeLoaded, onLoaded, isEnglishLang]);
+  return localeLoaded ? children : null;
+};
+
+DynamicLocaleRenderer.propTypes = {
+  children: PropTypes.node,
+  onLoaded: PropTypes.func,
+};
+
+export default DynamicLocaleRenderer;

hooks/useDynamicLocale/index.js

@@ -0,0 +1,3 @@
+export { default as useDynamicLocale } from './useDynamicLocale';
+export { default as DynamicLocaleRenderer } from './DynamicLocaleRenderer';
+

hooks/useDynamicLocale/useDynamicLocale.js

@@ -0,0 +1,47 @@
+import React from 'react';
+import { IntlContext } from 'react-intl';
+import { loadDayJSLocale } from '../../util/dateTimeUtils';
+
+const isEnglishLang = (locale) => {
+  return /^en/.test(locale);
+};
+
+/**
+ * useDynamicLocale -
+ * React hook that loads a DayJS locale, returns an
+ * @date 12/15/2023 - 1:58:58 PM
+ *
+ * @param {Object} hookParams
+ * @param {String} hookParams.locale - locale string ex : 'en-SE'
+ */
+const useDynamicLocale = ({ locale : localeProp } = {}) => {
+  const { locale: localeContext } = React.useContext(IntlContext);
+  const [localeLoaded, setLocaleLoaded] = React.useState(
+    localeProp ? isEnglishLang(localeProp) :
+      isEnglishLang(localeContext)
+  );
+  const [prevLocale, updatePrevLocale] = React.useState(localeProp || localeContext);
+  const locale = localeProp || localeContext;
+
+  React.useEffect(() => {
+    const localeCallback = (loadedLocale, err) => {
+      if (!err) {
+        setLocaleLoaded(true);
+      }
+    };
+
+    loadDayJSLocale(locale, localeCallback);
+  }, [localeLoaded, locale, prevLocale]);
+
+  if (locale !== prevLocale) {
+    updatePrevLocale(localeProp || localeContext);
+    setLocaleLoaded(localeProp ? isEnglishLang(localeProp) : isEnglishLang(localeContext));
+  }
+
+  return {
+    localeLoaded,
+    isEnglish: localeProp ? localeProp === 'en' : localeContext === 'en'
+  };
+};
+
+export default useDynamicLocale;

index.js

@@ -12,7 +12,6 @@ export {
   staticFirstWeekDay,
   staticLangCountryCodes
 } from './lib/Datepicker';
-export { getLocaleDateFormat, getLocalizedTimeFormatInfo } from './util/dateTimeUtils';
 export { default as DateRangeWrapper } from './lib/DateRangeWrapper';
 export { default as FormattedDate } from './lib/FormattedDate';
 export { default as FormattedTime } from './lib/FormattedTime';
@@ -142,6 +141,13 @@ export { default as ExportCsv } from './lib/ExportCsv';
 export { default as exportToCsv } from './lib/ExportCsv/exportToCsv';
 
 /* utilities */
+export {
+  getLocaleDateFormat,
+  getLocalizedTimeFormatInfo,
+  dayjs,
+  DayRange,
+  loadDayJSLocale,
+} from './util/dateTimeUtils';
 export { default as RootCloseWrapper } from './util/RootCloseWrapper';
 export { default as omitProps } from './util/omitProps';
 export {