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

package/package.json

@@ -1,66 +1,107 @@
-{
-  "sideEffects": false,
-  "name": "@aarhus-university/au-lib-react-components",
-  "version": "10.3.3",
-  "description": "Library for shared React components for various applications on au.dk",
-  "scripts": {
-    "build": "webpack --config ./webpack.config.js"
-  },
-  "repository": {
-    "type": "git",
-    "url": "https://gitlab.au.dk/au-web-og-digital/au-lib-react-components"
-  },
-  "author": {
-    "name": "Thomas Riis Hansen",
-    "email": "trh@au.dk"
-  },
-  "devDependencies": {
-    "@babel/core": "^7.17.0",
-    "@babel/plugin-proposal-class-properties": "^7.16.7",
-    "@babel/plugin-proposal-object-rest-spread": "^7.16.7",
-    "@babel/plugin-proposal-optional-chaining": "^7.16.7",
-    "@babel/preset-env": "^7.16.11",
-    "@babel/preset-react": "^7.16.7",
-    "@babel/preset-typescript": "^7.16.7",
-    "@typescript-eslint/eslint-plugin": "^5.10.2",
-    "@typescript-eslint/parser": "^5.10.2",
-    "babel-eslint": "^10.1.0",
-    "babel-loader": "^8.2.3",
-    "css-loader": "^6.6.0",
-    "eslint": "^8.8.0",
-    "eslint-config-airbnb": "^19.0.4",
-    "eslint-import-resolver-typescript": "^2.5.0",
-    "eslint-plugin-import": "^2.25.4",
-    "eslint-plugin-jsx-a11y": "^6.5.1",
-    "eslint-plugin-react": "^7.28.0",
-    "eslint-plugin-react-hooks": "^4.3.0",
-    "eslint-webpack-plugin": "^3.1.1",
-    "fork-ts-checker-webpack-plugin": "^7.0.0",
-    "mini-css-extract-plugin": "^2.5.3",
-    "sass": "^1.49.7",
-    "sass-loader": "^12.4.0",
-    "style-loader": "^3.3.1",
-    "ts-loader": "^9.2.6",
-    "typescript": "^4.5.5",
-    "webpack-cli": "^4.9.2"
-  },
-  "dependencies": {
-    "@aarhus-university/au-designsystem-delphinus": "^0.26.8",
-    "@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",
-    "lodash.debounce": "^4.0.8",
-    "prop-types": "^15.8.1",
-    "query-string": "^7.1.0",
-    "react-autosuggest": "^10.1.0",
-    "react-router-dom": "^6.2.1",
-    "webpack": "^5.68.0"
-  },
-  "peerDependencies": {
-    "react": "18.2.0",
-    "react-dom": "^18.2.0"
-  }
-}
+{
+  "sideEffects": false,
+  "name": "@aarhus-university/au-lib-react-components",
+  "version": "10.6.0",
+  "description": "Library for shared React components for various applications on au.dk",
+  "scripts": {
+    "test": "jest",
+    "build": "jest && webpack --config ./webpack.config.js",
+    "storybook": "start-storybook -p 6006",
+    "build-storybook": "build-storybook"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://gitlab.au.dk/au-web-og-digital/au-lib-react-components"
+  },
+  "author": {
+    "name": "Thomas Riis Hansen",
+    "email": "trh@au.dk"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.17.0",
+    "@babel/plugin-proposal-class-properties": "^7.16.7",
+    "@babel/plugin-proposal-object-rest-spread": "^7.16.7",
+    "@babel/plugin-proposal-optional-chaining": "^7.16.7",
+    "@babel/preset-env": "^7.16.11",
+    "@babel/preset-react": "^7.16.7",
+    "@babel/preset-typescript": "^7.16.7",
+    "@mdx-js/react": "^2.1.2",
+    "@storybook/addon-actions": "^6.5.4",
+    "@storybook/addon-essentials": "^6.5.4",
+    "@storybook/addon-interactions": "^6.5.4",
+    "@storybook/addon-links": "^6.5.4",
+    "@storybook/builder-webpack4": "^6.5.4",
+    "@storybook/builder-webpack5": "^6.5.4",
+    "@storybook/manager-webpack4": "^6.5.4",
+    "@storybook/manager-webpack5": "^6.5.4",
+    "@storybook/react": "^6.5.4",
+    "@storybook/testing-library": "^0.0.11",
+    "@testing-library/jest-dom": "5.0.0",
+    "@testing-library/react": "13.0.0",
+    "@testing-library/user-event": "14.0.0",
+    "@types/jest": "^27.4.0",
+    "@types/testing-library__jest-dom": "5.0.0",
+    "@typescript-eslint/eslint-plugin": "^5.10.2",
+    "@typescript-eslint/parser": "^5.10.2",
+    "babel-eslint": "^10.1.0",
+    "babel-jest": "^27.5.1",
+    "babel-loader": "^8.2.3",
+    "css-loader": "^6.6.0",
+    "eslint": "^8.8.0",
+    "eslint-config-airbnb": "^19.0.4",
+    "eslint-import-resolver-typescript": "^2.5.0",
+    "eslint-plugin-import": "^2.25.4",
+    "eslint-plugin-jsx-a11y": "^6.5.1",
+    "eslint-plugin-react": "^7.28.0",
+    "eslint-plugin-react-hooks": "^4.3.0",
+    "eslint-plugin-storybook": "^0.5.12",
+    "eslint-webpack-plugin": "^3.1.1",
+    "fork-ts-checker-webpack-plugin": "^7.0.0",
+    "jest": "^27.5.1",
+    "mini-css-extract-plugin": "^2.5.3",
+    "react-test-renderer": "18.1.0",
+    "sass": "^1.49.7",
+    "sass-loader": "^12.4.0",
+    "style-loader": "^3.3.1",
+    "ts-loader": "^9.2.6",
+    "typescript": "^4.5.5",
+    "webpack-cli": "^4.9.2"
+  },
+  "dependencies": {
+    "@aarhus-university/au-designsystem-delphinus": "0.28.0",
+    "@aarhus-university/types": "^0.2.0",
+    "@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",
+    "lodash.debounce": "^4.0.8",
+    "prop-types": "^15.8.1",
+    "query-string": "^7.1.0",
+    "react": "18.2.0",
+    "react-autosuggest": "^10.1.0",
+    "react-router-dom": "^6.2.1",
+    "regenerator-runtime": "^0.13.9",
+    "webpack": "^5.68.0",
+    "whatwg-fetch": "^3.6.2"
+  },
+  "peerDependencies": {
+    "react": "18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "jest": {
+    "rootDir": "__tests__/jest",
+    "setupFilesAfterEnv": [
+      "./setupTests.ts"
+    ],
+    "testEnvironment": "jsdom",
+    "transformIgnorePatterns": [
+      "node_modules/(?!(@aarhus-university/au-lib-react-components|@aarhus-university/au-designsystem-delphinus|node-fetch|data-uri-to-buffer|fetch-blob|formdata-polyfill)/)"
+    ],
+    "testPathIgnorePatterns": [
+      "factory.ts",
+      "setupTests.ts"
+    ]
+  }
+}

package/src/components/AUAlertComponent.tsx

@@ -1,70 +1,70 @@
-/* eslint-disable @typescript-eslint/no-non-null-assertion */
-/* eslint-env browser */
-import React, { FC } from 'react';
-import ReactDOM from 'react-dom';
-
-const AUAlertComponent: FC<AUAlertComponentProps> = ({
-  message,
-  children,
-  alert,
-  buttons,
-}: AUAlertComponentProps) => {
-  const renderButtons = (buttons || []).map((button) => (
-    <button
-      key={button.text}
-      type="button"
-      className={button.className}
-      data-icon={button.dataIcon}
-      onClick={() => {
-        button.onClick();
-      }}
-    >
-      {button.text}
-    </button>
-  ));
-
-  if (alert) {
-    return (
-      <>
-        {
-          ReactDOM.createPortal(
-            <div key="0" className="theme--normal toast-notification toast-notification--attention toast-notification--persistent">
-              <div className="toast-notification__content">
-                <p dangerouslySetInnerHTML={{ __html: message }} />
-              </div>
-              {renderButtons}
-            </div>,
-            document.querySelector('body')!,
-          )
-        }
-        {children}
-      </>
-    );
-  }
-
-  if (!children) {
-    return null;
-  }
-
-  return children;
-};
-
-AUAlertComponent.defaultProps = {
-  buttons: [{
-    className: 'button',
-    text: 'OK',
-    dataIcon: null,
-    // eslint-disable-next-line no-console
-    onClick: () => console.log('clicked on OK'),
-  }, {
-    className: 'button',
-    text: 'Annuller',
-    dataIcon: null,
-    // eslint-disable-next-line no-console
-    onClick: () => console.log('clicked on cancel'),
-  },
-  ],
-};
-
-AUAlertComponent.displayName = 'AUAlertComponent';
-export default AUAlertComponent;
+/* eslint-disable @typescript-eslint/no-non-null-assertion */
+/* eslint-env browser */
+import React, { FC } from 'react';
+import ReactDOM from 'react-dom';
+
+const AUAlertComponent: FC<AUAlertComponentProps> = ({
+  message,
+  children,
+  alert,
+  buttons,
+}: AUAlertComponentProps) => {
+  const renderButtons = (buttons || []).map((button) => (
+    <button
+      key={button.text}
+      type="button"
+      className={button.className}
+      data-icon={button.dataIcon}
+      onClick={() => {
+        button.onClick();
+      }}
+    >
+      {button.text}
+    </button>
+  ));
+
+  if (alert) {
+    return (
+      <>
+        {
+          ReactDOM.createPortal(
+            <div key="0" className="theme--normal toast-notification toast-notification--attention toast-notification--persistent">
+              <div className="toast-notification__content">
+                <p dangerouslySetInnerHTML={{ __html: message }} />
+              </div>
+              {renderButtons}
+            </div>,
+            document.querySelector('body')!,
+          )
+        }
+        {children}
+      </>
+    );
+  }
+
+  if (!children) {
+    return null;
+  }
+
+  return children;
+};
+
+AUAlertComponent.defaultProps = {
+  buttons: [{
+    className: 'button',
+    text: 'OK',
+    dataIcon: null,
+    // eslint-disable-next-line no-console
+    onClick: () => console.log('clicked on OK'),
+  }, {
+    className: 'button',
+    text: 'Annuller',
+    dataIcon: null,
+    // eslint-disable-next-line no-console
+    onClick: () => console.log('clicked on cancel'),
+  },
+  ],
+};
+
+AUAlertComponent.displayName = 'AUAlertComponent';
+export default AUAlertComponent;

package/src/components/AUAutoSuggestComponent.js

@@ -1,158 +1,158 @@
-/* eslint-disable @typescript-eslint/no-empty-function */
-import React from 'react';
-import PropTypes from 'prop-types';
-import Autosuggest from 'react-autosuggest';
-import debounce from 'lodash.debounce';
-
-class AUAutoSuggestComponent extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      value: '',
-      suggestions: [],
-      noSuggestions: false,
-    };
-
-    this.onChange = this.onChange.bind(this);
-    this.onEnter = this.onEnter.bind(this);
-    this.onSuggestionsFetchRequested = debounce(this.onSuggestionsFetchRequested.bind(this), 400);
-    this.onSuggestionsClearRequested = this.onSuggestionsClearRequested.bind(this);
-    this.onSuggestionSelected = this.onSuggestionSelected.bind(this);
-  }
-
-  onChange(_, { newValue }) {
-    const { setQuery } = this.props;
-    this.setState({
-      value: newValue,
-    }, () => {
-      setQuery(newValue);
-    });
-  }
-
-  onEnter(event) {
-    const { suggestions } = this.state;
-    const { setResults } = this.props;
-    if (event.key === 'Enter') {
-      setResults(suggestions);
-    }
-  }
-
-  onSuggestionsFetchRequested({ value }) {
-    const { getSuggestions, collection } = this.props;
-    getSuggestions(value, collection, (suggestions) => {
-      this.setState({
-        suggestions,
-        noSuggestions: suggestions.length === 0 && value.trim() !== '' && value.trim().length > 1,
-      });
-    });
-  }
-
-  onSuggestionsClearRequested() {
-    this.setState({
-      suggestions: [],
-    });
-  }
-
-  onSuggestionSelected(event, { suggestion }) {
-    const { setResults, clearInput } = this.props;
-    setResults([suggestion]);
-    if (clearInput) {
-      this.setState({
-        value: '',
-      });
-    }
-  }
-
-  render() {
-    const { value, suggestions, noSuggestions } = this.state;
-    const {
-      placeholder,
-      getSuggestionValue,
-      renderSuggestion,
-      id,
-      theme,
-      type,
-      initialValue,
-      disabled,
-      noResultsText,
-    } = this.props;
-    const inputProps = {
-      placeholder,
-      value: initialValue || value,
-      id,
-      type,
-      disabled,
-      'aria-label': placeholder,
-      onChange: this.onChange,
-      onKeyDown: this.onEnter,
-    };
-
-    return (
-      <>
-        <Autosuggest
-          suggestions={suggestions}
-          onSuggestionsFetchRequested={this.onSuggestionsFetchRequested}
-          onSuggestionsClearRequested={this.onSuggestionsClearRequested}
-          onSuggestionSelected={this.onSuggestionSelected}
-          getSuggestionValue={getSuggestionValue}
-          renderSuggestion={renderSuggestion}
-          inputProps={inputProps}
-          theme={theme}
-        />
-        {
-          (noSuggestions && noResultsText) && (
-            <p className="no-results">
-              <em>{noResultsText}</em>
-            </p>
-          )
-        }
-      </>
-    );
-  }
-}
-
-AUAutoSuggestComponent.displayName = 'AUAutoSuggestComponent';
-
-AUAutoSuggestComponent.defaultProps = {
-  id: 'autosuggest1',
-  theme: {
-    container: 'react-autosuggest__container',
-    containerOpen: 'react-autosuggest__container--open',
-    input: 'react-autosuggest__input',
-    inputOpen: 'react-autosuggest__input--open',
-    inputFocused: 'react-autosuggest__input--focused',
-    suggestionsContainer: 'react-autosuggest__suggestions-container',
-    suggestionsContainerOpen: 'react-autosuggest__suggestions-container--open',
-    suggestionsList: 'react-autosuggest__suggestions-list',
-    suggestion: 'react-autosuggest__suggestion',
-    suggestionFirst: 'react-autosuggest__suggestion--first',
-    suggestionHighlighted: 'react-autosuggest__suggestion--highlighted',
-    sectionContainer: 'react-autosuggest__section-container',
-    sectionContainerFirst: 'react-autosuggest__section-container--first',
-    sectionTitle: 'react-autosuggest__section-title',
-  },
-  clearInput: false,
-  type: 'text',
-  initialValue: '',
-  disabled: false,
-  setQuery: () => { },
-  noResultsText: '',
-};
-
-AUAutoSuggestComponent.propTypes = {
-  setQuery: PropTypes.func,
-  getSuggestions: PropTypes.func.isRequired,
-  getSuggestionValue: PropTypes.func.isRequired,
-  renderSuggestion: PropTypes.func.isRequired,
-  setResults: PropTypes.func.isRequired,
-  collection: PropTypes.arrayOf(PropTypes.shape({})).isRequired,
-  placeholder: PropTypes.string.isRequired,
-  id: PropTypes.string,
-  theme: PropTypes.shape({}),
-  clearInput: PropTypes.bool,
-  type: PropTypes.string,
-  initialValue: PropTypes.string,
-  disabled: PropTypes.bool,
-  noResultsText: PropTypes.string,
-};
-export default AUAutoSuggestComponent;
+/* eslint-disable @typescript-eslint/no-empty-function */
+import React from 'react';
+import PropTypes from 'prop-types';
+import Autosuggest from 'react-autosuggest';
+import debounce from 'lodash.debounce';
+
+class AUAutoSuggestComponent extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      value: '',
+      suggestions: [],
+      noSuggestions: false,
+    };
+
+    this.onChange = this.onChange.bind(this);
+    this.onEnter = this.onEnter.bind(this);
+    this.onSuggestionsFetchRequested = debounce(this.onSuggestionsFetchRequested.bind(this), 400);
+    this.onSuggestionsClearRequested = this.onSuggestionsClearRequested.bind(this);
+    this.onSuggestionSelected = this.onSuggestionSelected.bind(this);
+  }
+
+  onChange(_, { newValue }) {
+    const { setQuery } = this.props;
+    this.setState({
+      value: newValue,
+    }, () => {
+      setQuery(newValue);
+    });
+  }
+
+  onEnter(event) {
+    const { suggestions } = this.state;
+    const { setResults } = this.props;
+    if (event.key === 'Enter') {
+      setResults(suggestions);
+    }
+  }
+
+  onSuggestionsFetchRequested({ value }) {
+    const { getSuggestions, collection } = this.props;
+    getSuggestions(value, collection, (suggestions) => {
+      this.setState({
+        suggestions,
+        noSuggestions: suggestions.length === 0 && value.trim() !== '' && value.trim().length > 1,
+      });
+    });
+  }
+
+  onSuggestionsClearRequested() {
+    this.setState({
+      suggestions: [],
+    });
+  }
+
+  onSuggestionSelected(event, { suggestion }) {
+    const { setResults, clearInput } = this.props;
+    setResults([suggestion]);
+    if (clearInput) {
+      this.setState({
+        value: '',
+      });
+    }
+  }
+
+  render() {
+    const { value, suggestions, noSuggestions } = this.state;
+    const {
+      placeholder,
+      getSuggestionValue,
+      renderSuggestion,
+      id,
+      theme,
+      type,
+      initialValue,
+      disabled,
+      noResultsText,
+    } = this.props;
+    const inputProps = {
+      placeholder,
+      value: initialValue || value,
+      id,
+      type,
+      disabled,
+      'aria-label': placeholder,
+      onChange: this.onChange,
+      onKeyDown: this.onEnter,
+    };
+
+    return (
+      <>
+        <Autosuggest
+          suggestions={suggestions}
+          onSuggestionsFetchRequested={this.onSuggestionsFetchRequested}
+          onSuggestionsClearRequested={this.onSuggestionsClearRequested}
+          onSuggestionSelected={this.onSuggestionSelected}
+          getSuggestionValue={getSuggestionValue}
+          renderSuggestion={renderSuggestion}
+          inputProps={inputProps}
+          theme={theme}
+        />
+        {
+          (noSuggestions && noResultsText) && (
+            <p className="no-results">
+              <em>{noResultsText}</em>
+            </p>
+          )
+        }
+      </>
+    );
+  }
+}
+
+AUAutoSuggestComponent.displayName = 'AUAutoSuggestComponent';
+
+AUAutoSuggestComponent.defaultProps = {
+  id: 'autosuggest1',
+  theme: {
+    container: 'react-autosuggest__container',
+    containerOpen: 'react-autosuggest__container--open',
+    input: 'react-autosuggest__input',
+    inputOpen: 'react-autosuggest__input--open',
+    inputFocused: 'react-autosuggest__input--focused',
+    suggestionsContainer: 'react-autosuggest__suggestions-container',
+    suggestionsContainerOpen: 'react-autosuggest__suggestions-container--open',
+    suggestionsList: 'react-autosuggest__suggestions-list',
+    suggestion: 'react-autosuggest__suggestion',
+    suggestionFirst: 'react-autosuggest__suggestion--first',
+    suggestionHighlighted: 'react-autosuggest__suggestion--highlighted',
+    sectionContainer: 'react-autosuggest__section-container',
+    sectionContainerFirst: 'react-autosuggest__section-container--first',
+    sectionTitle: 'react-autosuggest__section-title',
+  },
+  clearInput: false,
+  type: 'text',
+  initialValue: '',
+  disabled: false,
+  setQuery: () => { },
+  noResultsText: '',
+};
+
+AUAutoSuggestComponent.propTypes = {
+  setQuery: PropTypes.func,
+  getSuggestions: PropTypes.func.isRequired,
+  getSuggestionValue: PropTypes.func.isRequired,
+  renderSuggestion: PropTypes.func.isRequired,
+  setResults: PropTypes.func.isRequired,
+  collection: PropTypes.arrayOf(PropTypes.shape({})).isRequired,
+  placeholder: PropTypes.string.isRequired,
+  id: PropTypes.string,
+  theme: PropTypes.shape({}),
+  clearInput: PropTypes.bool,
+  type: PropTypes.string,
+  initialValue: PropTypes.string,
+  disabled: PropTypes.bool,
+  noResultsText: PropTypes.string,
+};
+export default AUAutoSuggestComponent;