tabshift/payloadcms
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

chore(ui)!: update the names of internal components so that they respect eslint rules (#7362)

Browse Source 
So `_Upload` becomes `UploadComponent` which doesnt break the naming
convention of react components and **we no longer export these internal
components**
This commit is contained in:
Paul
2024-07-26 13:50:23 -04:00
committed by GitHub
parent 5655266daa
commit e734d51760
21 changed files with 84 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/eslint-config/configs/react/index.mjs
View File

@@ -39,7 +39,7 @@ export const index = deepMerge(
}, },
}, },
rules: { rules: {
'react-hooks/rules-of-hooks': 'warn', 'react-hooks/rules-of-hooks': 'error',
}, },
}, },
) )

6
packages/ui/src/fields/Blocks/index.tsx
View File

@@ -46,7 +46,7 @@ export type BlocksFieldProps = {
width?: string width?: string
} & FormFieldBase } & FormFieldBase
const _BlocksField: React.FC<BlocksFieldProps> = (props) => { const BlocksFieldComponent: React.FC<BlocksFieldProps> = (props) => {
const { i18n, t } = useTranslation() const { i18n, t } = useTranslation()
const { const {
@@ -278,6 +278,7 @@ const _BlocksField: React.FC<BlocksFieldProps> = (props) => {
{(draggableSortableItemProps) => ( {(draggableSortableItemProps) => (
<BlockRow <BlockRow
{...draggableSortableItemProps} {...draggableSortableItemProps}
// eslint-disable-next-line @typescript-eslint/no-misused-promises
addRow={addRow} addRow={addRow}
block={blockToRender} block={blockToRender}
blocks={blocks} blocks={blocks}
@@ -341,6 +342,7 @@ const _BlocksField: React.FC<BlocksFieldProps> = (props) => {
</Button> </Button>
</DrawerToggler> </DrawerToggler>
<BlocksDrawer <BlocksDrawer
// eslint-disable-next-line @typescript-eslint/no-misused-promises
addRow={addRow} addRow={addRow}
addRowIndex={rows?.length || 0} addRowIndex={rows?.length || 0}
blocks={blocks} blocks={blocks}
@@ -353,4 +355,4 @@ const _BlocksField: React.FC<BlocksFieldProps> = (props) => {
) )
} }
export const BlocksField = withCondition(_BlocksField) export const BlocksField = withCondition(BlocksFieldComponent)

4
packages/ui/src/fields/Checkbox/index.tsx
View File

@@ -22,7 +22,7 @@ const baseClass = 'checkbox'
export { CheckboxFieldProps, CheckboxInput, type CheckboxInputProps } export { CheckboxFieldProps, CheckboxInput, type CheckboxInputProps }
const _CheckboxField: React.FC<CheckboxFieldProps> = (props) => { const CheckboxFieldComponent: React.FC<CheckboxFieldProps> = (props) => {
const { const {
id, id,
name, name,
@@ -124,4 +124,4 @@ const _CheckboxField: React.FC<CheckboxFieldProps> = (props) => {
) )
} }
export const CheckboxField = withCondition(_CheckboxField) export const CheckboxField = withCondition(CheckboxFieldComponent)

4
packages/ui/src/fields/Code/index.tsx
View File

@@ -30,7 +30,7 @@ const prismToMonacoLanguageMap = {
const baseClass = 'code-field' const baseClass = 'code-field'
const _CodeField: React.FC<CodeFieldProps> = (props) => { const CodeFieldComponent: React.FC<CodeFieldProps> = (props) => {
const { const {
name, name,
AfterInput, AfterInput,
@@ -110,4 +110,4 @@ const _CodeField: React.FC<CodeFieldProps> = (props) => {
) )
} }
export const CodeField = withCondition(_CodeField) export const CodeField = withCondition(CodeFieldComponent)

5
packages/ui/src/fields/Collapsible/index.tsx
View File

@@ -30,7 +30,7 @@ export type CollapsibleFieldProps = {
width?: string width?: string
} & FormFieldBase } & FormFieldBase
const _CollapsibleField: React.FC<CollapsibleFieldProps> = (props) => { const CollapsibleFieldComponent: React.FC<CollapsibleFieldProps> = (props) => {
const { const {
CustomDescription, CustomDescription,
CustomLabel, CustomLabel,
@@ -145,6 +145,7 @@ const _CollapsibleField: React.FC<CollapsibleFieldProps> = (props) => {
</div> </div>
} }
initCollapsed={collapsedOnMount} initCollapsed={collapsedOnMount}
// eslint-disable-next-line @typescript-eslint/no-misused-promises
onToggle={onToggle} onToggle={onToggle}
> >
<RenderFields <RenderFields
@@ -164,4 +165,4 @@ const _CollapsibleField: React.FC<CollapsibleFieldProps> = (props) => {
) )
} }
export const CollapsibleField = withCondition(_CollapsibleField) export const CollapsibleField = withCondition(CollapsibleFieldComponent)

4
packages/ui/src/fields/DateTime/index.tsx
View File

@@ -28,7 +28,7 @@ export type DateFieldProps = {
width?: string width?: string
} & FormFieldBase } & FormFieldBase
const _DateTimeField: React.FC<DateFieldProps> = (props) => { const DateTimeFieldComponent: React.FC<DateFieldProps> = (props) => {
const { const {
name, name,
AfterInput, AfterInput,
@@ -116,4 +116,4 @@ const _DateTimeField: React.FC<DateFieldProps> = (props) => {
) )
} }
export const DateTimeField = withCondition(_DateTimeField) export const DateTimeField = withCondition(DateTimeFieldComponent)

4
packages/ui/src/fields/Email/index.tsx
View File

@@ -24,7 +24,7 @@ export type EmailFieldProps = {
width?: string width?: string
} & FormFieldBase } & FormFieldBase
const _EmailField: React.FC<EmailFieldProps> = (props) => { const EmailFieldComponent: React.FC<EmailFieldProps> = (props) => {
const { const {
name, name,
AfterInput, AfterInput,
@@ -107,4 +107,4 @@ const _EmailField: React.FC<EmailFieldProps> = (props) => {
) )
} }
export const EmailField = withCondition(_EmailField) export const EmailField = withCondition(EmailFieldComponent)

4
packages/ui/src/fields/Group/index.tsx
View File

@@ -35,7 +35,7 @@ export type GroupFieldProps = {
width?: string width?: string
} & FormFieldBase } & FormFieldBase
export const _GroupField: React.FC<GroupFieldProps> = (props) => { const GroupFieldComponent: React.FC<GroupFieldProps> = (props) => {
const { const {
CustomDescription, CustomDescription,
CustomLabel, CustomLabel,
@@ -124,4 +124,4 @@ export const _GroupField: React.FC<GroupFieldProps> = (props) => {
export { GroupProvider, useGroup } export { GroupProvider, useGroup }
export const GroupField = withCondition(_GroupField) export const GroupField = withCondition(GroupFieldComponent)

4
packages/ui/src/fields/Hidden/index.tsx
View File

@@ -19,7 +19,7 @@ export type HiddenInputFieldProps = {
* This is mainly used to save a value on the form that is not visible to the user. * This is mainly used to save a value on the form that is not visible to the user.
* For example, this sets the `ìd` property of a block in the Blocks field. * For example, this sets the `ìd` property of a block in the Blocks field.
*/ */
const _HiddenField: React.FC<HiddenInputFieldProps> = (props) => { const HiddenFieldComponent: React.FC<HiddenInputFieldProps> = (props) => {
const { const {
name, name,
disableModifyingForm = true, disableModifyingForm = true,
@@ -51,4 +51,4 @@ const _HiddenField: React.FC<HiddenInputFieldProps> = (props) => {
) )
} }
export const HiddenField = withCondition(_HiddenField) export const HiddenField = withCondition(HiddenFieldComponent)

4
packages/ui/src/fields/JSON/index.tsx
View File

@@ -26,7 +26,7 @@ export type JSONFieldProps = {
width?: string width?: string
} & FormFieldBase } & FormFieldBase
const _JSONField: React.FC<JSONFieldProps> = (props) => { const JSONFieldComponent: React.FC<JSONFieldProps> = (props) => {
const { const {
name, name,
AfterInput, AfterInput,
@@ -160,4 +160,4 @@ const _JSONField: React.FC<JSONFieldProps> = (props) => {
) )
} }
export const JSONField = withCondition(_JSONField) export const JSONField = withCondition(JSONFieldComponent)

4
packages/ui/src/fields/Number/index.tsx
View File

@@ -32,7 +32,7 @@ export type NumberFieldProps = {
width?: string width?: string
} & FormFieldBase } & FormFieldBase
const _NumberField: React.FC<NumberFieldProps> = (props) => { const NumberFieldComponent: React.FC<NumberFieldProps> = (props) => {
const { const {
name, name,
AfterInput, AfterInput,
@@ -223,4 +223,4 @@ const _NumberField: React.FC<NumberFieldProps> = (props) => {
) )
} }
export const NumberField = withCondition(_NumberField) export const NumberField = withCondition(NumberFieldComponent)

4
packages/ui/src/fields/Password/index.tsx
View File

@@ -25,7 +25,7 @@ export type PasswordFieldProps = {
width?: string width?: string
} & FormFieldBase } & FormFieldBase
const _PasswordField: React.FC<PasswordFieldProps> = (props) => { const PasswordFieldComponent: React.FC<PasswordFieldProps> = (props) => {
const { const {
name, name,
CustomError, CustomError,
@@ -97,4 +97,4 @@ const _PasswordField: React.FC<PasswordFieldProps> = (props) => {
) )
} }
export const PasswordField = withCondition(_PasswordField) export const PasswordField = withCondition(PasswordFieldComponent)

8
packages/ui/src/fields/Point/index.tsx
View File

@@ -27,7 +27,7 @@ export type PointFieldProps = {
width?: string width?: string
} & FormFieldBase } & FormFieldBase
export const _PointField: React.FC<PointFieldProps> = (props) => { const PointFieldComponent: React.FC<PointFieldProps> = (props) => {
const { const {
name, name,
AfterInput, AfterInput,
@@ -122,6 +122,8 @@ export const _PointField: React.FC<PointFieldProps> = (props) => {
)} )}
<div className="input-wrapper"> <div className="input-wrapper">
{BeforeInput} {BeforeInput}
{/* disable eslint rule because the label is dynamic */}
{/* eslint-disable-next-line jsx-a11y/control-has-associated-label */}
<input <input
disabled={readOnly} disabled={readOnly}
id={`field-longitude-${path.replace(/\./g, '__')}`} id={`field-longitude-${path.replace(/\./g, '__')}`}
@@ -144,6 +146,8 @@ export const _PointField: React.FC<PointFieldProps> = (props) => {
<div className="input-wrapper"> <div className="input-wrapper">
<FieldError CustomError={CustomError} path={path} {...(errorProps || {})} /> <FieldError CustomError={CustomError} path={path} {...(errorProps || {})} />
{BeforeInput} {BeforeInput}
{/* disable eslint rule because the label is dynamic */}
{/* eslint-disable-next-line jsx-a11y/control-has-associated-label */}
<input <input
disabled={readOnly} disabled={readOnly}
id={`field-latitude-${path.replace(/\./g, '__')}`} id={`field-latitude-${path.replace(/\./g, '__')}`}
@@ -167,4 +171,4 @@ export const _PointField: React.FC<PointFieldProps> = (props) => {
) )
} }
export const PointField = withCondition(_PointField) export const PointField = withCondition(PointFieldComponent)

4
packages/ui/src/fields/RadioGroup/index.tsx
View File

@@ -32,7 +32,7 @@ export type RadioFieldProps = {
export type OnChange<T = string> = (value: T) => void export type OnChange<T = string> = (value: T) => void
const _RadioGroupField: React.FC<RadioFieldProps> = (props) => { const RadioGroupFieldComponent: React.FC<RadioFieldProps> = (props) => {
const { const {
name, name,
CustomDescription, CustomDescription,
@@ -155,4 +155,4 @@ const _RadioGroupField: React.FC<RadioFieldProps> = (props) => {
) )
} }
export const RadioGroupField = withCondition(_RadioGroupField) export const RadioGroupField = withCondition(RadioGroupFieldComponent)

4
packages/ui/src/fields/Relationship/index.tsx
View File

@@ -35,7 +35,7 @@ const baseClass = 'relationship'
export { RelationshipFieldProps } export { RelationshipFieldProps }
const _RelationshipField: React.FC<RelationshipFieldProps> = (props) => { const RelationshipFieldComponent: React.FC<RelationshipFieldProps> = (props) => {
const { const {
name, name,
CustomDescription, CustomDescription,
@@ -606,4 +606,4 @@ const _RelationshipField: React.FC<RelationshipFieldProps> = (props) => {
) )
} }
export const RelationshipField = withCondition(_RelationshipField) export const RelationshipField = withCondition(RelationshipFieldComponent)

4
packages/ui/src/fields/Row/index.tsx
View File

@@ -14,7 +14,7 @@ export { RowProvider, useRow }
const baseClass = 'row' const baseClass = 'row'
export const _RowField: React.FC<RowFieldProps> = (props) => { const RowFieldComponent: React.FC<RowFieldProps> = (props) => {
const { className, fieldMap, forceRender = false } = props const { className, fieldMap, forceRender = false } = props
const { indexPath, path, readOnly, schemaPath, siblingPermissions } = useFieldProps() const { indexPath, path, readOnly, schemaPath, siblingPermissions } = useFieldProps()
@@ -36,4 +36,4 @@ export const _RowField: React.FC<RowFieldProps> = (props) => {
) )
} }
export const RowField = withCondition(_RowField) export const RowField = withCondition(RowFieldComponent)

4
packages/ui/src/fields/Select/index.tsx
View File

@@ -36,7 +36,7 @@ const formatOptions = (options: Option[]): OptionObject[] =>
} as OptionObject } as OptionObject
}) })
const _SelectField: React.FC<SelectFieldProps> = (props) => { const SelectFieldComponent: React.FC<SelectFieldProps> = (props) => {
const { const {
name, name,
AfterInput, AfterInput,
@@ -134,6 +134,6 @@ const _SelectField: React.FC<SelectFieldProps> = (props) => {
) )
} }
export const SelectField = withCondition(_SelectField) export const SelectField = withCondition(SelectFieldComponent)
export { SelectInput, type SelectInputProps } export { SelectInput, type SelectInputProps }

78
packages/ui/src/fields/Tabs/index.tsx
View File

@@ -33,7 +33,7 @@ export type TabsFieldProps = {
width?: string width?: string
} & FormFieldBase } & FormFieldBase
const _TabsField: React.FC<TabsFieldProps> = (props) => { const TabsFieldComponent: React.FC<TabsFieldProps> = (props) => {
const { const {
name, name,
CustomDescription, CustomDescription,
@@ -142,7 +142,7 @@ const _TabsField: React.FC<TabsFieldProps> = (props) => {
isActive={activeTabIndex === tabIndex} isActive={activeTabIndex === tabIndex}
key={tabIndex} key={tabIndex}
parentPath={path} parentPath={path}
setIsActive={() => handleTabChange(tabIndex)} setIsActive={() => void handleTabChange(tabIndex)}
tab={tab} tab={tab}
/> />
) )
@@ -151,43 +151,41 @@ const _TabsField: React.FC<TabsFieldProps> = (props) => {
</div> </div>
<div className={`${baseClass}__content-wrap`}> <div className={`${baseClass}__content-wrap`}>
{activeTabConfig && ( {activeTabConfig && (
<React.Fragment> <div
<div className={[
className={[ `${baseClass}__tab`,
`${baseClass}__tab`, activeTabConfig.label &&
activeTabConfig.label && `${baseClass}__tabConfigLabel-${toKebabCase(
`${baseClass}__tabConfigLabel-${toKebabCase( getTranslation(activeTabConfig.label, i18n),
getTranslation(activeTabConfig.label, i18n), )}`,
)}`, ]
] .filter(Boolean)
.filter(Boolean) .join(' ')}
.join(' ')} >
> {CustomDescription ? (
{CustomDescription ? ( CustomDescription
CustomDescription ) : (
) : ( <FieldDescription {...(descriptionProps || {})} />
<FieldDescription {...(descriptionProps || {})} /> )}
)} <RenderFields
<RenderFields fieldMap={activeTabConfig.fieldMap}
fieldMap={activeTabConfig.fieldMap} forceRender={forceRender}
forceRender={forceRender} key={
key={ activeTabConfig.label
activeTabConfig.label ? getTranslation(activeTabConfig.label, i18n)
? getTranslation(activeTabConfig.label, i18n) : activeTabConfig['name']
: activeTabConfig['name'] }
} margins="small"
margins="small" path={generateTabPath()}
path={generateTabPath()} permissions={
permissions={ 'name' in activeTabConfig && siblingPermissions?.[activeTabConfig.name]?.fields
'name' in activeTabConfig && siblingPermissions?.[activeTabConfig.name]?.fields ? siblingPermissions[activeTabConfig.name]?.fields
? siblingPermissions[activeTabConfig.name]?.fields : siblingPermissions
: siblingPermissions }
} readOnly={readOnly}
readOnly={readOnly} schemaPath={`${schemaPath ? `${schemaPath}` : ''}${activeTabConfig.name ? `.${activeTabConfig.name}` : ''}`}
schemaPath={`${schemaPath ? `${schemaPath}` : ''}${activeTabConfig.name ? `.${activeTabConfig.name}` : ''}`} />
/> </div>
</div>
</React.Fragment>
)} )}
</div> </div>
</TabsProvider> </TabsProvider>
@@ -195,4 +193,4 @@ const _TabsField: React.FC<TabsFieldProps> = (props) => {
) )
} }
export const TabsField = withCondition(_TabsField) export const TabsField = withCondition(TabsFieldComponent)

4
packages/ui/src/fields/Text/index.tsx
View File

@@ -17,7 +17,7 @@ import './index.scss'
export { TextFieldProps, TextInput, TextInputProps } export { TextFieldProps, TextInput, TextInputProps }
const _TextField: React.FC<TextFieldProps> = (props) => { const TextFieldComponent: React.FC<TextFieldProps> = (props) => {
const { const {
name, name,
AfterInput, AfterInput,
@@ -153,4 +153,4 @@ const _TextField: React.FC<TextFieldProps> = (props) => {
) )
} }
export const TextField = withCondition(_TextField) export const TextField = withCondition(TextFieldComponent)

4
packages/ui/src/fields/Textarea/index.tsx
View File

@@ -17,7 +17,7 @@ import './index.scss'
export { TextAreaInputProps, TextareaFieldProps, TextareaInput } export { TextAreaInputProps, TextareaFieldProps, TextareaInput }
const _TextareaField: React.FC<TextareaFieldProps> = (props) => { const TextareaFieldComponent: React.FC<TextareaFieldProps> = (props) => {
const { const {
name, name,
AfterInput, AfterInput,
@@ -102,4 +102,4 @@ const _TextareaField: React.FC<TextareaFieldProps> = (props) => {
) )
} }
export const TextareaField = withCondition(_TextareaField) export const TextareaField = withCondition(TextareaFieldComponent)

4
packages/ui/src/fields/Upload/index.tsx
View File

@@ -16,7 +16,7 @@ import './index.scss'
export { UploadFieldProps, UploadInput } export { UploadFieldProps, UploadInput }
export type { UploadInputProps } export type { UploadInputProps }
const _Upload: React.FC<UploadFieldProps> = (props) => { const UploadComponent: React.FC<UploadFieldProps> = (props) => {
const { const {
CustomDescription, CustomDescription,
CustomError, CustomError,
@@ -115,4 +115,4 @@ const _Upload: React.FC<UploadFieldProps> = (props) => {
return null return null
} }
export const UploadField = withCondition(_Upload) export const UploadField = withCondition(UploadComponent)