@aarhus-university/au-lib-react-components 12.0.2 → 12.1.0

package/.storybook/preview.js

@@ -1,4 +1,4 @@
-import '@aarhus-university/au-designsystem-delphinus/build/style.css';
+import '@aarhus-university/au-designsystem-delphinus/public/style.css';
 import { globalTheme, globalLang } from '../stories/lib/helpers';
 
 export const parameters = {

package/package.json

@@ -1,7 +1,7 @@
 {
   "sideEffects": true,
   "name": "@aarhus-university/au-lib-react-components",
-  "version": "12.0.2",
+  "version": "12.1.0",
   "description": "Library for shared React components for various applications on au.dk",
   "scripts": {
     "test": "jest",
@@ -29,15 +29,15 @@
     "@babel/preset-react": "^7.22.5",
     "@babel/preset-typescript": "^7.22.5",
     "@mdx-js/react": "^2.3.0",
-    "@storybook/addon-a11y": "^7.0.24",
-    "@storybook/addon-actions": "^7.0.24",
-    "@storybook/addon-essentials": "^7.0.24",
-    "@storybook/addon-interactions": "^7.0.24",
-    "@storybook/addon-links": "^7.0.24",
-    "@storybook/jest": "^0.1.0",
-    "@storybook/react": "^7.0.24",
-    "@storybook/react-webpack5": "^7.0.24",
-    "@storybook/testing-library": "^0.2.0",
+    "@storybook/addon-a11y": "^7.6.7",
+    "@storybook/addon-actions": "^7.6.7",
+    "@storybook/addon-essentials": "^7.6.7",
+    "@storybook/addon-interactions": "^7.6.7",
+    "@storybook/addon-links": "^7.6.7",
+    "@storybook/jest": "^0.2.3",
+    "@storybook/react": "^7.6.7",
+    "@storybook/react-webpack5": "^7.6.7",
+    "@storybook/testing-library": "^0.2.2",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^14.0.0",
     "@testing-library/user-event": "^14.4.3",
@@ -56,7 +56,7 @@
     "eslint-plugin-jsx-a11y": "^6.7.1",
     "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-storybook": "^0.6.12",
+    "eslint-plugin-storybook": "^0.6.15",
     "eslint-webpack-plugin": "^4.0.1",
     "fork-ts-checker-webpack-plugin": "^8.0.0",
     "jest": "^29.5.0",
@@ -66,7 +66,7 @@
     "react-test-renderer": "^18.2.0",
     "sass": "^1.63.6",
     "sass-loader": "^13.3.2",
-    "storybook": "^7.0.24",
+    "storybook": "^7.6.7",
     "style-loader": "^3.3.3",
     "ts-jest": "^29.1.1",
     "ts-loader": "^9.4.4",
@@ -74,10 +74,11 @@
     "webpack-cli": "^5.1.4"
   },
   "dependencies": {
-    "@aarhus-university/au-designsystem-delphinus": "0.46.1",
+    "@aarhus-university/au-designsystem-delphinus": "1.3.3",
     "@aarhus-university/au-designsystem-delphinus-dev": "0.7.0",
-    "@aarhus-university/types": "1.0.0",
+    "@aarhus-university/types": "1.0.1",
     "@reduxjs/toolkit": "^1.9.5",
+    "@tinymce/tinymce-react": "^4.3.2",
     "@types/google.analytics": "^0.0.42",
     "@types/react": "^18.2.14",
     "@types/react-dom": "^18.2.6",

package/src/components/AUCharacterCountComponent.tsx

@@ -0,0 +1,56 @@
+/* eslint-disable camelcase */
+import React, {
+  FC,
+} from 'react';
+import { replace } from '../lib/helpers';
+import { useCharacterCount } from '../lib/hooks';
+
+type Props = {
+  children: React.ReactNode;
+  type: 'recommended' | 'allowed';
+  initialChars: number;
+  maxChars: number;
+  translations: IGenericTranslation['generics']['forms'];
+};
+
+const AUCharacterCountComponent: FC<Props> = ({
+  children,
+  type,
+  initialChars,
+  maxChars,
+  translations,
+}) => {
+  const {
+    ref, remaining, overflow,
+  } = useCharacterCount(type, initialChars, maxChars);
+
+  const { character_count } = translations;
+
+  return (
+    <div
+      ref={ref}
+      className="form__field__character-count"
+    >
+      {children}
+      <div
+        className="form__field__character-count__info"
+        aria-live="polite"
+      >
+        <span className="form__field__character-count__info__overflow-message">
+          {`${replace(character_count.overflow.message[type], ['maxchars'], [maxChars.toString()])}`}
+        </span>
+        {' '}
+        <span className="form__field__character-count__info__overflow-count">
+          {`${replace(character_count.overflow.count[type][overflow === 1 ? 'one' : 'other'], ['overflow'], [overflow.toString()])}`}
+        </span>
+        {' '}
+        <span className="form__field__character-count__info__count-down">
+          {`${replace(character_count.count_down[remaining === 1 ? 'one' : 'other'], ['remaining'], [remaining.toString()])}`}
+        </span>
+      </div>
+    </div>
+  );
+};
+
+AUCharacterCountComponent.displayName = 'AUCharacterCountComponent';
+export default AUCharacterCountComponent;

package/src/components/AUEditorComponent.tsx

@@ -0,0 +1,123 @@
+/* eslint-disable camelcase */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import React, { FC, useState, useRef } from 'react';
+import { Editor } from '@tinymce/tinymce-react';
+import AUTinyMCEBuilder from '../lib/tinymce';
+import { replace } from '../lib/helpers';
+
+type Translation = IGenericTranslation['generics']['forms'];
+type CounterType = 'recommended' | 'allowed';
+type Props = {
+  lang: string;
+  id: string;
+  initialValue: string;
+  textareaName: string;
+  showCounter?: boolean;
+  counterType?: CounterType;
+  maxChars?: number;
+  translations: Translation;
+  onEditorChange: (value: string) => void;
+};
+
+const onKeyUp = (
+  editor: any,
+  parent: HTMLDivElement,
+  maxChars: number,
+  counterType: string,
+  setOverflow: React.Dispatch<React.SetStateAction<number>>,
+): void => {
+  const container = editor.getContainer();
+  const numChars = editor.plugins.wordcount.body.getCharacterCount();
+  let isActive = false;
+  if (numChars >= maxChars) {
+    isActive = true;
+    parent.setAttribute(`data-${counterType}-length`, maxChars.toString());
+  }
+
+  if (isActive) {
+    container.classList.add('info-active');
+  } else {
+    container.classList.remove('info-active');
+    parent.removeAttribute(`data-${counterType}-length`);
+  }
+
+  const overflow = numChars - maxChars;
+  if (overflow > 0) {
+    parent.classList.add('form__field__character-count--overflow');
+  } else {
+    parent.classList.remove('form__field__character-count--overflow');
+  }
+  setOverflow(overflow);
+};
+
+const AUEditorComponent: FC<Props> = ({
+  lang,
+  id,
+  initialValue,
+  textareaName,
+  showCounter,
+  counterType,
+  maxChars,
+  translations,
+  onEditorChange,
+}) => {
+  const [overflow, setOverflow] = useState(0);
+  const parentRef = useRef<HTMLDivElement>(null);
+  const tiny = new AUTinyMCEBuilder(
+    lang,
+    showCounter as boolean,
+    (editor: any) => onKeyUp(
+      editor,
+      parentRef.current as HTMLDivElement,
+      maxChars as number,
+      counterType as string,
+      setOverflow,
+    ),
+  );
+
+  const { character_count } = translations;
+
+  return (
+    <div
+      ref={parentRef}
+      className="form__field__character-count"
+    >
+      <Editor
+        tinymceScriptSrc={tiny.tinyScriptSrc}
+        initialValue={initialValue}
+        id={id}
+        // value={tinyDanish}
+        textareaName={textareaName}
+        init={tiny.tinyGeneralConfig()}
+        onEditorChange={onEditorChange}
+      />
+      {
+        (typeof showCounter !== 'undefined'
+          && typeof counterType !== 'undefined'
+          && typeof maxChars !== 'undefined') && (
+          <div
+            className="form__field__character-count__info"
+            aria-live="polite"
+          >
+            <span className="form__field__character-count__info__overflow-message">
+              {`${replace(character_count.overflow.message[counterType], ['maxchars'], [maxChars.toString()])}`}
+            </span>
+            {' '}
+            <span className="form__field__character-count__info__overflow-count">
+              {`${replace(character_count.overflow.count[counterType][overflow === 1 ? 'one' : 'other'], ['overflow'], [overflow.toString()])}`}
+            </span>
+          </div>
+        )
+      }
+    </div>
+  );
+};
+
+AUEditorComponent.defaultProps = {
+  showCounter: false,
+  counterType: 'recommended',
+  maxChars: 0,
+};
+
+AUEditorComponent.displayName = 'AUEditorComponent';
+export default AUEditorComponent;

package/src/lib/hooks.ts

@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 /* eslint-disable @typescript-eslint/no-empty-function */
 /* eslint-disable import/prefer-default-export */
-import { useEffect, useState } from 'react';
+import { useEffect, useState, useRef } from 'react';
 import { showModal, hideModal } from '@aarhus-university/au-designsystem-delphinus/source/js/components/modal-view';
 
 const modalIsVisible = (modalElement: Element | null) => (!modalElement ? false : getComputedStyle(modalElement).display !== 'none');
@@ -69,7 +69,89 @@ const useTranslation = <T>(
   return translations;
 };
 
+const isTextArea = (element: HTMLInputElement): boolean => element.tagName === 'TEXTAREA';
+
+const setAutoExpand = (input: HTMLInputElement, parent: HTMLElement): void => {
+  if (isTextArea(input)) {
+    parent.classList.add('form__field__textarea-autoexpand');
+  }
+};
+
+const setDataValue = (formFieldElement: HTMLElement, inputElement: HTMLInputElement): void => {
+  if (isTextArea(inputElement)) {
+    formFieldElement.setAttribute('data-value', inputElement.value);
+  }
+};
+
+const setText = (
+  formField: HTMLElement,
+  overflow: number,
+): void => {
+  if (formField) {
+    const inputField = formField.querySelector('input[type="text"], textarea');
+    if (inputField) {
+      setDataValue(formField, inputField as HTMLInputElement);
+    }
+    if (overflow > 0) {
+      formField.classList.add('form__field__character-count--overflow');
+    } else {
+      formField.classList.remove('form__field__character-count--overflow');
+    }
+  }
+};
+
+const useCharacterCount = (
+  type: string,
+  initialChars: number,
+  maxChars: number,
+): {
+  ref: React.RefObject<HTMLDivElement>,
+  remaining: number;
+  overflow: number;
+} => {
+  const ref = useRef<HTMLDivElement>(null);
+  const [count, setCount] = useState<number>(0);
+  const remaining = maxChars - count;
+  const overflow = count - maxChars;
+
+  useEffect(() => {
+    const inputEvent = (event: Event) => {
+      if (event.target) {
+        setDataValue(ref.current as HTMLElement, event.target as HTMLInputElement);
+      }
+      setCount((event.target as HTMLInputElement).value.length);
+    };
+    const inputField = ref.current?.querySelector('input[type="text"], textarea');
+    if (inputField) {
+      ref.current?.setAttribute(`data-${type}-length`, maxChars.toString());
+      setAutoExpand(inputField as HTMLInputElement, ref.current as HTMLElement);
+      inputField.addEventListener('input', inputEvent);
+    }
+
+    return () => {
+      if (inputField) {
+        inputField.removeEventListener('input', inputEvent);
+      }
+    };
+  }, []);
+
+  useEffect(() => {
+    setCount(initialChars);
+  }, [initialChars]);
+
+  useEffect(() => {
+    setText(ref.current as HTMLElement, overflow);
+  }, [count]);
+
+  return {
+    ref,
+    remaining,
+    overflow,
+  };
+};
+
 export {
   useModal,
   useTranslation,
+  useCharacterCount,
 };

package/src/lib/tinymce.ts

@@ -0,0 +1,84 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+const blockNames = {
+  p: {
+    da: 'Afsnit',
+    en: 'Paragraph',
+  },
+  h1: {
+    da: 'Overskrift 1',
+    en: 'Header 1',
+  },
+  h2: {
+    da: 'Overskrift 2',
+    en: 'Header 2',
+  },
+  h3: {
+    da: 'Overskrift 3',
+    en: 'Header 3',
+  },
+  h4: {
+    da: 'Overskrift 4',
+    en: 'Header 4',
+  },
+};
+
+class AUTinyMCEBuilder {
+  #tinyBase = 'https://cdn.au.dk/vendor/tinymce/6.7.0/tinymce/js/tinymce/';
+
+  #tinySkin = 'au_delphinus';
+
+  tinyScriptSrc = `${this.#tinyBase}tinymce.min.js`;
+
+  #tinyContentCssSrc = `${this.#tinyBase}skins/content/${this.#tinySkin}/content.css`;
+
+  #lang = 'da';
+
+  #showCounter = false;
+
+  #onKeyUp: (editor: any) => void;
+
+  constructor(
+    lang: string,
+    showCounter: boolean,
+    onKeyUp: (editor: any) => void,
+  ) {
+    this.#lang = lang;
+    this.#showCounter = showCounter;
+    this.#onKeyUp = onKeyUp;
+  }
+
+  tinyGeneralConfig() {
+    return {
+      skin: this.#tinySkin,
+      content_css: this.#tinyContentCssSrc,
+      language: this.#lang,
+      menubar: false,
+      branding: false,
+      height: '280',
+      plugins: ['lists', 'link', 'visualblocks', 'visualchars', 'wordcount'],
+      toolbar: 'blocks | bold italic underline | bullist numlist | link | removeformat visualblocks visualchars',
+      // eslint-disable-next-line max-len
+      // block_formats: 'Afsnit=p;Overskrift 1=h1;Overskrift 2=h2;Overskrift 3=h3;Overskrift 4=h4;Overskrift 5=h5;Overskrift 6=h6',
+      block_formats: Object.keys(blockNames).map((key) => `${blockNames[key][this.#lang]}=${key}`).join(';'),
+      setup: (editor: any) => {
+        if (this.#showCounter) {
+          editor.on('keyup', () => {
+            this.#onKeyUp(editor);
+          });
+        }
+      },
+      init_instance_callback: (editor: any) => {
+        if (this.#showCounter) {
+          const container = editor.getContainer();
+
+          const button = container.querySelector('button.tox-statusbar__wordcount');
+          if (button) {
+            button.click();
+          }
+        }
+      },
+    };
+  }
+}
+
+export default AUTinyMCEBuilder;

package/stories/AUAlertComponent.stories.tsx

@@ -1,9 +1,19 @@
 import React, { FC, useState } from 'react';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { StoryObj, Meta } from '@storybook/react';
 import AUAlertComponent, { Props as AlertProps } from '../src/components/AUAlertComponent';
 import { ThemeWrapper } from './lib/helpers';
 
-const AlertWrapper: FC<AlertProps> = ({
+type Props = {
+  confirm: boolean;
+  label: string;
+  mode: AlertProps['mode'];
+  header: string;
+  message: string;
+  okButtonText: string;
+  cancelButtonText: string;
+};
+
+const AlertWrapper: FC<Props> = ({
   confirm,
   label,
   mode,
@@ -42,7 +52,7 @@ const AlertWrapper: FC<AlertProps> = ({
 
 export default {
   title: 'Delphinus/Alert and Confirm',
-  component: AUAlertComponent,
+  component: AlertWrapper,
   argTypes: {
     label: {
       table: {
@@ -92,30 +102,32 @@ export default {
       </ThemeWrapper>
     )
   ],
-} as ComponentMeta<typeof AUAlertComponent>;
-
-const Template: ComponentStory<typeof AUAlertComponent> = (args) => <AlertWrapper {...args} />;
+} as Meta<typeof AlertWrapper>;
 
-export const Alert = Template.bind({});
+type Story = StoryObj<typeof AlertWrapper>;
 
-Alert.args = {
-  label: 'Slet',
-  mode: 'ireversable-action',
-  header: 'Advarsel',
-  message: '<p>Den valgte fil vil blive slettet.</p>',
-  okButtonText: 'Ok, forstået',
-  onClick: () => console.log('Clicked'),
+export const Alert: Story = {
+  args: {
+    confirm: false,
+    label: 'Slet',
+    mode: 'ireversable-action',
+    header: 'Advarsel',
+    message: '<p>Den valgte fil vil blive slettet.</p>',
+    okButtonText: 'Ok, forstået',
+    cancelButtonText: 'Annuller',
+  },
+  render: (args) => <AlertWrapper {...args} />,
 };
 
-export const Confirm = Template.bind({});
-
-Confirm.args = {
-  confirm: true,
-  label: 'Slet',
-  mode: 'ireversable-action',
-  header: 'Bekræft',
-  message: '<p>Er du sikker på, at du vil slette den valgte fil?</p>',
-  okButtonText: 'Ja',
-  cancelButtonText: 'Annuller',
-  onClick: () => console.log('Clicked'),
+export const Confirm: Story = {
+  args: {
+    confirm: true,
+    label: 'Slet',
+    mode: 'ireversable-action',
+    header: 'Bekræft',
+    message: '<p>Er du sikker på, at du vil slette den valgte fil?</p>',
+    okButtonText: 'Ja',
+    cancelButtonText: 'Annuller',
+  },
+  render: (args) => <AlertWrapper {...args} />,
 };

package/stories/AUAutoSuggestComponent.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { StoryObj, Meta } from '@storybook/react';
 import AUAutoSuggestComponent from '../src/components/AUAutoSuggestComponent';
 import { ThemeWrapper } from './lib/helpers';
 
@@ -20,78 +20,77 @@ export default {
       </ThemeWrapper>
     )
   ],
-} as ComponentMeta<typeof AUAutoSuggestComponent>;
+} as Meta<typeof AUAutoSuggestComponent>;
 
-const Template: ComponentStory<typeof AUAutoSuggestComponent> = (args) => <div className="form__field"><AUAutoSuggestComponent {...args} /></div>;
+type Story = StoryObj<typeof AUAutoSuggestComponent>;
 
-export const AutoComplete = Template.bind({});
+export const AutoComplete: Story = {
+  args: {
+    collection: [],
+    getSuggestions: (value, _, callback) => {
+      const inputValue = value.trim().toLowerCase();
+      const inputLength = inputValue.length;
 
-AutoComplete.args = {
-  collection: [],
-  getSuggestions: (value, _, callback) => {
-    const inputValue = value.trim().toLowerCase();
-    const inputLength = inputValue.length;
+      const results = inputLength === 0
+        ? []
+        : [
+          { id: 1, name: 'Copenhagen' },
+          { id: 2, name: 'Aarhus' },
+          { id: 3, name: 'Odense' },
+          { id: 4, name: 'Aalborg' },
+          { id: 5, name: 'Esbjerg' },
+          { id: 6, name: 'Randers' },
+          { id: 7, name: 'Kolding' },
+          { id: 8, name: 'Horsens' },
+          { id: 9, name: 'Vejle' },
+          { id: 10, name: 'Herning' },
+          { id: 11, name: 'Frederiksberg' },
+          { id: 12, name: 'Fredericia' },
+          { id: 13, name: 'Roskilde' },
+          { id: 14, name: 'Silkeborg' },
+          { id: 15, name: 'Næstved' },
+          { id: 16, name: 'Helsingør' },
+          { id: 17, name: 'Hvidovre' },
+          { id: 18, name: 'Holstebro' },
+          { id: 19, name: 'Hjørring' },
+          { id: 20, name: 'Glostrup' },
+          { id: 21, name: 'Hillerød' },
+          { id: 22, name: 'Slagelse' },
+          { id: 23, name: 'Viborg' },
+          { id: 24, name: 'Ikast-Brande' },
+          { id: 25, name: 'Frederikshavn' },
+          { id: 26, name: 'Ringsted' },
+          { id: 27, name: 'Taastrup' },
+          { id: 28, name: 'Køge' },
+          { id: 29, name: 'Nørresundby' },
+          { id: 30, name: 'Haderslev' },
+          { id: 31, name: 'Varde' },
+          { id: 32, name: 'Hedensted' },
+          { id: 33, name: 'Sønderborg' },
+          { id: 34, name: 'Greve' },
+          { id: 35, name: 'Albertslund' },
+          { id: 36, name: 'Skive' },
+          { id: 37, name: 'Hørsholm' },
+          { id: 38, name: 'Horsens' },
+          { id: 39, name: 'Herning' },
+          { id: 40, name: 'Frederiksberg' },
+          { id: 41, name: 'Fredericia' },
+          { id: 42, name: 'Roskilde' },
+          { id: 43, name: 'Silkeborg' },
+          { id: 44, name: 'Næstved' },
+          { id: 45, name: 'Helsingør' },
+          { id: 46, name: 'Hvidovre' },
+          { id: 47, name: 'Holstebro' },
 
-    console.log('tis ');
+        ].filter((lang) => lang.name.toLowerCase().slice(0, inputLength) === inputValue);
 
-    const results = inputLength === 0
-      ? []
-      : [
-        { id: 1, name: 'Copenhagen' },
-        { id: 2, name: 'Aarhus' },
-        { id: 3, name: 'Odense' },
-        { id: 4, name: 'Aalborg' },
-        { id: 5, name: 'Esbjerg' },
-        { id: 6, name: 'Randers' },
-        { id: 7, name: 'Kolding' },
-        { id: 8, name: 'Horsens' },
-        { id: 9, name: 'Vejle' },
-        { id: 10, name: 'Herning' },
-        { id: 11, name: 'Frederiksberg' },
-        { id: 12, name: 'Fredericia' },
-        { id: 13, name: 'Roskilde' },
-        { id: 14, name: 'Silkeborg' },
-        { id: 15, name: 'Næstved' },
-        { id: 16, name: 'Helsingør' },
-        { id: 17, name: 'Hvidovre' },
-        { id: 18, name: 'Holstebro' },
-        { id: 19, name: 'Hjørring' },
-        { id: 20, name: 'Glostrup' },
-        { id: 21, name: 'Hillerød' },
-        { id: 22, name: 'Slagelse' },
-        { id: 23, name: 'Viborg' },
-        { id: 24, name: 'Ikast-Brande' },
-        { id: 25, name: 'Frederikshavn' },
-        { id: 26, name: 'Ringsted' },
-        { id: 27, name: 'Taastrup' },
-        { id: 28, name: 'Køge' },
-        { id: 29, name: 'Nørresundby' },
-        { id: 30, name: 'Haderslev' },
-        { id: 31, name: 'Varde' },
-        { id: 32, name: 'Hedensted' },
-        { id: 33, name: 'Sønderborg' },
-        { id: 34, name: 'Greve' },
-        { id: 35, name: 'Albertslund' },
-        { id: 36, name: 'Skive' },
-        { id: 37, name: 'Hørsholm' },
-        { id: 38, name: 'Horsens' },
-        { id: 39, name: 'Herning' },
-        { id: 40, name: 'Frederiksberg' },
-        { id: 41, name: 'Fredericia' },
-        { id: 42, name: 'Roskilde' },
-        { id: 43, name: 'Silkeborg' },
-        { id: 44, name: 'Næstved' },
-        { id: 45, name: 'Helsingør' },
-        { id: 46, name: 'Hvidovre' },
-        { id: 47, name: 'Holstebro' },
-
-      ].filter((lang) => lang.name.toLowerCase().slice(0, inputLength) === inputValue);
-
-    callback(results);
+      callback(results);
+    },
+    getSuggestionValue: (suggestion) => suggestion.name,
+    setResults: () => { },
+    setQuery: () => { },
+    renderSuggestion: (suggestion) => <span>{suggestion.name}</span>,
+    placeholder: 'Search',
   },
-  getSuggestionValue: (suggestion) => suggestion.name,
-  setResults: () => { },
-  setQuery: () => { },
-  renderSuggestion: (suggestion) => <span>{suggestion.name}</span>,
-  placeholder: 'Search',
-};
+  render: (args) => <AUAutoSuggestComponent {...args} />,
+};