@commercetools-frontend/experimental-components 0.0.2 → 0.0.3

package/src/hooks/use-persisted-reminder/use-persisted-reminder.spec.js

@@ -1,114 +0,0 @@
-import PropTypes from 'prop-types';
-import {
-  screen,
-  renderApp,
-  fireEvent,
-  act,
-} from '@commercetools-frontend/application-shell/test-utils';
-import { REMINDER_OPTION_1_HOUR } from '../../constants';
-import usePersistedReminder from './use-persisted-reminder';
-
-jest.useFakeTimers();
-
-const TestComponent = (props) => {
-  const [hasReminderExpired, hasChosenReminderRef, scheduleReminder] =
-    usePersistedReminder({
-      ...(props.reminderInterval && {
-        reminderInterval: props.reminderInterval,
-      }),
-      ...(props.pollingInterval && { pollingInterval: props.pollingInterval }),
-      ...{ storageKey: 'test-storage-key' },
-    });
-
-  return (
-    <ul>
-      <li>Expired: {hasReminderExpired ? 'Yes' : 'No'}</li>
-      <li>Reminder chosen: {hasChosenReminderRef.current ? 'Yes' : 'No'}</li>
-      <button onClick={() => scheduleReminder()}>Remind me later</button>
-    </ul>
-  );
-};
-TestComponent.propTypes = {
-  reminderInterval: PropTypes.string,
-  pollingInterval: PropTypes.number,
-};
-
-const render = ({ props } = {}) => {
-  const rendered = renderApp(<TestComponent {...props} />);
-  const clickReminder = () =>
-    fireEvent.click(screen.getByText(/Remind me later/i));
-
-  return {
-    clickReminder,
-    ...rendered,
-  };
-};
-
-describe('when the reminder is rendered for the first time', () => {
-  it('should indicate that the reminder has not been set yet', async () => {
-    window.localStorage.clear();
-
-    render();
-
-    await screen.findByText(/Expired: No/i);
-
-    await screen.findByText(/Reminder chosen: No/i);
-  });
-});
-
-describe('when the reminder has been set', () => {
-  it("should indicate the reminder has been set and hasn't expired yet", async () => {
-    window.localStorage.clear();
-
-    const { clickReminder } = render();
-
-    await screen.findByText(/Expired: No/i);
-
-    clickReminder();
-
-    await screen.findByText(/Reminder chosen: Yes/i);
-  });
-});
-
-describe('when the reminder has been set and not expired yet', () => {
-  it('should indicate the reminder has not expired yet', async () => {
-    window.localStorage.clear();
-
-    const { clickReminder } = render();
-
-    clickReminder();
-
-    await screen.findByText(/Expired: No/i);
-
-    await screen.findByText(/Reminder chosen: Yes/i);
-  });
-});
-
-describe('when the reminder has been set and expired', () => {
-  it('should indicate the reminder has expired', async () => {
-    window.localStorage.clear();
-
-    const reminderInterval = REMINDER_OPTION_1_HOUR;
-    const pollingInterval = 1;
-
-    const { clickReminder } = render({
-      props: {
-        reminderInterval,
-        pollingInterval,
-      },
-    });
-
-    clickReminder();
-
-    await screen.findByText(/Expired: No/i);
-
-    // NOTE: 4000000ms > 3600000ms which is 1h + interval.
-    act(() => {
-      jest.advanceTimersByTime(4000000);
-    });
-
-    expect(screen.getByText(/Expired: Yes/i)).toBeInTheDocument();
-
-    expect(screen.getByText(/Reminder chosen: Yes/i)).toBeInTheDocument();
-  });
-});

package/src/hooks/use-persisted-table-configuration/index.js

@@ -1 +0,0 @@
-export { default } from './use-persisted-table-configuration';

package/src/hooks/use-persisted-table-configuration/use-persisted-table-configuration.js

@@ -1,136 +0,0 @@
-import { useMemo, useCallback } from 'react';
-import pick from 'lodash.pick';
-import useStorage from '../use-storage';
-
-const prepareMutableColumnProps = (columnConfig, mutableColumnProps) => {
-  const updatedColumnProps = {};
-  mutableColumnProps.forEach((columnProp) => {
-    if (Object.prototype.hasOwnProperty.call(columnConfig, columnProp)) {
-      updatedColumnProps[columnProp] = columnConfig[columnProp];
-    }
-  });
-  return updatedColumnProps;
-};
-
-// Remove cachedColumns incase they are not part of allAvailableColumns (needed for toggled columns)
-// Then find the intial config and append the cached data to it
-const retrieveColumnsWithCachedConfiguration = ({
-  allAvailableColumnsConfiguration,
-  cachedVisibleTableConfiguration,
-  mutableColumnProps,
-}) =>
-  cachedVisibleTableConfiguration
-    .filter((cachedColumn) =>
-      allAvailableColumnsConfiguration.find(
-        (initialConfig) => initialConfig.key === cachedColumn.key
-      )
-    )
-    .map((cachedConfig) => {
-      const initialColumnConfig = allAvailableColumnsConfiguration.find(
-        (initialConfig) => initialConfig.key === cachedConfig.key
-      );
-      return {
-        ...initialColumnConfig,
-        ...prepareMutableColumnProps(cachedConfig, mutableColumnProps),
-      };
-    });
-
-const handleCacheUpdate = ({
-  update,
-  cachedVisibleTableConfiguration,
-  updateCachedTableConfiguration,
-}) =>
-  updateCachedTableConfiguration({
-    // since this feature is being used for quite sometime
-    // inorder to cleanup the local cache, we make that the cache value has only columnsConfig and displaySettings
-    ...pick(cachedVisibleTableConfiguration, [
-      'columnsConfig',
-      'displaySettings',
-    ]),
-    ...update,
-  });
-
-// Signature:
-// ColumnSettings => {key: String<columnsKey>, width: String<columnWidth>}
-// displaySettings => {isWrappingText: boolean, isCondensed: boolean}
-// allAvailableColumnsConfiguration => Array<ColumnSettings>
-// initialVisibleColumnKeys => List of initial visible columns keys
-// tableConfigurationStorageKey => storage key used for storing data in either local or session storages
-// mutableColumnProps => props of column that could be changed (mutated)
-// storageKey => location where the table config will be stored
-// displaySettings => table's display layout settings
-const usePersistedTableConfiguration = (props) => {
-  const {
-    allAvailableColumnsConfiguration,
-    initialVisibleColumnKeys,
-    tableConfigurationStorageKey,
-    mutableColumnProps = ['width'],
-    storageType = 'local',
-    displaySettings = { isWrappingText: false, isCondensed: false },
-  } = props;
-  const mappedInitialTableConfiguration = useMemo(() => {
-    return {
-      columnsConfig: initialVisibleColumnKeys.map((visibleColumnKey) => {
-        const visibleColumnConfig = allAvailableColumnsConfiguration.find(
-          (columnConfig) => columnConfig.key === visibleColumnKey
-        );
-        return {
-          key: visibleColumnKey,
-          ...prepareMutableColumnProps(visibleColumnConfig, mutableColumnProps),
-        };
-      }),
-      displaySettings,
-    };
-  }, [
-    allAvailableColumnsConfiguration,
-    initialVisibleColumnKeys,
-    mutableColumnProps,
-    displaySettings,
-  ]);
-  const [cachedVisibleTableConfiguration, updateCachedTableConfiguration] =
-    useStorage(
-      tableConfigurationStorageKey,
-      // initialize with all the available columns
-      mappedInitialTableConfiguration,
-      {
-        storageType,
-      }
-    );
-
-  /** The useStorage() hook won't store the key in the storage unless the component is fully rendered first.
-   * Therefore, if it will be missing from the local storage and hence we use the [] as default.
-   */
-  const getVisibleColumns = useCallback(() => {
-    if (cachedVisibleTableConfiguration?.columnsConfig) {
-      return retrieveColumnsWithCachedConfiguration({
-        allAvailableColumnsConfiguration,
-        cachedVisibleTableConfiguration:
-          cachedVisibleTableConfiguration.columnsConfig,
-        mutableColumnProps,
-      });
-    }
-    return allAvailableColumnsConfiguration;
-  }, [
-    allAvailableColumnsConfiguration,
-    cachedVisibleTableConfiguration,
-    mutableColumnProps,
-  ]);
-  const visibleColumns = getVisibleColumns();
-  const visibleColumnKeys = visibleColumns.map((column) => column.key);
-
-  return {
-    visibleColumns,
-    visibleColumnKeys,
-    cachedVisibleColumnsConfiguration:
-      cachedVisibleTableConfiguration?.columnsConfig,
-    cachedDisplaySettings: cachedVisibleTableConfiguration?.displaySettings,
-    handleCachedTableConfigurationUpdate: (update) =>
-      handleCacheUpdate({
-        update,
-        cachedVisibleTableConfiguration,
-        updateCachedTableConfiguration,
-      }),
-  };
-};
-
-export default usePersistedTableConfiguration;

package/src/hooks/use-persisted-table-configuration/use-persisted-table-configuration.spec.js

@@ -1,170 +0,0 @@
-import { hooks } from '@commercetools-frontend/application-shell/test-utils';
-import { act } from 'react-test-renderer';
-import usePersistedTableConfiguration from './use-persisted-table-configuration';
-
-const allAvailableColumnsConfiguration = [
-  { key: 'key', isSortable: true, width: '100px' },
-  { key: 'name', isSortable: true, width: '200px' },
-  { key: 'city', isSortable: true, width: '300px' },
-];
-const keysOfAllAvailableColumns = allAvailableColumnsConfiguration.map(
-  (column) => column.key
-);
-
-const subsetOfAllAvailableColumns = [
-  allAvailableColumnsConfiguration[0],
-  allAvailableColumnsConfiguration[1],
-];
-const keysOfSubsetOfAllAvailableColumns = subsetOfAllAvailableColumns.map(
-  (column) => column.key
-);
-const mappedAllAvailableColumnsConfiguration =
-  allAvailableColumnsConfiguration.map((columnConfig) => ({
-    key: columnConfig.key,
-    width: columnConfig.width,
-  }));
-const updatedColumnsConfiguration = [
-  { key: 'key', isSortable: true, width: '200px' },
-  { key: 'name', isSortable: true, width: '300px' },
-];
-const mappedUpdatedColumnsConfiguration = updatedColumnsConfiguration.map(
-  (columnConfig) => ({ key: columnConfig.key, width: columnConfig.width })
-);
-const tableConfigurationStorageKey = 'god-speed';
-
-const render = async (props) => {
-  const rendered = hooks.renderHook(() =>
-    usePersistedTableConfiguration(props)
-  );
-
-  return {
-    ...rendered,
-  };
-};
-
-describe('usePersistedTableConfiguration', () => {
-  beforeEach(() => {
-    window.localStorage.clear();
-  });
-  describe('when all columns in allAvailableColumnsConfiguration are visible', () => {
-    it('should return the visibleColumns same as the all available column config', async () => {
-      const { result } = await render({
-        allAvailableColumnsConfiguration,
-        initialVisibleColumnKeys: keysOfAllAvailableColumns,
-        tableConfigurationStorageKey,
-      });
-      expect(result.current.visibleColumns).toEqual(
-        allAvailableColumnsConfiguration
-      );
-    });
-    it('should return the visibleColumnKeys similar to those of all available columns', async () => {
-      const { result } = await render({
-        allAvailableColumnsConfiguration,
-        initialVisibleColumnKeys: keysOfAllAvailableColumns,
-        tableConfigurationStorageKey,
-      });
-      expect(result.current.visibleColumnKeys).toEqual(
-        keysOfAllAvailableColumns
-      );
-    });
-    it('should return cachedVisibleColumnsConfiguration having key and width props', async () => {
-      const { result } = await render({
-        allAvailableColumnsConfiguration,
-        initialVisibleColumnKeys: keysOfAllAvailableColumns,
-        tableConfigurationStorageKey,
-      });
-
-      expect(result.current.cachedVisibleColumnsConfiguration).toEqual(
-        mappedAllAvailableColumnsConfiguration
-      );
-    });
-
-    it('should update the cached columns config properly', async () => {
-      const { result } = await render({
-        allAvailableColumnsConfiguration,
-        initialVisibleColumnKeys: keysOfAllAvailableColumns,
-        tableConfigurationStorageKey,
-      });
-
-      act(() => {
-        result.current.handleCachedTableConfigurationUpdate({
-          columnsConfig: mappedUpdatedColumnsConfiguration,
-        });
-      });
-
-      expect(result.current.visibleColumns).toEqual(
-        updatedColumnsConfiguration
-      );
-    });
-  });
-  describe('when subset of columns in allAvailableColumnsConfiguration are visible', () => {
-    it('should return visibleColumns as subset of all available columns', async () => {
-      const { result } = await render({
-        allAvailableColumnsConfiguration,
-        initialVisibleColumnKeys: keysOfSubsetOfAllAvailableColumns,
-        tableConfigurationStorageKey,
-      });
-      expect(result.current.visibleColumns).toEqual(
-        subsetOfAllAvailableColumns
-      );
-    });
-    it('should return visibleColumnKeys that are keys of the subset columns of all available columns', async () => {
-      const { result } = await render({
-        allAvailableColumnsConfiguration,
-        initialVisibleColumnKeys: keysOfSubsetOfAllAvailableColumns,
-        tableConfigurationStorageKey,
-      });
-      expect(result.current.visibleColumnKeys).toEqual(
-        keysOfSubsetOfAllAvailableColumns
-      );
-    });
-  });
-  describe('displaySettings', () => {
-    it('should return the default displaySettings', async () => {
-      const { result } = await render({
-        allAvailableColumnsConfiguration,
-        initialVisibleColumnKeys: keysOfAllAvailableColumns,
-        tableConfigurationStorageKey,
-      });
-      expect(result.current.cachedDisplaySettings).toEqual({
-        isWrappingText: false,
-        isCondensed: false,
-      });
-    });
-
-    it('should initialize cache with specified the displaySettings', async () => {
-      const { result } = await render({
-        allAvailableColumnsConfiguration,
-        initialVisibleColumnKeys: keysOfAllAvailableColumns,
-        tableConfigurationStorageKey,
-        displaySettings: { isWrappingText: true, isCondensed: true },
-      });
-      expect(result.current.cachedDisplaySettings).toEqual({
-        isWrappingText: true,
-        isCondensed: true,
-      });
-    });
-
-    it('should update the cached display settings properly', async () => {
-      const { result } = await render({
-        allAvailableColumnsConfiguration,
-        initialVisibleColumnKeys: keysOfAllAvailableColumns,
-        tableConfigurationStorageKey,
-      });
-
-      act(() => {
-        result.current.handleCachedTableConfigurationUpdate({
-          displaySettings: {
-            isWrappingText: true,
-            isCondensed: false,
-          },
-        });
-      });
-
-      expect(result.current.cachedDisplaySettings).toEqual({
-        isWrappingText: true,
-        isCondensed: false,
-      });
-    });
-  });
-});

package/src/hooks/use-previous/index.js

@@ -1 +0,0 @@
-export { default } from './use-previous';

package/src/hooks/use-previous/use-previous.js

@@ -1,12 +0,0 @@
-import { useEffect, useRef } from 'react';
-
-const usePrevious = (value) => {
-  const ref = useRef();
-  useEffect(() => {
-    ref.current = value;
-  }, [value]);
-
-  return ref.current;
-};
-
-export default usePrevious;

package/src/hooks/use-previous/use-previous.spec.js

@@ -1,25 +0,0 @@
-import { renderHook } from '@testing-library/react-hooks';
-import usePrevious from './use-previous';
-
-const renderUsePrevious = () =>
-  renderHook(({ name }) => usePrevious(name), {
-    initialProps: { name: 'test name 1' },
-  });
-
-describe('usePrevious', () => {
-  it('should return undefined on initial render', () => {
-    const { result } = renderUsePrevious();
-
-    expect(result.current).toBeUndefined();
-  });
-
-  it('should always return previous state after each update', () => {
-    const { result, rerender } = renderUsePrevious();
-
-    rerender({ name: 'test name 2' });
-    expect(result.current).toBe('test name 1');
-
-    rerender({ name: 'test name 3' });
-    expect(result.current).toBe('test name 2');
-  });
-});

package/src/hooks/use-product-selections-fetcher/conversions.js

@@ -1,15 +0,0 @@
-import { applyTransformedLocalizedFields } from '@commercetools-frontend/l10n';
-
-// eslint-disable-next-line import/prefer-default-export
-export const convertProductSelectionsFromGraphQl = (productSelections) =>
-  productSelections?.results && {
-    ...productSelections,
-    results: productSelections.results.map((productSelection) => ({
-      ...applyTransformedLocalizedFields(productSelection, [
-        {
-          from: 'nameAllLocales',
-          to: 'name',
-        },
-      ]),
-    })),
-  };

package/src/hooks/use-product-selections-fetcher/fetch-product-selections.ctp.graphql

@@ -1,18 +0,0 @@
-query FetchProductSelections($limit: Int, $offset: Int, $sort: [String!]) {
-  productSelections(limit: $limit, offset: $offset, sort: $sort) {
-    total
-    count
-    offset
-    results {
-      id
-      version
-      key
-      nameAllLocales {
-        locale
-        value
-      }
-      createdAt
-      lastModifiedAt
-    }
-  }
-}

package/src/hooks/use-product-selections-fetcher/index.js

@@ -1,2 +0,0 @@
-export { default } from './use-product-selections-fetcher';
-export { handlers as productSelectionsFetcherMockHandler } from './mocks';

package/src/hooks/use-product-selections-fetcher/mocks/handlers.js

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

package/src/hooks/use-product-selections-fetcher/mocks/index.js

@@ -1,3 +0,0 @@
-import handlers from './handlers';
-
-export { handlers };

package/src/hooks/use-product-selections-fetcher/use-product-selections-fetcher.js

@@ -1,39 +0,0 @@
-import { useQuery } from '@apollo/client/react/hooks';
-import { GRAPHQL_TARGETS } from '@commercetools-frontend/constants';
-import { convertProductSelectionsFromGraphQl } from './conversions';
-import { FetchProductSelections } from './fetch-product-selections.ctp.graphql';
-
-const createQueryVariables = (ownProps) => ({
-  limit: ownProps.limit,
-  offset: ownProps.offset,
-  sort: ownProps.sort,
-});
-
-const emptyProductSelections = {
-  total: 0,
-  count: 0,
-  offset: 0,
-  results: [],
-};
-
-const useProductSelectionsFetcher = (props) => {
-  const queryVariables = createQueryVariables(props);
-
-  const { loading, data, refetch } = useQuery(FetchProductSelections, {
-    context: {
-      target: GRAPHQL_TARGETS.COMMERCETOOLS_PLATFORM,
-    },
-    variables: queryVariables,
-    fetchPolicy: 'network-only',
-  });
-
-  return {
-    isLoading: loading,
-    productSelections:
-      convertProductSelectionsFromGraphQl(data?.productSelections) ||
-      emptyProductSelections,
-    refetch,
-  };
-};
-
-export default useProductSelectionsFetcher;

package/src/hooks/use-product-selections-fetcher/use-product-selections-fetcher.spec.js

@@ -1,71 +0,0 @@
-import { LocalizedString } from '@commercetools-test-data/commons';
-import { buildGraphqlList } from '@commercetools-test-data/core';
-import { setupServer } from 'msw/node';
-import { hooks } from '@commercetools-frontend/application-shell/test-utils';
-import { ProductSelection } from '@commercetools-local/test-data';
-import { handlers } from './mocks';
-import useProductSelectionsFetcher from './use-product-selections-fetcher';
-
-// create mock data
-const productSelectionId = '98a626bc-c323-4bcf-8fae-2caa2e7923dc';
-const productSelectionKey = 'star-lab-product-selection';
-const productSelectionEnglishName = 'Star Lab Product Selection';
-const localizedProductSelectionName = LocalizedString.presets
-  .empty()
-  .en(productSelectionEnglishName);
-const testProductSelection = ProductSelection.random()
-  .id(productSelectionId)
-  .key(productSelectionKey)
-  .name(localizedProductSelectionName);
-const productSelectionList = buildGraphqlList([testProductSelection], {
-  name: 'ProductSelection',
-  total: 1,
-});
-
-// setup mock server
-const mockServer = setupServer(
-  handlers.ProductSelections.all(productSelectionList)
-);
-afterEach(() => {
-  mockServer.resetHandlers();
-});
-beforeAll(() => mockServer.listen({ onUnhandledRequest: 'error' }));
-afterAll(() => mockServer.close());
-
-// render
-const render = async (custom = {}) => {
-  const rendered = hooks.renderHook(() => useProductSelectionsFetcher({}), {
-    disableApolloMocks: true,
-    ...custom,
-  });
-
-  return {
-    waitUntilReady: rendered.waitForNextUpdate,
-    ...rendered,
-  };
-};
-
-describe('useProductSelectionsFetcher', () => {
-  it('should return the product selection list', async () => {
-    const { waitUntilReady, result } = await render();
-    // check the loading state
-    expect(result.current.isLoading).toBeTruthy();
-
-    // wait for the rendering to complete
-    await waitUntilReady();
-
-    // check the loading state and rest of the response
-    expect(result.current.isLoading).toBeFalsy();
-    expect(result.current.productSelections.total).toEqual(1);
-    expect(result.current.productSelections.results).toHaveLength(1);
-    expect(result.current.productSelections.results[0].id).toEqual(
-      productSelectionId
-    );
-    expect(result.current.productSelections.results[0].key).toEqual(
-      productSelectionKey
-    );
-    expect(result.current.productSelections.results[0].name.en).toEqual(
-      productSelectionEnglishName
-    );
-  });
-});

package/src/hooks/use-product-selections-total-fetcher/fetch-product-selections-total.ctp.graphql

@@ -1,5 +0,0 @@
-query FetchProductSelectionsTotal {
-  productSelections {
-    total
-  }
-}

package/src/hooks/use-product-selections-total-fetcher/index.js

@@ -1,2 +0,0 @@
-export { default } from './use-product-selections-total-fetcher';
-export { handlers as productSelectionsTotalFetcherMockHandler } from './mocks';

package/src/hooks/use-product-selections-total-fetcher/mocks/handlers.js

@@ -1,19 +0,0 @@
-import { graphql } from 'msw';
-
-const handlers = {
-  ProductSelections: {
-    total: (total) =>
-      graphql.query('FetchProductSelectionsTotal', (req, res, ctx) =>
-        res(
-          ctx.data({
-            productSelections: {
-              total,
-              __typename: 'ProductSelectionQueryResult',
-            },
-          })
-        )
-      ),
-  },
-};
-
-export default handlers;

package/src/hooks/use-product-selections-total-fetcher/mocks/index.js

@@ -1,3 +0,0 @@
-import handlers from './handlers';
-
-export { handlers };