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

So `_Upload` becomes `UploadComponent` which doesnt break the naming convention of react components and **we no longer export these internal components**
2024-07-26 13:50:23 -04:00
parent 5655266daa
commit e734d51760
21 changed files with 84 additions and 79 deletions
--- a/packages/eslint-config/configs/react/index.mjs
+++ b/packages/eslint-config/configs/react/index.mjs
@@ -39,7 +39,7 @@ export const index = deepMerge(
      },
    },
    rules: {
-      'react-hooks/rules-of-hooks': 'warn',
+      'react-hooks/rules-of-hooks': 'error',
    },
  },
 )
--- a/packages/ui/src/fields/Blocks/index.tsx
+++ b/packages/ui/src/fields/Blocks/index.tsx
@@ -46,7 +46,7 @@ export type BlocksFieldProps = {
  width?: string
 } & FormFieldBase

-const _BlocksField: React.FC<BlocksFieldProps> = (props) => {
+const BlocksFieldComponent: React.FC<BlocksFieldProps> = (props) => {
  const { i18n, t } = useTranslation()

  const {
@@ -278,6 +278,7 @@ const _BlocksField: React.FC<BlocksFieldProps> = (props) => {
                  {(draggableSortableItemProps) => (
                    <BlockRow
                      {...draggableSortableItemProps}
+                      // eslint-disable-next-line @typescript-eslint/no-misused-promises
                      addRow={addRow}
                      block={blockToRender}
                      blocks={blocks}
@@ -341,6 +342,7 @@ const _BlocksField: React.FC<BlocksFieldProps> = (props) => {
            </Button>
          </DrawerToggler>
          <BlocksDrawer
+            // eslint-disable-next-line @typescript-eslint/no-misused-promises
            addRow={addRow}
            addRowIndex={rows?.length || 0}
            blocks={blocks}
@@ -353,4 +355,4 @@ const _BlocksField: React.FC<BlocksFieldProps> = (props) => {
  )
 }

-export const BlocksField = withCondition(_BlocksField)
+export const BlocksField = withCondition(BlocksFieldComponent)
--- a/packages/ui/src/fields/Checkbox/index.tsx
+++ b/packages/ui/src/fields/Checkbox/index.tsx
@@ -22,7 +22,7 @@ const baseClass = 'checkbox'

 export { CheckboxFieldProps, CheckboxInput, type CheckboxInputProps }

-const _CheckboxField: React.FC<CheckboxFieldProps> = (props) => {
+const CheckboxFieldComponent: React.FC<CheckboxFieldProps> = (props) => {
  const {
    id,
    name,
@@ -124,4 +124,4 @@ const _CheckboxField: React.FC<CheckboxFieldProps> = (props) => {
  )
 }

-export const CheckboxField = withCondition(_CheckboxField)
+export const CheckboxField = withCondition(CheckboxFieldComponent)
--- a/packages/ui/src/fields/Code/index.tsx
+++ b/packages/ui/src/fields/Code/index.tsx
@@ -30,7 +30,7 @@ const prismToMonacoLanguageMap = {

 const baseClass = 'code-field'

-const _CodeField: React.FC<CodeFieldProps> = (props) => {
+const CodeFieldComponent: React.FC<CodeFieldProps> = (props) => {
  const {
    name,
    AfterInput,
@@ -110,4 +110,4 @@ const _CodeField: React.FC<CodeFieldProps> = (props) => {
  )
 }

-export const CodeField = withCondition(_CodeField)
+export const CodeField = withCondition(CodeFieldComponent)
--- a/packages/ui/src/fields/Collapsible/index.tsx
+++ b/packages/ui/src/fields/Collapsible/index.tsx
@@ -30,7 +30,7 @@ export type CollapsibleFieldProps = {
  width?: string
 } & FormFieldBase

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

-export const CollapsibleField = withCondition(_CollapsibleField)
+export const CollapsibleField = withCondition(CollapsibleFieldComponent)
--- a/packages/ui/src/fields/DateTime/index.tsx
+++ b/packages/ui/src/fields/DateTime/index.tsx
@@ -28,7 +28,7 @@ export type DateFieldProps = {
  width?: string
 } & FormFieldBase

-const _DateTimeField: React.FC<DateFieldProps> = (props) => {
+const DateTimeFieldComponent: React.FC<DateFieldProps> = (props) => {
  const {
    name,
    AfterInput,
@@ -116,4 +116,4 @@ const _DateTimeField: React.FC<DateFieldProps> = (props) => {
  )
 }

-export const DateTimeField = withCondition(_DateTimeField)
+export const DateTimeField = withCondition(DateTimeFieldComponent)
--- a/packages/ui/src/fields/Email/index.tsx
+++ b/packages/ui/src/fields/Email/index.tsx
@@ -24,7 +24,7 @@ export type EmailFieldProps = {
  width?: string
 } & FormFieldBase

-const _EmailField: React.FC<EmailFieldProps> = (props) => {
+const EmailFieldComponent: React.FC<EmailFieldProps> = (props) => {
  const {
    name,
    AfterInput,
@@ -107,4 +107,4 @@ const _EmailField: React.FC<EmailFieldProps> = (props) => {
  )
 }

-export const EmailField = withCondition(_EmailField)
+export const EmailField = withCondition(EmailFieldComponent)
--- a/packages/ui/src/fields/Group/index.tsx
+++ b/packages/ui/src/fields/Group/index.tsx
@@ -35,7 +35,7 @@ export type GroupFieldProps = {
  width?: string
 } & FormFieldBase

-export const _GroupField: React.FC<GroupFieldProps> = (props) => {
+const GroupFieldComponent: React.FC<GroupFieldProps> = (props) => {
  const {
    CustomDescription,
    CustomLabel,
@@ -124,4 +124,4 @@ export const _GroupField: React.FC<GroupFieldProps> = (props) => {

 export { GroupProvider, useGroup }

-export const GroupField = withCondition(_GroupField)
+export const GroupField = withCondition(GroupFieldComponent)
--- a/packages/ui/src/fields/Hidden/index.tsx
+++ b/packages/ui/src/fields/Hidden/index.tsx
@@ -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.
 * 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 {
    name,
    disableModifyingForm = true,
@@ -51,4 +51,4 @@ const _HiddenField: React.FC<HiddenInputFieldProps> = (props) => {
  )
 }

-export const HiddenField = withCondition(_HiddenField)
+export const HiddenField = withCondition(HiddenFieldComponent)
--- a/packages/ui/src/fields/JSON/index.tsx
+++ b/packages/ui/src/fields/JSON/index.tsx
@@ -26,7 +26,7 @@ export type JSONFieldProps = {
  width?: string
 } & FormFieldBase

-const _JSONField: React.FC<JSONFieldProps> = (props) => {
+const JSONFieldComponent: React.FC<JSONFieldProps> = (props) => {
  const {
    name,
    AfterInput,
@@ -160,4 +160,4 @@ const _JSONField: React.FC<JSONFieldProps> = (props) => {
  )
 }

-export const JSONField = withCondition(_JSONField)
+export const JSONField = withCondition(JSONFieldComponent)
--- a/packages/ui/src/fields/Number/index.tsx
+++ b/packages/ui/src/fields/Number/index.tsx
@@ -32,7 +32,7 @@ export type NumberFieldProps = {
  width?: string
 } & FormFieldBase

-const _NumberField: React.FC<NumberFieldProps> = (props) => {
+const NumberFieldComponent: React.FC<NumberFieldProps> = (props) => {
  const {
    name,
    AfterInput,
@@ -223,4 +223,4 @@ const _NumberField: React.FC<NumberFieldProps> = (props) => {
  )
 }

-export const NumberField = withCondition(_NumberField)
+export const NumberField = withCondition(NumberFieldComponent)
--- a/packages/ui/src/fields/Password/index.tsx
+++ b/packages/ui/src/fields/Password/index.tsx
@@ -25,7 +25,7 @@ export type PasswordFieldProps = {
  width?: string
 } & FormFieldBase

-const _PasswordField: React.FC<PasswordFieldProps> = (props) => {
+const PasswordFieldComponent: React.FC<PasswordFieldProps> = (props) => {
  const {
    name,
    CustomError,
@@ -97,4 +97,4 @@ const _PasswordField: React.FC<PasswordFieldProps> = (props) => {
  )
 }

-export const PasswordField = withCondition(_PasswordField)
+export const PasswordField = withCondition(PasswordFieldComponent)
--- a/packages/ui/src/fields/Point/index.tsx
+++ b/packages/ui/src/fields/Point/index.tsx
@@ -27,7 +27,7 @@ export type PointFieldProps = {
  width?: string
 } & FormFieldBase

-export const _PointField: React.FC<PointFieldProps> = (props) => {
+const PointFieldComponent: React.FC<PointFieldProps> = (props) => {
  const {
    name,
    AfterInput,
@@ -122,6 +122,8 @@ export const _PointField: React.FC<PointFieldProps> = (props) => {
          )}
          <div className="input-wrapper">
            {BeforeInput}
+            {/* disable eslint rule because the label is dynamic */}
+            {/* eslint-disable-next-line jsx-a11y/control-has-associated-label */}
            <input
              disabled={readOnly}
              id={`field-longitude-${path.replace(/\./g, '__')}`}
@@ -144,6 +146,8 @@ export const _PointField: React.FC<PointFieldProps> = (props) => {
          <div className="input-wrapper">
            <FieldError CustomError={CustomError} path={path} {...(errorProps || {})} />
            {BeforeInput}
+            {/* disable eslint rule because the label is dynamic */}
+            {/* eslint-disable-next-line jsx-a11y/control-has-associated-label */}
            <input
              disabled={readOnly}
              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)
--- a/packages/ui/src/fields/RadioGroup/index.tsx
+++ b/packages/ui/src/fields/RadioGroup/index.tsx
@@ -32,7 +32,7 @@ export type RadioFieldProps = {

 export type OnChange<T = string> = (value: T) => void

-const _RadioGroupField: React.FC<RadioFieldProps> = (props) => {
+const RadioGroupFieldComponent: React.FC<RadioFieldProps> = (props) => {
  const {
    name,
    CustomDescription,
@@ -155,4 +155,4 @@ const _RadioGroupField: React.FC<RadioFieldProps> = (props) => {
  )
 }

-export const RadioGroupField = withCondition(_RadioGroupField)
+export const RadioGroupField = withCondition(RadioGroupFieldComponent)
--- a/packages/ui/src/fields/Relationship/index.tsx
+++ b/packages/ui/src/fields/Relationship/index.tsx
@@ -35,7 +35,7 @@ const baseClass = 'relationship'

 export { RelationshipFieldProps }

-const _RelationshipField: React.FC<RelationshipFieldProps> = (props) => {
+const RelationshipFieldComponent: React.FC<RelationshipFieldProps> = (props) => {
  const {
    name,
    CustomDescription,
@@ -606,4 +606,4 @@ const _RelationshipField: React.FC<RelationshipFieldProps> = (props) => {
  )
 }

-export const RelationshipField = withCondition(_RelationshipField)
+export const RelationshipField = withCondition(RelationshipFieldComponent)
--- a/packages/ui/src/fields/Row/index.tsx
+++ b/packages/ui/src/fields/Row/index.tsx
@@ -14,7 +14,7 @@ export { RowProvider, useRow }

 const baseClass = 'row'

-export const _RowField: React.FC<RowFieldProps> = (props) => {
+const RowFieldComponent: React.FC<RowFieldProps> = (props) => {
  const { className, fieldMap, forceRender = false } = props

  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)
--- a/packages/ui/src/fields/Select/index.tsx
+++ b/packages/ui/src/fields/Select/index.tsx
@@ -36,7 +36,7 @@ const formatOptions = (options: Option[]): OptionObject[] =>
    } as OptionObject
  })

-const _SelectField: React.FC<SelectFieldProps> = (props) => {
+const SelectFieldComponent: React.FC<SelectFieldProps> = (props) => {
  const {
    name,
    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 }
--- a/packages/ui/src/fields/Tabs/index.tsx
+++ b/packages/ui/src/fields/Tabs/index.tsx
@@ -33,7 +33,7 @@ export type TabsFieldProps = {
  width?: string
 } & FormFieldBase

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

-export const TabsField = withCondition(_TabsField)
+export const TabsField = withCondition(TabsFieldComponent)
--- a/packages/ui/src/fields/Text/index.tsx
+++ b/packages/ui/src/fields/Text/index.tsx
@@ -17,7 +17,7 @@ import './index.scss'

 export { TextFieldProps, TextInput, TextInputProps }

-const _TextField: React.FC<TextFieldProps> = (props) => {
+const TextFieldComponent: React.FC<TextFieldProps> = (props) => {
  const {
    name,
    AfterInput,
@@ -153,4 +153,4 @@ const _TextField: React.FC<TextFieldProps> = (props) => {
  )
 }

-export const TextField = withCondition(_TextField)
+export const TextField = withCondition(TextFieldComponent)
--- a/packages/ui/src/fields/Textarea/index.tsx
+++ b/packages/ui/src/fields/Textarea/index.tsx
@@ -17,7 +17,7 @@ import './index.scss'

 export { TextAreaInputProps, TextareaFieldProps, TextareaInput }

-const _TextareaField: React.FC<TextareaFieldProps> = (props) => {
+const TextareaFieldComponent: React.FC<TextareaFieldProps> = (props) => {
  const {
    name,
    AfterInput,
@@ -102,4 +102,4 @@ const _TextareaField: React.FC<TextareaFieldProps> = (props) => {
  )
 }

-export const TextareaField = withCondition(_TextareaField)
+export const TextareaField = withCondition(TextareaFieldComponent)
--- a/packages/ui/src/fields/Upload/index.tsx
+++ b/packages/ui/src/fields/Upload/index.tsx
@@ -16,7 +16,7 @@ import './index.scss'
 export { UploadFieldProps, UploadInput }
 export type { UploadInputProps }

-const _Upload: React.FC<UploadFieldProps> = (props) => {
+const UploadComponent: React.FC<UploadFieldProps> = (props) => {
  const {
    CustomDescription,
    CustomError,
@@ -115,4 +115,4 @@ const _Upload: React.FC<UploadFieldProps> = (props) => {
  return null
 }

-export const UploadField = withCondition(_Upload)
+export const UploadField = withCondition(UploadComponent)