diff --git a/packages/_shared/src/FieldConnector.ts b/packages/_shared/src/FieldConnector.ts index bbdd86aff..6e9dd441c 100644 --- a/packages/_shared/src/FieldConnector.ts +++ b/packages/_shared/src/FieldConnector.ts @@ -1,8 +1,8 @@ import * as React from 'react'; import { FieldAPI, ValidationError } from '@contentful/app-sdk'; -import { debounce } from 'lodash-es'; -import { isEqual } from 'lodash-es'; +import debounce from 'lodash-es/debounce.js'; +import isEqual from 'lodash-es/isEqual.js'; type Nullable = null | undefined; diff --git a/packages/_shared/src/index.tsx b/packages/_shared/src/index.tsx index 2b0bfa7c2..37ff45799 100644 --- a/packages/_shared/src/index.tsx +++ b/packages/_shared/src/index.tsx @@ -24,7 +24,7 @@ export { CharValidation } from './CharValidation.js'; export { FieldConnector } from './FieldConnector.js'; export type { FieldConnectorChildProps } from './FieldConnector.js'; export { PredefinedValuesError } from './PredefinedValuesError.js'; -export type { Asset, Entry, File } from './typesEntity.js'; +export { Asset, Entry } from './typesEntity.js'; export { isValidImage } from './utils/isValidImage.js'; export { shortenStorageUnit, toLocaleString } from './utils/shortenStorageUnit.js'; export { ModalDialogLauncher }; @@ -34,3 +34,12 @@ export { ConstraintsUtils }; import * as ModalDialogLauncher from './ModalDialogLauncher.js'; import * as ConstraintsUtils from './utils/constraints.js'; import * as entityHelpers from './utils/entityHelpers.js'; + +export interface File { + fileName: string; + contentType: string; + upload?: string; + url?: string; + details?: Record; + uploadFrom?: Record; +} diff --git a/packages/_shared/src/typesEntity.ts b/packages/_shared/src/typesEntity.ts index ca9bc3d96..daad61bcb 100644 --- a/packages/_shared/src/typesEntity.ts +++ b/packages/_shared/src/typesEntity.ts @@ -1,11 +1,4 @@ -export type { - BaseAppSDK, - ContentType, - ContentTypeField, - Link, - Entry, - Asset, -} from '@contentful/app-sdk'; +export { BaseAppSDK, ContentType, ContentTypeField, Link, Entry, Asset } from '@contentful/app-sdk'; export interface File { fileName: string; diff --git a/packages/json/.eslintrc.cjs b/packages/reference/.eslintrc.cjs similarity index 100% rename from packages/json/.eslintrc.cjs rename to packages/reference/.eslintrc.cjs diff --git a/packages/reference/.eslintrc.js b/packages/reference/.eslintrc.js deleted file mode 100644 index 9021a3728..000000000 --- a/packages/reference/.eslintrc.js +++ /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/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..920b4178f 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,16 +15,15 @@ }, "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", - "tsc": "tsc -p ./ --noEmit" + "test:ci": "yarn node --experimental-vm-modules $(yarn bin jest --ci)", + "tsc": "tsc -p ./ --noEmit", + "prepare": "relative-deps" }, "dependencies": { "@contentful/f36-components": "^4.0.27", @@ -45,23 +36,27 @@ "@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": { "@contentful/app-sdk": "^4.17.1", "react": ">=16.8.0" + }, + "relativeDependencies": { + "@contentful/field-editor-shared": "../_shared" } -} +} \ No newline at end of file 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/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/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; @@ -212,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/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/constate.tsx b/packages/reference/src/common/constate.tsx new file mode 100644 index 000000000..3a77fb14c --- /dev/null +++ b/packages/reference/src/common/constate.tsx @@ -0,0 +1,87 @@ +// source: https://github.com/diegohaz/constate/blob/master/src/index.tsx + +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/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..29bbc498e 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; @@ -18,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/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..2a28f2100 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', @@ -100,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( ); @@ -119,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/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..8a69d44c4 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', @@ -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(() =>