@42.nl/react-flash-messages 0.0.2 → 2.0.1

package/lib/actions.d.ts

@@ -3,45 +3,50 @@ import { FlashMessage, FlashMessageConfig, FlashMessageCreatorConfig } from './m
  * Adds a FlashMessage to the store and removes it after the
  * duration, if the duration is not false.
  *
- * @param flashMessage The flashMessage you want to add.
+ * @param flashMessage The flash message you want to add.
+ */
+export declare function addFlashMessage<Data>(flashMessageConfig: FlashMessageConfig<Data>): FlashMessage<Data>;
+/**
+ * Manually removes the flash message from the flash message store.
+ *
+ * @param flashMessage The flash message you want to remove.
  */
-export declare function addFlashMessage<Data>(flashMessageCreatorConfig: FlashMessageConfig<Data>): FlashMessage<Data>;
 export declare function removeFlashMessage<Data>(flashMessage: FlashMessage<Data>): void;
 /**
  * Adds a flash message of the type 'ERROR' on the flash message queue.
  *
- * @param {FlashMessageCreatorConfig} { text, onClick, data }
+ * @param {FlashMessageCreatorConfig} Config The config of the flash message
  */
-export declare function addError<Data>({ text, onClick, data }: FlashMessageCreatorConfig<Data>): FlashMessage<Data>;
+export declare function addError<Data>(config: FlashMessageCreatorConfig<Data>): FlashMessage<Data>;
 /**
  * Adds a flash message of the type 'WARNING' on the flash message queue.
  * After 7000 milliseconds it will automatically be removed
  * from the queue.
  *
- * @param {FlashMessageCreatorConfig} { text, onClick, data }
+ * @param {FlashMessageCreatorConfig} Config The config of the flash message
  */
-export declare function addWarning<Data>({ text, onClick, data }: FlashMessageCreatorConfig<Data>): FlashMessage<Data>;
+export declare function addWarning<Data>(config: FlashMessageCreatorConfig<Data>): FlashMessage<Data>;
 /**
  * Adds a flash message of the type 'SUCCESS' on the flash message queue.
  * After 2000 milliseconds it will automatically be removed
  * from the queue.
  *
- * @param {FlashMessageCreatorConfig} { text, onClick, data }
+ * @param {FlashMessageCreatorConfig} Config The config of the flash message
  */
-export declare function addSuccess<Data>({ text, onClick, data }: FlashMessageCreatorConfig<Data>): FlashMessage<Data>;
+export declare function addSuccess<Data>(config: FlashMessageCreatorConfig<Data>): FlashMessage<Data>;
 /**
  * Adds a flash message of the type 'INFO' on the flash message queue.
  * After 5000 milliseconds it will automatically be removed
  * from the queue.
  *
- * @param {FlashMessageCreatorConfig} { text, onClick, data }
+ * @param {FlashMessageCreatorConfig} Config The config of the flash message
  */
-export declare function addInfo<Data>({ text, onClick, data }: FlashMessageCreatorConfig<Data>): FlashMessage<Data>;
+export declare function addInfo<Data>(config: FlashMessageCreatorConfig<Data>): FlashMessage<Data>;
 /**
  * Adds a flash message of the type 'APOCALYPSE' on the flash message queue.
  * This message is never removed from the queue automatically.
  *
- * @param {FlashMessageCreatorConfig} { text, onClick, data }
+ * @param {FlashMessageCreatorConfig} Config The config of the flash message
  */
-export declare function addApocalypse<Data>({ text, onClick, data }: FlashMessageCreatorConfig<Data>): FlashMessage<Data>;
+export declare function addApocalypse<Data>(config: FlashMessageCreatorConfig<Data>): FlashMessage<Data>;
 export declare function resetNextFlashMessageId(): void;

package/lib/actions.js

@@ -1,38 +1,46 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.resetNextFlashMessageId = exports.addApocalypse = exports.addInfo = exports.addSuccess = exports.addWarning = exports.addError = exports.removeFlashMessage = exports.addFlashMessage = void 0;
 const service_1 = require("./service");
+/**
+ * Each flash message gets an unique id so we can identify the
+ * flash message.
+ */
 let nextFlashMessageId = 1;
-// This function does not do anything.
-const noop = () => { };
 /**
  * Adds a FlashMessage to the store and removes it after the
  * duration, if the duration is not false.
  *
- * @param flashMessage The flashMessage you want to add.
+ * @param flashMessage The flash message you want to add.
  */
-function addFlashMessage(flashMessageCreatorConfig) {
-    const flashMessage = addIdAndOnClick(flashMessageCreatorConfig);
+function addFlashMessage(flashMessageConfig) {
+    const flashMessage = addIdAndOnClick(flashMessageConfig);
     service_1.flashMessageService.addFlashMessage(flashMessage);
     const duration = flashMessage.duration;
     if (duration !== false) {
         setTimeout(() => {
-            service_1.flashMessageService.removeFlashMessage(flashMessage);
+            service_1.flashMessageService.removeFlashMessage(flashMessage, 'duration-elapsed');
         }, duration);
     }
     return flashMessage;
 }
 exports.addFlashMessage = addFlashMessage;
+/**
+ * Manually removes the flash message from the flash message store.
+ *
+ * @param flashMessage The flash message you want to remove.
+ */
 function removeFlashMessage(flashMessage) {
-    service_1.flashMessageService.removeFlashMessage(flashMessage);
+    service_1.flashMessageService.removeFlashMessage(flashMessage, 'manually-removed');
 }
 exports.removeFlashMessage = removeFlashMessage;
 /**
  * Adds a flash message of the type 'ERROR' on the flash message queue.
  *
- * @param {FlashMessageCreatorConfig} { text, onClick, data }
+ * @param {FlashMessageCreatorConfig} Config The config of the flash message
  */
-function addError({ text, onClick, data }) {
-    return addFlashMessage({ type: 'ERROR', duration: 10000, text, onClick, data });
+function addError(config) {
+    return addFlashMessage(Object.assign({ type: 'ERROR', duration: 10000 }, config));
 }
 exports.addError = addError;
 /**
@@ -40,10 +48,10 @@ exports.addError = addError;
  * After 7000 milliseconds it will automatically be removed
  * from the queue.
  *
- * @param {FlashMessageCreatorConfig} { text, onClick, data }
+ * @param {FlashMessageCreatorConfig} Config The config of the flash message
  */
-function addWarning({ text, onClick, data }) {
-    return addFlashMessage({ type: 'WARNING', duration: 7000, text, onClick, data });
+function addWarning(config) {
+    return addFlashMessage(Object.assign({ type: 'WARNING', duration: 7000 }, config));
 }
 exports.addWarning = addWarning;
 /**
@@ -51,10 +59,10 @@ exports.addWarning = addWarning;
  * After 2000 milliseconds it will automatically be removed
  * from the queue.
  *
- * @param {FlashMessageCreatorConfig} { text, onClick, data }
+ * @param {FlashMessageCreatorConfig} Config The config of the flash message
  */
-function addSuccess({ text, onClick, data }) {
-    return addFlashMessage({ type: 'SUCCESS', duration: 2000, text, onClick, data });
+function addSuccess(config) {
+    return addFlashMessage(Object.assign({ type: 'SUCCESS', duration: 2000 }, config));
 }
 exports.addSuccess = addSuccess;
 /**
@@ -62,27 +70,28 @@ exports.addSuccess = addSuccess;
  * After 5000 milliseconds it will automatically be removed
  * from the queue.
  *
- * @param {FlashMessageCreatorConfig} { text, onClick, data }
+ * @param {FlashMessageCreatorConfig} Config The config of the flash message
  */
-function addInfo({ text, onClick, data }) {
-    return addFlashMessage({ type: 'INFO', duration: 5000, text, onClick, data });
+function addInfo(config) {
+    return addFlashMessage(Object.assign({ type: 'INFO', duration: 5000 }, config));
 }
 exports.addInfo = addInfo;
 /**
  * Adds a flash message of the type 'APOCALYPSE' on the flash message queue.
  * This message is never removed from the queue automatically.
  *
- * @param {FlashMessageCreatorConfig} { text, onClick, data }
+ * @param {FlashMessageCreatorConfig} Config The config of the flash message
  */
-function addApocalypse({ text, onClick, data }) {
-    return addFlashMessage({ type: 'APOCALYPSE', duration: false, text, onClick, data });
+function addApocalypse(config) {
+    return addFlashMessage(Object.assign({ type: 'APOCALYPSE', duration: false }, config));
 }
 exports.addApocalypse = addApocalypse;
 function addIdAndOnClick(flashMessage) {
     const onClick = flashMessage.onClick !== undefined ? flashMessage.onClick : noop;
+    const onRemove = flashMessage.onRemove !== undefined ? flashMessage.onRemove : noop;
     // By adding the onClick it is no longer optional, TypeScript
     // does not recognize this so the cast forces it to.
-    let f = flashMessage;
+    const f = flashMessage;
     // Assign a unique id to the flash message;
     f.id = nextFlashMessageId;
     nextFlashMessageId += 1;
@@ -94,6 +103,14 @@ function addIdAndOnClick(flashMessage) {
     f.onClick = () => {
         onClick(f);
     };
+    // The FlashMessageConfig's onRemove requires a FlashMessage instance
+    // but the FlashMessage's onRemove does not. The reason for this we
+    // do not want your user to have to manually provide the flashMessage
+    // for the onRemove. So we create an onRemove which calls the provided
+    // onRemove from the config with the FlashMessage.
+    f.onRemove = (reason) => {
+        onRemove(f, reason);
+    };
     return f;
 }
 // This export is purely for unit testing
@@ -101,3 +118,8 @@ function resetNextFlashMessageId() {
     nextFlashMessageId = 1;
 }
 exports.resetNextFlashMessageId = resetNextFlashMessageId;
+// This function does not do anything, and is used as the default
+// for the onClick and onRemove
+function noop() {
+    return undefined;
+}

package/lib/hooks.d.ts

@@ -1,5 +1,6 @@
 import { FlashMessage } from './models';
 /**
- * Returns the flashMessages.
+ * Provides the active flash messages which are currently in the
+ * flash message store.
  */
-export declare function useFlashMessages(): FlashMessage<any>[];
+export declare function useFlashMessages(): FlashMessage<unknown>[];

package/lib/hooks.js

@@ -1,13 +1,15 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.useFlashMessages = void 0;
 const react_1 = require("react");
 const service_1 = require("./service");
 /**
- * Returns the flashMessages.
+ * Provides the active flash messages which are currently in the
+ * flash message store.
  */
 function useFlashMessages() {
-    const [state, setState] = react_1.useState(service_1.flashMessageService.getFlashMessages());
-    react_1.useEffect(() => {
+    const [state, setState] = (0, react_1.useState)(service_1.flashMessageService.getFlashMessages());
+    (0, react_1.useEffect)(() => {
         const subscriber = (nextState) => {
             setState(nextState);
         };

package/lib/index.d.ts

@@ -1,5 +1,5 @@
 export { addError, addWarning, addSuccess, addInfo, addApocalypse, addFlashMessage, removeFlashMessage } from './actions';
-export { FlashMessage, FlashMessageConfig, FlashMessageCreatorConfig, OnFlashMessageClicked, } from './models';
+export { FlashMessage, FlashMessageConfig, FlashMessageCreatorConfig, OnFlashMessageClicked, OnFlashMessageRemoved, FlashMessageRemovedReason } from './models';
 export { useFlashMessages } from './hooks';
 export { FlashMessagesProvider, FlashMessagesContext } from './provider';
 export { flashMessageService } from './service';

package/lib/index.js

@@ -1,17 +1,18 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.flashMessageService = exports.FlashMessagesContext = exports.FlashMessagesProvider = exports.useFlashMessages = exports.removeFlashMessage = exports.addFlashMessage = exports.addApocalypse = exports.addInfo = exports.addSuccess = exports.addWarning = exports.addError = void 0;
 var actions_1 = require("./actions");
-exports.addError = actions_1.addError;
-exports.addWarning = actions_1.addWarning;
-exports.addSuccess = actions_1.addSuccess;
-exports.addInfo = actions_1.addInfo;
-exports.addApocalypse = actions_1.addApocalypse;
-exports.addFlashMessage = actions_1.addFlashMessage;
-exports.removeFlashMessage = actions_1.removeFlashMessage;
+Object.defineProperty(exports, "addError", { enumerable: true, get: function () { return actions_1.addError; } });
+Object.defineProperty(exports, "addWarning", { enumerable: true, get: function () { return actions_1.addWarning; } });
+Object.defineProperty(exports, "addSuccess", { enumerable: true, get: function () { return actions_1.addSuccess; } });
+Object.defineProperty(exports, "addInfo", { enumerable: true, get: function () { return actions_1.addInfo; } });
+Object.defineProperty(exports, "addApocalypse", { enumerable: true, get: function () { return actions_1.addApocalypse; } });
+Object.defineProperty(exports, "addFlashMessage", { enumerable: true, get: function () { return actions_1.addFlashMessage; } });
+Object.defineProperty(exports, "removeFlashMessage", { enumerable: true, get: function () { return actions_1.removeFlashMessage; } });
 var hooks_1 = require("./hooks");
-exports.useFlashMessages = hooks_1.useFlashMessages;
+Object.defineProperty(exports, "useFlashMessages", { enumerable: true, get: function () { return hooks_1.useFlashMessages; } });
 var provider_1 = require("./provider");
-exports.FlashMessagesProvider = provider_1.FlashMessagesProvider;
-exports.FlashMessagesContext = provider_1.FlashMessagesContext;
+Object.defineProperty(exports, "FlashMessagesProvider", { enumerable: true, get: function () { return provider_1.FlashMessagesProvider; } });
+Object.defineProperty(exports, "FlashMessagesContext", { enumerable: true, get: function () { return provider_1.FlashMessagesContext; } });
 var service_1 = require("./service");
-exports.flashMessageService = service_1.flashMessageService;
+Object.defineProperty(exports, "flashMessageService", { enumerable: true, get: function () { return service_1.flashMessageService; } });

package/lib/models.d.ts

@@ -1,21 +1,144 @@
-export declare type OnFlashMessageClicked<Data> = (msg: FlashMessage<Data>) => void;
-export interface FlashMessage<Data> {
+export declare type OnFlashMessageClicked<Data> = (flashMessage: FlashMessage<Data>) => void;
+/**
+ * The reason a flash message was removed.
+ *
+ * When it is 'duration-elapsed' it means that the flash message
+ * was removed because the duration of the message expired. When
+ * it is 'manually-removed' it was because the `removeFlashMessage`
+ * action was called.
+ */
+export declare type FlashMessageRemovedReason = 'duration-elapsed' | 'manually-removed';
+export declare type OnFlashMessageRemoved<Data> = (flashMessage: FlashMessage<Data>, reason: FlashMessageRemovedReason) => void;
+/**
+ * Represents a FlashMessage as it will be represented in the
+ * flashMessageService.
+ */
+export declare type FlashMessage<Data> = {
+    /**
+     * The id of the flashMessage must be unique for each flash message.
+     */
     id: number;
+    /**
+     * The type of flash message, can be useful to distinguish
+     * between types of messages. For example you might have a type
+     * 'error', 'warning' or 'info'.
+     */
     type: string;
+    /**
+     * The text message you want to show to the user.
+     */
     text: string;
+    /**
+     * How long a flash message should be should to the user.
+     *
+     * When `false` it will never disappear.
+     */
     duration: number | false;
+    /**
+     * The onClick handler for the flash message, used to perform
+     * actions when the user clicks on the FlashMessage
+     *
+     * You must call onClick from inside your component representing
+     * the flash message when it is clicked. Otherwise the onClick
+     * callback will never be called.
+     */
     onClick: () => void;
+    /**
+     * When the flash message is removed this callback is executed,
+     * to let the user know the message was removed. The reason
+     * for removal must be provided as the second argument it can either
+     * be 'duration-elapsed' or 'manually-removed'.
+     *
+     * When it is 'duration-elapsed' it means that the flash message
+     * was removed because the duration of the message expired. When
+     * it is 'manually-removed' it was because the `removeFlashMessage`
+     * action was called.
+     */
+    onRemove: (reason: FlashMessageRemovedReason) => void;
+    /**
+     * This 'data' object can be used to store any custom data you want
+     * to associate with the Flash Message. The data 'key' will never
+     * be used / manipulated now and in the future.
+     */
     data?: Data;
-}
-export interface FlashMessageConfig<Data> {
+};
+/**
+ * Represents an a configuration from which an actual FlashMessage
+ * instance can be created. FlashMessageConfig is used by the
+ * `addFlashMessage` action.
+ *
+ * The reason it exists is so we can hide complexity for the developer
+ * when spawning flash messages vs consuming them to show them in the UI.
+ * For example the FlashMessage onClick and onRemove does not have the
+ * the instance of the flash message as the first argument, but the
+ * FlashMessageConfig does.
+ *
+ * Behind the scenes the onClick and onRemove will be changed before
+ * creating a the FlashMessage from the FlashMessageConfig and they
+ * will be re-written.
+ */
+export declare type FlashMessageConfig<Data> = {
+    /**
+     * The type of flash message, can be useful to distinguish
+     * between types of messages. For example you might have a type
+     * 'error', 'warning' or 'info'.
+     */
     type: string;
+    /**
+     * The text message you want to show to the user.
+     */
     text: string;
+    /**
+     * How long a flash message should be should to the user.
+     *
+     * When `false` it will never disappear.
+     */
     duration: number | false;
+    /**
+     * Optional callback for what needs to happen when the message is
+     * clicked. Should receive the FlashMessage which is clicked.
+     */
     onClick?: OnFlashMessageClicked<Data>;
+    /**
+     * Optional callback for what needs to happen when the message is
+     * removed. Should receive the FlashMessage which is clicked, and
+     * the reason for closure.
+     */
+    onRemove?: OnFlashMessageRemoved<Data>;
+    /**
+     * This 'data' object can be used to store any custom data you want
+     * to associate with the Flash Message. The data 'key' will never
+     * be used / manipulated now and in the future.
+     */
     data?: Data;
-}
-export interface FlashMessageCreatorConfig<Data> {
+};
+/**
+ * Represents an a configuration from which an actual FlashMessage
+ * instance can be created. FlashMessageCreatorConfig is used by the
+ * flash message creator actions such as: `addError` and `addWarning`
+ * etc etc, so the developer can quickly spawn flash messages without
+ * resorting to the more low level `addFlashMessage` action.
+ */
+export declare type FlashMessageCreatorConfig<Data> = {
+    /**
+     * The text message you want to show to the user.
+     */
     text: string;
+    /**
+     * Optional callback for what needs to happen when the message is
+     * clicked. Should receive the FlashMessage which is clicked.
+     */
     onClick?: OnFlashMessageClicked<Data>;
+    /**
+     * Optional callback for what needs to happen when the message is
+     * removed. Should receive the FlashMessage which is clicked, and
+     * the reason for closure.
+     */
+    onRemove?: OnFlashMessageRemoved<Data>;
+    /**
+     * This 'data' object can be used to store any custom data you want
+     * to associate with the Flash Message. The data 'key' will never
+     * be used / manipulated now and in the future.
+     */
     data?: Data;
-}
+};

package/lib/provider.d.ts

@@ -1,7 +1,14 @@
 import React from 'react';
 import { FlashMessage } from './models';
-export declare const FlashMessagesContext: React.Context<FlashMessage<any>[]>;
-export interface Props {
+export declare const FlashMessagesContext: React.Context<FlashMessage<unknown>[]>;
+export declare type Props = {
     children: React.ReactNode;
-}
+};
+/**
+ * Provider which provides the a flash message context. Should only
+ * be used when needing the `FlashMessagesContext`. We recommend
+ * using the `useFlashMessages` hook instead were possible.
+ *
+ * @param children The children to render
+ */
 export declare function FlashMessagesProvider({ children }: Props): JSX.Element;

package/lib/provider.js

@@ -3,12 +3,20 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.FlashMessagesProvider = exports.FlashMessagesContext = void 0;
 const react_1 = __importDefault(require("react"));
 const hooks_1 = require("./hooks");
 const service_1 = require("./service");
 exports.FlashMessagesContext = react_1.default.createContext(service_1.flashMessageService.getFlashMessages());
+/**
+ * Provider which provides the a flash message context. Should only
+ * be used when needing the `FlashMessagesContext`. We recommend
+ * using the `useFlashMessages` hook instead were possible.
+ *
+ * @param children The children to render
+ */
 function FlashMessagesProvider({ children }) {
-    const flashMessages = hooks_1.useFlashMessages();
+    const flashMessages = (0, hooks_1.useFlashMessages)();
     return (react_1.default.createElement(exports.FlashMessagesContext.Provider, { value: flashMessages }, children));
 }
 exports.FlashMessagesProvider = FlashMessagesProvider;

package/lib/service.d.ts

@@ -1,12 +1,12 @@
-import { FlashMessage } from './models';
-export declare type Subscriber = (flashMessages: FlashMessage<any>[]) => void;
-export interface FlashMessageService {
-    addFlashMessage(flashMessage: FlashMessage<any>): void;
-    removeFlashMessage(flashMessage: FlashMessage<any>): void;
+import { FlashMessage, FlashMessageRemovedReason } from './models';
+export declare type Subscriber = (flashMessages: FlashMessage<unknown>[]) => void;
+export declare type FlashMessageService = {
+    addFlashMessage(flashMessage: FlashMessage<unknown>): void;
+    removeFlashMessage(flashMessage: FlashMessage<unknown>, reason: FlashMessageRemovedReason): void;
     clearFlashMessages(): void;
     subscribe(subscriber: Subscriber): void;
     unsubscribe(subscriber: Subscriber): void;
-    getFlashMessages: () => FlashMessage<any>[];
-}
+    getFlashMessages: () => FlashMessage<unknown>[];
+};
 export declare function makeFlashMessageService(): FlashMessageService;
 export declare const flashMessageService: FlashMessageService;

package/lib/service.js

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.flashMessageService = exports.makeFlashMessageService = void 0;
 function makeFlashMessageService() {
     let flashMessages = [];
     let subscribers = [];
@@ -9,14 +10,23 @@ function makeFlashMessageService() {
         clearFlashMessages,
         getFlashMessages,
         subscribe,
-        unsubscribe,
+        unsubscribe
     };
     function addFlashMessage(flashMessage) {
         flashMessages.push(flashMessage);
         informSubscribers();
     }
-    function removeFlashMessage(flashMessage) {
-        flashMessages = flashMessages.filter(f => f !== flashMessage);
+    function removeFlashMessage(flashMessage, reason) {
+        const remainingFlashMessages = [];
+        flashMessages.forEach((f) => {
+            if (f !== flashMessage) {
+                remainingFlashMessages.push(f);
+            }
+            else {
+                f.onRemove(reason);
+            }
+        });
+        flashMessages = remainingFlashMessages;
         informSubscribers();
     }
     function clearFlashMessages() {
@@ -31,10 +41,10 @@ function makeFlashMessageService() {
         subscriber(flashMessages);
     }
     function unsubscribe(subscriber) {
-        subscribers = subscribers.filter(s => s !== subscriber);
+        subscribers = subscribers.filter((s) => s !== subscriber);
     }
     function informSubscribers() {
-        subscribers.forEach(subscriber => subscriber([...flashMessages]));
+        subscribers.forEach((subscriber) => subscriber([...flashMessages]));
     }
 }
 exports.makeFlashMessageService = makeFlashMessageService;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@42.nl/react-flash-messages",
-  "version": "0.0.2",
+  "version": "2.0.1",
   "description": "Storing flash messages via a nice api for use with React.",
   "files": [
     "lib"
@@ -21,60 +21,72 @@
   },
   "homepage": "https://github.com/42BV/flash-messages#readme",
   "devDependencies": {
-    "@testing-library/react": "8.0.4",
-    "@types/fetch-mock": "7.2.3",
-    "@types/jest": "24.0.9",
-    "@types/react": "16.8.6",
-    "@types/react-dom": "16.8.2",
-    "@types/react-router-dom": "4.3.1",
-    "@typescript-eslint/eslint-plugin": "1.4.2",
-    "@typescript-eslint/parser": "1.4.2",
-    "eslint": "5.15.3",
-    "jest": "24.8.0",
-    "jest-dom": "3.5.0",
-    "prettier": "1.16.4",
-    "ts-jest": "24.0.2",
-    "typescript": "3.5.2",
-    "husky": "1.3.1",
-    "lint-staged": "8.1.5",
-    "react": "16.8.6",
-    "react-addons-test-utils": "15.6.2",
-    "react-dom": "16.8.6"
+    "@testing-library/jest-dom": "5.16.2",
+    "@testing-library/react": "12.1.4",
+    "@types/jest": "27.4.1",
+    "@types/react": "17.0.40",
+    "@types/react-dom": "17.0.13",
+    "@typescript-eslint/eslint-plugin": "5.14.0",
+    "@typescript-eslint/parser": "5.14.0",
+    "eslint": "8.10.0",
+    "eslint-config-react-app": "7.0.0",
+    "eslint-plugin-jest": "26.1.1",
+    "eslint-plugin-react": "7.29.3",
+    "eslint-plugin-react-hooks": "4.3.0",
+    "husky": "7.0.4",
+    "jest": "27.5.1",
+    "jest-watch-typeahead": "1.0.0",
+    "lint-staged": "12.3.5",
+    "np": "^7.6.0",
+    "prettier": "2.5.1",
+    "react": "17.0.2",
+    "react-dom": "17.0.2",
+    "ts-jest": "27.1.3",
+    "typescript": "4.6.2"
   },
   "scripts": {
-    "start": "jest test --watch",
-    "test": "npm run lint && jest test --coverage",
-    "ts": "tsc --version && tsc",
-    "coverage": "npm test -- --coverage",
-    "lint": "eslint \"src/**\"",
-    "prepublish": "rm -rf lib && npm test && npm run ts"
+    "start": "jest --watch --coverage",
+    "clean": "rm -rf lib",
+    "test": "npm run lint && npm run test:ts && npm run test:coverage",
+    "test:ts": "tsc --version && tsc --noEmit",
+    "test:coverage": "jest test --no-cache --coverage",
+    "docs": "jekyll serve --source docs",
+    "tsc": "npm run clean && tsc --version && tsc",
+    "lint": "npm run lint:test && npm run lint:src",
+    "lint:test": "eslint \"tests/**\" --max-warnings=0",
+    "lint:src": "eslint \"src/**\" --max-warnings=0",
+    "release": "npm run tsc && np --otp",
+    "dev:publish": "./scripts/dev-publish.sh",
+    "version": "npm run tsc && jekyll build",
+    "prepare": "husky install"
   },
   "jest": {
-    "globals": {
-      "ts-jest": {
-        "tsConfig": "<rootDir>/tsconfig.json"
+    "preset": "ts-jest",
+    "roots": [
+      "src",
+      "tests"
+    ],
+    "collectCoverageFrom": [
+      "./src/**/*.{ts,tsx}"
+    ],
+    "coverageThreshold": {
+      "global": {
+        "branches": 100,
+        "functions": 100,
+        "lines": 100,
+        "statements": 100
       }
     },
-    "moduleFileExtensions": [
-      "ts",
-      "tsx",
-      "js",
-      "node"
+    "restoreMocks": true,
+    "watchPlugins": [
+      "jest-watch-typeahead/filename",
+      "jest-watch-typeahead/testname"
     ],
-    "transform": {
-      "\\.(ts|tsx)$": "ts-jest"
-    },
-    "testRegex": "/tests/.*\\.(ts|tsx)$"
+    "testEnvironment": "jsdom"
   },
   "lint-staged": {
     "{src,test}/**/*.{js,jsx,json,scss,tsx,ts}": [
-      "prettier --single-quote --write",
-      "git add"
+      "prettier --single-quote --trailing-comma none --write"
     ]
-  },
-  "husky": {
-    "hooks": {
-      "pre-commit": "lint-staged && node check-translations"
-    }
   }
 }

package/CHANGELOG.md

@@ -1,12 +0,0 @@
-# Changelog
-All notable changes to this project will be documented in this file.
-
-The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
-and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
-
-## [Unreleased]
-
-## [0.0.1] - 2019-08-08
-
-### Added
-- The first version of this library.