@aarhus-university/au-lib-react-components 9.11.17 → 10.0.0

package/package.json

@@ -1,60 +1,66 @@
-{
-  "sideEffects": false,
-  "name": "@aarhus-university/au-lib-react-components",
-  "version": "9.11.17",
-  "description": "Library for shared React components for various applications on au.dk",
-  "main": "build/cjs/index.js",
-  "scripts": {
-    "dev": "webpack serve --mode development --env development --config src/config/webpack.dev.config.js",
-    "umd": "webpack --config src/config/webpack.umd.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"
-  },
-  "peerDependencies": {
-    "react": "^17.0.0",
-    "react-dom": "^17.0.0"
-  },
-  "devDependencies": {
-    "@babel/core": "^7.0.0",
-    "@babel/plugin-proposal-class-properties": "^7.0.0",
-    "@babel/plugin-proposal-object-rest-spread": "^7.0.0",
-    "@babel/plugin-proposal-optional-chaining": "^7.0.0",
-    "@babel/preset-env": "^7.0.0",
-    "@babel/preset-react": "^7.0.0",
-    "babel-eslint": "^10.0.0",
-    "babel-loader": "^8.0.0",
-    "css-loader": "^5.0.0",
-    "eslint": "^7.0.0",
-    "eslint-config-airbnb": "^18.0.0",
-    "eslint-plugin-import": "^2.0.0",
-    "eslint-plugin-jsx-a11y": "^6.0.0",
-    "eslint-plugin-react": "^7.0.0",
-    "eslint-webpack-plugin": "^2.0.0",
-    "mini-css-extract-plugin": "^1.0.0",
-    "sass": "^1.30.0",
-    "sass-loader": "^10.0.0",
-    "style-loader": "^0.23.0",
-    "webpack-cli": "^4.0.0",
-    "webpack-dev-server": "^3.11.0"
-  },
-  "dependencies": {
-    "@aarhus-university/au-designsystem-delphinus": "^0.23.22",
-    "axios": "^0.18.1",
-    "lodash.debounce": "^4.0.8",
-    "moment": "^2.22.2",
-    "prop-types": "^15.7.2",
-    "query-string": "^5.1.1",
-    "react": "^17.0.0",
-    "react-autosuggest": "^10.0.2",
-    "react-dom": "^17.0.0",
-    "react-hot-loader": "^4.1.1",
-    "react-router-dom": "^5.2.0",
-    "webpack": "^5.0.0"
-  }
-}
+{
+  "sideEffects": false,
+  "name": "@aarhus-university/au-lib-react-components",
+  "version": "10.0.0",
+  "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.1",
+    "@types/google.analytics": "^0.0.42",
+    "@types/history": "^5.0.0",
+    "@types/react": "^17.0.39",
+    "@types/react-dom": "^17.0.11",
+    "@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": "17.0.2",
+    "react-dom": "^17.0.2"
+  }
+}

package/src/components/{delphinus/AUAlertComponent.js → AUAlertComponent.tsx}

@@ -1,85 +1,70 @@
-/* eslint-env browser */
-import React from 'react';
-import ReactDOM from 'react-dom';
-import PropTypes from 'prop-types';
-
-const AUAlertComponent = (props) => {
-  const {
-    message,
-    content,
-    children,
-    alert,
-    buttons,
-  } = props;
-
-  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 && !content) {
-    return null;
-  }
-
-  return children || content;
-};
-
-AUAlertComponent.defaultProps = {
-  children: null,
-  content: null,
-  buttons: [{
-    className: 'button',
-    text: 'OK',
-    dataIcon: null,
-    onClick: () => { }
-  }, {
-    className: 'button',
-    text: 'Annuller',
-    dataIcon: null,
-    onClick: () => { }
-  },
-  ],
-};
-
-AUAlertComponent.propTypes = {
-  message: PropTypes.string.isRequired,
-  alert: PropTypes.bool.isRequired,
-  children: PropTypes.arrayOf(PropTypes.element),
-  content: PropTypes.element,
-  buttons: PropTypes.arrayOf(PropTypes.shape({
-    className: PropTypes.string.isRequired,
-    text: PropTypes.string.isRequired,
-    dataIcon: PropTypes.string,
-    onClick: PropTypes.func.isRequired,
-  }).isRequired),
-};
-
-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/{AutoSuggestComponent.js → AUAutoSuggestComponent.js}

@@ -1,23 +1,26 @@
+/* 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 AutoSuggestComponent extends React.Component {
+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(event, { newValue }) {
+  onChange(_, { newValue }) {
     const { setQuery } = this.props;
     this.setState({
       value: newValue,
@@ -26,11 +29,20 @@ class AutoSuggestComponent extends React.Component {
     });
   }
 
+  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,
       });
     });
   }
@@ -52,7 +64,7 @@ class AutoSuggestComponent extends React.Component {
   }
 
   render() {
-    const { value, suggestions } = this.state;
+    const { value, suggestions, noSuggestions } = this.state;
     const {
       placeholder,
       getSuggestionValue,
@@ -62,6 +74,7 @@ class AutoSuggestComponent extends React.Component {
       type,
       initialValue,
       disabled,
+      noResultsText,
     } = this.props;
     const inputProps = {
       placeholder,
@@ -71,26 +84,36 @@ class AutoSuggestComponent extends React.Component {
       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}
-      />
+      <>
+        <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>
+          )
+        }
+      </>
     );
   }
 }
 
-AutoSuggestComponent.displayName = 'AutoSuggestComponent';
+AUAutoSuggestComponent.displayName = 'AUAutoSuggestComponent';
 
-AutoSuggestComponent.defaultProps = {
+AUAutoSuggestComponent.defaultProps = {
   id: 'autosuggest1',
   theme: {
     container: 'react-autosuggest__container',
@@ -112,15 +135,17 @@ AutoSuggestComponent.defaultProps = {
   type: 'text',
   initialValue: '',
   disabled: false,
+  setQuery: () => { },
+  noResultsText: '',
 };
 
-AutoSuggestComponent.propTypes = {
-  setQuery: PropTypes.func.isRequired,
+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.any).isRequired,
+  collection: PropTypes.arrayOf(PropTypes.shape({})).isRequired,
   placeholder: PropTypes.string.isRequired,
   id: PropTypes.string,
   theme: PropTypes.shape({}),
@@ -128,5 +153,6 @@ AutoSuggestComponent.propTypes = {
   type: PropTypes.string,
   initialValue: PropTypes.string,
   disabled: PropTypes.bool,
+  noResultsText: PropTypes.string,
 };
-export default AutoSuggestComponent;
+export default AUAutoSuggestComponent;