@commercetools-frontend/experimental-components 0.0.2 → 0.0.3

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

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

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

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

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

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

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

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

@@ -1,39 +0,0 @@
-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();
-    });
-  });
-});