@aarhus-university/au-lib-react-components 10.15.2 → 10.17.0

package/src/lib/dates.ts

@@ -1,50 +1,50 @@
-import dayjs from 'dayjs';
-import 'dayjs/locale/da';
-import isoWeek from 'dayjs/plugin/isoWeek';
-import weekday from 'dayjs/plugin/weekday';
-import advancedFormat from 'dayjs/plugin/advancedFormat';
-import updateLocale from 'dayjs/plugin/updateLocale';
-
-dayjs.extend(isoWeek);
-dayjs.extend(weekday);
-dayjs.extend(advancedFormat);
-dayjs.extend(updateLocale);
-
-dayjs.updateLocale('da', {
-  weekdaysShort: 'søn_man_tir_ons_tor_fre_lør'.split('_'),
-  monthsShort: 'jan_feb_mar_apr_maj_jun_jul_aug_sep_okt_nov_dec'.split('_'),
-});
-
-export const formatTime = (date: Date, format = 'HH:mm'): string => dayjs(date).format(format);
-export const getLocale = (): string => dayjs.locale();
-export const setLocale = (locale: string): string => dayjs.locale(locale);
-export const getThisYear = (): number => dayjs().year();
-export const getYearToString = (date: Date): string => formatTime(date, 'YYYY');
-export const getNumberOfWeeksInYear = (year: number): number => dayjs(`${year}-12-31`).isoWeek();
-export const skipWeeks = (date: Date, multiplier: number): Date => dayjs(date).clone().add(multiplier * 7, 'days').toDate();
-export const getWeek = (date: Date): number => dayjs(date).isoWeek();
-// eslint-disable-next-line max-len
-export const getDateByWeekday = (date: Date, index: number, locale = 'da'): Date => {
-  const currentLocale = getLocale();
-  setLocale(locale);
-  const newDate = dayjs(date).weekday(index).toDate();
-  if (currentLocale !== locale) {
-    setLocale(currentLocale);
-  }
-  return newDate;
-};
-const dateIsSameMonthAsCurrent = (date: Date): boolean => formatTime(new Date(), 'M') === formatTime(date, 'M');
-export const getLongDate = (date: Date): string => formatTime(date, 'dddd, Do MMMM YYYY');
-export const getShortDate = (date: Date): string => formatTime(date, `ddd D${(dateIsSameMonthAsCurrent(date) ? '' : `${getLocale() === 'da' ? '.' : ''} MMM`)}`);
-export const isToday = (date: Date): boolean => dayjs(date).isSame(dayjs());
-export const multipleDaysFormatTime = (date: Date, index: number, format = 'ddd HH:mm', firstLetterToUpper = true): string => {
-  if (index > 0) {
-    const formatted = formatTime(date, format);
-    if (firstLetterToUpper) {
-      return formatted.charAt(0).toUpperCase() + formatted.slice(1);
-    }
-    return formatted;
-  }
-  return formatTime(date);
-};
-export const formatDayOfWeek = (date: Date): string => formatTime(date, 'dddd').charAt(0).toUpperCase() + formatTime(date, 'dddd').slice(1);
+import dayjs from 'dayjs';
+import 'dayjs/locale/da';
+import isoWeek from 'dayjs/plugin/isoWeek';
+import weekday from 'dayjs/plugin/weekday';
+import advancedFormat from 'dayjs/plugin/advancedFormat';
+import updateLocale from 'dayjs/plugin/updateLocale';
+
+dayjs.extend(isoWeek);
+dayjs.extend(weekday);
+dayjs.extend(advancedFormat);
+dayjs.extend(updateLocale);
+
+dayjs.updateLocale('da', {
+  weekdaysShort: 'søn_man_tir_ons_tor_fre_lør'.split('_'),
+  monthsShort: 'jan_feb_mar_apr_maj_jun_jul_aug_sep_okt_nov_dec'.split('_'),
+});
+
+export const formatTime = (date: Date, format = 'HH:mm'): string => dayjs(date).format(format);
+export const getLocale = (): string => dayjs.locale();
+export const setLocale = (locale: string): string => dayjs.locale(locale);
+export const getThisYear = (): number => dayjs().year();
+export const getYearToString = (date: Date): string => formatTime(date, 'YYYY');
+export const getNumberOfWeeksInYear = (year: number): number => dayjs(`${year}-12-31`).isoWeek();
+export const skipWeeks = (date: Date, multiplier: number): Date => dayjs(date).clone().add(multiplier * 7, 'days').toDate();
+export const getWeek = (date: Date): number => dayjs(date).isoWeek();
+// eslint-disable-next-line max-len
+export const getDateByWeekday = (date: Date, index: number, locale = 'da'): Date => {
+  const currentLocale = getLocale();
+  setLocale(locale);
+  const newDate = dayjs(date).weekday(index).toDate();
+  if (currentLocale !== locale) {
+    setLocale(currentLocale);
+  }
+  return newDate;
+};
+const dateIsSameMonthAsCurrent = (date: Date): boolean => formatTime(new Date(), 'M') === formatTime(date, 'M');
+export const getLongDate = (date: Date): string => formatTime(date, 'dddd, Do MMMM YYYY');
+export const getShortDate = (date: Date): string => formatTime(date, `ddd D${(dateIsSameMonthAsCurrent(date) ? '' : `${getLocale() === 'da' ? '.' : ''} MMM`)}`);
+export const isToday = (date: Date): boolean => dayjs(date).isSame(dayjs());
+export const multipleDaysFormatTime = (date: Date, index: number, format = 'ddd HH:mm', firstLetterToUpper = true): string => {
+  if (index > 0) {
+    const formatted = formatTime(date, format);
+    if (firstLetterToUpper) {
+      return formatted.charAt(0).toUpperCase() + formatted.slice(1);
+    }
+    return formatted;
+  }
+  return formatTime(date);
+};
+export const formatDayOfWeek = (date: Date): string => formatTime(date, 'dddd').charAt(0).toUpperCase() + formatTime(date, 'dddd').slice(1);

package/src/lib/hooks.ts

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-empty-function */
 /* eslint-disable import/prefer-default-export */
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import { showModal, hideModal } from '@aarhus-university/au-designsystem-delphinus/source/js/components/modal-view';
 
 const useModal = (
@@ -32,6 +32,23 @@ const useModal = (
   });
 };
 
+const useTranslation = <T>(lang: string, filename: string, initialObject: T): T => {
+  const [translations, setTranslations] = useState<T>(initialObject);
+  const loadTranslation = async (): Promise<void> => {
+    const [translation] = await Promise.all([
+      import(`../i18n/${lang}/${filename}.json`),
+    ]);
+    setTranslations(translation.default);
+  };
+
+  useEffect(() => {
+    loadTranslation();
+  }, []);
+
+  return translations;
+};
+
 export {
   useModal,
+  useTranslation,
 };

package/src/lib/portals.ts

@@ -1,36 +1,37 @@
-/* eslint-disable import/prefer-default-export */
-const impersonationLabels = {
-  IMPERSONATION_SELECT_OPTION_CPR: { da: 'CPR-nr.', en: 'CPR no.' },
-  IMPERSONATION_SELECT_OPTION_EMAIL: { da: 'E-mail', en: 'Email' },
-  IMPERSONATION_SELECT_OPTION_AUID: { da: 'AU-id', en: 'AU ID' },
-};
-
-declare global {
-  interface Window {
-    IMPERSONATE_AUID: string,
-    IMPERSONATE_VALUE: string;
-    IMPERSONATE_TYPE: string;
-  }
-}
-
-const portals: (lang: string) => AU.IPortalContext[] = (lang: string) => [
-  {
-    name: 'mitstudie',
-    impersonationSetup: {
-      auid: window.IMPERSONATE_AUID,
-      value: window.IMPERSONATE_VALUE,
-      type: window.IMPERSONATE_TYPE,
-    },
-    impersonationOptions: [
-      {
-        value: 'auid',
-        label: impersonationLabels.IMPERSONATION_SELECT_OPTION_AUID[lang],
-      },
-    ],
-  },
-];
-
-export const getPortalByName = (
-  lang: string,
-  name: string,
-): AU.IPortalContext | null => portals(lang).find((portal) => portal.name === name) ?? null;
+/* eslint-disable import/prefer-default-export */
+const impersonationLabels = {
+  IMPERSONATION_SELECT_OPTION_CPR: { da: 'CPR-nr.', en: 'CPR no.' },
+  IMPERSONATION_SELECT_OPTION_EMAIL: { da: 'E-mail', en: 'Email' },
+  IMPERSONATION_SELECT_OPTION_AUID: { da: 'AU-id', en: 'AU ID' },
+};
+
+declare global {
+  interface Window {
+    IMPERSONATE_AUID: string,
+    IMPERSONATE_VALUE: string;
+    IMPERSONATE_TYPE: string;
+    authenticated: boolean,
+  }
+}
+
+const portals: (lang: string) => AU.IPortalContext[] = (lang: string) => [
+  {
+    name: 'mitstudie',
+    impersonationSetup: {
+      auid: window.IMPERSONATE_AUID,
+      value: window.IMPERSONATE_VALUE,
+      type: window.IMPERSONATE_TYPE,
+    },
+    impersonationOptions: [
+      {
+        value: 'auid',
+        label: impersonationLabels.IMPERSONATION_SELECT_OPTION_AUID[lang],
+      },
+    ],
+  },
+];
+
+export const getPortalByName = (
+  lang: string,
+  name: string,
+): AU.IPortalContext | null => portals(lang).find((portal) => portal.name === name) ?? null;

package/stories/lib/helpers.tsx

@@ -1,57 +1,57 @@
-import React, { useEffect, StrictMode } from 'react';
-
-const globalTheme = {
-  theme: {
-    name: 'Theme',
-    description: 'Global theme for components',
-    defaultValue: 'light',
-    toolbar: {
-      icon: 'circlehollow',
-      items: ['normal', 'dark'],
-      showName: true,
-      dynamicTitle: true,
-    },
-  },
-};
-
-const globalLang = (items = ['da', 'en'], defaultValue = 'da') => ({
-  lang: {
-    name: 'Language',
-    description: 'Global language for components',
-    defaultValue,
-    toolbar: {
-      icon: 'circlehollow',
-      items,
-      showName: true,
-      dynamicTitle: true,
-    },
-  },
-});
-
-const ThemeWrapper = ({ theme, children }) => {
-  useEffect(() => {
-    const body = document.querySelector('body');
-    if (body) {
-      body.classList.remove('theme--normal');
-      body.classList.remove('theme--dark');
-      body.classList.add(`theme--${theme}`);
-    }
-  });
-  return (
-    <StrictMode>
-      <main className={`theme--${theme}`}>
-        <div className="page">
-          <div className="page__content__block">
-            {children}
-          </div>
-        </div>
-      </main>
-    </StrictMode>
-  );
-}
-
-export {
-  globalTheme,
-  globalLang,
-  ThemeWrapper,
-};
+import React, { useEffect, StrictMode } from 'react';
+
+const globalTheme = {
+  theme: {
+    name: 'Theme',
+    description: 'Global theme for components',
+    defaultValue: 'light',
+    toolbar: {
+      icon: 'circlehollow',
+      items: ['normal', 'dark'],
+      showName: true,
+      dynamicTitle: true,
+    },
+  },
+};
+
+const globalLang = (items = ['da', 'en'], defaultValue = 'da') => ({
+  lang: {
+    name: 'Language',
+    description: 'Global language for components',
+    defaultValue,
+    toolbar: {
+      icon: 'circlehollow',
+      items,
+      showName: true,
+      dynamicTitle: true,
+    },
+  },
+});
+
+const ThemeWrapper = ({ theme, children }) => {
+  useEffect(() => {
+    const body = document.querySelector('body');
+    if (body) {
+      body.classList.remove('theme--normal');
+      body.classList.remove('theme--dark');
+      body.classList.add(`theme--${theme}`);
+    }
+  });
+  return (
+    <StrictMode>
+      <main className={`theme--${theme}`}>
+        <div className="page">
+          <div className="page__content__block">
+            {children}
+          </div>
+        </div>
+      </main>
+    </StrictMode>
+  );
+}
+
+export {
+  globalTheme,
+  globalLang,
+  ThemeWrapper,
+};

package/tsconfig.json

@@ -26,7 +26,7 @@
       "es2017.object",
       "dom"
     ],
-    "module": "es6",
+    "module": "esnext",
     "removeComments": true,
     "alwaysStrict": true,
     "allowUnreachableCode": false,