@commercetools-frontend/experimental-components 0.0.2

package/src/utils/filters/date/date.spec.js

@@ -0,0 +1,138 @@
+import moment from 'moment';
+import 'moment-timezone';
+import oneLine from 'common-tags/lib/oneLine';
+import dateTransformer, {
+  defaultFilterValidator,
+  getDateTimeInUTC,
+} from './date';
+
+const dateFormatDayStart = 'YYYY-MM-DDT00:00:00.000';
+const dateFormatDayEnd = 'YYYY-MM-DDT23:59:59.999';
+
+const filterKey = 'createdAt';
+
+describe('getDateTimeInUTC function', () => {
+  it('should correctly convert date with different timezones and formats', () => {
+    expect(getDateTimeInUTC('2021-02-02', 'UTC', dateFormatDayEnd)).toBe(
+      '2021-02-02T23:59:59.999'
+    );
+    expect(
+      getDateTimeInUTC('2021-02-02', 'Europe/Berlin', dateFormatDayEnd)
+    ).toBe('2021-02-03T00:59:59.999');
+    expect(
+      getDateTimeInUTC('2021-02-02', 'Europe/Moscow', dateFormatDayStart)
+    ).toBe('2021-02-02T03:00:00.000');
+  });
+  it('should return datetime as is', () => {
+    expect(getDateTimeInUTC('2021-02-10T11:32:44.000Z')).toBe(
+      '2021-02-10T11:32:44.000Z'
+    );
+  });
+});
+
+describe('date query builder', () => {
+  it('should correctly build a single, "equalTo" query', () => {
+    const queries = [{ type: 'equalTo', value: '2016-05-06' }];
+    const result = dateTransformer(filterKey, queries);
+
+    const expected = `((${filterKey} >= "${moment('2016-05-06').format(
+      dateFormatDayStart
+    )}" and ${filterKey} <= "${moment('2016-05-06').format(
+      dateFormatDayEnd
+    )}"))`;
+    expect(result).toEqual(expected);
+  });
+
+  it('should correctly build a single, "lessThan" query', () => {
+    const queries = [{ type: 'lessThan', value: '2016-05-06' }];
+    const result = dateTransformer(filterKey, queries);
+
+    const expected = `(${filterKey} < "2016-05-06T00:00:00.000")`;
+    expect(result).toEqual(expected);
+  });
+
+  it('should correctly build a single, "moreThan" query', () => {
+    const queries = [{ type: 'moreThan', value: '2016-05-06' }];
+    const result = dateTransformer(filterKey, queries);
+
+    const expected = `(${filterKey} > "2016-05-06T23:59:59.999")`;
+    expect(result).toEqual(expected);
+  });
+
+  it('should correctly build a single, "range" query', () => {
+    const queries = [
+      {
+        type: 'range',
+        value: { from: '2016-05-06', to: '2016-05-08' },
+      },
+    ];
+    const result = dateTransformer(filterKey, queries);
+
+    const expected = `((${filterKey} >= "${moment('2016-05-06').format(
+      dateFormatDayStart
+    )}" and ${filterKey} <= "${moment('2016-05-08').format(
+      dateFormatDayEnd
+    )}"))`;
+    expect(result).toEqual(expected);
+  });
+
+  it('should correctly build a mix of queries', () => {
+    const queries = [
+      { type: 'equalTo', value: '2016-05-06' },
+      { type: 'lessThan', value: '2016-05-06' },
+      { type: 'moreThan', value: '2016-05-06' },
+      {
+        type: 'range',
+        value: { from: '2016-05-06', to: '2016-05-08' },
+      },
+    ];
+    const result = dateTransformer(filterKey, queries);
+
+    const expected = oneLine`
+      ((${filterKey} >= "${moment('2016-05-06').format(
+      dateFormatDayStart
+    )}" and ${filterKey} <= "${moment('2016-05-06').format(
+      dateFormatDayEnd
+    )}") or
+      ${filterKey} < "2016-05-06T00:00:00.000" or ${filterKey} > "2016-05-06T23:59:59.999" or (${filterKey} >= "${moment(
+      '2016-05-06'
+    ).format(dateFormatDayStart)}" and ${filterKey} <= "${moment(
+      '2016-05-08'
+    ).format(dateFormatDayEnd)}"))
+    `;
+
+    expect(result).toEqual(expected);
+  });
+
+  it('should return null for invalid filters', () => {
+    const queries = [{ type: 'equalTo', value: 'something invalid' }];
+    const result = dateTransformer(filterKey, queries, () => false);
+
+    expect(result).toBe(null);
+  });
+});
+
+describe('isFilterValid', () => {
+  it('should detect an invalid non-range filter', () => {
+    const filter = { type: 'non-range', value: '' };
+    expect(defaultFilterValidator(filter)).toBe(false);
+  });
+  it('should detect an invalid range filter', () => {
+    const filter = { type: 'range', value: '' };
+    expect(defaultFilterValidator(filter)).toBe(false);
+  });
+  it('should allow a valid non-range filter', () => {
+    const filter = { type: 'non-range', value: '2000-01-01' };
+    expect(defaultFilterValidator(filter)).toBe(true);
+  });
+  it('should allow a valid range filter', () => {
+    const filter = {
+      type: 'non-range',
+      value: {
+        from: '2003-01-01',
+        to: '2004-01-01',
+      },
+    };
+    expect(defaultFilterValidator(filter)).toBe(true);
+  });
+});

package/src/utils/filters/date/index.js

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

package/src/utils/filters/graphql/category-level/category-level.js

@@ -0,0 +1,17 @@
+import graphqlNumberTransformer from '../number';
+
+export default function graphqlCategoryLevelTransformer(
+  filterKey,
+  filters,
+  filterValidator
+) {
+  const levelFilterQuery = graphqlNumberTransformer(
+    filterKey,
+    filters.filter(({ type }) => type !== 'lastLevel'),
+    filterValidator
+  );
+  const lastLevelFilterQuery = filters.some(({ type }) => type === 'lastLevel')
+    ? 'childCount: 0'
+    : null;
+  return [levelFilterQuery, lastLevelFilterQuery].filter(Boolean);
+}

package/src/utils/filters/graphql/category-level/index.js

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

package/src/utils/filters/graphql/date/date.js

@@ -0,0 +1,58 @@
+import moment from 'moment';
+import oneLine from 'common-tags/lib/oneLine';
+import rangeIsEmpty from '../../is-empty/range';
+import singleIsEmpty from '../../is-empty/single';
+
+const dateFormatDayStart = 'YYYY-MM-DDT00:00:00.000Z';
+const dateFormatDayEnd = 'YYYY-MM-DDT23:59:59.999Z';
+
+export default function dateTransformer(
+  filterKey,
+  filters,
+  filterValidator = isFilterValid
+) {
+  const queries = filters.map(({ type, value }) => {
+    if (!filterValidator({ type, value })) return '';
+
+    switch (type) {
+      case 'lessThan':
+        return `(* to "${moment(value).format(dateFormatDayStart)}")`;
+      case 'moreThan':
+        return `("${moment(value).format(dateFormatDayEnd)}" to *)`;
+      case 'equalTo':
+        return oneLine`
+            ("${moment(value).format(dateFormatDayStart)}"
+            to "${moment(value).format(dateFormatDayEnd)}")
+          `;
+      case 'range':
+        return oneLine`
+            ("${moment(value.from).format(dateFormatDayStart)}"
+            to "${moment(value.to).format(dateFormatDayEnd)}")
+          `;
+      default:
+        return '';
+    }
+  });
+
+  const queryString = queries.filter((q) => q !== '').join(', ');
+
+  return queryString === '' ? null : `${filterKey}: range${queryString}`;
+}
+
+export function isFilterValid({ type, value }) {
+  if (
+    type !== 'range' &&
+    (singleIsEmpty({ value }) || !moment(value).isValid())
+  )
+    return false;
+
+  if (
+    type === 'range' &&
+    (rangeIsEmpty({ value }) ||
+      !moment(value.from).isValid() ||
+      !moment(value.to).isValid())
+  )
+    return false;
+
+  return true;
+}

package/src/utils/filters/graphql/date/date.spec.js

@@ -0,0 +1,122 @@
+import moment from 'moment';
+import oneLine from 'common-tags/lib/oneLine';
+import dateTransformer, { isFilterValid } from './date';
+
+const dateFormatDayStart = 'YYYY-MM-DDT00:00:00.000Z';
+const dateFormatDayEnd = 'YYYY-MM-DDT23:59:59.999Z';
+
+const filterKey = 'createdAt';
+
+describe('date query builder', () => {
+  /**
+   * These date tests make me a sad panda
+   * we SHOULDNT be formatting our expectations with moment. Unfortunately,
+   * thanks to daylight savings, there is no other reliable way to format
+   * the date we expect into the correct timezone for a given locale.
+   *
+   * :'(
+   */
+
+  it('should correctly build a single, "equalTo" query', () => {
+    const queries = [{ type: 'equalTo', value: '2016-05-06' }];
+    const result = dateTransformer(filterKey, queries);
+
+    const expected = `${filterKey}: range("${moment('2016-05-06').format(
+      dateFormatDayStart
+    )}" to "${moment('2016-05-06').format(dateFormatDayEnd)}")`;
+    expect(result).toEqual(expected);
+  });
+
+  it('should correctly build a single, "lessThan" query', () => {
+    const queries = [{ type: 'lessThan', value: '2016-05-06' }];
+    const result = dateTransformer(filterKey, queries);
+
+    const expected = `${filterKey}: range(* to "${moment('2016-05-06').format(
+      dateFormatDayStart
+    )}")`;
+    expect(result).toEqual(expected);
+  });
+
+  it('should correctly build a single, "moreThan" query', () => {
+    const queries = [{ type: 'moreThan', value: '2016-05-06' }];
+    const result = dateTransformer(filterKey, queries);
+
+    const expected = `${filterKey}: range("${moment('2016-05-06').format(
+      dateFormatDayEnd
+    )}" to *)`;
+    expect(result).toEqual(expected);
+  });
+
+  it('should correctly build a single, "range" query', () => {
+    const queries = [
+      {
+        type: 'range',
+        value: { from: '2016-05-06', to: '2016-05-08' },
+      },
+    ];
+    const result = dateTransformer(filterKey, queries);
+
+    const expected = `${filterKey}: range("${moment('2016-05-06').format(
+      dateFormatDayStart
+    )}" to "${moment('2016-05-08').format(dateFormatDayEnd)}")`;
+    expect(result).toEqual(expected);
+  });
+
+  it('should correctly build a mix of queries', () => {
+    const queries = [
+      { type: 'equalTo', value: '2016-05-06' },
+      { type: 'lessThan', value: '2016-05-06' },
+      { type: 'moreThan', value: '2016-05-06' },
+      {
+        type: 'range',
+        value: { from: '2016-05-06', to: '2016-05-08' },
+      },
+    ];
+    const result = dateTransformer(filterKey, queries);
+
+    const expected = oneLine`
+      ${filterKey}: range("${moment('2016-05-06').format(
+      dateFormatDayStart
+    )}" to "${moment('2016-05-06').format(dateFormatDayEnd)}"),
+      (* to "${moment('2016-05-06').format(dateFormatDayStart)}"),
+      ("${moment('2016-05-06').format(dateFormatDayEnd)}" to *),
+      ("${moment('2016-05-06').format(dateFormatDayStart)}" to "${moment(
+      '2016-05-08'
+    ).format(dateFormatDayEnd)}")
+      `;
+
+    expect(result).toEqual(expected);
+  });
+
+  it('should return null for invalid filters', () => {
+    const queries = [{ type: 'equalTo', value: 'something invalid' }];
+    const result = dateTransformer(filterKey, queries, () => false);
+
+    expect(result).toBe(null);
+  });
+});
+
+describe('isFilterValid', () => {
+  it('should detect an invalid non-range filter', () => {
+    const filter = { type: 'non-range', value: '' };
+    expect(isFilterValid(filter)).toBe(false);
+  });
+  it('should detect an invalid range filter', () => {
+    const filter = { type: 'range', value: '' };
+    expect(isFilterValid(filter)).toBe(false);
+  });
+  it('should allow a valid non-range filter', () => {
+    const filter = { type: 'non-range', value: '2000-01-01' };
+    expect(isFilterValid(filter)).toBe(true);
+  });
+  it('should allow a valid range filter', () => {
+    const filter = {
+      type: 'non-range',
+      value: {
+        from: '2003-01-01',
+        to: '2004-01-01',
+      },
+    };
+    expect(isFilterValid(filter)).toBe(true);
+  });
+});

package/src/utils/filters/graphql/date/index.js

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

package/src/utils/filters/graphql/graphql.js

@@ -0,0 +1,42 @@
+import flatMap from 'lodash.flatmap';
+import has from 'lodash.has';
+
+/**
+ * @param Object config config object matching fieldName => dataTypes
+ * @param Object filters all filters keyed by fieldName
+ *
+ * eg.
+ *
+  {
+    config: {
+      createdOn: GraphqlDateProcessor,
+      level: GraphQlNumberProcessor,
+    },
+    filters: {
+      createdOn: [
+        { type: 'equalTo', value: '2016-07-01' }
+      ],
+      level: [
+        {
+          type: 'range',
+          value: { from: '1', to: '5' }
+        }
+      ],
+    }
+  }
+ *
+ */
+export default function graphqlQueryBuilder({ config, filters }) {
+  const builtFilters = flatMap(filters, (filter, fieldName) => {
+    if (!has(config, fieldName))
+      throw new Error(
+        'fieldType required in `config` param of `graphqlQueryBuilder`'
+      );
+
+    const filterConfig = config[fieldName];
+    // a filter transformer may return an array, string or null
+    return filterConfig.transform(filterConfig.key, filter);
+  });
+
+  return builtFilters.filter(Boolean);
+}

package/src/utils/filters/graphql/graphql.spec.js

@@ -0,0 +1,130 @@
+import graphqlQueryBuilder from './graphql';
+
+describe('graphQl Query Builder', () => {
+  let filterTypeConfig;
+  let filtersDefintion;
+
+  describe('with one filter definition', () => {
+    describe('when transformer returns no filter (`null`)', () => {
+      beforeEach(() => {
+        filtersDefintion = {
+          createdOn: [{ type: 'equalTo', value: '' }],
+        };
+        filterTypeConfig = {
+          createdOn: {
+            key: 'createdOn',
+            transform: () => null,
+          },
+        };
+      });
+
+      it('should build an empty query', () => {
+        const expected = [];
+        const actual = graphqlQueryBuilder({
+          config: filterTypeConfig,
+          filters: filtersDefintion,
+        });
+
+        expect(actual).toEqual(expected);
+      });
+    });
+
+    describe('when transformers returns multiple filters (`array`)', () => {
+      beforeEach(() => {
+        filtersDefintion = {
+          level: [
+            { type: 'equalTo', value: 'something' },
+            { type: 'levelDepth', value: null },
+          ],
+        };
+        filterTypeConfig = {
+          level: {
+            key: 'level',
+            transform: (key) => [
+              `${key}: range: (1 to *)`,
+              'levelDepth: randomValue',
+            ],
+          },
+        };
+      });
+      it('should build a query as array containing each transformation', () => {
+        const actual = graphqlQueryBuilder({
+          config: filterTypeConfig,
+          filters: filtersDefintion,
+        });
+        const expected = ['level: range: (1 to *)', 'levelDepth: randomValue'];
+
+        expect(actual).toEqual(expected);
+      });
+    });
+  });
+
+  describe('with multiple filter defintions', () => {
+    describe('when transformers each return a single filter (`string`)', () => {
+      beforeEach(() => {
+        filtersDefintion = {
+          level: [{ type: 'equalTo', value: 'something' }],
+          missingName: [{ type: 'missing', value: { value: 'en' } }],
+        };
+        filterTypeConfig = {
+          level: {
+            key: 'level',
+            transform: (key /* , value */) => `${key}: range(1 to *),(* to 5)`,
+          },
+          missingName: {
+            key: 'name',
+            transform: (key, values) =>
+              `${key}.${values[0].value.value}:missing`,
+          },
+        };
+      });
+
+      it('should build a query as array containing each transformation', () => {
+        const expected = ['level: range(1 to *),(* to 5)', 'name.en:missing'];
+        const actual = graphqlQueryBuilder({
+          config: filterTypeConfig,
+          filters: filtersDefintion,
+        });
+
+        expect(actual).toEqual(expected);
+      });
+    });
+
+    describe('when transformers returns mixed filters multiple (`array`) and single (`string`)', () => {
+      beforeEach(() => {
+        filtersDefintion = {
+          level: [
+            { type: 'equalTo', value: 'something' },
+            { type: 'levelDepth', value: null },
+          ],
+          missingName: [{ type: 'missing', value: { value: 'en' } }],
+        };
+        filterTypeConfig = {
+          level: {
+            key: 'level',
+            transform: (key) => [`${key}: range: (1 to *)`, 'levelDepth: 0'],
+          },
+          missingName: {
+            key: 'name',
+            transform: (key, values) =>
+              `${key}.${values[0].value.value}:missing`,
+          },
+        };
+      });
+
+      it('should build a query as array containing each transformation', () => {
+        const actual = graphqlQueryBuilder({
+          config: filterTypeConfig,
+          filters: filtersDefintion,
+        });
+        const expected = [
+          'level: range: (1 to *)',
+          'levelDepth: 0',
+          'name.en:missing',
+        ];
+
+        expect(actual).toEqual(expected);
+      });
+    });
+  });
+});

package/src/utils/filters/graphql/index.js

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

package/src/utils/filters/graphql/missing/index.js

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

package/src/utils/filters/graphql/missing/missing.js

@@ -0,0 +1,7 @@
+export default function missingTransformer(filterKey, filters) {
+  // Note: we assume for now that there can only be 1 missing filter value,
+  // as the API doesn't support yet multiple OR values (for missing).
+  if (filters.length === 0) return null;
+
+  return `${filterKey}:missing`;
+}

package/src/utils/filters/graphql/missing/missing.spec.js

@@ -0,0 +1,17 @@
+import missingTransformer from './missing';
+
+const filterKey = 'externalId';
+
+describe('missing query builder', () => {
+  it('should correctly build', () => {
+    const queries = [{ type: 'missing', value: null }];
+    const expected = `${filterKey}:missing`;
+
+    const result = missingTransformer(filterKey, queries);
+    expect(result).toEqual(expected);
+  });
+
+  it('return null for empty filters', () => {
+    expect(missingTransformer(filterKey, [])).toBe(null);
+  });
+});

package/src/utils/filters/graphql/missing-locale/index.js

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

package/src/utils/filters/graphql/missing-locale/missing-locale.js

@@ -0,0 +1,8 @@
+export default function missingLocaleTransformer(filterKey, filters) {
+  // Note: we assume for now that there can only be 1 missing filter value,
+  // as the API doesn't support yet multiple OR values (for missing).
+  if (filters.length === 0) return null;
+
+  const missingLocale = filters[0].value.value;
+  return `${filterKey}.${missingLocale}:missing`;
+}

package/src/utils/filters/graphql/missing-locale/missing-locale.spec.js

@@ -0,0 +1,17 @@
+import missingLocaleTransformer from './missing-locale';
+
+const filterKey = 'name';
+
+describe('missing locale query builder', () => {
+  it('should correctly build for locale', () => {
+    const queries = [{ type: 'missingIn', value: { value: 'en' } }];
+    const expected = `${filterKey}.en:missing`;
+
+    const result = missingLocaleTransformer(filterKey, queries);
+    expect(result).toEqual(expected);
+  });
+
+  it('return null for empty filters', () => {
+    expect(missingLocaleTransformer(filterKey, [])).toBe(null);
+  });
+});

package/src/utils/filters/graphql/number/index.js

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

package/src/utils/filters/graphql/number/number.js

@@ -0,0 +1,37 @@
+import rangeIsEmpty from '../../is-empty/range';
+import singleIsEmpty from '../../is-empty/single';
+
+export default function numberTransformer(
+  filterKey,
+  filters,
+  filterValidator = isFilterValid
+) {
+  const queries = filters.map(({ type, value }) => {
+    if (!filterValidator({ type, value })) return '';
+
+    switch (type) {
+      case 'lessThan':
+        return `(* to ${value - 1})`;
+      case 'moreThan':
+        return `(${value + 1} to *)`;
+      case 'equalTo':
+        return `(${value} to ${value})`;
+      case 'range':
+        return `(${value.from} to ${value.to})`;
+      default:
+        return '';
+    }
+  });
+
+  const queryString = queries.filter((q) => q !== '').join(', ');
+
+  return queryString === '' ? null : `${filterKey}: range${queryString}`;
+}
+
+export function isFilterValid({ type, value }) {
+  if (type !== 'range' && singleIsEmpty({ value })) return false;
+
+  if (type === 'range' && rangeIsEmpty({ value })) return false;
+
+  return true;
+}