Remove the use of proxies in favor of modules

[sebnitu]

What changed?

Modal stacking and local store features are written to take advantage of the Proxy object API. This became an issue since Proxy is not supported in IE11 and the polyfill has some major limitations. This PR refactors stack and local store features into modules with their own APIs for handling a private array and object internally.

localStore

Used to maintain a JSON object in local storage. This is a @vrembem/core module used by the drawer component to maintain persistent drawer states via local storage. localStore takes a string key name parameter used to save the object in local storage. Once instantiated, the following API is returned:

• set(prop, value) - Sets a prop/value pair to the stored object. Omitting a value parameter will delete the property. This method triggers the local storage update.
• get(key) - Returns the value of a property on the stored object. Omitting key will return the entire stored object.

Usage

import { localStore } from '@vrembem/core';

const store = localStore('key');

store.set('foo', 'bar');

console.log(store.get('foo'));
// => String 'bar'

console.log(store.get());
// => Object { 'foo': 'bar' }

stack

The stack module is stored as a property of the instantiated modal object. This can be accessed under the .stack property and makes available the following API:

• value - Returns the current stack array. This is a returned copy and not a reference to prevent the array from being modified directly.
• top - Returns the entry at top of stack (the currently active modal). This is also aliased to modal.active.
• updateIndex() - Updated the z-index styles for all entries in the array based on their current sort.
• updateGlobalState() - Updates the global state based on whether or not there is an active modal. Will also update the z-index of entries.
• add(entry) - Adds an entry to the top of the stack array.
• remove(entry) - Removes an entry from the stack array.
• moveToTop(entry) - Will move an entry to the top of the stack if it's already in the stack array.

The stack module is used internally whenever a modal is opened, closed or deregistered but the API is also available under the stack property of the instantiated modal object.

Usage

import Modal from '@vrembem/modal';

modal = new Modal();

console.log(modal.stack);
// => Object {add: ƒ, remove: ƒ, maybeAdd: ƒ, …}