fix!: exports getSiblingData, getDataByPath, and reduceFieldsToValues from payload (#7070)

## Description

Exports `getSiblingData`, `getDataByPath`, `reduceFieldsToValues`, and
`unflatten` from `payload`. These utilities were previously accessible
using direct import paths from `@payloadcms/ui`—but this is no longer
advised since moving to a pre-bundled UI library pattern. Instead of
simply exporting these from the `@payloadcms/ui` package, these exports
have been moved to Payload itself to provision for use outside of React
environments.

This is considered a breaking change. If you were previously importing
any of these utilities, the imports paths have changed as follows:

Old: 

```ts
import { getSiblingData, getDataByPath, reduceFieldsToValues } from '@payloadcms/ui/forms/Form'
import { unflatten } from '@payloadcms/ui/utilities'
```

New:

```ts
import { getSiblingData, getDataByPath, reduceFieldsToValues, unflatten } from 'payload/shared'
```

The `is-buffer` dependency was also removed in this PR.

- [x] I have read and understand the
[CONTRIBUTING.md](https://github.com/payloadcms/payload/blob/main/CONTRIBUTING.md)
document in this repository.

## Type of change

- [x] Bug fix (non-breaking change which fixes an issue)

## Checklist:

- [x] Existing test suite passes locally with my changes
This commit is contained in:
Jacob Fletcher
2024-07-08 17:28:05 -04:00
committed by GitHub
parent 40a8a3f715
commit 0a2ecf8a4a
19 changed files with 43 additions and 26 deletions

View File

@@ -136,7 +136,8 @@ You can do lots of powerful stuff by retrieving the full form state, like using
```tsx
'use client'
import { useAllFormFields, reduceFieldsToValues, getSiblingData } from '@payloadcms/ui'
import { useAllFormFields } from '@payloadcms/ui'
import { reduceFieldsToValues, getSiblingData } from 'payload/shared'
const ExampleComponent: React.FC = () => {
// the `fields` const will be equal to all fields' state,

View File

@@ -6,8 +6,8 @@ import type {
SanitizedGlobalConfig,
} from 'payload'
import { reduceFieldsToValues } from '@payloadcms/ui/shared'
import { buildFormState } from '@payloadcms/ui/utilities/buildFormState'
import { reduceFieldsToValues } from 'payload/shared'
export const getDocumentData = async (args: {
collectionConfig?: SanitizedCollectionConfig

View File

@@ -3,7 +3,7 @@
import type { EditViewProps } from 'payload'
import { ShimmerEffect, useAllFormFields, useDocumentEvents } from '@payloadcms/ui'
import { reduceFieldsToValues } from '@payloadcms/ui/shared'
import { reduceFieldsToValues } from 'payload/shared'
import React, { useEffect } from 'react'
import { useLivePreviewContext } from '../Context/context.js'

View File

@@ -30,6 +30,10 @@ export { deepMerge } from '../utilities/deepMerge.js'
export { fieldSchemaToJSON } from '../utilities/fieldSchemaToJSON.js'
export { getDataByPath } from '../utilities/getDataByPath.js'
export { getSiblingData } from '../utilities/getSiblingData.js'
export { getUniqueListBy } from '../utilities/getUniqueListBy.js'
export { isNumber } from '../utilities/isNumber.js'
@@ -40,6 +44,8 @@ export {
isReactServerComponentOrFunction,
} from '../utilities/isReactComponent.js'
export { reduceFieldsToValues } from '../utilities/reduceFieldsToValues.js'
export { setsAreEqual } from '../utilities/setsAreEqual.js'
export { default as toKebabCase } from '../utilities/toKebabCase.js'

View File

@@ -1,6 +1,6 @@
import type { FormState } from 'payload'
import { unflatten } from '../../utilities/unflatten.js'
import { unflatten } from './unflatten.js'
export const getDataByPath = <T = unknown>(fields: FormState, path: string): T => {
const pathPrefixToRemove = path.substring(0, path.lastIndexOf('.') + 1)

View File

@@ -1,7 +1,7 @@
import type { Data, FormState } from 'payload'
import { reduceFieldsToValues } from '../../utilities/reduceFieldsToValues.js'
import { unflatten } from '../../utilities/unflatten.js'
import { reduceFieldsToValues } from './reduceFieldsToValues.js'
import { unflatten } from './unflatten.js'
export const getSiblingData = (fields: FormState, path: string): Data => {
if (!fields) return null

View File

@@ -10,7 +10,19 @@
* THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
*/
import isBuffer from 'is-buffer'
/*
* Copyright (c) 2020, Feross Aboukhadijeh <https://feross.org>
* Reference: https://www.npmjs.com/package/is-buffer
* All rights reserved.
*/
function isBuffer(obj) {
return (
obj != null &&
obj.constructor != null &&
typeof obj.constructor.isBuffer === 'function' &&
obj.constructor.isBuffer(obj)
)
}
interface Opts {
delimiter?: string

View File

@@ -2,7 +2,7 @@ import type { Data, FormState } from 'payload'
import type React from 'react'
import { useAllFormFields } from '@payloadcms/ui'
import { reduceFieldsToValues } from '@payloadcms/ui/shared'
import { reduceFieldsToValues } from 'payload/shared'
import { useEffect } from 'react'
import { removeEmptyArrayValues } from './removeEmptyArrayValues.js'

View File

@@ -3,7 +3,8 @@
import type { FormState } from 'payload'
import { useConfig, useDrawerSlug, useFieldProps, useModal, useTranslation } from '@payloadcms/ui'
import { getFormState, reduceFieldsToValues } from '@payloadcms/ui/shared'
import { getFormState } from '@payloadcms/ui/shared'
import { reduceFieldsToValues } from 'payload/shared'
import React, { Fragment, useState } from 'react'
import { Editor, Range, Transforms } from 'slate'
import { ReactEditor, useSlate } from 'slate-react'

View File

@@ -14,8 +14,8 @@ import {
useModal,
useTranslation,
} from '@payloadcms/ui'
import { getFormState, reduceFieldsToValues } from '@payloadcms/ui/shared'
import { deepCopyObject } from 'payload/shared'
import { getFormState } from '@payloadcms/ui/shared'
import { deepCopyObject, reduceFieldsToValues } from 'payload/shared'
import React, { useCallback, useEffect, useState } from 'react'
import { Editor, Node, Transforms } from 'slate'
import { ReactEditor, useSlate } from 'slate-react'

View File

@@ -82,7 +82,6 @@
"bson-objectid": "2.0.4",
"date-fns": "3.3.1",
"dequal": "2.0.3",
"is-buffer": "^2.0.5",
"md5": "2.3.0",
"object-to-formdata": "4.5.1",
"qs": "6.12.1",

View File

@@ -1,7 +1,7 @@
'use client'
import type { FormState, SanitizedCollectionConfig } from 'payload'
import { isImage } from 'payload/shared'
import { isImage, reduceFieldsToValues } from 'payload/shared'
import React, { useCallback, useEffect, useState } from 'react'
import { FieldError } from '../../fields/FieldError/index.js'
@@ -11,7 +11,6 @@ import { useField } from '../../forms/useField/index.js'
import { useDocumentInfo } from '../../providers/DocumentInfo/index.js'
import { useFormQueryParams } from '../../providers/FormQueryParams/index.js'
import { useTranslation } from '../../providers/Translation/index.js'
import { reduceFieldsToValues } from '../../utilities/reduceFieldsToValues.js'
import { Button } from '../Button/index.js'
import { Drawer, DrawerToggler } from '../Drawer/index.js'
import { Dropzone } from '../Dropzone/index.js'

View File

@@ -17,4 +17,3 @@ export {
} from '../../utilities/groupNavItems.js'
export { hasSavePermission } from '../../utilities/hasSavePermission.js'
export { isEditing } from '../../utilities/isEditing.js'
export { reduceFieldsToValues } from '../../utilities/reduceFieldsToValues.js'

View File

@@ -5,7 +5,12 @@ import type { FormState } from 'payload'
import { dequal } from 'dequal/lite' // lite: no need for Map and Set support
import { useRouter } from 'next/navigation.js'
import { serialize } from 'object-to-formdata'
import { wait } from 'payload/shared'
import {
getDataByPath as getDataByPathFunc,
getSiblingData as getSiblingDataFunc,
reduceFieldsToValues,
wait,
} from 'payload/shared'
import qs from 'qs'
import React, { useCallback, useEffect, useReducer, useRef, useState } from 'react'
import { toast } from 'sonner'
@@ -28,7 +33,6 @@ import { useOperation } from '../../providers/Operation/index.js'
import { useTranslation } from '../../providers/Translation/index.js'
import { requests } from '../../utilities/api.js'
import { getFormState } from '../../utilities/getFormState.js'
import { reduceFieldsToValues } from '../../utilities/reduceFieldsToValues.js'
import {
FormContext,
FormFieldsContext,
@@ -40,8 +44,6 @@ import {
} from './context.js'
import { errorMessages } from './errorMessages.js'
import { fieldReducer } from './fieldReducer.js'
import { getDataByPath as getDataByPathFunc } from './getDataByPath.js'
import { getSiblingData as getSiblingDataFunc } from './getSiblingData.js'
import { initContextState } from './initContextState.js'
import { mergeServerFormState } from './mergeServerFormState.js'

View File

@@ -12,6 +12,7 @@ import type {
} from 'payload'
import { notFound } from 'next/navigation.js'
import { reduceFieldsToValues } from 'payload/shared'
import qs from 'qs'
import React, { createContext, useCallback, useContext, useEffect, useRef, useState } from 'react'
@@ -21,7 +22,6 @@ import { formatDocTitle } from '../../utilities/formatDocTitle.js'
import { getFormState } from '../../utilities/getFormState.js'
import { hasSavePermission as getHasSavePermission } from '../../utilities/hasSavePermission.js'
import { isEditing as getIsEditing } from '../../utilities/isEditing.js'
import { reduceFieldsToValues } from '../../utilities/reduceFieldsToValues.js'
import { useAuth } from '../Auth/index.js'
import { useConfig } from '../Config/index.js'
import { useLocale } from '../Locale/index.js'

View File

@@ -1,12 +1,13 @@
import type { DocumentPreferences, Field, FormState, PayloadRequest, TypeWithID } from 'payload'
// eslint-disable-next-line payload/no-imports-from-exports-dir
import { reduceFieldsToValues } from 'payload/shared'
import type { BuildFormStateArgs } from '../forms/buildStateFromSchema/index.js'
import type { FieldSchemaMap } from './buildFieldSchemaMap/types.js'
// eslint-disable-next-line payload/no-imports-from-exports-dir
import {} from '../exports/client/index.js'
// eslint-disable-next-line payload/no-imports-from-exports-dir
import { reduceFieldsToValues } from '../exports/shared/index.js'
import { buildStateFromSchema } from '../forms/buildStateFromSchema/index.js'
import { buildFieldSchemaMap } from './buildFieldSchemaMap/index.js'

View File

@@ -1,6 +1,6 @@
import type { Data, FormState } from 'payload'
import { unflatten as flatleyUnflatten } from './unflatten.js'
import { unflatten as flatleyUnflatten } from '../../../payload/src/utilities/unflatten.js'
type ReturnType = {
data: Data

3
pnpm-lock.yaml generated
View File

@@ -1419,9 +1419,6 @@ importers:
dequal:
specifier: 2.0.3
version: 2.0.3
is-buffer:
specifier: ^2.0.5
version: 2.0.5
md5:
specifier: 2.3.0
version: 2.3.0