@commercetools-frontend/experimental-components 0.0.2

package/src/custom-fields/custom-field-type-definitions-connector/custom-field-type-definitions-connector.ctp.graphql

@@ -0,0 +1,72 @@
+query FetchTypeDefinitionsWithNamesQuery(
+  $where: String
+  $limit: Int
+  $offset: Int
+) {
+  typeDefinitions(where: $where, limit: $limit, offset: $offset) {
+    results {
+      id
+      key
+      nameAllLocales {
+        value
+        locale
+      }
+      fieldDefinitions {
+        required
+        type {
+          name
+          ... on ReferenceType {
+            referenceTypeId
+          }
+          ... on SetType {
+            elementType {
+              name
+              ... on ReferenceType {
+                referenceTypeId
+                name
+              }
+              ... on EnumType {
+                values {
+                  key
+                  label
+                }
+                name
+              }
+              ... on LocalizedEnumType {
+                values {
+                  key
+                  labelAllLocales {
+                    locale
+                    value
+                  }
+                }
+              }
+            }
+          }
+          ... on LocalizedEnumType {
+            values {
+              key
+              labelAllLocales {
+                locale
+                value
+              }
+            }
+          }
+          ... on EnumType {
+            values {
+              key
+              label
+            }
+            name
+          }
+        }
+        name
+        labelAllLocales {
+          value
+          locale
+        }
+        inputHint
+      }
+    }
+  }
+}

package/src/custom-fields/custom-field-type-definitions-connector/custom-field-type-definitions-connector.js

@@ -0,0 +1,131 @@
+import PropTypes from 'prop-types';
+import { Component } from 'react';
+import hoistNonReactStatics from 'hoist-non-react-statics';
+import { graphql } from '@apollo/client/react/hoc';
+import invariant from 'tiny-invariant';
+import { GRAPHQL_TARGETS } from '@commercetools-frontend/constants';
+import { QUERY_LIMIT } from '../../constants';
+import { FetchTypeDefinitionsWithNamesQuery } from './custom-field-type-definitions-connector.ctp.graphql';
+import {
+  restDocToForm,
+  graphQlDocToForm,
+  formToRestDoc,
+  formToGraphQlDoc,
+  createEmptyCustomFields,
+} from './utils';
+
+const customizableResources = [
+  'asset',
+  'address',
+  'business-unit',
+  'category',
+  'channel',
+  'customer',
+  'order',
+  'store',
+  'discount-code',
+  'inventory-entry',
+  'line-item',
+  'custom-line-item',
+  'product-price',
+  'payment',
+  'payment-interface-interaction',
+  'shopping-list',
+  'shopping-list-text-line-item',
+  'review',
+  'cart-discount',
+  'product-selection',
+];
+
+const emptyTypeDefinitions = {
+  total: 0,
+  count: 0,
+  results: [],
+};
+
+export class CustomFieldTypeDefinitionsConnector extends Component {
+  static displayName = 'CustomFieldTypeDefinitionsConnector';
+  static propTypes = {
+    resources: PropTypes.arrayOf(PropTypes.string).isRequired,
+    isDisabled: PropTypes.bool,
+
+    // parent
+    children: PropTypes.func.isRequired,
+
+    // Apollo
+    fetchTypeDefinitionsQuery: PropTypes.shape({
+      loading: PropTypes.bool.isRequired,
+      error: PropTypes.shape({
+        message: PropTypes.string.isRequired,
+      }),
+      typeDefinitions: PropTypes.object,
+    }),
+  };
+
+  static defaultProps = {
+    resources: [],
+    limit: QUERY_LIMIT.DEFAULT_MAX,
+  };
+
+  static restDocToForm = restDocToForm;
+  static graphQlDocToForm = graphQlDocToForm;
+  static formToRestDoc = formToRestDoc;
+  static formToGraphQlDoc = formToGraphQlDoc;
+  static createEmptyCustomFields = createEmptyCustomFields;
+
+  componentDidMount() {
+    const hasUnsupportedResource = this.props.resources.some(
+      (resource) => !customizableResources.includes(resource)
+    );
+    invariant(
+      !hasUnsupportedResource,
+      `core/components/custom-field-definitions-connector: some of the specified resources are not supported.`
+    );
+  }
+
+  render() {
+    return this.props.children({
+      customFieldTypeDefinitionsFetcher: {
+        isLoading: this.props.isDisabled
+          ? false
+          : this.props.fetchTypeDefinitionsQuery.loading,
+        customFieldTypeDefinitions: this.props.isDisabled
+          ? emptyTypeDefinitions
+          : this.props.fetchTypeDefinitionsQuery.typeDefinitions ||
+            emptyTypeDefinitions,
+      },
+    });
+  }
+}
+
+const stringifyResources = (resources) =>
+  resources.map((resource) => `"${resource}"`).join();
+
+const createGraphQlOptions = (ownProps) => {
+  const where =
+    ownProps.resources.length > 0
+      ? `resourceTypeIds contains any (${stringifyResources(
+          ownProps.resources
+        )})`
+      : undefined;
+  return {
+    variables: {
+      where,
+      limit: ownProps.limit,
+    },
+    context: {
+      target: GRAPHQL_TARGETS.COMMERCETOOLS_PLATFORM,
+      // Is this even used??
+      projectKey: ownProps.projectKey,
+    },
+  };
+};
+
+export default hoistNonReactStatics(
+  graphql(FetchTypeDefinitionsWithNamesQuery, {
+    name: 'fetchTypeDefinitionsQuery',
+    skip: (ownProps) => ownProps.isDisabled,
+    options: createGraphQlOptions,
+  })(CustomFieldTypeDefinitionsConnector),
+  CustomFieldTypeDefinitionsConnector
+);

package/src/custom-fields/custom-field-type-definitions-connector/custom-field-type-definitions-connector.spec.js

@@ -0,0 +1,82 @@
+import { shallow } from 'enzyme';
+import invariant from 'tiny-invariant';
+import { CustomFieldTypeDefinitionsConnector } from './custom-field-type-definitions-connector';
+
+jest.mock('tiny-invariant');
+
+const createTestProps = (custom) => ({
+  children: jest.fn(() => <div className="child" />),
+  resources: ['channel'],
+  locale: 'en',
+  projectKey: 'test-project-1',
+  isDisabled: false,
+  fetchTypeDefinitionsQuery: {
+    loading: false,
+    typeDefinitions: {
+      total: 1,
+      count: 1,
+      results: [
+        {
+          fieldDefinitions: [],
+          id: 'test-1',
+          key: 'key-1',
+          nameAllLocales: [{ value: 'Foo', locale: 'en' }],
+        },
+      ],
+    },
+  },
+  ...custom,
+});
+
+describe('render', () => {
+  let props;
+  let wrapper;
+  beforeEach(() => {
+    props = createTestProps();
+    wrapper = shallow(<CustomFieldTypeDefinitionsConnector {...props} />);
+  });
+  it('should match snapshot', () => {
+    expect(wrapper).toMatchSnapshot();
+  });
+  it('should call `children`', () => {
+    expect(props.children).toHaveBeenCalledTimes(1);
+  });
+  it('should call `children` with `customFieldDefinitionsFetcher`', () => {
+    expect(props.children).toHaveBeenCalledWith(
+      expect.objectContaining({
+        customFieldTypeDefinitionsFetcher: {
+          isLoading: props.fetchTypeDefinitionsQuery.loading,
+          customFieldTypeDefinitions:
+            props.fetchTypeDefinitionsQuery.typeDefinitions,
+        },
+      })
+    );
+  });
+});
+
+describe('lifecycle', () => {
+  let props;
+  let wrapper;
+  describe('componentDidMount', () => {
+    describe('when all the resource are not valid', () => {
+      beforeEach(() => {
+        props = createTestProps({ resources: ['Foo', 'Bar'] });
+        wrapper = shallow(<CustomFieldTypeDefinitionsConnector {...props} />);
+        wrapper.instance().componentDidMount();
+      });
+      it('should invoke `invariant`', () => {
+        expect(invariant).toHaveBeenCalled();
+      });
+    });
+    describe('when some of the resource are not valid', () => {
+      beforeEach(() => {
+        props = createTestProps({ resources: ['customer', 'Bar'] });
+        wrapper = shallow(<CustomFieldTypeDefinitionsConnector {...props} />);
+        wrapper.instance().componentDidMount();
+      });
+      it('should invoke `invariant`', () => {
+        expect(invariant).toHaveBeenCalled();
+      });
+    });
+  });
+});

package/src/custom-fields/custom-field-type-definitions-connector/index.js

@@ -0,0 +1 @@
+export { default } from './custom-field-type-definitions-connector';

package/src/custom-fields/custom-field-type-definitions-connector/utils.js

@@ -0,0 +1,89 @@
+import { transformLocalizedFieldToLocalizedString } from '@commercetools-frontend/l10n';
+import omit from 'lodash.omit';
+import omitBy from 'lodash.omitby';
+import isNil from 'lodash.isnil';
+
+export const restDocToForm = (customFieldsFromRestResponse) => ({
+  fields: customFieldsFromRestResponse.fields,
+  type: {
+    id: customFieldsFromRestResponse.type.id,
+    ...customFieldsFromRestResponse.type.obj,
+  },
+});
+
+export const graphQlDocToForm = (typeDefinition) => ({
+  fields: {},
+  type: {
+    id: typeDefinition.id,
+    key: typeDefinition.key,
+    name: transformLocalizedFieldToLocalizedString(
+      typeDefinition.nameAllLocales
+    ),
+    fieldDefinitions: typeDefinition.fieldDefinitions.map(
+      (fieldDefinition) => ({
+        name: fieldDefinition.name,
+        required: fieldDefinition.required,
+        inputHint: fieldDefinition.inputHint,
+        type: do {
+          if (fieldDefinition.type?.elementType?.name === 'LocalizedEnum')
+            ({
+              ...fieldDefinition.type,
+              elementType: {
+                ...fieldDefinition.type.elementType,
+                values: fieldDefinition.type.elementType.values.map(
+                  (value) => ({
+                    key: value.key,
+                    label: transformLocalizedFieldToLocalizedString(
+                      value.labelAllLocales
+                    ),
+                  })
+                ),
+              },
+            });
+          else if (fieldDefinition.type?.name === 'LocalizedEnum')
+            ({
+              ...fieldDefinition.type,
+              values: fieldDefinition.type.values.map((value) => ({
+                key: value.key,
+                label: transformLocalizedFieldToLocalizedString(
+                  value.labelAllLocales
+                ),
+              })),
+            });
+          else fieldDefinition.type;
+        },
+        label: transformLocalizedFieldToLocalizedString(
+          fieldDefinition.labelAllLocales
+        ),
+      })
+    ),
+  },
+});
+
+export const formToRestDoc = (formCustomFields) => ({
+  type: {
+    id: formCustomFields.type.id,
+    typeId: 'type',
+    obj: {
+      ...formCustomFields.type,
+    },
+  },
+  fields: formCustomFields.fields,
+});
+
+export const formToGraphQlDoc = (formCustomFields) => ({
+  type: {
+    id: formCustomFields.type.id,
+    typeId: 'type',
+    obj: {
+      ...omit(formCustomFields.type, ['id']),
+    },
+  },
+  fields: omitBy(formCustomFields.fields || {}, isNil),
+});
+
+// TODO(pa3): find usages and make sure only 1 param is passed
+export const createEmptyCustomFields = (typeDefinition) => ({
+  fields: {},
+  type: typeDefinition?.type || { fieldDefinitions: [] },
+});

package/src/custom-fields/custom-field-type-definitions-connector/utils.spec.js

@@ -0,0 +1,235 @@
+import omit from 'lodash.omit';
+import {
+  restDocToForm,
+  graphQlDocToForm,
+  formToRestDoc,
+  formToGraphQlDoc,
+  createEmptyCustomFields,
+} from './utils';
+
+const createRestDoc = (custom) => ({
+  fields: { cf1: 'foo', cf2: 'bar' },
+  type: {
+    id: 'test-1',
+    obj: {
+      name: { en: 'hey' },
+      key: 'key-1',
+      fieldDefinitions: [],
+    },
+  },
+  ...custom,
+});
+
+const createGraphQlDoc = (custom) => ({
+  id: 'test',
+  key: 'test1',
+  nameAllLocales: [{ locale: 'en', value: 'foo' }],
+  fieldDefinitions: [],
+  ...custom,
+});
+
+describe('restDocToForm', () => {
+  let result;
+  let restResponse;
+
+  beforeEach(() => {
+    restResponse = createRestDoc();
+    result = restDocToForm(restResponse);
+  });
+
+  it('should return an object with empy custom field values', () => {
+    expect(result).toHaveProperty('fields', restResponse.fields);
+  });
+
+  it('should return an object with the custom field type definition', () => {
+    expect(result).toHaveProperty('type', {
+      id: restResponse.type.id,
+      ...restResponse.type.obj,
+    });
+  });
+});
+
+describe('graphQlDocToForm', () => {
+  let result;
+  let graphqlResponse;
+
+  beforeEach(() => {
+    graphqlResponse = createGraphQlDoc();
+    result = graphQlDocToForm(graphqlResponse);
+  });
+
+  it('should return an object with empty custom field values', () => {
+    expect(result).toHaveProperty('fields', {});
+  });
+
+  it('should return an object with the custom field type definition', () => {
+    expect(result).toHaveProperty('type', {
+      id: graphqlResponse.id,
+      key: graphqlResponse.key,
+      name: { en: 'foo' },
+      fieldDefinitions: [],
+    });
+  });
+
+  describe('when custom type is a `Set` of `LocalizedEnum`', () => {
+    beforeEach(() => {
+      graphqlResponse = createGraphQlDoc({
+        ...graphqlResponse,
+        fieldDefinitions: [
+          {
+            name: 'field-foo-name',
+            labelAllLocales: [{ locale: 'en', value: 'Hello' }],
+            required: true,
+            type: {
+              name: 'LocalizedEnum',
+              values: [
+                {
+                  key: 'hockey',
+                  labelAllLocales: [{ locale: 'en', value: 'Hockey' }],
+                },
+              ],
+            },
+          },
+        ],
+      });
+      result = graphQlDocToForm(graphqlResponse);
+    });
+
+    it('should return an object with the transformed fieldDefinitions', () => {
+      expect(result).toHaveProperty('type', {
+        id: graphqlResponse.id,
+        key: graphqlResponse.key,
+        name: { en: 'foo' },
+        fieldDefinitions: [
+          {
+            name: 'field-foo-name',
+            label: {
+              en: 'Hello',
+            },
+            required: true,
+            type: {
+              name: 'LocalizedEnum',
+              values: [{ key: 'hockey', label: { en: 'Hockey' } }],
+            },
+          },
+        ],
+      });
+    });
+  });
+
+  describe('when custom type is `LocalizedEnum`', () => {
+    beforeEach(() => {
+      graphqlResponse = createGraphQlDoc({
+        ...graphqlResponse,
+        fieldDefinitions: [
+          {
+            name: 'field-foo-name',
+            labelAllLocales: [{ locale: 'en', value: 'Hello' }],
+            required: true,
+            type: {
+              elementType: {
+                name: 'LocalizedEnum',
+                values: [
+                  {
+                    key: 'hockey',
+                    labelAllLocales: [{ locale: 'en', value: 'Hockey' }],
+                  },
+                ],
+              },
+            },
+          },
+        ],
+      });
+      result = graphQlDocToForm(graphqlResponse);
+    });
+
+    it('should return an object with the transformed fieldDefinitions', () => {
+      expect(result).toHaveProperty('type', {
+        id: graphqlResponse.id,
+        key: graphqlResponse.key,
+        name: { en: 'foo' },
+        fieldDefinitions: [
+          {
+            name: 'field-foo-name',
+            label: {
+              en: 'Hello',
+            },
+            required: true,
+            type: {
+              elementType: {
+                name: 'LocalizedEnum',
+                values: [{ key: 'hockey', label: { en: 'Hockey' } }],
+              },
+            },
+          },
+        ],
+      });
+    });
+  });
+});
+
+describe('formToRestDoc', () => {
+  let result;
+  let formCustomFields;
+
+  beforeEach(() => {
+    formCustomFields = restDocToForm(createRestDoc());
+    result = formToRestDoc(formCustomFields);
+  });
+
+  it('should return an object with custom field values', () => {
+    expect(result).toHaveProperty('fields', formCustomFields.fields);
+  });
+
+  it('should return an object with the custom field type definition', () => {
+    expect(result).toHaveProperty('type', {
+      id: formCustomFields.type.id,
+      typeId: 'type',
+      obj: {
+        ...formCustomFields.type,
+      },
+    });
+  });
+});
+
+describe('formToGraphQlDoc', () => {
+  let result;
+  let formCustomFields;
+
+  beforeEach(() => {
+    formCustomFields = createRestDoc();
+    result = formToGraphQlDoc(formCustomFields);
+  });
+
+  it('should return an object with custom field values', () => {
+    expect(result).toHaveProperty('fields', formCustomFields.fields);
+  });
+
+  it('should return an object with the custom field type definition', () => {
+    expect(result).toHaveProperty('type', {
+      id: formCustomFields.type.id,
+      typeId: 'type',
+      obj: {
+        ...omit(formCustomFields.type, ['id']),
+      },
+    });
+  });
+});
+
+describe('createEmptyCustomFields', () => {
+  let emptyFormCustomFields;
+
+  beforeEach(() => {
+    emptyFormCustomFields = createEmptyCustomFields();
+  });
+
+  it('should return an object with empty custom field values', () => {
+    expect(emptyFormCustomFields).toHaveProperty('fields', {});
+  });
+
+  it('should return an object with empty custom field type definition', () => {
+    expect(emptyFormCustomFields).toHaveProperty('type', {
+      fieldDefinitions: [],
+    });
+  });
+});

package/src/custom-fields/custom-fields/README.md

@@ -0,0 +1,75 @@
+# Custom fields
+
+#### Description
+
+A component for inputs based on provided `fieldDefinitions`.
+
+What is a field definition?
+https://docs.commercetools.com/api/projects/types
+
+#### Requirements
+
+This component was made taking into account some technical decisions that we will explain later on, but for good usage this component needs:
+
+- `Formik` ([https://github.com/jaredpalmer/formik](https://github.com/jaredpalmer/formik))
+- `UIKit` ([https://github.com/commercetools/ui-kit](https://github.com/commercetools/ui-kit))
+
+#### Usage
+
+```js
+import { CustomFields } from '@commercetools-local/core/src/components/custom-fields';
+
+<CustomFields
+  name={name}
+  fieldDefinitions={definitions}
+  isReadOnly={isReadOnly}
+  isDisabled={isDisabled}
+/>;
+```
+
+#### Properties
+
+| Props            | Type   | Required | Description                                                                                                                                                        |
+| ---------------- | ------ | :------: | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| name             | String |    -     | Field name of a custom fields object in enclosing Formik context values. If not provided, the whole formik values are considered to be custom fields being edited. |
+|                  |        |          |                                                                                                                                                                    |
+| fieldDefinitions | Array  |    ✅    | Definitions for rendering inputs depending on the type                                                                                                             |
+| isDisabled       | bool   |    -     | Render the component in disabled mode                                                                                                                              |
+| isReadOnly       | bool   |    -     | Render the component in read only mode                                                                                                                             |
+
+#### Technical decisions
+
+- The more resource types (e.g `Store`) we add in the API, its `customFields` requires no mapping anymore.
+- The implementation is attached to the usage of `Formik`. This component _has_ to be rendered inside enclosing `Formik` instance.
+- The component do NOT support for now Set of sets.
+
+#### Validation (optional)
+
+```js
+import { validateCustomFields } from  '@commercetools-local/core/src/components/custom-fields';
+....
+....
+<Formik
+  validate={formValues => validateCustomFields(formValues, this.props.language)}
+  ...
+/>
+```
+
+#### Measure of completion
+
+This component is now present in:
+
+- [x] Orders custom fields tab
+- [x] Orders Line Items modal (custom fields and attributes)
+- [ ] Customers custom fields tab
+- [ ] Channels custom fields tab
+- [ ] Categories custom fields
+- [ ] Product attributes (variant attributes)
+- [ ] Price Custom fields
+
+#### Long terms & ideas
+
+- Add this component to `application-kit` so user can reuse this for custom applications
+- Add animation for expanding/collapse array values
+- Render `boolean` types with checkboxes instead of with `SelectInput`
+- Add integration test