@commercetools-frontend/experimental-components 0.0.2

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

@@ -0,0 +1,2 @@
+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

@@ -0,0 +1,17 @@
+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

@@ -0,0 +1,3 @@
+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

@@ -0,0 +1,35 @@
+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

@@ -0,0 +1,21 @@
+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

@@ -0,0 +1,2 @@
+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

@@ -0,0 +1,17 @@
+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

@@ -0,0 +1,3 @@
+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

@@ -0,0 +1,50 @@
+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

@@ -0,0 +1,2 @@
+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

@@ -0,0 +1,17 @@
+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

@@ -0,0 +1,3 @@
+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

@@ -0,0 +1,5 @@
+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

@@ -0,0 +1,20 @@
+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

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

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

@@ -0,0 +1,30 @@
+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

@@ -0,0 +1,27 @@
+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

@@ -0,0 +1,42 @@
+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

@@ -0,0 +1,214 @@
+/* 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

@@ -0,0 +1,84 @@
+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

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

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

@@ -0,0 +1,19 @@
+// 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

@@ -0,0 +1,37 @@
+// 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

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