@commercetools-frontend/experimental-components 0.0.2 → 0.0.3

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

@@ -1,150 +0,0 @@
-import PropTypes from 'prop-types';
-import { Component } from 'react';
-import flowRight from 'lodash.flowright';
-import { graphql } from '@apollo/client/react/hoc';
-import flatten from 'lodash.flatten';
-import uniqBy from 'lodash.uniqby';
-import invariant from 'tiny-invariant';
-import { applyTransformedLocalizedFields } from '@commercetools-frontend/l10n';
-import { QUERY_LIMIT } from '../../constants';
-import { omitDeep } from '../../internal-index';
-
-import { GRAPHQL_TARGETS } from '@commercetools-frontend/constants';
-import { FetchTypeDefinitionsQuery } from './custom-field-definitions-connector.ctp.graphql';
-
-const customizableResources = [
-  'asset',
-  'category',
-  'channel',
-  'customer',
-  'order',
-  'discount-code',
-  'cart-discount',
-  'inventory-entry',
-  'line-item',
-  'custom-line-item',
-  'product-price',
-  'payment',
-  'payment-interface-interaction',
-  'shopping-list',
-  'shopping-list-text-line-item',
-  'review',
-];
-
-export class CustomFieldDefinitionsConnector extends Component {
-  static displayName = 'CustomFieldDefinitionsConnector';
-  static propTypes = {
-    resources: PropTypes.arrayOf(PropTypes.string).isRequired,
-
-    // withRouter
-    match: PropTypes.shape({
-      params: PropTypes.shape({
-        projectKey: PropTypes.string.isRequired,
-      }),
-    }),
-
-    // parent
-    children: PropTypes.func.isRequired,
-
-    // Apollo
-    fetchTypeDefinitionsQuery: PropTypes.shape({
-      loading: PropTypes.bool.isRequired,
-      error: PropTypes.shape({
-        message: PropTypes.string.isRequired,
-      }),
-      customFieldDefinitions: PropTypes.arrayOf(
-        PropTypes.shape({
-          label: PropTypes.object,
-        })
-      ),
-    }),
-    isDisabled: PropTypes.bool.isRequired,
-  };
-
-  static defaultProps = {
-    resources: [],
-  };
-
-  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({
-      customFieldDefinitionsFetcher: {
-        isLoading: this.props.isDisabled
-          ? false
-          : this.props.fetchTypeDefinitionsQuery.loading,
-        customFieldDefinitions: this.props.isDisabled
-          ? []
-          : this.props.fetchTypeDefinitionsQuery.customFieldDefinitions,
-      },
-    });
-  }
-}
-
-const stringifyResources = (resources) =>
-  resources.map((resource) => `"${resource}"`).join();
-
-const mapPropsToOptions = (ownProps) => {
-  const where =
-    ownProps.resources.length > 0
-      ? `resourceTypeIds contains any (${stringifyResources(
-          ownProps.resources
-        )})`
-      : undefined;
-  return {
-    variables: {
-      where,
-      limit: QUERY_LIMIT.DEFAULT_MAX,
-    },
-    context: {
-      target: GRAPHQL_TARGETS.COMMERCETOOLS_PLATFORM,
-    },
-  };
-};
-
-export const mapDataToProps = ({ fetchTypeDefinitionsQuery }) => {
-  if (fetchTypeDefinitionsQuery.typeDefinitions) {
-    const fieldDefinitionsToOptionsMap = flatten(
-      fetchTypeDefinitionsQuery.typeDefinitions.results.map((typeDefinition) =>
-        typeDefinition.fieldDefinitions.map(
-          (fieldDefinition) => fieldDefinition
-        )
-      )
-    );
-
-    return {
-      fetchTypeDefinitionsQuery: {
-        loading: fetchTypeDefinitionsQuery.loading,
-        customFieldDefinitions: uniqBy(
-          fieldDefinitionsToOptionsMap.map((fieldDefinition) => ({
-            ...applyTransformedLocalizedFields(
-              omitDeep(fieldDefinition, ['__typename'], {
-                isImmutable: true,
-              }),
-              [{ from: 'labelAllLocales', to: 'label' }]
-            ),
-          })),
-          'name'
-        ),
-      },
-    };
-  }
-  return { fetchTypeDefinitionsQuery };
-};
-
-export default flowRight(
-  graphql(FetchTypeDefinitionsQuery, {
-    skip: (ownProps) => ownProps.isDisabled,
-    name: 'fetchTypeDefinitionsQuery',
-    options: mapPropsToOptions,
-    props: mapDataToProps,
-  })
-)(CustomFieldDefinitionsConnector);

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

@@ -1,288 +0,0 @@
-import { shallow } from 'enzyme';
-import invariant from 'tiny-invariant';
-import {
-  CustomFieldDefinitionsConnector,
-  mapDataToProps,
-} from './custom-field-definitions-connector';
-
-jest.mock('tiny-invariant');
-
-const createTestProps = (custom) => ({
-  children: jest.fn(() => <div className="child" />),
-  resources: ['customer'],
-  locale: 'en',
-  match: {
-    params: {
-      projectKey: 'test-project-1',
-    },
-  },
-  isDisabled: false,
-  fetchTypeDefinitionsQuery: {
-    loading: false,
-    customFieldDefinitions: [
-      {
-        name: 'Boolean',
-        label: { en: 'Boolean' },
-        type: {
-          name: 'Boolean',
-        },
-      },
-      {
-        name: 'String',
-        label: { en: 'String' },
-        type: {
-          name: 'String',
-        },
-      },
-    ],
-  },
-  ...custom,
-});
-
-describe('render', () => {
-  let props;
-  let wrapper;
-  beforeEach(() => {
-    props = createTestProps();
-    wrapper = shallow(<CustomFieldDefinitionsConnector {...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({
-        customFieldDefinitionsFetcher: {
-          isLoading: props.fetchTypeDefinitionsQuery.loading,
-          customFieldDefinitions:
-            props.fetchTypeDefinitionsQuery.customFieldDefinitions,
-        },
-      })
-    );
-  });
-});
-
-describe('mapDataToProps', () => {
-  describe('when no types ready', () => {
-    it('should return the data object', () => {
-      expect(
-        mapDataToProps({
-          fetchTypeDefinitionsQuery: { loading: true },
-          locale: 'en',
-        })
-      ).toEqual({
-        fetchTypeDefinitionsQuery: { loading: true },
-      });
-    });
-  });
-  describe('when types are ready', () => {
-    it('should return the custom fields definitions object', () => {
-      expect(
-        mapDataToProps({
-          locale: 'en',
-          fetchTypeDefinitionsQuery: {
-            loading: false,
-            typeDefinitions: {
-              results: [
-                {
-                  fieldDefinitions: [
-                    {
-                      labelAllLocales: [
-                        { value: 'definition-1-label-en', locale: 'en' },
-                        { value: 'definition-1-label-de', locale: 'de' },
-                      ],
-                      name: 'definition-1-name',
-                      type: { name: 'Boolean' },
-                    },
-                    {
-                      labelAllLocales: [
-                        { value: 'definition-2-label-en', locale: 'en' },
-                        { value: 'definition-2-label-de', locale: 'de' },
-                      ],
-                      name: 'definition-2-name',
-                      type: { name: 'Number' },
-                    },
-                  ],
-                },
-                {
-                  fieldDefinitions: [
-                    {
-                      labelAllLocales: [
-                        { value: 'definition-3-label-en', locale: 'en' },
-                        { value: 'definition-3-label-de', locale: 'de' },
-                      ],
-                      name: 'definition-3-name',
-                      type: { name: 'Set-String' },
-                    },
-                    {
-                      labelAllLocales: [
-                        { value: 'definition-4-label-en', locale: 'en' },
-                        { value: 'definition-4-label-de', locale: 'de' },
-                      ],
-                      name: 'definition-4-name',
-                      type: { name: 'LocalizedString' },
-                    },
-                  ],
-                },
-              ],
-            },
-          },
-        })
-      ).toEqual({
-        fetchTypeDefinitionsQuery: {
-          loading: false,
-          customFieldDefinitions: [
-            {
-              name: 'definition-1-name',
-              label: {
-                en: 'definition-1-label-en',
-                de: 'definition-1-label-de',
-              },
-              type: { name: 'Boolean' },
-            },
-            {
-              name: 'definition-2-name',
-              label: {
-                en: 'definition-2-label-en',
-                de: 'definition-2-label-de',
-              },
-              type: { name: 'Number' },
-            },
-            {
-              name: 'definition-3-name',
-              label: {
-                en: 'definition-3-label-en',
-                de: 'definition-3-label-de',
-              },
-              type: { name: 'Set-String' },
-            },
-            {
-              name: 'definition-4-name',
-              label: {
-                en: 'definition-4-label-en',
-                de: 'definition-4-label-de',
-              },
-              type: { name: 'LocalizedString' },
-            },
-          ],
-        },
-      });
-    });
-  });
-  describe('when repeated field definitions', () => {
-    it('should return an array with no repeated definitions', () => {
-      expect(
-        mapDataToProps({
-          locale: 'en',
-          fetchTypeDefinitionsQuery: {
-            loading: false,
-            typeDefinitions: {
-              results: [
-                {
-                  fieldDefinitions: [
-                    {
-                      labelAllLocales: [
-                        { value: 'definition-1-label-en', locale: 'en' },
-                        { value: 'definition-1-label-de', locale: 'de' },
-                      ],
-                      name: 'definition-1-name',
-                      type: { name: 'Boolean' },
-                    },
-                    {
-                      labelAllLocales: [
-                        { value: 'definition-2-label-en', locale: 'en' },
-                        { value: 'definition-2-label-de', locale: 'de' },
-                      ],
-                      name: 'definition-2-name',
-                      type: { name: 'String' },
-                    },
-                  ],
-                },
-                {
-                  fieldDefinitions: [
-                    {
-                      labelAllLocales: [
-                        { value: 'definition-1-label-en', locale: 'en' },
-                        { value: 'definition-1-label-de', locale: 'de' },
-                      ],
-                      name: 'definition-1-name',
-                      type: { name: 'Boolean' },
-                    },
-                    {
-                      labelAllLocales: [
-                        { value: 'definition-3-label-en', locale: 'en' },
-                        { value: 'definition-3-label-de', locale: 'de' },
-                      ],
-                      name: 'definition-3-name',
-                      type: { name: 'LocalizedString' },
-                    },
-                  ],
-                },
-              ],
-            },
-          },
-        })
-      ).toEqual({
-        fetchTypeDefinitionsQuery: {
-          loading: false,
-          customFieldDefinitions: [
-            {
-              name: 'definition-1-name',
-              label: {
-                en: 'definition-1-label-en',
-                de: 'definition-1-label-de',
-              },
-              type: { name: 'Boolean' },
-            },
-            {
-              name: 'definition-2-name',
-              label: {
-                en: 'definition-2-label-en',
-                de: 'definition-2-label-de',
-              },
-              type: { name: 'String' },
-            },
-            {
-              name: 'definition-3-name',
-              label: {
-                en: 'definition-3-label-en',
-                de: 'definition-3-label-de',
-              },
-              type: { name: 'LocalizedString' },
-            },
-          ],
-        },
-      });
-    });
-  });
-});
-
-describe('lifecycle', () => {
-  let props;
-  let wrapper;
-  describe('componentDidMount', () => {
-    describe('when all the resource are not valid', () => {
-      beforeEach(() => {
-        props = createTestProps({ resources: ['Foo', 'Bar'] });
-        wrapper = shallow(<CustomFieldDefinitionsConnector {...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(<CustomFieldDefinitionsConnector {...props} />);
-        wrapper.instance().componentDidMount();
-      });
-      it('should invoke `invariant`', () => {
-        expect(invariant).toHaveBeenCalled();
-      });
-    });
-  });
-});

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

@@ -1,3 +0,0 @@
-export { default } from './custom-field-definitions-connector';
-
-export { handlers as customFieldDefinitionsMockHanders } from './mocks';

package/src/custom-fields/custom-field-definitions-connector/mocks/handlers.js

@@ -1,16 +0,0 @@
-import { graphql } from 'msw';
-
-const handlers = {
-  TypeDefinitions: {
-    all: (typeDefinitions) =>
-      graphql.query('FetchTypeDefinitionsQuery', (req, res, ctx) =>
-        res(
-          ctx.data({
-            typeDefinitions,
-          })
-        )
-      ),
-  },
-};
-
-export default handlers;

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

@@ -1,4 +0,0 @@
-/* eslint-disable import/prefer-default-export */
-import handlers from './handlers';
-
-export { handlers };

package/src/custom-fields/custom-field-type-definitions-connector/README.md

@@ -1,193 +0,0 @@
-## `CustomFieldTypeDefinitionsConnector`
-
-A Connector that injects the custom field definitions for the requested resources. Whenever is called, it injects a new object `customFieldTypeDefinitionsFetcher` as prop containing all the custom field definitions for the provided resources and information about loading state.
-
-Where the key in the object is the custom field definition name and the value is an object containing the custom field definition label and the custom field definition type. The label is just a string, this is a result of the GraphQL query which is already retrieving the label in the corresponding locale.
-
-## Usage
-
-```js
-import CustomFieldTypeDefinitionsConnector from '@commercetools-local/core/src/components/custom-field-type-definitions-connector';
-
-<CustomFieldTypeDefinitionsConnector resources={['order']}>
-  {({ customFieldTypeDefinitionsFetcher }) => (
-    <MyAwesomeComponent
-      customFieldTypeDefinitionsFetcher={customFieldTypeDefinitionsFetcher}
-    />
-  )}
-</CustomFieldTypeDefinitionsConnector>;
-```
-
-## API
-
-### Example
-
-For instance if we want to get all the custom field type definitions set in the project for channels we can get them by adding the following:
-
-```js
-import CustomFieldTypeDefinitionsConnector from '@commercetools-local/core/src/components/custom-field-type-definitions-connector';
-
-<CustomFieldTypeDefinitionsConnector resources={['channel']}>
-  {({ customFieldTypeDefinitionsFetcher }) => (
-    <MyAwesomeComponent
-      customFieldTypeDefinitionsFetcher={customFieldTypeDefinitionsFetcher}
-    />
-  )}
-</CustomFieldTypeDefinitionsConnector>;
-```
-
-Another case can be getting all the custom field type definitions for custom line items and line items. We can do it easily by adding:
-
-```js
-<CustomFieldTypeDefinitionsConnector
-  resources={['line-item', 'custom-line-item']}
->
-  {({ customFieldTypeDefinitionsFetcher }) => (
-    <MyAwesomeComponent
-      customFieldTypeDefinitionsFetcher={customFieldTypeDefinitionsFetcher}
-    />
-  )}
-</CustomFieldTypeDefinitionsConnector>
-```
-
-In case invalid resources are passed, an error will popup with the invalid one.
-
-```js
-<CustomFieldTypeDefinitionsConnector resources={['channel', 'custom-channel']}>
-  {({ customFieldTypeDefinitionsFetcher }) => (
-    <MyAwesomeComponent
-      customFieldTypeDefinitionsFetcher={customFieldTypeDefinitionsFetcher}
-    />
-  )}
-</CustomFieldTypeDefinitionsConnector>
-```
-
-This will throw an error. Whenever we have a typo, an error is thrown informing about the resource which is not correctly set.
-
-### Arguments
-
-- `resources` (`string[]`): Names of the resources we want to get the custom fields type definitions. You can find all the available resources [here](https://dev.commercetools.com/http-api-projects-custom-fields.html#customizable-resources)
-
-## Utilities
-
-The connector offers some utilities for transforming and parsing data so can be used in forms and send it afterwards in the correct shape.
-
-### `restDocToForm`
-
-Transforms the custom object coming from a REST request to a form shape.
-
-This should be used inside `docToFormValues` if the connector injects data coming from a REST request.
-
-> NOTE: Temporary utility until we have all entities in the GraphQL schema.
-
-```js
-import CustomFieldTypeDefinitionsConnector from '@commercetools-local/core/src/components/custom-field-type-definitions-connector';
-
-CustomFieldTypeDefinitionsConnector.restDocToForm({
-  custom: {
-    type: {
-      id: 'test',
-      obj: { key: 'test1': fieldDefinitions: [...], name: {...} }
-    },
-    fields: { customField1: 'one', customField2: 'two'}
-});
-// -> {
-//   fields: { customField1: 'one', customField2: 'two' },
-//   type: { id: 'test', key: 'test1': fieldDefinitions: [...], name: {...} }
-// }
-```
-
-### `graphQlDocToForm`
-
-Transforms the custom object coming from GraphqQL to a form shape.
-
-```js
-import CustomFieldTypeDefinitionsConnector from '@commercetools-local/core/src/components/custom-field-type-definitions-connector';
-
-CustomFieldTypeDefinitionsConnector.graphQlDocToForm({
-  id: 'test',
-  key: 'test1',
-  nameAllLocales: [...],
-  fieldDefinitions: [...]
-});
-// -> {
-//   fields: {},
-//   type: { id: 'test', key: 'test1': fieldDefinitions: [...], name: {...} }
-// }
-```
-
-### `formToRestDoc`
-
-Transforms a form shape custom object to the original REST shape of the document (channel, order, ...).
-
-The usage should be (if possible) inside `formValuesToDoc`. It's useful for building the custom object for `sync-actions`
-
-```js
-import CustomFieldTypeDefinitionsConnector from '@commercetools-local/core/src/components/custom-field-type-definitions-connector';
-
-CustomFieldTypeDefinitionsConnector.formToRestDoc({
-  type: {
-    id: 'tes t',
-    key: 'test1',
-    fieldDefinitions: [...],
-    name: {...}
-   },
-   fields: { customField1: 'one', customField2: 'two'}
-});
-// -> {
-//   fields: { customField1: 'one', customField2: 'two'},
-//   type: {
-//      id: 'test',
-//      typeId: 'type',
-//      obj: { key: 'test1': fieldDefinitions: [...], name: {...} }
-//  }
-```
-
-### `formToGraphQlDoc`
-
-Transforms a form shape custom object to the original GraphQL shape of the document (channel, order, ...).
-
-```js
-import CustomFieldTypeDefinitionsConnector from '@commercetools-local/core/src/components/custom-field-type-definitions-connector';
-
-CustomFieldTypeDefinitionsConnector.formToGraphQlDoc({
-  type: {
-    id: 'test',
-    key: 'test1',
-    fieldDefinitions: [...],
-    name: {...}
-   },
-   fields: { customField1: 'one', customField2: 'two'}
-});
-// -> {
-//   fields: { customField1: 'one', customField2: 'two'},
-//   type: {
-//      id: 'test',
-//      typeId: 'type',
-//      obj: { key: 'test1': fieldDefinitions: [...], name: {...} }
-//  }
-```
-
-### `createEmptyCustomFields`
-
-Creates an empty custom object to be used in forms.
-
-This should be used in a `createInitialValues`, `docToFormValues` or if you want to reset the `custom` attribute of an entity in a form.
-
-```js
-import CustomFieldTypeDefinitionsConnector from '@commercetools-local/core/src/components/custom-field-type-definitions-connector';
-
-CustomFieldTypeDefinitionsConnector.formToGraphQlDoc({
-  type: {
-    id: 'test',
-    key: 'test1',
-    fieldDefinitions: [...],
-    name: {...}
-   },
-   fields: { customField1: 'one', customField2: 'two'}
-});
-// -> {
-//   fields: [{ name: 'customField1', value: 'one }, { name: 'customField2', value: 'two }],
-//   typeId: 'test',
-// }
-```

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

@@ -1,7 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`render should match snapshot 1`] = `
-<div
-  className="child"
-/>
-`;