@commercetools-frontend/experimental-components 0.0.2

package/src/utils/business-roles/messages.js

@@ -0,0 +1,95 @@
+import { defineMessages } from 'react-intl';
+
+export default defineMessages({
+  ExecutiveManagement: {
+    id: 'Shared.businessRoles.executiveManagement',
+    description: 'The label for one of the selectable business roles',
+    defaultMessage: 'Executive Management',
+  },
+  BusinessIntelligence: {
+    id: 'Shared.businessRoles.businessIntelligence',
+    description: 'The label for one of the selectable business roles',
+    defaultMessage: 'Business Intelligence',
+  },
+  BuyingPlanningAndInventoryManagement: {
+    id: 'Shared.businessRoles.buyingPlanningInventoryManagement',
+    description: 'The label for one of the selectable business roles',
+    defaultMessage:
+      'Buying, Planning & Instock Management Buying, Planning & Inventory Management',
+  },
+  DataQualityAndContentManagement: {
+    id: 'Shared.businessRoles.dataQualityContentManagement',
+    description: 'The label for one of the selectable business roles',
+    defaultMessage: 'Data Quality & Content Management',
+  },
+  CustomerService: {
+    id: 'Shared.businessRoles.customerService',
+    description: 'The label for one of the selectable business roles',
+    defaultMessage: 'Customer Service',
+  },
+  FinanceAndAccounting: {
+    id: 'Shared.businessRoles.financeAccounting',
+    description: 'The label for one of the selectable business roles',
+    defaultMessage: 'Finance & Accounting',
+  },
+  LegalAndPeople: {
+    id: 'Shared.businessRoles.legalPeople',
+    description: 'The label for one of the selectable business roles',
+    defaultMessage: 'Legal & People',
+  },
+  LogisticsAndSupplyChain: {
+    id: 'Shared.businessRoles.logisticsSupplyChain',
+    description: 'The label for one of the selectable business roles',
+    defaultMessage: 'Logistics & Supply Chain',
+  },
+  FulfillmentAndOperationsManagement: {
+    id: 'Shared.businessRoles.fulfillmentOperationsManagement',
+    description: 'The label for one of the selectable business roles',
+    defaultMessage: 'Fulfillment & Operations Management',
+  },
+  OfflineRetailStore: {
+    id: 'Shared.businessRoles.offlineRetailStore',
+    description: 'The label for one of the selectable business roles',
+    defaultMessage: 'Offline Retail Store',
+  },
+  Marketing: {
+    id: 'Shared.businessRoles.marketing',
+    description: 'The label for one of the selectable business roles',
+    defaultMessage: 'Marketing',
+  },
+  BusinessDevSalesAndAccountManagement: {
+    id: 'Shared.businessRoles.businessDevSalesAccountManagement',
+    description: 'The label for one of the selectable business roles',
+    defaultMessage: 'Business Dev, Sales & Account Management',
+  },
+  UXUIDesign: {
+    id: 'Shared.businessRoles.uxUiDesign',
+    description: 'The label for one of the selectable business roles',
+    defaultMessage: 'UX/UI Design',
+  },
+  TechProductManagement: {
+    id: 'Shared.businessRoles.productManagementTech',
+    description: 'The label for one of the selectable business roles',
+    defaultMessage: 'Product Management (Tech)',
+  },
+  TechProjectAndProgramManagement: {
+    id: 'Shared.businessRoles.projectProgramManagementTech',
+    description: 'The label for one of the selectable business roles',
+    defaultMessage: 'Project & Program Management (Tech)',
+  },
+  SoftwareDevelopmentAndSolutionsArchitect: {
+    id: 'Shared.businessRoles.softwareDevelopmentSolutionsArchitect',
+    description: 'The label for one of the selectable business roles',
+    defaultMessage: 'Software Development & Solutions Architect',
+  },
+  OperationsITAndSupportEngineering: {
+    id: 'Shared.businessRoles.operationsItSupportEngineering',
+    description: 'The label for one of the selectable business roles',
+    defaultMessage: 'Operations, IT & Support Engineering',
+  },
+  Other: {
+    id: 'Shared.businessRoles.other',
+    description: 'The label for one of the selectable business roles',
+    defaultMessage: 'Other',
+  },
+});

package/src/utils/capitalize-first/capitalize-first.js

@@ -0,0 +1,3 @@
+export default function capitalizeFirst(text) {
+  return text.charAt(0).toUpperCase() + text.slice(1);
+}

package/src/utils/capitalize-first/capitalize-first.spec.js

@@ -0,0 +1,7 @@
+import capitalizeFirst from './capitalize-first';
+
+describe('utility functions', () => {
+  it('should capitalize first char', () => {
+    expect(capitalizeFirst('foo')).toBe('Foo');
+  });
+});

package/src/utils/capitalize-first/index.js

@@ -0,0 +1 @@
+export { default } from './capitalize-first';

package/src/utils/categories/categories.js

@@ -0,0 +1,56 @@
+/* eslint-disable import/prefer-default-export */
+import { formatLocalizedString } from '@commercetools-frontend/l10n';
+
+/**
+ * Get the ancestors of the category,
+ * Apply an `limit` if you need to limit how far up the ancestors' tree
+ * of the category you need to go. ATM we do this when we get the parent.
+ *
+ * @param {Object} category
+ * @param {Number} limit
+ * @return {Array}
+ */
+export function getAncestors(cat, limit = 0) {
+  const category = normalizeCategory(cat);
+  const ancestors = category.ancestors || [];
+  const maxLimit = limit > ancestors.length ? ancestors.length : limit;
+  if (!limit) return ancestors;
+  return ancestors.slice(ancestors.length - maxLimit);
+}
+
+export function getCategoryLevel(cat) {
+  return getAncestors(cat).length + 1;
+}
+
+/**
+ * @param {Object} category
+ * @param {String} lang
+ * @param {Array} languages
+ * @param {Number} limit
+ *
+ * @return {String} - A string representation of the path
+ */
+export function getPathName(cat, lang, languages, limit = 0) {
+  const ancestors = getAncestors(cat, limit);
+  return convertToPathName([...ancestors, cat], lang, languages);
+}
+
+function convertToPathName(categoriesInPath, language, languages) {
+  return categoriesInPath
+    .map((categoryInPath) =>
+      formatLocalizedString(normalizeCategory(categoryInPath), {
+        key: 'name',
+        locale: language,
+        fallbackOrder: languages,
+      })
+    )
+    .join(' > ');
+}
+
+function normalizeCategory(category) {
+  return category.obj
+    ? // we assume that this is expanded reference or mapped from graphql
+      category.obj
+    : // we assume that this is a direct fetch of the object
+      category;
+}

package/src/utils/categories/categories.spec.js

@@ -0,0 +1,122 @@
+import { getAncestors, getCategoryLevel, getPathName } from './categories';
+
+const createTestCategory = (props) => ({
+  id: 'fc735952-21eb-4db6-b76c-b83b72b84345',
+  version: 1,
+  name: { en: 'Nüsse & Kerne', de: 'Nüsse & Kerne' },
+  slug: { en: 'nuesse-kerne', de: 'nuesse-kerne' },
+  ancestors: [
+    {
+      typeId: 'category',
+      id: 'da5b66e6-7423-4d89-b57a-3de48f6bf4d3',
+      obj: {
+        id: 'da5b66e6-7423-4d89-b57a-3de48f6bf4d3',
+        version: 1,
+        name: { en: 'Obst & Gemüse', de: 'Obst & Gemüse' },
+        slug: { en: 'obst-gemuese', de: 'obst-gemuese' },
+        ancestors: [],
+        orderHint: '0.1',
+        createdAt: '2016-05-11T15:38:02.023Z',
+        lastModifiedAt: '2016-05-11T15:38:02.023Z',
+        externalId: '100',
+        lastMessageSequenceNumber: 1,
+      },
+    },
+    {
+      typeId: 'category',
+      id: '6a769249-bb21-4361-8c71-5ab6d8acd799',
+      obj: {
+        id: '6a769249-bb21-4361-8c71-5ab6d8acd799',
+        version: 1,
+        name: {
+          en: 'Trockenfrüchte, Nüsse & Kerne',
+          de: 'Trockenfrüchte, Nüsse & Kerne',
+        },
+        slug: {
+          en: 'trockenfruechte-nuesse-kerne',
+          de: 'trockenfruechte-nuesse-kerne',
+        },
+        ancestors: [
+          {
+            typeId: 'category',
+            id: 'da5b66e6-7423-4d89-b57a-3de48f6bf4d3',
+          },
+        ],
+        parent: {
+          typeId: 'category',
+          id: 'da5b66e6-7423-4d89-b57a-3de48f6bf4d3',
+        },
+        orderHint: '0.1',
+        createdAt: '2016-05-11T15:38:03.477Z',
+        lastModifiedAt: '2016-05-11T15:38:03.477Z',
+        externalId: '101',
+        lastMessageSequenceNumber: 1,
+      },
+    },
+  ],
+  parent: {
+    typeId: 'category',
+    id: '6a769249-bb21-4361-8c71-5ab6d8acd799',
+  },
+  ...props,
+});
+
+describe('getPathName', () => {
+  const category = {
+    id: 'example-cat-1',
+    obj: {
+      id: 'example-cat-1',
+      name: { en: 'example-cat-name-1' },
+      ancestors: [
+        {
+          id: 'example-ancestor-2',
+          obj: {
+            name: { de: 'example-ancestor-name-de' },
+          },
+        },
+        {
+          id: 'example-ancestor-1',
+          obj: {
+            name: { en: 'example-ancestor-name-1' },
+          },
+        },
+      ],
+    },
+  };
+
+  it('should show complete path name', () => {
+    const expected =
+      'example-ancestor-name-de (DE) > example-ancestor-name-1 > example-cat-name-1';
+    const actual = getPathName(category, 'en', ['de', 'fr']);
+    expect(actual).toBe(expected);
+  });
+});
+
+describe('getAncestors', () => {
+  const category = createTestCategory();
+
+  it('should render actual ancestor', () => {
+    const actualAncestors = getAncestors(category);
+    expect(actualAncestors).toEqual(category.ancestors);
+  });
+
+  it('should render last ancestor', () => {
+    const actualParent = getAncestors(category, 1);
+    expect(actualParent).toEqual([
+      category.ancestors[category.ancestors.length - 1],
+    ]);
+  });
+
+  it('should render ancestors of cate', () => {
+    const actualAncestorsExceededLimit = getAncestors(category, 5000);
+    expect(actualAncestorsExceededLimit).toEqual(category.ancestors);
+  });
+});
+
+describe('getCategoryLevel', () => {
+  const category = createTestCategory();
+
+  it('should return correct level', () => {
+    expect(getCategoryLevel(category)).toBe(3);
+  });
+});

package/src/utils/categories/index.js

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

package/src/utils/clone/clone.js

@@ -0,0 +1,3 @@
+export default function clone(obj) {
+  return JSON.parse(JSON.stringify(obj));
+}

package/src/utils/clone/clone.spec.js

@@ -0,0 +1,23 @@
+import clone from './clone';
+
+describe('utility functions', () => {
+  const baseObject = {
+    one: 1,
+    two: 2,
+    other: {
+      one: 1,
+      two: 2,
+    },
+  };
+
+  it('should return a cloned object that matches the base object', () => {
+    const clonedObject = clone(baseObject);
+    expect(baseObject).toEqual(clonedObject);
+  });
+
+  it('should return a modified cloned object that not match base object', () => {
+    const clonedObject = clone(baseObject);
+    clonedObject.other = null;
+    expect(baseObject).not.toEqual(clonedObject);
+  });
+});

package/src/utils/clone/index.js

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

package/src/utils/coerce-to-integer/coerce-to-integer.js

@@ -0,0 +1,3 @@
+/* eslint-disable import/prefer-default-export */
+export const coerceToInteger = (maybeInt) =>
+  !isNaN(parseInt(maybeInt, 10)) ? parseInt(maybeInt, 10) : undefined;

package/src/utils/coerce-to-integer/coerce-to-integer.spec.js

@@ -0,0 +1,49 @@
+import { coerceToInteger } from '.';
+
+describe('with number', () => {
+  it('should return an integer unchanged', () => {
+    expect(coerceToInteger(5)).toEqual(5);
+  });
+
+  it('should coerce a float to integer', () => {
+    expect(coerceToInteger(10.999857)).toEqual(10);
+  });
+
+  it('should coerce a string containing an integer to integer', () => {
+    expect(coerceToInteger('20')).toEqual(20);
+  });
+
+  it('should coerce a string containing a float to integer', () => {
+    expect(coerceToInteger('20.83')).toEqual(20);
+  });
+});
+
+describe('with non-numeric values', () => {
+  it('should return undefined for undefined', () => {
+    expect(coerceToInteger(undefined)).toEqual(undefined);
+  });
+
+  it('should return undefined for null', () => {
+    expect(coerceToInteger(null)).toEqual(undefined);
+  });
+
+  it('should return undefined for empty string', () => {
+    expect(coerceToInteger('')).toEqual(undefined);
+  });
+
+  it('should return undefined for non-numeric string', () => {
+    expect(coerceToInteger('foo')).toEqual(undefined);
+  });
+
+  it('should return undefined for string containing array', () => {
+    expect(coerceToInteger('[20]')).toEqual(undefined);
+  });
+
+  it('should return undefined for object', () => {
+    expect(coerceToInteger({ foo: 0 })).toEqual(undefined);
+  });
+
+  it('should return undefined for a string containing an object', () => {
+    expect(coerceToInteger('{ foo: "bar" }')).toEqual(undefined);
+  });
+});

package/src/utils/coerce-to-integer/index.js

@@ -0,0 +1 @@
+export * from './coerce-to-integer';

package/src/utils/connector/connector.js

@@ -0,0 +1,30 @@
+// Network status adapted from
+// https://www.okgrow.com/posts/loading-patterns-in-apollo-client
+// https://www.apollographql.com/docs/react/api/react-apollo.html#graphql-query-data-networkStatus
+// networkStatus 1: loading
+// networkStatus 2: setVariables
+// networkStatus 3: fetchMore
+// networkStatus 4: refetch
+// networkStatus 5: unused
+// networkStatus 6: poll
+// networkStatus 7: ready
+// networkStatus 8: error
+export const convertApolloNetworkStatusToLoadingState = (networkStatus) => ({
+  initialLoading: networkStatus === 1,
+  activelyRefetching: networkStatus === 4,
+  passivelyRefetching: networkStatus === 2 || networkStatus === 6,
+  fetchingMore: networkStatus === 3,
+});
+
+export const convertApolloQueryDataToConnectorData = (
+  queryData,
+  dataKey,
+  { mapData } = {}
+) => ({
+  isLoading: queryData.loading,
+  loadingState: convertApolloNetworkStatusToLoadingState(
+    queryData.networkStatus
+  ),
+  error: queryData.error,
+  [dataKey]: mapData ? mapData(queryData[dataKey]) : queryData[dataKey],
+});

package/src/utils/connector/connector.spec.js

@@ -0,0 +1,174 @@
+import {
+  convertApolloNetworkStatusToLoadingState,
+  convertApolloQueryDataToConnectorData,
+} from './connector';
+
+describe('convertApolloNetworkStatusToLoadingState', () => {
+  describe('when networkStatus is 1 (loading)', () => {
+    it('should match', () => {
+      expect(convertApolloNetworkStatusToLoadingState(1)).toEqual({
+        activelyRefetching: false,
+        fetchingMore: false,
+        initialLoading: true,
+        passivelyRefetching: false,
+      });
+    });
+  });
+  describe('when networkStatus is 2 (setVariables)', () => {
+    it('should match', () => {
+      expect(convertApolloNetworkStatusToLoadingState(2)).toEqual({
+        activelyRefetching: false,
+        fetchingMore: false,
+        initialLoading: false,
+        passivelyRefetching: true,
+      });
+    });
+  });
+  describe('when networkStatus is 3 (fetchMore)', () => {
+    it('should match', () => {
+      expect(convertApolloNetworkStatusToLoadingState(3)).toEqual({
+        activelyRefetching: false,
+        fetchingMore: true,
+        initialLoading: false,
+        passivelyRefetching: false,
+      });
+    });
+  });
+  describe('when networkStatus is 4 (refetch)', () => {
+    it('should match', () => {
+      expect(convertApolloNetworkStatusToLoadingState(4)).toEqual({
+        activelyRefetching: true,
+        fetchingMore: false,
+        initialLoading: false,
+        passivelyRefetching: false,
+      });
+    });
+  });
+  describe('when networkStatus is 5 (unused)', () => {
+    it('should match', () => {
+      expect(convertApolloNetworkStatusToLoadingState(5)).toEqual({
+        activelyRefetching: false,
+        fetchingMore: false,
+        initialLoading: false,
+        passivelyRefetching: false,
+      });
+    });
+  });
+  describe('when networkStatus is 6 (poll)', () => {
+    it('should match', () => {
+      expect(convertApolloNetworkStatusToLoadingState(6)).toEqual({
+        activelyRefetching: false,
+        fetchingMore: false,
+        initialLoading: false,
+        passivelyRefetching: true,
+      });
+    });
+  });
+  describe('when networkStatus is 7 (ready)', () => {
+    it('should match', () => {
+      expect(convertApolloNetworkStatusToLoadingState(7)).toEqual({
+        activelyRefetching: false,
+        fetchingMore: false,
+        initialLoading: false,
+        passivelyRefetching: false,
+      });
+    });
+  });
+  describe('when networkStatus is 8 (error)', () => {
+    it('should match', () => {
+      expect(convertApolloNetworkStatusToLoadingState(8)).toEqual({
+        activelyRefetching: false,
+        fetchingMore: false,
+        initialLoading: false,
+        passivelyRefetching: false,
+      });
+    });
+  });
+});
+
+describe('convertApolloQueryDataToConnectorData', () => {
+  describe('when mapData is passed', () => {
+    const fooData = { bar: true };
+    let mapData;
+    let result;
+    beforeEach(() => {
+      mapData = jest.fn((data) => ({ mapped: data }));
+      result = convertApolloQueryDataToConnectorData(
+        {
+          loading: true,
+          networkStatus: 1,
+          error: null,
+          foo: fooData,
+        },
+        'foo',
+        { mapData }
+      );
+    });
+    it('should apply mapData', () => {
+      expect(result).toEqual({
+        error: null,
+        foo: { mapped: fooData },
+        isLoading: true,
+        loadingState: {
+          activelyRefetching: false,
+          fetchingMore: false,
+          initialLoading: true,
+          passivelyRefetching: false,
+        },
+      });
+    });
+    it('should call mapData', () => {
+      expect(mapData).toHaveBeenCalledTimes(1);
+    });
+  });
+  describe('when loading', () => {
+    it('should match', () => {
+      expect(
+        convertApolloQueryDataToConnectorData(
+          {
+            loading: true,
+            networkStatus: 1,
+            error: null,
+            foo: {},
+          },
+          'foo'
+        )
+      ).toEqual({
+        error: null,
+        foo: {},
+        isLoading: true,
+        loadingState: {
+          activelyRefetching: false,
+          fetchingMore: false,
+          initialLoading: true,
+          passivelyRefetching: false,
+        },
+      });
+    });
+  });
+  describe('when error is present', () => {
+    it('should have an error', () => {
+      expect(
+        convertApolloQueryDataToConnectorData(
+          {
+            loading: true,
+            networkStatus: 4,
+            error: {},
+            foo: null,
+          },
+          'foo'
+        )
+      ).toEqual({
+        error: {},
+        foo: null,
+        isLoading: true,
+        loadingState: {
+          activelyRefetching: true,
+          fetchingMore: false,
+          initialLoading: false,
+          passivelyRefetching: false,
+        },
+      });
+    });
+  });
+});

package/src/utils/connector/index.js

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

package/src/utils/constants.js

@@ -0,0 +1,43 @@
+export const PRODUCT_STATUSES = {
+  PUBLISHED: 'published',
+  UNPUBLISHED: 'unpublished',
+  MODIFIED: 'modified',
+};
+
+export const FILTER_TYPES = {
+  lessThan: 'lessThan',
+  moreThan: 'moreThan',
+  equalTo: 'equalTo',
+  range: 'range',
+  missing: 'missing',
+  missingIn: 'missingIn',
+  in: 'in',
+};
+
+export const FIELD_TYPES = {
+  Money: 'Money',
+  LocalizedString: 'LocalizedString',
+  Time: 'Time',
+  DateTime: 'DateTime',
+  Boolean: 'Boolean',
+  String: 'String',
+  Enum: 'Enum',
+  LocalizedEnum: 'LocalizedEnum',
+  Number: 'Number',
+  Date: 'Date',
+  Reference: 'Reference',
+  Set: 'Set',
+};
+
+export const PRECISION_TYPES = {
+  highPrecision: 'highPrecision',
+  centPrecision: 'centPrecision',
+};
+
+export const ERROR_CODES = {
+  semanticError: 'SemanticError',
+  invalidInput: 'InvalidInput',
+};
+
+export const DefaultPageSizes = [20, 50, 100];
+export const DefaultPageSize = DefaultPageSizes[0];

package/src/utils/conversions/sort-array.js

@@ -0,0 +1,6 @@
+export const sortDataByIdsArray = (idsArray, dataWithId) =>
+  idsArray
+    ? idsArray
+        .map((sortId) => dataWithId.find((data) => data.id === sortId))
+        .filter(Boolean)
+    : [];

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

@@ -0,0 +1,46 @@
+// We create the next sort definition to be attached to the request based on the following values:
+// - requestedSortBy/requestedSortDirection: reflects values of the sort definition that the UI requests for
+// - sortBy/sortDirection: reflects the current state of the sorting on the data
+//
+// 1. if the `requestedSortBy` and `sortBy` are not equal, then we know the user attempts to sort by
+// another column of the table, which in this case we override the current state of sorting and
+// use requestedSortBy/requestedSortDirection to sort with
+//
+// 2. with `sortDirection`, we are enforcing a flow control in the following order: NONE -> asc -> desc -> (back to) NONE
+// By NONE, we refer to clearing the sort state entirely and let the API gives us the values sorted by their natural order.
+const createNextSortDefinition = ({
+  requestedSortBy,
+  requestedSortDirection,
+  sortBy,
+  sortDirection,
+}) => {
+  if (sortBy !== requestedSortBy) {
+    return {
+      sortBy: requestedSortBy,
+      sortDirection: requestedSortDirection,
+      page: 1,
+    };
+  }
+  switch (sortDirection) {
+    case 'desc':
+      return {
+        sortBy: undefined,
+        sortDirection: undefined,
+        page: 1,
+      };
+    case 'asc':
+      return {
+        sortBy,
+        sortDirection: 'desc',
+        page: 1,
+      };
+    default:
+      return {
+        sortBy,
+        sortDirection: 'asc',
+        page: 1,
+      };
+  }
+};
+
+export default createNextSortDefinition;