@commercetools-frontend/experimental-components 0.0.2 → 0.0.3

package/src/components/attribute-definitions/reference-search/category-reference-search/messages.js

@@ -1,37 +0,0 @@
-import { defineMessages } from 'react-intl';
-
-const messages = defineMessages({
-  placeholder: {
-    id: 'CategoryReferenceSearch.placeholder',
-    description: 'Placeholder for search for a category',
-    defaultMessage: 'Search by name, external ID, or slug.',
-  },
-  isMissing: {
-    id: 'CategoryReferenceSearch.isMissing',
-    description: 'Label above the field for deleted reference of a category',
-    defaultMessage: 'This Category has been deleted.',
-  },
-  noResults: {
-    id: 'CategoryReferenceSearch.noResults',
-    description: 'Message for no results found for category reference',
-    defaultMessage:
-      'Sorry, but there are no categories that match your search.',
-  },
-  searchPrompt: {
-    id: 'CategoryReferenceSearch.searchPrompt',
-    description: 'Message for search prompt for category reference',
-    defaultMessage: 'Enter search term',
-  },
-  externalId: {
-    id: 'CategoryReferenceSearch.externalId',
-    description: 'external id label',
-    defaultMessage: 'External ID',
-  },
-  parentCategory: {
-    id: 'CategoryReferenceSearch.parentCategory',
-    description: 'parent category label',
-    defaultMessage: 'Parent Category',
-  },
-});
-
-export default messages;

package/src/components/attribute-definitions/reference-search/category-reference-search/option.jsx

@@ -1,71 +0,0 @@
-import PropTypes from 'prop-types';
-import { useIntl } from 'react-intl';
-import { useApplicationContext } from '@commercetools-frontend/application-shell-connectors';
-import { NO_VALUE_FALLBACK } from '@commercetools-frontend/constants';
-import { formatLocalizedString } from '@commercetools-frontend/l10n';
-import { AsyncSelectInput, Text } from '@commercetools-frontend/ui-kit';
-import messages from './messages';
-
-function Option(props) {
-  const { language, languages } = useApplicationContext(
-    (applicationContext) => ({
-      language: applicationContext.dataLocale,
-      languages: applicationContext.project.languages,
-    })
-  );
-  const { formatMessage } = useIntl();
-
-  const category = props.data;
-
-  return (
-    <AsyncSelectInput.Option {...props}>
-      <div data-testid="category-option">
-        <Text.Body isBold={true}>
-          {formatLocalizedString(category, {
-            key: 'name',
-            locale: language,
-            fallbackOrder: languages,
-          })}
-        </Text.Body>
-        {category.parent && (
-          <Text.Detail>
-            {`${formatMessage(
-              messages.parentCategory
-            )}: ${formatLocalizedString(category.parent, {
-              key: 'name',
-              locale: language,
-              fallbackOrder: languages,
-            })}`}
-          </Text.Detail>
-        )}
-        <Text.Detail>
-          {`Slug: ${formatLocalizedString(category, {
-            key: 'slug',
-            locale: language,
-            fallbackOrder: languages,
-          })}`}
-        </Text.Detail>
-        {category.externalId && (
-          <Text.Detail>
-            {`${formatMessage(messages.externalId)}: ${
-              category.externalId || NO_VALUE_FALLBACK
-            }`}
-          </Text.Detail>
-        )}
-      </div>
-    </AsyncSelectInput.Option>
-  );
-}
-
-Option.propTypes = {
-  data: PropTypes.shape({
-    name: PropTypes.objectOf(PropTypes.string),
-    slug: PropTypes.objectOf(PropTypes.string),
-    externalId: PropTypes.string,
-    parent: PropTypes.shape({
-      name: PropTypes.objectOf(PropTypes.string),
-    }),
-  }).isRequired,
-};
-
-export default Option;

package/src/components/attribute-definitions/reference-search/category-reference-search/use-cached-category-options.js

@@ -1,21 +0,0 @@
-import { useApolloClient } from '@apollo/client';
-import { transformLocalizedFieldsForCategory } from '../../../../internal-index';
-import { CategorySearchPickerOptionFragment } from '../../../../actions/reference-search/category/category.ctp.graphql';
-
-export default function useCachedCategoryOptions(ids) {
-  const apolloClient = useApolloClient();
-
-  const fragments = ids.map((id) =>
-    apolloClient.readFragment({
-      id: `CategorySearch:${id}`,
-      fragment: CategorySearchPickerOptionFragment,
-    })
-  );
-
-  return fragments.map((category) =>
-    transformLocalizedFieldsForCategory(category, [
-      { from: 'nameAllLocales', to: 'name' },
-      { from: 'slugAllLocales', to: 'slug' },
-    ])
-  );
-}

package/src/components/attribute-definitions/reference-search/index.js

@@ -1,10 +0,0 @@
-import CategoryReferenceSearch, {
-  useCachedCategoryOptions,
-} from './category-reference-search';
-import CartDiscountReferenceSearch from './cart-discount-reference-search';
-
-export {
-  CategoryReferenceSearch,
-  CartDiscountReferenceSearch,
-  useCachedCategoryOptions,
-};

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

@@ -1,179 +0,0 @@
-import PropTypes from 'prop-types';
-import { useMemo, useState, useEffect, useCallback, useRef } from 'react';
-import { deepEqual } from 'fast-equals';
-import CustomFieldTooltip from '../../../custom-fields/custom-fields/custom-field-tooltip';
-import Autocomplete from '../../../fields/autocomplete';
-import { usePrevious } from '../../../hooks';
-
-import styles from './reference-search.module.css';
-
-// This is a hashmap of loaded items used to map a value to an item
-const itemCache = new Map();
-
-// Keep track of "mounted" state to safe-guard updating React state
-// in asynchronous calls, for example within an effect.
-const useMountedState = () => {
-  const mountedRef = useRef(false);
-  const isMounted = useCallback(() => mountedRef.current, []);
-  useEffect(() => {
-    mountedRef.current = true;
-    return () => {
-      mountedRef.current = false;
-    };
-  }, []);
-
-  return isMounted;
-};
-
-const useReferenceSearchItems = ({
-  ids,
-  loadItemsBySearchTerm,
-  loadItemsByIds,
-}) => {
-  const isMounted = useMountedState();
-  const [items, setItems] = useState([]);
-  const [areItemsLoading, setAreItemsLoading] = useState(false);
-
-  // Used to debounce load items requests
-  const loadItemsTimeoutRef = useRef();
-
-  const putToCache = useCallback((items) => {
-    items.forEach((item) => itemCache.set(item.id, item));
-  }, []);
-
-  const prevIds = usePrevious(ids);
-
-  useEffect(() => {
-    async function loadItems() {
-      const loadedItems = ids.length > 0 ? await loadItemsByIds(ids) : [];
-      putToCache(loadedItems);
-
-      // To safe-guard against updating React state when component
-      // has been unmounted.
-      if (isMounted()) {
-        setItems(loadedItems);
-        setAreItemsLoading(false);
-      }
-    }
-
-    if (!deepEqual(prevIds, ids)) {
-      const hasAllItemsInCache = ids.every((id) => itemCache.has(id));
-      if (hasAllItemsInCache) {
-        setAreItemsLoading(false);
-        setItems(ids.map((id) => itemCache.get(id)));
-      } else {
-        setAreItemsLoading(true);
-        loadItems();
-      }
-    }
-  }, [ids, isMounted, loadItemsByIds, prevIds, putToCache]);
-
-  const handleLoadItems = useCallback(
-    (text) => {
-      if (loadItemsTimeoutRef.current)
-        clearTimeout(loadItemsTimeoutRef.current);
-
-      const loadItemsPromise = new Promise((resolve) => {
-        loadItemsTimeoutRef.current = setTimeout(async () => {
-          const items = await loadItemsBySearchTerm(text);
-          putToCache(items);
-          resolve(items);
-        }, 300);
-      });
-
-      return loadItemsPromise;
-    },
-    [loadItemsBySearchTerm, putToCache]
-  );
-
-  const areSomeItemsMissing = ids.length > items.length;
-
-  return { handleLoadItems, areItemsLoading, areSomeItemsMissing, items };
-};
-
-export default function ReferenceSearch(props) {
-  const ids = useMemo(
-    () =>
-      props.value
-        ? props.isMulti
-          ? props.value?.map(({ id }) => id)
-          : [props.value?.id]
-        : [],
-    [props.value, props.isMulti]
-  );
-
-  const { items, areItemsLoading, areSomeItemsMissing, handleLoadItems } =
-    useReferenceSearchItems({
-      loadItemsBySearchTerm: props.loadItemsBySearchTerm,
-      loadItemsByIds: props.loadItemsByIds,
-      ids,
-    });
-
-  if (areItemsLoading) return null;
-
-  const value = props.isMulti ? items : items?.[0];
-
-  const tooltipTitle =
-    value || props.value
-      ? props.mapItemToOption(value || props.value).label
-      : '';
-
-  return (
-    <div className={styles.container}>
-      {areSomeItemsMissing && (
-        <div className={styles['missing-label']}>
-          {props.referenceIsMissingLabel}
-        </div>
-      )}
-      <CustomFieldTooltip title={tooltipTitle}>
-        <Autocomplete
-          id={props.id}
-          onChange={props.onChange}
-          onBlur={props.onBlur}
-          hasError={props.hasError}
-          value={value || props.value || null}
-          noResultsLabel={props.noResultsLabel}
-          placeholderLabel={props.placeholderLabel}
-          searchPromptLabel={props.searchPromptLabel}
-          loadItems={handleLoadItems}
-          mapItemToOption={props.mapItemToOption}
-          components={props.components}
-          filterOption={props.filterOption}
-          isReadOnly={props.isReadOnly}
-          disabled={props.isDisabled}
-          isClearable={props.isClearable}
-          isMulti={props.isMulti}
-        />
-      </CustomFieldTooltip>
-    </div>
-  );
-}
-ReferenceSearch.propTypes = {
-  id: PropTypes.string.isRequired,
-  components: PropTypes.object,
-  hasError: PropTypes.bool,
-  isClearable: PropTypes.bool,
-  isDisabled: PropTypes.bool,
-  isReadOnly: PropTypes.bool,
-  isMulti: PropTypes.bool,
-  onBlur: PropTypes.func,
-  onChange: PropTypes.func.isRequired,
-  value: PropTypes.oneOfType([
-    PropTypes.shape({
-      id: PropTypes.string.isRequired,
-    }),
-    PropTypes.arrayOf(
-      PropTypes.shape({
-        id: PropTypes.string.isRequired,
-      })
-    ),
-  ]),
-  placeholderLabel: PropTypes.string.isRequired,
-  searchPromptLabel: PropTypes.string.isRequired,
-  noResultsLabel: PropTypes.string.isRequired,
-  referenceIsMissingLabel: PropTypes.string.isRequired,
-  mapItemToOption: PropTypes.func.isRequired,
-  loadItemsBySearchTerm: PropTypes.func.isRequired,
-  loadItemsByIds: PropTypes.func.isRequired,
-  filterOption: PropTypes.func.isRequired,
-};

package/src/components/attribute-definitions/reference-search/reference-search.module.css

@@ -1,13 +0,0 @@
-.container {
-  width: 100%;
-}
-
-.container > div {
-  width: 100%;
-}
-
-.missing-label {
-  color: var(--color-warning);
-  font-size: 0.9rem;
-  margin-left: var(--spacing-xs);
-}

package/src/components/business-unit-select-field/business-unit-select-field.jsx

@@ -1,141 +0,0 @@
-import PropTypes from 'prop-types';
-import requiredIf from 'react-required-if';
-import { SELECT_DROPDOWN_OPTION_TYPES } from '@commercetools-uikit/select-utils';
-import {
-  Spacings,
-  Constraints,
-  FieldLabel,
-} from '@commercetools-frontend/ui-kit';
-import {
-  filterDataAttributes,
-  filterAriaAttributes,
-} from '@commercetools-uikit/utils';
-import {
-  LOWER_BUSINESS_UNITS_LIMIT,
-  UPPER_BUSINESS_UNITS_LIMIT,
-} from '../business-unit-select-input/constants';
-import BusinessUnitSelectInput from '../business-unit-select-input';
-
-const BusinessUnitSelectField = (props) => {
-  return (
-    <Constraints.Horizontal max={props.horizontalConstraint}>
-      <Spacings.Stack scale="xs">
-        <FieldLabel
-          title={props.title}
-          hint={props.hint}
-          description={props.description}
-          hintIcon={props.hintIcon}
-          htmlFor={props.id}
-          hasRequiredIndicator={props.isRequired}
-          isBold={props.isBold}
-        />
-        <BusinessUnitSelectInput
-          id={props.id}
-          name={props.name}
-          horizontalConstraint={props.horizontalConstraint}
-          value={props.value}
-          onChange={props.onChange}
-          onBlur={props.onBlur}
-          isDisabled={props.isDisabled}
-          isReadOnly={props.isReadOnly}
-          isClearable={props.isClearable}
-          isSearchable={props.isSearchable}
-          backspaceRemovesValue={props.backspaceRemovesValue}
-          hasError={props.hasError}
-          hasWarning={props.hasWarning}
-          errors={props.errors}
-          renderError={props.renderError}
-          touched={props.touched}
-          title={props.title}
-          maxMenuHeight={props.maxMenuHeight}
-          menuPortalTarget={props.menuPortalTarget}
-          menuPortalZIndex={props.menuPortalZIndex}
-          optionType={props.optionType}
-          renderSelectInputOptionValuesByField={
-            props.renderSelectInputOptionValuesByField
-          }
-          lowerBusinessUnitsLimit={props.lowerBusinessUnitsLimit}
-          upperBusinessUnitsLimit={props.upperBusinessUnitsLimit}
-          {...filterDataAttributes(props)}
-          {...filterAriaAttributes(props)}
-          where={props.where}
-          placeholder={props.placeholder}
-        />
-      </Spacings.Stack>
-    </Constraints.Horizontal>
-  );
-};
-
-BusinessUnitSelectField.displayName = 'BusinessUnitSelectField';
-BusinessUnitSelectField.defaultProps = {
-  lowerBusinessUnitsLimit: LOWER_BUSINESS_UNITS_LIMIT,
-  upperBusinessUnitsLimit: UPPER_BUSINESS_UNITS_LIMIT,
-  mappedValueField: 'id',
-};
-BusinessUnitSelectField.propTypes = {
-  id: PropTypes.string.isRequired,
-  name: PropTypes.string.isRequired,
-  title: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-  description: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-  hint: requiredIf(
-    PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-    (props) => props.hintIcon
-  ),
-  hintIcon: PropTypes.node,
-  horizontalConstraint: PropTypes.oneOf([
-    3,
-    4,
-    5,
-    6,
-    7,
-    8,
-    9,
-    10,
-    11,
-    12,
-    13,
-    14,
-    15,
-    16,
-    'scale',
-    'auto',
-  ]),
-  isBold: PropTypes.bool,
-  isRequired: PropTypes.bool,
-  isDisabled: PropTypes.bool,
-  isClearable: PropTypes.bool,
-  isSearchable: PropTypes.bool,
-  isReadOnly: PropTypes.bool,
-  // value => business unit or list of business units currently available on the input (might have changes as well)
-  value: PropTypes.oneOfType([
-    PropTypes.shape({
-      label: PropTypes.string.isRequired,
-      value: PropTypes.string.isRequired,
-    }),
-    PropTypes.string,
-  ]),
-  // name of the field to which the value props should be mapped
-  // i.e. {label: some-label, value: key} OR {label: some-label, value: id}
-  renderSelectInputOptionValuesByField: PropTypes.oneOf(['key', 'id']),
-  optionType: PropTypes.oneOf(Object.values(SELECT_DROPDOWN_OPTION_TYPES)),
-  touched: PropTypes.oneOfType([
-    PropTypes.bool,
-    PropTypes.arrayOf(PropTypes.bool),
-  ]),
-  onChange: PropTypes.func.isRequired,
-  onBlur: PropTypes.func,
-  hasError: PropTypes.bool,
-  errors: PropTypes.object,
-  renderError: PropTypes.func,
-  hasWarning: PropTypes.bool,
-  backspaceRemovesValue: PropTypes.bool,
-  maxMenuHeight: PropTypes.number,
-  menuPortalTarget: PropTypes.instanceOf(HTMLElement),
-  menuPortalZIndex: PropTypes.number,
-  lowerBusinessUnitsLimit: PropTypes.number,
-  upperBusinessUnitsLimit: PropTypes.number,
-  where: PropTypes.string,
-  placeholder: PropTypes.string,
-};
-
-export default BusinessUnitSelectField;

package/src/components/business-unit-select-field/index.js

@@ -1 +0,0 @@
-export { default } from './business-unit-select-field';

package/src/components/business-unit-select-input/business-unit-select-input.jsx

@@ -1,160 +0,0 @@
-import { useMemo } from 'react';
-import PropTypes from 'prop-types';
-import {
-  CustomSelectInputOption,
-  SELECT_DROPDOWN_OPTION_TYPES,
-} from '@commercetools-uikit/select-utils';
-import { SelectInput } from '@commercetools-frontend/ui-kit';
-import {
-  filterDataAttributes,
-  filterAriaAttributes,
-} from '@commercetools-uikit/utils';
-import { CenteredLoadingSpinner } from '../../internal-index';
-import BusinessUnitAsyncSelectInput from './components/business-unit-async-select-input';
-import BusinessUnitBasicSelectInput from './components/business-unit-basic-select-input';
-import BusinessUnitSearchSelectInput from './components/business-unit-search-select-input';
-import {
-  LOWER_BUSINESS_UNITS_LIMIT,
-  UPPER_BUSINESS_UNITS_LIMIT,
-} from './constants';
-import { useTotalNumberOfBusinessUnitsFetcher } from './hooks';
-
-const BusinessUnitSelectInput = (props) => {
-  const totalNumberOfBusinessUnitsFetcher =
-    useTotalNumberOfBusinessUnitsFetcher();
-  const components = useMemo(() => {
-    return {
-      // eslint-disable-next-line react/display-name
-      Option: (optionInnerProps) => {
-        if (optionInnerProps.isDisabled) {
-          return <SelectInput.Option {...optionInnerProps} />;
-        }
-
-        return (
-          <CustomSelectInputOption
-            optionType={props.optionType}
-            optionInnerProps={optionInnerProps}
-          />
-        );
-      },
-    };
-  }, [props.optionType]);
-  if (totalNumberOfBusinessUnitsFetcher.isLoading)
-    return <CenteredLoadingSpinner />;
-
-  const CustomSelectInput = do {
-    if (
-      totalNumberOfBusinessUnitsFetcher.total <= props.lowerBusinessUnitsLimit
-    ) {
-      BusinessUnitBasicSelectInput;
-    } else if (
-      totalNumberOfBusinessUnitsFetcher.total <= props.upperBusinessUnitsLimit
-    ) {
-      BusinessUnitAsyncSelectInput;
-    } else {
-      BusinessUnitSearchSelectInput;
-    }
-  };
-
-  return (
-    <CustomSelectInput
-      id={props.id}
-      name={props.name}
-      components={components}
-      horizontalConstraint={props.horizontalConstraint}
-      value={props.value}
-      onChange={props.onChange}
-      onBlur={props.onBlur}
-      isDisabled={props.isDisabled}
-      isReadOnly={props.isReadOnly}
-      isClearable={props.isClearable}
-      isSearchable={props.isSearchable}
-      backspaceRemovesValue={props.backspaceRemovesValue}
-      hasError={props.hasError}
-      hasWarning={props.hasWarning}
-      errors={props.errors}
-      renderError={props.renderError}
-      touched={props.touched}
-      title={props.title}
-      maxMenuHeight={props.maxMenuHeight}
-      menuPortalTarget={props.menuPortalTarget}
-      menuPortalZIndex={props.menuPortalZIndex}
-      renderSelectInputOptionValuesByField={
-        props.renderSelectInputOptionValuesByField
-      }
-      lowerBusinessUnitsLimit={props.lowerBusinessUnitsLimit}
-      upperBusinessUnitsLimit={props.upperBusinessUnitsLimit}
-      where={props.where}
-      placeholder={props.placeholder}
-      {...filterDataAttributes(props)}
-      {...filterAriaAttributes(props)}
-    />
-  );
-};
-
-BusinessUnitSelectInput.displayName = 'BusinessUnitSelectInput';
-BusinessUnitSelectInput.defaultProps = {
-  lowerBusinessUnitsLimit: LOWER_BUSINESS_UNITS_LIMIT,
-  upperBusinessUnitsLimit: UPPER_BUSINESS_UNITS_LIMIT,
-  renderSelectInputOptionValuesByField: 'id',
-  optionType: 'double-property',
-};
-BusinessUnitSelectInput.propTypes = {
-  id: PropTypes.string.isRequired,
-  name: PropTypes.string.isRequired,
-  horizontalConstraint: PropTypes.oneOf([
-    3,
-    4,
-    5,
-    6,
-    7,
-    8,
-    9,
-    10,
-    11,
-    12,
-    13,
-    14,
-    15,
-    16,
-    'scale',
-    'auto',
-  ]),
-  isDisabled: PropTypes.bool,
-  isClearable: PropTypes.bool,
-  isSearchable: PropTypes.bool,
-  isReadOnly: PropTypes.bool,
-  // value => business unit or list of business units currently available on the input (might have changes as well)
-  value: PropTypes.oneOfType([
-    PropTypes.shape({
-      label: PropTypes.string.isRequired,
-      value: PropTypes.string.isRequired,
-    }),
-    PropTypes.string,
-  ]),
-  // name of the field to which the value props should be mapped
-  // i.e. {label: some-label, value: key} OR {label: some-label, value: id}
-  renderSelectInputOptionValuesByField: PropTypes.oneOf(['key', 'id']),
-  optionType: PropTypes.oneOf(Object.values(SELECT_DROPDOWN_OPTION_TYPES)),
-  touched: PropTypes.oneOfType([
-    PropTypes.bool,
-    PropTypes.arrayOf(PropTypes.bool),
-  ]),
-  onBlur: PropTypes.func,
-  onChange: PropTypes.func.isRequired,
-  hasError: PropTypes.bool,
-  errors: PropTypes.object,
-  renderError: PropTypes.func,
-  hasWarning: PropTypes.bool,
-  backspaceRemovesValue: PropTypes.bool,
-  maxMenuHeight: PropTypes.number,
-  menuPortalTarget: PropTypes.instanceOf(HTMLElement),
-  menuPortalZIndex: PropTypes.number,
-  lowerBusinessUnitsLimit: PropTypes.number,
-  upperBusinessUnitsLimit: PropTypes.number,
-  where: PropTypes.string,
-  placeholder: PropTypes.string,
-  title: PropTypes.node,
-};
-
-export default BusinessUnitSelectInput;