@commercetools-frontend/experimental-components 0.0.2

package/src/custom-fields/custom-fields/set/custom-input-set.jsx

@@ -0,0 +1,233 @@
+import { useState, useEffect, useMemo } from 'react';
+import PropTypes from 'prop-types';
+import { deepEqual } from 'fast-equals';
+import times from 'lodash.times';
+import isNil from 'lodash.isnil';
+import merge from 'lodash.merge';
+import set from 'lodash.set';
+import { useFormikContext, Field } from 'formik';
+import {
+  AccessibleHidden,
+  Spacings,
+  useToggleState,
+} from '@commercetools-frontend/ui-kit';
+import { v4 as uuidv4 } from 'uuid';
+import { CUSTOM_FIELD_TYPES } from '../constants';
+import ExpandButton from './expand-button';
+import SetButtons from './set-buttons';
+// eslint-disable-next-line import/no-cycle
+import CustomFieldInput from '../custom-field-input';
+import { getType as getSetElementType } from '../utils';
+
+const getDuplicateErrors = (setValues) => {
+  /* eslint-disable no-plusplus */
+  const result = [];
+  if (!setValues) return result;
+  for (let i = 0; i < setValues.length; i++) {
+    for (let j = i + 1; j < setValues.length; j++) {
+      if (deepEqual(setValues[i], setValues[j])) {
+        result[i] = { duplicated: true };
+        result[j] = { duplicated: true };
+      }
+    }
+  }
+  return result;
+  /* eslint-enable no-plusplus */
+};
+
+const isEmpty = (value) => value.length === 0;
+
+const nullifyIfEmpty = (value) => (isEmpty(value) ? undefined : value);
+
+const dropEmptyEntries = (value) =>
+  Array.isArray(value) ? value.filter((item) => !isNil(item)) : value;
+
+const removeArrayItem = (array, index) => {
+  const head = array.slice(0, index);
+  const tail = array.slice(index + 1);
+  return [...head, ...tail];
+};
+
+const replaceArrayItem = (array, index, newItem) => {
+  const head = array.slice(0, index);
+  const tail = array.slice(index + 1);
+  return [...head, newItem, ...tail];
+};
+
+const getItemIndex = (name) => {
+  const indexPartStart = name.lastIndexOf('[');
+  const indexPartEnd = name.lastIndexOf(']');
+  const rawIndex = name.substring(indexPartStart + 1, indexPartEnd);
+  return parseInt(rawIndex, 10);
+};
+
+const makeKeys = (amount) => times(amount, () => uuidv4());
+
+const makeItemFieldName = (fieldName, index) => `${fieldName}.[${index}]`;
+
+const makeMapForAllItems = (fieldName, items, value) =>
+  items.reduce(
+    (result, item, index) =>
+      set(result, makeItemFieldName(fieldName, index), value),
+    {}
+  );
+
+export default function CustomInputSet(props) {
+  const [isExpanded, toggleExpansion] = useToggleState(false);
+  const { setTouched, touched, isSubmitting, dirty } = useFormikContext();
+
+  const itemFieldDefintion = {
+    ...props.fieldDefinition,
+    type: props.fieldDefinition.type.elementType,
+  };
+
+  const value = useMemo(() => props.value || [undefined], [props.value]);
+
+  const [internalValue, setInternalValue] = useState(value);
+  const [keys, setKeys] = useState(makeKeys(internalValue.length));
+
+  const totalAmount = internalValue?.length;
+  const amountToRender = isExpanded ? totalAmount : 1;
+
+  const updateInternalValue = (newValue) => {
+    const valueToSet = isEmpty(newValue) ? [undefined] : newValue;
+    setInternalValue(valueToSet);
+    if (valueToSet.length !== keys.length) {
+      setKeys(makeKeys(valueToSet.length));
+    }
+  };
+
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  useEffect(() => updateInternalValue(value), [value]);
+
+  // Filter out all empty values on form submit
+  useEffect(() => {
+    if (isSubmitting || !dirty) {
+      const withoutEmpty = dropEmptyEntries(value);
+      if (!deepEqual(withoutEmpty, dropEmptyEntries(internalValue))) {
+        setKeys(makeKeys(withoutEmpty.length || 1));
+      }
+      updateInternalValue(withoutEmpty);
+    }
+    // I do really want to run it only when isSubmitting or dirty values change.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isSubmitting, dirty]);
+
+  const markAllItemsAsTouched = (items) =>
+    setTouched(merge({}, touched, makeMapForAllItems(props.name, items, true)));
+
+  const setNewValue = (newValue) => {
+    const withoutEmpty = dropEmptyEntries(newValue);
+    const nullified = nullifyIfEmpty(withoutEmpty);
+    updateInternalValue(withoutEmpty);
+    markAllItemsAsTouched(withoutEmpty);
+    props.setFieldValue(props.name, nullified);
+  };
+
+  const addNewItem = () => updateInternalValue([undefined, ...internalValue]);
+
+  const removeItem = (index) => {
+    setNewValue(removeArrayItem(internalValue, index));
+  };
+
+  const setItemValue = (itemName, itemValue) => {
+    const index = getItemIndex(itemName);
+    const newValue = replaceArrayItem(internalValue, index, itemValue);
+    setNewValue(newValue);
+  };
+
+  // TODO(pa3): I don't like this bool. Feels like decision should happen
+  // in <CustomFieldComponent /> where proper component for given field/attribute
+  // type is selected.
+  const type = getSetElementType(props.fieldDefinition);
+  const typeName = type.name.toLowerCase();
+  const areButtonsTopAligned = [
+    CUSTOM_FIELD_TYPES.lenum,
+    CUSTOM_FIELD_TYPES.localizedenum,
+    CUSTOM_FIELD_TYPES.localizedstring,
+    CUSTOM_FIELD_TYPES.ltext,
+    CUSTOM_FIELD_TYPES.reference,
+  ].includes(typeName);
+
+  return (
+    <>
+      <AccessibleHidden>
+        <label id={props.name}>{props.name}</label>
+      </AccessibleHidden>
+      <div>
+        <Field
+          name={props.name}
+          validate={(values) => {
+            const errors = getDuplicateErrors(values);
+            return errors.length > 0 ? errors : undefined;
+          }}
+        >
+          {() => (
+            <Spacings.Stack scale="s" data-testid={props.name}>
+              {times(amountToRender, (index) => {
+                const fieldName = makeItemFieldName(props.name, index);
+                const fieldValue = internalValue[index];
+
+                return (
+                  <Spacings.Inline
+                    key={keys[index]}
+                    alignItems={areButtonsTopAligned ? 'flex-start' : 'center'}
+                  >
+                    {/* Recursively choose proper single-item component */}
+                    <CustomFieldInput
+                      name={fieldName}
+                      fieldDefinition={itemFieldDefintion}
+                      isDisabled={props.isDisabled}
+                      isReadOnly={props.isReadOnly}
+                      onBlur={props.onBlur}
+                      setFieldValue={setItemValue}
+                      value={fieldValue}
+                      hasError={props.hasError}
+                    />
+                    <SetButtons
+                      index={index}
+                      isFirstItem={!isExpanded || index === 0}
+                      onAddItem={addNewItem}
+                      onRemoveItem={() => removeItem(index)}
+                      isRemoveDisabled={
+                        props.isDisabled ||
+                        props.isReadOnly ||
+                        internalValue.length === 1
+                      }
+                      isAddDisabled={
+                        props.isDisabled ||
+                        props.isReadOnly ||
+                        !internalValue[0]
+                      }
+                      isTopAligned={areButtonsTopAligned}
+                    />
+                  </Spacings.Inline>
+                );
+              })}
+              <ExpandButton
+                totalValues={totalAmount}
+                isExpanded={isExpanded}
+                onExpand={toggleExpansion}
+              />
+            </Spacings.Stack>
+          )}
+        </Field>
+      </div>
+    </>
+  );
+}
+CustomInputSet.displayName = 'CustomInputSet';
+CustomInputSet.propTypes = {
+  name: PropTypes.string.isRequired,
+  fieldDefinition: PropTypes.shape({
+    type: PropTypes.shape({
+      elementType: PropTypes.object.isRequired,
+    }).isRequired,
+  }).isRequired,
+  value: PropTypes.any,
+  setFieldValue: PropTypes.func.isRequired,
+  isDisabled: PropTypes.bool,
+  isReadOnly: PropTypes.bool,
+  onBlur: PropTypes.func.isRequired,
+  hasError: PropTypes.bool,
+};

package/src/custom-fields/custom-fields/set/custom-input-set.spec.js

@@ -0,0 +1,193 @@
+import {
+  screen,
+  waitFor,
+  fireEvent,
+} from '@commercetools-frontend/application-shell/test-utils';
+import { renderCustomFields } from '../test-utils';
+
+describe('CustomSetInput', () => {
+  const fieldDefinitions = [
+    {
+      name: 'textSetAttr',
+      type: {
+        name: 'set',
+        elementType: {
+          name: 'text',
+        },
+      },
+    },
+  ];
+
+  it('should show empty input when value is empty', async () => {
+    renderCustomFields({ fieldDefinitions });
+    await screen.findByTestId('textSetAttr');
+    const textInput = screen.getByRole('textbox');
+    expect(textInput.value).toBe('');
+  });
+
+  it('add button should be disabled if set is empy', async () => {
+    renderCustomFields({
+      fieldDefinitions,
+    });
+    const addButton = await screen.findByLabelText('Add value');
+    expect(addButton).toBeDisabled();
+  });
+
+  it('should let user add new item, once user filled the last one', async () => {
+    renderCustomFields({
+      fieldDefinitions,
+    });
+
+    await screen.findByTestId('textSetAttr');
+    const textInput = screen.getByRole('textbox');
+    fireEvent.change(textInput, { target: { value: 'first item value' } });
+
+    const addButton = screen.getByLabelText('Add value');
+    fireEvent.click(addButton);
+
+    const newItemTextInput = await screen.findByRole('textbox');
+    expect(newItemTextInput.value).toBeFalsy();
+  });
+
+  it('should not inform formik about new item until user provide value', async () => {
+    const { getFormikValues } = renderCustomFields({
+      fieldDefinitions,
+      initialValues: { textSetAttr: ['first item value', 'second item value'] },
+    });
+    const addButton = screen.getByLabelText('Add value');
+    fireEvent.click(addButton);
+
+    await waitFor(() =>
+      expect(getFormikValues()).toStrictEqual({
+        textSetAttr: ['first item value', 'second item value'],
+      })
+    );
+  });
+
+  it('should drop empty values after form submittion', async () => {
+    const { submitForm } = renderCustomFields({
+      fieldDefinitions,
+      initialValues: { textSetAttr: ['first item value'] },
+    });
+    const addButton = screen.getByLabelText('Add value');
+    fireEvent.click(addButton);
+    const newItemTextInput = await screen.findByRole('textbox');
+
+    submitForm();
+
+    await waitFor(() => expect(newItemTextInput).not.toBeInTheDocument());
+  });
+
+  it('should remove item if user clears its value', async () => {
+    const { getFormikValues } = renderCustomFields({
+      fieldDefinitions,
+      initialValues: { textSetAttr: ['first item value', 'second item value'] },
+    });
+
+    const input = await screen.findByDisplayValue('first item value');
+    fireEvent.change(input, { target: { value: '' } });
+    await waitFor(() =>
+      expect(getFormikValues()).toStrictEqual({
+        textSetAttr: ['second item value'],
+      })
+    );
+  });
+
+  it('should render collapsed initially', async () => {
+    renderCustomFields({
+      fieldDefinitions,
+      initialValues: { textSetAttr: ['first item value', 'second item value'] },
+    });
+    await screen.findByDisplayValue('first item value');
+    expect(screen.getByText(/show all set items \(2\)/i)).toBeInTheDocument();
+    expect(
+      screen.queryByDisplayValue('second item value')
+    ).not.toBeInTheDocument();
+  });
+
+  it('should let user expand/collapse set items list', async () => {
+    renderCustomFields({
+      fieldDefinitions,
+      initialValues: { textSetAttr: ['first item value', 'second item value'] },
+    });
+    const expandButton = await screen.findByText(/show all set items \(2\)/i);
+    fireEvent.click(expandButton);
+
+    await screen.findByDisplayValue('second item value');
+    const collapseButton = screen.getByText(/hide set items \(2\)/i);
+    fireEvent.click(collapseButton);
+    expect(
+      screen.queryByDisplayValue('second item value')
+    ).not.toBeInTheDocument();
+  });
+
+  it('should let user edit set', async () => {
+    const { getFormikValues } = renderCustomFields({
+      fieldDefinitions,
+    });
+
+    await screen.findByTestId('textSetAttr');
+    const textInput = screen.getByRole('textbox');
+    fireEvent.change(textInput, { target: { value: 'first item value' } });
+    await waitFor(() =>
+      expect(getFormikValues()).toStrictEqual({
+        textSetAttr: ['first item value'],
+      })
+    );
+
+    const addButton = screen.getByLabelText('Add value');
+    fireEvent.click(addButton);
+
+    await screen.findByTestId('textSetAttr');
+    const newItemTextInput = screen.getByRole('textbox');
+    fireEvent.change(newItemTextInput, {
+      target: { value: 'second item value' },
+    });
+    await waitFor(() =>
+      expect(getFormikValues()).toStrictEqual({
+        textSetAttr: ['second item value', 'first item value'],
+      })
+    );
+  });
+
+  it('should remove set value from formik values when user removes the last set item', async () => {
+    const { getFormikValues } = renderCustomFields({
+      fieldDefinitions,
+      initialValues: { textSetAttr: ['first item value'] },
+    });
+
+    const input = await screen.findByDisplayValue('first item value');
+    fireEvent.change(input, { target: { value: '' } });
+    await waitFor(() => expect(getFormikValues()).toStrictEqual({}));
+  });
+
+  it('should mark all set items as touched when user edit one of them', async () => {
+    const { getTouchedFields } = renderCustomFields({
+      fieldDefinitions,
+      initialValues: { textSetAttr: ['first item value', 'second item value'] },
+      initialTouched: { someOtherTouchedField: true },
+    });
+
+    const firstItemInput = await screen.findByDisplayValue('first item value');
+    fireEvent.change(firstItemInput, {
+      target: { value: 'new first item value' },
+    });
+
+    await waitFor(() =>
+      expect(getTouchedFields()).toStrictEqual({
+        someOtherTouchedField: true,
+        textSetAttr: [true, true],
+      })
+    );
+  });
+
+  it('should update items with new values passed from formik', async () => {
+    const { setInitialValues } = renderCustomFields({
+      fieldDefinitions,
+      initialValues: { textSetAttr: ['first item value'] },
+    });
+    await screen.findByDisplayValue('first item value');
+    setInitialValues({ textSetAttr: ['second item value'] });
+    await screen.findByDisplayValue('second item value');
+  });
+});

package/src/custom-fields/custom-fields/set/expand-button.jsx

@@ -0,0 +1,37 @@
+import Divider from '../../../components/divider';
+import PropTypes from 'prop-types';
+import {
+  FlatButton,
+  AngleUpIcon,
+  AngleDownIcon,
+  Spacings,
+  Constraints,
+} from '@commercetools-frontend/ui-kit';
+
+export const ExpandButton = (props) =>
+  props.totalValues > 1 ? (
+    <Spacings.Stack scale="s" alignItems="center">
+      <Constraints.Horizontal>
+        <Divider />
+      </Constraints.Horizontal>
+      <FlatButton
+        tone="primary"
+        icon={props.isExpanded ? <AngleUpIcon /> : <AngleDownIcon />}
+        label={
+          props.isExpanded
+            ? `Hide set items (${props.totalValues})`
+            : `Show all set items (${props.totalValues})`
+        }
+        onClick={props.onExpand}
+      />
+    </Spacings.Stack>
+  ) : null;
+
+ExpandButton.displayName = 'ExpandButton';
+ExpandButton.propTypes = {
+  isExpanded: PropTypes.bool.isRequired,
+  onExpand: PropTypes.func.isRequired,
+  totalValues: PropTypes.number.isRequired,
+};
+
+export default ExpandButton;

package/src/custom-fields/custom-fields/set/expand-button.spec.js

@@ -0,0 +1,43 @@
+import { renderApp } from '@commercetools-frontend/application-shell/test-utils';
+import ExpandButton from './expand-button';
+
+const createTestProps = (props) => ({
+  totalValues: 2,
+  isExpanded: false,
+  onExpand: jest.fn(),
+
+  ...props,
+});
+
+describe('ExpandButton', () => {
+  describe('when collapsed', () => {
+    it('should show show `Show all set items` button', () => {
+      const props = createTestProps({
+        onExpand: jest.fn(),
+        totalValues: 2,
+        isExpanded: false,
+      });
+      const { queryByLabelText } = renderApp(<ExpandButton {...props} />);
+      const button = queryByLabelText(
+        `Show all set items (${props.totalValues})`
+      );
+      expect(button).toBeInTheDocument();
+      button.click();
+      expect(props.onExpand).toHaveBeenCalled();
+    });
+  });
+  describe('when expanded', () => {
+    it('should show show `Hide set items` button', () => {
+      const props = createTestProps({
+        onExpand: jest.fn(),
+        totalValues: 2,
+        isExpanded: true,
+      });
+      const { queryByLabelText } = renderApp(<ExpandButton {...props} />);
+      const button = queryByLabelText(`Hide set items (${props.totalValues})`);
+      expect(button).toBeInTheDocument();
+      button.click();
+      expect(props.onExpand).toHaveBeenCalled();
+    });
+  });
+});

package/src/custom-fields/custom-fields/set/set-buttons.jsx

@@ -0,0 +1,47 @@
+import PropTypes from 'prop-types';
+import {
+  PlusBoldIcon,
+  BinFilledIcon,
+  IconButton,
+  Spacings,
+} from '@commercetools-frontend/ui-kit';
+import styles from './set-buttons.module.css';
+
+// TODO(pa3): alignment of buttons made in a kinda ugly way (i.e. gap class).
+// have to find a better way to do it.
+export const SetButtons = (props) => (
+  <div className={props.isTopAligned ? styles.topAlign : undefined}>
+    <Spacings.Inline>
+      <IconButton
+        label="Remove value"
+        onClick={props.onRemoveItem}
+        isDisabled={props.isRemoveDisabled}
+        size="medium"
+        icon={<BinFilledIcon />}
+      />
+      {props.isFirstItem ? (
+        <IconButton
+          label="Add value"
+          onClick={props.onAddItem}
+          isDisabled={props.isAddDisabled}
+          size="medium"
+          icon={<PlusBoldIcon />}
+        />
+      ) : (
+        <div className={styles.gap} />
+      )}
+    </Spacings.Inline>
+  </div>
+);
+
+SetButtons.displayName = 'SetButtons';
+SetButtons.propTypes = {
+  isFirstItem: PropTypes.bool.isRequired,
+  isRemoveDisabled: PropTypes.bool,
+  isAddDisabled: PropTypes.bool,
+  isTopAligned: PropTypes.bool,
+  onAddItem: PropTypes.func.isRequired,
+  onRemoveItem: PropTypes.func.isRequired,
+};
+
+export default SetButtons;

package/src/custom-fields/custom-fields/set/set-buttons.module.css

@@ -0,0 +1,7 @@
+.topAlign {
+  padding-top: var(--spacing-xs);
+}
+
+.gap {
+  padding: 12px;
+}

package/src/custom-fields/custom-fields/set/set-buttons.spec.js

@@ -0,0 +1,39 @@
+import { renderApp } from '@commercetools-frontend/application-shell/test-utils';
+import SetButtons from './set-buttons';
+
+const createTestProps = (props) => ({
+  index: 0,
+  isFirstItem: true,
+  onAddItem: jest.fn(),
+  onRemoveItem: jest.fn(),
+  isDisabled: false,
+
+  ...props,
+});
+
+describe('SetButtons', () => {
+  describe('when `isFirstItem` is true', () => {
+    it('should show show `Add value` button', () => {
+      const props = createTestProps({
+        isFirstItem: true,
+      });
+      const { queryByLabelText } = renderApp(<SetButtons {...props} />);
+      const button = queryByLabelText('Add value');
+      expect(button).toBeInTheDocument();
+      button.click();
+      expect(props.onAddItem).toHaveBeenCalled();
+    });
+  });
+  describe('when `isFirstItem` is false', () => {
+    it('should show show `Hide set items` button', () => {
+      const props = createTestProps({
+        isFirstItem: false,
+      });
+      const { queryByLabelText } = renderApp(<SetButtons {...props} />);
+      const button = queryByLabelText('Remove value');
+      expect(button).toBeInTheDocument();
+      button.click();
+      expect(props.onRemoveItem).toHaveBeenCalled();
+    });
+  });
+});