@commercetools-frontend/experimental-components 0.0.2 → 0.0.3

package/src/components/business-unit-select-input/hooks/use-business-units-by-field-fetcher/index.js

@@ -1,2 +0,0 @@
-export { default } from './use-business-units-by-field-fetcher';
-export { handlers as useBusinessUnitsByFieldFetcherHandlers } from './mocks';

package/src/components/business-unit-select-input/hooks/use-business-units-by-field-fetcher/mocks/handlers.js

@@ -1,17 +0,0 @@
-import { graphql } from 'msw';
-
-const handlers = {
-  FetchBusinessUnitsByField: {
-    all: (businessUnits) =>
-      graphql.query('FetchBusinessUnitsByField', (req, res, ctx) => {
-        return res(
-          ctx.data({
-            businessUnitsByField: businessUnits,
-            isLoading: false,
-          })
-        );
-      }),
-  },
-};
-
-export default handlers;

package/src/components/business-unit-select-input/hooks/use-business-units-by-field-fetcher/mocks/index.js

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

package/src/components/business-unit-select-input/hooks/use-business-units-by-field-fetcher/use-business-units-by-field-fetcher.js

@@ -1,35 +0,0 @@
-import { useQuery } from '@apollo/client/react';
-import { GRAPHQL_TARGETS } from '@commercetools-frontend/constants';
-import { FetchBusinessUnitsByField } from './fetch-business-units-by-field.ctp.graphql';
-
-const createQueryVariables = (businessUnits, predicateField) => ({
-  where: `${predicateField} in (${businessUnits
-    .map((businessUnit) => `"${businessUnit}"`)
-    .join(', ')})`,
-  limit: 500,
-});
-
-const emptyBusinessUnitsQueryResult = {
-  results: [],
-};
-
-const useBusinessUnitsByFieldFetcher = (businessUnits, predicateField) => {
-  const businessUnitsList = Array.isArray(businessUnits)
-    ? businessUnits
-    : [businessUnits];
-  const businessUnitsQuery = useQuery(FetchBusinessUnitsByField, {
-    context: {
-      target: GRAPHQL_TARGETS.COMMERCETOOLS_PLATFORM,
-    },
-    variables: createQueryVariables(businessUnitsList, predicateField),
-    skip: businessUnitsList.length === 0,
-  });
-
-  return {
-    businessUnits:
-      businessUnitsQuery.data?.businessUnitsByField ||
-      emptyBusinessUnitsQueryResult,
-    isLoading: businessUnitsQuery.loading,
-  };
-};
-export default useBusinessUnitsByFieldFetcher;

package/src/components/business-unit-select-input/hooks/use-business-units-list-fetcher/fetch-business-units-list.ctp.graphql

@@ -1,21 +0,0 @@
-query FetchBusinessUnitsListQuery(
-  $limit: Int
-  $offset: Int
-  $sort: [String!]
-  $where: String
-) {
-  businessUnits(limit: $limit, offset: $offset, sort: $sort, where: $where) {
-    total
-    count
-    offset
-    results {
-      ...BusinessUnitBasicInfo
-    }
-  }
-}
-
-fragment BusinessUnitBasicInfo on BusinessUnit {
-  id
-  key
-  name
-}

package/src/components/business-unit-select-input/hooks/use-business-units-list-fetcher/index.js

@@ -1,2 +0,0 @@
-export { default } from './use-business-units-list-fetcher';
-export { handlers as useBusinessUnitsListFetcherMockHandler } from './mocks';

package/src/components/business-unit-select-input/hooks/use-business-units-list-fetcher/mocks/handlers.js

@@ -1,17 +0,0 @@
-import { graphql } from 'msw';
-
-const handlers = {
-  BusinessUnits: {
-    all: (businessUnits) =>
-      graphql.query('FetchBusinessUnitsListQuery', (req, res, ctx) =>
-        res(
-          ctx.data({
-            businessUnits,
-            isLoading: false,
-          })
-        )
-      ),
-  },
-};
-
-export default handlers;

package/src/components/business-unit-select-input/hooks/use-business-units-list-fetcher/mocks/index.js

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

package/src/components/business-unit-select-input/hooks/use-business-units-list-fetcher/use-business-units-list-fetcher.js

@@ -1,50 +0,0 @@
-import { useQuery } from '@apollo/client/react';
-import { GRAPHQL_TARGETS } from '@commercetools-frontend/constants';
-import { FetchBusinessUnitsListQuery } from './fetch-business-units-list.ctp.graphql';
-
-export const createQueryVariables = (ownProps) => ({
-  limit: ownProps.limit,
-  offset: ownProps.offset,
-  sort: ownProps.sort,
-  ...(Boolean(ownProps.businessUnits) && {
-    where: `key in (${ownProps.businessUnits
-      .map((businessUnit) => `"${businessUnit}"`)
-      .join(', ')})`,
-  }),
-  businessUnits: ownProps.businessUnits,
-  where: ownProps.where,
-});
-
-const emptyBusinessUnits = {
-  total: 0,
-  count: 0,
-  offset: 0,
-  results: [],
-};
-
-const useBusinessUnitsListFetcher = (props) => {
-  const queryVariables = createQueryVariables({
-    limit: props.limit,
-    offset: props.offset,
-    sort: props.sort,
-    businessUnits: props.businessUnits,
-    where: props.where,
-  });
-
-  const { data, refetch, loading } = useQuery(FetchBusinessUnitsListQuery, {
-    variables: queryVariables,
-    context: {
-      target: GRAPHQL_TARGETS.COMMERCETOOLS_PLATFORM,
-    },
-    fetchPolicy: 'network-only',
-    onError: (graphqlErrorResponse) => props.onError?.(graphqlErrorResponse),
-  });
-
-  return {
-    isLoading: loading,
-    businessUnits: data?.businessUnits || emptyBusinessUnits,
-    refetch,
-  };
-};
-
-export default useBusinessUnitsListFetcher;

package/src/components/business-unit-select-input/hooks/use-total-number-of-business-units-fetcher/index.js

@@ -1,2 +0,0 @@
-export { default } from './use-total-number-of-business-units-fetcher';
-export { handlers as useTotalNumberOfBusinessUnitsFetcherHandlers } from './mocks';

package/src/components/business-unit-select-input/hooks/use-total-number-of-business-units-fetcher/mocks/handlers.js

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

package/src/components/business-unit-select-input/hooks/use-total-number-of-business-units-fetcher/mocks/index.js

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

package/src/components/business-unit-select-input/hooks/use-total-number-of-business-units-fetcher/total-number-of-business-units.ctp.graphql

@@ -1,5 +0,0 @@
-query TotalNumberOfBusinessUnits {
-  totalNumberOfBusinessUnits: businessUnits {
-    total
-  }
-}

package/src/components/business-unit-select-input/hooks/use-total-number-of-business-units-fetcher/use-total-number-of-business-units-fetcher.js

@@ -1,20 +0,0 @@
-import { useQuery } from '@apollo/client/react';
-import { GRAPHQL_TARGETS } from '@commercetools-frontend/constants';
-import { TotalNumberOfBusinessUnits } from './total-number-of-business-units.ctp.graphql';
-
-const useTotalNumberOfBusinessUnitsFetcher = () => {
-  const totalNumberOfBusinessUnitsQuery = useQuery(TotalNumberOfBusinessUnits, {
-    context: {
-      target: GRAPHQL_TARGETS.COMMERCETOOLS_PLATFORM,
-    },
-    fetchPolicy: 'network-only',
-  });
-
-  return {
-    total:
-      totalNumberOfBusinessUnitsQuery.data?.totalNumberOfBusinessUnits.total,
-    isLoading: totalNumberOfBusinessUnitsQuery.loading,
-  };
-};
-
-export default useTotalNumberOfBusinessUnitsFetcher;

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

@@ -1,5 +0,0 @@
-export { default } from './business-unit-select-input';
-export {
-  useBusinessUnitsListFetcherMockHandler,
-  useTotalNumberOfBusinessUnitsFetcherHandlers,
-} from './hooks';

package/src/components/business-unit-select-input/messages.js

@@ -1,30 +0,0 @@
-import { defineMessages } from 'react-intl';
-
-export default defineMessages({
-  asyncSelectInputPlaceholder: {
-    id: 'Shared.BusinessUnitSelectInput.asyncSelectInputPlaceholder',
-    description: 'The placeholder shown for async select input',
-    defaultMessage: 'Select or type a business unit key',
-  },
-  basicSelectInputPlaceholder: {
-    id: 'Shared.BusinessUnitSelectInput.basicSelectInputPlaceholder',
-    description: 'The placeholder shown for basic select input',
-    defaultMessage: 'Select or type a business unit key',
-  },
-  searchSelectInputPlaceholder: {
-    id: 'Shared.BusinessUnitSelectInput.searchSelectInputPlaceholder',
-    description: 'The placeholder shown for search select input',
-    defaultMessage: 'Type an exact business unit key',
-  },
-  searchSelectInputLoadingMessage: {
-    id: 'Shared.BusinessUnitSelectInput.searchSelectInputLoadingMessage',
-    description: 'The loading message shown for search select input',
-    defaultMessage: 'Loading exact matches',
-  },
-  searchSelectInputNoOptionsFoundMessage: {
-    id: 'Shared.BusinessUnitSelectInput.searchSelectInputNoOptionsFoundMessage',
-    description:
-      'The message shown in search select input when matches are found',
-    defaultMessage: 'No matches found for your search term',
-  },
-});

package/src/components/business-unit-select-input/utils.js

@@ -1,27 +0,0 @@
-import { LOWER_BUSINESS_UNITS_LIMIT } from './constants';
-
-export const mapBusinessUnitsToOptions = ({
-  businessUnit,
-  renderSelectInputOptionValuesByField,
-}) => {
-  return {
-    label: businessUnit.name || `${businessUnit.key} (key)`,
-    name: businessUnit.name || `${businessUnit.key} (key)`,
-    value:
-      renderSelectInputOptionValuesByField === 'key'
-        ? businessUnit.key
-        : businessUnit.id,
-    key: businessUnit.key,
-  };
-};
-
-export const getFirst60Options = (businessUnitOptions, currentValues) => {
-  const currentValuesLength = Array.isArray(currentValues)
-    ? currentValues.length
-    : 1;
-
-  return businessUnitOptions.slice(
-    0,
-    LOWER_BUSINESS_UNITS_LIMIT + currentValuesLength
-  );
-};

package/src/components/buttons/button/button.jsx

@@ -1,42 +0,0 @@
-import PropTypes from 'prop-types';
-import classnames from 'classnames';
-import { filterDataAttributes } from '../../../internal-index';
-import styles from './button.module.css';
-
-const Button = (props) => {
-  const { className, onClick, isDisabled, children } = props;
-
-  // Pass only `data-*` props
-  const dataProps = filterDataAttributes(props);
-
-  return (
-    <button
-      onClick={isDisabled ? null : onClick}
-      type={props.type}
-      className={classnames(
-        styles.button,
-        isDisabled ? styles.disabled : null,
-        className
-      )}
-      disabled={isDisabled}
-      aria-label={props['aria-label']}
-      {...dataProps}
-    >
-      {children}
-    </button>
-  );
-};
-Button.displayName = 'Button';
-Button.propTypes = {
-  className: PropTypes.string,
-  type: PropTypes.string,
-  onClick: PropTypes.func,
-  isDisabled: PropTypes.bool,
-  children: PropTypes.node.isRequired,
-  'aria-label': PropTypes.string,
-};
-Button.defaultProps = {
-  type: 'button',
-};
-
-export default Button;

package/src/components/buttons/button/button.module.css

@@ -1,214 +0,0 @@
-/* Generic button */
-
-.button {
-  background: var(--color-neutral);
-  border: none;
-  border-radius: 6px;
-  color: var(--color-solid);
-  cursor: pointer;
-  display: inline-block;
-  font-family: 'Open Sans', sans-serif;
-  font-size: 1rem;
-  padding: 7px 15px;
-  transition: background-color var(--transition-linear-80ms);
-  vertical-align: middle;
-  min-height: 32px;
-}
-
-/* Specific types of buttons */
-
-.cancel {
-  composes: button;
-  background: var(--color-surface);
-  border: 1px solid var(--color-neutral);
-}
-
-.confirm {
-  composes: button;
-  background: var(--color-primary);
-  color: var(--color-surface);
-}
-
-.save {
-  composes: confirm;
-  color: var(--color-surface) !important;
-}
-
-.add {
-  composes: button;
-  background: var(--color-surface);
-  border: 1px solid var(--color-neutral);
-  color: var(--color-solid);
-  padding: 5.5px 15px 5.5px 10px;
-}
-
-.add-url {
-  composes: add;
-}
-
-.icon-add {
-  color: var(--color-neutral-60);
-  float: left;
-  font-size: 1rem;
-  margin: 3px 10px 0 0;
-}
-
-.icon-chain {
-  color: var(--color-neutral-60);
-  float: left;
-  font-size: 1.4rem;
-  margin: 0 10px 0 0;
-}
-
-.add:hover .icon-add,
-.add-url:hover .icon-chain {
-  color: var(--color-surface);
-}
-
-/* Base of switch buttons */
-
-.switch {
-  background: var(--color-surface);
-  border: 1px var(--color-neutral) solid;
-  color: var(--color-solid);
-  font-weight: 100;
-  position: relative;
-}
-
-.switch .icon {
-  color: var(--color-neutral-60);
-}
-
-.switch:disabled {
-  color: var(--color-neutral-60);
-  border-color: var(--color-neutral);
-}
-
-.switch:hover {
-  color: var(--color-surface);
-  border-color: var(--color-info);
-  background: var(--color-info);
-}
-
-.switch:hover .icon {
-  color: var(--color-surface);
-}
-
-.switch--active {
-  composes: switch;
-}
-
-.switch:disabled {
-  background: transparent;
-  color: var(--color-neutral-60);
-}
-
-.switch:disabled .icon {
-  color: var(--color-neutral-60);
-}
-
-.switch:disabled,
-.switch--active:disabled {
-  opacity: 1; /* exception for disabled switch button */
-  user-select: none;
-  cursor: default;
-}
-
-.switch--active:disabled .icon,
-.switch--active .icon {
-  color: var(--color-info);
-}
-
-.switch--active:disabled {
-  color: var(--color-info);
-  border-color: var(--color-info);
-}
-
-/* Switch type squared */
-
-.switch-squared {
-  composes: button switch;
-  padding: 4.5px 15px 4.5px 40px;
-}
-
-.switch-squared--active {
-  composes: switch-squared switch--active;
-}
-
-/* Switch type rounded */
-
-/* When the button has no text but icon */
-
-.switch-rounded {
-  composes: switch;
-  padding: 0;
-  border-width: 1px;
-  width: 36px;
-  height: 36px;
-  border-radius: 36px;
-}
-
-.switch-rounded--active {
-  composes: switch-rounded switch--active;
-}
-
-.switch-rounded .switch-label {
-  display: none;
-}
-
-/* States */
-
-.cancel:hover {
-  border-color: var(--color-primary);
-  color: var(--color-primary);
-}
-
-.confirm:hover {
-  background: var(--color-primary-25);
-}
-
-.add:hover {
-  background: var(--color-primary);
-  border-color: var(--color-primary);
-  color: var(--color-surface);
-}
-
-/* Variations */
-
-.disabled {
-  pointer-events: none;
-  opacity: 0.5;
-}
-
-.full {
-  width: 100%;
-}
-
-.alt {
-  color: var(--color-surface);
-  border-radius: 20px;
-  border: 2px var(--color-surface) solid;
-  padding-left: 30px;
-  padding-right: 30px;
-}
-
-.confirm-alt {
-  composes: confirm alt;
-  border-color: transparent;
-}
-
-.cancel-alt {
-  composes: cancel alt;
-  background: none;
-}
-
-.save-alt {
-  composes: save alt;
-  border-color: transparent;
-}
-
-/* Add Button */
-
-.add-button {
-  min-height: 32px;
-}

package/src/components/buttons/button/button.spec.js

@@ -1,84 +0,0 @@
-import { shallow } from 'enzyme';
-import { PlusBoldIcon } from '@commercetools-frontend/ui-kit';
-import Button from './button';
-
-const createTestProps = (props) => ({
-  className: '',
-  onClick: jest.fn(),
-  isDisabled: false,
-  ...props,
-});
-
-describe('rendering', () => {
-  describe('basic component', () => {
-    const withLabelWrapper = shallow(
-      <Button {...createTestProps()}>
-        <span>{'test label'}</span>
-      </Button>
-    );
-    const withIconWrapper = shallow(
-      <Button {...createTestProps()}>
-        <PlusBoldIcon />
-      </Button>
-    );
-
-    it('renders label button', () => {
-      expect(withLabelWrapper).toRender('button');
-    });
-
-    it('has a label', () => {
-      expect(withLabelWrapper).toRender('span');
-    });
-
-    it('renders icon button', () => {
-      expect(withLabelWrapper).toRender('button');
-    });
-
-    it('has a icon', () => {
-      expect(withIconWrapper).toRender('PlusBoldIcon');
-    });
-  });
-
-  describe('multiple children', () => {
-    const wrapper = shallow(
-      <Button {...createTestProps()}>
-        <PlusBoldIcon />
-        <span>{'test label'}</span>
-      </Button>
-    );
-
-    it('is only one button', () => {
-      expect(wrapper).toRenderElementTimes('button', 1);
-    });
-
-    it('has a label', () => {
-      expect(wrapper).toRenderElementTimes('span', 1);
-    });
-
-    it('has a icon', () => {
-      expect(wrapper).toRenderElementTimes('PlusBoldIcon', 1);
-    });
-  });
-});
-
-describe('callbacks', () => {
-  describe('should trigger onClick callback', () => {
-    const props = createTestProps();
-    const wrapper = shallow(<Button {...props}>{'test label'}</Button>);
-
-    it('onClick callback called', () => {
-      wrapper.simulate('click');
-      expect(props.onClick).toBeCalled();
-    });
-  });
-
-  describe('should not trigger onClick callback when disabled', () => {
-    const props = createTestProps({ isDisabled: true });
-    const wrapper = shallow(<Button {...props}>{'test label'}</Button>);
-
-    it('onClick callback called', () => {
-      wrapper.simulate('click');
-      expect(props.onClick).toHaveBeenCalledTimes(0);
-    });
-  });
-});

package/src/components/buttons/button/index.js

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

package/src/components/buttons/button-close/__snapshots__/button-close.spec.js.snap

@@ -1,19 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`rendering render component should output correct tree 1`] = `
-<div
-  aria-label="Close dialog"
-  className="button-close-container"
-  data-testid="button-close"
-  data-track-component="Close"
-  data-track-event="click"
-  onClick={[MockFunction]}
-  onMouseOut={[MockFunction]}
-  onMouseOver={[MockFunction]}
->
-  <CloseIcon
-    color="solid"
-    size="medium"
-  />
-</div>
-`;

package/src/components/buttons/button-close/button-close.jsx

@@ -1,37 +0,0 @@
-// NOTE: this component is duplicated in `app-shell/from-core`.
-// It's a temporary solution to avoid importing `core` components from AppShell.
-// Be careful when you change something here, remember to duplicate the changes.
-import PropTypes from 'prop-types';
-import flowRight from 'lodash.flowright';
-import { CloseIcon } from '@commercetools-frontend/ui-kit';
-import withMouseOverState from '../../with-mouse-over-state';
-import keepDisplayName from '../../keep-display-name';
-import styles from './button-close.module.css';
-
-export const ButtonClose = (props) => (
-  <div
-    className={styles['button-close-container']}
-    onMouseOver={props.handleMouseOver}
-    onMouseOut={props.handleMouseOut}
-    onClick={props.onClick}
-    data-track-component="Close"
-    data-track-event="click"
-    data-testid="button-close"
-    aria-label="Close dialog"
-  >
-    <CloseIcon size="medium" color={props.isMouseOver ? 'primary' : 'solid'} />
-  </div>
-);
-ButtonClose.displayName = 'ButtonClose';
-ButtonClose.propTypes = {
-  onClick: PropTypes.func.isRequired,
-  // HoC
-  handleMouseOver: PropTypes.func.isRequired,
-  handleMouseOut: PropTypes.func.isRequired,
-  isMouseOver: PropTypes.bool.isRequired,
-};
-
-export default flowRight(
-  keepDisplayName(ButtonClose),
-  withMouseOverState
-)(ButtonClose);

package/src/components/buttons/button-close/button-close.module.css

@@ -1,3 +0,0 @@
-.button-close-container {
-  cursor: pointer;
-}