@aarhus-university/au-lib-react-components 10.12.0 → 10.15.0

package/__tests__/jest/context.test.ts

@@ -0,0 +1,25 @@
+import { getPortalByName } from '../../src/lib/portals';
+
+describe('Context', () => {
+  test('Mitstudie findes som portal', () => {
+    const portal = getPortalByName('da', 'mitstudie');
+    expect(portal?.name).toBe('mitstudie');
+  });
+
+  test('Mitstudie portalcontexten indeholder én impersonation option', () => {
+    const portal = getPortalByName('da', 'mitstudie');
+    expect(portal?.impersonationOptions.length).toBe(1);
+  });
+
+  test('Mitstudie portalcontextens ene impersonation option hedder "AU-id" på dansk og "AU ID" på engelsk', () => {
+    const danish = getPortalByName('da', 'mitstudie');
+    expect(danish?.impersonationOptions[0].label).toBe('AU-id');
+    const english = getPortalByName('en', 'mitstudie');
+    expect(english?.impersonationOptions[0].label).toBe('AU ID');
+  });
+
+  test('Portalcontexten "sfgsdfsdfsdf" findes ikke', () => {
+    const portal = getPortalByName('da', 'sfgsdfsdfsdf');
+    expect(portal).toBe(null);
+  });
+});

package/package.json

@@ -1,7 +1,7 @@
 {
   "sideEffects": false,
   "name": "@aarhus-university/au-lib-react-components",
-  "version": "10.12.0",
+  "version": "10.15.0",
   "description": "Library for shared React components for various applications on au.dk",
   "scripts": {
     "test": "jest",
@@ -71,14 +71,14 @@
   },
   "dependencies": {
     "@aarhus-university/au-designsystem-delphinus": "0.29.0",
-    "@aarhus-university/types": "0.9.0",
+    "@aarhus-university/types": "0.10.0",
     "@reduxjs/toolkit": "^1.8.3",
     "@types/google.analytics": "^0.0.42",
     "@types/history": "^5.0.0",
     "@types/react": "^18.0.14",
     "@types/react-dom": "^18.0.5",
     "@types/react-router-dom": "^5.3.3",
-    "dayjs": "^1.10.7",
+    "dayjs": "^1.11.3",
     "lodash.debounce": "^4.0.8",
     "prop-types": "^15.8.1",
     "query-string": "^7.1.0",

package/src/lib/context.tsx

@@ -0,0 +1,38 @@
+import React, { createContext, useContext } from 'react';
+import { setLocale } from './dates';
+import { getPortalByName } from './portals';
+
+export const LangContext = createContext<string>('da');
+export const useLangContext = (): string => {
+  const lang = useContext(LangContext);
+  setLocale(lang);
+  return lang;
+};
+
+export const UserContext = createContext<AU.IUserContext | null>(null);
+export const useUserContext = (): AU.IUserContext | null => {
+  const user = useContext(UserContext);
+  return user;
+};
+
+export const PortalContext = createContext<AU.IPortalContext | null>(null);
+
+export const AUPortal = {
+  Provider: ({
+    name,
+    children,
+  }: PortalContextProviderProps) => {
+    const lang = useLangContext();
+    const portal = getPortalByName(lang || 'da', name);
+    return (
+      <PortalContext.Provider value={portal}>
+        {children}
+      </PortalContext.Provider>
+    );
+  },
+};
+
+export const usePortalContext = (): AU.IPortalContext | null => {
+  const portal = useContext(PortalContext);
+  return portal;
+};

package/src/lib/dates.ts

@@ -0,0 +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);

package/src/lib/portals.ts

@@ -0,0 +1,23 @@
+/* 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' },
+};
+
+const portals: (lang: string) => AU.IPortalContext[] = (lang: string) => [
+  {
+    name: 'mitstudie',
+    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,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, StrictMode } from 'react';
 
 const globalTheme = {
   theme: {
@@ -38,13 +38,15 @@ const ThemeWrapper = ({ theme, children }) => {
     }
   });
   return (
-    <main className={`theme--${theme}`}>
-      <div className="page">
-        <div className="page__content__block">
-          {children}
+    <StrictMode>
+      <main className={`theme--${theme}`}>
+        <div className="page">
+          <div className="page__content__block">
+            {children}
+          </div>
         </div>
-      </div>
-    </main>
+      </main>
+    </StrictMode>
   );
 }
 

package/src/lib/context.ts

@@ -1,13 +0,0 @@
-import { createContext, useContext } from 'react';
-
-export const LangContext = createContext<string>('da');
-export const useLangContext = (): string => {
-  const lang = useContext(LangContext);
-  return lang;
-};
-
-export const UserContext = createContext<AU.IUserContext | null>(null);
-export const useUserContext = (): AU.IUserContext | null => {
-  const user = useContext(UserContext);
-  return user;
-};