@atlaskit/eslint-plugin-design-system 8.33.0 → 8.34.0

package/dist/types-ts4.5/rules/ensure-design-token-usage/utils.d.ts

@@ -1,5 +1,5 @@
 import type { Rule } from 'eslint';
-import { EslintNode, ObjectExpression, TaggedTemplateExpression } from 'eslint-codemod-utils';
+import { EslintNode, ObjectExpression, Property, SpreadElement, TaggedTemplateExpression } from 'eslint-codemod-utils';
 import { Domains } from './types';
 export type ProcessedCSSLines = [
     string,
@@ -19,8 +19,8 @@ export declare const isSpacingProperty: (propertyName: string) => boolean;
  * For input `-${gridSize / 2}px ${token(...)} 18px -> [`-${gridSize / 2}px`, `${token(...)}`, `18px`]
  */
 export declare const splitShorthandValues: (str: string) => string[];
-export declare const getValueFromShorthand: (str: unknown) => any[];
-export declare const getValue: (node: EslintNode, context: Rule.RuleContext) => string | number | any[] | null | undefined;
+export declare const getValueFromShorthand: (str: unknown) => (string | number)[];
+export declare const getValue: (node: EslintNode, context: Rule.RuleContext) => string | number | (string | number)[] | null | undefined;
 export declare const getRawExpression: (node: EslintNode, context: Rule.RuleContext) => string | null;
 /**
  * @example
@@ -46,34 +46,33 @@ export declare const isAuto: (value: string | number | boolean | RegExp | null |
 export declare const convertHyphenatedNameToCamelCase: (prop: string) => string;
 /**
  * @param node
- * @returns The furthest parent node that is on the same line as the input node
+ * @returns The furthest parent node that is on the same line as the input node.
  */
 export declare const findParentNodeForLine: (node: Rule.Node) => Rule.Node;
 /**
- * Returns an array of domains that are relevant to the provided property based on the rule options
+ * Returns an array of domains that are relevant to the provided property based on the rule options.
  * @param propertyName camelCase CSS property
- * @param targetOptions Array containing the types of properties that should be included in the rule
+ * @param targetOptions Array containing the types of properties that should be included in the rule.
  * @example
  * ```
  * propertyName: padding, targetOptions: ['spacing'] -> returns ['spacing']
- * propertyName: fontWeight, targetOptions: ['spacing', 'typography'] -> returns ['typography']
- * propertyName: backgroundColor, targetOptions: ['spacing', 'typography'] -> returns []
+ * propertyName: backgroundColor, targetOptions: ['spacing'] -> returns []
  * propertyName: backgroundColor, targetOptions: ['color', 'spacing'] -> returns ['color']
  * ```
  */
 export declare function getDomainsForProperty(propertyName: string, targetOptions: Domains): Domains;
 /**
  * Function that removes JS comments from a string of code,
- * sometimes makers will have single or multiline comments in their tagged template literals styles, this can mess with our parsing logic
+ * sometimes makers will have single or multiline comments in their tagged template literals styles, this can mess with our parsing logic.
  */
 export declare function cleanComments(str: string): string;
 /**
  * Returns an array of tuples representing a processed css within `TaggedTemplateExpression` node.
- * each element of the array is a tuple `[string, string]`,
+ * Each element of the array is a tuple `[string, string]`,
  * where the first element is the processed css line with computed values
- * and the second element of the tuple is the original css line from source
- * @param node TaggedTemplateExpression node
- * @param context Rule.RuleContext
+ * and the second element of the tuple is the original css line from source.
+ * @param node TaggedTemplateExpression node.
+ * @param context Rule.RuleContext.
  * @example
  * ```
  * `[['padding: 8', 'padding: ${gridSize()}'], ['margin: 6', 'margin: 6px' ]]`
@@ -94,13 +93,13 @@ export declare function getTokenNodeForValue(propertyName: string, value: string
 export declare function getFontSizeValueInScope(cssProperties: ProcessedCSSLines): number | undefined;
 /**
  * Attempts to remove all non-essential words & characters from a style block.
- * Including selectors and queries
+ * Including selectors and queries.
  * @param styleString string of css properties
  */
 export declare function splitCssProperties(styleString: string): string[];
 /**
- * returns whether the current string is a token value
- * @param originalVaue string representing a css property value e.g 1em, 12px
+ * Returns whether the current string is a token value.
+ * @param originalVaue string representing a css property value e.g 1em, 12px.
  */
 export declare function isTokenValueString(originalValue: string): boolean;
 export declare function includesTokenString(originalValue: string): boolean;
@@ -109,17 +108,18 @@ export declare function includesTokenString(originalValue: string): boolean;
  *
  * -> for pixels this '8px'
  * -> for weights     '400'
- * -> for family      'Arial'
+ * -> for family      'Arial'.
  *
  * @internal
  */
-export declare function normaliseValue(propertyName: string, value: string): string;
+export declare function normaliseValue(propertyName: string, value: string | number): string;
 export declare function findTokenNameByPropertyValue(propertyName: string, value: string): string | undefined;
 /**
  * Returns a stringifiable node with the token expression corresponding to its matching token.
- * if no token found for the pair the function returns undefined
- * @param propertyName string camelCased css property
- * @param value the computed value e.g '8px' -> '8'
+ * If no token found for the pair the function returns undefined.
+ * @param propertyName string camelCased css property.
+ * @param value The computed value e.g '8px' -> '8'.
  */
 export declare function getTokenReplacement(propertyName: string, value: string): import("eslint-codemod-utils").StringableASTNode<import("estree").SimpleCallExpression> | undefined;
-export declare function getFontSizeFromNode(parentNode: ObjectExpression & Rule.NodeParentExtension, context: Rule.RuleContext): any;
+export declare function getPropertyNodeFromParent(property: string, parentNode: ObjectExpression & Rule.NodeParentExtension): Property | SpreadElement | undefined;
+export declare function getValueForPropertyNode(propertyNode: Property | SpreadElement, context: Rule.RuleContext): string | number | null | undefined;

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

@@ -36,6 +36,7 @@ declare const _default: {
     'use-href-in-link-item': import("eslint").Rule.RuleModule;
     'use-primitives': import("eslint").Rule.RuleModule;
     'use-primitives-text': import("eslint").Rule.RuleModule;
+    'use-tokens-typography': import("eslint").Rule.RuleModule;
     'use-visually-hidden': import("eslint").Rule.RuleModule;
 };
 export default _default;

package/dist/types-ts4.5/rules/use-tokens-typography/config/index.d.ts

@@ -0,0 +1,6 @@
+import { JSONSchema4 } from '@typescript-eslint/utils/dist/json-schema';
+export type RuleConfig = {
+    failSilently?: boolean;
+};
+export declare const ruleSchema: JSONSchema4;
+export declare const getConfig: (overrides: RuleConfig) => RuleConfig;

package/dist/types-ts4.5/rules/use-tokens-typography/error-boundary.d.ts

@@ -0,0 +1,11 @@
+import { RuleConfig } from './config';
+/**
+ * ESLint rules should NEVER throw exceptions, because that breaks the VSCode ESLint server
+ * (and probably the IntelliJ one too), which causes linting to fail in a file.
+ *
+ * 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;

package/dist/types-ts4.5/rules/use-tokens-typography/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/transformers/style-object.d.ts

@@ -0,0 +1,31 @@
+import type { Rule } from 'eslint';
+import { ImportDeclaration, ObjectExpression, Property, StringableASTNode } from 'eslint-codemod-utils';
+import { TokenValueMap } from '../utils';
+interface MetaData {
+    context: Rule.RuleContext;
+}
+interface Refs {
+    fontSizeNode: Property;
+    fontSizeRaw: string | number;
+    tokensImportNode: ImportDeclaration | undefined;
+}
+type Check = {
+    success: boolean;
+    refs?: Refs;
+};
+interface FixerRefs {
+    matchingToken: TokenValueMap;
+    nodesToReplace: Property[];
+    tokensImportNode: ImportDeclaration | undefined;
+    fontWeightReplacement: StringableASTNode<Property> | undefined;
+    fontFamilyReplacement: StringableASTNode<Property> | undefined;
+    fontStyleReplacement: StringableASTNode<Property> | undefined;
+}
+export declare const StyleObject: {
+    lint(node: Rule.Node, { context }: MetaData): {
+        success: boolean;
+    } | undefined;
+    _check(node: ObjectExpression & Rule.NodeParentExtension, { context }: MetaData): Check;
+    _fix(refs: FixerRefs, context: Rule.RuleContext): (fixer: Rule.RuleFixer) => Rule.Fix[];
+};
+export {};

package/dist/types-ts4.5/rules/use-tokens-typography/utils.d.ts

@@ -0,0 +1,161 @@
+import { CallExpression, EslintNode, Property } from 'eslint-codemod-utils';
+export declare const typographyProperties: string[];
+export declare const isTypographyProperty: (propertyName: string) => boolean;
+export declare const isFontSize: (node: EslintNode) => node is CallExpression;
+export declare const isFontSizeSmall: (node: EslintNode) => node is CallExpression;
+export declare const isFontFamily: (node: EslintNode) => node is CallExpression;
+export declare const isCodeFontFamily: (node: EslintNode) => node is CallExpression;
+export type TokenValueMap = {
+    tokenName: string;
+    tokenValue: string;
+    values: {
+        fontSize?: string;
+        fontWeight?: string;
+        lineHeight?: string;
+    };
+};
+export declare const typographyValueToToken: TokenValueMap[];
+export declare function findTypographyTokenForValues(fontSize: string, lineHeight?: string): TokenValueMap[];
+export declare const fontWeightTokens: {
+    tokenName: string;
+    tokenValue: string;
+    values: {};
+}[];
+export declare function findFontWeightTokenForValue(fontWeight: string): {
+    tokenName: string;
+    tokenValue: string;
+    values: {};
+} | undefined;
+export declare const fontWeightMap: FontWeightMap;
+export type FontWeightMap = {
+    regular: string;
+    medium: string;
+    semibold: string;
+    bold: string;
+};
+export declare const defaultFontWeight: string;
+export declare const fontFamilyTokens: ({
+    attributes: {
+        group: string;
+        state: string;
+        introduced: string;
+        description: string;
+        responsiveSmallerVariant?: undefined;
+        deprecated?: undefined;
+    };
+    value: string;
+    filePath: string;
+    isSource: boolean;
+    original: {
+        attributes: {
+            group: string;
+            state: string;
+            introduced: string;
+            description: string;
+            responsiveSmallerVariant?: undefined;
+            deprecated?: undefined;
+        };
+        value: string;
+    };
+    name: string;
+    path: string[];
+    cleanName: string;
+} | {
+    attributes: {
+        group: string;
+        state: string;
+        introduced: string;
+        description: string;
+        responsiveSmallerVariant: string;
+        deprecated?: undefined;
+    };
+    value: string;
+    filePath: string;
+    isSource: boolean;
+    original: {
+        attributes: {
+            group: string;
+            state: string;
+            introduced: string;
+            description: string;
+            responsiveSmallerVariant: string;
+            deprecated?: undefined;
+        };
+        value: {
+            fontWeight: string;
+            fontSize: string;
+            lineHeight: string;
+            fontFamily: string;
+            fontStyle: string;
+            letterSpacing: string;
+        };
+    };
+    name: string;
+    path: string[];
+    cleanName: string;
+} | {
+    attributes: {
+        group: string;
+        state: string;
+        introduced: string;
+        description: string;
+        responsiveSmallerVariant?: undefined;
+        deprecated?: undefined;
+    };
+    value: string;
+    filePath: string;
+    isSource: boolean;
+    original: {
+        attributes: {
+            group: string;
+            state: string;
+            introduced: string;
+            description: string;
+            responsiveSmallerVariant?: undefined;
+            deprecated?: undefined;
+        };
+        value: {
+            fontWeight: string;
+            fontSize: string;
+            lineHeight: string;
+            fontFamily: string;
+            fontStyle: string;
+            letterSpacing: string;
+        };
+    };
+    name: string;
+    path: string[];
+    cleanName: string;
+} | {
+    attributes: {
+        group: string;
+        state: string;
+        introduced: string;
+        description: string;
+        deprecated: string;
+        responsiveSmallerVariant?: undefined;
+    };
+    value: string;
+    filePath: string;
+    isSource: boolean;
+    original: {
+        attributes: {
+            group: string;
+            state: string;
+            introduced: string;
+            description: string;
+            deprecated: string;
+            responsiveSmallerVariant?: undefined;
+        };
+        value: string;
+    };
+    name: string;
+    path: string[];
+    cleanName: string;
+})[];
+export declare function findFontFamilyValueForToken(tokenName: string): string;
+export declare function notUndefined<V>(value: V | undefined): value is V;
+export declare function isValidPropertyNode(node: Property): boolean;
+export declare function getTokenProperty(propertyName: string, tokenName: string, tokenFallback: string): import("eslint-codemod-utils").StringableASTNode<Property>;
+export declare function getLiteralProperty(propertyName: string, propertyValue: string): import("eslint-codemod-utils").StringableASTNode<Property>;
+export declare function convertPropertyNodeToStringableNode(node: Property): import("eslint-codemod-utils").StringableASTNode<Property>;

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": "8.33.0",
+  "version": "8.34.0",
   "author": "Atlassian Pty Ltd",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"

package/dist/cjs/rules/ensure-design-token-usage/typography.js

@@ -1,39 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.typographyValueToToken = exports.isTypographyProperty = exports.isFontSizeSmall = exports.isFontSize = exports.isFontFamily = exports.isCodeFontFamily = void 0;
-var _eslintCodemodUtils = require("eslint-codemod-utils");
-var _tokensRaw = require("@atlaskit/tokens/tokens-raw");
-var typographyProperties = ['fontSize', 'fontWeight', 'fontFamily', 'lineHeight'];
-var isTypographyProperty = exports.isTypographyProperty = function isTypographyProperty(propertyName) {
-  return typographyProperties.includes(propertyName);
-};
-var isFontSize = exports.isFontSize = function isFontSize(node) {
-  return (0, _eslintCodemodUtils.isNodeOfType)(node, 'CallExpression') && (0, _eslintCodemodUtils.isNodeOfType)(node.callee, 'Identifier') && (node.callee.name === 'fontSize' || node.callee.name === 'getFontSize');
-};
-var isFontSizeSmall = exports.isFontSizeSmall = function isFontSizeSmall(node) {
-  return (0, _eslintCodemodUtils.isNodeOfType)(node, 'CallExpression') && (0, _eslintCodemodUtils.isNodeOfType)(node.callee, 'Identifier') && node.callee.name === 'fontSizeSmall';
-};
-var isFontFamily = exports.isFontFamily = function isFontFamily(node) {
-  return (0, _eslintCodemodUtils.isNodeOfType)(node, 'CallExpression') && (0, _eslintCodemodUtils.isNodeOfType)(node.callee, 'Identifier') && (node.callee.name === 'fontFamily' || node.callee.name === 'getFontFamily');
-};
-var isCodeFontFamily = exports.isCodeFontFamily = function isCodeFontFamily(node) {
-  return (0, _eslintCodemodUtils.isNodeOfType)(node, 'CallExpression') && (0, _eslintCodemodUtils.isNodeOfType)(node.callee, 'Identifier') && (node.callee.name === 'codeFontFamily' || node.callee.name === 'getCodeFontFamily');
-};
-var typographyValueToToken = exports.typographyValueToToken = Object.fromEntries(_tokensRaw.typographyAdg3
-// we're filtering here to remove the `font` tokens.
-.filter(function (t) {
-  return t.attributes.group !== 'typography';
-}).map(function (currentToken) {
-  // Group tokens by property name (e.g. fontSize, fontFamily, lineHeight)
-  // This allows us to look up values specific to a property
-  // (so as not to mix tokens with overlapping values e.g. font size and line height both have tokens for 16px)
-  var tokenGroup = currentToken.attributes.group;
-  return [tokenGroup, Object.fromEntries(_tokensRaw.typographyAdg3.map(function (token) {
-    return token.attributes.group === tokenGroup ? [token.value.replaceAll("\"", "'"), token.name] : [];
-  }).filter(function (token) {
-    return token.length;
-  }))];
-}));

package/dist/es2019/rules/ensure-design-token-usage/typography.js

@@ -1,19 +0,0 @@
-import { isNodeOfType } from 'eslint-codemod-utils';
-import { typographyAdg3 as typographyTokens } from '@atlaskit/tokens/tokens-raw';
-const typographyProperties = ['fontSize', 'fontWeight', 'fontFamily', 'lineHeight'];
-export const isTypographyProperty = propertyName => {
-  return typographyProperties.includes(propertyName);
-};
-export const isFontSize = node => isNodeOfType(node, 'CallExpression') && isNodeOfType(node.callee, 'Identifier') && (node.callee.name === 'fontSize' || node.callee.name === 'getFontSize');
-export const isFontSizeSmall = node => isNodeOfType(node, 'CallExpression') && isNodeOfType(node.callee, 'Identifier') && node.callee.name === 'fontSizeSmall';
-export const isFontFamily = node => isNodeOfType(node, 'CallExpression') && isNodeOfType(node.callee, 'Identifier') && (node.callee.name === 'fontFamily' || node.callee.name === 'getFontFamily');
-export const isCodeFontFamily = node => isNodeOfType(node, 'CallExpression') && isNodeOfType(node.callee, 'Identifier') && (node.callee.name === 'codeFontFamily' || node.callee.name === 'getCodeFontFamily');
-export const typographyValueToToken = Object.fromEntries(typographyTokens
-// we're filtering here to remove the `font` tokens.
-.filter(t => t.attributes.group !== 'typography').map(currentToken => {
-  // Group tokens by property name (e.g. fontSize, fontFamily, lineHeight)
-  // This allows us to look up values specific to a property
-  // (so as not to mix tokens with overlapping values e.g. font size and line height both have tokens for 16px)
-  const tokenGroup = currentToken.attributes.group;
-  return [tokenGroup, Object.fromEntries(typographyTokens.map(token => token.attributes.group === tokenGroup ? [token.value.replaceAll(`"`, `'`), token.name] : []).filter(token => token.length))];
-}));

package/dist/esm/rules/ensure-design-token-usage/typography.js

@@ -1,33 +0,0 @@
-import { isNodeOfType } from 'eslint-codemod-utils';
-import { typographyAdg3 as typographyTokens } from '@atlaskit/tokens/tokens-raw';
-var typographyProperties = ['fontSize', 'fontWeight', 'fontFamily', 'lineHeight'];
-export var isTypographyProperty = function isTypographyProperty(propertyName) {
-  return typographyProperties.includes(propertyName);
-};
-export var isFontSize = function isFontSize(node) {
-  return isNodeOfType(node, 'CallExpression') && isNodeOfType(node.callee, 'Identifier') && (node.callee.name === 'fontSize' || node.callee.name === 'getFontSize');
-};
-export var isFontSizeSmall = function isFontSizeSmall(node) {
-  return isNodeOfType(node, 'CallExpression') && isNodeOfType(node.callee, 'Identifier') && node.callee.name === 'fontSizeSmall';
-};
-export var isFontFamily = function isFontFamily(node) {
-  return isNodeOfType(node, 'CallExpression') && isNodeOfType(node.callee, 'Identifier') && (node.callee.name === 'fontFamily' || node.callee.name === 'getFontFamily');
-};
-export var isCodeFontFamily = function isCodeFontFamily(node) {
-  return isNodeOfType(node, 'CallExpression') && isNodeOfType(node.callee, 'Identifier') && (node.callee.name === 'codeFontFamily' || node.callee.name === 'getCodeFontFamily');
-};
-export var typographyValueToToken = Object.fromEntries(typographyTokens
-// we're filtering here to remove the `font` tokens.
-.filter(function (t) {
-  return t.attributes.group !== 'typography';
-}).map(function (currentToken) {
-  // Group tokens by property name (e.g. fontSize, fontFamily, lineHeight)
-  // This allows us to look up values specific to a property
-  // (so as not to mix tokens with overlapping values e.g. font size and line height both have tokens for 16px)
-  var tokenGroup = currentToken.attributes.group;
-  return [tokenGroup, Object.fromEntries(typographyTokens.map(function (token) {
-    return token.attributes.group === tokenGroup ? [token.value.replaceAll("\"", "'"), token.name] : [];
-  }).filter(function (token) {
-    return token.length;
-  }))];
-}));

package/dist/types/rules/ensure-design-token-usage/typography.d.ts

@@ -1,9 +0,0 @@
-import { CallExpression, EslintNode } from 'eslint-codemod-utils';
-export declare const isTypographyProperty: (propertyName: string) => boolean;
-export declare const isFontSize: (node: EslintNode) => node is CallExpression;
-export declare const isFontSizeSmall: (node: EslintNode) => node is CallExpression;
-export declare const isFontFamily: (node: EslintNode) => node is CallExpression;
-export declare const isCodeFontFamily: (node: EslintNode) => node is CallExpression;
-export declare const typographyValueToToken: {
-    [k: string]: any;
-};

package/dist/types-ts4.5/rules/ensure-design-token-usage/typography.d.ts

@@ -1,9 +0,0 @@
-import { CallExpression, EslintNode } from 'eslint-codemod-utils';
-export declare const isTypographyProperty: (propertyName: string) => boolean;
-export declare const isFontSize: (node: EslintNode) => node is CallExpression;
-export declare const isFontSizeSmall: (node: EslintNode) => node is CallExpression;
-export declare const isFontFamily: (node: EslintNode) => node is CallExpression;
-export declare const isCodeFontFamily: (node: EslintNode) => node is CallExpression;
-export declare const typographyValueToToken: {
-    [k: string]: any;
-};