Protei/PromucFlow_constructor
2
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

chore: improve eslint rules (#26056)

Browse Source 
## 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 <melnikov.vv@greendatasoft.ru>
This commit is contained in:
Valera Melnikov 2023-08-07 15:38:48 +03:00 committed by GitHub
parent 56602436b7
commit abff60b6a2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
42 changed files with 438 additions and 390 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
app/client/.eslintrc.base.json
View File

@ -28,16 +28,7 @@
} }
}, },
"rules": { "rules": {
"@typescript-eslint/no-explicit-any": "off", "@typescript-eslint/no-explicit-any": "error",
"@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-unused-vars": "error", "@typescript-eslint/no-unused-vars": "error",
"jest/no-focused-tests": "error", "jest/no-focused-tests": "error",
"jest/no-disabled-tests": "error", "jest/no-disabled-tests": "error",

3
app/client/.eslintrc.js
View File

@ -13,6 +13,9 @@ const baseNoRestrictedImports =
const eslintConfig = { const eslintConfig = {
extends: ["./.eslintrc.base.json"], extends: ["./.eslintrc.base.json"],
rules: { 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/. // `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. // Please use @typescript-eslint/no-restricted-imports below instead.
"no-restricted-imports": "off", "no-restricted-imports": "off",

4
app/client/cypress/.eslintrc.json
View File

@ -13,6 +13,8 @@
"@typescript-eslint/no-non-null-assertion": "error", "@typescript-eslint/no-non-null-assertion": "error",
"cypress/unsafe-to-chain-command": "off", "cypress/unsafe-to-chain-command": "off",
"@typescript-eslint/adjacent-overload-signatures": "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"
} }
} }

5
app/client/packages/ast/.eslintrc.json
View File

@ -1,4 +1,7 @@
{ {
"extends": ["../../.eslintrc.base.json"], "extends": ["../../.eslintrc.base.json"],
"ignorePatterns": ["build"] "ignorePatterns": ["build"],
"rules": {
"@typescript-eslint/no-explicit-any": "off"
}
} }

3
app/client/packages/ast/rollup.config.js
View File

@ -2,8 +2,7 @@ import peerDepsExternal from "rollup-plugin-peer-deps-external";
import commonjs from "@rollup/plugin-commonjs"; import commonjs from "@rollup/plugin-commonjs";
import typescript from "rollup-plugin-typescript2"; import typescript from "rollup-plugin-typescript2";
import generatePackageJson from "rollup-plugin-generate-package-json"; import generatePackageJson from "rollup-plugin-generate-package-json";
import packageJson from "./package.json";
const packageJson = require("./package.json");
export default { export default {
// TODO: Figure out regex where each directory can be a separate module without having to manually add them // TODO: Figure out regex where each directory can be a separate module without having to manually add them

6
app/client/packages/design-system/headless/src/components/Button/Button.tsx
View File

@ -19,7 +19,7 @@ export interface ButtonProps extends SpectrumAriaBaseButtonProps {
export type ButtonRef = React.Ref<HTMLButtonElement>; export type ButtonRef = React.Ref<HTMLButtonElement>;
type ButtonRefObject = React.RefObject<HTMLButtonElement>; type ButtonRefObject = React.RefObject<HTMLButtonElement>;
export const Button = forwardRef((props: ButtonProps, ref: ButtonRef) => { const _Button = (props: ButtonProps, ref: ButtonRef) => {
const { autoFocus, children, className, draggable, isDisabled } = props; const { autoFocus, children, className, draggable, isDisabled } = props;
const { hoverProps, isHovered } = useHover({ isDisabled }); const { hoverProps, isHovered } = useHover({ isDisabled });
const { focusProps, isFocusVisible } = useFocusRing({ autoFocus }); const { focusProps, isFocusVisible } = useFocusRing({ autoFocus });
@ -41,4 +41,6 @@ export const Button = forwardRef((props: ButtonProps, ref: ButtonRef) => {
{children} {children}
</button> </button>
); );
}); };
export const Button = forwardRef(_Button);

6
app/client/packages/design-system/headless/src/components/Checkbox/Checkbox.tsx
View File

@ -29,7 +29,7 @@ export type CheckboxRef = FocusableRef<HTMLLabelElement>;
const ICON_SIZE = 14; const ICON_SIZE = 14;
export const Checkbox = forwardRef((props: CheckboxProps, ref: CheckboxRef) => { const _Checkbox = (props: CheckboxProps, ref: CheckboxRef) => {
const { const {
autoFocus, autoFocus,
children, children,
@ -100,4 +100,6 @@ export const Checkbox = forwardRef((props: CheckboxProps, ref: CheckboxRef) => {
{children} {children}
</label> </label>
); );
}); };
export const Checkbox = forwardRef(_Checkbox);

68
app/client/packages/design-system/headless/src/components/Checkbox/CheckboxGroup.tsx
View File

@ -18,40 +18,40 @@ export interface CheckboxGroupProps
labelWidth?: LabelProps["labelWidth"]; labelWidth?: LabelProps["labelWidth"];
} }
export const CheckboxGroup = forwardRef( const _CheckboxGroup = (props: CheckboxGroupProps, ref: CheckboxGroupRef) => {
(props: CheckboxGroupProps, ref: CheckboxGroupRef) => { const { children, className, isDisabled, orientation = "vertical" } = props;
const { children, className, isDisabled, orientation = "vertical" } = props; const domRef = useDOMRef(ref);
const domRef = useDOMRef(ref); const state = useCheckboxGroupState(props);
const state = useCheckboxGroupState(props); const { descriptionProps, errorMessageProps, groupProps, labelProps } =
const { descriptionProps, errorMessageProps, groupProps, labelProps } = useCheckboxGroup(props, state);
useCheckboxGroup(props, state);
return ( return (
<Field <Field
{...props} {...props}
descriptionProps={descriptionProps} descriptionProps={descriptionProps}
errorMessageProps={errorMessageProps} errorMessageProps={errorMessageProps}
includeNecessityIndicatorInAccessibilityName includeNecessityIndicatorInAccessibilityName
labelProps={labelProps} labelProps={labelProps}
ref={domRef} ref={domRef}
wrapperClassName={className} wrapperClassName={className}
>
<div
{...groupProps}
data-disabled={props.isDisabled ? "" : undefined}
data-field-group=""
data-orientation={orientation}
> >
<div <CheckboxGroupContext.Provider
{...groupProps} value={{
data-disabled={props.isDisabled ? "" : undefined} state,
data-field-group="" isDisabled,
data-orientation={orientation} }}
> >
<CheckboxGroupContext.Provider {children}
value={{ </CheckboxGroupContext.Provider>
state, </div>
isDisabled, </Field>
}} );
> };
{children}
</CheckboxGroupContext.Provider> export const CheckboxGroup = forwardRef(_CheckboxGroup);
</div>
</Field>
);
},
);

28
app/client/packages/design-system/headless/src/components/Field/ErrorText.tsx
View File

@ -9,18 +9,18 @@ interface HelpTextProps extends SpectrumHelpTextProps {
errorMessageProps?: HTMLAttributes<HTMLElement>; errorMessageProps?: HTMLAttributes<HTMLElement>;
} }
export const ErrorText = forwardRef( const _ErrorText = (props: HelpTextProps, ref: DOMRef<HTMLDivElement>) => {
(props: HelpTextProps, ref: DOMRef<HTMLDivElement>) => { const { errorMessage, errorMessageProps, showErrorIcon } = props;
const { errorMessage, errorMessageProps, showErrorIcon } = props; const domRef = useDOMRef(ref);
const domRef = useDOMRef(ref);
return ( return (
<div data-field-error-text=""> <div data-field-error-text="">
{showErrorIcon && <AlertIcon />} {showErrorIcon && <AlertIcon />}
<span {...errorMessageProps} ref={domRef}> <span {...errorMessageProps} ref={domRef}>
{errorMessage} {errorMessage}
</span> </span>
</div> </div>
); );
}, };
);
export const ErrorText = forwardRef(_ErrorText);

9
app/client/packages/design-system/headless/src/components/Field/Field.tsx
View File

@ -1,14 +1,15 @@
import React, { forwardRef } from "react"; import React, { forwardRef } from "react";
import type { SpectrumFieldProps } from "@react-types/label"; import type { SpectrumFieldProps } from "@react-types/label";
import type { Ref } from "react";
import { Label } from "./Label"; import { Label } from "./Label";
import { ErrorText } from "./ErrorText"; import { ErrorText } from "./ErrorText";
export type FieldProps = SpectrumFieldProps; export type FieldProps = SpectrumFieldProps;
export type FieldRef = any; export type FieldRef = Ref<HTMLDivElement>;
export const Field = forwardRef((props: FieldProps, ref: FieldRef) => { const _Field = (props: FieldProps, ref: FieldRef) => {
const { const {
children, children,
elementType, elementType,
@ -74,4 +75,6 @@ export const Field = forwardRef((props: FieldProps, ref: FieldRef) => {
</div> </div>
</div> </div>
); );
}); };
export const Field = forwardRef(_Field);

112
app/client/packages/design-system/headless/src/components/Field/Label.tsx
View File

@ -10,63 +10,61 @@ export interface LabelProps extends SpectrumLabelProps {
labelWidth?: string; labelWidth?: string;
} }
export const Label = forwardRef( const _Label = (props: LabelProps, ref: DOMRef<HTMLLabelElement>) => {
(props: LabelProps, ref: DOMRef<HTMLLabelElement>) => { const {
const { children,
children, labelPosition = "top",
labelPosition = "top", labelAlign = labelPosition === "side" ? "start" : null,
labelAlign = labelPosition === "side" ? "start" : null, isRequired,
isRequired, necessityIndicator = isRequired != null ? "icon" : null,
necessityIndicator = isRequired != null ? "icon" : null, includeNecessityIndicatorInAccessibilityName = false,
includeNecessityIndicatorInAccessibilityName = false, htmlFor,
htmlFor, for: labelFor,
for: labelFor, elementType: ElementType = "label",
elementType: ElementType = "label", onClick,
onClick, ...otherProps
...otherProps } = props;
} = props;
const domRef = useDOMRef(ref); const domRef = useDOMRef(ref);
const necessityLabel = isRequired ? "(required)" : "(optional)"; const necessityLabel = isRequired ? "(required)" : "(optional)";
const icon = ( const icon = (
<AsteriskIcon <AsteriskIcon
aria-label={ aria-label={
includeNecessityIndicatorInAccessibilityName includeNecessityIndicatorInAccessibilityName ? "(required)" : undefined
? "(required)" }
: undefined data-field-necessity-indicator-icon=""
} />
data-field-necessity-indicator-icon="" );
/>
);
return ( return (
<ElementType <ElementType
data-align={labelAlign} data-align={labelAlign}
data-field-label="" data-field-label=""
data-position={labelPosition} data-position={labelPosition}
{...filterDOMProps(otherProps)} {...filterDOMProps(otherProps)}
htmlFor={ElementType === "label" ? labelFor || htmlFor : undefined} htmlFor={ElementType === "label" ? labelFor || htmlFor : undefined}
onClick={onClick} onClick={onClick}
ref={domRef} ref={domRef}
> >
{children} {children}
{/* necessityLabel is hidden to screen readers if the field is required because {/* 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, * 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. */} * so no need to duplicate it here. If optional, we do want it to be announced here. */}
{necessityIndicator === "label" && ( {necessityIndicator === "label" && (
<span <span
aria-hidden={ aria-hidden={
!includeNecessityIndicatorInAccessibilityName !includeNecessityIndicatorInAccessibilityName
? isRequired ? isRequired
: undefined : undefined
} }
> >
{necessityLabel} {necessityLabel}
</span> </span>
)} )}
{necessityIndicator === "icon" && isRequired && icon} {necessityIndicator === "icon" && isRequired && icon}
</ElementType> </ElementType>
); );
}, };
);
export const Label = forwardRef(_Label);

8
app/client/packages/design-system/headless/src/components/Radio/Radio.tsx
View File

@ -10,7 +10,7 @@ import type { FocusableRef, StyleProps } from "@react-types/shared";
import { RadioContext } from "./context"; import { RadioContext } from "./context";
import type { RadioGroupContext } from "./context"; import type { RadioGroupContext } from "./context";
import type { InlineLabelProps } from "../Checkbox/Checkbox"; import type { InlineLabelProps } from "../Checkbox";
export interface RadioProps export interface RadioProps
extends Omit<SpectrumRadioProps, keyof StyleProps>, extends Omit<SpectrumRadioProps, keyof StyleProps>,
@ -20,7 +20,7 @@ export interface RadioProps
export type RadioRef = FocusableRef<HTMLLabelElement>; export type RadioRef = FocusableRef<HTMLLabelElement>;
export const Radio = forwardRef((props: RadioProps, ref: RadioRef) => { const _Radio = (props: RadioProps, ref: RadioRef) => {
const { const {
autoFocus, autoFocus,
children, children,
@ -65,4 +65,6 @@ export const Radio = forwardRef((props: RadioProps, ref: RadioRef) => {
{children} {children}
</label> </label>
); );
}); };
export const Radio = forwardRef(_Radio);

80
app/client/packages/design-system/headless/src/components/Radio/RadioGroup.tsx
View File

@ -17,46 +17,46 @@ export interface RadioGroupProps
labelWidth?: LabelProps["labelWidth"]; labelWidth?: LabelProps["labelWidth"];
} }
export const RadioGroup = forwardRef( const _RadioGroup = (props: RadioGroupProps, ref: RadioGroupRef) => {
(props: RadioGroupProps, ref: RadioGroupRef) => { const {
const { children,
children, className,
className, isDisabled = false,
isDisabled = false, orientation = "vertical",
orientation = "vertical", validationState,
validationState, } = props;
} = props; const domRef = useDOMRef(ref);
const domRef = useDOMRef(ref); const state = useRadioGroupState(props);
const state = useRadioGroupState(props); const { descriptionProps, errorMessageProps, labelProps, radioGroupProps } =
const { descriptionProps, errorMessageProps, labelProps, radioGroupProps } = useRadioGroup(props, state);
useRadioGroup(props, state);
return ( return (
<Field <Field
{...props} {...props}
descriptionProps={descriptionProps} descriptionProps={descriptionProps}
errorMessageProps={errorMessageProps} errorMessageProps={errorMessageProps}
includeNecessityIndicatorInAccessibilityName includeNecessityIndicatorInAccessibilityName
labelProps={labelProps} labelProps={labelProps}
ref={domRef} ref={domRef}
wrapperClassName={className} wrapperClassName={className}
>
<div
{...radioGroupProps}
data-field-group=""
data-orientation={orientation}
> >
<div <RadioContext.Provider
{...radioGroupProps} value={{
data-field-group="" validationState,
data-orientation={orientation} state,
isDisabled,
}}
> >
<RadioContext.Provider {children}
value={{ </RadioContext.Provider>
validationState, </div>
state, </Field>
isDisabled, );
}} };
>
{children} export const RadioGroup = forwardRef(_RadioGroup);
</RadioContext.Provider>
</div>
</Field>
);
},
);

6
app/client/packages/design-system/headless/src/components/Switch/Switch.tsx
View File

@ -24,7 +24,7 @@ export interface SwitchProps
export type SwitchRef = FocusableRef<HTMLLabelElement>; export type SwitchRef = FocusableRef<HTMLLabelElement>;
export const Switch = forwardRef((props: SwitchProps, ref: SwitchRef) => { const _Switch = (props: SwitchProps, ref: SwitchRef) => {
const { const {
autoFocus, autoFocus,
children, children,
@ -87,4 +87,6 @@ export const Switch = forwardRef((props: SwitchProps, ref: SwitchRef) => {
{children} {children}
</label> </label>
); );
}); };
export const Switch = forwardRef(_Switch);

72
app/client/packages/design-system/headless/src/components/Tooltip/TooltipContent.tsx
View File

@ -1,4 +1,4 @@
import React from "react"; import React, { forwardRef } from "react";
import { import {
useMergeRefs, useMergeRefs,
FloatingPortal, FloatingPortal,
@ -9,42 +9,46 @@ import { useTooltipContext } from "./TooltipContext";
export type TooltipContentProps = React.HTMLAttributes<HTMLDivElement> & { export type TooltipContentProps = React.HTMLAttributes<HTMLDivElement> & {
root?: HTMLElement; root?: HTMLElement;
className?: string;
}; };
export type TooltipContentRef = React.Ref<HTMLDivElement>; export type TooltipContentRef = React.Ref<HTMLDivElement>;
export const TooltipContent = React.forwardRef( const _TooltipContent = (
(props: TooltipContentProps, propRef: TooltipContentRef) => { props: TooltipContentProps,
const context = useTooltipContext(); propRef: TooltipContentRef,
const { className, root: rootProp, ...rest } = props; ) => {
const ref = useMergeRefs([context.refs.setFloating, propRef]); const context = useTooltipContext();
const { children, ...floatingProps } = context.getFloatingProps(rest); const { className, root: rootProp, ...rest } = props;
const arrowWidth = context.arrowRef.current?.clientWidth ?? 0; 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( const root = context.refs.domReference.current?.closest(
"[data-theme-provider]", "[data-theme-provider]",
) as HTMLElement; ) as HTMLElement;
return ( return (
<FloatingPortal root={rootProp ?? root}> <FloatingPortal root={rootProp ?? root}>
<div <div
className={className} className={className}
data-tooltip-content="" data-tooltip-content=""
data-tooltip-placement={context.placement} data-tooltip-placement={context.placement}
ref={ref} ref={ref}
style={context.floatingStyles} style={context.floatingStyles}
{...floatingProps} {...floatingProps}
> >
{children} {children}
<FloatingArrow <FloatingArrow
context={context.context} context={context.context}
data-tooltip-trigger-arrow="" data-tooltip-trigger-arrow=""
ref={context.arrowRef} ref={context.arrowRef}
staticOffset={`calc(50% - ${arrowWidth / 2}px)`} staticOffset={`calc(50% - ${arrowWidth / 2}px)`}
/> />
</div> </div>
</FloatingPortal> </FloatingPortal>
); );
}, };
);
export const TooltipContent = forwardRef(_TooltipContent);

13
app/client/packages/design-system/headless/src/components/Tooltip/TooltipTrigger.tsx
View File

@ -1,4 +1,4 @@
import * as React from "react"; import React, { forwardRef } from "react";
import { useMergeRefs } from "@floating-ui/react"; import { useMergeRefs } from "@floating-ui/react";
import { useTooltipContext } from "./TooltipContext"; import { useTooltipContext } from "./TooltipContext";
@ -6,13 +6,14 @@ import { useTooltipContext } from "./TooltipContext";
export type TooltipTriggerRef = React.Ref<HTMLElement>; export type TooltipTriggerRef = React.Ref<HTMLElement>;
export type TooltipTriggerProps = React.HTMLProps<HTMLElement>; export type TooltipTriggerProps = React.HTMLProps<HTMLElement>;
export const TooltipTrigger = React.forwardRef(function TooltipTrigger( const _TooltipTrigger = (
props: TooltipTriggerProps, props: TooltipTriggerProps,
propRef: TooltipTriggerRef, propRef: TooltipTriggerRef,
) { ) => {
const { children, ...rest } = props; const { children, ...rest } = props;
const context = useTooltipContext(); 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]); const ref = useMergeRefs([context.refs.setReference, propRef, childrenRef]);
if (React.isValidElement(children)) { if (React.isValidElement(children)) {
@ -31,4 +32,6 @@ export const TooltipTrigger = React.forwardRef(function TooltipTrigger(
} }
return null; return null;
}); };
export const TooltipTrigger = forwardRef(_TooltipTrigger);

7
app/client/packages/design-system/widgets-old/.eslintrc.json Normal file
View File

@ -0,0 +1,7 @@
{
"extends": ["../../../.eslintrc.base.json"],
"rules": {
"@typescript-eslint/no-explicit-any": "off",
"react/display-name": "off"
}
}

2
app/client/packages/design-system/widgets/src/components/Button/Button.test.tsx
View File

@ -6,7 +6,7 @@ import { render, screen } from "@testing-library/react";
import { Button } from "./"; 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) // 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<string, any>) => { const EmotionHappyLineIcon = ({ ...props }: Record<string, string>) => {
return ( return (
<svg <svg
fill="currentColor" fill="currentColor"

116
app/client/packages/design-system/widgets/src/components/Button/Button.tsx
View File

@ -40,67 +40,67 @@ export interface ButtonProps extends Omit<HeadlessButtonProps, "className"> {
loadingText?: string; loadingText?: string;
} }
export const Button = forwardRef( const _Button = (props: ButtonProps, ref: HeadlessButtonRef) => {
(props: ButtonProps, ref: HeadlessButtonRef) => { props = useVisuallyDisabled(props);
props = useVisuallyDisabled(props); const {
const { children,
children, color = "accent",
color = "accent", icon,
icon, iconPosition = "start",
iconPosition = "start", isLoading,
isLoading, loadingText = "Loading...",
loadingText = "Loading...", // eslint-disable-next-line -- TODO add onKeyUp when the bug is fixed https://github.com/adobe/react-spectrum/issues/4350
// eslint-disable-next-line -- TODO add onKeyUp when the bug is fixed https://github.com/adobe/react-spectrum/issues/4350 onKeyUp,
onKeyUp, variant = "filled",
variant = "filled", visuallyDisabled,
visuallyDisabled, ...rest
...rest } = props;
} = props; const { visuallyHiddenProps } = useVisuallyHidden();
const { visuallyHiddenProps } = useVisuallyHidden();
const renderChildren = () => {
return (
<>
<span aria-hidden={isLoading ? true : undefined} data-content="">
{icon}
<Text lineClamp={1} textAlign="center">
{children}
</Text>
</span>
<span aria-hidden={!isLoading ? true : undefined} data-loader="">
<HeadlessIcon>
<Spinner />
</HeadlessIcon>
<span {...visuallyHiddenProps}>{loadingText}</span>
</span>
</>
);
};
const renderChildren = () => {
return ( return (
<StyledButton <>
$color={color} <span aria-hidden={isLoading ? true : undefined} data-content="">
$variant={variant} {icon}
aria-busy={isLoading ? true : undefined} <Text lineClamp={1} textAlign="center">
aria-disabled={ {children}
visuallyDisabled || isLoading || props.isDisabled ? true : undefined </Text>
} </span>
data-button=""
data-color={color} <span aria-hidden={!isLoading ? true : undefined} data-loader="">
data-icon-position={iconPosition === "start" ? "start" : "end"} <HeadlessIcon>
data-loading={isLoading ? "" : undefined} <Spinner />
data-variant={variant} </HeadlessIcon>
draggable <span {...visuallyHiddenProps}>{loadingText}</span>
ref={ref} </span>
{...rest} </>
>
{renderChildren()}
<DragContainer aria-hidden="true" />
</StyledButton>
); );
}, };
);
return (
<StyledButton
$color={color}
$variant={variant}
aria-busy={isLoading ? true : undefined}
aria-disabled={
visuallyDisabled || isLoading || props.isDisabled ? true : undefined
}
data-button=""
data-color={color}
data-icon-position={iconPosition === "start" ? "start" : "end"}
data-loading={isLoading ? "" : undefined}
data-variant={variant}
draggable
ref={ref}
{...rest}
>
{renderChildren()}
<DragContainer aria-hidden="true" />
</StyledButton>
);
};
export const Button = forwardRef(_Button);
/** /**
* This hook is used to disable all click/press events on a button * This hook is used to disable all click/press events on a button

2
app/client/packages/design-system/widgets/src/components/ButtonGroup/ButtonGroup.test.tsx
View File

@ -28,7 +28,7 @@ describe("@design-system/widgets/Button Group", () => {
it("should support custom props", () => { it("should support custom props", () => {
const { container } = renderComponent({ const { container } = renderComponent({
"data-testid": "button-group", "data-testid": "button-group",
} as any); } as ButtonGroupProps);
const buttonGroup = container.querySelector("div") as HTMLElement; const buttonGroup = container.querySelector("div") as HTMLElement;
expect(buttonGroup).toHaveAttribute("data-testid", "button-group"); expect(buttonGroup).toHaveAttribute("data-testid", "button-group");

2
app/client/packages/design-system/widgets/src/components/Checkbox/Checkbox.test.tsx
View File

@ -7,7 +7,7 @@ import userEvent from "@testing-library/user-event";
import { Checkbox } from "./Checkbox"; 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) // 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<string, any>) => { const EmotionHappyLineIcon = ({ ...props }: Record<string, string>) => {
return ( return (
<svg <svg
fill="currentColor" fill="currentColor"

20
app/client/packages/design-system/widgets/src/components/Checkbox/Checkbox.tsx
View File

@ -10,14 +10,14 @@ import { StyledCheckbox } from "./index.styled";
export type CheckboxProps = HeadlessCheckboxProps; export type CheckboxProps = HeadlessCheckboxProps;
export const Checkbox = forwardRef( const _Checkbox = (props: CheckboxProps, ref: HeadlessCheckboxRef) => {
(props: CheckboxProps, ref: HeadlessCheckboxRef) => { const { children, labelPosition = "right", ...rest } = props;
const { children, labelPosition = "right", ...rest } = props;
return ( return (
<StyledCheckbox labelPosition={labelPosition} ref={ref} {...rest}> <StyledCheckbox labelPosition={labelPosition} ref={ref} {...rest}>
{children && <Text>{children}</Text>} {children && <Text>{children}</Text>}
</StyledCheckbox> </StyledCheckbox>
); );
}, };
);
export const Checkbox = forwardRef(_Checkbox);

33
app/client/packages/design-system/widgets/src/components/CheckboxGroup/CheckboxGroup.tsx
View File

@ -12,19 +12,22 @@ export interface CheckboxGroupProps extends HeadlessCheckboxGroupProps {
className?: string; className?: string;
} }
export const CheckboxGroup = forwardRef( const _CheckboxGroup = (
(props: CheckboxGroupProps, ref: HeadlessCheckboxGroupRef) => { props: CheckboxGroupProps,
const { errorMessage, label, ...rest } = props; ref: HeadlessCheckboxGroupRef,
const wrappedErrorMessage = errorMessage && <Text>{errorMessage}</Text>; ) => {
const wrappedLabel = label && <Text>{label}</Text>; const { errorMessage, label, ...rest } = props;
const wrappedErrorMessage = errorMessage && <Text>{errorMessage}</Text>;
const wrappedLabel = label && <Text>{label}</Text>;
return ( return (
<StyledCheckboxGroup <StyledCheckboxGroup
errorMessage={wrappedErrorMessage} errorMessage={wrappedErrorMessage}
label={wrappedLabel} label={wrappedLabel}
ref={ref} ref={ref}
{...rest} {...rest}
/> />
); );
}, };
);
export const CheckboxGroup = forwardRef(_CheckboxGroup);

29
app/client/packages/design-system/widgets/src/components/Flex/index.styled.tsx
View File

@ -1,6 +1,6 @@
import styled from "styled-components"; import styled from "styled-components";
import type { StyledFlexProps } from "./types"; import type { Responsive, StyledFlexProps } from "./types";
export const StyledFlex = styled.div<StyledFlexProps>` export const StyledFlex = styled.div<StyledFlexProps>`
${({ $wrap }) => { ${({ $wrap }) => {
@ -140,9 +140,12 @@ export const StyledFlex = styled.div<StyledFlexProps>`
}} }}
`; `;
// the value and returned callback value can be of any type in accordance with component props
const containerDimensionStyles = ( const containerDimensionStyles = (
cssProp: string, cssProp: string,
// eslint-disable-next-line @typescript-eslint/no-explicit-any
value: any, value: any,
// eslint-disable-next-line @typescript-eslint/no-explicit-any
callback?: (value: any) => void, callback?: (value: any) => void,
) => { ) => {
if (value == null) return; if (value == null) return;
@ -169,7 +172,21 @@ const containerDimensionStyles = (
return `${cssProp}: ${callback ? callback(value) : value};`; 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") { if (value === "start") {
return "flex-start"; return "flex-start";
} }
@ -181,7 +198,9 @@ const flexAlignValue = (value: any) => {
return value; return value;
}; };
const flexWrapValue = (value: any) => { const flexWrapValue = (
value: Responsive<boolean | "wrap" | "nowrap" | "wrap-reverse">,
) => {
if (typeof value === "boolean") { if (typeof value === "boolean") {
return value ? "wrap" : "nowrap"; return value ? "wrap" : "nowrap";
} }
@ -189,7 +208,7 @@ const flexWrapValue = (value: any) => {
return value; return value;
}; };
const cssVarValue = (value: any) => { const cssVarValue = (value: string) => {
if (value == null) return; if (value == null) return;
if (value.includes("spacing") || value.includes("sizing")) { if (value.includes("spacing") || value.includes("sizing")) {
@ -199,7 +218,7 @@ const cssVarValue = (value: any) => {
return value; return value;
}; };
const hiddenValue = (value?: any) => { const hiddenValue = (value: boolean) => {
return value ? "none" : "flex"; return value ? "none" : "flex";
}; };

2
app/client/packages/design-system/widgets/src/components/Flex/types.ts
View File

@ -2,7 +2,7 @@ import type { ReactNode, CSSProperties } from "react";
import type { OmitRename } from "../../utils"; import type { OmitRename } from "../../utils";
import type { SizingDimension, SpacingDimension } from "./dimensions"; import type { SizingDimension, SpacingDimension } from "./dimensions";
type Responsive<T> = export type Responsive<T> =
| T | T
| { | {
base?: T; base?: T;

6
app/client/packages/design-system/widgets/src/components/Radio/Radio.tsx
View File

@ -10,7 +10,7 @@ import { StyledRadio } from "./index.styled";
export type RadioProps = HeadlessRadioProps; export type RadioProps = HeadlessRadioProps;
export const Radio = forwardRef((props: RadioProps, ref: HeadlessRadioRef) => { const _Radio = (props: RadioProps, ref: HeadlessRadioRef) => {
const { children, labelPosition = "right", ...rest } = props; const { children, labelPosition = "right", ...rest } = props;
return ( return (
@ -18,4 +18,6 @@ export const Radio = forwardRef((props: RadioProps, ref: HeadlessRadioRef) => {
{children && <Text>{children}</Text>} {children && <Text>{children}</Text>}
</StyledRadio> </StyledRadio>
); );
}); };
export const Radio = forwardRef(_Radio);

30
app/client/packages/design-system/widgets/src/components/RadioGroup/RadioGroup.tsx
View File

@ -12,19 +12,19 @@ export interface RadioGroupProps extends HeadlessRadioGroupProps {
className?: string; className?: string;
} }
export const RadioGroup = forwardRef( const _RadioGroup = (props: RadioGroupProps, ref: HeadlessRadioGroupRef) => {
(props: RadioGroupProps, ref: HeadlessRadioGroupRef) => { const { errorMessage, label, ...rest } = props;
const { errorMessage, label, ...rest } = props; const wrappedErrorMessage = errorMessage && <Text>{errorMessage}</Text>;
const wrappedErrorMessage = errorMessage && <Text>{errorMessage}</Text>; const wrappedLabel = label && <Text>{label}</Text>;
const wrappedLabel = label && <Text>{label}</Text>;
return ( return (
<StyledRadioGroup <StyledRadioGroup
errorMessage={wrappedErrorMessage} errorMessage={wrappedErrorMessage}
label={wrappedLabel} label={wrappedLabel}
ref={ref} ref={ref}
{...rest} {...rest}
/> />
); );
}, };
);
export const RadioGroup = forwardRef(_RadioGroup);

2
app/client/packages/design-system/widgets/src/components/Spinner/index.styled.tsx
View File

@ -7,7 +7,7 @@ function LoaderIcon({
...props ...props
}: { }: {
className?: string; className?: string;
[key: string]: any; [key: string]: unknown;
}) { }) {
return ( return (
<svg <svg

25
app/client/packages/design-system/widgets/src/components/Switch/Switch.tsx
View File

@ -10,19 +10,14 @@ import { StyledSwitch } from "./index.styled";
export type SwitchProps = Omit<HeadlessSwitchProps, "icon" | "isIndeterminate">; export type SwitchProps = Omit<HeadlessSwitchProps, "icon" | "isIndeterminate">;
export const Switch = forwardRef( const _Switch = (props: SwitchProps, ref: HeadlessSwitchRef) => {
(props: SwitchProps, ref: HeadlessSwitchRef) => { const { children, labelPosition = "right", ...rest } = props;
const { children, labelPosition = "right", ...rest } = props;
return ( return (
<StyledSwitch <StyledSwitch labelPosition={labelPosition} ref={ref} {...rest} icon={null}>
labelPosition={labelPosition} {children && <Text>{children}</Text>}
ref={ref} </StyledSwitch>
{...rest} );
icon={null} };
>
{children && <Text>{children}</Text>} export const Switch = forwardRef(_Switch);
</StyledSwitch>
);
},
);

60
app/client/packages/design-system/widgets/src/components/Text/Text.tsx
View File

@ -35,34 +35,34 @@ export interface TextProps {
children: React.ReactNode; children: React.ReactNode;
} }
export const Text = forwardRef( const _Text = (props: TextProps, ref: Ref<HTMLParagraphElement>) => {
(props: TextProps, ref: Ref<HTMLParagraphElement>) => { const {
const { children,
children, className,
className, color = "default",
color = "default", isBold = false,
isBold = false, isItalic = false,
isItalic = false, lineClamp,
lineClamp, textAlign = "left",
textAlign = "left", variant = "body",
variant = "body", ...rest
...rest } = props;
} = props;
return ( return (
<StyledText <StyledText
$isBold={isBold} $isBold={isBold}
$isItalic={isItalic} $isItalic={isItalic}
$lineClamp={lineClamp} $lineClamp={lineClamp}
$textAlign={textAlign} $textAlign={textAlign}
$variant={variant} $variant={variant}
className={classNames(className, getTypographyClassName(variant))} className={classNames(className, getTypographyClassName(variant))}
color={color} color={color}
ref={ref} ref={ref}
{...rest} {...rest}
> >
<span>{children}</span> <span>{children}</span>
</StyledText> </StyledText>
); );
}, };
);
export const Text = forwardRef(_Text);

35
app/client/packages/design-system/widgets/src/components/Tooltip/TooltipContent.tsx
View File

@ -10,21 +10,24 @@ import type {
} from "@design-system/headless"; } from "@design-system/headless";
import { StyledTooltipContent } from "./index.styled"; import { StyledTooltipContent } from "./index.styled";
export const TooltipContent = forwardRef( const _TooltipContent = (
(props: HeadlessTooltipContentProps, ref: HeadlessTooltipContentRef) => { props: HeadlessTooltipContentProps,
const { children, ...rest } = props; ref: HeadlessTooltipContentRef,
) => {
const { children, ...rest } = props;
// We have to shift the arrow so that there is no empty space if the tooltip has rounding // We have to shift the arrow so that there is no empty space if the tooltip has rounding
const theme = useThemeContext(); const theme = useThemeContext();
const borderRadius = Number( const borderRadius = Number(
(theme?.borderRadius?.[1].value as string).replace("px", ""), (theme?.borderRadius?.[1].value as string).replace("px", ""),
); );
const isRounded = borderRadius > BORDER_RADIUS_THRESHOLD; const isRounded = borderRadius > BORDER_RADIUS_THRESHOLD;
return ( return (
<StyledTooltipContent $isRounded={isRounded} ref={ref} {...rest}> <StyledTooltipContent $isRounded={isRounded} ref={ref} {...rest}>
{typeof children === "string" ? <Text>{children}</Text> : children} {typeof children === "string" ? <Text>{children}</Text> : children}
</StyledTooltipContent> </StyledTooltipContent>
); );
}, };
);
export const TooltipContent = forwardRef(_TooltipContent);

3
app/client/packages/dsl/rollup.config.js
View File

@ -2,8 +2,7 @@ import peerDepsExternal from "rollup-plugin-peer-deps-external";
import commonjs from "@rollup/plugin-commonjs"; import commonjs from "@rollup/plugin-commonjs";
import typescript from "rollup-plugin-typescript2"; import typescript from "rollup-plugin-typescript2";
import generatePackageJson from "rollup-plugin-generate-package-json"; import generatePackageJson from "rollup-plugin-generate-package-json";
import packageJson from "./package.json";
const packageJson = require("./package.json");
export default { export default {
// TODO: Figure out regex where each directory can be a separate module without having to manually add them // TODO: Figure out regex where each directory can be a separate module without having to manually add them

2
app/client/packages/dsl/src/index.test.ts
View File

@ -85,7 +85,7 @@ describe("Test #2 - normalize operations on SIMPLE DSL structures", () => {
}; };
it("Test `flattenDSL` for simple_dsl", () => { it("Test `flattenDSL` for simple_dsl", () => {
const flatDSL = flattenDSL<Record<string, any>>(simple_dsl); const flatDSL = flattenDSL<Record<string, unknown>>(simple_dsl);
expect(flatDSL).toStrictEqual(simple_flat_dsl); expect(flatDSL).toStrictEqual(simple_flat_dsl);
}); });

5
app/client/packages/rts/.eslintrc.json
View File

@ -1,4 +1,7 @@
{ {
"extends": ["../../.eslintrc.base.json"], "extends": ["../../.eslintrc.base.json"],
"ignorePatterns": ["dist"] "ignorePatterns": ["dist"],
"rules": {
"@typescript-eslint/no-explicit-any": "off"
}
} }

3
app/client/src/components/propertyControls/ColorPickerComponentV2.tsx
View File

@ -26,13 +26,12 @@ import { TAILWIND_COLORS } from "constants/ThemeConstants";
import useDSEvent from "utils/hooks/useDSEvent"; import useDSEvent from "utils/hooks/useDSEvent";
import { DSEventTypes } from "utils/AppsmithUtils"; import { DSEventTypes } from "utils/AppsmithUtils";
import { getBrandColors } from "@appsmith/selectors/tenantSelectors"; import { getBrandColors } from "@appsmith/selectors/tenantSelectors";
import FocusTrap from "focus-trap-react";
import { import {
createMessage, createMessage,
FULL_COLOR_PICKER_LABEL, FULL_COLOR_PICKER_LABEL,
} from "@appsmith/constants/messages"; } from "@appsmith/constants/messages";
const FocusTrap = require("focus-trap-react");
const MAX_COLS = 10; const MAX_COLS = 10;
/** /**

1
app/client/src/constants/routes/appRoutes.ts
View File

@ -1,6 +1,7 @@
// Leaving this require here. The path-to-regexp module has a commonJS version and an ESM one. // 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 // 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 // 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"); const { match } = require("path-to-regexp");
export const BUILDER_VIEWER_PATH_PREFIX = "/app/"; export const BUILDER_VIEWER_PATH_PREFIX = "/app/";

1
app/client/src/constants/routes/baseRoutes.ts
View File

@ -1,3 +1,4 @@
// eslint-disable-next-line @typescript-eslint/no-var-requires
const { match } = require("path-to-regexp"); const { match } = require("path-to-regexp");
export const BASE_URL = "/"; export const BASE_URL = "/";

1
app/client/src/utils/history.ts
View File

@ -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 // 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; const createHistory = require("history").createBrowserHistory;
import type { History } from "history"; import type { History } from "history";

1
app/client/src/wdyr.ts
View File

@ -3,6 +3,7 @@
import React from "react"; import React from "react";
if (process.env.NODE_ENV === "development") { if (process.env.NODE_ENV === "development") {
// eslint-disable-next-line @typescript-eslint/no-var-requires
const whyDidYouRender = require("@welldone-software/why-did-you-render"); const whyDidYouRender = require("@welldone-software/why-did-you-render");
whyDidYouRender(React, { whyDidYouRender(React, {
trackAllPureComponents: false, trackAllPureComponents: false,

1
app/client/src/widgets/ChartWidget/component/index.tsx
View File

@ -20,6 +20,7 @@ import { EChartsConfigurationBuilder } from "./EChartsConfigurationBuilder";
import { EChartsDatasetBuilder } from "./EChartsDatasetBuilder"; 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 // 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. // 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 FusionCharts = require("fusioncharts");
const plugins: Record<string, any> = { const plugins: Record<string, any> = {
Charts: require("fusioncharts/fusioncharts.charts"), Charts: require("fusioncharts/fusioncharts.charts"),

2
app/client/src/widgets/FilePickerWidgetV2/widget/FileParser.test.tsx
View File

@ -1,7 +1,7 @@
import FileDataTypes from "../constants"; import FileDataTypes from "../constants";
import parseFileData from "./FileParser"; import parseFileData from "./FileParser";
import fs from "fs"; import fs from "fs";
const path = require("path"); import path from "path";
describe("File parser formats differenty file types correctly", () => { describe("File parser formats differenty file types correctly", () => {
it("parses csv file correclty", async () => { it("parses csv file correclty", async () => {

3
app/client/src/widgets/WidgetUtils.ts
View File

@ -34,8 +34,7 @@ import { rgbaMigrationConstantV56 } from "./constants";
import type { ContainerWidgetProps } from "./ContainerWidget/widget"; import type { ContainerWidgetProps } from "./ContainerWidget/widget";
import type { SchemaItem } from "./JSONFormWidget/constants"; import type { SchemaItem } from "./JSONFormWidget/constants";
import { WIDGET_COMPONENT_BOUNDARY_CLASS } from "constants/componentClassNameConstants"; import { WIDGET_COMPONENT_BOUNDARY_CLASS } from "constants/componentClassNameConstants";
import punycode from "punycode";
const punycode = require("punycode/");
type SanitizeOptions = { type SanitizeOptions = {
existingKeys?: string[]; existingKeys?: string[];