From 9c737a8e990e2573d8089abe5d149acbcac82eac Mon Sep 17 00:00:00 2001 From: Aodhagan Murphy Date: Fri, 27 Oct 2023 22:42:31 +0100 Subject: [PATCH 1/5] chore: migrating reference editor to esm-only [] --- .../reference/{.eslintrc.js => .eslintrc.cjs} | 0 packages/reference/jest.config.js | 10 +++---- packages/reference/package.json | 21 ++++---------- .../reference/src/__fixtures__/FakeSdk.ts | 2 +- .../reference/src/__fixtures__/fixtures.ts | 10 +++---- .../WrappedAssetCard/AssetCardActions.tsx | 10 +++---- .../FetchingWrappedAssetCard.tsx | 14 +++++----- .../WrappedAssetCard/WrappedAssetCard.tsx | 11 ++++---- .../WrappedAssetCard/WrappedAssetLink.tsx | 15 ++++++---- packages/reference/src/common/EntityStore.tsx | 5 ++-- .../src/common/MultipleReferenceEditor.tsx | 14 +++++----- .../reference/src/common/ReferenceEditor.tsx | 11 ++++---- .../src/common/SingleReferenceEditor.tsx | 12 ++++---- .../reference/src/common/SortableLinkList.tsx | 10 +++---- .../src/common/useContentTypePermissions.ts | 8 +++--- .../src/common/useEditorPermissions.spec.ts | 5 ++-- .../src/common/useEditorPermissions.ts | 10 +++---- .../AssetThumbnail/AssetThumbnail.tsx | 2 +- .../CreateEntryLinkButton.spec.tsx | 7 +++-- .../CreateEntryLinkButton.tsx | 14 ++++------ .../CreateEntryMenuTrigger.spec.tsx | 15 +++++----- .../CreateEntryMenuTrigger.tsx | 16 +++++------ .../LinkActions/CombinedLinkActions.tsx | 11 ++++---- .../components/LinkActions/LinkActions.tsx | 10 +++---- .../LinkActions/LinkEntityActions.tsx | 10 +++---- .../LinkActions/NoLinkPermissionsInfo.tsx | 2 +- .../src/components/LinkActions/helpers.ts | 4 +-- .../MissingEntityCard/MissingEntityCard.tsx | 9 ++++-- .../ResourceEntityErrorCard.tsx | 6 ++-- .../UnsupportedEntityCard.tsx | 3 +- .../ScheduleTooltip.tsx | 7 ++--- .../ScheduledIconWithTooltip.tsx | 2 +- .../src/components/SpaceName/SpaceName.tsx | 4 ++- .../entries/MultipleEntryReferenceEditor.tsx | 13 ++++----- .../entries/SingleEntryReferenceEditor.tsx | 6 ++-- .../FetchingWrappedEntryCard.tsx | 23 ++++++++------- .../WrappedEntryCard/WrappedEntryCard.tsx | 28 +++++++++---------- packages/reference/src/entries/index.ts | 6 ++-- packages/reference/src/index.tsx | 23 ++++++++------- .../resources/Cards/ContentfulEntryCard.tsx | 4 +-- .../src/resources/Cards/ResourceCard.spec.tsx | 6 ++-- .../src/resources/Cards/ResourceCard.tsx | 11 ++++---- .../MultipleResourceReferenceEditor.spec.tsx | 6 ++-- .../MultipleResourceReferenceEditor.tsx | 27 ++++++++---------- .../SingleResourceReferenceEditor.spec.tsx | 9 +++--- .../SingleResourceReferenceEditor.tsx | 17 ++++++----- packages/reference/src/resources/index.ts | 4 +-- .../src/resources/useResourceLinkActions.ts | 3 +- packages/reference/src/types.ts | 2 +- .../src/utils/fromFieldValidations.ts | 2 +- packages/reference/src/utils/useSortIDs.ts | 2 +- .../MultipleEntryReferenceEditor.stories.tsx | 4 ++- .../stories/MultipleMediaEditor.stories.tsx | 5 +++- .../SingleEntryReferenceEditor.stories.tsx | 4 ++- .../stories/SingleMediaEditor.stories.tsx | 8 ++++-- packages/reference/tsconfig.json | 4 +-- yarn.lock | 28 +++++++++++-------- 57 files changed, 271 insertions(+), 264 deletions(-) rename packages/reference/{.eslintrc.js => .eslintrc.cjs} (100%) diff --git a/packages/reference/.eslintrc.js b/packages/reference/.eslintrc.cjs similarity index 100% rename from packages/reference/.eslintrc.js rename to packages/reference/.eslintrc.cjs diff --git a/packages/reference/jest.config.js b/packages/reference/jest.config.js index 2da53fcff..c0b29bf39 100644 --- a/packages/reference/jest.config.js +++ b/packages/reference/jest.config.js @@ -1,10 +1,8 @@ -/* eslint-disable */ +import baseConfig from '../../baseESMJestConfig.js'; +import packageJSON from './package.json' assert { type: 'json' }; -const baseConfig = require('../../baseJestConfig'); +const packageName = packageJSON.name.split('@contentful/')[1]; -const package = require('./package.json'); -const packageName = package.name.split('@contentful/')[1]; - -module.exports = { +export default { ...baseConfig(packageName), }; diff --git a/packages/reference/package.json b/packages/reference/package.json index 1fa2157ff..eb4c05f7f 100644 --- a/packages/reference/package.json +++ b/packages/reference/package.json @@ -1,17 +1,9 @@ { "name": "@contentful/field-editor-reference", "version": "5.19.0", - "main": "dist/cjs/index.js", - "module": "dist/esm/index.js", + "type": "module", + "main": "dist/esm/index.js", "types": "dist/types/index.d.ts", - "exports": { - ".": { - "types": "./dist/types/index.d.ts", - "require": "./dist/cjs/index.js", - "default": "./dist/cjs/index.js" - }, - "./package.json": "./package.json" - }, "files": [ "dist" ], @@ -23,12 +15,10 @@ }, "scripts": { "watch": "yarn concurrently \"yarn:watch:*\"", - "watch:cjs": "yarn build:cjs -w", "watch:esm": "yarn build:esm -w", "watch:types": "yarn build:types --watch", - "build": "yarn build:types && yarn build:cjs && yarn build:esm", + "build": "yarn build:types && yarn build:esm", "build:types": "tsc --outDir dist/types --emitDeclarationOnly", - "build:cjs": "swc src --config-file ../../.swcrc -d dist/cjs -C module.type=commonjs", "build:esm": "swc src --config-file ../../.swcrc -d dist/esm", "test": "jest --watch", "test:ci": "jest --ci", @@ -45,19 +35,20 @@ "@dnd-kit/sortable": "^7.0.2", "@tanstack/react-query": "^4.3.9", "@types/deep-equal": "^1.0.1", - "constate": "3.2.0", + "constate": "3.3.2", "contentful-management": "^10.14.0", "deep-equal": "2.2.2", "emotion": "^10.0.17", "lodash": "^4.17.15", "moment": "^2.20.0", - "p-queue": "^4.0.0", + "p-queue": "^7.4.1", "react-intersection-observer": "9.4.0", "type-fest": "2.17.0" }, "devDependencies": { "@contentful/app-sdk": "^4.17.1", "@contentful/field-editor-test-utils": "^1.4.3", + "@jest/globals": "29.7.0", "@testing-library/react-hooks": "^5.0.3" }, "peerDependencies": { diff --git a/packages/reference/src/__fixtures__/FakeSdk.ts b/packages/reference/src/__fixtures__/FakeSdk.ts index 81d4d0343..f8f1b59e4 100644 --- a/packages/reference/src/__fixtures__/FakeSdk.ts +++ b/packages/reference/src/__fixtures__/FakeSdk.ts @@ -8,7 +8,7 @@ import { import { CollectionProp, GetSpaceParams, LocaleProps } from 'contentful-management'; import { Emitter } from 'mitt'; -import { assets, contentTypes, entries, locales as localesFixtures, spaces } from './fixtures'; +import { assets, contentTypes, entries, locales as localesFixtures, spaces } from './fixtures.js'; const newLink = (linkType: string, id: string): Link => ({ sys: { diff --git a/packages/reference/src/__fixtures__/fixtures.ts b/packages/reference/src/__fixtures__/fixtures.ts index 7093a061e..2b62f1258 100644 --- a/packages/reference/src/__fixtures__/fixtures.ts +++ b/packages/reference/src/__fixtures__/fixtures.ts @@ -1,7 +1,7 @@ -import * as assets from './asset'; -import * as contentTypes from './content-type'; -import * as entries from './entry'; -import * as locales from './locale'; -import * as spaces from './space'; +import * as assets from './asset/index.js'; +import * as contentTypes from './content-type/index.js'; +import * as entries from './entry/index.js'; +import * as locales from './locale/index.js'; +import * as spaces from './space/index.js'; export { assets, contentTypes, entries, locales, spaces }; diff --git a/packages/reference/src/assets/WrappedAssetCard/AssetCardActions.tsx b/packages/reference/src/assets/WrappedAssetCard/AssetCardActions.tsx index f7b1a5a13..e71073442 100644 --- a/packages/reference/src/assets/WrappedAssetCard/AssetCardActions.tsx +++ b/packages/reference/src/assets/WrappedAssetCard/AssetCardActions.tsx @@ -1,12 +1,13 @@ import * as React from 'react'; -import { Menu, Text } from '@contentful/f36-components'; +import { Menu } from '@contentful/f36-menu'; import tokens from '@contentful/f36-tokens'; +import { Text } from '@contentful/f36-typography'; import { shortenStorageUnit } from '@contentful/field-editor-shared'; import { css } from 'emotion'; -import get from 'lodash/get'; +import get from 'lodash-es/get.js'; -import { File } from '../../types'; +import { File } from '../../types.js'; const styles = { dragHandle: css({ @@ -114,8 +115,7 @@ export function renderActions(props: { downloadAsset(entityFile.url); } }} - testId="card-action-download" - > + testId="card-action-download"> Download ) : null, diff --git a/packages/reference/src/assets/WrappedAssetCard/FetchingWrappedAssetCard.tsx b/packages/reference/src/assets/WrappedAssetCard/FetchingWrappedAssetCard.tsx index 0893f1a67..5a3631921 100644 --- a/packages/reference/src/assets/WrappedAssetCard/FetchingWrappedAssetCard.tsx +++ b/packages/reference/src/assets/WrappedAssetCard/FetchingWrappedAssetCard.tsx @@ -1,17 +1,17 @@ import * as React from 'react'; -import { AssetCard, EntryCard } from '@contentful/f36-components'; +import { AssetCard, EntryCard } from '@contentful/f36-card'; import { CustomEntityCardProps, CustomCardRenderer, RenderCustomMissingEntityCard, -} from '../../common/customCardTypes'; -import { useEntity, useEntityLoader } from '../../common/EntityStore'; -import { LinkActionsProps, MissingEntityCard } from '../../components'; -import { Action, Asset, FieldAppSDK, ViewType, RenderDragFn } from '../../types'; -import { WrappedAssetCard, WrappedAssetCardProps } from './WrappedAssetCard'; -import { WrappedAssetLink } from './WrappedAssetLink'; +} from '../../common/customCardTypes.js'; +import { useEntity, useEntityLoader } from '../../common/EntityStore.js'; +import { LinkActionsProps, MissingEntityCard } from '../../components/index.js'; +import { Action, Asset, FieldAppSDK, ViewType, RenderDragFn } from '../../types.js'; +import { WrappedAssetCard, WrappedAssetCardProps } from './WrappedAssetCard.js'; +import { WrappedAssetLink } from './WrappedAssetLink.js'; type FetchingWrappedAssetCardProps = { assetId: string; diff --git a/packages/reference/src/assets/WrappedAssetCard/WrappedAssetCard.tsx b/packages/reference/src/assets/WrappedAssetCard/WrappedAssetCard.tsx index df7798450..f442a0a38 100644 --- a/packages/reference/src/assets/WrappedAssetCard/WrappedAssetCard.tsx +++ b/packages/reference/src/assets/WrappedAssetCard/WrappedAssetCard.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { SpaceAPI } from '@contentful/app-sdk'; -import { AssetCard } from '@contentful/f36-components'; +import { AssetCard } from '@contentful/f36-card'; import { ClockIcon } from '@contentful/f36-icons'; import tokens from '@contentful/f36-tokens'; import { entityHelpers } from '@contentful/field-editor-shared'; @@ -9,9 +9,9 @@ import { entityHelpers } from '@contentful/field-editor-shared'; import mimetype from '@contentful/mimetype'; import { css } from 'emotion'; -import { MissingEntityCard, ScheduledIconWithTooltip } from '../../components'; -import { Asset, File, RenderDragFn } from '../../types'; -import { renderActions, renderAssetInfo } from './AssetCardActions'; +import { MissingEntityCard, ScheduledIconWithTooltip } from '../../components/index.js'; +import { Asset, File, RenderDragFn } from '../../types.js'; +import { renderActions, renderAssetInfo } from './AssetCardActions.js'; const groupToIconMap = { image: 'image', @@ -111,8 +111,7 @@ export const WrappedAssetCard = (props: WrappedAssetCardProps) => { + entityId={props.asset.sys.id}> { + entityId={props.asset.sys.id}> = { resource: R; diff --git a/packages/reference/src/common/MultipleReferenceEditor.tsx b/packages/reference/src/common/MultipleReferenceEditor.tsx index 54a8f0770..5ade01030 100644 --- a/packages/reference/src/common/MultipleReferenceEditor.tsx +++ b/packages/reference/src/common/MultipleReferenceEditor.tsx @@ -4,13 +4,13 @@ import { useCallback } from 'react'; import { DragStartEvent } from '@dnd-kit/core'; import { arrayMove } from '@dnd-kit/sortable'; -import { LinkEntityActions } from '../components'; -import { useLinkActionsProps } from '../components/LinkActions/LinkEntityActions'; -import { ReferenceValue, ContentEntityType, ContentType } from '../types'; -import { useSortIDs } from '../utils/useSortIDs'; -import { CustomEntityCardProps } from './customCardTypes'; -import { ReferenceEditor, ReferenceEditorProps } from './ReferenceEditor'; -import { useEditorPermissions } from './useEditorPermissions'; +import { LinkEntityActions } from '../components/index.js'; +import { useLinkActionsProps } from '../components/LinkActions/LinkEntityActions.js'; +import { ReferenceValue, ContentEntityType, ContentType } from '../types.js'; +import { useSortIDs } from '../utils/useSortIDs.js'; +import { CustomEntityCardProps } from './customCardTypes.js'; +import { ReferenceEditor, ReferenceEditorProps } from './ReferenceEditor.js'; +import { useEditorPermissions } from './useEditorPermissions.js'; type ChildProps = { entityType: ContentEntityType; diff --git a/packages/reference/src/common/ReferenceEditor.tsx b/packages/reference/src/common/ReferenceEditor.tsx index 77637b0ea..b6ff9aadb 100644 --- a/packages/reference/src/common/ReferenceEditor.tsx +++ b/packages/reference/src/common/ReferenceEditor.tsx @@ -3,10 +3,10 @@ import * as React from 'react'; import { FieldConnector } from '@contentful/field-editor-shared'; import deepEqual from 'deep-equal'; -import type { LinkActionsProps } from '../components'; -import { Action, ActionLabels, FieldAppSDK, ViewType } from '../types'; -import { CustomCardRenderer, RenderCustomMissingEntityCard } from './customCardTypes'; -import { EntityProvider } from './EntityStore'; +import type { LinkActionsProps } from '../components/index.js'; +import { Action, ActionLabels, FieldAppSDK, ViewType } from '../types.js'; +import { CustomCardRenderer, RenderCustomMissingEntityCard } from './customCardTypes.js'; +import { EntityProvider } from './EntityStore.js'; // TODO: Rename common base for reference/media editors to something neutral, // e.g. `LinkEditor`. @@ -53,8 +53,7 @@ export function ReferenceEditor( isInitiallyDisabled={props.isInitiallyDisabled} isEqualValues={(value1, value2) => { return deepEqual(value1, value2); - }} - > + }}> {props.children} diff --git a/packages/reference/src/common/SingleReferenceEditor.tsx b/packages/reference/src/common/SingleReferenceEditor.tsx index 1515308aa..52c48901e 100644 --- a/packages/reference/src/common/SingleReferenceEditor.tsx +++ b/packages/reference/src/common/SingleReferenceEditor.tsx @@ -1,12 +1,12 @@ import * as React from 'react'; import { useCallback } from 'react'; -import { LinkEntityActions } from '../components'; -import { useLinkActionsProps } from '../components/LinkActions/LinkEntityActions'; -import { ContentType, ContentEntityType, ReferenceValue } from '../types'; -import { CustomEntityCardProps } from './customCardTypes'; -import { ReferenceEditor, ReferenceEditorProps } from './ReferenceEditor'; -import { useEditorPermissions } from './useEditorPermissions'; +import { LinkEntityActions } from '../components/index.js'; +import { useLinkActionsProps } from '../components/LinkActions/LinkEntityActions.js'; +import { ContentType, ContentEntityType, ReferenceValue } from '../types.js'; +import { CustomEntityCardProps } from './customCardTypes.js'; +import { ReferenceEditor, ReferenceEditorProps } from './ReferenceEditor.js'; +import { useEditorPermissions } from './useEditorPermissions.js'; type ChildProps = { entityId: string; diff --git a/packages/reference/src/common/SortableLinkList.tsx b/packages/reference/src/common/SortableLinkList.tsx index d20d9d690..5ee975d7c 100644 --- a/packages/reference/src/common/SortableLinkList.tsx +++ b/packages/reference/src/common/SortableLinkList.tsx @@ -6,8 +6,8 @@ import { SortableContext, SortingStrategy, useSortable } from '@dnd-kit/sortable import { CSS } from '@dnd-kit/utilities'; import { css, cx } from 'emotion'; -import { useSortIDs } from '../utils/useSortIDs'; -import { ReferenceEditorProps } from './ReferenceEditor'; +import { useSortIDs } from '../utils/useSortIDs.js'; +import { ReferenceEditorProps } from './ReferenceEditor.js'; const styles = { container: css({ @@ -83,8 +83,7 @@ const SortableLink = ({
+ className={cx(styles.item, { [styles.isDragging]: isDragging })}> {children({ items, isDisabled, @@ -144,8 +143,7 @@ export const SortableLinkList = ({ items={items} item={item} isDisabled={isDisabled} - index={index} - > + index={index}> {children} ); diff --git a/packages/reference/src/common/useContentTypePermissions.ts b/packages/reference/src/common/useContentTypePermissions.ts index ed9e5e858..65f2126df 100644 --- a/packages/reference/src/common/useContentTypePermissions.ts +++ b/packages/reference/src/common/useContentTypePermissions.ts @@ -1,9 +1,9 @@ import { useEffect, useMemo, useState } from 'react'; -import { ContentType, ContentEntityType, FieldAppSDK } from '../types'; -import { ReferenceValidations } from '../utils/fromFieldValidations'; -import { ReferenceEditorProps } from './ReferenceEditor'; -import { useAccessApi } from './useAccessApi'; +import { ContentType, ContentEntityType, FieldAppSDK } from '../types.js'; +import { ReferenceValidations } from '../utils/fromFieldValidations.js'; +import { ReferenceEditorProps } from './ReferenceEditor.js'; +import { useAccessApi } from './useAccessApi.js'; type ContentTypePermissionsProps = { sdk: FieldAppSDK; diff --git a/packages/reference/src/common/useEditorPermissions.spec.ts b/packages/reference/src/common/useEditorPermissions.spec.ts index a0088a221..fb7a71451 100644 --- a/packages/reference/src/common/useEditorPermissions.spec.ts +++ b/packages/reference/src/common/useEditorPermissions.spec.ts @@ -1,9 +1,10 @@ import { AccessAPI, ContentType, FieldAPI } from '@contentful/app-sdk'; import { createFakeFieldAPI } from '@contentful/field-editor-test-utils'; +import { jest } from '@jest/globals'; import { renderHook } from '@testing-library/react-hooks'; -import { FieldAppSDK } from '../types'; -import { EditorPermissionsProps, useEditorPermissions } from './useEditorPermissions'; +import { FieldAppSDK } from '../types.js'; +import { EditorPermissionsProps, useEditorPermissions } from './useEditorPermissions.js'; type ExtendedAccessAPI = AccessAPI & { canPerformActionOnEntryOfType: (action: string, contentTypeId: string) => Promise; diff --git a/packages/reference/src/common/useEditorPermissions.ts b/packages/reference/src/common/useEditorPermissions.ts index bfcc6034f..8e3f09d00 100644 --- a/packages/reference/src/common/useEditorPermissions.ts +++ b/packages/reference/src/common/useEditorPermissions.ts @@ -1,10 +1,10 @@ import { useEffect, useMemo, useState } from 'react'; -import { ContentType, ContentEntityType, FieldAppSDK } from '../types'; -import { fromFieldValidations } from '../utils/fromFieldValidations'; -import { ReferenceEditorProps } from './ReferenceEditor'; -import { useAccessApi } from './useAccessApi'; -import { useContentTypePermissions } from './useContentTypePermissions'; +import { ContentType, ContentEntityType, FieldAppSDK } from '../types.js'; +import { fromFieldValidations } from '../utils/fromFieldValidations.js'; +import { ReferenceEditorProps } from './ReferenceEditor.js'; +import { useAccessApi } from './useAccessApi.js'; +import { useContentTypePermissions } from './useContentTypePermissions.js'; export type EditorPermissionsProps = { sdk: FieldAppSDK; diff --git a/packages/reference/src/components/AssetThumbnail/AssetThumbnail.tsx b/packages/reference/src/components/AssetThumbnail/AssetThumbnail.tsx index 04bac15ff..65cba96e1 100644 --- a/packages/reference/src/components/AssetThumbnail/AssetThumbnail.tsx +++ b/packages/reference/src/components/AssetThumbnail/AssetThumbnail.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; -import { File } from '../../types'; +import { File } from '../../types.js'; interface AssetThumbnailProps { file: File; diff --git a/packages/reference/src/components/CreateEntryLinkButton/CreateEntryLinkButton.spec.tsx b/packages/reference/src/components/CreateEntryLinkButton/CreateEntryLinkButton.spec.tsx index b2b25c300..16b8cf6a4 100644 --- a/packages/reference/src/components/CreateEntryLinkButton/CreateEntryLinkButton.spec.tsx +++ b/packages/reference/src/components/CreateEntryLinkButton/CreateEntryLinkButton.spec.tsx @@ -1,6 +1,7 @@ import * as React from 'react'; import '@testing-library/jest-dom'; +import { jest } from '@jest/globals'; import { act, configure, @@ -9,10 +10,10 @@ import { waitFor, waitForElementToBeRemoved, } from '@testing-library/react'; -import noop from 'lodash/noop'; +import noop from 'lodash-es/noop.js'; -import { ContentType } from '../../types'; -import { CreateEntryLinkButton } from './CreateEntryLinkButton'; +import { ContentType } from '../../types.js'; +import { CreateEntryLinkButton } from './CreateEntryLinkButton.js'; configure({ testIdAttribute: 'data-test-id', diff --git a/packages/reference/src/components/CreateEntryLinkButton/CreateEntryLinkButton.tsx b/packages/reference/src/components/CreateEntryLinkButton/CreateEntryLinkButton.tsx index 59905c024..fe59c6b06 100644 --- a/packages/reference/src/components/CreateEntryLinkButton/CreateEntryLinkButton.tsx +++ b/packages/reference/src/components/CreateEntryLinkButton/CreateEntryLinkButton.tsx @@ -1,13 +1,13 @@ import * as React from 'react'; -import { Button } from '@contentful/f36-components'; +import { Button } from '@contentful/f36-button'; import { ChevronDownIcon, PlusIcon } from '@contentful/f36-icons'; import tokens from '@contentful/f36-tokens'; import { css } from 'emotion'; -import get from 'lodash/get'; +import get from 'lodash-es/get.js'; -import { ContentType } from '../../types'; -import { CreateEntryMenuTrigger } from './CreateEntryMenuTrigger'; +import { ContentType } from '../../types.js'; +import { CreateEntryMenuTrigger } from './CreateEntryMenuTrigger.js'; const standardStyles = { spinnerMargin: css({ @@ -77,8 +77,7 @@ export const CreateEntryLinkButton = ({ onSelect={onSelect} testId={testId} dropdownSettings={dropdownSettings} - customDropdownItems={customDropdownItems} - > + customDropdownItems={customDropdownItems}> {({ isSelecting }) => ( )} diff --git a/packages/reference/src/components/CreateEntryLinkButton/CreateEntryMenuTrigger.spec.tsx b/packages/reference/src/components/CreateEntryLinkButton/CreateEntryMenuTrigger.spec.tsx index b5311f278..dcf1411c2 100644 --- a/packages/reference/src/components/CreateEntryLinkButton/CreateEntryMenuTrigger.spec.tsx +++ b/packages/reference/src/components/CreateEntryLinkButton/CreateEntryMenuTrigger.spec.tsx @@ -1,15 +1,15 @@ import * as React from 'react'; -import { Button } from '@contentful/f36-components'; +import { Button } from '@contentful/f36-button'; +import { jest } from '@jest/globals'; import '@testing-library/jest-dom/extend-expect'; import { act, configure, fireEvent, render } from '@testing-library/react'; -import noop from 'lodash/noop'; - +import noop from 'lodash-es/noop.js'; // eslint-disable-next-line -- TODO: describe this disable you-dont-need-lodash-underscore/fill -import fill from 'lodash/fill'; +import fill from 'lodash-es/fill.js'; -import { ContentType } from '../../types'; -import { CreateEntryMenuTrigger, CreateEntryMenuTriggerChild } from './CreateEntryMenuTrigger'; +import { ContentType } from '../../types.js'; +import { CreateEntryMenuTrigger, CreateEntryMenuTriggerChild } from './CreateEntryMenuTrigger.js'; configure({ testIdAttribute: 'data-test-id', @@ -83,8 +83,7 @@ describe('CreateEntryMenuTrigger general', () => { const { getByTestId } = render( + contentTypes={fill(Array(21), CONTENT_TYPE_3) as ContentType[]}> {stub} ); diff --git a/packages/reference/src/components/CreateEntryLinkButton/CreateEntryMenuTrigger.tsx b/packages/reference/src/components/CreateEntryLinkButton/CreateEntryMenuTrigger.tsx index 585fd709b..d762a8c40 100644 --- a/packages/reference/src/components/CreateEntryLinkButton/CreateEntryMenuTrigger.tsx +++ b/packages/reference/src/components/CreateEntryLinkButton/CreateEntryMenuTrigger.tsx @@ -2,13 +2,14 @@ import React, { useState, useRef, useEffect } from 'react'; -import { TextInput, Menu, MenuProps } from '@contentful/f36-components'; +import { TextInput } from '@contentful/f36-forms'; import { SearchIcon } from '@contentful/f36-icons'; +import { Menu, MenuProps } from '@contentful/f36-menu'; import tokens from '@contentful/f36-tokens'; import { css } from 'emotion'; -import get from 'lodash/get'; +import get from 'lodash-es/get.js'; -import { ContentType } from '../../types'; +import { ContentType } from '../../types.js'; const MAX_ITEMS_WITHOUT_SEARCH = 5; @@ -173,8 +174,7 @@ export const CreateEntryMenuTrigger = ({ isOpen={isOpen} onClose={closeMenu} onOpen={handleMenuOpen} - {...menuProps} - > + {...menuProps}> {children({ isOpen, isSelecting })} {isOpen && ( @@ -185,8 +185,7 @@ export const CreateEntryMenuTrigger = ({ maxHeight: `${maxDropdownHeight}px`, }} ref={menuListRef} - testId="add-entry-menu" - > + testId="add-entry-menu"> {Boolean(customDropdownItems) && ( <> {customDropdownItems} @@ -226,8 +225,7 @@ export const CreateEntryMenuTrigger = ({ handleSelect(contentType)} - > + onClick={() => handleSelect(contentType)}> {get(contentType, 'name', 'Untitled')} )) diff --git a/packages/reference/src/components/LinkActions/CombinedLinkActions.tsx b/packages/reference/src/components/LinkActions/CombinedLinkActions.tsx index fb5f1adeb..77ba106e9 100644 --- a/packages/reference/src/components/LinkActions/CombinedLinkActions.tsx +++ b/packages/reference/src/components/LinkActions/CombinedLinkActions.tsx @@ -1,12 +1,13 @@ import * as React from 'react'; -import { Button, Menu } from '@contentful/f36-components'; +import { Button } from '@contentful/f36-button'; import { LinkIcon, PlusIcon, ChevronDownIcon } from '@contentful/f36-icons'; +import { Menu } from '@contentful/f36-menu'; -import { CreateEntryLinkButton } from '../CreateEntryLinkButton/CreateEntryLinkButton'; -import { testIds as sharedTextIds, LinkActionsProps } from './LinkActions'; -import { NoLinkPermissionsInfo } from './NoLinkPermissionsInfo'; -import * as styles from './redesignStyles'; +import { CreateEntryLinkButton } from '../CreateEntryLinkButton/CreateEntryLinkButton.js'; +import { testIds as sharedTextIds, LinkActionsProps } from './LinkActions.js'; +import { NoLinkPermissionsInfo } from './NoLinkPermissionsInfo.js'; +import * as styles from './redesignStyles.js'; const testIds = { ...sharedTextIds, diff --git a/packages/reference/src/components/LinkActions/LinkActions.tsx b/packages/reference/src/components/LinkActions/LinkActions.tsx index 8672542bc..c8ffb7003 100644 --- a/packages/reference/src/components/LinkActions/LinkActions.tsx +++ b/packages/reference/src/components/LinkActions/LinkActions.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; -import { Button } from '@contentful/f36-components'; +import { Button } from '@contentful/f36-button'; import { PlusIcon, LinkIcon } from '@contentful/f36-icons'; import { @@ -10,10 +10,10 @@ import { Entry, Asset, NavigatorSlideInfo, -} from '../../types'; -import { CreateEntryLinkButton } from '../CreateEntryLinkButton/CreateEntryLinkButton'; -import { NoLinkPermissionsInfo } from './NoLinkPermissionsInfo'; -import * as styles from './styles'; +} from '../../types.js'; +import { CreateEntryLinkButton } from '../CreateEntryLinkButton/CreateEntryLinkButton.js'; +import { NoLinkPermissionsInfo } from './NoLinkPermissionsInfo.js'; +import * as styles from './styles.js'; export interface LinkActionsProps { entityType: ContentEntityType; diff --git a/packages/reference/src/components/LinkActions/LinkEntityActions.tsx b/packages/reference/src/components/LinkActions/LinkEntityActions.tsx index f6c716cf5..3ec1b0723 100644 --- a/packages/reference/src/components/LinkActions/LinkEntityActions.tsx +++ b/packages/reference/src/components/LinkActions/LinkEntityActions.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { useMemo } from 'react'; -import { EditorPermissions } from '../../common/useEditorPermissions'; +import { EditorPermissions } from '../../common/useEditorPermissions.js'; import { Action, ActionLabels, @@ -10,10 +10,10 @@ import { Entry, Asset, NavigatorSlideInfo, -} from '../../types'; -import { CombinedLinkActions } from './CombinedLinkActions'; -import { createEntity, selectMultipleEntities, selectSingleEntity } from './helpers'; -import { LinkActions, LinkActionsProps } from './LinkActions'; +} from '../../types.js'; +import { CombinedLinkActions } from './CombinedLinkActions.js'; +import { createEntity, selectMultipleEntities, selectSingleEntity } from './helpers.js'; +import { LinkActions, LinkActionsProps } from './LinkActions.js'; type LinkEntityActionsProps = { entityType: ContentEntityType; diff --git a/packages/reference/src/components/LinkActions/NoLinkPermissionsInfo.tsx b/packages/reference/src/components/LinkActions/NoLinkPermissionsInfo.tsx index c3e466542..4a826d58b 100644 --- a/packages/reference/src/components/LinkActions/NoLinkPermissionsInfo.tsx +++ b/packages/reference/src/components/LinkActions/NoLinkPermissionsInfo.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; -import { Paragraph } from '@contentful/f36-components'; +import { Paragraph } from '@contentful/f36-typography'; export function NoLinkPermissionsInfo() { return ( diff --git a/packages/reference/src/components/LinkActions/helpers.ts b/packages/reference/src/components/LinkActions/helpers.ts index 89ee5dbab..4a4e8e559 100644 --- a/packages/reference/src/components/LinkActions/helpers.ts +++ b/packages/reference/src/components/LinkActions/helpers.ts @@ -1,5 +1,5 @@ -import { EditorPermissions } from '../../common/useEditorPermissions'; -import { Asset, ContentType, ContentEntityType, Entry, FieldAppSDK } from '../../types'; +import { EditorPermissions } from '../../common/useEditorPermissions.js'; +import { Asset, ContentType, ContentEntityType, Entry, FieldAppSDK } from '../../types.js'; const getContentTypeIds = (contentTypes: ContentType[]) => contentTypes.map((ct) => ct.sys.id); diff --git a/packages/reference/src/components/MissingEntityCard/MissingEntityCard.tsx b/packages/reference/src/components/MissingEntityCard/MissingEntityCard.tsx index 8b8278e9b..f43f5606b 100644 --- a/packages/reference/src/components/MissingEntityCard/MissingEntityCard.tsx +++ b/packages/reference/src/components/MissingEntityCard/MissingEntityCard.tsx @@ -1,10 +1,13 @@ import * as React from 'react'; -import { Card, Flex, IconButton, SectionHeading } from '@contentful/f36-components'; +import { IconButton } from '@contentful/f36-button'; +import { Card } from '@contentful/f36-card'; +import { Flex } from '@contentful/f36-core'; import { CloseIcon } from '@contentful/f36-icons'; +import { SectionHeading } from '@contentful/f36-typography'; -import { ContentEntityType } from '../../types'; -import * as styles from './styles'; +import { ContentEntityType } from '../../types.js'; +import * as styles from './styles.js'; export function MissingEntityCard(props: { entityType: ContentEntityType; diff --git a/packages/reference/src/components/ResourceEntityErrorCard/ResourceEntityErrorCard.tsx b/packages/reference/src/components/ResourceEntityErrorCard/ResourceEntityErrorCard.tsx index 25c788dbc..6c8a62663 100644 --- a/packages/reference/src/components/ResourceEntityErrorCard/ResourceEntityErrorCard.tsx +++ b/packages/reference/src/components/ResourceEntityErrorCard/ResourceEntityErrorCard.tsx @@ -1,8 +1,8 @@ import * as React from 'react'; -import { isUnsupportedError } from '../../common/EntityStore'; -import { MissingEntityCard } from '../MissingEntityCard/MissingEntityCard'; -import { UnsupportedEntityCard } from './UnsupportedEntityCard'; +import { isUnsupportedError } from '../../common/EntityStore.js'; +import { MissingEntityCard } from '../MissingEntityCard/MissingEntityCard.js'; +import { UnsupportedEntityCard } from './UnsupportedEntityCard.js'; export function ResourceEntityErrorCard(props: { linkType: string; diff --git a/packages/reference/src/components/ResourceEntityErrorCard/UnsupportedEntityCard.tsx b/packages/reference/src/components/ResourceEntityErrorCard/UnsupportedEntityCard.tsx index 3c059cb53..19e516adb 100644 --- a/packages/reference/src/components/ResourceEntityErrorCard/UnsupportedEntityCard.tsx +++ b/packages/reference/src/components/ResourceEntityErrorCard/UnsupportedEntityCard.tsx @@ -1,6 +1,7 @@ import * as React from 'react'; -import { Card, SectionHeading } from '@contentful/f36-components'; +import { Card } from '@contentful/f36-card'; +import { SectionHeading } from '@contentful/f36-typography'; import { css } from 'emotion'; const styles = { diff --git a/packages/reference/src/components/ScheduledIconWithTooltip/ScheduleTooltip.tsx b/packages/reference/src/components/ScheduledIconWithTooltip/ScheduleTooltip.tsx index 67884a352..bfdc1d2b7 100644 --- a/packages/reference/src/components/ScheduledIconWithTooltip/ScheduleTooltip.tsx +++ b/packages/reference/src/components/ScheduledIconWithTooltip/ScheduleTooltip.tsx @@ -1,9 +1,9 @@ import * as React from 'react'; import { ScheduledAction } from '@contentful/app-sdk'; -import { Tooltip } from '@contentful/f36-components'; +import { Tooltip } from '@contentful/f36-tooltip'; -import { formatDateAndTime } from './formatDateAndTime'; +import { formatDateAndTime } from './formatDateAndTime.js'; export const getScheduleTooltipContent = ({ job, @@ -32,8 +32,7 @@ export const ScheduleTooltip = ({ placement="top" testId={job.sys.id} as="div" - content={getScheduleTooltipContent({ job, jobsCount })} - > + content={getScheduleTooltipContent({ job, jobsCount })}> {children} ); diff --git a/packages/reference/src/components/ScheduledIconWithTooltip/ScheduledIconWithTooltip.tsx b/packages/reference/src/components/ScheduledIconWithTooltip/ScheduledIconWithTooltip.tsx index d5791033d..267b9e12d 100644 --- a/packages/reference/src/components/ScheduledIconWithTooltip/ScheduledIconWithTooltip.tsx +++ b/packages/reference/src/components/ScheduledIconWithTooltip/ScheduledIconWithTooltip.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import { ScheduledAction, SpaceAPI } from '@contentful/app-sdk'; -import { ScheduleTooltip } from './ScheduleTooltip'; +import { ScheduleTooltip } from './ScheduleTooltip.js'; type ScheduledIconWithTooltipProps = { getEntityScheduledActions: SpaceAPI['getEntityScheduledActions']; diff --git a/packages/reference/src/components/SpaceName/SpaceName.tsx b/packages/reference/src/components/SpaceName/SpaceName.tsx index 5cd499157..d91017002 100644 --- a/packages/reference/src/components/SpaceName/SpaceName.tsx +++ b/packages/reference/src/components/SpaceName/SpaceName.tsx @@ -1,8 +1,10 @@ import * as React from 'react'; -import { Flex, Text, Tooltip } from '@contentful/f36-components'; +import { Flex } from '@contentful/f36-core'; import { FolderOpenTrimmedIcon } from '@contentful/f36-icons'; import tokens from '@contentful/f36-tokens'; +import { Tooltip } from '@contentful/f36-tooltip'; +import { Text } from '@contentful/f36-typography'; import { css } from 'emotion'; interface SourceProps { diff --git a/packages/reference/src/entries/MultipleEntryReferenceEditor.tsx b/packages/reference/src/entries/MultipleEntryReferenceEditor.tsx index a9ed1b515..df5feae5d 100644 --- a/packages/reference/src/entries/MultipleEntryReferenceEditor.tsx +++ b/packages/reference/src/entries/MultipleEntryReferenceEditor.tsx @@ -2,11 +2,11 @@ import * as React from 'react'; import { verticalListSortingStrategy } from '@dnd-kit/sortable'; -import { MultipleReferenceEditor } from '../common/MultipleReferenceEditor'; -import { ReferenceEditorProps } from '../common/ReferenceEditor'; -import { SortableLinkList } from '../common/SortableLinkList'; -import { ReferenceValue } from '../types'; -import { FetchingWrappedEntryCard } from './WrappedEntryCard/FetchingWrappedEntryCard'; +import { MultipleReferenceEditor } from '../common/MultipleReferenceEditor.js'; +import { ReferenceEditorProps } from '../common/ReferenceEditor.js'; +import { SortableLinkList } from '../common/SortableLinkList.js'; +import { ReferenceValue } from '../types.js'; +import { FetchingWrappedEntryCard } from './WrappedEntryCard/FetchingWrappedEntryCard.js'; export function MultipleEntryReferenceEditor(props: ReferenceEditorProps) { const [indexToUpdate, setIndexToUpdate] = React.useState(undefined); @@ -21,8 +21,7 @@ export function MultipleEntryReferenceEditor(props: ReferenceEditorProps) { {...childrenProps} sortingStrategy={verticalListSortingStrategy} - updateBeforeSortStart={updateBeforeSortStart} - > + updateBeforeSortStart={updateBeforeSortStart}> {({ items, item, index, isDisabled, DragHandle }) => { const lastIndex = items.length - 1; return ( diff --git a/packages/reference/src/entries/SingleEntryReferenceEditor.tsx b/packages/reference/src/entries/SingleEntryReferenceEditor.tsx index 6d73d870f..1cef0d5d5 100644 --- a/packages/reference/src/entries/SingleEntryReferenceEditor.tsx +++ b/packages/reference/src/entries/SingleEntryReferenceEditor.tsx @@ -1,8 +1,8 @@ import * as React from 'react'; -import { ReferenceEditorProps } from '../common/ReferenceEditor'; -import { SingleReferenceEditor } from '../common/SingleReferenceEditor'; -import { FetchingWrappedEntryCard } from './WrappedEntryCard/FetchingWrappedEntryCard'; +import { ReferenceEditorProps } from '../common/ReferenceEditor.js'; +import { SingleReferenceEditor } from '../common/SingleReferenceEditor.js'; +import { FetchingWrappedEntryCard } from './WrappedEntryCard/FetchingWrappedEntryCard.js'; export function SingleEntryReferenceEditor(props: ReferenceEditorProps) { return ( diff --git a/packages/reference/src/entries/WrappedEntryCard/FetchingWrappedEntryCard.tsx b/packages/reference/src/entries/WrappedEntryCard/FetchingWrappedEntryCard.tsx index 8e3cc4afd..d32d47386 100644 --- a/packages/reference/src/entries/WrappedEntryCard/FetchingWrappedEntryCard.tsx +++ b/packages/reference/src/entries/WrappedEntryCard/FetchingWrappedEntryCard.tsx @@ -1,16 +1,19 @@ import * as React from 'react'; -import { EntryCard } from '@contentful/f36-components'; +import { EntryCard } from '@contentful/f36-card'; import { EntryProps } from 'contentful-management'; -import get from 'lodash/get'; - -import { CustomEntityCardProps, RenderCustomMissingEntityCard } from '../../common/customCardTypes'; -import { useEntity, useEntityLoader } from '../../common/EntityStore'; -import { ReferenceEditorProps } from '../../common/ReferenceEditor'; -import type { LinkActionsProps } from '../../components'; -import { MissingEntityCard } from '../../components'; -import { ContentType, Entry, FieldAppSDK, NavigatorSlideInfo, RenderDragFn } from '../../types'; -import { WrappedEntryCard, WrappedEntryCardProps } from './WrappedEntryCard'; +import get from 'lodash-es/get.js'; + +import { + CustomEntityCardProps, + RenderCustomMissingEntityCard, +} from '../../common/customCardTypes.js'; +import { useEntity, useEntityLoader } from '../../common/EntityStore.js'; +import { ReferenceEditorProps } from '../../common/ReferenceEditor.js'; +import type { LinkActionsProps } from '../../components/index.js'; +import { MissingEntityCard } from '../../components/index.js'; +import { ContentType, Entry, FieldAppSDK, NavigatorSlideInfo, RenderDragFn } from '../../types.js'; +import { WrappedEntryCard, WrappedEntryCardProps } from './WrappedEntryCard.js'; export type EntryCardReferenceEditorProps = ReferenceEditorProps & { entryId: string; diff --git a/packages/reference/src/entries/WrappedEntryCard/WrappedEntryCard.tsx b/packages/reference/src/entries/WrappedEntryCard/WrappedEntryCard.tsx index 4726929e2..fc3efa428 100644 --- a/packages/reference/src/entries/WrappedEntryCard/WrappedEntryCard.tsx +++ b/packages/reference/src/entries/WrappedEntryCard/WrappedEntryCard.tsx @@ -1,15 +1,20 @@ import * as React from 'react'; import { SpaceAPI } from '@contentful/app-sdk'; -import { EntryCard, MenuItem, MenuDivider } from '@contentful/f36-components'; +import { EntryCard } from '@contentful/f36-card'; import { ClockIcon } from '@contentful/f36-icons'; +import { MenuItem, MenuDivider } from '@contentful/f36-menu'; import tokens from '@contentful/f36-tokens'; import { entityHelpers, isValidImage } from '@contentful/field-editor-shared'; import { css } from 'emotion'; -import { AssetThumbnail, MissingEntityCard, ScheduledIconWithTooltip } from '../../components'; -import { SpaceName } from '../../components/SpaceName/SpaceName'; -import { ContentType, Entry, File, RenderDragFn } from '../../types'; +import { + AssetThumbnail, + MissingEntityCard, + ScheduledIconWithTooltip, +} from '../../components/index.js'; +import { SpaceName } from '../../components/SpaceName/SpaceName.js'; +import { ContentType, Entry, File, RenderDragFn } from '../../types.js'; const { getEntryTitle, getEntityDescription, getEntryStatus, getEntryImage } = entityHelpers; @@ -122,8 +127,7 @@ export function WrappedEntryCard(props: WrappedEntryCardProps) { + entityId={props.entry.sys.id}> { props.onEdit && props.onEdit(); - }} - > + }}> Edit ) : null, @@ -156,8 +159,7 @@ export function WrappedEntryCard(props: WrappedEntryCardProps) { testId="delete" onClick={() => { props.onRemove && props.onRemove(); - }} - > + }}> Remove ) : null, @@ -168,8 +170,7 @@ export function WrappedEntryCard(props: WrappedEntryCardProps) { props.onMoveTop && props.onMoveTop()} - testId="move-top" - > + testId="move-top"> Move to top ) : null, @@ -177,8 +178,7 @@ export function WrappedEntryCard(props: WrappedEntryCardProps) { props.onMoveBottom && props.onMoveBottom()} - testId="move-bottom" - > + testId="move-bottom"> Move to bottom ) : null, diff --git a/packages/reference/src/entries/index.ts b/packages/reference/src/entries/index.ts index df3499e2b..8fa8c6fe1 100644 --- a/packages/reference/src/entries/index.ts +++ b/packages/reference/src/entries/index.ts @@ -1,3 +1,3 @@ -export { SingleEntryReferenceEditor } from './SingleEntryReferenceEditor'; -export { MultipleEntryReferenceEditor } from './MultipleEntryReferenceEditor'; -export { WrappedEntryCard } from './WrappedEntryCard/WrappedEntryCard'; +export { SingleEntryReferenceEditor } from './SingleEntryReferenceEditor.js'; +export { MultipleEntryReferenceEditor } from './MultipleEntryReferenceEditor.js'; +export { WrappedEntryCard } from './WrappedEntryCard/WrappedEntryCard.js'; diff --git a/packages/reference/src/index.tsx b/packages/reference/src/index.tsx index f1b0a0678..fc03dcf51 100644 --- a/packages/reference/src/index.tsx +++ b/packages/reference/src/index.tsx @@ -7,22 +7,25 @@ export { ResourceEntityErrorCard, MissingEntityCard, CombinedLinkActions, -} from './components'; +} from './components/index.js'; export { SingleEntryReferenceEditor, MultipleEntryReferenceEditor, WrappedEntryCard, -} from './entries'; -export { SingleMediaEditor, MultipleMediaEditor, WrappedAssetCard } from './assets'; -export type { CustomActionProps } from './common/ReferenceEditor'; +} from './entries/index.js'; +export { SingleMediaEditor, MultipleMediaEditor, WrappedAssetCard } from './assets/index.js'; +export type { CustomActionProps } from './common/ReferenceEditor.js'; export type { CustomEntityCardProps, DefaultCardRenderer, MissingEntityCardProps, RenderCustomMissingEntityCard, -} from './common/customCardTypes'; -export { SortableLinkList } from './common/SortableLinkList'; -export { EntityProvider, useEntityLoader, useEntity, useResource } from './common/EntityStore'; -export type { ResourceInfo } from './common/EntityStore'; -export { SingleResourceReferenceEditor, MultipleResourceReferenceEditor } from './resources'; -export * from './types'; +} from './common/customCardTypes.js'; +export { SortableLinkList } from './common/SortableLinkList.js'; +export { EntityProvider, useEntityLoader, useEntity, useResource } from './common/EntityStore.js'; +export type { ResourceInfo } from './common/EntityStore.js'; +export { + SingleResourceReferenceEditor, + MultipleResourceReferenceEditor, +} from './resources/index.js'; +export * from './types.js'; diff --git a/packages/reference/src/resources/Cards/ContentfulEntryCard.tsx b/packages/reference/src/resources/Cards/ContentfulEntryCard.tsx index 028827b7a..00a8f5139 100644 --- a/packages/reference/src/resources/Cards/ContentfulEntryCard.tsx +++ b/packages/reference/src/resources/Cards/ContentfulEntryCard.tsx @@ -2,8 +2,8 @@ import * as React from 'react'; import { Entry } from '@contentful/field-editor-shared'; -import { WrappedEntryCard } from '../../entries'; -import { RenderDragFn, ResourceInfo } from '../../types'; +import { WrappedEntryCard } from '../../entries/index.js'; +import { RenderDragFn, ResourceInfo } from '../../types.js'; export type CardActionsHandlers = { onRemove?: VoidFunction; diff --git a/packages/reference/src/resources/Cards/ResourceCard.spec.tsx b/packages/reference/src/resources/Cards/ResourceCard.spec.tsx index 94739d414..0de1979e9 100644 --- a/packages/reference/src/resources/Cards/ResourceCard.spec.tsx +++ b/packages/reference/src/resources/Cards/ResourceCard.spec.tsx @@ -1,16 +1,16 @@ import * as React from 'react'; import '@testing-library/jest-dom'; - import { createFakeCMAAdapter } from '@contentful/field-editor-test-utils'; +import { jest } from '@jest/globals'; import { configure, fireEvent, render, waitFor } from '@testing-library/react'; import publishedCT from '../../__fixtures__/content-type/published_content_type.json'; import publishedEntryNonMasterEnvironment from '../../__fixtures__/entry/published_entry_non_master.json'; import publishedEntry from '../../__fixtures__/entry/published_entry.json'; import space from '../../__fixtures__/space/indifferent_space.json'; -import { EntityProvider } from '../../common/EntityStore'; -import { ResourceCard } from './ResourceCard'; +import { EntityProvider } from '../../common/EntityStore.js'; +import { ResourceCard } from './ResourceCard.js'; configure({ testIdAttribute: 'data-test-id', diff --git a/packages/reference/src/resources/Cards/ResourceCard.tsx b/packages/reference/src/resources/Cards/ResourceCard.tsx index 2e4458b81..623f186ac 100644 --- a/packages/reference/src/resources/Cards/ResourceCard.tsx +++ b/packages/reference/src/resources/Cards/ResourceCard.tsx @@ -1,13 +1,13 @@ import * as React from 'react'; import { useInView } from 'react-intersection-observer'; -import { EntryCard } from '@contentful/f36-components'; +import { EntryCard } from '@contentful/f36-card'; import { SetRequired } from 'type-fest'; -import { useResource } from '../../common/EntityStore'; -import { ResourceEntityErrorCard } from '../../components'; -import { RenderDragFn, ResourceLink } from '../../types'; -import { CardActionsHandlers, ContentfulEntryCard, EntryRoute } from './ContentfulEntryCard'; +import { useResource } from '../../common/EntityStore.js'; +import { ResourceEntityErrorCard } from '../../components/index.js'; +import { RenderDragFn, ResourceLink } from '../../types.js'; +import { CardActionsHandlers, ContentfulEntryCard, EntryRoute } from './ContentfulEntryCard.js'; type ResourceCardProps = { index?: number; @@ -38,7 +38,6 @@ function ExistingResourceCard( } if (data) { - // @ts-expect-error return ; } diff --git a/packages/reference/src/resources/MultipleResourceReferenceEditor.spec.tsx b/packages/reference/src/resources/MultipleResourceReferenceEditor.spec.tsx index a125a86cd..b4ff2c9db 100644 --- a/packages/reference/src/resources/MultipleResourceReferenceEditor.spec.tsx +++ b/packages/reference/src/resources/MultipleResourceReferenceEditor.spec.tsx @@ -4,9 +4,9 @@ import { FieldAppSDK } from '@contentful/app-sdk'; import '@testing-library/jest-dom/extend-expect'; import { fireEvent, render, screen } from '@testing-library/react'; -import { useResource } from '../common/EntityStore'; -import { MultipleResourceReferenceEditor } from './MultipleResourceReferenceEditor'; -import { createFakeEntryResource, mockSdkForField } from './testHelpers/resourceEditorHelpers'; +import { useResource } from '../common/EntityStore.js'; +import { MultipleResourceReferenceEditor } from './MultipleResourceReferenceEditor.js'; +import { createFakeEntryResource, mockSdkForField } from './testHelpers/resourceEditorHelpers.js'; let mockedResources: Record = {}; diff --git a/packages/reference/src/resources/MultipleResourceReferenceEditor.tsx b/packages/reference/src/resources/MultipleResourceReferenceEditor.tsx index d33fd042a..ef8953d70 100644 --- a/packages/reference/src/resources/MultipleResourceReferenceEditor.tsx +++ b/packages/reference/src/resources/MultipleResourceReferenceEditor.tsx @@ -5,16 +5,16 @@ import { FieldConnector } from '@contentful/field-editor-shared'; import { DragStartEvent } from '@dnd-kit/core'; import { arrayMove } from '@dnd-kit/sortable'; import deepEqual from 'deep-equal'; -import noop from 'lodash/noop'; +import noop from 'lodash-es/noop.js'; -import { EntityProvider } from '../common/EntityStore'; -import { ReferenceEditorProps } from '../common/ReferenceEditor'; -import { SortableLinkList } from '../common/SortableLinkList'; -import { CombinedLinkEntityActions } from '../components/LinkActions/LinkEntityActions'; -import { ResourceLink } from '../types'; -import { EntryRoute } from './Cards/ContentfulEntryCard'; -import { ResourceCard } from './Cards/ResourceCard'; -import { useResourceLinkActions } from './useResourceLinkActions'; +import { EntityProvider } from '../common/EntityStore.js'; +import { ReferenceEditorProps } from '../common/ReferenceEditor.js'; +import { SortableLinkList } from '../common/SortableLinkList.js'; +import { CombinedLinkEntityActions } from '../components/LinkActions/LinkEntityActions.js'; +import { ResourceLink } from '../types.js'; +import { EntryRoute } from './Cards/ContentfulEntryCard.js'; +import { ResourceCard } from './Cards/ResourceCard.js'; +import { useResourceLinkActions } from './useResourceLinkActions.js'; type ChildProps = { items: ResourceLink[]; @@ -135,8 +135,7 @@ export function MultipleResourceReferenceEditor( debounce={0} field={props.sdk.field} isInitiallyDisabled={props.isInitiallyDisabled} - isEqualValues={deepEqual} - > + isEqualValues={deepEqual}> {({ value, disabled, setValue, externalReset }) => { return ( + key={`${externalReset}-list`}> {(editorProps) => ( {...editorProps}> {({ item, isDisabled, DragHandle, index }) => ( @@ -155,8 +153,7 @@ export function MultipleResourceReferenceEditor( index={index} onMove={editorProps.onMove} onRemoteItemAtIndex={editorProps.onRemoteItemAtIndex} - listLength={value?.length || 0} - > + listLength={value?.length || 0}> {({ onMoveBottom, onMoveTop, onRemove }) => ( = {}; jest.mock('../common/EntityStore', () => { - const module = jest.requireActual('../common/EntityStore'); + const module = jest.requireActual('../common/EntityStore.js'); return { ...module, diff --git a/packages/reference/src/resources/SingleResourceReferenceEditor.tsx b/packages/reference/src/resources/SingleResourceReferenceEditor.tsx index 95d465b71..633afe7c7 100644 --- a/packages/reference/src/resources/SingleResourceReferenceEditor.tsx +++ b/packages/reference/src/resources/SingleResourceReferenceEditor.tsx @@ -3,13 +3,13 @@ import * as React from 'react'; import { FieldConnector } from '@contentful/field-editor-shared'; import deepEqual from 'deep-equal'; -import { EntityProvider } from '../common/EntityStore'; -import { ReferenceEditorProps } from '../common/ReferenceEditor'; -import { CombinedLinkEntityActions } from '../components/LinkActions/LinkEntityActions'; -import { ResourceLink } from '../types'; -import { EntryRoute } from './Cards/ContentfulEntryCard'; -import { ResourceCard } from './Cards/ResourceCard'; -import { useResourceLinkActions } from './useResourceLinkActions'; +import { EntityProvider } from '../common/EntityStore.js'; +import { ReferenceEditorProps } from '../common/ReferenceEditor.js'; +import { CombinedLinkEntityActions } from '../components/LinkActions/LinkEntityActions.js'; +import { ResourceLink } from '../types.js'; +import { EntryRoute } from './Cards/ContentfulEntryCard.js'; +import { ResourceCard } from './Cards/ResourceCard.js'; +import { useResourceLinkActions } from './useResourceLinkActions.js'; export function SingleResourceReferenceEditor( props: ReferenceEditorProps & { @@ -30,8 +30,7 @@ export function SingleResourceReferenceEditor( debounce={0} field={props.sdk.field} isInitiallyDisabled={props.isInitiallyDisabled} - isEqualValues={deepEqual} - > + isEqualValues={deepEqual}> {({ value, disabled }) => { return value ? ( , apiUrl: string) => ({ sys: { @@ -90,7 +90,6 @@ export function useResourceLinkActions({ return { onLinkExisting, - // @ts-expect-error onLinkedExisting, // hardcoded values to match interface for standard reference field actions entityType: 'Entry', diff --git a/packages/reference/src/types.ts b/packages/reference/src/types.ts index c8bc4b5cc..0db045271 100644 --- a/packages/reference/src/types.ts +++ b/packages/reference/src/types.ts @@ -15,7 +15,7 @@ export type { SpaceProps as Space } from 'contentful-management'; export { Entry, File, Asset } from '@contentful/field-editor-shared'; -export type { ResourceInfo } from './common/EntityStore'; +export type { ResourceInfo } from './common/EntityStore.js'; export type Entity = Entry | Asset; diff --git a/packages/reference/src/utils/fromFieldValidations.ts b/packages/reference/src/utils/fromFieldValidations.ts index 352fc6e62..ec98d6d84 100644 --- a/packages/reference/src/utils/fromFieldValidations.ts +++ b/packages/reference/src/utils/fromFieldValidations.ts @@ -1,5 +1,5 @@ import { FieldAPI } from '@contentful/app-sdk'; -import isNumber from 'lodash/isNumber'; +import isNumber from 'lodash-es/isNumber.js'; type NumberOfLinksValidation = | { type: 'min-max'; min: number; max: number } diff --git a/packages/reference/src/utils/useSortIDs.ts b/packages/reference/src/utils/useSortIDs.ts index 0b14ae6a2..f833681c6 100644 --- a/packages/reference/src/utils/useSortIDs.ts +++ b/packages/reference/src/utils/useSortIDs.ts @@ -2,7 +2,7 @@ import React, { useCallback, useState } from 'react'; import { arrayMove } from '@dnd-kit/sortable'; -import { ReferenceValue, ResourceLink } from '../types'; +import { ReferenceValue, ResourceLink } from '../types.js'; type Items = (ResourceLink | ReferenceValue)[]; diff --git a/packages/reference/stories/MultipleEntryReferenceEditor.stories.tsx b/packages/reference/stories/MultipleEntryReferenceEditor.stories.tsx index 83d4605a8..c631c5689 100644 --- a/packages/reference/stories/MultipleEntryReferenceEditor.stories.tsx +++ b/packages/reference/stories/MultipleEntryReferenceEditor.stories.tsx @@ -1,6 +1,8 @@ import * as React from 'react'; -import { Button, Card, Heading, Paragraph } from '@contentful/f36-components'; +import { Button } from '@contentful/f36-button'; +import { Card } from '@contentful/f36-card'; +import { Heading, Paragraph } from '@contentful/f36-typography'; import { ActionsPlayground } from '@contentful/field-editor-test-utils'; import type { Meta, StoryObj } from '@storybook/react'; diff --git a/packages/reference/stories/MultipleMediaEditor.stories.tsx b/packages/reference/stories/MultipleMediaEditor.stories.tsx index a20a6ab7a..4bd7f252a 100644 --- a/packages/reference/stories/MultipleMediaEditor.stories.tsx +++ b/packages/reference/stories/MultipleMediaEditor.stories.tsx @@ -1,6 +1,9 @@ import * as React from 'react'; -import { Asset, Button, Card, Heading } from '@contentful/f36-components'; +import { Asset } from '@contentful/f36-asset'; +import { Button } from '@contentful/f36-button'; +import { Card } from '@contentful/f36-card'; +import { Heading } from '@contentful/f36-typography'; import { ActionsPlayground } from '@contentful/field-editor-test-utils'; import type { Meta, StoryObj } from '@storybook/react'; diff --git a/packages/reference/stories/SingleEntryReferenceEditor.stories.tsx b/packages/reference/stories/SingleEntryReferenceEditor.stories.tsx index 9a19dd297..61432798e 100644 --- a/packages/reference/stories/SingleEntryReferenceEditor.stories.tsx +++ b/packages/reference/stories/SingleEntryReferenceEditor.stories.tsx @@ -1,6 +1,8 @@ import * as React from 'react'; -import { Button, Card, Heading, Paragraph } from '@contentful/f36-components'; +import { Button } from '@contentful/f36-button'; +import { Card } from '@contentful/f36-card'; +import { Heading, Paragraph } from '@contentful/f36-typography'; import { ActionsPlayground } from '@contentful/field-editor-test-utils'; import type { Meta, StoryObj } from '@storybook/react'; diff --git a/packages/reference/stories/SingleMediaEditor.stories.tsx b/packages/reference/stories/SingleMediaEditor.stories.tsx index 6ef9ccc3e..7065043d7 100644 --- a/packages/reference/stories/SingleMediaEditor.stories.tsx +++ b/packages/reference/stories/SingleMediaEditor.stories.tsx @@ -1,7 +1,10 @@ import * as React from 'react'; -import { Asset, Button, Card, Heading, TextLink } from '@contentful/f36-components'; +import { Asset } from '@contentful/f36-asset'; +import { Button } from '@contentful/f36-button'; import { ThumbUpIcon } from '@contentful/f36-icons'; +import { TextLink } from '@contentful/f36-text-link'; +import { Heading } from '@contentful/f36-typography'; import { ActionsPlayground } from '@contentful/field-editor-test-utils'; import type { Meta, StoryObj } from '@storybook/react'; @@ -61,8 +64,7 @@ export const CustomActions: Story = { onClick={props.onLinkExisting as any} variant="primary" icon={} - alignIcon="end" - > + alignIcon="end"> Re-use something )} diff --git a/packages/reference/tsconfig.json b/packages/reference/tsconfig.json index d47628f31..634087fda 100644 --- a/packages/reference/tsconfig.json +++ b/packages/reference/tsconfig.json @@ -2,8 +2,8 @@ "extends": "../../tsconfig.json", "include": ["src", "types"], "compilerOptions": { - "module": "esnext", - "moduleResolution": "bundler", + "module": "Node16", + "moduleResolution": "Node16", "lib": ["dom", "esnext"], "baseUrl": "./", "paths": { diff --git a/yarn.lock b/yarn.lock index 4a5b0ec3d..2ccba2813 100644 --- a/yarn.lock +++ b/yarn.lock @@ -11935,7 +11935,7 @@ constate@3.2.0: resolved "https://registry.yarnpkg.com/constate/-/constate-3.2.0.tgz#6034e7b775ca0e58137274f87c25196e8932f685" integrity sha512-hP7sj9jt+KwVRoFlzaJuv3kBvchE9hNMAYJEH1weKZYD7+UAWRSo7oXARrfhipVLP3XZxIkmD+E9zXU+5RYKCQ== -constate@^3.2.0: +constate@3.3.2, constate@^3.2.0: version "3.3.2" resolved "https://registry.yarnpkg.com/constate/-/constate-3.3.2.tgz#a6cd2f3c203da2cb863f47d22a330b833936c449" integrity sha512-ZnEWiwU6QUTil41D5EGpA7pbqAPGvnR9kBjko8DzVIxpC60mdNKrP568tT5WLJPAxAOtJqJw60+h79ot/Uz1+Q== @@ -14642,16 +14642,16 @@ eventemitter2@6.4.7: resolved "https://registry.yarnpkg.com/eventemitter2/-/eventemitter2-6.4.7.tgz#a7f6c4d7abf28a14c1ef3442f21cb306a054271d" integrity sha512-tYUSVOGeQPKt/eC1ABfhHy5Xd96N3oIijJvN3O9+TsC28T5V9yX9oEfEK5faP0EFSNVOG97qtAS68GBrQB2hDg== -eventemitter3@^3.1.0: - version "3.1.2" - resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-3.1.2.tgz#2d3d48f9c346698fce83a85d7d664e98535df6e7" - integrity sha512-tvtQIeLVHjDkJYnzf2dgVMxfuSGJeM/7UCG17TT4EumTfNtF+0nebF/4zWOIkCreAbtNqhGEboB6BWrwqNaw4Q== - eventemitter3@^4.0.0, eventemitter3@^4.0.4: version "4.0.7" resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-4.0.7.tgz#2de9b68f6528d5644ef5c59526a1b4a07306169f" integrity sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw== +eventemitter3@^5.0.1: + version "5.0.1" + resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-5.0.1.tgz#53f5ffd0a492ac800721bb42c66b841de96423c4" + integrity sha512-GWkBvjiSZK87ELrYOSESUYeVIc9mvLLf/nXalMOS5dYrgZq9o5OVkbZAVM06CVxYsCwH9BDZFPlQTlPA1j4ahA== + events@^3.0.0, events@^3.2.0, events@^3.3.0: version "3.3.0" resolved "https://registry.yarnpkg.com/events/-/events-3.3.0.tgz#31a95ad0a924e2d2c419a813aeb2c4e878ea7400" @@ -22429,12 +22429,13 @@ p-queue@6.6.2, p-queue@^6.6.2: eventemitter3 "^4.0.4" p-timeout "^3.2.0" -p-queue@^4.0.0: - version "4.0.0" - resolved "https://registry.yarnpkg.com/p-queue/-/p-queue-4.0.0.tgz#ed0eee8798927ed6f2c2f5f5b77fdb2061a5d346" - integrity sha512-3cRXXn3/O0o3+eVmUroJPSj/esxoEFIm0ZOno/T+NzG/VZgPOqQ8WKmlNqubSEpZmCIngEy34unkHGg83ZIBmg== +p-queue@^7.4.1: + version "7.4.1" + resolved "https://registry.yarnpkg.com/p-queue/-/p-queue-7.4.1.tgz#7f86f853048beca8272abdbb7cec1ed2afc0f265" + integrity sha512-vRpMXmIkYF2/1hLBKisKeVYJZ8S2tZ0zEAmIJgdVKP2nq0nh4qCdf8bgw+ZgKrkh71AOCaqzwbJJk1WtdcF3VA== dependencies: - eventemitter3 "^3.1.0" + eventemitter3 "^5.0.1" + p-timeout "^5.0.2" p-reduce@2.1.0, p-reduce@^2.0.0, p-reduce@^2.1.0: version "2.1.0" @@ -22476,6 +22477,11 @@ p-timeout@^3.0.0, p-timeout@^3.2.0: dependencies: p-finally "^1.0.0" +p-timeout@^5.0.2: + version "5.1.0" + resolved "https://registry.yarnpkg.com/p-timeout/-/p-timeout-5.1.0.tgz#b3c691cf4415138ce2d9cfe071dba11f0fee085b" + integrity sha512-auFDyzzzGZZZdHz3BtET9VEz0SE/uMEAx7uWfGPucfzEwwe/xH0iVeZibQmANYE/hp9T2+UUZT5m+BKyrDp3Ew== + p-try@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/p-try/-/p-try-1.0.0.tgz#cbc79cdbaf8fd4228e13f621f2b1a237c1b207b3" From 7be7a4fe7bb936c76010f3647c821de080b28a05 Mon Sep 17 00:00:00 2001 From: Aodhagan Murphy Date: Tue, 31 Oct 2023 15:49:46 +0000 Subject: [PATCH 2/5] chore: migrating reference editor to esm-only [] --- packages/json/.eslintrc.cjs | 8 -- packages/reference/package.json | 2 +- .../src/assets/MultipleMediaEditor.tsx | 13 ++- .../src/assets/SingleMediaEditor.tsx | 6 +- packages/reference/src/assets/index.ts | 6 +- packages/reference/src/common/EntityStore.tsx | 4 +- packages/reference/src/common/constate.tsx | 85 +++++++++++++++++++ .../reference/src/common/customCardTypes.ts | 4 +- .../src/resources/Cards/ResourceCard.spec.tsx | 9 +- .../src/resources/Cards/ResourceCard.tsx | 4 + .../MultipleResourceReferenceEditor.spec.tsx | 8 ++ .../testHelpers/resourceEditorHelpers.ts | 1 + 12 files changed, 124 insertions(+), 26 deletions(-) delete mode 100644 packages/json/.eslintrc.cjs create mode 100644 packages/reference/src/common/constate.tsx diff --git a/packages/json/.eslintrc.cjs b/packages/json/.eslintrc.cjs deleted file mode 100644 index 9021a3728..000000000 --- a/packages/json/.eslintrc.cjs +++ /dev/null @@ -1,8 +0,0 @@ -const path = require('path'); - -module.exports = { - extends: '../.eslintrc.js', - parserOptions: { - project: path.resolve('tsconfig.json'), - }, -}; diff --git a/packages/reference/package.json b/packages/reference/package.json index eb4c05f7f..d4e5f24b0 100644 --- a/packages/reference/package.json +++ b/packages/reference/package.json @@ -21,7 +21,7 @@ "build:types": "tsc --outDir dist/types --emitDeclarationOnly", "build:esm": "swc src --config-file ../../.swcrc -d dist/esm", "test": "jest --watch", - "test:ci": "jest --ci", + "test:ci": "yarn node --experimental-vm-modules $(yarn bin jest --ci)", "tsc": "tsc -p ./ --noEmit" }, "dependencies": { diff --git a/packages/reference/src/assets/MultipleMediaEditor.tsx b/packages/reference/src/assets/MultipleMediaEditor.tsx index 5374a9b03..d107b073e 100644 --- a/packages/reference/src/assets/MultipleMediaEditor.tsx +++ b/packages/reference/src/assets/MultipleMediaEditor.tsx @@ -3,11 +3,11 @@ import * as React from 'react'; import { rectSortingStrategy, verticalListSortingStrategy } from '@dnd-kit/sortable'; import { css, cx } from 'emotion'; -import { MultipleReferenceEditor } from '../common/MultipleReferenceEditor'; -import { ReferenceEditorProps } from '../common/ReferenceEditor'; -import { SortableLinkList } from '../common/SortableLinkList'; -import { ReferenceValue } from '../types'; -import { FetchingWrappedAssetCard } from './WrappedAssetCard/FetchingWrappedAssetCard'; +import { MultipleReferenceEditor } from '../common/MultipleReferenceEditor.js'; +import { ReferenceEditorProps } from '../common/ReferenceEditor.js'; +import { SortableLinkList } from '../common/SortableLinkList.js'; +import { ReferenceValue } from '../types.js'; +import { FetchingWrappedAssetCard } from './WrappedAssetCard/FetchingWrappedAssetCard.js'; // Omit; // does not work nice with from docz @@ -34,8 +34,7 @@ export function MultipleMediaEditor(props: EditorProps) { sortingStrategy={ childrenProps.viewType === 'card' ? rectSortingStrategy : verticalListSortingStrategy } - className={cx({ [styles.gridContainer]: childrenProps.viewType === 'card' })} - > + className={cx({ [styles.gridContainer]: childrenProps.viewType === 'card' })}> {({ items, item, index, isDisabled, DragHandle }) => ( ; // does not work nice with from docz diff --git a/packages/reference/src/assets/index.ts b/packages/reference/src/assets/index.ts index a6203133d..04e1d54fc 100644 --- a/packages/reference/src/assets/index.ts +++ b/packages/reference/src/assets/index.ts @@ -1,3 +1,3 @@ -export { SingleMediaEditor } from './SingleMediaEditor'; -export { MultipleMediaEditor } from './MultipleMediaEditor'; -export { WrappedAssetCard } from './WrappedAssetCard/WrappedAssetCard'; +export { SingleMediaEditor } from './SingleMediaEditor.js'; +export { MultipleMediaEditor } from './MultipleMediaEditor.js'; +export { WrappedAssetCard } from './WrappedAssetCard/WrappedAssetCard.js'; diff --git a/packages/reference/src/common/EntityStore.tsx b/packages/reference/src/common/EntityStore.tsx index 4fb77a8b9..4e10f87d2 100644 --- a/packages/reference/src/common/EntityStore.tsx +++ b/packages/reference/src/common/EntityStore.tsx @@ -13,7 +13,7 @@ import { } from '@tanstack/react-query'; import constate from 'constate'; import { PlainClientAPI } from 'contentful-management'; -import type { createClient } from 'contentful-management'; +import contentful from 'contentful-management'; import PQueue from 'p-queue'; import { @@ -26,6 +26,8 @@ import { Space, } from '../types.js'; +const { createClient } = contentful; + export type ResourceInfo = { resource: R; defaultLocaleCode: string; diff --git a/packages/reference/src/common/constate.tsx b/packages/reference/src/common/constate.tsx new file mode 100644 index 000000000..ca5028455 --- /dev/null +++ b/packages/reference/src/common/constate.tsx @@ -0,0 +1,85 @@ +import * as React from 'react'; + +// constate(useCounter, value => value.count) +// ^^^^^^^^^^^^^^^^^^^^ +type Selector = (value: Value) => any; + +// const [Provider, useCount, useIncrement] = constate(...) +// ^^^^^^^^^^^^^^^^^^^^^^ +type SelectorHooks = { + [K in keyof Selectors]: () => Selectors[K] extends (...args: any) => infer R ? R : never; +}; + +// const [Provider, useCounterContext] = constate(...) +// or ^^^^^^^^^^^^^^^^^ +// const [Provider, useCount, useIncrement] = constate(...) +// ^^^^^^^^^^^^^^^^^^^^^^ +type Hooks[]> = Selectors['length'] extends 0 + ? [() => Value] + : SelectorHooks; + +// const [Provider, useContextValue] = constate(useValue) +// ^^^^^^^^^^^^^^^^^^^^^^^^^^^ +type ConstateTuple[]> = [ + React.FC>, + ...Hooks +]; + +const isDev = process.env.NODE_ENV !== 'production'; + +const NO_PROVIDER = {}; + +function createUseContext(context: React.Context): any { + return () => { + const value = React.useContext(context); + if (isDev && value === NO_PROVIDER) { + const warnMessage = context.displayName + ? `The context consumer of ${context.displayName} must be wrapped with its corresponding Provider` + : 'Component must be wrapped with Provider.'; + console.warn(warnMessage); + } + return value; + }; +} + +function constate[]>( + useValue: (props: Props) => Value, + ...selectors: Selectors +): ConstateTuple { + const contexts = [] as React.Context[]; + const hooks = [] as unknown as Hooks; + + const createContext = (displayName: string) => { + const context = React.createContext(NO_PROVIDER); + if (isDev && displayName) { + context.displayName = displayName; + } + contexts.push(context); + hooks.push(createUseContext(context)); + }; + + if (selectors.length) { + selectors.forEach((selector) => createContext(selector.name)); + } else { + createContext(useValue.name); + } + + const Provider: React.FC> = ({ children, ...props }) => { + const value = useValue(props as Props); + let element = children as React.ReactElement; + for (let i = 0; i < contexts.length; i += 1) { + const context = contexts[i]; + const selector = selectors[i] || ((v) => v); + element = {element}; + } + return element; + }; + + if (isDev && useValue.name) { + Provider.displayName = 'Constate'; + } + + return [Provider, ...hooks]; +} + +export default constate; diff --git a/packages/reference/src/common/customCardTypes.ts b/packages/reference/src/common/customCardTypes.ts index af3b63b85..a784043e0 100644 --- a/packages/reference/src/common/customCardTypes.ts +++ b/packages/reference/src/common/customCardTypes.ts @@ -1,7 +1,7 @@ import * as React from 'react'; -import { Asset, ContentType, Entry, RenderDragFn } from '../types'; -import { CustomActionProps } from './ReferenceEditor'; +import { Asset, ContentType, Entry, RenderDragFn } from '../types.js'; +import { CustomActionProps } from './ReferenceEditor.js'; export type MissingEntityCardProps = { defaultCard: React.ReactElement; diff --git a/packages/reference/src/resources/Cards/ResourceCard.spec.tsx b/packages/reference/src/resources/Cards/ResourceCard.spec.tsx index 0de1979e9..3fa15adfc 100644 --- a/packages/reference/src/resources/Cards/ResourceCard.spec.tsx +++ b/packages/reference/src/resources/Cards/ResourceCard.spec.tsx @@ -20,6 +20,13 @@ jest.mock('react-intersection-observer', () => ({ useInView: jest.fn().mockReturnValue({}), })); +const intersectionObserverMock = () => ({ + observe: () => true, + unobserve: () => true, + disconnect: () => true, +}); +window.IntersectionObserver = jest.fn().mockImplementation(intersectionObserverMock); + // explicit master const resolvableEntryUrn = 'crn:contentful:::content:spaces/space-id/entries/linked-entry-urn'; const resolvableEntryUrnWithExplicitMaster = @@ -144,7 +151,7 @@ describe('ResourceCard', () => { await waitFor(() => expect(getByTestId('cf-ui-missing-entry-card')).toBeDefined()); }); - it('renders missing entity card when crn is invalid', async () => { + it.only('renders missing entity card when crn is invalid', async () => { const { getByTestId } = renderResourceCard({ entryUrn: '' }); await waitFor(() => expect(getByTestId('cf-ui-missing-entry-card')).toBeDefined()); diff --git a/packages/reference/src/resources/Cards/ResourceCard.tsx b/packages/reference/src/resources/Cards/ResourceCard.tsx index 623f186ac..990271660 100644 --- a/packages/reference/src/resources/Cards/ResourceCard.tsx +++ b/packages/reference/src/resources/Cards/ResourceCard.tsx @@ -33,6 +33,10 @@ function ExistingResourceCard( resourceLink.sys.urn, resourceOptions ); + console.log({ + data, + error, + }); if (!data && !error) { return ; } diff --git a/packages/reference/src/resources/MultipleResourceReferenceEditor.spec.tsx b/packages/reference/src/resources/MultipleResourceReferenceEditor.spec.tsx index b4ff2c9db..c861dbecf 100644 --- a/packages/reference/src/resources/MultipleResourceReferenceEditor.spec.tsx +++ b/packages/reference/src/resources/MultipleResourceReferenceEditor.spec.tsx @@ -1,6 +1,7 @@ import * as React from 'react'; import { FieldAppSDK } from '@contentful/app-sdk'; +import { jest } from '@jest/globals'; import '@testing-library/jest-dom/extend-expect'; import { fireEvent, render, screen } from '@testing-library/react'; @@ -10,6 +11,13 @@ import { createFakeEntryResource, mockSdkForField } from './testHelpers/resource let mockedResources: Record = {}; +const intersectionObserverMock = () => ({ + observe: () => null, + unobserve: () => null, + disconnect: () => null, +}); +window.IntersectionObserver = jest.fn().mockImplementation(intersectionObserverMock); + jest.mock('../common/EntityStore', () => { const module = jest.requireActual('../common/EntityStore'); diff --git a/packages/reference/src/resources/testHelpers/resourceEditorHelpers.ts b/packages/reference/src/resources/testHelpers/resourceEditorHelpers.ts index 08335587e..a80ebe109 100644 --- a/packages/reference/src/resources/testHelpers/resourceEditorHelpers.ts +++ b/packages/reference/src/resources/testHelpers/resourceEditorHelpers.ts @@ -1,4 +1,5 @@ import { FieldAppSDK } from '@contentful/app-sdk'; +import { jest } from '@jest/globals'; export function mockSdkForField(fieldDefinition: any, fieldValue?: any): FieldAppSDK { return { From d6e4e8fb6597bb27de4e3f4efb7689dcc4da0e74 Mon Sep 17 00:00:00 2001 From: Aodhagan Murphy Date: Tue, 31 Oct 2023 18:14:07 +0000 Subject: [PATCH 3/5] chore: fixing typings for reference package [] --- packages/reference/src/common/EntityStore.tsx | 7 +++++-- packages/reference/src/common/constate.tsx | 2 ++ .../src/common/useEditorPermissions.spec.ts | 4 ++-- .../CreateEntryLinkButton.spec.tsx | 4 ++-- .../CreateEntryMenuTrigger.spec.tsx | 5 +++-- packages/reference/src/components/index.ts | 20 +++++++++---------- .../src/resources/Cards/ResourceCard.spec.tsx | 9 +++++++-- .../src/resources/Cards/ResourceCard.tsx | 4 +++- .../MultipleResourceReferenceEditor.spec.tsx | 5 +++-- .../SingleResourceReferenceEditor.spec.tsx | 7 ++++--- .../testHelpers/resourceEditorHelpers.ts | 1 + .../src/resources/useResourceLinkActions.ts | 1 + 12 files changed, 43 insertions(+), 26 deletions(-) diff --git a/packages/reference/src/common/EntityStore.tsx b/packages/reference/src/common/EntityStore.tsx index 4e10f87d2..ad3e86d13 100644 --- a/packages/reference/src/common/EntityStore.tsx +++ b/packages/reference/src/common/EntityStore.tsx @@ -11,7 +11,6 @@ import { useQuery, useQueryClient, } from '@tanstack/react-query'; -import constate from 'constate'; import { PlainClientAPI } from 'contentful-management'; import contentful from 'contentful-management'; import PQueue from 'p-queue'; @@ -25,6 +24,7 @@ import { ScheduledAction, Space, } from '../types.js'; +import constate from './constate.js'; const { createClient } = contentful; @@ -215,7 +215,10 @@ const [InternalServiceProvider, useFetch, useEntityLoader, useCurrentIds] = cons const { priority, ...queryOptions } = options; return queryClient.fetchQuery( queryKey, - () => queryQueue.add(() => fn({ cmaClient }), { priority }), + () => + queryQueue.add(() => fn({ cmaClient }), { priority }) as + | TQueryFnData + | Promise, queryOptions ); }, diff --git a/packages/reference/src/common/constate.tsx b/packages/reference/src/common/constate.tsx index ca5028455..3a77fb14c 100644 --- a/packages/reference/src/common/constate.tsx +++ b/packages/reference/src/common/constate.tsx @@ -1,3 +1,5 @@ +// source: https://github.com/diegohaz/constate/blob/master/src/index.tsx + import * as React from 'react'; // constate(useCounter, value => value.count) diff --git a/packages/reference/src/common/useEditorPermissions.spec.ts b/packages/reference/src/common/useEditorPermissions.spec.ts index fb7a71451..29bbc498e 100644 --- a/packages/reference/src/common/useEditorPermissions.spec.ts +++ b/packages/reference/src/common/useEditorPermissions.spec.ts @@ -19,8 +19,8 @@ describe('useEditorPermissions', () => { ({ field: createFakeFieldAPI(customizeMock)[0], access: { - can: jest.fn().mockResolvedValue(true), - canPerformActionOnEntryOfType: jest.fn().mockResolvedValue(true), + can: jest.fn().mockResolvedValue(true as never), + canPerformActionOnEntryOfType: jest.fn().mockResolvedValue(true as never), }, } as unknown as MockedFieldAppSDK); diff --git a/packages/reference/src/components/CreateEntryLinkButton/CreateEntryLinkButton.spec.tsx b/packages/reference/src/components/CreateEntryLinkButton/CreateEntryLinkButton.spec.tsx index 16b8cf6a4..2a28f2100 100644 --- a/packages/reference/src/components/CreateEntryLinkButton/CreateEntryLinkButton.spec.tsx +++ b/packages/reference/src/components/CreateEntryLinkButton/CreateEntryLinkButton.spec.tsx @@ -101,7 +101,7 @@ describe('CreateEntryLinkButton with multiple entries', () => { }); it('calls onSelect after click on menu item', () => { - const selectSpy = jest.fn(); + const selectSpy: (contentTypeId: string) => Promise = jest.fn(undefined); const { getByTestId, getAllByTestId } = render( ); @@ -120,7 +120,7 @@ describe('CreateEntryLinkButton with a single entry', () => { }; it('should fire the onSelect function when clicked', () => { - const onSelectStub = jest.fn(); + const onSelectStub: (contentTypeId: string) => Promise = jest.fn(undefined); const { getByTestId } = render(); fireEvent.click(findButton(getByTestId)); expect(onSelectStub).toHaveBeenCalledWith(props.contentTypes[0].sys.id); diff --git a/packages/reference/src/components/CreateEntryLinkButton/CreateEntryMenuTrigger.spec.tsx b/packages/reference/src/components/CreateEntryLinkButton/CreateEntryMenuTrigger.spec.tsx index dcf1411c2..8a69d44c4 100644 --- a/packages/reference/src/components/CreateEntryLinkButton/CreateEntryMenuTrigger.spec.tsx +++ b/packages/reference/src/components/CreateEntryLinkButton/CreateEntryMenuTrigger.spec.tsx @@ -27,7 +27,8 @@ describe('CreateEntryMenuTrigger general', () => { }, }; - let stub = jest.fn(); + // FIXME: fix any type here + let stub: jest.Mock = jest.fn(); beforeEach(() => { stub = jest.fn().mockImplementation(() =>