@atlaskit/eslint-plugin-design-system 10.9.0 → 10.10.1

package/dist/types/rules/no-custom-icons/checks/is-imported-jsx-element.d.ts

@@ -0,0 +1,8 @@
+import type { Rule } from 'eslint';
+import { type JSXElement, type JSXIdentifier, type JSXOpeningElement } from 'eslint-codemod-utils';
+export type ImportedJSXElement = JSXElement & Rule.NodeParentExtension & {
+    openingElement: JSXOpeningElement & {
+        name: JSXIdentifier;
+    };
+};
+export declare function isImportedJSXElement(node: Rule.Node): node is ImportedJSXElement;

package/dist/types/rules/no-custom-icons/index.d.ts

@@ -0,0 +1,3 @@
+import type { Rule } from 'eslint';
+declare const rule: Rule.RuleModule;
+export default rule;

package/dist/types/rules/no-legacy-icons/helpers.d.ts

@@ -33,12 +33,6 @@ export declare const getMigrationMapObject: (iconPackage: string) => {
         library: string;
     } | undefined;
 } | null;
-/**
- * Returns the key of a legacy icon
- * @param iconPackage The name of the legacy icon package
- * @returns The unique identifier for the icon (the part after "@atlaskit/icon/glyph")
- */
-export declare const getIconKey: (iconPackage: string) => string;
 /**
  * Checks if a new icon can be auto-migrated based on guidance from the migration map
  */
@@ -46,7 +40,7 @@ export declare const canAutoMigrateNewIconBasedOnSize: (guidance?: string) => bo
 /**
  * Creates the written guidance for migrating a legacy icon to a new icon
  */
-export declare const createGuidance: (iconPackage: string, size?: Size) => string;
+export declare const createGuidance: (iconPackage: string, insideNewButton?: boolean, size?: Size) => string;
 /**
  * Checks if the color can be migrated
  * @param color String representing the color to check
@@ -61,16 +55,12 @@ export declare const findUNSAFEProp: (iconAttr: JSXAttribute, button: JSXOpening
     UNSAFE_propName: "UNSAFE_iconAfter_size" | "UNSAFE_iconBefore_size" | "UNSAFE_size" | null;
 };
 export declare const createCantMigrateUnsafeProp: (node: Node, propName: string, value: string, packageName: string, iconName: string, errors: errorsListManual) => void;
-export declare const createCantFindSuitableReplacementError: (node: Node, importSource: string, iconName: string, errors: errorsListManual) => void;
+export declare const createCantFindSuitableReplacementError: (node: Node, importSource: string, iconName: string, errors: errorsListManual, sizeIssue?: boolean) => void;
 export declare const createCantMigrateFunctionUnknownError: (node: Node, importSource: string, iconName: string, errors: errorsListManual) => void;
 export declare const createCantMigrateColorError: (node: Node, colorValue: string, errors: errorsListManual, importSource: string, iconName: string) => void;
 export declare const createCantMigrateSpreadPropsError: (node: Node, missingProps: string[], errors: errorsListManual, importSource: string, iconName: string) => void;
 export declare const createCantMigrateSizeUnknown: (node: Node, errors: errorsListManual, importSource: string, iconName: string) => void;
-export declare const createAutoMigrationError: (node: Node, importSource: string, iconName: string, newIcon: {
-    name: string;
-    type: string;
-    library: string;
-}, oldIconName: string, errors: errorsListAuto) => void;
+export declare const createAutoMigrationError: (node: Node, importSource: string, iconName: string, errors: errorsListAuto) => void;
 export declare const getLiteralStringValue: (value: any) => string | undefined;
 export declare const createHelpers: (context: Rule.RuleContext) => {
     /**

package/dist/types/rules/no-legacy-icons/index.d.ts

@@ -1,3 +1,2 @@
-import type { Rule } from 'eslint';
-declare const rule: Rule.RuleModule;
+declare const rule: import("eslint").Rule.RuleModule;
 export default rule;

package/dist/types/rules/utils/error-boundary.d.ts

@@ -1,6 +1,11 @@
-type RuleConfig = {
+import type { Rule } from 'eslint';
+type SingleRuleListener = Rule.RuleListener[keyof Rule.RuleListener] & ((...args: any[]) => void);
+type ErrorBoundaryConfig = undefined | boolean | {
     failSilently?: boolean;
-    shouldEnforceFallbacks?: boolean;
+} | {
+    config: {
+        failSilently?: boolean;
+    };
 };
 /**
  * ESLint rules should NEVER throw exceptions, because that breaks the VSCode ESLint server
@@ -9,7 +14,5 @@ type RuleConfig = {
  * It also breaks CI, which was the reason this error boundary was added. It's a final
  * catch all.
  */
-export declare const errorBoundary: (func: () => void, { config }: {
-    config: RuleConfig;
-}) => void;
+export declare function errorBoundary<R extends SingleRuleListener | Rule.RuleListener>(ruleOrRules: R, config?: ErrorBoundaryConfig): R;
 export {};

package/dist/types-ts4.5/index.codegen.d.ts

@@ -9,6 +9,7 @@ export declare const configs: {
             '@atlaskit/design-system/icon-label': string;
             '@atlaskit/design-system/no-banned-imports': string;
             '@atlaskit/design-system/no-css-tagged-template-expression': string;
+            '@atlaskit/design-system/no-custom-icons': string;
             '@atlaskit/design-system/no-deprecated-apis': string;
             '@atlaskit/design-system/no-deprecated-design-token-usage': string;
             '@atlaskit/design-system/no-deprecated-imports': string;

package/dist/types-ts4.5/presets/all.codegen.d.ts

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::9bb5329713677543f16019954484ae2f>>
+ * @codegen <<SignedSource::ab43b6e1a867d07b9a27eae78d48834a>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 declare const _default: {
@@ -12,6 +12,7 @@ declare const _default: {
         '@atlaskit/design-system/icon-label': string;
         '@atlaskit/design-system/no-banned-imports': string;
         '@atlaskit/design-system/no-css-tagged-template-expression': string;
+        '@atlaskit/design-system/no-custom-icons': string;
         '@atlaskit/design-system/no-deprecated-apis': string;
         '@atlaskit/design-system/no-deprecated-design-token-usage': string;
         '@atlaskit/design-system/no-deprecated-imports': string;

package/dist/types-ts4.5/rules/index.codegen.d.ts

@@ -5,6 +5,7 @@ declare const _default: {
     'icon-label': import("eslint").Rule.RuleModule;
     'no-banned-imports': import("eslint").Rule.RuleModule;
     'no-css-tagged-template-expression': import("eslint").Rule.RuleModule;
+    'no-custom-icons': import("eslint").Rule.RuleModule;
     'no-deprecated-apis': import("@typescript-eslint/utils/dist/ts-eslint").RuleModule<string, [
         {
             deprecatedConfig: import("./utils/types").DeprecatedConfig;

package/dist/types-ts4.5/rules/no-custom-icons/checks/has-prop.d.ts

@@ -0,0 +1,2 @@
+import { type JSXElement } from 'eslint-codemod-utils';
+export declare function hasProp(node: JSXElement, propName: string): boolean;

package/dist/types-ts4.5/rules/no-custom-icons/checks/is-from-import-source.d.ts

@@ -0,0 +1,8 @@
+import type { Rule } from 'eslint';
+import type { ImportDeclaration } from 'eslint-codemod-utils';
+import { type ImportedJSXElement } from './is-imported-jsx-element';
+export declare function createIsFromImportSourceFor(...importSources: (string | RegExp)[]): {
+    (node: Rule.Node): node is ImportedJSXElement;
+    importDeclarationHook(node: ImportDeclaration): void;
+    getImportSource(node: Rule.Node): string;
+};

package/dist/types-ts4.5/rules/no-custom-icons/checks/is-imported-jsx-element.d.ts

@@ -0,0 +1,8 @@
+import type { Rule } from 'eslint';
+import { type JSXElement, type JSXIdentifier, type JSXOpeningElement } from 'eslint-codemod-utils';
+export type ImportedJSXElement = JSXElement & Rule.NodeParentExtension & {
+    openingElement: JSXOpeningElement & {
+        name: JSXIdentifier;
+    };
+};
+export declare function isImportedJSXElement(node: Rule.Node): node is ImportedJSXElement;

package/dist/types-ts4.5/rules/no-custom-icons/index.d.ts

@@ -0,0 +1,3 @@
+import type { Rule } from 'eslint';
+declare const rule: Rule.RuleModule;
+export default rule;

package/dist/types-ts4.5/rules/no-legacy-icons/helpers.d.ts

@@ -33,12 +33,6 @@ export declare const getMigrationMapObject: (iconPackage: string) => {
         library: string;
     } | undefined;
 } | null;
-/**
- * Returns the key of a legacy icon
- * @param iconPackage The name of the legacy icon package
- * @returns The unique identifier for the icon (the part after "@atlaskit/icon/glyph")
- */
-export declare const getIconKey: (iconPackage: string) => string;
 /**
  * Checks if a new icon can be auto-migrated based on guidance from the migration map
  */
@@ -46,7 +40,7 @@ export declare const canAutoMigrateNewIconBasedOnSize: (guidance?: string) => bo
 /**
  * Creates the written guidance for migrating a legacy icon to a new icon
  */
-export declare const createGuidance: (iconPackage: string, size?: Size) => string;
+export declare const createGuidance: (iconPackage: string, insideNewButton?: boolean, size?: Size) => string;
 /**
  * Checks if the color can be migrated
  * @param color String representing the color to check
@@ -61,16 +55,12 @@ export declare const findUNSAFEProp: (iconAttr: JSXAttribute, button: JSXOpening
     UNSAFE_propName: "UNSAFE_iconAfter_size" | "UNSAFE_iconBefore_size" | "UNSAFE_size" | null;
 };
 export declare const createCantMigrateUnsafeProp: (node: Node, propName: string, value: string, packageName: string, iconName: string, errors: errorsListManual) => void;
-export declare const createCantFindSuitableReplacementError: (node: Node, importSource: string, iconName: string, errors: errorsListManual) => void;
+export declare const createCantFindSuitableReplacementError: (node: Node, importSource: string, iconName: string, errors: errorsListManual, sizeIssue?: boolean) => void;
 export declare const createCantMigrateFunctionUnknownError: (node: Node, importSource: string, iconName: string, errors: errorsListManual) => void;
 export declare const createCantMigrateColorError: (node: Node, colorValue: string, errors: errorsListManual, importSource: string, iconName: string) => void;
 export declare const createCantMigrateSpreadPropsError: (node: Node, missingProps: string[], errors: errorsListManual, importSource: string, iconName: string) => void;
 export declare const createCantMigrateSizeUnknown: (node: Node, errors: errorsListManual, importSource: string, iconName: string) => void;
-export declare const createAutoMigrationError: (node: Node, importSource: string, iconName: string, newIcon: {
-    name: string;
-    type: string;
-    library: string;
-}, oldIconName: string, errors: errorsListAuto) => void;
+export declare const createAutoMigrationError: (node: Node, importSource: string, iconName: string, errors: errorsListAuto) => void;
 export declare const getLiteralStringValue: (value: any) => string | undefined;
 export declare const createHelpers: (context: Rule.RuleContext) => {
     /**

package/dist/types-ts4.5/rules/no-legacy-icons/index.d.ts

@@ -1,3 +1,2 @@
-import type { Rule } from 'eslint';
-declare const rule: Rule.RuleModule;
+declare const rule: import("eslint").Rule.RuleModule;
 export default rule;

package/dist/types-ts4.5/rules/utils/error-boundary.d.ts

@@ -1,6 +1,11 @@
-type RuleConfig = {
+import type { Rule } from 'eslint';
+type SingleRuleListener = Rule.RuleListener[keyof Rule.RuleListener] & ((...args: any[]) => void);
+type ErrorBoundaryConfig = undefined | boolean | {
     failSilently?: boolean;
-    shouldEnforceFallbacks?: boolean;
+} | {
+    config: {
+        failSilently?: boolean;
+    };
 };
 /**
  * ESLint rules should NEVER throw exceptions, because that breaks the VSCode ESLint server
@@ -9,7 +14,5 @@ type RuleConfig = {
  * It also breaks CI, which was the reason this error boundary was added. It's a final
  * catch all.
  */
-export declare const errorBoundary: (func: () => void, { config }: {
-    config: RuleConfig;
-}) => void;
+export declare function errorBoundary<R extends SingleRuleListener | Rule.RuleListener>(ruleOrRules: R, config?: ErrorBoundaryConfig): R;
 export {};

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@atlaskit/eslint-plugin-design-system",
 	"description": "The essential plugin for use with the Atlassian Design System.",
-	"version": "10.9.0",
+	"version": "10.10.1",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
 	"publishConfig": {
@@ -67,7 +67,7 @@
 		"jscodeshift": "^0.13.0",
 		"outdent": "^0.5.0",
 		"react": "^16.8.0",
-		"ts-jest": "26.5.6",
+		"ts-jest": "29.1.2",
 		"ts-node": "^10.9.1",
 		"tsconfig-paths": "^4.2.0",
 		"typescript": "~5.4.2"

package/constellation/consistent-css-prop-usage/usage.mdx

@@ -1,210 +0,0 @@
-# consistent-css-prop-usage
-
-Ensures consistency with css prop usage.
-
-## Rationale
-
-Every product should be defining styles in the same way, using the same tools, enforced by the same
-linting rules, which we can then all evolve and scale together.
-
-## How the rule works
-
-This rule checks for the following cases:
-
-- Styles should not be defined inline; it should instead be in a standalone variable.
-  - The exception for this is style composition (e.g. `<div css={[baseStyles, moreStyles]} />`),
-    which is a way to combine styles from two variables.
-- Styles must be wrapped in a `css` function call.
-- Styles must be defined in the same file as their usage, and not be imported.
-- Styles should not contain spread operators (e.g. `css({ ...spreadStyles })`).
-- Styles must all be defined at the top of the file, or at the bottom of the file.
-
-This rule also has an autofixer that enforces and fixes the code (where practical) to meet the above
-requirements.
-
-All the above can also work for custom `css` functions, such as `xcss`
-(https://atlassian.design/components/primitives/xcss/).
-
-This rule has several options - see below.
-
-## Examples
-
-### Incorrect
-
-**Calling a css/xcss function or direct objects inside the JSX attribute.**
-
-```js
-function Button({ children }) {
-  return <div css={css({...})}>{children}</div>;
-                   ^^^^^^^ css function call used inline (performance issue)
-}
-```
-
-**Inserting a non css-function based object identifier into a css JSX attribute.**
-
-```js
-const container = {
-      ^^^^^^^^^ should be a css function call
-  zIndex: 10,
-};
-
-function Button({ children }) {
-  return <button css={container}>{children}</button>;
-}
-```
-
-**Importing styles from another file.**
-
-```js
-import { container } from './styles';
-         ^^^^^^^^^ styles should be local, not shared
-
-function Button({ children }) {
-  return <button css={container}>{children}</button>;
-}
-```
-
-**Nesting styles with objects instead of arrays.**
-
-```js
-const baseContainerStyles = css({
-  zIndex: 5,
-});
-
-const containerStyles = css({
-  ...baseContainerStyles,
-  ^^^^^^^^^^^^^^^^^^^^^^ compose styles by providing an array to the css call instead (see example below)
-  zIndex: 7,
-});
-
-function Button({ children }) {
-  return <button css={containerStyles}>{children}</button>;
-}
-```
-
-### Correct
-
-**Using the css() function to create a style object and passing it as a variable into the css={...}
-JSX attribute.**
-
-With the following options turned on:
-
-- cssFunctions = ['css']
-- stylesPlacement = 'top'
-
-```js
-const containerStyles = css({
-	zIndex: 1,
-});
-
-function Button({ children }) {
-	return <button css={containerStyles}>{children}</button>;
-}
-```
-
-**Technically correct usage of the cssMap function.**
-
-With the following options turned on:
-
-- cssFunctions = ['css']
-- stylesPlacement = 'top'
-
-```js
-const borderStyles = cssMap({
-  'solid': '1px solid';
-  'none': '0px';
-})
-
-function Button({ children }) {
-  return <button css={borderStyles[solid]}>{children}</button>;
-}
-```
-
-**Create composite styles with arrays, not objects.**
-
-With the following options turned on:
-
-- cssFunctions = ['css']
-- stylesPlacement = 'bottom'
-
-```js
-function Button({ children }) {
-	return <button css={[baseContainerStyles, containerStyles]}>{children}</button>;
-}
-
-const baseContainerStyles = css({
-	zIndex: 5,
-});
-
-const containerStyles = css({
-	zIndex: 7,
-});
-```
-
-**Ternaries can be used inline**
-
-```js
-const baseStyles = css({ color: token('color.text.primary') });
-const disabledStyles = css({ color: token('color.text.disabled') });
-
-<div css={props.disabled ? disabledStyles : baseStyles}></div>;
-```
-
-## Options
-
-This rule comes with options to support different repository configurations.
-
-### cssFunctions
-
-An array of function names the linting rule should target. Defaults to `['css', 'xcss']`. The
-functionality of `cssMap` will be linted regardless of the configuration of `cssFunctions`, as it
-can be used with either attribute.
-
-### stylesPlacement
-
-Either `top` or `bottom`.
-
-The rule prevents inline styles from being created. This option defines what the error message
-should say: "(...) styles at the top (...)" or "(...) styles at the bottom (...)". Defaults to
-`top`.
-
-### cssImportSource
-
-When auto-fixing the contents of the `css` attribute, this rule will wrap CSS styles in a `css(...)`
-function call or ``css`...` `` template expression, and it will add an import declaration for the
-`css` function. `cssImportSource` is a string that determines what package `css` should be imported
-from.
-
-This is `@compiled/react` by default.
-
-### xcssImportSource
-
-When auto-fixing the contents of the `xcss` attribute, this rule will wrap XCSS styles in a
-`xcss(...)` function call, and it will add an import declaration for the `xcss` function.
-`xcssImportSource` is a string that determines what package `xcss` should be imported from.
-
-This is `@atlaskit/primitives` by default.
-
-### excludeReactComponents
-
-Whether to exclude `css` attributes of React components from being affected by this ESLint rule. We
-assume that an element is a React component if its name starts with a capital letter, e.g.
-`<Button />`.
-
-This is `false` by default.
-
-### shouldAlwaysCheckXcss
-
-Overrides `excludeReactComponents` specifically for the `xcss` prop.
-
-This means that even if `excludeReactComponents` is `true`, you can still lint the `xcss` prop by
-setting `shouldAlwaysCheckXcss` to `true`.
-
-This is `false` by default.
-
-### autoFix
-
-When set to `true`, this rule will turn on the autofixer. Set this to `false` if you do not want the
-autofixers to run.
-
-This is `true` by default.

package/constellation/ensure-design-token-usage/usage.mdx

@@ -1,77 +0,0 @@
-# ensure-design-token-usage
-
-Using design tokens results in a harmonious experience for end users whilst providing theming and
-consistency. All experiences must use color tokens otherwise when switching between themes,
-unexpected incidents can occur where not all of the UI is themed. Space, and shape tokens are
-strongly recommended to further align our experiences and make future changes easier.
-
-## Examples
-
-Using anything other than design tokens such as hardcoded values or legacy theme colors will be
-considered violations.
-
-### Incorrect
-
-```js
-import { e100 } from '@atlaskit/theme/elevation';
-import { B100 } from '@atlaskit/theme/colors';
-
-css({ color: 'red' });
-              ^^^
-css({ boxShadow: '0px 1px 1px #161A1D32' });
-                              ^^^^^^^^^
-css`${e100};`;
-      ^^^^
-css({ color: B100 });
-             ^^^^
-```
-
-### Correct
-
-```js
-import { token } from '@atlaskit/tokens';
-
-css({ color: token('color.text.danger') });
-
-css({ boxShadow: token('elevation.shadow.card') });
-```
-
-### Incorrect
-
-```js
-css({ padding: '16px' });
-                ^^^
-css({ margin: gridSize() });
-              ^^^^^^^^^^
-```
-
-### Correct
-
-```js
-import { token } from '@atlaskit/tokens';
-
-css({ padding: token('space.100') });
-```
-
-## Options
-
-This rule comes with options to aid in migrating to design tokens.
-
-### domains
-
-An array specifiying which token domains to lint against (`color`, `spacing`, `shape`). Defaults to
-[`'color'`] if not provided.
-
-### applyImport
-
-When `true`, the rule when automatically add imports to the `@atlaskit/tokens` package where tokens
-are auto-fixed. Defaults to `true` if not provided.
-
-### shouldEnforceFallbacks
-
-When `true` the rule will add in stub fallbacks when choosing a suggestion in your IDE. Defaults to
-`false` if not provided.
-
-### exceptions
-
-An array specifying strings to ingore when linting.

package/constellation/ensure-design-token-usage-preview/usage.mdx

@@ -1,6 +0,0 @@
-# ensure-design-token-usage/preview
-
-This rule is a clone of `ensure-design-token-usage` and is intended to allow you to set some domains
-to `warn` before they are set to `error` in the main rule.
-
-See `ensure-design-token-usage` for full usage documentation.

package/constellation/icon-label/usage.mdx

@@ -1,41 +0,0 @@
-# icon-label
-
-Icon labels are used to describe what the icon is so the visually impaired can be described what the
-UI element is. There are cases where icons should have labels as well as cases where they shouldn't
-be labelled.
-
-## Examples
-
-This rule will find violations for when an icon label is or isn't needed when composed with other
-Design System components.
-
-### Incorrect
-
-```js
-import ActivityIcon from '@atlaskit/icon/glyph/activity'
-
-<ActivityIcon>
-^^^^^^^^^^^^^^ missing `label` prop
-
-<Button iconLeft={<ActivityIcon label="">} />
-                                ^^^^^ label should be defined
-
-<ButtonItem iconBefore={<ActivityIcon label="">}>
-                                      ^^^^^ label should not be defined
-  My activity
-</ButtonItem>
-```
-
-### Correct
-
-```js
-import ActivityIcon from '@atlaskit/icon/glyph/activity'
-
-<ActivityIcon label="Activity">
-
-<Button iconLeft={<ActivityIcon label="Activity">} />
-
-<ButtonItem iconBefore={<ActivityIcon label="">}>
-  My activity
-</ButtonItem>
-```

package/constellation/index/props.mdx

@@ -1,30 +0,0 @@
-Use the recommended config to get reasonable defaults recommended by the Atlassian Design System:
-
-```diff
-module.exports = {
-  extends: [
-+    'plugin:@atlaskit/design-system/recommended',
-  ],
-};
-```
-
-We don't recommended maintaining your own configuration. If you do not use our config you will need
-to specify individual rules and configuration. Add the plugin to your `.eslintrc.js` file.
-
-```diff
-module.exports = {
-  plugins: [
-+    '@atlaskit/design-system',
-  ],
-};
-```
-
-Enable the rules that you would like to use.
-
-```diff
-module.exports = {
-  rules: [
-+    '@atlaskit/design-system/no-deprecated-apis': 'error',
-  ],
-};
-```