fix(eslint): fix direct remixicon imports in packages/design-system/* (#24010)
## Description This PR: - moves the icon-related ESLint rules from to `eslintrc.base.json` – to make them apply to all packages - fixes direct `remixicon` imports surfaced by the change #### Type of change - Bug fix (non-breaking change which fixes an issue) ## Testing #### How Has This Been Tested? - [ ] Manual – smoke-tested that the dashboard and the editor open correctly - [ ] Jest - [ ] Cypress #### Test Plan > Add Testsmith test cases links that relate to this PR > > #### Issues raised during DP testing > Link issues raised during DP testing for better visiblity and tracking (copy link from comments dropped on this PR) > > > ## Checklist: #### Dev activity - [ ] My code follows the style guidelines of this project - [ ] 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 - [ ] My changes generate no new warnings - [ ] I have added tests that prove my fix is effective or that my feature works - [ ] New and existing unit tests pass locally with my changes - [ ] PR is being merged under a feature flag #### QA activity: - [ ] [Speedbreak features](https://github.com/appsmithorg/TestSmith/wiki/Test-plan-implementation#speedbreaker-features-to-consider-for-every-change) have been covered - [ ] Test plan covers all impacted features and [areas of interest](https://github.com/appsmithorg/TestSmith/wiki/Guidelines-for-test-plans/_edit#areas-of-interest) - [ ] Test plan has been peer reviewed by project stakeholders and other QA members - [ ] Manually tested functionality on DP - [ ] We had an implementation alignment call with stakeholders post QA Round 2 - [ ] Cypress test cases have been added and approved by SDET/manual QA - [ ] Added `Test Plan Approved` label after Cypress tests were reviewed - [ ] Added `Test Plan Approved` label after JUnit tests were reviewed
This commit is contained in:
Ivan Akulov
GitHub
parent
eb51866dfb
commit
9ef070d33a
|
|
@ -54,7 +54,27 @@
|
|||
{ "caseSensitive": false }
|
||||
],
|
||||
"no-console": "warn",
|
||||
"no-debugger": "warn"
|
||||
"no-debugger": "warn",
|
||||
"@typescript-eslint/no-restricted-imports": [
|
||||
"error",
|
||||
{
|
||||
"patterns": [
|
||||
{
|
||||
"group": ["@blueprintjs/core/lib/esnext/*"],
|
||||
"message": "Reason: @blueprintjs/core has both lib/esnext and lib/esm directories which export the same components. To avoid duplicating components in the bundle, please import only from the lib/esm directory."
|
||||
},
|
||||
{
|
||||
"group": ["*.svg"],
|
||||
"importNames": ["ReactComponent"],
|
||||
"message": "Reason: Please don’t import SVG icons statically. (They won’t always be needed, but they *will* always be present in the bundle and will increase the bundle size.) Instead, please either import them as SVG paths (e.g. import starIconUrl from './star.svg'), or use the importSvg wrapper from design-system-old (e.g. const StarIcon = importSvg(() => import('./star.svg')))."
|
||||
},
|
||||
{
|
||||
"group": ["remixicon-react/*"],
|
||||
"message": "Reason: Please don’t import Remix icons statically. (They won’t always be needed, but they *will* always be present in the bundle and will increase the bundle size.) Instead, please use the importRemixIcon wrapper from design-system-old (e.g. const StarIcon = importRemixIcon(() => import('remixicon-react/Star')))."
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
"settings": {
|
||||
"import/resolver": {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,15 @@
|
|||
// The `@type` comment improves auto-completion for VS Code users: https://github.com/appsmithorg/appsmith/pull/21602#discussion_r1144528505
|
||||
/** @type {import('eslint').Linter.Config} */
|
||||
const fs = require("fs");
|
||||
const path = require("path");
|
||||
const JSON5 = require("json5");
|
||||
|
||||
const baseEslintConfig = JSON5.parse(
|
||||
fs.readFileSync(path.join(__dirname, "./.eslintrc.base.json"), "utf8"),
|
||||
);
|
||||
const baseNoRestrictedImports =
|
||||
baseEslintConfig.rules["@typescript-eslint/no-restricted-imports"][1];
|
||||
|
||||
const eslintConfig = {
|
||||
extends: ["./.eslintrc.base.json"],
|
||||
rules: {
|
||||
|
|
@ -10,6 +20,7 @@ const eslintConfig = {
|
|||
"error",
|
||||
{
|
||||
paths: [
|
||||
...(baseNoRestrictedImports.paths ?? []),
|
||||
{
|
||||
name: "codemirror",
|
||||
message:
|
||||
|
|
@ -26,22 +37,7 @@ const eslintConfig = {
|
|||
},
|
||||
],
|
||||
patterns: [
|
||||
{
|
||||
group: ["@blueprintjs/core/lib/esnext/*"],
|
||||
message:
|
||||
"Reason: @blueprintjs/core has both lib/esnext and lib/esm directories which export the same components. To avoid duplicating components in the bundle, please import only from the lib/esm directory.",
|
||||
},
|
||||
{
|
||||
group: ["*.svg"],
|
||||
importNames: ["ReactComponent"],
|
||||
message:
|
||||
"Reason: Please don’t import SVG icons statically. (They won’t always be needed, but they *will* always be present in the bundle and will increase the bundle size.) Instead, please either import them as SVG paths (e.g. import starIconUrl from './star.svg'), or use the importSvg wrapper from design-system-old (e.g. const StarIcon = importSvg(() => import('./star.svg'))).",
|
||||
},
|
||||
{
|
||||
group: ["remixicon-react/*"],
|
||||
message:
|
||||
"Reason: Please don’t import Remix icons statically. (They won’t always be needed, but they *will* always be present in the bundle and will increase the bundle size.) Instead, please use the importRemixIcon wrapper from design-system-old (e.g. const StarIcon = importRemixIcon(() => import('remixicon-react/Star'))).",
|
||||
},
|
||||
...(baseNoRestrictedImports.patterns ?? []),
|
||||
{
|
||||
group: ["**/ce/*"],
|
||||
message: "Reason: Please use @appsmith import instead.",
|
||||
|
|
|
|||
|
|
@ -306,6 +306,7 @@
|
|||
"jest-canvas-mock": "^2.3.1",
|
||||
"jest-environment-jsdom": "^27.4.1",
|
||||
"jest-styled-components": "^7.0.8",
|
||||
"json5": "^2.2.3",
|
||||
"lint-staged": "^13.2.0",
|
||||
"msw": "^0.28.0",
|
||||
"plop": "^3.1.1",
|
||||
|
|
|
|||
|
|
@ -1,18 +1,33 @@
|
|||
import { mergeProps } from "@react-aria/utils";
|
||||
import { useFocusRing } from "@react-aria/focus";
|
||||
import { useHover } from "@react-aria/interactions";
|
||||
import CheckIcon from "remixicon-react/CheckLineIcon";
|
||||
import { useToggleState } from "@react-stately/toggle";
|
||||
import { useFocusableRef } from "@react-spectrum/utils";
|
||||
import SubtractIcon from "remixicon-react/SubtractLineIcon";
|
||||
import React, { forwardRef, useContext, useRef } from "react";
|
||||
import { useVisuallyHidden } from "@react-aria/visually-hidden";
|
||||
import type { SpectrumCheckboxProps } from "@react-types/checkbox";
|
||||
import type { FocusableRef, StyleProps } from "@react-types/shared";
|
||||
import { useCheckbox, useCheckboxGroupItem } from "@react-aria/checkbox";
|
||||
|
||||
import { CheckboxGroupContext } from "./context";
|
||||
|
||||
// Adapted from remixicon-react/CheckLineIcon (https://github.com/Remix-Design/RemixIcon/blob/f88a51b6402562c6c2465f61a3e845115992e4c6/icons/System/check-line.svg)
|
||||
const CheckIcon = ({ size }: { size: number }) => {
|
||||
return (
|
||||
<svg fill="currentColor" height={size} viewBox="0 0 24 24" width={size}>
|
||||
<path d="m10 15.17 9.193-9.191 1.414 1.414-10.606 10.606-6.364-6.364 1.414-1.414 4.95 4.95Z" />
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
||||
// Adapted from remixicon-react/SubtractLineIcon (https://github.com/Remix-Design/RemixIcon/blob/f88a51b6402562c6c2465f61a3e845115992e4c6/icons/System/subtract-line.svg)
|
||||
const SubtractIcon = ({ size }: { size: number }) => {
|
||||
return (
|
||||
<svg fill="currentColor" height={size} viewBox="0 0 24 24" width={size}>
|
||||
<path d="M5 11V13H19V11H5Z" />
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
||||
export interface CheckboxProps
|
||||
extends Omit<SpectrumCheckboxProps, keyof StyleProps> {
|
||||
icon?: React.ReactNode;
|
||||
|
|
|
|||
|
|
@ -1,9 +1,17 @@
|
|||
import React, { forwardRef } from "react";
|
||||
import type { HTMLAttributes } from "react";
|
||||
import { useDOMRef } from "@react-spectrum/utils";
|
||||
import AlertIcon from "remixicon-react/AlertFillIcon";
|
||||
import type { DOMRef, SpectrumHelpTextProps } from "@react-types/shared";
|
||||
|
||||
// Adapted from remixicon-react/AlertFillIcon (https://github.com/Remix-Design/RemixIcon/blob/f88a51b6402562c6c2465f61a3e845115992e4c6/icons/System/alert-fill.svg)
|
||||
const AlertIcon = () => {
|
||||
return (
|
||||
<svg fill="currentColor" height={24} viewBox="0 0 24 24" width={24}>
|
||||
<path d="m12.865 3 9.526 16.5a1 1 0 0 1-.866 1.5H2.473a1 1 0 0 1-.866-1.5L11.133 3a1 1 0 0 1 1.732 0Zm-1.866 13v2h2v-2h-2Zm0-7v5h2V9h-2Z" />
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
||||
interface HelpTextProps extends SpectrumHelpTextProps {
|
||||
errorMessageProps?: HTMLAttributes<HTMLElement>;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,9 +2,23 @@ import React, { forwardRef } from "react";
|
|||
import { useDOMRef } from "@react-spectrum/utils";
|
||||
import type { DOMRef } from "@react-types/shared";
|
||||
import { filterDOMProps } from "@react-aria/utils";
|
||||
import AsteriskIcon from "remixicon-react/AsteriskIcon";
|
||||
import type { SpectrumLabelProps } from "@react-types/label";
|
||||
|
||||
// Adapted from remixicon-react/AsteriskIcon (https://github.com/Remix-Design/RemixIcon/blob/f88a51b6402562c6c2465f61a3e845115992e4c6/icons/Editor/asterisk.svg)
|
||||
const AsteriskIcon = (props: { [key: string]: string | undefined }) => {
|
||||
return (
|
||||
<svg
|
||||
fill="currentColor"
|
||||
height={24}
|
||||
viewBox="0 0 24 24"
|
||||
width={24}
|
||||
{...props}
|
||||
>
|
||||
<path d="M13 3v7.267l6.294-3.633 1 1.732L14 11.999l6.294 3.635-1 1.732-6.295-3.634V21h-2v-7.268l-6.294 3.634-1-1.732L9.998 12 3.705 8.366l1-1.732L11 10.267V3h2Z" />
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
||||
export interface LabelProps extends SpectrumLabelProps {
|
||||
isEmphasized?: boolean;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,10 +2,24 @@ import React from "react";
|
|||
import "@testing-library/jest-dom";
|
||||
import { Icon } from "@design-system/headless";
|
||||
import { render, screen } from "@testing-library/react";
|
||||
import EmotionHappyLineIcon from "remixicon-react/EmotionHappyLineIcon";
|
||||
|
||||
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<string, any>) => {
|
||||
return (
|
||||
<svg
|
||||
fill="currentColor"
|
||||
height={24}
|
||||
viewBox="0 0 24 24"
|
||||
width={24}
|
||||
{...props}
|
||||
>
|
||||
<path d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10Zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm-5-7h2a3 3 0 1 0 6 0h2a5 5 0 0 1-10 0Zm1-2a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3Zm8 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3Z" />
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
||||
describe("@design-system/widgets/Button", () => {
|
||||
it("renders children when passed", () => {
|
||||
render(<Button>Click me</Button>);
|
||||
|
|
|
|||
|
|
@ -3,10 +3,24 @@ import "@testing-library/jest-dom";
|
|||
import { Icon } from "@design-system/headless";
|
||||
import { render, screen } from "@testing-library/react";
|
||||
import userEvent from "@testing-library/user-event";
|
||||
import EmotionHappyLineIcon from "remixicon-react/EmotionHappyLineIcon";
|
||||
|
||||
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<string, any>) => {
|
||||
return (
|
||||
<svg
|
||||
fill="currentColor"
|
||||
height={24}
|
||||
viewBox="0 0 24 24"
|
||||
width={24}
|
||||
{...props}
|
||||
>
|
||||
<path d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10Zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm-5-7h2a3 3 0 1 0 6 0h2a5 5 0 0 1-10 0Zm1-2a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3Zm8 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3Z" />
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
||||
describe("@design-system/widgets/Checkbox", () => {
|
||||
const onChangeSpy = jest.fn();
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,27 @@
|
|||
import React from "react";
|
||||
import styled from "styled-components";
|
||||
import LoaderIcon from "remixicon-react/Loader2FillIcon";
|
||||
|
||||
// Adapted from remixicon-react/Loader2FillIcon (https://github.com/Remix-Design/RemixIcon/blob/f88a51b6402562c6c2465f61a3e845115992e4c6/icons/System/loader-2-fill.svg)
|
||||
function LoaderIcon({
|
||||
className,
|
||||
...props
|
||||
}: {
|
||||
className?: string;
|
||||
[key: string]: any;
|
||||
}) {
|
||||
return (
|
||||
<svg
|
||||
{...props}
|
||||
className={className}
|
||||
fill="currentColor"
|
||||
height={24}
|
||||
viewBox="0 0 24 24"
|
||||
width={24}
|
||||
>
|
||||
<path d="M12 2a1 1 0 0 1 1 1v3a1 1 0 1 1-2 0V3a1 1 0 0 1 1-1Zm0 15a1 1 0 0 1 1 1v3a1 1 0 1 1-2 0v-3a1 1 0 0 1 1-1Zm10-5a1 1 0 0 1-1 1h-3a1 1 0 1 1 0-2h3a1 1 0 0 1 1 1ZM7 12a1 1 0 0 1-1 1H3a1 1 0 1 1 0-2h3a1 1 0 0 1 1 1Zm12.071 7.071a1 1 0 0 1-1.414 0l-2.121-2.121a1 1 0 0 1 1.414-1.414l2.121 2.12a1 1 0 0 1 0 1.415ZM8.464 8.464a1 1 0 0 1-1.414 0L4.93 6.344a1 1 0 0 1 1.414-1.415L8.464 7.05a1 1 0 0 1 0 1.414ZM4.93 19.071a1 1 0 0 1 0-1.414l2.121-2.121a1 1 0 0 1 1.414 1.414l-2.12 2.121a1 1 0 0 1-1.415 0ZM15.536 8.464a1 1 0 0 1 0-1.414l2.12-2.121a1 1 0 1 1 1.415 1.414L16.95 8.464a1 1 0 0 1-1.414 0Z" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
export const StyledSpinner = styled(LoaderIcon)`
|
||||
animation: spin 1s linear infinite;
|
||||
|
|
|
|||
|
|
@ -80,7 +80,7 @@ describe("Tests for interval functions", () => {
|
|||
// eslint-disable-next-line jest/no-disabled-tests
|
||||
it.skip("Callback should have access to outer scope variables", async () => {
|
||||
const stalker = jest.fn();
|
||||
function test() {
|
||||
function runTest() {
|
||||
let count = 0;
|
||||
const interval = evalContext.setInterval(() => {
|
||||
count++;
|
||||
|
|
@ -88,7 +88,7 @@ describe("Tests for interval functions", () => {
|
|||
}, 100);
|
||||
return interval;
|
||||
}
|
||||
const interval = test();
|
||||
const interval = runTest();
|
||||
await new Promise((resolve) => setTimeout(resolve, 300));
|
||||
clearInterval(interval);
|
||||
expect(stalker).toBeCalledTimes(2);
|
||||
|
|
|
|||
|
|
@ -9679,6 +9679,7 @@ __metadata:
|
|||
js-regex-pl: ^1.0.1
|
||||
js-sha256: ^0.9.0
|
||||
jshint: ^2.13.4
|
||||
json5: ^2.2.3
|
||||
klona: ^2.0.5
|
||||
libphonenumber-js: ^1.9.44
|
||||
linkedom: ^0.14.20
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user