@aarhus-university/au-lib-react-components 10.6.0 → 10.9.0

package/.eslintrc.js

@@ -1,34 +1,34 @@
-module.exports = {
-  root: true,
-  extends: ['airbnb', 'plugin:@typescript-eslint/eslint-recommended', 'plugin:@typescript-eslint/recommended', 'plugin:storybook/recommended'],
-  plugins: ['react', 'react-hooks', '@typescript-eslint'],
-  parser: '@typescript-eslint/parser',
-  rules: {
-    'import/extensions': [0],
-    'react/jsx-filename-extension': [0],
-    'no-use-before-define': [0],
-    '@typescript-eslint/no-use-before-define': ['error'],
-    'no-shadow': 'off',
-    '@typescript-eslint/no-shadow': ['error'],
-    'react/no-danger': [0],
-    'linebreak-style': [0],
-    'react/function-component-definition': [2, {
-      namedComponents: 'arrow-function',
-      unnamedComponents: 'arrow-function',
-    }],
-    'react-hooks/rules-of-hooks': 'error',
-  },
-  settings: {
-    react: {
-      version: 'detect',
-    },
-    'import/resolver': {
-      typescript: {},
-    },
-  },
-  ignorePatterns: ['stories'],
-  globals: {
-    AU: true,
-    $: true,
-  },
-};
+module.exports = {
+  root: true,
+  extends: ['airbnb', 'plugin:@typescript-eslint/eslint-recommended', 'plugin:@typescript-eslint/recommended', 'plugin:storybook/recommended'],
+  plugins: ['react', 'react-hooks', '@typescript-eslint'],
+  parser: '@typescript-eslint/parser',
+  rules: {
+    'import/extensions': [0],
+    'react/jsx-filename-extension': [0],
+    'no-use-before-define': [0],
+    '@typescript-eslint/no-use-before-define': ['error'],
+    'no-shadow': 'off',
+    '@typescript-eslint/no-shadow': ['error'],
+    'react/no-danger': [0],
+    'linebreak-style': [0],
+    'react/function-component-definition': [2, {
+      namedComponents: 'arrow-function',
+      unnamedComponents: 'arrow-function',
+    }],
+    'react-hooks/rules-of-hooks': 'error',
+  },
+  settings: {
+    react: {
+      version: 'detect',
+    },
+    'import/resolver': {
+      typescript: {},
+    },
+  },
+  ignorePatterns: ['stories'],
+  globals: {
+    AU: true,
+    $: true,
+  },
+};

package/.storybook/main.js

@@ -1,8 +1,21 @@
-module.exports = {
-  "stories": ["../**/*.stories.mdx", "../**/*.stories.@(js|jsx|ts|tsx)"],
-  "addons": ["@storybook/addon-links", "@storybook/addon-essentials", "@storybook/addon-interactions"],
-  "framework": "@storybook/react",
-  core: {
-    builder: "webpack5"
-  }
+const path = require('path');
+
+module.exports = {
+  "stories": ["../**/*.stories.mdx", "../**/*.stories.@(js|jsx|ts|tsx)"],
+  "addons": ["@storybook/addon-links", "@storybook/addon-essentials", "@storybook/addon-interactions"],
+  "framework": "@storybook/react",
+  core: {
+    builder: "webpack5"
+  },
+  webpackFinal: async (config) => {
+    config.module.rules.push({
+      test: /\.(ts|js)x?$/,
+      include: path.resolve(__dirname, '../node_modules/@aarhus-university/au-designsystem-delphinus/source'),
+      use: {
+        loader: 'babel-loader',
+      },
+    });
+    return config;
+    // return { ...config, module: { ...config.module, rules: custom.module.rules } };
+  },
 };

package/.storybook/preview.js

@@ -1,11 +1,11 @@
-import '@aarhus-university/au-designsystem-delphinus/build/style.css';
-
-export const parameters = {
-  actions: { argTypesRegex: "^on[A-Z].*" },
-  controls: {
-    matchers: {
-      color: /(background|color)$/i,
-      date: /Date$/,
-    },
-  },
+import '@aarhus-university/au-designsystem-delphinus/build/style.css';
+
+export const parameters = {
+  actions: { argTypesRegex: "^on[A-Z].*" },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
 };

package/README.md

@@ -1,19 +1,19 @@
-# AU Lib React Components
-> @aarhus-university/au-lib-react-components
-
-## Beskrivelse
-> React-komponentbibliotek, der kan anvendes på tværs af andre React-projekter
-
-## Kræver
-Nodejs/npm
-
-## Installation
-* Kør `npm install` i en terminal for at installere npm-afhængigheder til dette projekt.
-* Kør `npm install @aarhus-university/au-lib-react-components@latest --save` i en terminal for at installere dette projekt som en afhængighed i et andet npm-projekt.
-
-## Afvikling
-* `npm run build` for at bygge de færdige Universal Module Definition-filer (til brug som selvstændige applikationer)
-
-## Versionering og udgivelse
-* `npm version major|minor|patch` for 'version bump'.
-* `npm publish` for udgivelse i npm-registry.
+# AU Lib React Components
+> @aarhus-university/au-lib-react-components
+
+## Beskrivelse
+> React-komponentbibliotek, der kan anvendes på tværs af andre React-projekter
+
+## Kræver
+Nodejs/npm
+
+## Installation
+* Kør `npm install` i en terminal for at installere npm-afhængigheder til dette projekt.
+* Kør `npm install @aarhus-university/au-lib-react-components@latest --save` i en terminal for at installere dette projekt som en afhængighed i et andet npm-projekt.
+
+## Afvikling
+* `npm run build` for at bygge de færdige Universal Module Definition-filer (til brug som selvstændige applikationer)
+
+## Versionering og udgivelse
+* `npm version major|minor|patch` for 'version bump'.
+* `npm publish` for udgivelse i npm-registry.

package/__tests__/jest/AUButtonComponent.test.tsx

@@ -1,163 +1,165 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import React from 'react';
-import { render, screen, fireEvent } from '@testing-library/react';
-// import userEvent from '@testing-library/user-event';
-import '@testing-library/jest-dom';
-import AUButtonComponent from '../../src/components/AUButtonComponent';
-
-describe('<AUButtonComponent />', () => {
-  it('renders a default sized button', () => {
-    render(
-      <AUButtonComponent
-        label="Min knap"
-      />,
-    );
-
-    const button = screen.getByText('Min knap');
-    expect(button).toBeInTheDocument();
-  });
-
-  it('renders a default sized disabled button', () => {
-    render(
-      <AUButtonComponent
-        label="Min knap"
-        disabled
-      />,
-    );
-
-    const button = screen.getByText('Min knap');
-    expect(button).toBeDisabled();
-  });
-
-  it('renders a large enabled button with no icon', () => {
-    const { container } = render(
-      <AUButtonComponent
-        label="Min knap"
-        size="large"
-      />,
-    );
-
-    const button = container?.querySelector('button');
-    const classList = button?.classList;
-    expect(classList?.contains('button--large')).toBe(true);
-    expect(button?.hasAttribute('data-icon')).toBe(false);
-    expect(button).toBeEnabled();
-  });
-
-  it('renders a small dimmed button', () => {
-    const { container } = render(
-      <AUButtonComponent
-        label="Min knap"
-        size="small"
-        type="dimmed"
-      />,
-    );
-
-    const classList = container?.querySelector('button')?.classList;
-    expect(classList?.contains('button--small')).toBe(true);
-    expect(classList?.contains('button--dimmed')).toBe(true);
-  });
-
-  it('renders a default sized text button with a narwhal icon to the right', () => {
-    const { container } = render(
-      <AUButtonComponent
-        label="Min knap"
-        type="text"
-        icon=""
-        iconPosition="right"
-      />,
-    );
-
-    const button = container?.querySelector('button');
-    const classList = button?.classList;
-    expect(classList?.contains('button--small')).toBe(false);
-    expect(classList?.contains('button--large')).toBe(false);
-    expect(classList?.contains('button--text')).toBe(true);
-    expect(classList?.contains('button--icon')).toBe(true);
-    expect(classList?.contains('button--icon--right')).toBe(true);
-    expect(button?.getAttribute('data-icon')).toBe('');
-  });
-
-  it('renders a button with a narwhal icon with a hidden label', () => {
-    const { container } = render(
-      <AUButtonComponent
-        label="Min knap"
-        icon=""
-        hideLabel
-      />,
-    );
-
-    const button = container?.querySelector('button');
-    const classList = button?.classList;
-    expect(classList?.contains('button--icon')).toBe(true);
-    expect(classList?.contains('button--icon--hide-label')).toBe(true);
-    expect(button?.getAttribute('data-icon')).toBe('');
-    expect(button?.getAttribute('title')).toBe('Min knap');
-  });
-
-  it('renders a default sized ireversable (sic) action button', () => {
-    const { container } = render(
-      <AUButtonComponent
-        label="Min knap"
-        mode="ireversable-action"
-      />,
-    );
-
-    const classList = container?.querySelector('button')?.classList;
-    expect(classList?.contains('button--ireversable-action')).toBe(true);
-  });
-
-  it('renders a large confirmable action button with a check icon and a hidden label', () => {
-    const { container } = render(
-      <AUButtonComponent
-        label="Min knap"
-        size="large"
-        mode="confirmable-action"
-        icon=""
-        hideLabel
-      />,
-    );
-
-    const button = container?.querySelector('button');
-    const classList = button?.classList;
-    expect(classList?.contains('button--large')).toBe(true);
-    expect(classList?.contains('button--confirmable-action')).toBe(true);
-    expect(classList?.contains('button--icon')).toBe(true);
-    expect(classList?.contains('button--icon--hide-label')).toBe(true);
-    expect(button?.getAttribute('data-icon')).toBe('');
-    expect(button?.getAttribute('title')).toBe('Min knap');
-  });
-
-  it('renders a small disabled processing button', () => {
-    const { container } = render(
-      <AUButtonComponent
-        label="Min knap"
-        size="small"
-        mode="processing"
-        disabled
-      />,
-    );
-
-    const button = container?.querySelector('button');
-    const classList = button?.classList;
-    expect(classList?.contains('button--small')).toBe(true);
-    expect(classList?.contains('button--processing')).toBe(true);
-    expect(button).toBeDisabled();
-  });
-
-  it('does something when clicked', () => {
-    const handleClick = jest.fn();
-    const { container } = render(
-      <AUButtonComponent
-        label="Min knap"
-        onClick={handleClick}
-      />,
-    );
-
-    const button = container?.querySelector('button');
-    if (button) {
-      fireEvent.click(button);
-      expect(handleClick).toHaveBeenCalledTimes(1);
-    }
-  });
-});
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+// import userEvent from '@testing-library/user-event';
+import '@testing-library/jest-dom';
+import AUButtonComponent from '../../src/components/AUButtonComponent';
+
+describe('<AUButtonComponent />', () => {
+  it('renders a default sized button', () => {
+    render(
+      <AUButtonComponent
+        label="Min knap"
+      />,
+    );
+
+    const button = screen.getByText('Min knap');
+    expect(button).toBeInTheDocument();
+  });
+
+  it('renders a default sized disabled button', () => {
+    render(
+      <AUButtonComponent
+        label="Min knap"
+        disabled
+      />,
+    );
+
+    const button = screen.getByText('Min knap');
+    expect(button).toBeDisabled();
+  });
+
+  it('renders a large enabled button with no icon', () => {
+    const { container } = render(
+      <AUButtonComponent
+        label="Min knap"
+        size="large"
+      />,
+    );
+
+    const button = container?.querySelector('button');
+    const classList = button?.classList;
+    expect(classList?.contains('button--large')).toBe(true);
+    expect(button?.hasAttribute('data-icon')).toBe(false);
+    expect(button).toBeEnabled();
+  });
+
+  it('renders a small dimmed button with an extra classname', () => {
+    const { container } = render(
+      <AUButtonComponent
+        label="Min knap"
+        size="small"
+        type="dimmed"
+        classNames={['fubar']}
+      />,
+    );
+
+    const classList = container?.querySelector('button')?.classList;
+    expect(classList?.contains('button--small')).toBe(true);
+    expect(classList?.contains('button--dimmed')).toBe(true);
+    expect(classList?.contains('fubar')).toBe(true);
+  });
+
+  it('renders a default sized text button with a narwhal icon to the right', () => {
+    const { container } = render(
+      <AUButtonComponent
+        label="Min knap"
+        type="text"
+        icon=""
+        iconPosition="right"
+      />,
+    );
+
+    const button = container?.querySelector('button');
+    const classList = button?.classList;
+    expect(classList?.contains('button--small')).toBe(false);
+    expect(classList?.contains('button--large')).toBe(false);
+    expect(classList?.contains('button--text')).toBe(true);
+    expect(classList?.contains('button--icon')).toBe(true);
+    expect(classList?.contains('button--icon--right')).toBe(true);
+    expect(button?.getAttribute('data-icon')).toBe('');
+  });
+
+  it('renders a button with a narwhal icon with a hidden label', () => {
+    const { container } = render(
+      <AUButtonComponent
+        label="Min knap"
+        icon=""
+        hideLabel
+      />,
+    );
+
+    const button = container?.querySelector('button');
+    const classList = button?.classList;
+    expect(classList?.contains('button--icon')).toBe(true);
+    expect(classList?.contains('button--icon--hide-label')).toBe(true);
+    expect(button?.getAttribute('data-icon')).toBe('');
+    expect(button?.getAttribute('title')).toBe('Min knap');
+  });
+
+  it('renders a default sized ireversable (sic) action button', () => {
+    const { container } = render(
+      <AUButtonComponent
+        label="Min knap"
+        mode="ireversable-action"
+      />,
+    );
+
+    const classList = container?.querySelector('button')?.classList;
+    expect(classList?.contains('button--ireversable-action')).toBe(true);
+  });
+
+  it('renders a large confirmable action button with a check icon and a hidden label', () => {
+    const { container } = render(
+      <AUButtonComponent
+        label="Min knap"
+        size="large"
+        mode="confirmable-action"
+        icon=""
+        hideLabel
+      />,
+    );
+
+    const button = container?.querySelector('button');
+    const classList = button?.classList;
+    expect(classList?.contains('button--large')).toBe(true);
+    expect(classList?.contains('button--confirmable-action')).toBe(true);
+    expect(classList?.contains('button--icon')).toBe(true);
+    expect(classList?.contains('button--icon--hide-label')).toBe(true);
+    expect(button?.getAttribute('data-icon')).toBe('');
+    expect(button?.getAttribute('title')).toBe('Min knap');
+  });
+
+  it('renders a small disabled processing button', () => {
+    const { container } = render(
+      <AUButtonComponent
+        label="Min knap"
+        size="small"
+        mode="processing"
+        disabled
+      />,
+    );
+
+    const button = container?.querySelector('button');
+    const classList = button?.classList;
+    expect(classList?.contains('button--small')).toBe(true);
+    expect(classList?.contains('button--processing')).toBe(true);
+    expect(button).toBeDisabled();
+  });
+
+  it('does something when clicked', () => {
+    const handleClick = jest.fn();
+    const { container } = render(
+      <AUButtonComponent
+        label="Min knap"
+        onClick={handleClick}
+      />,
+    );
+
+    const button = container?.querySelector('button');
+    if (button) {
+      fireEvent.click(button);
+      expect(handleClick).toHaveBeenCalledTimes(1);
+    }
+  });
+});

package/__tests__/jest/AUErrorComponent.test.tsx

@@ -0,0 +1,142 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import React from 'react';
+import { render } from '@testing-library/react';
+import { SerializedError } from '@reduxjs/toolkit';
+import { FetchBaseQueryError } from '@reduxjs/toolkit/dist/query';
+// import userEvent from '@testing-library/user-event';
+import '@testing-library/jest-dom';
+import AUErrorComponent from '../../src/components/AUErrorComponent';
+
+const auError: AU.IError = {
+  header: 'Our own custom error',
+  message: 'With a nice header and descriptive error message',
+  status: 500,
+};
+
+const fetchError1: FetchBaseQueryError = {
+  status: 'FETCH_ERROR',
+  error: 'Sum Ting Wong',
+};
+
+const fetchError2: FetchBaseQueryError = {
+  status: 500,
+  data: {
+    status: 'Error',
+    message: 'Sum Ting Wong',
+  },
+};
+
+const serializedError: SerializedError = {
+  code: '500',
+  message: 'Sum Ting Wong',
+  name: 'Some kind of error',
+  stack: 'Some kind of stack trace',
+};
+
+describe('<AUErrorComponent />', () => {
+  it('renders an AU custom error without a status code', () => {
+    const { container } = render(
+      <AUErrorComponent
+        error={auError}
+      />,
+    );
+
+    const header = container.querySelector('.notification__header');
+    const p = container.querySelector('.notification__content p');
+    expect(header).toBeInTheDocument();
+    expect(p?.innerHTML).toBe(auError.message);
+  });
+
+  it('renders an AU custom error with a status code', () => {
+    const { container } = render(
+      <AUErrorComponent
+        error={auError}
+        withStatus
+      />,
+    );
+
+    const header = container.querySelector('.notification__header');
+    expect(header?.innerHTML).toBe(`${auError.status}: ${auError.header}`);
+  });
+
+  it('renders a fetch error without a status code', () => {
+    const { container } = render(
+      <AUErrorComponent
+        fetchError={fetchError1}
+      />,
+    );
+
+    const header = container.querySelector('.notification__header');
+    const p = container.querySelector('.notification__content p');
+    expect(header).toBe(null);
+    expect(p?.innerHTML).toBe(fetchError1.error);
+  });
+
+  it('renders a fetch error with a status code', () => {
+    const { container } = render(
+      <AUErrorComponent
+        fetchError={fetchError1}
+        withStatus
+      />,
+    );
+
+    const header = container.querySelector('.notification__header');
+    const p = container.querySelector('.notification__content p');
+    expect(header?.innerHTML).toBe(fetchError1.status);
+    expect(p?.innerHTML).toBe(fetchError1.error);
+  });
+
+  it('renders a fetch error with stringified text without a status code', () => {
+    const { container } = render(
+      <AUErrorComponent
+        fetchError={fetchError2}
+      />,
+    );
+
+    const header = container.querySelector('.notification__header');
+    const p = container.querySelector('.notification__content p');
+    expect(header).toBe(null);
+    expect(p?.innerHTML).toBe(JSON.stringify(fetchError2.data));
+  });
+
+  it('renders a fetch error with stringified text with a status code', () => {
+    const { container } = render(
+      <AUErrorComponent
+        fetchError={fetchError2}
+        withStatus
+      />,
+    );
+
+    const header = container.querySelector('.notification__header');
+    const p = container.querySelector('.notification__content p');
+    expect(header?.innerHTML).toBe(`${fetchError2.status}`);
+    expect(p?.innerHTML).toBe(JSON.stringify(fetchError2.data));
+  });
+
+  it('renders a serialized error with without a status code', () => {
+    const { container } = render(
+      <AUErrorComponent
+        serializedError={serializedError}
+      />,
+    );
+
+    const header = container.querySelector('.notification__header');
+    const p = container.querySelector('.notification__content p');
+    expect(header).toBe(null);
+    expect(p?.innerHTML).toBe(serializedError.message);
+  });
+
+  it('renders a serialized error with a status code', () => {
+    const { container } = render(
+      <AUErrorComponent
+        serializedError={serializedError}
+        withStatus
+      />,
+    );
+
+    const header = container.querySelector('.notification__header');
+    const p = container.querySelector('.notification__content p');
+    expect(header?.innerHTML).toBe(serializedError.code);
+    expect(p?.innerHTML).toBe(serializedError.message);
+  });
+});