@commercetools-frontend/experimental-components 0.0.2 → 0.0.3

package/package.json

@@ -1,25 +1,29 @@
 {
   "name": "@commercetools-frontend/experimental-components",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "description": "",
-  "license": "MIT",
   "publishConfig": {
     "access": "public"
   },
   "main": "dist/commercetools-frontend-experimental-components.cjs.js",
   "module": "dist/commercetools-frontend-experimental-components.esm.js",
+  "files": [
+    "dist",
+    "package.json",
+    "README.md"
+  ],
   "dependencies": {
-    "@apollo/client": "3.7.1",
+    "@apollo/client": "3.7.2",
     "@babel/runtime": "^7.19.0",
     "@babel/runtime-corejs3": "^7.19.0",
-    "@commercetools-frontend/actions-global": "21.20.4",
-    "@commercetools-frontend/application-components": "21.20.4",
-    "@commercetools-frontend/application-shell": "21.20.4",
-    "@commercetools-frontend/application-shell-connectors": "21.20.4",
-    "@commercetools-frontend/constants": "21.20.4",
-    "@commercetools-frontend/l10n": "21.20.4",
-    "@commercetools-frontend/sdk": "21.20.4",
-    "@commercetools-frontend/sentry": "21.20.4",
+    "@commercetools-frontend/actions-global": "21.21.0",
+    "@commercetools-frontend/application-components": "21.21.0",
+    "@commercetools-frontend/application-shell": "21.21.0",
+    "@commercetools-frontend/application-shell-connectors": "21.21.0",
+    "@commercetools-frontend/constants": "21.21.0",
+    "@commercetools-frontend/l10n": "21.21.0",
+    "@commercetools-frontend/sdk": "21.21.0",
+    "@commercetools-frontend/sentry": "21.21.0",
     "@commercetools-frontend/ui-kit": "15.6.0",
     "@commercetools-uikit/select-utils": "15.6.0",
     "@commercetools-uikit/utils": "15.6.0",

package/CHANGELOG.md

@@ -1,7 +0,0 @@
-# @commercetools-frontend/experimental-components
-
-## 0.0.2
-
-### Patch Changes
-
-- [#13263](https://github.com/commercetools/merchant-center-frontend/pull/13263) [`1f319113f7`](https://github.com/commercetools/merchant-center-frontend/commit/1f319113f7c232232cb86f4ec9e84598bbd462a7) Thanks [@dogayuksel](https://github.com/dogayuksel)! - Enable build with preconstruct.

package/src/actions/reference-search/cart-discount/cart-discount.ctp.graphql

@@ -1,29 +0,0 @@
-query SearchCartDiscount($where: String) {
-  cartDiscounts(limit: 500, where: $where) {
-    total
-    results {
-      id
-      key
-      nameAllLocales {
-        locale
-        value
-      }
-    }
-  }
-}
-
-query CartDiscountsCount {
-  cartDiscounts {
-    total
-  }
-}
-
-query FetchCartDiscountById($cartDiscountId: String!) {
-  cartDiscount(id: $cartDiscountId) {
-    id
-    nameAllLocales {
-      locale
-      value
-    }
-  }
-}

package/src/actions/reference-search/cart-discount/cart-discount.js

@@ -1,69 +0,0 @@
-import { GRAPHQL_TARGETS } from '@commercetools-frontend/constants';
-import {
-  transformLocalizedFieldsForCartDiscount,
-  isUUID,
-} from '../../../internal-index';
-
-import {
-  SearchCartDiscount,
-  FetchCartDiscountById,
-} from './cart-discount.ctp.graphql';
-
-const transformCartDiscountResponse = (response) =>
-  (response.data?.cartDiscounts.results || []).map((cartDiscount) =>
-    transformLocalizedFieldsForCartDiscount(cartDiscount)
-  );
-
-export function queryCartDiscounts(apolloClient) {
-  return apolloClient
-    .query({
-      query: SearchCartDiscount,
-      context: {
-        target: GRAPHQL_TARGETS.COMMERCETOOLS_PLATFORM,
-      },
-      fetchPolicy: 'network-only',
-    })
-    .then(transformCartDiscountResponse);
-}
-
-const getWhereClause = (searchText = '', language) => {
-  const query = JSON.stringify(searchText).trim();
-  const idQuery = isUUID(searchText) && `id = ${query}`;
-  const nameQuery = `name(${language} = ${query})`;
-  const keyQuery = `key = ${query}`;
-
-  return [idQuery, nameQuery, keyQuery].filter(Boolean).join(' or ');
-};
-
-export function searchCartDiscountsByExactMatch(apolloClient, options) {
-  return apolloClient
-    .query({
-      query: SearchCartDiscount,
-      variables: {
-        where: getWhereClause(options.searchText, options.language),
-      },
-      context: {
-        target: GRAPHQL_TARGETS.COMMERCETOOLS_PLATFORM,
-      },
-      fetchPolicy: 'network-only',
-    })
-    .then(transformCartDiscountResponse);
-}
-
-export function getCartDiscountById(apolloClient, options) {
-  return apolloClient
-    .query({
-      query: FetchCartDiscountById,
-      variables: {
-        cartDiscountId: options.id,
-      },
-      context: {
-        target: GRAPHQL_TARGETS.COMMERCETOOLS_PLATFORM,
-      },
-    })
-    .then((response) =>
-      response.data?.cartDiscount
-        ? transformLocalizedFieldsForCartDiscount(response.data.cartDiscount)
-        : null
-    );
-}

package/src/actions/reference-search/cart-discount/cart-discount.spec.js

@@ -1,115 +0,0 @@
-import { queryCartDiscounts, getCartDiscountById } from './cart-discount';
-
-const createCartDiscountsResponse = () => [
-  {
-    id: 'cd_01',
-    nameAllLocales: [
-      {
-        locale: 'en',
-        value: 'something_01',
-      },
-    ],
-    key: 'something-01',
-  },
-  {
-    id: 'cd_02',
-    nameAllLocales: [
-      {
-        locale: 'en',
-        value: 'something_02',
-      },
-    ],
-  },
-  {
-    id: 'cd_03',
-    nameAllLocales: [
-      {
-        locale: 'en',
-        value: 'something_03',
-      },
-    ],
-  },
-];
-
-describe('queryCartDiscounts', () => {
-  let response;
-  let apolloClient;
-  let result;
-  beforeEach(async () => {
-    response = {
-      data: {
-        cartDiscounts: {
-          results: createCartDiscountsResponse(),
-        },
-      },
-    };
-    apolloClient = {
-      query: jest.fn(() => Promise.resolve(response)),
-    };
-    result = queryCartDiscounts(apolloClient, {
-      searchText: 'something',
-      language: 'en',
-    });
-    await result;
-  });
-  it('should fetch cartDiscounts', async () => {
-    await expect(result).resolves.toEqual([
-      {
-        id: 'cd_01',
-        name: {
-          en: 'something_01',
-        },
-        key: 'something-01',
-      },
-      {
-        id: 'cd_02',
-        name: {
-          en: 'something_02',
-        },
-      },
-      {
-        id: 'cd_03',
-        name: {
-          en: 'something_03',
-        },
-      },
-    ]);
-  });
-});
-
-describe('getCartDiscountById', () => {
-  let cartDiscount;
-  let apolloClient;
-  let result;
-  beforeEach(async () => {
-    cartDiscount = {
-      id: 'cd_01',
-      nameAllLocales: [
-        {
-          locale: 'en',
-          value: 'something_01',
-        },
-      ],
-    };
-    const response = {
-      data: {
-        cartDiscount,
-      },
-    };
-    apolloClient = {
-      query: jest.fn(() => Promise.resolve(response)),
-    };
-    result = getCartDiscountById(apolloClient, {
-      cartDiscountId: 'cd_01',
-    });
-    await result;
-  });
-  it('should return cartDiscount', async () => {
-    await expect(result).resolves.toEqual({
-      id: 'cd_01',
-      name: {
-        en: 'something_01',
-      },
-    });
-  });
-});

package/src/actions/reference-search/cart-discount/index.js

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

package/src/actions/reference-search/category/category.ctp.graphql

@@ -1,44 +0,0 @@
-query SearchCategoryReference($locale: Locale!, $text: String!) {
-  categories: categoryAutocomplete(locale: $locale, text: $text) {
-    results {
-      ...CategorySearchPickerOptionFragment
-    }
-  }
-}
-
-query FetchCategoriesByIds($where: String!) {
-  categories(where: $where) {
-    results {
-      id
-      nameAllLocales {
-        locale
-        value
-      }
-    }
-  }
-}
-
-fragment CategorySearchPickerOptionFragment on CategorySearch {
-  id
-  externalId
-  nameAllLocales {
-    locale
-    value
-  }
-  slugAllLocales {
-    locale
-    value
-  }
-  parent {
-    nameAllLocales {
-      locale
-      value
-    }
-  }
-  ancestors {
-    nameAllLocales {
-      locale
-      value
-    }
-  }
-}

package/src/actions/reference-search/category/category.js

@@ -1,50 +0,0 @@
-import { GRAPHQL_TARGETS } from '@commercetools-frontend/constants';
-import { transformLocalizedFieldsForCategory } from '../../../internal-index';
-import {
-  SearchCategoryReference,
-  FetchCategoriesByIds,
-} from './category.ctp.graphql';
-
-export function searchCategories(apolloClient, options) {
-  return apolloClient
-    .query({
-      query: SearchCategoryReference,
-      variables: {
-        locale: options.language,
-        text: options.searchText,
-      },
-      context: {
-        target: GRAPHQL_TARGETS.COMMERCETOOLS_PLATFORM,
-      },
-      fetchPolicy: 'network-only',
-    })
-    .then((response) =>
-      response.data.categories.results.map((category) =>
-        transformLocalizedFieldsForCategory(category, [
-          { from: 'nameAllLocales', to: 'name' },
-          { from: 'slugAllLocales', to: 'slug' },
-        ])
-      )
-    );
-}
-
-export function getCategoriesByIds(apolloClient, options) {
-  return apolloClient
-    .query({
-      query: FetchCategoriesByIds,
-      variables: {
-        where: `id in (${options.ids.map((id) => `"${id}"`).join(', ')})`,
-      },
-      context: {
-        target: GRAPHQL_TARGETS.COMMERCETOOLS_PLATFORM,
-      },
-    })
-    .then((response) =>
-      response.data.categories.results.map((category) =>
-        transformLocalizedFieldsForCategory(category, [
-          { from: 'nameAllLocales', to: 'name' },
-          { from: 'slugAllLocales', to: 'slug' },
-        ])
-      )
-    );
-}

package/src/actions/reference-search/category/category.spec.js

@@ -1,82 +0,0 @@
-import { searchCategories, getCategoriesByIds } from './category';
-
-const createCategoriesResponse = () => [
-  { id: 'cat_01', nameAllLocales: [{ locale: 'en', value: 'something_01' }] },
-  { id: 'cat_02', nameAllLocales: [{ locale: 'en', value: 'something_02' }] },
-  { id: 'cat_03', nameAllLocales: [{ locale: 'en', value: 'something_03' }] },
-];
-
-describe('searchCategories', () => {
-  let response;
-  let apolloClient;
-  let result;
-  beforeEach(async () => {
-    response = {
-      data: { categories: { results: createCategoriesResponse() } },
-    };
-    apolloClient = { query: jest.fn(() => Promise.resolve(response)) };
-    result = searchCategories(apolloClient, {
-      searchText: 'something',
-      language: 'en',
-    });
-    await result;
-  });
-  it('should fetch categories', async () => {
-    await expect(result).resolves.toEqual([
-      {
-        id: 'cat_01',
-        name: { en: 'something_01' },
-        slug: null,
-      },
-      {
-        id: 'cat_02',
-        name: { en: 'something_02' },
-        slug: null,
-      },
-      {
-        id: 'cat_03',
-        name: { en: 'something_03' },
-        slug: null,
-      },
-    ]);
-  });
-});
-
-describe('getCategoriesByIds', () => {
-  let categories;
-  let apolloClient;
-  let result;
-  beforeEach(async () => {
-    categories = {
-      results: [
-        {
-          id: 'cat_01',
-          nameAllLocales: [{ locale: 'en', value: 'something_01' }],
-        },
-        {
-          id: 'cat_02',
-          nameAllLocales: [{ locale: 'en', value: 'something_02' }],
-        },
-      ],
-    };
-    const response = { data: { categories } };
-    apolloClient = { query: jest.fn(() => Promise.resolve(response)) };
-    result = getCategoriesByIds(apolloClient, { ids: ['cat_01', 'cat_02'] });
-    await result;
-  });
-
-  it('should return categories', async () => {
-    await expect(result).resolves.toEqual([
-      {
-        id: 'cat_01',
-        name: { en: 'something_01' },
-        slug: null,
-      },
-      {
-        id: 'cat_02',
-        name: { en: 'something_02' },
-        slug: null,
-      },
-    ]);
-  });
-});

package/src/actions/reference-search/category/index.js

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

package/src/components/attribute-definitions/reference-search/cart-discount-reference-search/cart-discount-reference-search.jsx

@@ -1,132 +0,0 @@
-import PropTypes from 'prop-types';
-import { useApolloClient } from '@apollo/client';
-import { useQuery } from '@apollo/client/react';
-import { LoadingSpinner, Constraints } from '@commercetools-frontend/ui-kit';
-import { GRAPHQL_TARGETS } from '@commercetools-frontend/constants';
-import { QUERY_MAX_LIMIT } from '../../../../constants';
-import {
-  getCartDiscountById,
-  queryCartDiscounts,
-  searchCartDiscountsByExactMatch,
-} from '../../../../actions/reference-search/cart-discount';
-import { CartDiscountsCount } from '../../../../actions/reference-search/cart-discount/cart-discount.ctp.graphql';
-import { useCallback } from 'react';
-import { formatLocalizedString } from '@commercetools-frontend/l10n';
-import { useIntl } from 'react-intl';
-import { useApplicationContext } from '@commercetools-frontend/application-shell-connectors';
-import ReferenceSearch from '../reference-search';
-import messages from './messages';
-import Option from './option';
-
-const returnNullIfEmpty = (value) => (value && value.id === '' ? null : value);
-
-const filterOption = (option, text) =>
-  option.label.toLocaleLowerCase().includes(text.toLowerCase()) ||
-  option.value === text ||
-  option.data.key === text;
-
-export default function CartDiscountReferenceSearch(props) {
-  const { loading, data } = useQuery(CartDiscountsCount, {
-    context: {
-      target: GRAPHQL_TARGETS.COMMERCETOOLS_PLATFORM,
-    },
-    fetchPolicy: 'network-only',
-  });
-
-  const isExactMatch = data?.cartDiscounts.total > QUERY_MAX_LIMIT;
-
-  const { formatMessage } = useIntl();
-
-  const apolloClient = useApolloClient();
-
-  const { language, languages } = useApplicationContext(
-    (applicationContext) => ({
-      language: applicationContext.dataLocale,
-      languages: applicationContext.project.languages,
-    })
-  );
-
-  const mapItemToOption = useCallback(
-    (cartDiscount) => ({
-      ...cartDiscount,
-      value: cartDiscount.id,
-      key: cartDiscount.key,
-      label: formatLocalizedString(cartDiscount, {
-        key: 'name',
-        locale: language,
-        fallback: cartDiscount.id,
-        fallbackOrder: languages,
-      }),
-    }),
-    [languages, language]
-  );
-
-  const loadItemsBySearchTerm = useCallback(
-    (searchText) => {
-      const searchItemsHandler = isExactMatch
-        ? searchCartDiscountsByExactMatch
-        : queryCartDiscounts;
-      return searchItemsHandler(apolloClient, { searchText, language });
-    },
-    [apolloClient, language, isExactMatch]
-  );
-
-  // Underlying <ReferenceSearch /> supports multi-selection and hence
-  // uses `loadItemsByIds` where `ids` is an array of item ids to be loaded.
-  // We don't need <CartDiscountReferenceSearch /> to support multi-selection at
-  // the moment. That why mapping to array and back is implemented here.
-  const loadItemsByIds = useCallback(
-    (ids) =>
-      getCartDiscountById(apolloClient, { id: ids[0] }).then((cartDiscount) =>
-        cartDiscount ? [cartDiscount] : []
-      ),
-    [apolloClient]
-  );
-
-  if (loading)
-    return (
-      <div data-testid="loading-spinner">
-        <LoadingSpinner />
-      </div>
-    );
-
-  return (
-    <Constraints.Horizontal
-      max="scale"
-      data-testid={isExactMatch ? 'reference-by-id' : 'reference-by-name'}
-    >
-      <ReferenceSearch
-        id={props.id}
-        components={{ Option }}
-        isClearable={props.isClearable}
-        isDisabled={props.isDisabled}
-        hasError={props.hasError}
-        onBlur={props.onBlur}
-        onChange={props.onChange}
-        value={returnNullIfEmpty(props.value)}
-        placeholderLabel={formatMessage(messages.placeholder)}
-        searchPromptLabel={formatMessage(messages.searchPrompt)}
-        noResultsLabel={formatMessage(messages.noResults)}
-        referenceIsMissingLabel={formatMessage(messages.isMissing)}
-        mapItemToOption={mapItemToOption}
-        loadItemsBySearchTerm={loadItemsBySearchTerm}
-        loadItemsByIds={loadItemsByIds}
-        filterOption={filterOption}
-      />
-    </Constraints.Horizontal>
-  );
-}
-
-CartDiscountReferenceSearch.propTypes = {
-  id: PropTypes.string.isRequired,
-  isClearable: PropTypes.bool,
-  isDisabled: PropTypes.bool,
-  hasError: PropTypes.bool,
-  onBlur: PropTypes.func,
-  onChange: PropTypes.func.isRequired,
-  value: PropTypes.oneOfType([
-    PropTypes.shape({
-      id: PropTypes.string.isRequired,
-    }),
-  ]),
-};