From abff60b6a28feebbb638aa2541cd5d9d4d79c8a1 Mon Sep 17 00:00:00 2001 From: Valera Melnikov Date: Mon, 7 Aug 2023 15:38:48 +0300 Subject: [PATCH] chore: improve eslint rules (#26056) ## Description Make eslint rules stricter for packages #### Type of change - Chore (housekeeping or task changes that don't impact user perception) ## Testing > #### How Has This Been Tested? > Please describe the tests that you ran to verify your changes. Also list any relevant details for your test configuration. > Delete anything that is not relevant - [x] Manual - [x] Jest - [ ] Cypress ## Checklist: #### Dev activity - [x] My code follows the style guidelines of this project - [x] I have performed a self-review of my own code - [ ] I have commented my code, particularly in hard-to-understand areas - [ ] I have made corresponding changes to the documentation - [x] My changes generate no new warnings - [ ] I have added tests that prove my fix is effective or that my feature works - [x] New and existing unit tests pass locally with my changes - [ ] PR is being merged under a feature flag Co-authored-by: Valera Melnikov --- app/client/.eslintrc.base.json | 11 +- app/client/.eslintrc.js | 3 + app/client/cypress/.eslintrc.json | 4 +- app/client/packages/ast/.eslintrc.json | 5 +- app/client/packages/ast/rollup.config.js | 3 +- .../headless/src/components/Button/Button.tsx | 6 +- .../src/components/Checkbox/Checkbox.tsx | 6 +- .../src/components/Checkbox/CheckboxGroup.tsx | 68 +++++----- .../src/components/Field/ErrorText.tsx | 28 ++--- .../headless/src/components/Field/Field.tsx | 9 +- .../headless/src/components/Field/Label.tsx | 112 +++++++++-------- .../headless/src/components/Radio/Radio.tsx | 8 +- .../src/components/Radio/RadioGroup.tsx | 80 ++++++------ .../headless/src/components/Switch/Switch.tsx | 6 +- .../src/components/Tooltip/TooltipContent.tsx | 72 ++++++----- .../src/components/Tooltip/TooltipTrigger.tsx | 13 +- .../design-system/widgets-old/.eslintrc.json | 7 ++ .../src/components/Button/Button.test.tsx | 2 +- .../widgets/src/components/Button/Button.tsx | 116 +++++++++--------- .../ButtonGroup/ButtonGroup.test.tsx | 2 +- .../src/components/Checkbox/Checkbox.test.tsx | 2 +- .../src/components/Checkbox/Checkbox.tsx | 20 +-- .../CheckboxGroup/CheckboxGroup.tsx | 33 ++--- .../src/components/Flex/index.styled.tsx | 29 ++++- .../widgets/src/components/Flex/types.ts | 2 +- .../widgets/src/components/Radio/Radio.tsx | 6 +- .../src/components/RadioGroup/RadioGroup.tsx | 30 ++--- .../src/components/Spinner/index.styled.tsx | 2 +- .../widgets/src/components/Switch/Switch.tsx | 25 ++-- .../widgets/src/components/Text/Text.tsx | 60 ++++----- .../src/components/Tooltip/TooltipContent.tsx | 35 +++--- app/client/packages/dsl/rollup.config.js | 3 +- app/client/packages/dsl/src/index.test.ts | 2 +- app/client/packages/rts/.eslintrc.json | 5 +- .../ColorPickerComponentV2.tsx | 3 +- app/client/src/constants/routes/appRoutes.ts | 1 + app/client/src/constants/routes/baseRoutes.ts | 1 + app/client/src/utils/history.ts | 1 + app/client/src/wdyr.ts | 1 + .../widgets/ChartWidget/component/index.tsx | 1 + .../widget/FileParser.test.tsx | 2 +- app/client/src/widgets/WidgetUtils.ts | 3 +- 42 files changed, 438 insertions(+), 390 deletions(-) create mode 100644 app/client/packages/design-system/widgets-old/.eslintrc.json diff --git a/app/client/.eslintrc.base.json b/app/client/.eslintrc.base.json index c141e3bf46..4231bb9529 100644 --- a/app/client/.eslintrc.base.json +++ b/app/client/.eslintrc.base.json @@ -28,16 +28,7 @@ } }, "rules": { - "@typescript-eslint/no-explicit-any": "off", - "@typescript-eslint/no-use-before-define": "off", - "@typescript-eslint/no-var-requires": "off", - "import/no-webpack-loader-syntax": "off", - "no-undef": "off", - "react/prop-types": "off", - "react/display-name": "off", - "@typescript-eslint/explicit-module-boundary-types": "off", - "cypress/no-unnecessary-waiting": "off", - "cypress/no-assigning-return-values": "off", + "@typescript-eslint/no-explicit-any": "error", "@typescript-eslint/no-unused-vars": "error", "jest/no-focused-tests": "error", "jest/no-disabled-tests": "error", diff --git a/app/client/.eslintrc.js b/app/client/.eslintrc.js index 0da3449150..d4b30e5a1f 100644 --- a/app/client/.eslintrc.js +++ b/app/client/.eslintrc.js @@ -13,6 +13,9 @@ const baseNoRestrictedImports = const eslintConfig = { extends: ["./.eslintrc.base.json"], rules: { + "@typescript-eslint/no-explicit-any": "off", + "react/display-name": "off", + "react/prop-types": "off", // `no-restricted-imports` is disabled, as recommended in https://typescript-eslint.io/rules/no-restricted-imports/. // Please use @typescript-eslint/no-restricted-imports below instead. "no-restricted-imports": "off", diff --git a/app/client/cypress/.eslintrc.json b/app/client/cypress/.eslintrc.json index db6c1fa0e9..9b907362ee 100644 --- a/app/client/cypress/.eslintrc.json +++ b/app/client/cypress/.eslintrc.json @@ -13,6 +13,8 @@ "@typescript-eslint/no-non-null-assertion": "error", "cypress/unsafe-to-chain-command": "off", "@typescript-eslint/adjacent-overload-signatures": "off", - "jest/no-disabled-tests": "off" + "jest/no-disabled-tests": "off", + "@typescript-eslint/no-explicit-any": "off", + "@typescript-eslint/no-var-requires": "off" } } diff --git a/app/client/packages/ast/.eslintrc.json b/app/client/packages/ast/.eslintrc.json index e57f842c13..f6cf7cd422 100644 --- a/app/client/packages/ast/.eslintrc.json +++ b/app/client/packages/ast/.eslintrc.json @@ -1,4 +1,7 @@ { "extends": ["../../.eslintrc.base.json"], - "ignorePatterns": ["build"] + "ignorePatterns": ["build"], + "rules": { + "@typescript-eslint/no-explicit-any": "off" + } } diff --git a/app/client/packages/ast/rollup.config.js b/app/client/packages/ast/rollup.config.js index 42bbbe89e2..2489848a1e 100644 --- a/app/client/packages/ast/rollup.config.js +++ b/app/client/packages/ast/rollup.config.js @@ -2,8 +2,7 @@ import peerDepsExternal from "rollup-plugin-peer-deps-external"; import commonjs from "@rollup/plugin-commonjs"; import typescript from "rollup-plugin-typescript2"; import generatePackageJson from "rollup-plugin-generate-package-json"; - -const packageJson = require("./package.json"); +import packageJson from "./package.json"; export default { // TODO: Figure out regex where each directory can be a separate module without having to manually add them diff --git a/app/client/packages/design-system/headless/src/components/Button/Button.tsx b/app/client/packages/design-system/headless/src/components/Button/Button.tsx index 0303209fe4..5430dba777 100644 --- a/app/client/packages/design-system/headless/src/components/Button/Button.tsx +++ b/app/client/packages/design-system/headless/src/components/Button/Button.tsx @@ -19,7 +19,7 @@ export interface ButtonProps extends SpectrumAriaBaseButtonProps { export type ButtonRef = React.Ref; type ButtonRefObject = React.RefObject; -export const Button = forwardRef((props: ButtonProps, ref: ButtonRef) => { +const _Button = (props: ButtonProps, ref: ButtonRef) => { const { autoFocus, children, className, draggable, isDisabled } = props; const { hoverProps, isHovered } = useHover({ isDisabled }); const { focusProps, isFocusVisible } = useFocusRing({ autoFocus }); @@ -41,4 +41,6 @@ export const Button = forwardRef((props: ButtonProps, ref: ButtonRef) => { {children} ); -}); +}; + +export const Button = forwardRef(_Button); diff --git a/app/client/packages/design-system/headless/src/components/Checkbox/Checkbox.tsx b/app/client/packages/design-system/headless/src/components/Checkbox/Checkbox.tsx index 7d98b7a6a7..c3cdc1b09f 100644 --- a/app/client/packages/design-system/headless/src/components/Checkbox/Checkbox.tsx +++ b/app/client/packages/design-system/headless/src/components/Checkbox/Checkbox.tsx @@ -29,7 +29,7 @@ export type CheckboxRef = FocusableRef; const ICON_SIZE = 14; -export const Checkbox = forwardRef((props: CheckboxProps, ref: CheckboxRef) => { +const _Checkbox = (props: CheckboxProps, ref: CheckboxRef) => { const { autoFocus, children, @@ -100,4 +100,6 @@ export const Checkbox = forwardRef((props: CheckboxProps, ref: CheckboxRef) => { {children} ); -}); +}; + +export const Checkbox = forwardRef(_Checkbox); diff --git a/app/client/packages/design-system/headless/src/components/Checkbox/CheckboxGroup.tsx b/app/client/packages/design-system/headless/src/components/Checkbox/CheckboxGroup.tsx index ae4c1355bb..1425b92435 100644 --- a/app/client/packages/design-system/headless/src/components/Checkbox/CheckboxGroup.tsx +++ b/app/client/packages/design-system/headless/src/components/Checkbox/CheckboxGroup.tsx @@ -18,40 +18,40 @@ export interface CheckboxGroupProps labelWidth?: LabelProps["labelWidth"]; } -export const CheckboxGroup = forwardRef( - (props: CheckboxGroupProps, ref: CheckboxGroupRef) => { - const { children, className, isDisabled, orientation = "vertical" } = props; - const domRef = useDOMRef(ref); - const state = useCheckboxGroupState(props); - const { descriptionProps, errorMessageProps, groupProps, labelProps } = - useCheckboxGroup(props, state); +const _CheckboxGroup = (props: CheckboxGroupProps, ref: CheckboxGroupRef) => { + const { children, className, isDisabled, orientation = "vertical" } = props; + const domRef = useDOMRef(ref); + const state = useCheckboxGroupState(props); + const { descriptionProps, errorMessageProps, groupProps, labelProps } = + useCheckboxGroup(props, state); - return ( - +
-
- - {children} - -
- - ); - }, -); + {children} + +
+ + ); +}; + +export const CheckboxGroup = forwardRef(_CheckboxGroup); diff --git a/app/client/packages/design-system/headless/src/components/Field/ErrorText.tsx b/app/client/packages/design-system/headless/src/components/Field/ErrorText.tsx index 3a9ea13d05..a7ece14860 100644 --- a/app/client/packages/design-system/headless/src/components/Field/ErrorText.tsx +++ b/app/client/packages/design-system/headless/src/components/Field/ErrorText.tsx @@ -9,18 +9,18 @@ interface HelpTextProps extends SpectrumHelpTextProps { errorMessageProps?: HTMLAttributes; } -export const ErrorText = forwardRef( - (props: HelpTextProps, ref: DOMRef) => { - const { errorMessage, errorMessageProps, showErrorIcon } = props; - const domRef = useDOMRef(ref); +const _ErrorText = (props: HelpTextProps, ref: DOMRef) => { + const { errorMessage, errorMessageProps, showErrorIcon } = props; + const domRef = useDOMRef(ref); - return ( -
- {showErrorIcon && } - - {errorMessage} - -
- ); - }, -); + return ( +
+ {showErrorIcon && } + + {errorMessage} + +
+ ); +}; + +export const ErrorText = forwardRef(_ErrorText); diff --git a/app/client/packages/design-system/headless/src/components/Field/Field.tsx b/app/client/packages/design-system/headless/src/components/Field/Field.tsx index 8e252c7412..d2f472dfc6 100644 --- a/app/client/packages/design-system/headless/src/components/Field/Field.tsx +++ b/app/client/packages/design-system/headless/src/components/Field/Field.tsx @@ -1,14 +1,15 @@ import React, { forwardRef } from "react"; import type { SpectrumFieldProps } from "@react-types/label"; +import type { Ref } from "react"; import { Label } from "./Label"; import { ErrorText } from "./ErrorText"; export type FieldProps = SpectrumFieldProps; -export type FieldRef = any; +export type FieldRef = Ref; -export const Field = forwardRef((props: FieldProps, ref: FieldRef) => { +const _Field = (props: FieldProps, ref: FieldRef) => { const { children, elementType, @@ -74,4 +75,6 @@ export const Field = forwardRef((props: FieldProps, ref: FieldRef) => { ); -}); +}; + +export const Field = forwardRef(_Field); diff --git a/app/client/packages/design-system/headless/src/components/Field/Label.tsx b/app/client/packages/design-system/headless/src/components/Field/Label.tsx index f38ef60032..88b83421cb 100644 --- a/app/client/packages/design-system/headless/src/components/Field/Label.tsx +++ b/app/client/packages/design-system/headless/src/components/Field/Label.tsx @@ -10,63 +10,61 @@ export interface LabelProps extends SpectrumLabelProps { labelWidth?: string; } -export const Label = forwardRef( - (props: LabelProps, ref: DOMRef) => { - const { - children, - labelPosition = "top", - labelAlign = labelPosition === "side" ? "start" : null, - isRequired, - necessityIndicator = isRequired != null ? "icon" : null, - includeNecessityIndicatorInAccessibilityName = false, - htmlFor, - for: labelFor, - elementType: ElementType = "label", - onClick, - ...otherProps - } = props; +const _Label = (props: LabelProps, ref: DOMRef) => { + const { + children, + labelPosition = "top", + labelAlign = labelPosition === "side" ? "start" : null, + isRequired, + necessityIndicator = isRequired != null ? "icon" : null, + includeNecessityIndicatorInAccessibilityName = false, + htmlFor, + for: labelFor, + elementType: ElementType = "label", + onClick, + ...otherProps + } = props; - const domRef = useDOMRef(ref); + const domRef = useDOMRef(ref); - const necessityLabel = isRequired ? "(required)" : "(optional)"; - const icon = ( - - ); + const necessityLabel = isRequired ? "(required)" : "(optional)"; + const icon = ( + + ); - return ( - - {children} - {/* necessityLabel is hidden to screen readers if the field is required because - * aria-required is set on the field in that case. That will already be announced, - * so no need to duplicate it here. If optional, we do want it to be announced here. */} - {necessityIndicator === "label" && ( - - {necessityLabel} - - )} - {necessityIndicator === "icon" && isRequired && icon} - - ); - }, -); + return ( + + {children} + {/* necessityLabel is hidden to screen readers if the field is required because + * aria-required is set on the field in that case. That will already be announced, + * so no need to duplicate it here. If optional, we do want it to be announced here. */} + {necessityIndicator === "label" && ( + + {necessityLabel} + + )} + {necessityIndicator === "icon" && isRequired && icon} + + ); +}; + +export const Label = forwardRef(_Label); diff --git a/app/client/packages/design-system/headless/src/components/Radio/Radio.tsx b/app/client/packages/design-system/headless/src/components/Radio/Radio.tsx index 8076705fb4..b69f4708f9 100644 --- a/app/client/packages/design-system/headless/src/components/Radio/Radio.tsx +++ b/app/client/packages/design-system/headless/src/components/Radio/Radio.tsx @@ -10,7 +10,7 @@ import type { FocusableRef, StyleProps } from "@react-types/shared"; import { RadioContext } from "./context"; import type { RadioGroupContext } from "./context"; -import type { InlineLabelProps } from "../Checkbox/Checkbox"; +import type { InlineLabelProps } from "../Checkbox"; export interface RadioProps extends Omit, @@ -20,7 +20,7 @@ export interface RadioProps export type RadioRef = FocusableRef; -export const Radio = forwardRef((props: RadioProps, ref: RadioRef) => { +const _Radio = (props: RadioProps, ref: RadioRef) => { const { autoFocus, children, @@ -65,4 +65,6 @@ export const Radio = forwardRef((props: RadioProps, ref: RadioRef) => { {children} ); -}); +}; + +export const Radio = forwardRef(_Radio); diff --git a/app/client/packages/design-system/headless/src/components/Radio/RadioGroup.tsx b/app/client/packages/design-system/headless/src/components/Radio/RadioGroup.tsx index 7fa394bc89..3c3d827d2b 100644 --- a/app/client/packages/design-system/headless/src/components/Radio/RadioGroup.tsx +++ b/app/client/packages/design-system/headless/src/components/Radio/RadioGroup.tsx @@ -17,46 +17,46 @@ export interface RadioGroupProps labelWidth?: LabelProps["labelWidth"]; } -export const RadioGroup = forwardRef( - (props: RadioGroupProps, ref: RadioGroupRef) => { - const { - children, - className, - isDisabled = false, - orientation = "vertical", - validationState, - } = props; - const domRef = useDOMRef(ref); - const state = useRadioGroupState(props); - const { descriptionProps, errorMessageProps, labelProps, radioGroupProps } = - useRadioGroup(props, state); +const _RadioGroup = (props: RadioGroupProps, ref: RadioGroupRef) => { + const { + children, + className, + isDisabled = false, + orientation = "vertical", + validationState, + } = props; + const domRef = useDOMRef(ref); + const state = useRadioGroupState(props); + const { descriptionProps, errorMessageProps, labelProps, radioGroupProps } = + useRadioGroup(props, state); - return ( - +
-
- - {children} - -
- - ); - }, -); + {children} + +
+ + ); +}; + +export const RadioGroup = forwardRef(_RadioGroup); diff --git a/app/client/packages/design-system/headless/src/components/Switch/Switch.tsx b/app/client/packages/design-system/headless/src/components/Switch/Switch.tsx index b7549fec7d..94ddba0960 100644 --- a/app/client/packages/design-system/headless/src/components/Switch/Switch.tsx +++ b/app/client/packages/design-system/headless/src/components/Switch/Switch.tsx @@ -24,7 +24,7 @@ export interface SwitchProps export type SwitchRef = FocusableRef; -export const Switch = forwardRef((props: SwitchProps, ref: SwitchRef) => { +const _Switch = (props: SwitchProps, ref: SwitchRef) => { const { autoFocus, children, @@ -87,4 +87,6 @@ export const Switch = forwardRef((props: SwitchProps, ref: SwitchRef) => { {children} ); -}); +}; + +export const Switch = forwardRef(_Switch); diff --git a/app/client/packages/design-system/headless/src/components/Tooltip/TooltipContent.tsx b/app/client/packages/design-system/headless/src/components/Tooltip/TooltipContent.tsx index 9cc41c0996..601d98217d 100644 --- a/app/client/packages/design-system/headless/src/components/Tooltip/TooltipContent.tsx +++ b/app/client/packages/design-system/headless/src/components/Tooltip/TooltipContent.tsx @@ -1,4 +1,4 @@ -import React from "react"; +import React, { forwardRef } from "react"; import { useMergeRefs, FloatingPortal, @@ -9,42 +9,46 @@ import { useTooltipContext } from "./TooltipContext"; export type TooltipContentProps = React.HTMLAttributes & { root?: HTMLElement; + className?: string; }; export type TooltipContentRef = React.Ref; -export const TooltipContent = React.forwardRef( - (props: TooltipContentProps, propRef: TooltipContentRef) => { - const context = useTooltipContext(); - const { className, root: rootProp, ...rest } = props; - const ref = useMergeRefs([context.refs.setFloating, propRef]); - const { children, ...floatingProps } = context.getFloatingProps(rest); - const arrowWidth = context.arrowRef.current?.clientWidth ?? 0; +const _TooltipContent = ( + props: TooltipContentProps, + propRef: TooltipContentRef, +) => { + const context = useTooltipContext(); + const { className, root: rootProp, ...rest } = props; + const ref = useMergeRefs([context.refs.setFloating, propRef]); + const { children, ...floatingProps } = context.getFloatingProps(rest); + const arrowWidth = context.arrowRef.current?.clientWidth ?? 0; - if (!context.open) return null; + if (!context.open) return null; - const root = context.refs.domReference.current?.closest( - "[data-theme-provider]", - ) as HTMLElement; + const root = context.refs.domReference.current?.closest( + "[data-theme-provider]", + ) as HTMLElement; - return ( - -
- {children} - -
- - ); - }, -); + return ( + +
+ {children} + +
+ + ); +}; + +export const TooltipContent = forwardRef(_TooltipContent); diff --git a/app/client/packages/design-system/headless/src/components/Tooltip/TooltipTrigger.tsx b/app/client/packages/design-system/headless/src/components/Tooltip/TooltipTrigger.tsx index eb1fa52cc9..806e95a138 100644 --- a/app/client/packages/design-system/headless/src/components/Tooltip/TooltipTrigger.tsx +++ b/app/client/packages/design-system/headless/src/components/Tooltip/TooltipTrigger.tsx @@ -1,4 +1,4 @@ -import * as React from "react"; +import React, { forwardRef } from "react"; import { useMergeRefs } from "@floating-ui/react"; import { useTooltipContext } from "./TooltipContext"; @@ -6,13 +6,14 @@ import { useTooltipContext } from "./TooltipContext"; export type TooltipTriggerRef = React.Ref; export type TooltipTriggerProps = React.HTMLProps; -export const TooltipTrigger = React.forwardRef(function TooltipTrigger( +const _TooltipTrigger = ( props: TooltipTriggerProps, propRef: TooltipTriggerRef, -) { +) => { const { children, ...rest } = props; const context = useTooltipContext(); - const childrenRef = (children as any).ref; + // @ts-expect-error we don't which type children will be + const childrenRef = (children as unknown).ref; const ref = useMergeRefs([context.refs.setReference, propRef, childrenRef]); if (React.isValidElement(children)) { @@ -31,4 +32,6 @@ export const TooltipTrigger = React.forwardRef(function TooltipTrigger( } return null; -}); +}; + +export const TooltipTrigger = forwardRef(_TooltipTrigger); diff --git a/app/client/packages/design-system/widgets-old/.eslintrc.json b/app/client/packages/design-system/widgets-old/.eslintrc.json new file mode 100644 index 0000000000..33245d9eef --- /dev/null +++ b/app/client/packages/design-system/widgets-old/.eslintrc.json @@ -0,0 +1,7 @@ +{ + "extends": ["../../../.eslintrc.base.json"], + "rules": { + "@typescript-eslint/no-explicit-any": "off", + "react/display-name": "off" + } +} diff --git a/app/client/packages/design-system/widgets/src/components/Button/Button.test.tsx b/app/client/packages/design-system/widgets/src/components/Button/Button.test.tsx index 0f09834dbf..ca5420b05b 100644 --- a/app/client/packages/design-system/widgets/src/components/Button/Button.test.tsx +++ b/app/client/packages/design-system/widgets/src/components/Button/Button.test.tsx @@ -6,7 +6,7 @@ import { render, screen } from "@testing-library/react"; import { Button } from "./"; // Adapted from remixicon-react/EmotionHappyLineIcon (https://github.com/Remix-Design/RemixIcon/blob/f88a51b6402562c6c2465f61a3e845115992e4c6/icons/User%20%26%20Faces/emotion-happy-line.svg) -const EmotionHappyLineIcon = ({ ...props }: Record) => { +const EmotionHappyLineIcon = ({ ...props }: Record) => { return ( { loadingText?: string; } -export const Button = forwardRef( - (props: ButtonProps, ref: HeadlessButtonRef) => { - props = useVisuallyDisabled(props); - const { - children, - color = "accent", - icon, - iconPosition = "start", - isLoading, - loadingText = "Loading...", - // eslint-disable-next-line -- TODO add onKeyUp when the bug is fixed https://github.com/adobe/react-spectrum/issues/4350 - onKeyUp, - variant = "filled", - visuallyDisabled, - ...rest - } = props; - const { visuallyHiddenProps } = useVisuallyHidden(); - - const renderChildren = () => { - return ( - <> - - {icon} - - {children} - - - - - - - - {loadingText} - - - ); - }; +const _Button = (props: ButtonProps, ref: HeadlessButtonRef) => { + props = useVisuallyDisabled(props); + const { + children, + color = "accent", + icon, + iconPosition = "start", + isLoading, + loadingText = "Loading...", + // eslint-disable-next-line -- TODO add onKeyUp when the bug is fixed https://github.com/adobe/react-spectrum/issues/4350 + onKeyUp, + variant = "filled", + visuallyDisabled, + ...rest + } = props; + const { visuallyHiddenProps } = useVisuallyHidden(); + const renderChildren = () => { return ( - - {renderChildren()} - + <> + + {icon} + + {children} + + + + + + + + {loadingText} + + ); - }, -); + }; + + return ( + + {renderChildren()} + + ); +}; + +export const Button = forwardRef(_Button); /** * This hook is used to disable all click/press events on a button diff --git a/app/client/packages/design-system/widgets/src/components/ButtonGroup/ButtonGroup.test.tsx b/app/client/packages/design-system/widgets/src/components/ButtonGroup/ButtonGroup.test.tsx index 756d8ed9d5..2f09d4417f 100644 --- a/app/client/packages/design-system/widgets/src/components/ButtonGroup/ButtonGroup.test.tsx +++ b/app/client/packages/design-system/widgets/src/components/ButtonGroup/ButtonGroup.test.tsx @@ -28,7 +28,7 @@ describe("@design-system/widgets/Button Group", () => { it("should support custom props", () => { const { container } = renderComponent({ "data-testid": "button-group", - } as any); + } as ButtonGroupProps); const buttonGroup = container.querySelector("div") as HTMLElement; expect(buttonGroup).toHaveAttribute("data-testid", "button-group"); diff --git a/app/client/packages/design-system/widgets/src/components/Checkbox/Checkbox.test.tsx b/app/client/packages/design-system/widgets/src/components/Checkbox/Checkbox.test.tsx index 91f6b3d874..be0f6b39fe 100644 --- a/app/client/packages/design-system/widgets/src/components/Checkbox/Checkbox.test.tsx +++ b/app/client/packages/design-system/widgets/src/components/Checkbox/Checkbox.test.tsx @@ -7,7 +7,7 @@ import userEvent from "@testing-library/user-event"; import { Checkbox } from "./Checkbox"; // Adapted from remixicon-react/EmotionHappyLineIcon (https://github.com/Remix-Design/RemixIcon/blob/f88a51b6402562c6c2465f61a3e845115992e4c6/icons/User%20%26%20Faces/emotion-happy-line.svg) -const EmotionHappyLineIcon = ({ ...props }: Record) => { +const EmotionHappyLineIcon = ({ ...props }: Record) => { return ( { - const { children, labelPosition = "right", ...rest } = props; +const _Checkbox = (props: CheckboxProps, ref: HeadlessCheckboxRef) => { + const { children, labelPosition = "right", ...rest } = props; - return ( - - {children && {children}} - - ); - }, -); + return ( + + {children && {children}} + + ); +}; + +export const Checkbox = forwardRef(_Checkbox); diff --git a/app/client/packages/design-system/widgets/src/components/CheckboxGroup/CheckboxGroup.tsx b/app/client/packages/design-system/widgets/src/components/CheckboxGroup/CheckboxGroup.tsx index 2b7289c844..0eae957c92 100644 --- a/app/client/packages/design-system/widgets/src/components/CheckboxGroup/CheckboxGroup.tsx +++ b/app/client/packages/design-system/widgets/src/components/CheckboxGroup/CheckboxGroup.tsx @@ -12,19 +12,22 @@ export interface CheckboxGroupProps extends HeadlessCheckboxGroupProps { className?: string; } -export const CheckboxGroup = forwardRef( - (props: CheckboxGroupProps, ref: HeadlessCheckboxGroupRef) => { - const { errorMessage, label, ...rest } = props; - const wrappedErrorMessage = errorMessage && {errorMessage}; - const wrappedLabel = label && {label}; +const _CheckboxGroup = ( + props: CheckboxGroupProps, + ref: HeadlessCheckboxGroupRef, +) => { + const { errorMessage, label, ...rest } = props; + const wrappedErrorMessage = errorMessage && {errorMessage}; + const wrappedLabel = label && {label}; - return ( - - ); - }, -); + return ( + + ); +}; + +export const CheckboxGroup = forwardRef(_CheckboxGroup); diff --git a/app/client/packages/design-system/widgets/src/components/Flex/index.styled.tsx b/app/client/packages/design-system/widgets/src/components/Flex/index.styled.tsx index 38a964f66a..e8e940ad9f 100644 --- a/app/client/packages/design-system/widgets/src/components/Flex/index.styled.tsx +++ b/app/client/packages/design-system/widgets/src/components/Flex/index.styled.tsx @@ -1,6 +1,6 @@ import styled from "styled-components"; -import type { StyledFlexProps } from "./types"; +import type { Responsive, StyledFlexProps } from "./types"; export const StyledFlex = styled.div` ${({ $wrap }) => { @@ -140,9 +140,12 @@ export const StyledFlex = styled.div` }} `; +// the value and returned callback value can be of any type in accordance with component props const containerDimensionStyles = ( cssProp: string, + // eslint-disable-next-line @typescript-eslint/no-explicit-any value: any, + // eslint-disable-next-line @typescript-eslint/no-explicit-any callback?: (value: any) => void, ) => { if (value == null) return; @@ -169,7 +172,21 @@ const containerDimensionStyles = ( return `${cssProp}: ${callback ? callback(value) : value};`; }; -const flexAlignValue = (value: any) => { +const flexAlignValue = ( + value: Responsive< + | "start" + | "end" + | "center" + | "stretch" + | "self-start" + | "self-end" + | "baseline" + | "first baseline" + | "last baseline" + | "safe center" + | "unsafe center" + >, +) => { if (value === "start") { return "flex-start"; } @@ -181,7 +198,9 @@ const flexAlignValue = (value: any) => { return value; }; -const flexWrapValue = (value: any) => { +const flexWrapValue = ( + value: Responsive, +) => { if (typeof value === "boolean") { return value ? "wrap" : "nowrap"; } @@ -189,7 +208,7 @@ const flexWrapValue = (value: any) => { return value; }; -const cssVarValue = (value: any) => { +const cssVarValue = (value: string) => { if (value == null) return; if (value.includes("spacing") || value.includes("sizing")) { @@ -199,7 +218,7 @@ const cssVarValue = (value: any) => { return value; }; -const hiddenValue = (value?: any) => { +const hiddenValue = (value: boolean) => { return value ? "none" : "flex"; }; diff --git a/app/client/packages/design-system/widgets/src/components/Flex/types.ts b/app/client/packages/design-system/widgets/src/components/Flex/types.ts index e2b4a52d0c..e9ed4a0c87 100644 --- a/app/client/packages/design-system/widgets/src/components/Flex/types.ts +++ b/app/client/packages/design-system/widgets/src/components/Flex/types.ts @@ -2,7 +2,7 @@ import type { ReactNode, CSSProperties } from "react"; import type { OmitRename } from "../../utils"; import type { SizingDimension, SpacingDimension } from "./dimensions"; -type Responsive = +export type Responsive = | T | { base?: T; diff --git a/app/client/packages/design-system/widgets/src/components/Radio/Radio.tsx b/app/client/packages/design-system/widgets/src/components/Radio/Radio.tsx index 028585008a..99a35c1ca7 100644 --- a/app/client/packages/design-system/widgets/src/components/Radio/Radio.tsx +++ b/app/client/packages/design-system/widgets/src/components/Radio/Radio.tsx @@ -10,7 +10,7 @@ import { StyledRadio } from "./index.styled"; export type RadioProps = HeadlessRadioProps; -export const Radio = forwardRef((props: RadioProps, ref: HeadlessRadioRef) => { +const _Radio = (props: RadioProps, ref: HeadlessRadioRef) => { const { children, labelPosition = "right", ...rest } = props; return ( @@ -18,4 +18,6 @@ export const Radio = forwardRef((props: RadioProps, ref: HeadlessRadioRef) => { {children && {children}} ); -}); +}; + +export const Radio = forwardRef(_Radio); diff --git a/app/client/packages/design-system/widgets/src/components/RadioGroup/RadioGroup.tsx b/app/client/packages/design-system/widgets/src/components/RadioGroup/RadioGroup.tsx index beda7e8d28..34045dffe6 100644 --- a/app/client/packages/design-system/widgets/src/components/RadioGroup/RadioGroup.tsx +++ b/app/client/packages/design-system/widgets/src/components/RadioGroup/RadioGroup.tsx @@ -12,19 +12,19 @@ export interface RadioGroupProps extends HeadlessRadioGroupProps { className?: string; } -export const RadioGroup = forwardRef( - (props: RadioGroupProps, ref: HeadlessRadioGroupRef) => { - const { errorMessage, label, ...rest } = props; - const wrappedErrorMessage = errorMessage && {errorMessage}; - const wrappedLabel = label && {label}; +const _RadioGroup = (props: RadioGroupProps, ref: HeadlessRadioGroupRef) => { + const { errorMessage, label, ...rest } = props; + const wrappedErrorMessage = errorMessage && {errorMessage}; + const wrappedLabel = label && {label}; - return ( - - ); - }, -); + return ( + + ); +}; + +export const RadioGroup = forwardRef(_RadioGroup); diff --git a/app/client/packages/design-system/widgets/src/components/Spinner/index.styled.tsx b/app/client/packages/design-system/widgets/src/components/Spinner/index.styled.tsx index b7fbe84fe6..0aa95adeed 100644 --- a/app/client/packages/design-system/widgets/src/components/Spinner/index.styled.tsx +++ b/app/client/packages/design-system/widgets/src/components/Spinner/index.styled.tsx @@ -7,7 +7,7 @@ function LoaderIcon({ ...props }: { className?: string; - [key: string]: any; + [key: string]: unknown; }) { return ( ; -export const Switch = forwardRef( - (props: SwitchProps, ref: HeadlessSwitchRef) => { - const { children, labelPosition = "right", ...rest } = props; +const _Switch = (props: SwitchProps, ref: HeadlessSwitchRef) => { + const { children, labelPosition = "right", ...rest } = props; - return ( - - {children && {children}} - - ); - }, -); + return ( + + {children && {children}} + + ); +}; + +export const Switch = forwardRef(_Switch); diff --git a/app/client/packages/design-system/widgets/src/components/Text/Text.tsx b/app/client/packages/design-system/widgets/src/components/Text/Text.tsx index d4c7576537..ca35c85285 100644 --- a/app/client/packages/design-system/widgets/src/components/Text/Text.tsx +++ b/app/client/packages/design-system/widgets/src/components/Text/Text.tsx @@ -35,34 +35,34 @@ export interface TextProps { children: React.ReactNode; } -export const Text = forwardRef( - (props: TextProps, ref: Ref) => { - const { - children, - className, - color = "default", - isBold = false, - isItalic = false, - lineClamp, - textAlign = "left", - variant = "body", - ...rest - } = props; +const _Text = (props: TextProps, ref: Ref) => { + const { + children, + className, + color = "default", + isBold = false, + isItalic = false, + lineClamp, + textAlign = "left", + variant = "body", + ...rest + } = props; - return ( - - {children} - - ); - }, -); + return ( + + {children} + + ); +}; + +export const Text = forwardRef(_Text); diff --git a/app/client/packages/design-system/widgets/src/components/Tooltip/TooltipContent.tsx b/app/client/packages/design-system/widgets/src/components/Tooltip/TooltipContent.tsx index f5777559f3..fdbb656c75 100644 --- a/app/client/packages/design-system/widgets/src/components/Tooltip/TooltipContent.tsx +++ b/app/client/packages/design-system/widgets/src/components/Tooltip/TooltipContent.tsx @@ -10,21 +10,24 @@ import type { } from "@design-system/headless"; import { StyledTooltipContent } from "./index.styled"; -export const TooltipContent = forwardRef( - (props: HeadlessTooltipContentProps, ref: HeadlessTooltipContentRef) => { - const { children, ...rest } = props; +const _TooltipContent = ( + props: HeadlessTooltipContentProps, + ref: HeadlessTooltipContentRef, +) => { + const { children, ...rest } = props; - // We have to shift the arrow so that there is no empty space if the tooltip has rounding - const theme = useThemeContext(); - const borderRadius = Number( - (theme?.borderRadius?.[1].value as string).replace("px", ""), - ); - const isRounded = borderRadius > BORDER_RADIUS_THRESHOLD; + // We have to shift the arrow so that there is no empty space if the tooltip has rounding + const theme = useThemeContext(); + const borderRadius = Number( + (theme?.borderRadius?.[1].value as string).replace("px", ""), + ); + const isRounded = borderRadius > BORDER_RADIUS_THRESHOLD; - return ( - - {typeof children === "string" ? {children} : children} - - ); - }, -); + return ( + + {typeof children === "string" ? {children} : children} + + ); +}; + +export const TooltipContent = forwardRef(_TooltipContent); diff --git a/app/client/packages/dsl/rollup.config.js b/app/client/packages/dsl/rollup.config.js index 5c3b0d6a2e..d3e6016f92 100644 --- a/app/client/packages/dsl/rollup.config.js +++ b/app/client/packages/dsl/rollup.config.js @@ -2,8 +2,7 @@ import peerDepsExternal from "rollup-plugin-peer-deps-external"; import commonjs from "@rollup/plugin-commonjs"; import typescript from "rollup-plugin-typescript2"; import generatePackageJson from "rollup-plugin-generate-package-json"; - -const packageJson = require("./package.json"); +import packageJson from "./package.json"; export default { // TODO: Figure out regex where each directory can be a separate module without having to manually add them diff --git a/app/client/packages/dsl/src/index.test.ts b/app/client/packages/dsl/src/index.test.ts index e7ca28820a..eaf5d9178b 100644 --- a/app/client/packages/dsl/src/index.test.ts +++ b/app/client/packages/dsl/src/index.test.ts @@ -85,7 +85,7 @@ describe("Test #2 - normalize operations on SIMPLE DSL structures", () => { }; it("Test `flattenDSL` for simple_dsl", () => { - const flatDSL = flattenDSL>(simple_dsl); + const flatDSL = flattenDSL>(simple_dsl); expect(flatDSL).toStrictEqual(simple_flat_dsl); }); diff --git a/app/client/packages/rts/.eslintrc.json b/app/client/packages/rts/.eslintrc.json index 16cf5dd2f9..fabbedf745 100644 --- a/app/client/packages/rts/.eslintrc.json +++ b/app/client/packages/rts/.eslintrc.json @@ -1,4 +1,7 @@ { "extends": ["../../.eslintrc.base.json"], - "ignorePatterns": ["dist"] + "ignorePatterns": ["dist"], + "rules": { + "@typescript-eslint/no-explicit-any": "off" + } } diff --git a/app/client/src/components/propertyControls/ColorPickerComponentV2.tsx b/app/client/src/components/propertyControls/ColorPickerComponentV2.tsx index 4b99c84250..22b6685131 100644 --- a/app/client/src/components/propertyControls/ColorPickerComponentV2.tsx +++ b/app/client/src/components/propertyControls/ColorPickerComponentV2.tsx @@ -26,13 +26,12 @@ import { TAILWIND_COLORS } from "constants/ThemeConstants"; import useDSEvent from "utils/hooks/useDSEvent"; import { DSEventTypes } from "utils/AppsmithUtils"; import { getBrandColors } from "@appsmith/selectors/tenantSelectors"; +import FocusTrap from "focus-trap-react"; import { createMessage, FULL_COLOR_PICKER_LABEL, } from "@appsmith/constants/messages"; -const FocusTrap = require("focus-trap-react"); - const MAX_COLS = 10; /** diff --git a/app/client/src/constants/routes/appRoutes.ts b/app/client/src/constants/routes/appRoutes.ts index 2fe3712b0e..bed3acea55 100644 --- a/app/client/src/constants/routes/appRoutes.ts +++ b/app/client/src/constants/routes/appRoutes.ts @@ -1,6 +1,7 @@ // Leaving this require here. The path-to-regexp module has a commonJS version and an ESM one. // We are loading the correct one with the typings with our compilerOptions property "moduleResolution" set to "node". Ref: https://stackoverflow.com/questions/59013618/unable-to-find-module-path-to-regexp // All solutions from closed issues on their repo have been tried. Ref: https://github.com/pillarjs/path-to-regexp/issues/193 +// eslint-disable-next-line @typescript-eslint/no-var-requires const { match } = require("path-to-regexp"); export const BUILDER_VIEWER_PATH_PREFIX = "/app/"; diff --git a/app/client/src/constants/routes/baseRoutes.ts b/app/client/src/constants/routes/baseRoutes.ts index c5ced0d985..fc1fda7400 100644 --- a/app/client/src/constants/routes/baseRoutes.ts +++ b/app/client/src/constants/routes/baseRoutes.ts @@ -1,3 +1,4 @@ +// eslint-disable-next-line @typescript-eslint/no-var-requires const { match } = require("path-to-regexp"); export const BASE_URL = "/"; diff --git a/app/client/src/utils/history.ts b/app/client/src/utils/history.ts index 45c2becb94..50d1ef863a 100644 --- a/app/client/src/utils/history.ts +++ b/app/client/src/utils/history.ts @@ -1,4 +1,5 @@ // Leaving this require here. Importing causes type mismatches which have not been resolved by including the typings or any other means. Ref: https://github.com/remix-run/history/issues/802 +// eslint-disable-next-line @typescript-eslint/no-var-requires const createHistory = require("history").createBrowserHistory; import type { History } from "history"; diff --git a/app/client/src/wdyr.ts b/app/client/src/wdyr.ts index 5323bf79f9..a3d9709f2e 100644 --- a/app/client/src/wdyr.ts +++ b/app/client/src/wdyr.ts @@ -3,6 +3,7 @@ import React from "react"; if (process.env.NODE_ENV === "development") { + // eslint-disable-next-line @typescript-eslint/no-var-requires const whyDidYouRender = require("@welldone-software/why-did-you-render"); whyDidYouRender(React, { trackAllPureComponents: false, diff --git a/app/client/src/widgets/ChartWidget/component/index.tsx b/app/client/src/widgets/ChartWidget/component/index.tsx index 7117ba0aa4..b902c407bd 100644 --- a/app/client/src/widgets/ChartWidget/component/index.tsx +++ b/app/client/src/widgets/ChartWidget/component/index.tsx @@ -20,6 +20,7 @@ import { EChartsConfigurationBuilder } from "./EChartsConfigurationBuilder"; import { EChartsDatasetBuilder } from "./EChartsDatasetBuilder"; // Leaving this require here. Ref: https://stackoverflow.com/questions/41292559/could-not-find-a-declaration-file-for-module-module-name-path-to-module-nam/42505940#42505940 // FusionCharts comes with its own typings so there is no need to separately import them. But an import from fusioncharts/core still requires a declaration file. +// eslint-disable-next-line @typescript-eslint/no-var-requires const FusionCharts = require("fusioncharts"); const plugins: Record = { Charts: require("fusioncharts/fusioncharts.charts"), diff --git a/app/client/src/widgets/FilePickerWidgetV2/widget/FileParser.test.tsx b/app/client/src/widgets/FilePickerWidgetV2/widget/FileParser.test.tsx index 1317b47c6d..5104057591 100644 --- a/app/client/src/widgets/FilePickerWidgetV2/widget/FileParser.test.tsx +++ b/app/client/src/widgets/FilePickerWidgetV2/widget/FileParser.test.tsx @@ -1,7 +1,7 @@ import FileDataTypes from "../constants"; import parseFileData from "./FileParser"; import fs from "fs"; -const path = require("path"); +import path from "path"; describe("File parser formats differenty file types correctly", () => { it("parses csv file correclty", async () => { diff --git a/app/client/src/widgets/WidgetUtils.ts b/app/client/src/widgets/WidgetUtils.ts index 185ea8840f..d8db391b66 100644 --- a/app/client/src/widgets/WidgetUtils.ts +++ b/app/client/src/widgets/WidgetUtils.ts @@ -34,8 +34,7 @@ import { rgbaMigrationConstantV56 } from "./constants"; import type { ContainerWidgetProps } from "./ContainerWidget/widget"; import type { SchemaItem } from "./JSONFormWidget/constants"; import { WIDGET_COMPONENT_BOUNDARY_CLASS } from "constants/componentClassNameConstants"; - -const punycode = require("punycode/"); +import punycode from "punycode"; type SanitizeOptions = { existingKeys?: string[];