@commercetools-frontend/experimental-components 0.0.2

package/src/utils/create-next-sort-definition/create-next-sort-definition.spec.js

@@ -0,0 +1,121 @@
+import createNextSortDefinition from './create-next-sort-definition';
+
+describe('createNextSortDefinition', () => {
+  let nextSortDefinition;
+  let sortBy;
+  let sortDirection;
+  let requestedSortBy;
+  let requestedSortDirection;
+
+  describe('when `sortBy` and `requestedSortBy` does not match', () => {
+    beforeEach(() => {
+      sortDirection = 'desc';
+      requestedSortDirection = 'desc';
+      sortBy = 'foo';
+      requestedSortBy = 'bar';
+      nextSortDefinition = createNextSortDefinition({
+        sortBy,
+        sortDirection,
+        requestedSortBy,
+        requestedSortDirection,
+      });
+    });
+    it('should return nextSortDefinition with `requestedSortBy` and `requestedSortDefinition`', () => {
+      expect(nextSortDefinition).toEqual(
+        expect.objectContaining({
+          sortBy: requestedSortBy,
+          sortDirection: requestedSortDirection,
+        })
+      );
+    });
+    it('should reset `page`', () => {
+      expect(nextSortDefinition).toEqual(
+        expect.objectContaining({
+          page: 1,
+        })
+      );
+    });
+  });
+  describe('when `sortBy` and `requestedSortBy` matches', () => {
+    beforeEach(() => {
+      sortDirection = 'desc';
+      requestedSortDirection = 'desc';
+      sortBy = 'foo';
+      requestedSortBy = 'foo';
+      nextSortDefinition = createNextSortDefinition({
+        sortBy,
+        sortDirection,
+        requestedSortBy,
+        requestedSortDirection,
+      });
+    });
+    it('should not return nextSortDefinition` with `requestedSortDefinition`', () => {
+      expect(nextSortDefinition).not.toEqual(
+        expect.objectContaining({
+          sortDirection: requestedSortDirection,
+        })
+      );
+    });
+    it('should reset `page`', () => {
+      expect(nextSortDefinition).toEqual(
+        expect.objectContaining({
+          page: 1,
+        })
+      );
+    });
+    describe('when `sortDirection` was `desc`', () => {
+      it('should reset nextSortDefinition', () => {
+        expect(nextSortDefinition).toEqual(
+          expect.objectContaining({
+            sortBy: undefined,
+            sortDirection: undefined,
+          })
+        );
+      });
+    });
+    describe('when `sortDirection` was `asc`', () => {
+      beforeEach(() => {
+        sortDirection = 'asc';
+        requestedSortDirection = 'desc';
+        sortBy = 'foo';
+        requestedSortBy = 'foo';
+        nextSortDefinition = createNextSortDefinition({
+          sortBy,
+          sortDirection,
+          requestedSortBy,
+          requestedSortDirection,
+        });
+      });
+      it('should return `desc` as next `sortDirection`', () => {
+        expect(nextSortDefinition).toEqual(
+          expect.objectContaining({
+            sortBy,
+            sortDirection: 'desc',
+          })
+        );
+      });
+    });
+    describe('when `sortDirection` was resetted', () => {
+      beforeEach(() => {
+        sortDirection = undefined;
+        requestedSortDirection = 'desc';
+        sortBy = 'foo';
+        requestedSortBy = 'foo';
+        nextSortDefinition = createNextSortDefinition({
+          sortBy,
+          sortDirection,
+          requestedSortBy,
+          requestedSortDirection,
+        });
+      });
+      it('should return `asc` as next `sortDirection`', () => {
+        expect(nextSortDefinition).toEqual(
+          expect.objectContaining({
+            sortBy,
+            sortDirection: 'asc',
+          })
+        );
+      });
+    });
+  });
+});

package/src/utils/create-next-sort-definition/index.js

@@ -0,0 +1 @@
+export { default } from './create-next-sort-definition';

package/src/utils/create-reducer/create-reducer.js

@@ -0,0 +1,21 @@
+/**
+ * Creates reducer
+ * @param {Object} initialState
+ * @param {Object} actionHandlers
+ */
+export default function createReducer(initialState, actionHandlers) {
+  return (state, action) => {
+    let newState = state;
+    if (!newState) newState = initialState;
+
+    if (!action || !action.type) return newState;
+
+    const reduce = actionHandlers[action.type];
+    if (!reduce) return newState;
+
+    // In case reducer ignored action, avoid creating new object
+    const newSubstate = reduce(newState, action);
+    if (newSubstate) return { ...newState, ...newSubstate };
+    return newState;
+  };
+}

package/src/utils/create-reducer/create-reducer.spec.js

@@ -0,0 +1,45 @@
+import createReducer from './create-reducer';
+
+describe('utility functions', () => {
+  describe('create a reducer', () => {
+    const actionHandlers = {
+      ADD_TODO: (state, action) => {
+        const todos = state.todos.slice();
+        todos.push(action.payload);
+        return {
+          ...state,
+          count: todos.length,
+          todos,
+        };
+      },
+    };
+    const initialState = { count: 0, todos: [] };
+    const reducer = createReducer(initialState, actionHandlers);
+
+    const state1 = reducer(initialState, {
+      type: 'ADD_TODO',
+      payload: { id: '1', message: 'Hello' },
+    });
+    const state2 = reducer(state1, {
+      type: 'ADD_TODO',
+      payload: { id: '2', message: 'World' },
+    });
+
+    it('should update with first state', () => {
+      expect(state1).toEqual({
+        count: 1,
+        todos: [{ id: '1', message: 'Hello' }],
+      });
+    });
+
+    it('should update with second state', () => {
+      expect(state2).toEqual({
+        count: 2,
+        todos: [
+          { id: '1', message: 'Hello' },
+          { id: '2', message: 'World' },
+        ],
+      });
+    });
+  });
+});

package/src/utils/create-reducer/index.js

@@ -0,0 +1 @@
+export { default } from './create-reducer';

package/src/utils/create-resource-reducer/create-resource-reducer.js

@@ -0,0 +1,53 @@
+import createReducer from '../create-reducer';
+import updateStatusInList from '../update-status-in-list';
+
+const identity = (value) => value;
+export default function createResourceReducer(options) {
+  const {
+    constantsPrefix: { plural, single },
+    customHandlers,
+    initialState: extendInitialState = {},
+  } = options;
+  const mergeData = options.mergeData || identity;
+
+  const initialState = {
+    currentQueryResult: { count: 0, offset: 0, total: 0, results: [] },
+    currentVisible: null,
+    ...extendInitialState,
+  };
+
+  // TODO: validate constant keys
+  const actionsMap = {
+    [`${plural}_FETCHED`]: (_, action) => ({
+      currentQueryResult: action.payload,
+    }),
+
+    [`${single}_UPDATED_IN_LIST`]: updateStatusInList(mergeData),
+
+    [`${single}_DELETED_IN_LIST`]: (state, { payload }) => {
+      const {
+        currentQueryResult: { results },
+      } = state;
+      return {
+        currentQueryResult: {
+          ...state.currentQueryResult,
+          results: results.filter(({ id }) => id !== payload.id),
+        },
+      };
+    },
+
+    [`${single}_FETCHED`]: (_, { payload }) => ({ currentVisible: payload }),
+
+    [`${single}_CREATED`]: ({ currentVisible }, { payload }) => ({
+      currentVisible: mergeData(payload, currentVisible),
+    }),
+
+    [`${single}_UPDATED`]: ({ currentVisible }, { payload }) => ({
+      currentVisible: mergeData(payload, currentVisible),
+    }),
+
+    [`${single}_DELETED`]: () => ({ currentVisible: null }),
+  };
+
+  return createReducer(initialState, Object.assign(actionsMap, customHandlers));
+}

package/src/utils/create-resource-reducer/create-resource-reducer.spec.js

@@ -0,0 +1,151 @@
+import createResourceReducer from './create-resource-reducer';
+
+describe('`createResourceReducer`', () => {
+  let resourceReducer;
+  let state;
+  let action;
+  let nextState;
+  let mergeData;
+  beforeEach(() => {
+    resourceReducer = createResourceReducer({
+      constantsPrefix: {
+        plural: 'PRODUCTS',
+        single: 'PRODUCT',
+      },
+    });
+  });
+  describe('with no state', () => {
+    beforeEach(() => {
+      nextState = resourceReducer();
+    });
+    it('should return initial state', () => {
+      expect(nextState).toEqual({
+        currentQueryResult: {
+          total: 0,
+          count: 0,
+          results: [],
+          offset: 0,
+        },
+        currentVisible: null,
+      });
+    });
+  });
+  describe('FETCHED', () => {
+    describe('single', () => {
+      beforeEach(() => {
+        action = {
+          type: 'PRODUCT_FETCHED',
+          payload: { id: 'foo' },
+        };
+        nextState = resourceReducer(state, action);
+      });
+      it('should return nextState for `currentVisible`', () => {
+        expect(nextState).toEqual({
+          currentQueryResult: {
+            total: 0,
+            offset: 0,
+            count: 0,
+            results: [],
+          },
+          currentVisible: action.payload,
+        });
+      });
+    });
+    describe('plural', () => {
+      beforeEach(() => {
+        action = {
+          type: 'PRODUCTS_FETCHED',
+          payload: {
+            results: [{ id: 'foo' }],
+          },
+        };
+        nextState = resourceReducer(state, action);
+      });
+      it('should return nextState for `currentQueryResult`', () => {
+        expect(nextState).toEqual({
+          currentVisible: null,
+          currentQueryResult: action.payload,
+        });
+      });
+    });
+  });
+  describe('PRODUCT_CREATED', () => {
+    describe('with custom `mergeData`', () => {
+      beforeEach(() => {
+        mergeData = jest.fn((value) => value);
+        resourceReducer = createResourceReducer({
+          constantsPrefix: {
+            plural: 'PRODUCTS',
+            single: 'PRODUCT',
+          },
+          mergeData,
+        });
+        state = { currentVisible: { id: 'visible-foo' } };
+        action = { type: 'PRODUCT_CREATED', payload: { id: 'foo' } };
+        nextState = resourceReducer(state, action);
+      });
+      it('should call `mergeData`', () => {
+        expect(mergeData).toHaveBeenCalledTimes(1);
+      });
+      it('should call `mergeData` with `payload` and `state.currentVisible`', () => {
+        expect(mergeData).toHaveBeenCalledWith(
+          action.payload,
+          state.currentVisible
+        );
+      });
+    });
+  });
+  describe('PRODUCT_UPDATED', () => {
+    describe('with custom `mergeData`', () => {
+      beforeEach(() => {
+        mergeData = jest.fn((value) => value);
+        resourceReducer = createResourceReducer({
+          constantsPrefix: {
+            plural: 'PRODUCTS',
+            single: 'PRODUCT',
+          },
+          mergeData,
+        });
+        state = { currentVisible: { id: 'visible-foo' } };
+        action = { type: 'PRODUCT_UPDATED', payload: { id: 'foo' } };
+        nextState = resourceReducer(state, action);
+      });
+      it('should call `mergeData`', () => {
+        expect(mergeData).toHaveBeenCalledTimes(1);
+      });
+      it('should call `mergeData` with `payload` and `state.currentVisible`', () => {
+        expect(mergeData).toHaveBeenCalledWith(
+          action.payload,
+          state.currentVisible
+        );
+      });
+    });
+  });
+  describe('PRODUCT_DELETED', () => {
+    describe('with state', () => {
+      beforeEach(() => {
+        state = { currentVisible: { id: 'visible-foo' } };
+        action = { type: 'PRODUCT_DELETED' };
+        nextState = resourceReducer(state, action);
+      });
+      it('should return nextState with empty `currentVisible`', () => {
+        expect(nextState).toEqual({
+          currentVisible: null,
+        });
+      });
+    });
+    describe('without state', () => {
+      beforeEach(() => {
+        state = undefined;
+        action = { type: 'PRODUCT_DELETED' };
+        nextState = resourceReducer(state, action);
+      });
+      it('should return initial state', () => {
+        expect(nextState).toEqual({
+          currentVisible: null,
+          currentQueryResult: expect.any(Object),
+        });
+      });
+    });
+  });
+});

package/src/utils/create-resource-reducer/index.js

@@ -0,0 +1 @@
+export { default } from './create-resource-reducer';

package/src/utils/customer/format-customer-address/format-customer-address.js

@@ -0,0 +1,12 @@
+import { NO_VALUE_FALLBACK } from '@commercetools-frontend/constants';
+
+export default function formatCustomerAddress({ streetName, streetNumber }) {
+  const maybeStreetNameAndNumber = [
+    streetName && streetName.trim(),
+    streetNumber,
+  ].filter(Boolean);
+
+  if (maybeStreetNameAndNumber.length === 0) return NO_VALUE_FALLBACK;
+
+  return maybeStreetNameAndNumber.join(' ');
+}

package/src/utils/customer/format-customer-address/format-customer-address.spec.js

@@ -0,0 +1,43 @@
+import formatCustomerAddress from './format-customer-address';
+
+describe('formatting', () => {
+  it('formats address without street number value', () => {
+    const address = {
+      streetName: 'Wallaby Way',
+      streetNumber: null,
+    };
+
+    const actual = formatCustomerAddress(address);
+    expect(actual).toBe('Wallaby Way');
+  });
+
+  it('formats address without street name value', () => {
+    const address = {
+      streetName: null,
+      streetNumber: 42,
+    };
+
+    const actual = formatCustomerAddress(address);
+    expect(actual).toBe('42');
+  });
+
+  it('formats address with street name and number values set to null', () => {
+    const address = {
+      streetName: null,
+      streetNumber: null,
+    };
+
+    const actual = formatCustomerAddress(address);
+    expect(actual).toBe('- -');
+  });
+
+  it('formats address with street name and number', () => {
+    const address = {
+      streetName: 'Wallaby Way',
+      streetNumber: 42,
+    };
+
+    const actual = formatCustomerAddress(address);
+    expect(actual).toBe('Wallaby Way 42');
+  });
+});

package/src/utils/customer/format-customer-address/index.js

@@ -0,0 +1 @@
+export { default } from './format-customer-address';

package/src/utils/customer/format-customer-name/format-customer-name.js

@@ -0,0 +1,9 @@
+import { NO_VALUE_FALLBACK } from '@commercetools-frontend/constants';
+
+export default function formatCustomerName({ firstName, lastName }) {
+  if (firstName && !lastName) return firstName.trim();
+  if (!firstName && lastName) return lastName.trim();
+  if (firstName && lastName) return `${firstName.trim()} ${lastName.trim()}`;
+
+  return NO_VALUE_FALLBACK;
+}

package/src/utils/customer/format-customer-name/format-customer-name.spec.js

@@ -0,0 +1,44 @@
+import { NO_VALUE_FALLBACK } from '@commercetools-frontend/constants';
+import formatCustomerName from './format-customer-name';
+
+describe('formatting', () => {
+  it('formats customer with a null last name value', () => {
+    const customer = {
+      firstName: ' Bob   ',
+      lastName: null,
+    };
+
+    const actual = formatCustomerName(customer);
+    expect(actual).toBe('Bob');
+  });
+
+  it('formats customer with a null first name value', () => {
+    const customer = {
+      firstName: null,
+      lastName: '  Bobbington',
+    };
+
+    const actual = formatCustomerName(customer);
+    expect(actual).toBe('Bobbington');
+  });
+
+  it('formats customer with first and last name values set to null', () => {
+    const customer = {
+      firstName: null,
+      lastName: null,
+    };
+
+    const actual = formatCustomerName(customer);
+    expect(actual).toBe(NO_VALUE_FALLBACK);
+  });
+
+  it('formats customer with first and last name values', () => {
+    const customer = {
+      firstName: ' Bob    ',
+      lastName: 'Bobbington ',
+    };
+
+    const actual = formatCustomerName(customer);
+    expect(actual).toBe('Bob Bobbington');
+  });
+});

package/src/utils/customer/format-customer-name/index.js

@@ -0,0 +1 @@
+export { default } from './format-customer-name';

package/src/utils/customer/format-customer-title/format-customer-title.js

@@ -0,0 +1,5 @@
+export default function formatCustomerTitle({ title, salutation }) {
+  if (title) return title.trim();
+  if (salutation) return salutation.trim();
+  return '';
+}

package/src/utils/customer/format-customer-title/format-customer-title.spec.js

@@ -0,0 +1,23 @@
+import formatCustomerTitle from './format-customer-title';
+
+describe('formatCustomerTitle', () => {
+  describe('when title available', () => {
+    it('should render the title over the salutation', () => {
+      expect(formatCustomerTitle({ title: 'Dr', salutation: 'Sl' })).toBe('Dr');
+    });
+  });
+  describe('when no title available and salutation available', () => {
+    it('should render the salutation when no title set', () => {
+      expect(formatCustomerTitle({ title: undefined, salutation: 'Sl' })).toBe(
+        'Sl'
+      );
+    });
+  });
+  describe('when no title and salutation available', () => {
+    it('should return empty value when no title and salutation set', () => {
+      expect(
+        formatCustomerTitle({ title: undefined, salutation: undefined })
+      ).toBe('');
+    });
+  });
+});

package/src/utils/customer/format-customer-title/index.js

@@ -0,0 +1 @@
+export { default } from './format-customer-title';

package/src/utils/dataset/dataset.js

@@ -0,0 +1,34 @@
+import camelCase from 'lodash.camelcase';
+
+const regexpData = /^data-/;
+
+export function getDataAttribute(node, key) {
+  if (node.dataset) {
+    const camelKey = camelCase(key.replace(regexpData, ''));
+    return node.dataset[camelKey];
+  }
+  if (node.getAttribute)
+    // IE < 11 compatibility
+    return node.getAttribute(key);
+  return undefined;
+}
+
+export function setDataAttribute(node, key, value) {
+  if (node.dataset) {
+    const camelKey = camelCase(key.replace(regexpData, ''));
+    // eslint-disable-next-line no-param-reassign
+    node.dataset[camelKey] = value;
+  } else if (node.setAttribute)
+    // IE < 11 compatibility
+    node.setAttribute(key, value);
+}
+
+export function filterDataAttributes(obj) {
+  return Object.keys(obj)
+    .filter((p) => regexpData.test(p))
+    .reduce((acc, p) => {
+      // eslint-disable-next-line no-param-reassign
+      acc[p] = obj[p];
+      return acc;
+    }, {});
+}

package/src/utils/dataset/dataset.spec.js

@@ -0,0 +1,70 @@
+import {
+  getDataAttribute,
+  setDataAttribute,
+  filterDataAttributes,
+} from './dataset';
+
+describe('getDataAttribute', () => {
+  it('returns data attribute', () => {
+    const node = {
+      dataset: {
+        keyOne: 'value',
+        keyTwo: 10,
+      },
+    };
+    expect(getDataAttribute(node, 'data-key-one')).toBe(node.dataset.keyOne);
+  });
+
+  it('returns data attribute compatibility', () => {
+    const node = {
+      'data-key-one': 'value',
+      'data-key-two': 10,
+    };
+    node.getAttribute = (key) => node[key] || null;
+    expect(getDataAttribute(node, 'data-key-one')).toBe(node['data-key-one']);
+  });
+});
+
+describe('setDataAttribute', () => {
+  it('sets attribute', () => {
+    const node = { dataset: {} };
+    const key = 'key';
+    const value = 'value';
+
+    setDataAttribute(node, `data-${key}`, value);
+
+    expect(node.dataset[key]).toBe(value);
+  });
+
+  it('sets attribute compatibility', () => {
+    const node = {};
+    node.setAttribute = (key, value) => {
+      node[key] = value;
+    };
+    const key = 'data-key';
+    const value = 'value';
+
+    setDataAttribute(node, key, value);
+
+    expect(node[key]).toBe(value);
+  });
+});
+
+describe('filterDataAttributes', () => {
+  it('filters data attributes', () => {
+    const dataAttrs = {
+      'data-one': 1,
+      'data-three': 3,
+    };
+    const nonDataAttrs = {
+      two: 2,
+      four: 4,
+    };
+    const dataObject = {
+      ...dataAttrs,
+      ...nonDataAttrs,
+    };
+
+    expect(filterDataAttributes(dataObject)).toEqual(dataAttrs);
+  });
+});

package/src/utils/dataset/index.js

@@ -0,0 +1 @@
+export * from './dataset';

package/src/utils/encodings/encodings.js

@@ -0,0 +1,24 @@
+// https://developer.mozilla.org/en-US/docs/Web/API/WindowBase64/btoa#Unicode_strings
+//
+// Escape any extended characters so that the string we
+// actually encode is an ASCII representation of the original.
+// This is to avoid the `InvalidCharacterError`.
+export function stringToBase64(value) {
+  let encoded;
+  try {
+    encoded = btoa(unescape(encodeURIComponent(value)));
+  } catch (e) {
+    /* noop */
+  }
+  return encoded;
+}
+
+export function base64ToString(value) {
+  let decoded;
+  try {
+    decoded = decodeURIComponent(escape(atob(value)));
+  } catch (e) {
+    /* noop */
+  }
+  return decoded;
+}