@commercetools-frontend/experimental-components 0.0.2 → 0.1.0

package/src/components/store-select-field/store-select-field.jsx

@@ -1,145 +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_STORES_LIMIT,
-  UPPER_STORES_LIMIT,
-} from '../store-select-input/constants';
-import StoreSelectInput from '../store-select-input';
-
-const StoreSelectField = (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}
-        />
-        <StoreSelectInput
-          projectKey={props.projectKey}
-          id={props.id}
-          name={props.name}
-          horizontalConstraint={props.horizontalConstraint}
-          isMulti={props.isMulti}
-          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}
-          maxMenuHeight={props.maxMenuHeight}
-          menuPortalTarget={props.menuPortalTarget}
-          menuPortalZIndex={props.menuPortalZIndex}
-          optionType={props.optionType}
-          renderSelectInputOptionValuesByField={
-            props.renderSelectInputOptionValuesByField
-          }
-          lowerStoresLimit={props.lowerStoresLimit}
-          upperStoresLimit={props.upperStoresLimit}
-          allAccessibleStoreKeysThroughDataFencePermissions={
-            props.allAccessibleStoreKeysThroughDataFencePermissions
-          }
-          {...filterDataAttributes(props)}
-          {...filterAriaAttributes(props)}
-        />
-      </Spacings.Stack>
-    </Constraints.Horizontal>
-  );
-};
-
-StoreSelectField.displayName = 'StoreSelectField';
-StoreSelectField.defaultProps = {
-  lowerStoresLimit: LOWER_STORES_LIMIT,
-  upperStoresLimit: UPPER_STORES_LIMIT,
-  mappedValueField: 'id',
-};
-StoreSelectField.propTypes = {
-  projectKey: PropTypes.string.isRequired,
-  id: PropTypes.string.isRequired,
-  name: PropTypes.string.isRequired,
-  title: PropTypes.string,
-  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,
-  isMulti: PropTypes.bool,
-  isRequired: PropTypes.bool,
-  isDisabled: PropTypes.bool,
-  isClearable: PropTypes.bool,
-  isSearchable: PropTypes.bool,
-  isReadOnly: PropTypes.bool,
-  // value => store or list of stores currently available on the input (might have changes as well)
-  value: PropTypes.oneOfType([
-    PropTypes.arrayOf(PropTypes.string.isRequired),
-    PropTypes.arrayOf(PropTypes.object.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,
-  lowerStoresLimit: PropTypes.number,
-  upperStoresLimit: PropTypes.number,
-  // list of store keys that user has access through data fence permissions
-  allAccessibleStoreKeysThroughDataFencePermissions: PropTypes.arrayOf(
-    PropTypes.string
-  ),
-};
-
-export default StoreSelectField;

package/src/components/store-select-input/components/stores-async-select-input/index.js

@@ -1 +0,0 @@
-export { default } from './stores-async-select-input';

package/src/components/store-select-input/components/stores-async-select-input/stores-async-select-input.jsx

@@ -1,214 +0,0 @@
-import { useMemo } from 'react';
-import PropTypes from 'prop-types';
-import { useIntl } from 'react-intl';
-import { useApplicationContext } from '@commercetools-frontend/application-shell-connectors';
-import { AsyncSelectInput, FieldErrors } from '@commercetools-frontend/ui-kit';
-import {
-  CenteredLoadingSpinner,
-  useStoresListFetcher,
-} from '../../../../internal-index';
-
-import {
-  filterDataAttributes,
-  filterAriaAttributes,
-} from '@commercetools-uikit/utils';
-import { mapStoresToOptions, getFirst60Options } from '../../utils';
-import messages from '../../messages';
-
-// check wether there are any errors
-const hasErrors = (errors) => errors && Object.values(errors).some(Boolean);
-
-// transform value to options => Array<string> => Array<{label, value}>
-const getValueFromOptions = ({
-  currentlySelectedStores,
-  mappedStoresListOptions,
-  isMulti,
-}) => {
-  // handle async-select-field value transformation
-  if (isMulti) {
-    return mappedStoresListOptions.filter((store) =>
-      currentlySelectedStores?.includes(store.value)
-    );
-  }
-
-  // return value as undefined if no options is yet selected. It is needed for cases where users sets initial values as empty string
-  if (!currentlySelectedStores) {
-    return undefined;
-  }
-
-  // in case it is not multiselect, then a single valued async-select-input is being requested and the value should have proper format
-  return mappedStoresListOptions.find(
-    (store) => currentlySelectedStores === store.value
-  );
-};
-
-const emptyStoreOption = (intl) => [
-  {
-    label: intl.formatMessage(messages.asyncSelectDropdownTypeAheadPrompt),
-    value: undefined,
-    isDisabled: true,
-  },
-];
-
-const StoresAsyncSelectInput = (props) => {
-  const intl = useIntl();
-  const { dataLocale } = useApplicationContext((applicationContext) => ({
-    dataLocale: applicationContext.dataLocale,
-  }));
-  const keysOfStores = props.allAccessibleStoreKeysThroughDataFencePermissions;
-  const storesListFetcher = useStoresListFetcher({
-    limit: 500,
-    offset: 0,
-    sort: 'createdAt asc',
-    excludeExtendedStoresList: true,
-    excludeProductSelections: !props.shouldFetchProductSelections,
-    stores: keysOfStores?.length && keysOfStores,
-    projectKey: props.projectKey,
-  });
-  const hasError =
-    AsyncSelectInput.isTouched(props.touched) && hasErrors(props.errors);
-
-  const mappedStoresListOptions = useMemo(
-    () =>
-      (storesListFetcher.stores?.results || []).map((store) =>
-        mapStoresToOptions({
-          store,
-          dataLocale,
-          renderSelectInputOptionValuesByField:
-            props.renderSelectInputOptionValuesByField,
-        })
-      ),
-
-    [
-      dataLocale,
-      storesListFetcher.stores,
-      props.renderSelectInputOptionValuesByField,
-    ]
-  );
-
-  const handleLoadOptions = async (searchTerm) => {
-    if (!searchTerm)
-      return [
-        { options: getFirst60Options(mappedStoresListOptions, props.value) },
-        { options: emptyStoreOption(intl) },
-      ];
-
-    const filteredOptions = mappedStoresListOptions.filter(
-      (storeOption) =>
-        storeOption.label.toLowerCase().includes(searchTerm.toLowerCase()) ||
-        (storeOption.key &&
-          storeOption.key.toLowerCase().includes(searchTerm.toLowerCase()))
-    );
-    return [
-      { options: getFirst60Options(filteredOptions, props.value) },
-      { options: emptyStoreOption(intl) },
-    ];
-  };
-
-  if (storesListFetcher.isLoading) return <CenteredLoadingSpinner />;
-
-  return (
-    <>
-      <AsyncSelectInput
-        id={props.id}
-        name={props.name}
-        placeholder={intl.formatMessage(messages.basicSelectInputPlaceholder)}
-        horizontalConstraint={props.horizontalConstraint}
-        loadOptions={handleLoadOptions}
-        defaultOptions
-        isMulti={props.isMulti}
-        showOptionGroupDivider
-        value={getValueFromOptions({
-          currentlySelectedStores: props.value,
-          mappedStoresListOptions,
-          isMulti: props.isMulti,
-        })}
-        onChange={props.onChange}
-        onBlur={props.onBlur}
-        isDisabled={props.isDisabled || storesListFetcher.isLoading}
-        isReadOnly={props.isReadOnly}
-        isClearable={props.isClearable}
-        isSearchable={props.isSearchable}
-        backspaceRemovesValue={props.backspaceRemovesValue}
-        hasError={hasError}
-        hasWarning={props.hasWarning}
-        errors={props.errors}
-        renderError={props.renderError}
-        touched={props.touched}
-        maxMenuHeight={props.maxMenuHeight}
-        menuPortalTarget={props.menuPortalTarget}
-        menuPortalZIndex={props.menuPortalZIndex}
-        components={props.components}
-        {...filterDataAttributes(props)}
-        {...filterAriaAttributes(props)}
-      />
-      <FieldErrors
-        errors={props.errors}
-        isVisible={hasError}
-        renderError={props.renderError}
-      />
-    </>
-  );
-};
-StoresAsyncSelectInput.displayName = 'StoresAsyncSelectInput';
-StoresAsyncSelectInput.defaultProps = {
-  shouldFetchProductSelections: false,
-};
-StoresAsyncSelectInput.propTypes = {
-  projectKey: PropTypes.string.isRequired,
-  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',
-  ]),
-  isMulti: PropTypes.bool,
-  isDisabled: PropTypes.bool,
-  isClearable: PropTypes.bool,
-  isSearchable: PropTypes.bool,
-  isReadOnly: PropTypes.bool,
-  // value => store or list of stores currently available on the input (might have changes as well)
-  value: PropTypes.oneOfType([
-    PropTypes.arrayOf(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']),
-  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,
-  components: PropTypes.objectOf(PropTypes.func),
-  // list of store keys that user has access through data fence permissions
-  allAccessibleStoreKeysThroughDataFencePermissions: PropTypes.arrayOf(
-    PropTypes.string
-  ),
-  shouldFetchProductSelections: PropTypes.bool,
-};
-
-export default StoresAsyncSelectInput;

package/src/components/store-select-input/components/stores-basic-select-input/index.js

@@ -1 +0,0 @@
-export { default } from './stores-basic-select-input';

package/src/components/store-select-input/components/stores-basic-select-input/stores-basic-select-input.jsx

@@ -1,172 +0,0 @@
-import { useMemo } from 'react';
-import { useIntl } from 'react-intl';
-import PropTypes from 'prop-types';
-import { useApplicationContext } from '@commercetools-frontend/application-shell-connectors';
-import { SelectInput, FieldErrors } from '@commercetools-frontend/ui-kit';
-import {
-  CenteredLoadingSpinner,
-  useStoresListFetcher,
-} from '../../../../internal-index';
-
-import {
-  filterDataAttributes,
-  filterAriaAttributes,
-} from '@commercetools-uikit/utils';
-import { mapStoresToOptions } from '../../utils';
-import messages from '../../messages';
-
-// check wether there are any errors
-const hasErrors = (errors) => errors && Object.values(errors).some(Boolean);
-
-const StoresBasicSelectInput = (props) => {
-  const intl = useIntl();
-  const { dataLocale } = useApplicationContext((applicationContext) => ({
-    dataLocale: applicationContext.dataLocale,
-  }));
-  const keysOfStores = props.allAccessibleStoreKeysThroughDataFencePermissions;
-  const storesListFetcher = useStoresListFetcher({
-    limit: 60,
-    offset: 0,
-    sort: 'createdAt asc',
-    excludeExtendedStoresList: true,
-    excludeProductSelections: !props.shouldFetchProductSelections,
-    stores: keysOfStores?.length && keysOfStores,
-    projectKey: props.projectKey,
-  });
-  const hasError =
-    SelectInput.isTouched(props.touched) &&
-    (hasErrors(props.errors) || props.hasError);
-
-  const mappedStoresListOptions = useMemo(
-    () =>
-      (storesListFetcher.stores?.results || []).map((store) =>
-        mapStoresToOptions({
-          store,
-          dataLocale,
-          renderSelectInputOptionValuesByField:
-            props.renderSelectInputOptionValuesByField,
-        })
-      ),
-
-    [
-      dataLocale,
-      storesListFetcher.stores,
-      props.renderSelectInputOptionValuesByField,
-    ]
-  );
-
-  const handleChange = (event) => {
-    const value = event.target.value?.value ?? event.target.value;
-    const currentStore = mappedStoresListOptions.find(
-      (store) => store.value === value
-    );
-
-    // We need complete store info including productSelections
-    if (!props.shouldFetchProductSelections) {
-      props.onChange(event);
-    } else {
-      props.onChange({ target: { value: currentStore } });
-    }
-  };
-
-  if (storesListFetcher.isLoading) return <CenteredLoadingSpinner />;
-
-  return (
-    <>
-      <SelectInput
-        id={props.id}
-        name={props.name}
-        placeholder={intl.formatMessage(messages.basicSelectInputPlaceholder)}
-        horizontalConstraint={props.horizontalConstraint}
-        options={mappedStoresListOptions}
-        isMulti={props.isMulti}
-        value={props.value}
-        onChange={handleChange}
-        onBlur={props.onBlur}
-        isDisabled={props.isDisabled || storesListFetcher.isLoading}
-        isReadOnly={props.isReadOnly}
-        isClearable={props.isClearable}
-        isSearchable={props.isSearchable}
-        backspaceRemovesValue={props.backspaceRemovesValue}
-        hasError={hasError}
-        hasWarning={props.hasWarning}
-        errors={props.errors}
-        renderError={props.renderError}
-        touched={props.touched}
-        maxMenuHeight={props.maxMenuHeight}
-        menuPortalTarget={props.menuPortalTarget}
-        menuPortalZIndex={props.menuPortalZIndex}
-        components={props.components}
-        {...filterDataAttributes(props)}
-        {...filterAriaAttributes(props)}
-      />
-      <FieldErrors
-        errors={props.errors}
-        isVisible={hasError}
-        renderError={props.renderError}
-      />
-    </>
-  );
-};
-StoresBasicSelectInput.displayName = 'StoresBasicSelectInput';
-StoresBasicSelectInput.defaultProps = {
-  shouldFetchProductSelections: false,
-};
-StoresBasicSelectInput.propTypes = {
-  projectKey: PropTypes.string.isRequired,
-  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',
-  ]),
-  isMulti: PropTypes.bool,
-  isDisabled: PropTypes.bool,
-  isClearable: PropTypes.bool,
-  isSearchable: PropTypes.bool,
-  isReadOnly: PropTypes.bool,
-  // value => store or list of stores currently available on the input (might have changes as well)
-  value: PropTypes.oneOfType([
-    PropTypes.arrayOf(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']),
-  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,
-  components: PropTypes.objectOf(PropTypes.func),
-  // list of store keys that user has access through data fence permissions
-  allAccessibleStoreKeysThroughDataFencePermissions: PropTypes.arrayOf(
-    PropTypes.string
-  ),
-  shouldFetchProductSelections: PropTypes.bool,
-};
-
-export default StoresBasicSelectInput;

package/src/components/store-select-input/components/stores-search-select-input/fetch-stores-by-where-predicate.ctp.graphql

@@ -1,26 +0,0 @@
-query FetchStoresByWherePredicate(
-  $where: String!
-  $skipFetchingStores: Boolean!
-  $excludeProductSelections: Boolean!
-) {
-  storesByWherePredicate: stores(where: $where) @skip(if: $skipFetchingStores) {
-    results {
-      id
-      key
-      nameAllLocales {
-        locale
-        value
-      }
-      productSelections @skip(if: $excludeProductSelections) {
-        active
-        productSelection {
-          id
-          nameAllLocales {
-            locale
-            value
-          }
-        }
-      }
-    }
-  }
-}

package/src/components/store-select-input/components/stores-search-select-input/index.js

@@ -1,2 +0,0 @@
-export { default } from './stores-search-select-input';
-export { handlers as useStoresByWherePredicateFetcherHandlers } from './mocks';

package/src/components/store-select-input/components/stores-search-select-input/mocks/handlers.js

@@ -1,16 +0,0 @@
-import { graphql } from 'msw';
-
-const handlers = {
-  FetchStoresByWherePredicate: {
-    all: (total) =>
-      graphql.query('FetchStoresByWherePredicate', (req, res, ctx) => {
-        return res(
-          ctx.data({
-            storesByWherePredicate: { total },
-          })
-        );
-      }),
-  },
-};
-
-export default handlers;

package/src/components/store-select-input/components/stores-search-select-input/mocks/index.js

@@ -1,3 +0,0 @@
-import handlers from './handlers';
-
-export { handlers };