Feature: form components

.eslintrc.js

@@ -34,7 +34,9 @@ module.exports = {
         '@typescript-eslint/explicit-member-accessibility': ['off'],
         '@typescript-eslint/no-empty-interface': ['off'],
         'react-hooks/rules-of-hooks': 'warn',
-        'react-hooks/exhaustive-deps': 'warn'
+        'react-hooks/exhaustive-deps': 'warn',
+        '@typescript-eslint/ban-ts-ignore': ['off'],
+        'import/named': ['off'] // https://github.com/typescript-eslint/typescript-eslint/issues/154
       }
     },
     {

.size-snapshot.json

@@ -1,20 +1,20 @@
 {
   "dist/index.js": {
-    "bundled": 20098,
-    "minified": 10303,
-    "gzipped": 3193
+    "bundled": 88310,
+    "minified": 43154,
+    "gzipped": 10503
   },
   "dist/index.es.js": {
-    "bundled": 18769,
-    "minified": 9056,
-    "gzipped": 3062,
+    "bundled": 84033,
+    "minified": 39042,
+    "gzipped": 10217,
     "treeshaked": {
       "rollup": {
-        "code": 157,
-        "import_statements": 157
+        "code": 29534,
+        "import_statements": 1052
       },
       "webpack": {
-        "code": 1339
+        "code": 32936
       }
     }
   }

.travis.yml

@@ -1,10 +1,13 @@
 language: node_js
 node_js: '12'
 sudo: false
+before_script:
+  - export TZ=Europe/Amsterdam
+  - date
 before_install:
   - npm install -g yarn # https://github.com/yarnpkg/yarn/issues/2428
 script:
-  - yarn build
+  - yarn
   - yarn run lint
   - yarn run test-only -- --coverage --outputFile test-results.json --json
   - npx danger ci

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "typescript.tsdk": "node_modules/typescript/lib"
+}

package.json

@@ -3,35 +3,48 @@
   "version": "1.0.7",
   "main": "dist/index.js",
   "module": "dist/index.es.js",
-  "types": "dist/src/core/index.d.ts",
+  "types": "dist/index.d.ts",
   "description": "React components as used in 42.nl products.",
   "files": [
     "dist/*"
   ],
   "scripts": {
+    "clean": "rm -rf dist",
     "start": "STORYBOOK_MODE=isolated STORYBOOK_COMPONENT=$(pwd) start-storybook -c ./storybook",
     "test-only": "jest",
-    "test": "jest",
-    "build": "rollup -c",
+    "test": "yarn lint && yarn test-only",
+    "build": "yarn clean && rollup -c",
     "lint": "eslint src --ext js,jsx,ts,tsx --max-warnings=0",
     "copy:scss": "rsync -a src/*.scss lib/scss/",
     "deploy-storybook": "storybook-to-ghpages",
     "build-storybook": "build-storybook -c storybook -o docs/storybook",
     "storybook": "start-storybook -c storybook",
     "docs": "jekyll serve --source docs",
     "dev-publish": "yarn clean && yarn build && ENV=dev ./scripts/publish.sh",
-    "typecheck": "tsc --noEmit",
-    "prepublishOnly": "yarn build"
+    "prepublishOnly": "yarn test && yarn build"
   },
   "dependencies": {
+    "@42.nl/jarb-final-form": "1.0.0",
+    "@42.nl/react-error-store": "0.0.1",
     "@42.nl/react-flash-messages": "0.0.2",
     "@42.nl/spring-connect": "3.2.0",
     "bootstrap": "4.3.1",
     "classnames": "2.2.6",
-    "lodash.take": "4.1.1",
-    "lodash.uniqueid": "4.0.1",
+    "final-form": "4.16.2",
+    "lodash": "4.17.14",
     "material-design-icons": "3.0.1",
+    "moment": "2.24.0",
+    "pica": "5.1.0",
+    "react-avatar-editor": "11.0.7",
+    "react-bootstrap-typeahead": "4.0.0-alpha.6",
+    "react-datetime": "2.16.3",
+    "react-display-name": "0.2.4",
+    "react-final-form": "6.3.0",
+    "react-i18next": "10.12.2",
+    "react-quill": "1.3.3",
     "react-router-dom": "5.0.1",
+    "react-text-mask": "5.4.3",
+    "react-textarea-autosize": "7.1.0",
     "reactstrap": "8.0.1"
   },
   "peerDependencies": {
@@ -47,21 +60,22 @@
     "@storybook/preset-typescript": "1.1.0",
     "@storybook/react": "next",
     "@storybook/storybook-deployer": "2.8.1",
-    "@testing-library/react-hooks": "2.0.1",
+    "@testing-library/react-hooks": "1.1.0",
     "@types/classnames": "2.2.9",
     "@types/enzyme": "3.10.3",
     "@types/enzyme-adapter-react-16": "1.0.5",
     "@types/enzyme-to-json": "1.5.3",
     "@types/jest": "24.0.18",
+    "@types/lodash": "4.14.123",
     "@types/node": "12.7.2",
-    "@types/react": "16.9.2",
+    "@types/react": "16.9.1",
+    "@types/react-avatar-editor": "10.3.4",
+    "@types/react-bootstrap-typeahead": "3.4.3",
     "@types/react-dom": "16.9.0",
+    "@types/react-router-dom": "4.3.5",
     "@types/reactstrap": "8.0.4",
     "@types/storybook__addon-actions": "3.4.3",
     "@types/storybook__react": "4.0.2",
-    "@types/lodash.uniqueid": "4.0.6",
-    "@types/lodash.take": "4.1.6",
-    "@types/react-router-dom": "4.3.5",
     "@typescript-eslint/eslint-plugin": "2.0.0",
     "@typescript-eslint/parser": "2.0.0",
     "babel-loader": "8.0.6",
@@ -81,10 +95,11 @@
     "eslint-plugin-react-hooks": "2.0.1",
     "fs-extra": "8.1.0",
     "glob": "7.1.4",
-    "jest": "24.9.0",
+    "jest": "24.8.0",
     "lerna": "3.16.4",
     "node-sass": "4.12.0",
     "react-docgen-typescript-loader": "3.1.1",
+    "react-test-renderer": "16.8.6",
     "rollup": "1.20.3",
     "rollup-plugin-auto-external": "2.0.0",
     "rollup-plugin-copy": "3.1.0",
@@ -94,7 +109,7 @@
     "style-loader": "1.0.0",
     "ts-jest": "24.0.2",
     "ts-loader": "6.0.4",
-    "typescript": "3.6.2"
+    "typescript": "3.5.3"
   },
   "jest": {
     "globals": {
@@ -103,8 +118,16 @@
       }
     },
     "collectCoverage": true,
-    "setupFiles": [
-      "./setupTests.ts"
+    "setupFilesAfterEnv": [
+      "<rootDir>/setupTests.ts"
+    ],
+    "collectCoverageFrom": [
+      "src/**/*.{ts,tsx}",
+      "!<rootDir>/src/index.ts",
+      "!<rootDir>/src/form/story-utils.tsx",
+      "!<rootDir>/src/**/*.stories.tsx",
+      "!<rootDir>/src/test/**/*",
+      "!<rootDir>/node_modules/"
     ],
     "moduleFileExtensions": [
       "ts",

rollup.config.js

@@ -61,7 +61,7 @@ const copy = (options = {}) => {
 };
 
 module.exports = {
-  input: 'src/core/index.ts',
+  input: 'src/index.ts',
   output: [
     {
       file: pkg.main,

setupTests.ts

@@ -1,4 +1,89 @@
 import Enzyme from 'enzyme';
 import Adapter from 'enzyme-adapter-react-16';
 
-Enzyme.configure({ adapter: new Adapter() });
+Enzyme.configure({ adapter: new Adapter(), disableLifecycleMethods: true });
+
+beforeEach(() => {
+  jest.clearAllMocks();
+  jest.resetAllMocks();
+
+  // Re-create the fake storages for each test the stores always start fresh.
+  setupStorages();
+});
+
+// Create fake versions of localStorage and sessionStorage.
+/* istanbul ignore next */
+function setupStorages() {
+  let localStorageMockStore = {};
+
+  // @ts-ignore
+  global.localStorage = {
+    // @ts-ignore
+    getItem: jest.fn(key => {
+      // @ts-ignore
+      return localStorageMockStore[key] || null;
+    }),
+    // @ts-ignore
+    setItem: jest.fn((key, value) => {
+      // @ts-ignore
+      localStorageMockStore[key] = `${value}`;
+    }),
+    // @ts-ignore
+    clear: jest.fn(() => {
+      // @ts-ignore
+      localStorageMockStore = {};
+    })
+  };
+
+  let sessionStorageMockStore = {};
+
+  // @ts-ignore
+  global.sessionStorage = {
+    // @ts-ignore
+    getItem: jest.fn(key => {
+      // @ts-ignore
+      return sessionStorageMockStore[key] || null;
+    }),
+    // @ts-ignore
+    setItem: jest.fn((key, value) => {
+      // @ts-ignore
+      sessionStorageMockStore[key] = `${value}`;
+    }),
+    // @ts-ignore
+    clear: jest.fn(() => {
+      // @ts-ignore
+      sessionStorageMockStore = {};
+    })
+  };
+}
+
+// Mock useTranslation everywhere.
+jest.mock('react-i18next', () => {
+  // Get the actual react-i18next
+  const originalModule = jest.requireActual('react-i18next');
+
+  const useTranslation = {
+    // @ts-ignore
+    i18n: {
+      language: 'en',
+      changeLanguage: jest.fn()
+    },
+    tReady: true,
+    // @ts-ignore
+    t: (key, data) => {
+      let fakeTranslation = key ? key : '{WRONG_NO_KEY}';
+
+      if (data) {
+        fakeTranslation += ` ${JSON.stringify(data)}`;
+      }
+
+      return fakeTranslation;
+    }
+  };
+
+  // use react-i18next as is but mock useTranslation.
+  return {
+    ...originalModule,
+    useTranslation: () => useTranslation
+  };
+});

src/core/Avatar/Avatar.tsx

@@ -1,7 +1,7 @@
 import React, { ReactNode } from 'react';
 import { UncontrolledTooltip } from 'reactstrap';
 import classNames from 'classnames';
-import uniqueId from 'lodash.uniqueid';
+import { uniqueId } from 'lodash';
 
 export type Size = 'xs' | 'sm' | 'md' | 'lg';
 

src/core/ConfirmButton/ConfirmButton.test.tsx

@@ -227,15 +227,17 @@ describe('Component: ConfirmButton', () => {
       });
 
       openModal();
+      const event = new Event('click');
 
       // @ts-ignore
       confirmButton
         .find('Button')
         .at(2)
-        .prop('onClick')();
+        // @ts-ignore
+        .prop('onClick')(event);
 
       expect(onConfirmSpy).toHaveBeenCalledTimes(1);
-      expect(onConfirmSpy).toHaveBeenCalledWith();
+      expect(onConfirmSpy).toHaveBeenCalledWith(event);
 
       // @ts-ignore
       expect(confirmButton.find('Modal').props().isOpen).toBe(false);

src/core/ConfirmButton/ConfirmButton.tsx

@@ -25,7 +25,7 @@ interface BaseProps {
    * Basically replaces the logic you would normally put in an `onClick`
    * event in a normal button.
    */
-  onConfirm: () => void;
+  onConfirm: (event: React.MouseEvent<HTMLElement>) => void;
 
   /**
    * Whether or not the action you are performing is currenlty in
@@ -120,9 +120,9 @@ export default function ConfirmButton({
     setOpen(true);
   }
 
-  function saveModal() {
+  function saveModal(event: React.MouseEvent<HTMLElement>) {
     setOpen(false);
-    onConfirm();
+    onConfirm(event);
   }
 
   return (
@@ -148,7 +148,7 @@ export default function ConfirmButton({
           <Button color="secondary" onClick={() => setOpen(false)}>
             {cancelText}
           </Button>
-          <Button color="primary" onClick={() => saveModal()}>
+          <Button color="primary" onClick={e => saveModal(e)}>
             {confirmText}
           </Button>
         </ModalFooter>

src/core/MoreOrLess/MoreOrLess.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import take from 'lodash.take';
+import { take } from 'lodash';
 import classNames from 'classnames';
 
 interface Props {