@atlaskit/eslint-plugin-design-system 9.6.0 → 10.0.0

package/dist/types-ts4.5/common/token-maps.partial.d.ts

@@ -0,0 +1,65 @@
+/**
+ * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
+ * @codegen <<SignedSource::30c84f908843af1f250860b6f3deeea0>>
+ * @codegenId spacing
+ * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen-token-maps
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-spacing.tsx <<SignedSource::55622b91aca9b3afac4bce440f222b71>>
+ */
+export declare const positiveSpaceMap: {
+    '0px': string;
+    '2px': string;
+    '4px': string;
+    '6px': string;
+    '8px': string;
+    '12px': string;
+    '16px': string;
+    '20px': string;
+    '24px': string;
+    '32px': string;
+    '40px': string;
+    '48px': string;
+    '64px': string;
+    '80px': string;
+};
+export type Space = keyof typeof positiveSpaceMap;
+export declare const negativeSpaceMap: {
+    '-2px': string;
+    '-4px': string;
+    '-6px': string;
+    '-8px': string;
+    '-12px': string;
+    '-16px': string;
+    '-20px': string;
+    '-24px': string;
+    '-32px': string;
+};
+export type NegativeSpace = keyof typeof negativeSpaceMap;
+export declare const allSpaceMap: {
+    '-2px': string;
+    '-4px': string;
+    '-6px': string;
+    '-8px': string;
+    '-12px': string;
+    '-16px': string;
+    '-20px': string;
+    '-24px': string;
+    '-32px': string;
+    '0px': string;
+    '2px': string;
+    '4px': string;
+    '6px': string;
+    '8px': string;
+    '12px': string;
+    '16px': string;
+    '20px': string;
+    '24px': string;
+    '32px': string;
+    '40px': string;
+    '48px': string;
+    '64px': string;
+    '80px': string;
+};
+export type AllSpace = keyof typeof allSpaceMap;
+/**
+ * @codegenEnd
+ */

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

@@ -16,7 +16,8 @@ export declare const configs: {
             '@atlaskit/design-system/no-empty-styled-expression': string;
             '@atlaskit/design-system/no-exported-css': string;
             '@atlaskit/design-system/no-exported-keyframes': string;
-            '@atlaskit/design-system/no-html-button-element': string;
+            '@atlaskit/design-system/no-html-anchor': string;
+            '@atlaskit/design-system/no-html-button': string;
             '@atlaskit/design-system/no-invalid-css-map': string;
             '@atlaskit/design-system/no-keyframes-tagged-template-expression': string;
             '@atlaskit/design-system/no-margin': string;
@@ -32,6 +33,7 @@ export declare const configs: {
             '@atlaskit/design-system/use-heading': string;
             '@atlaskit/design-system/use-heading-level-in-spotlight-card': string;
             '@atlaskit/design-system/use-href-in-link-item': string;
+            '@atlaskit/design-system/use-popup-label': string;
             '@atlaskit/design-system/use-primitives': string;
             '@atlaskit/design-system/use-primitives-text': string;
             '@atlaskit/design-system/use-tokens-space': string;
@@ -62,6 +64,7 @@ export declare const configs: {
             '@atlaskit/design-system/use-drawer-label': string;
             '@atlaskit/design-system/use-heading-level-in-spotlight-card': string;
             '@atlaskit/design-system/use-href-in-link-item': string;
+            '@atlaskit/design-system/use-popup-label': string;
             '@atlaskit/design-system/use-visually-hidden': 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::1ab11547db880eba1206f334a9b2150f>>
+ * @codegen <<SignedSource::0be7639a95bf4c9bbfe00154d8193477>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 declare const _default: {
@@ -19,7 +19,8 @@ declare const _default: {
         '@atlaskit/design-system/no-empty-styled-expression': string;
         '@atlaskit/design-system/no-exported-css': string;
         '@atlaskit/design-system/no-exported-keyframes': string;
-        '@atlaskit/design-system/no-html-button-element': string;
+        '@atlaskit/design-system/no-html-anchor': string;
+        '@atlaskit/design-system/no-html-button': string;
         '@atlaskit/design-system/no-invalid-css-map': string;
         '@atlaskit/design-system/no-keyframes-tagged-template-expression': string;
         '@atlaskit/design-system/no-margin': string;
@@ -35,6 +36,7 @@ declare const _default: {
         '@atlaskit/design-system/use-heading': string;
         '@atlaskit/design-system/use-heading-level-in-spotlight-card': string;
         '@atlaskit/design-system/use-href-in-link-item': string;
+        '@atlaskit/design-system/use-popup-label': string;
         '@atlaskit/design-system/use-primitives': string;
         '@atlaskit/design-system/use-primitives-text': string;
         '@atlaskit/design-system/use-tokens-space': string;

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

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::05b4fe8f97edc4f7e46ded52b4917037>>
+ * @codegen <<SignedSource::73a3666b244b58cc221eebcda071161d>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 declare const _default: {
@@ -26,6 +26,7 @@ declare const _default: {
         '@atlaskit/design-system/use-drawer-label': string;
         '@atlaskit/design-system/use-heading-level-in-spotlight-card': string;
         '@atlaskit/design-system/use-href-in-link-item': string;
+        '@atlaskit/design-system/use-popup-label': string;
         '@atlaskit/design-system/use-visually-hidden': string;
     };
 };

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

@@ -20,7 +20,8 @@ declare const _default: {
     'no-empty-styled-expression': import("eslint").Rule.RuleModule;
     'no-exported-css': import("eslint").Rule.RuleModule;
     'no-exported-keyframes': import("eslint").Rule.RuleModule;
-    'no-html-button-element': import("eslint").Rule.RuleModule;
+    'no-html-anchor': import("eslint").Rule.RuleModule;
+    'no-html-button': import("eslint").Rule.RuleModule;
     'no-invalid-css-map': import("eslint").Rule.RuleModule;
     'no-keyframes-tagged-template-expression': import("eslint").Rule.RuleModule;
     'no-margin': import("eslint").Rule.RuleModule;
@@ -36,6 +37,7 @@ declare const _default: {
     'use-heading': import("eslint").Rule.RuleModule;
     'use-heading-level-in-spotlight-card': import("eslint").Rule.RuleModule;
     'use-href-in-link-item': import("eslint").Rule.RuleModule;
+    'use-popup-label': import("eslint").Rule.RuleModule;
     'use-primitives': import("eslint").Rule.RuleModule;
     'use-primitives-text': import("eslint").Rule.RuleModule;
     'use-tokens-space': import("eslint").Rule.RuleModule;

package/dist/types-ts4.5/rules/no-html-anchor/node-types/index.d.ts

@@ -0,0 +1,2 @@
+export { StyledComponent } from './styled-component';
+export { JSXElement } from './jsx-element';

package/dist/types-ts4.5/rules/no-html-anchor/node-types/jsx-element/index.d.ts

@@ -0,0 +1,8 @@
+import type { Rule } from 'eslint';
+interface MetaData {
+    context: Rule.RuleContext;
+}
+export declare const JSXElement: {
+    lint(node: Rule.Node, { context }: MetaData): void;
+};
+export {};

package/dist/types-ts4.5/rules/no-html-anchor/node-types/styled-component/get-styled-component-call.d.ts

@@ -0,0 +1,6 @@
+import type { Rule } from 'eslint';
+import { type VariableDeclarator } from 'eslint-codemod-utils';
+/**
+ * Returns a styled component
+ */
+export declare const getStyledComponentCall: (node: Rule.Node) => (VariableDeclarator & Rule.NodeParentExtension) | undefined;

package/dist/types-ts4.5/rules/no-html-anchor/node-types/styled-component/index.d.ts

@@ -0,0 +1,8 @@
+import type { Rule } from 'eslint';
+interface MetaData {
+    context: Rule.RuleContext;
+}
+export declare const StyledComponent: {
+    lint(node: Rule.Node, { context }: MetaData): void;
+};
+export {};

package/dist/types-ts4.5/rules/no-html-anchor/node-types/supported.d.ts

@@ -0,0 +1,7 @@
+import { type EslintNode } from 'eslint-codemod-utils';
+/**
+ * Determines if the given JSX element is a supported element to lint with this rule.
+ */
+export declare function isSupportedForLint(jsxNode: EslintNode, elementName?: string): jsxNode is Extract<EslintNode, {
+    type: 'JSXElement';
+}>;

package/dist/types-ts4.5/rules/no-html-anchor/utils/get-jsx-element-by-name.d.ts

@@ -0,0 +1,6 @@
+import type { Rule, Scope } from 'eslint';
+import { type JSXOpeningElement } from 'eslint-codemod-utils';
+/**
+ * Given a component name finds its JSX usage
+ */
+export declare const getJsxElementByName: (componentName: string, scope: Scope.Scope) => (JSXOpeningElement & Rule.NodeParentExtension) | undefined;

package/dist/types-ts4.5/rules/no-html-button/node-types/index.d.ts

@@ -0,0 +1,2 @@
+export { StyledComponent } from './styled-component';
+export { JSXElement } from './jsx-element';

package/dist/types-ts4.5/rules/no-html-button/node-types/jsx-element/index.d.ts

@@ -0,0 +1,8 @@
+import type { Rule } from 'eslint';
+interface MetaData {
+    context: Rule.RuleContext;
+}
+export declare const JSXElement: {
+    lint(node: Rule.Node, { context }: MetaData): void;
+};
+export {};

package/dist/types-ts4.5/rules/no-html-button/node-types/styled-component/get-styled-component-call.d.ts

@@ -0,0 +1,6 @@
+import type { Rule } from 'eslint';
+import { type VariableDeclarator } from 'eslint-codemod-utils';
+/**
+ * Returns a styled component
+ */
+export declare const getStyledComponentCall: (node: Rule.Node) => (VariableDeclarator & Rule.NodeParentExtension) | undefined;

package/dist/types-ts4.5/rules/no-html-button/node-types/styled-component/index.d.ts

@@ -0,0 +1,8 @@
+import type { Rule } from 'eslint';
+interface MetaData {
+    context: Rule.RuleContext;
+}
+export declare const StyledComponent: {
+    lint(node: Rule.Node, { context }: MetaData): void;
+};
+export {};

package/dist/types-ts4.5/rules/no-html-button/node-types/supported.d.ts

@@ -0,0 +1,7 @@
+import { type EslintNode } from 'eslint-codemod-utils';
+/**
+ * Determines if the given JSX element is a supported element to lint with this rule.
+ */
+export declare function isSupportedForLint(jsxNode: EslintNode, elementName?: string): jsxNode is Extract<EslintNode, {
+    type: 'JSXElement';
+}>;

package/dist/types-ts4.5/rules/no-html-button/utils/get-jsx-element-by-name.d.ts

@@ -0,0 +1,6 @@
+import type { Rule, Scope } from 'eslint';
+import { type JSXOpeningElement } from 'eslint-codemod-utils';
+/**
+ * Given a component name finds its JSX usage
+ */
+export declare const getJsxElementByName: (componentName: string, scope: Scope.Scope) => (JSXOpeningElement & Rule.NodeParentExtension) | undefined;

package/dist/types-ts4.5/rules/use-popup-label/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/use-tokens-typography/utils.d.ts

@@ -127,39 +127,6 @@ export declare const fontFamilyTokens: ({
     name: string;
     path: string[];
     cleanName: string;
-} | {
-    attributes: {
-        group: string;
-        state: string;
-        introduced: string;
-        deprecated: string;
-        description: string;
-        responsiveSmallerVariant?: undefined;
-    };
-    value: string;
-    filePath: string;
-    isSource: boolean;
-    original: {
-        attributes: {
-            group: string;
-            state: string;
-            introduced: string;
-            deprecated: string;
-            description: string;
-            responsiveSmallerVariant?: undefined;
-        };
-        value: {
-            fontWeight: string;
-            fontSize: string;
-            lineHeight: string;
-            fontFamily: string;
-            fontStyle: string;
-            letterSpacing: string;
-        };
-    };
-    name: string;
-    path: string[];
-    cleanName: string;
 } | {
     attributes: {
         group: string;

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": "9.6.0",
+  "version": "10.0.0",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
   "publishConfig": {
@@ -53,6 +53,7 @@
     "semver": "^7.5.2"
   },
   "devDependencies": {
+    "@af/formatting": "*",
     "@atlaskit/ds-lib": "^2.3.0",
     "@atlaskit/theme": "^12.7.0",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
@@ -66,7 +67,6 @@
     "eslint": "^8.49.0",
     "jscodeshift": "^0.13.0",
     "outdent": "^0.5.0",
-    "prettier": "^2.8.0",
     "react": "^16.8.0",
     "ts-jest": "26.5.6",
     "ts-node": "^10.9.1",
@@ -75,7 +75,8 @@
   },
   "scripts": {
     "ak-postbuild": "cp -r configs dist",
-    "codegen": "ts-node -r tsconfig-paths/register ./scripts/codegen.tsx"
+    "codegen": "ts-node -r tsconfig-paths/register ./scripts/codegen.tsx",
+    "codegen-token-maps": "ts-node -r tsconfig-paths/register ./scripts/token-maps/codegen-token-maps.tsx"
   },
   "techstack": {
     "@atlassian/frontend": {

package/constellation/no-html-button-element/usage.mdx

@@ -1,26 +0,0 @@
-# no-html-button-element
-
-HTML `<button>` elements should not be used. They can be replaced using the Button component or the Pressable primitive, which are ready made solutions made by the Atlassian Design System Team. This benefits analytics as they are fitted with tracking by default and provide safe access to design tokens for styling.
-
-## Examples
-
-This rule marks code as violations when it can be replaced with either a Button component or a Pressable primitive.
-
-### Incorrect
-
-```js
-<button>Click me</button>
-^^^^^^^^^^^^^^^^^^^^^^^^^
-```
-
-### Correct
-
-```js
-<Button>Click me</Button>
-^^^^^^^^^^^^^^^^^^^^^^^^^
-```
-
-```js
-<Pressable>Click me</Pressable>
-^^^^^^^^^^^^^^^^^^^^^^^^^
-```

package/dist/cjs/rules/no-html-button-element/index.js

@@ -1,107 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _eslintCodemodUtils = require("eslint-codemod-utils");
-var _createRule = require("../utils/create-rule");
-var _utils = require("./utils");
-// eslint-disable-next-line import/no-extraneous-dependencies
-
-var buttonDocsUrl = 'https://atlassian.design/components/button';
-var pressableDocsUrl = 'https://atlassian.design/components/primitives/pressable/';
-var rule = (0, _createRule.createLintRule)({
-  meta: {
-    name: 'no-html-button-element',
-    type: 'suggestion',
-    hasSuggestions: false,
-    docs: {
-      description: 'Prevent direct usage of HTML button elements and enforce usage of Button and Pressable.',
-      recommended: false,
-      severity: 'warn'
-    },
-    messages: {
-      noHtmlButtonElement: "This \"{{element}}\" should be replaced with a Button component. If beyond the capabilities of the Button component, use the Pressable primitive. See ".concat(buttonDocsUrl, " and ").concat(pressableDocsUrl, " for guidance.")
-    }
-  },
-  create: function create(context) {
-    return {
-      // Look for <button> HTML elements
-      // Look for styled calls/templates - styled.button(...)
-      JSXOpeningElement: function JSXOpeningElement(node) {
-        if (!(0, _eslintCodemodUtils.isNodeOfType)(node, 'JSXOpeningElement')) {
-          return;
-        }
-        if (!(0, _eslintCodemodUtils.isNodeOfType)(node.name, 'JSXIdentifier')) {
-          return;
-        }
-        var suggest = (0, _utils.shouldSuggest)(node === null || node === void 0 ? void 0 : node.parent);
-        if (suggest) {
-          context.report({
-            node: node,
-            messageId: 'noHtmlButtonElement',
-            data: {
-              element: node.name.name
-            }
-          });
-        }
-      },
-      // styled.button`` | styled2.button`` | styled.button()
-      'MemberExpression[object.name="styled"],MemberExpression[object.name="styled2"]': function MemberExpressionObjectNameStyledMemberExpressionObjectNameStyled2(node) {
-        if (!(0, _eslintCodemodUtils.isNodeOfType)(node, 'MemberExpression')) {
-          return;
-        }
-
-        // styled.button``
-        if ((0, _eslintCodemodUtils.isNodeOfType)(node.property, 'Identifier')) {
-          if (node.property.name === 'button') {
-            var styledIdentifier = node.object.name;
-            var elementName = node.property.name;
-
-            // Including the `styled.` portion in the message to help makers understand it's not just the `button` element that should be replaced
-            var reportName = "".concat(styledIdentifier, ".").concat(elementName); // styled.button
-
-            context.report({
-              node: node,
-              messageId: 'noHtmlButtonElement',
-              data: {
-                element: reportName
-              }
-            });
-          }
-        }
-      },
-      // styled(X)``
-      'CallExpression[callee.name="styled"]': function CallExpressionCalleeNameStyled(node) {
-        if (!(0, _eslintCodemodUtils.isNodeOfType)(node, 'CallExpression')) {
-          return;
-        }
-
-        // styled('button')`` - We only care about 'button', ignore extending other components
-        if ((0, _eslintCodemodUtils.isNodeOfType)(node.arguments[0], 'Literal')) {
-          var argValue = node.arguments[0].raw;
-          if (typeof argValue === 'string') {
-            var suggest = argValue.replaceAll("'", '') === 'button';
-            if (suggest) {
-              var styledIdentifier = node.callee.name;
-              var elementName = argValue;
-
-              // Including the `styled()` portion in the message to help makers understand it's not just the `button` element that should be replaced
-              var reportName = "".concat(styledIdentifier, "(").concat(elementName, ")"); // styled('button')
-
-              context.report({
-                node: node,
-                messageId: 'noHtmlButtonElement',
-                data: {
-                  element: reportName
-                }
-              });
-            }
-          }
-        }
-      }
-    };
-  }
-});
-var _default = exports.default = rule;

package/dist/cjs/rules/no-html-button-element/utils.js

@@ -1,18 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.shouldSuggest = void 0;
-var isButtonHtmlElement = function isButtonHtmlElement(node) {
-  return node.openingElement.name.name === 'button';
-};
-var shouldSuggest = exports.shouldSuggest = function shouldSuggest(node) {
-  if (!node) {
-    return false;
-  }
-  if (!isButtonHtmlElement(node)) {
-    return false;
-  }
-  return true;
-};

package/dist/es2019/rules/no-html-button-element/index.js

@@ -1,101 +0,0 @@
-// eslint-disable-next-line import/no-extraneous-dependencies
-
-import { isNodeOfType } from 'eslint-codemod-utils';
-import { createLintRule } from '../utils/create-rule';
-import { shouldSuggest } from './utils';
-const buttonDocsUrl = 'https://atlassian.design/components/button';
-const pressableDocsUrl = 'https://atlassian.design/components/primitives/pressable/';
-const rule = createLintRule({
-  meta: {
-    name: 'no-html-button-element',
-    type: 'suggestion',
-    hasSuggestions: false,
-    docs: {
-      description: 'Prevent direct usage of HTML button elements and enforce usage of Button and Pressable.',
-      recommended: false,
-      severity: 'warn'
-    },
-    messages: {
-      noHtmlButtonElement: `This "{{element}}" should be replaced with a Button component. If beyond the capabilities of the Button component, use the Pressable primitive. See ${buttonDocsUrl} and ${pressableDocsUrl} for guidance.`
-    }
-  },
-  create(context) {
-    return {
-      // Look for <button> HTML elements
-      // Look for styled calls/templates - styled.button(...)
-      JSXOpeningElement(node) {
-        if (!isNodeOfType(node, 'JSXOpeningElement')) {
-          return;
-        }
-        if (!isNodeOfType(node.name, 'JSXIdentifier')) {
-          return;
-        }
-        const suggest = shouldSuggest(node === null || node === void 0 ? void 0 : node.parent);
-        if (suggest) {
-          context.report({
-            node: node,
-            messageId: 'noHtmlButtonElement',
-            data: {
-              element: node.name.name
-            }
-          });
-        }
-      },
-      // styled.button`` | styled2.button`` | styled.button()
-      'MemberExpression[object.name="styled"],MemberExpression[object.name="styled2"]': node => {
-        if (!isNodeOfType(node, 'MemberExpression')) {
-          return;
-        }
-
-        // styled.button``
-        if (isNodeOfType(node.property, 'Identifier')) {
-          if (node.property.name === 'button') {
-            const styledIdentifier = node.object.name;
-            const elementName = node.property.name;
-
-            // Including the `styled.` portion in the message to help makers understand it's not just the `button` element that should be replaced
-            const reportName = `${styledIdentifier}.${elementName}`; // styled.button
-
-            context.report({
-              node: node,
-              messageId: 'noHtmlButtonElement',
-              data: {
-                element: reportName
-              }
-            });
-          }
-        }
-      },
-      // styled(X)``
-      'CallExpression[callee.name="styled"]': node => {
-        if (!isNodeOfType(node, 'CallExpression')) {
-          return;
-        }
-
-        // styled('button')`` - We only care about 'button', ignore extending other components
-        if (isNodeOfType(node.arguments[0], 'Literal')) {
-          const argValue = node.arguments[0].raw;
-          if (typeof argValue === 'string') {
-            const suggest = argValue.replaceAll(`'`, '') === 'button';
-            if (suggest) {
-              const styledIdentifier = node.callee.name;
-              const elementName = argValue;
-
-              // Including the `styled()` portion in the message to help makers understand it's not just the `button` element that should be replaced
-              const reportName = `${styledIdentifier}(${elementName})`; // styled('button')
-
-              context.report({
-                node: node,
-                messageId: 'noHtmlButtonElement',
-                data: {
-                  element: reportName
-                }
-              });
-            }
-          }
-        }
-      }
-    };
-  }
-});
-export default rule;

package/dist/es2019/rules/no-html-button-element/utils.js

@@ -1,12 +0,0 @@
-const isButtonHtmlElement = node => {
-  return node.openingElement.name.name === 'button';
-};
-export const shouldSuggest = node => {
-  if (!node) {
-    return false;
-  }
-  if (!isButtonHtmlElement(node)) {
-    return false;
-  }
-  return true;
-};