bv-ui-core 0.1.1

package/lib/bvFetch/index.js

@@ -0,0 +1,383 @@
+/**
+ * @fileOverview
+ * Provides api response caching utilties
+ */
+
+const { fetch } = require('../polyfills/fetch')
+
+module.exports = function BvFetch ({ shouldCache, cacheName, cacheLimit, excludeHeaders = [] }) {
+  this.shouldCache = shouldCache;
+  this.cacheName = cacheName || 'bvCache';
+  this.cacheLimit = cacheLimit * 1024 * 1024 || 10 * 1024 * 1024;
+  this.fetchPromises = new Map();
+  this.cachedRequests = new Set();
+  this.excludeHeaders = excludeHeaders;
+
+  /**
+   * Checks if a request is present in a set of cached URLs.
+   *
+   * @param {Set} cachedRequests - A set of cached request objects.
+   * @param {Object} cacheKey - The request object to check for in the cachedRequests set.
+   * @param {string} cacheKey.url - The URL of the request.
+   * @param {Headers} cacheKey.headers - The headers of the request.
+   * @returns {boolean} - Returns true if the request is found in the cachedRequests set, otherwise false.
+   */
+  function isRequestInSet (cachedRequests, cacheKey) {
+    try {
+      // Convert the Set to an array and check if any request matches
+      return [...cachedRequests].some((cachedRequest) => {
+        // Compare URLs
+        if (cachedRequest.url !== cacheKey.url) {
+          return false;
+        }
+    
+        // Compare headers
+        const cachedHeaders = [...cachedRequest.headers.entries()];
+        const keyHeaders = [...cacheKey.headers.entries()];
+    
+        if (cachedHeaders.length !== keyHeaders.length) {
+          return false; // Different number of headers
+        }
+        // Check if all headers match
+        return cachedHeaders.every(([key, value]) => {
+          return cacheKey.headers.get(key) === value;
+        });
+      });
+    } 
+    catch (error) {
+      console.warn('Error checking in if request is in cache: ', error);
+      return false;
+    }
+  }
+  
+
+  /**
+     * Creates a new Request object with the given URL and options.
+     *
+     * @param {string} url - The URL to which the request is sent.
+     * @param {Object} options - The options to apply to the request.
+     * @returns {Request} The created Request object.
+     */
+
+  /**
+   * Generates a cache key as a Request object for the given URL and options.
+   * Filters out headers specified in `excludeHeaders` from the options before creating the Request.
+   *
+   * @param {string} url - The URL of the API endpoint.
+   * @param {Object} options - Optional request options (e.g., headers, method, etc.).
+   * @returns {Request} The generated Request object to be used as a cache key.
+   */
+  this.generateCacheKey =  (url, options) => {
+    const filteredOptions = Object.assign({}, options);
+    if (filteredOptions.headers) {
+      const newHeaders = new Headers();
+      for (const [key, value] of Object.entries(filteredOptions.headers)) {
+        if (!this.excludeHeaders.includes(key)) {
+          newHeaders.set(key, value);
+        }
+      }
+      filteredOptions.headers = newHeaders;
+    }
+    const key = new Request(url, filteredOptions);
+    return key;
+  };
+
+   /**
+   * Serializes a request object into a JSON string for use as a cache key.
+   * The serialization includes the URL, method, and sorted headers of the request.
+   * @param {Request} request - The request object to serialize.
+   * @returns {string} A JSON string representing the serialized request.
+   */
+  this.serializeRequestKey = (request) => {
+    const url = request.url;
+    const method = request.method || 'GET';
+    // Convert headers to a sorted array of [key, value] pairs for consistency
+    const headersArr = Array.from(request.headers.entries()).sort(([a], [b]) => a.localeCompare(b));
+    return JSON.stringify([url, method, { headers: headersArr }]);
+  }
+
+  /**
+  * Retrieves cached Requests from the cache storage associated with the provided cache name.
+  * @returns {void}
+  */
+
+  this.retrievecachedRequests = () => {
+    // Open the Cache Storage
+    caches.open(this.cacheName).then(cache => {
+    // Get all cache keys
+      cache.keys().then(keys => {
+        keys.forEach(request => {
+          const headers = {};
+          request.headers.forEach((value, key) => {
+            if (!this.excludeHeaders.includes(key)) {
+              headers[key] = value;
+            }
+          });
+
+          // Generate the cache key with headers and URL
+          const cacheKey = this.generateCacheKey(request.url, { headers });
+          this.cachedRequests.add(cacheKey); // Add to the set
+        });
+      });
+    });
+  }
+
+  //callretrievecachedRequests function to set the cache URL set with the cached URLS
+  this.retrievecachedRequests();
+
+  /**
+    * Fetches data from the specified URL, caches the response, and returns the response.
+    * @param {string} url - The URL from which to fetch data.
+    * @param {string} cacheKey - The cache key associated with the fetched data.
+    * @returns {Promise<Response>} A Promise that resolves with the fetched response.
+    * @throws {Error} Throws an error if there's any problem fetching the data.
+  */
+  this.fetchDataAndCache = (url, options = {}, cacheKey) => {
+    return fetch(url,options)
+      .then((response) => {
+        // initiate caching of response and return the response
+        this.cacheData(response, cacheKey);
+        return response.clone();
+      })
+      .catch(function (error) {
+        throw new Error('Error fetching data: ' + error);
+      });
+  }
+
+  /**
+    * Caches the provided response with the specified cache key if it meets the criteria for caching.
+    * @param {Response} response - The response object to be cached.
+    * @param {string} cacheKey - The cache key associated with the response.
+    * @returns {void}
+  */
+
+  this.cacheData = (response, cacheKey) => {
+    const errJson = response.clone();
+    let canBeCached = true;
+    if (!response.ok) {
+      // If the response is not ok, we don't cache it
+      canBeCached = false;
+      return;
+    }
+    if (!response.headers.has('Cache-Control')) {
+      canBeCached = false;
+      return;
+    }
+    // Check for error in response obj
+    errJson.json().then(json => {
+      if (typeof this.shouldCache === 'function') {
+        canBeCached = this.shouldCache(json);
+      }
+    }).catch(() => {
+      canBeCached = false;  
+    }).then(() => {
+      if (canBeCached) {
+        const clonedResponse = response.clone();
+        const sizeCheck = response.clone();
+        const newHeaders = new Headers();
+        clonedResponse.headers.forEach((value, key) => {
+          newHeaders.append(key, value);
+        });
+        newHeaders.append('X-Bazaarvoice-Cached-Time', Date.now())
+        // Get response text to calculate its size
+        sizeCheck.text().then(text => {
+        // Calculate size of response text in bytes
+          const sizeInBytes = new Blob([text]).size;
+
+        // Append response size to headers
+          newHeaders.append('X-Bazaarvoice-Response-Size', sizeInBytes);
+
+        // Create new Response object with modified headers
+          const newResponse = new Response(clonedResponse._bodyBlob || clonedResponse.body, {
+            status: clonedResponse.status,
+            statusText: clonedResponse.statusText,
+            headers: newHeaders
+          });
+          // Cache the response
+          caches.open(this.cacheName).then(cache => {
+            cache.put(cacheKey, newResponse);
+            //add key to cachedRequests set
+            this.cachedRequests.add(cacheKey);
+          });
+        });
+      }
+    })
+  }
+
+  /**
+    * Function to fetch data from cache.
+    * @param {string} cacheKey - The cache key to fetch data from the cache.
+    * @returns {Promise<Response|null>} A Promise that resolves with a Response object if the data is found in cache, 
+    * or null if the data is not cached or expired.
+    * @throws {Error} Throws an error if there's any problem fetching from cache.
+  */
+  this.fetchFromCache = (cacheKey) => {
+    // Check if the URL is in the set of cached requests set
+    if (!isRequestInSet(this.cachedRequests, cacheKey)) {
+      return Promise.resolve(null);
+    }
+
+    // Open the cache and try to match the URL
+    return caches.open(this.cacheName)
+      .then((cache) => {
+        return cache.match(cacheKey)
+          .then((cachedResponse) => {
+            if (!cachedResponse) {
+              this.cachedRequests.delete(cacheKey)
+              return Promise.resolve(null);
+            }         
+            const cachedTime = cachedResponse.headers.get('X-Bazaarvoice-Cached-Time');
+            const ttl = cachedResponse.headers.get('Cache-Control').match(/max-age=(\d+)/)[1];
+            const currentTimestamp = Date.now();
+            const cacheAge = (currentTimestamp - cachedTime) / 1000;
+            if (cacheAge < ttl) {
+              // Cached response found
+              return cachedResponse.clone();
+            }
+          })
+      })
+      .catch((error) => {
+        throw new Error('Error fetching from cache: ' + error);
+      });
+  }
+
+  /**
+   * Fetches data from the API endpoint, caches responses, and handles caching logic.
+   * @param {string} url - The URL of the API endpoint.
+   * @param {Object} options - Optional request options.
+   * @returns {Promise<Response>} A promise resolving to the API response.
+   */
+
+  this.bvFetchFunc = (url, options = {}) => {
+
+    const cacheKey = this.generateCacheKey(url, options);
+  // If an ongoing fetch promise exists for the URL, return it
+    if (this.fetchPromises.has(this.serializeRequestKey(cacheKey))) {
+      return this.fetchPromises.get(this.serializeRequestKey(cacheKey)).then(res => res.clone());
+    }
+
+    // Check if response is available in cache
+    const newPromise = this.fetchFromCache(cacheKey)
+      .then((cachedResponse) => {
+          // If response found in cache, return it
+        if (cachedResponse) {
+          return cachedResponse;
+        }
+          // If response not found in cache, fetch from API and cache it
+        return this.fetchDataAndCache(url, options, cacheKey);
+      });
+
+    // Store the ongoing fetch promise
+    this.fetchPromises.set(this.serializeRequestKey(cacheKey), newPromise);
+
+    //initiate cache cleanUp
+    this.debounceCleanupExpiredCache();
+
+    // When fetch completes or fails, remove the promise from the store
+    newPromise.finally(() => {
+      this.fetchPromises.delete(this.serializeRequestKey(cacheKey));
+    });
+
+    return newPromise.then(res => res.clone());
+  }
+
+
+  /**
+   * Clears all cache entries stored in the cache storage.
+   * @returns {Promise<void>} A promise indicating cache flush completion.
+   */
+
+  this.flushCache = () => {
+    return caches.open(this.cacheName).then(cache => {
+      return cache.keys().then(keys => {
+        const deletionPromises = keys.map(key => cache.delete(key));
+        return Promise.all(deletionPromises);
+      });
+    });
+  };
+
+  this.manageCache = () => {
+    // Delete expired cache entries
+    caches.open(this.cacheName).then(cache => {
+      cache.keys().then(keys => {
+        keys.forEach(key => {
+          cache.match(key).then(response => {
+            const cachedTime = response.headers.get('X-Bazaarvoice-Cached-Time');
+            const ttl = response.headers.get('Cache-Control').match(/max-age=(\d+)/)[1];
+            const currentTimestamp = Date.now();
+            const cacheAge = (currentTimestamp - cachedTime) / 1000;
+            if (cacheAge >= ttl) {
+              cache.delete(key);
+              this.cachedRequests.delete(key);
+            }
+          });
+        });
+      });
+    });
+
+    // Calculate total size of cached responses
+    let totalSize = 0;
+    caches.open(this.cacheName).then(cache => {
+      cache.keys().then(keys => {
+        // Create an array of promises for cache match operations
+        const matchPromises = keys.map(key =>
+                cache.match(key).then(response => {
+                  const sizeHeader = response.headers.get('X-Bazaarvoice-Response-Size');
+                  return parseInt(sizeHeader, 10);
+                })
+            );
+
+        // wait for all match promises to resolve
+        return Promise.all(matchPromises)
+          .then(sizes => sizes.reduce((acc, size) => acc + size, 0));
+      }).then(size => {
+        totalSize = size;
+        // If total size exceeds 10 MB, delete old cache entries
+        if (totalSize > this.cacheLimit) {
+
+          // create an array of cached responses
+          const cacheEntries = [];
+          return cache.keys().then(keys => {
+            const cachesResEntries = keys.map(key =>
+              cache.match(key).then(response => {
+                const sizeHeader = response.headers.get('X-Bazaarvoice-Response-Size');
+                const lastAccessedTime = response.headers.get('X-Bazaarvoice-Cached-Time');
+                cacheEntries.push({ key, size: parseInt(sizeHeader, 10), lastAccessedTime });
+              })
+            );
+
+            return Promise.all(cachesResEntries)
+            .then(() => {
+              // Sort cache entries by last accessed time in ascending order
+              cacheEntries.sort((a, b) => a.lastAccessedTime - b.lastAccessedTime);
+              
+              // Delete older cache entries until total size is under 10 MB
+              let currentSize = totalSize;
+              cacheEntries.forEach(entry => {
+                if (currentSize > this.cacheLimit) {
+                  cache.delete(entry.key);
+                  this.cachedRequests.delete(entry.key);
+                  currentSize -= entry.size;
+                }
+              });
+            });
+          });
+        }
+      });
+    });
+  };
+
+
+  function debounce (func, delay) {
+    let timer;
+    return function () {
+      clearTimeout(timer);
+      timer = setTimeout(() => {
+        func.apply(this, arguments);
+      }, delay);
+    };
+  }
+
+  this.debounceCleanupExpiredCache = debounce(this.manageCache, 8000);
+  
+}

package/lib/checkHighContrast/README.md

@@ -0,0 +1,26 @@
+# checkHighContrast
+
+This is a small method to do the somewhat complicated job of figuring out
+whether a browser is operating in high contrast mode. The end goal is to be
+able to style the page differently so these users.
+
+# Limitations
+
+This works on all Windows browsers but only Firefox on Mac. The way this works
+is by detecting when the browser's computed styles are different than the
+given ones. In Windows, the high contrast theme coerces the browsers to ignore
+a website's given styles in favor of its own. In OSX, the system level high
+contrast settings will alter the entire display at a lower level so browsers
+won't be aware of it and therefore neither will we. Firefox has options in
+the content pane of preferences to ignore website's styles and will behave
+similarly to Windows at that point. The likelihood of Apple changing their
+approach anytime soon is probably small.
+
+## Usage
+```javascript
+var checkHighContrast = require('checkHighContrast');
+
+if( checkHighContrast(body) ) {
+  // ... setup alternative styles here ...
+}
+```

package/lib/checkHighContrast/index.js

@@ -0,0 +1,36 @@
+/**
+ * @fileOverview Utility for determining if browser is in highcontrast mode
+ * Originally from Firebird's util directory.
+ *
+ * High contrast mode overwrites a website's choice of colors with a user's
+ * or OS's. This naturally can play havoc with the visual display of information.
+ * Detecting and using alternative styles can improve a user's experience.
+ */
+
+function checkHighContrast (body) {
+  var div = document.createElement('div');
+  div.style['background-color'] = 'blue';
+  body.appendChild(div);
+  // Some IE's do not have access to getComputedStyle and need to use
+  // elem.currentStyle instead. The results are not the same but either
+  // option should reveal whether the browser is interfering.
+  var styleAccessor = (window.getComputedStyle && window.getComputedStyle(div)) || div.currentStyle;
+  var color = styleAccessor['background-color'];
+
+  body.removeChild(div);
+
+  // We may get back the color in an rgb format, we should consider that acceptable
+  if (color === 'rgb(0, 0, 255)') {
+    return false;
+  }
+
+  if (color === 'blue') {
+    return false;
+  }
+
+  // At this point, the color isn't one of the two possible valid results for
+  // blue, so we're assuming that high-contrast mode is altering our visual.
+  return true;
+}
+
+module.exports = checkHighContrast;

package/lib/cookie/README.md

@@ -0,0 +1,29 @@
+# cookie
+
+The cookie module provides methods for interacting with browser cookies.
+
+```js
+var cookie = require('bv-ui-core/lib/cookie');
+
+cookie.create('RememberMe', '1', 365);
+console.log(cookie.read('RememberMe')); // '1'
+cookie.remove('RememberMe');
+```
+
+## The following methods are provided:
+
+- `read(name)`: Read the cookie with the given name.
+- `create(name, value, [days, domain, secure])`: Write a cookie with the given
+  name and value. Set the expiration in days using the `days` argument; set
+  the domain using the `domain` argument; indicate that the cookie is secure
+  by passing `true` as the `secure` argument. Note that if one optional
+  argument is provided, all previous arguments must be provided as well.
+- `remove(name)`: Delete the cookie with the given name.
+
+## Usage with `cookieConsent`:
+
+- Call `cookieConsent.initConsent` before calling `cookie.create`.
+- Cookies will get created only if the consent for that cookie is true.
+- Each cookie will automatically subscribe to `enable` and `disable` consent events for that cookie.
+- Cookie will get set when consent is `true`.
+- Cookie will get removed when consent is `false`.

package/lib/cookie/index.js

@@ -0,0 +1,111 @@
+/**
+ * @fileOverview
+ * Provides cookie utilities.
+ */
+
+// Imports.
+var global = require('../global');
+var cookieConsent = require('../cookieConsent');
+// Store to hold cookie values
+var store = {};
+/**
+ * Create a cookie.
+ *
+ * @param {String} name The cookie name.
+ * @param {String} value The cookie value.
+ * @param {Number} days The cookie lifespan in days.
+ * @param {String} [domain] The domain for the cookie.
+ * @param {Boolean} [secure] Whether this is a secure cookie.
+ * @param {String} [sameSite='Lax'] The SameSite attribute ('Strict', 'Lax', or 'None'). Defaults to 'Lax'.
+ */
+function createCookie (name, value, days, domain, secure, sameSite = 'Lax') {
+  var date = new Date();
+
+  date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
+  var expires = days ? ';expires=' + date.toGMTString() : '';
+
+  // Determine if the cookie should be secure.
+  // Force the Secure flag if the page is loaded over HTTPS, OR if the explicit `secure` argument is true.
+  // This ensures that all cookies (including BVBRANDID) set by this library are secure in production environments.
+  var isSecure = secure || (global.location && global.location.protocol === 'https:');
+
+  // SameSite=None requires the Secure flag, so we fallback to 'Lax' if not secure.
+  var sameSiteValue = (sameSite === 'None' && !isSecure) ? 'Lax' : sameSite;
+
+  var c = encodeURIComponent(name) + '=' +
+    encodeURIComponent(value) +
+    expires +
+    ';path=/' +
+    (domain ? (';domain=' + domain) : '') +
+    (isSecure ? ';secure' : '') +
+    ';SameSite=' + sameSiteValue;
+
+  global.document.cookie = c;
+}
+/**
+ * Obtain the value of a cookie.
+ *
+ * @param {String} name The cookie name.
+ * @return {String} The cookie value or null if no such cookie.
+ */
+function readCookie (name) {
+  var nameEQ = encodeURIComponent(name) + '=';
+  var ca = global.document.cookie.split(';');
+  var i;
+
+  for (i = 0; i < ca.length; i++) {
+    var c = ca[i];
+
+    while (c.charAt(0) === ' ') {
+      c = c.substring(1, c.length);
+    }
+
+    if (c.indexOf(nameEQ) === 0) {
+      return decodeURIComponent(c.substring(nameEQ.length, c.length));
+    }
+  }
+
+  return null;
+}
+/**
+ * Remove a cookie.
+ *
+ * @param {String} name The cookie name.
+ */
+function removeCookie (name, domain) {
+  delete store[name];
+  if (domain) {
+    createCookie(name, '', -1, domain);
+  }
+  else {
+    createCookie(name, '', -1);
+  }
+}
+
+module.exports = {
+  create: function (name, value, days, domain, secure, sameSite) {
+    store[name] = value;
+    var consentPresent = cookieConsent.getConsent(name);
+    if (consentPresent) {
+      createCookie(name, value, days, domain, secure, sameSite);
+    }
+    cookieConsent.subscribe(name, 'add', function (consent) {
+      if (consent) {
+        createCookie(name, value, days, domain, secure, sameSite);
+      }
+      else {
+        removeCookie(name, domain);
+      }
+    });
+
+    cookieConsent.subscribe(name, 'enable', function () {
+      createCookie(name, value, days, domain, secure, sameSite);
+    });
+
+    cookieConsent.subscribe(name, 'disable', function () {
+      removeCookie(name, domain);
+    });
+  },
+  read: readCookie,
+  remove: removeCookie
+};

package/lib/cookieConsent/README.md

@@ -0,0 +1,41 @@
+# cookieConsent
+
+The cookieConsent module provides methods for controlling cookie consents.
+
+```js
+var cookieConsent = require('bv-ui-core/lib/cookieConsent');
+// Initialize
+/**
+ * 2nd parameter is to disable/enable consent mechanism.
+ * Passing true will disable the consent mechanism.
+*/
+cookieConsent.initConsent({
+  cookie1: false,
+  cookie2: true
+}, false);
+
+// Set cookie consent
+cookieConsent.setConsent({ cookie1: true });
+
+// Get cookie consent
+cookieConsent.getConsent('cookie1');
+
+// Subscribe to consent 'add' event. Triggers when a new cookie consent is added
+cookieConsent.subscribe('cookie3', 'add', function (data) {});
+
+// Subscribe to consent 'enable' event. Triggers when a cookie consent is set to true
+cookieConsent.subscribe('cookie3', 'enable', function (data) {});
+
+// Valid events that can be subscribed to are 'add', 'enable', 'disable', and 'change'
+// Subscribe to consent 'disable' event. Triggers when a cookie consent is set to false
+var event = cookieConsent.subscribe('cookie3', 'disable', function (data) {});
+
+// Subscribe to the store change event. The latest consent store object is passed as parameter to the callback function
+var event = subscribeToConsentStore(function (store){});
+
+// Unsubscribe events
+event.unsubscribe();
+
+// Get cookie consent disabled/enabled value.
+cookieConsent.getConsentDisabled();
+```