@commercetools-frontend/experimental-components 0.0.2 → 0.0.3

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

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

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

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

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

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

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

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

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