@dialpad/eslint-plugin-dialtone 1.9.0 → 1.11.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/README.md +9 -1
  2. package/lib/rules/deprecated-base-color-classes.js +10 -10
  3. package/lib/rules/deprecated-directive.js +5 -5
  4. package/lib/rules/deprecated-stack-alignment-classes.js +61 -0
  5. package/lib/rules/recommend-typography-style.js +10 -10
  6. package/package.json +1 -6
package/README.md CHANGED
@@ -62,4 +62,12 @@ Then configure the rules you want to use under the rules section.
62
62
 
63
63
  ## Supported Rules
64
64
 
65
- * Fill in provided rules here
65
+ * [custom-implementation](docs/rules/custom-implementation.md)
66
+ * [deprecated-base-color-classes](docs/rules/deprecated-base-color-classes.md)
67
+ * [deprecated-component](docs/rules/deprecated-component.md)
68
+ * [deprecated-directive](docs/rules/deprecated-directive.md)
69
+ * [deprecated-flex-gap-classes](docs/rules/deprecated-flex-gap-classes.md)
70
+ * [deprecated-grid-gap-classes](docs/rules/deprecated-grid-gap-classes.md)
71
+ * [deprecated-icons](docs/rules/deprecated-icons.md)
72
+ * [deprecated-stack-alignment-classes](docs/rules/deprecated-stack-alignment-classes.md)
73
+ * [recommend-typography-style](docs/rules/recommend-typography-style.md)
package/lib/rules/deprecated-base-color-classes.js CHANGED
@@ -4,9 +4,9 @@
4
4
  */
5
5
  'use strict';
6
6
 
7
- //------------------------------------------------------------------------------
7
+ // ------------------------------------------------------------------------------
8
8
  // Rule Definition
9
- //------------------------------------------------------------------------------
9
+ // ------------------------------------------------------------------------------
10
10
 
11
11
  const description = 'Usage of base color utility classes are deprecated and will be removed in the future.';
12
12
 
@@ -21,10 +21,10 @@ module.exports = {
21
21
  fixable: null, // Or `code` or `whitespace`
22
22
  schema: [], // Add a schema if the rule has options
23
23
  messages: {
24
- recommendBackgroundSemanticColor: `${ description } Checkout the available replacements here: https://dialtone.dialpad.com/utilities/backgrounds/color.html`,
25
- recommendForegroundSemanticColor: `${ description } Checkout the available replacements here: https://dialtone.dialpad.com/utilities/typography/font-color.html`,
26
- recommendBorderSemanticColor: `${ description } Checkout the available replacements here: https://dialtone.dialpad.com/utilities/borders/color.html`,
27
- recommendDivideSemanticColor: `${ description } Checkout the available replacements here: https://dialtone.dialpad.com/utilities/borders/divide-color.html`,
24
+ recommendBackgroundSemanticColor: `${description} Checkout the available replacements here: https://dialtone.dialpad.com/utilities/backgrounds/color.html`,
25
+ recommendForegroundSemanticColor: `${description} Checkout the available replacements here: https://dialtone.dialpad.com/utilities/typography/font-color.html`,
26
+ recommendBorderSemanticColor: `${description} Checkout the available replacements here: https://dialtone.dialpad.com/utilities/borders/color.html`,
27
+ recommendDivideSemanticColor: `${description} Checkout the available replacements here: https://dialtone.dialpad.com/utilities/borders/divide-color.html`,
28
28
  }, // Add messageId and message
29
29
  },
30
30
 
@@ -36,13 +36,13 @@ module.exports = {
36
36
  if (node.key.name === 'class') {
37
37
  const classes = node.value.value;
38
38
  if (classes.match(/d-bgc-\w+-\d{2,4}/)) {
39
- context.report({ node: node, messageId: 'recommendBackgroundSemanticColor' });
39
+ context.report({ node, messageId: 'recommendBackgroundSemanticColor' });
40
40
  } else if (classes.match(/d-fc-\w+-\d{2,4}/)) {
41
- context.report({ node: node, messageId: 'recommendForegroundSemanticColor' });
41
+ context.report({ node, messageId: 'recommendForegroundSemanticColor' });
42
42
  } else if (classes.match(/d-bc-\w+-\d{2,4}/)) {
43
- context.report({ node: node, messageId: 'recommendBorderSemanticColor' });
43
+ context.report({ node, messageId: 'recommendBorderSemanticColor' });
44
44
  } else if (classes.match(/d-divide-\w+-\d{2,4}/)) {
45
- context.report({ node: node, messageId: 'recommendDivideSemanticColor' });
45
+ context.report({ node, messageId: 'recommendDivideSemanticColor' });
46
46
  }
47
47
  }
48
48
  },
package/lib/rules/deprecated-directive.js CHANGED
@@ -4,9 +4,9 @@
4
4
  */
5
5
  'use strict';
6
6
 
7
- //------------------------------------------------------------------------------
7
+ // ------------------------------------------------------------------------------
8
8
  // Rule Definition
9
- //------------------------------------------------------------------------------
9
+ // ------------------------------------------------------------------------------
10
10
 
11
11
  module.exports = {
12
12
  meta: {
@@ -25,7 +25,7 @@ module.exports = {
25
25
  },
26
26
  },
27
27
 
28
- create(context) {
28
+ create (context) {
29
29
  const deprecatedDirectives = [
30
30
  {
31
31
  directiveName: 'tooltip',
@@ -36,11 +36,11 @@ module.exports = {
36
36
 
37
37
  const sourceCode = context.sourceCode ?? context.getSourceCode();
38
38
  return sourceCode.parserServices.defineTemplateBodyVisitor({
39
- VAttribute(node) {
39
+ VAttribute (node) {
40
40
  deprecatedDirectives.forEach((item) => {
41
41
  if (node.directive && node.key.name.name === item.directiveName) {
42
42
  context.report({
43
- node: node,
43
+ node,
44
44
  messageId: 'deprecatedDirective',
45
45
  data: {
46
46
  directiveName: item.directiveName,
package/lib/rules/deprecated-stack-alignment-classes.js ADDED
@@ -0,0 +1,61 @@
1
+ /**
2
+ * @fileoverview Recommends using align/justify props instead of CSS utilities on Stack component
3
+ */
4
+ "use strict";
5
+
6
+ //------------------------------------------------------------------------------
7
+ // Rule Definition
8
+ //------------------------------------------------------------------------------
9
+
10
+ module.exports = {
11
+ meta: {
12
+ type: 'suggestion',
13
+ docs: {
14
+ description: "Recommend using align/justify props instead of CSS utilities on Stack component",
15
+ recommended: false,
16
+ url: 'https://github.com/dialpad/dialtone/blob/staging/packages/eslint-plugin-dialtone/docs/rules/deprecated-stack-alignment-classes.md',
17
+ },
18
+ fixable: null,
19
+ schema: [],
20
+ messages: {
21
+ useAlignProp: 'Use the `align` prop instead of `d-ai-*` utility classes on <dt-stack>. See: https://dialtone.dialpad.com/components/stack.html#align',
22
+ useJustifyProp: 'Use the `justify` prop instead of `d-jc-*` utility classes on <dt-stack>. See: https://dialtone.dialpad.com/components/stack.html#justify',
23
+ },
24
+ },
25
+
26
+ create(context) {
27
+ const sourceCode = context.sourceCode ?? context.getSourceCode();
28
+ return sourceCode.parserServices.defineTemplateBodyVisitor({
29
+ VElement(node) {
30
+ // Check if element is dt-stack or DtStack
31
+ const elementName = node.name || node.rawName;
32
+ if (elementName === 'dt-stack' || elementName === 'DtStack') {
33
+ // Find class attribute
34
+ const classAttr = node.startTag.attributes.find(
35
+ attr => attr.key && attr.key.name === 'class'
36
+ );
37
+
38
+ if (classAttr && classAttr.value && classAttr.value.value) {
39
+ const classes = classAttr.value.value;
40
+
41
+ // Check for d-ai-* classes (align-items utilities)
42
+ if (/d-ai-(normal|flex-start|center|flex-end|stretch|baseline)/.test(classes)) {
43
+ context.report({
44
+ node: classAttr,
45
+ messageId: 'useAlignProp',
46
+ });
47
+ }
48
+
49
+ // Check for d-jc-* classes (justify-content utilities)
50
+ if (/d-jc-(flex-start|center|flex-end|space-around|space-between|space-evenly)/.test(classes)) {
51
+ context.report({
52
+ node: classAttr,
53
+ messageId: 'useJustifyProp',
54
+ });
55
+ }
56
+ }
57
+ }
58
+ }
59
+ });
60
+ }
61
+ };
package/lib/rules/recommend-typography-style.js CHANGED
@@ -2,17 +2,17 @@
2
2
  * @fileoverview Utilities to set Font family, Font weight, Font size, and Line height separately are discouraged in favor of composed typography utilities
3
3
  * @author Nina Repetto
4
4
  */
5
- "use strict";
5
+ 'use strict';
6
6
 
7
- //------------------------------------------------------------------------------
7
+ // ------------------------------------------------------------------------------
8
8
  // Rule Definition
9
- //------------------------------------------------------------------------------
9
+ // ------------------------------------------------------------------------------
10
10
 
11
11
  module.exports = {
12
12
  meta: {
13
13
  type: 'suggestion', // `problem`, `suggestion`, or `layout`
14
14
  docs: {
15
- description: "Utilities to set Font family, Font weight, Font size, and Line height separately are discouraged in favor of composed typography utilities",
15
+ description: 'Utilities to set Font family, Font weight, Font size, and Line height separately are discouraged in favor of composed typography utilities',
16
16
  recommended: false,
17
17
  url: 'https://github.com/dialpad/dialtone/blob/staging/packages/eslint-plugin-dialtone/docs/rules/recommend-typography-style.md', // URL to the documentation page for this rule
18
18
  },
@@ -26,11 +26,11 @@ module.exports = {
26
26
  }, // Add messageId and message
27
27
  },
28
28
 
29
- create(context) {
29
+ create (context) {
30
30
  const sourceCode = context.sourceCode ?? context.getSourceCode();
31
31
  return sourceCode.parserServices.defineTemplateBodyVisitor({
32
32
  // Visitor functions for Vue templates
33
- VAttribute(node) {
33
+ VAttribute (node) {
34
34
  if (node.key.name === 'class') {
35
35
  const classes = node.value.value.split(' ');
36
36
  const typographyClasses = [
@@ -47,16 +47,16 @@ module.exports = {
47
47
  'd-ff-unset',
48
48
  ];
49
49
  const typographyClassesFound = classes.filter((className) =>
50
- typographyClasses.some((typographyClass) => className.includes(typographyClass))
50
+ typographyClasses.some((typographyClass) => className.includes(typographyClass)),
51
51
  );
52
52
  if (typographyClassesFound.length > 0) {
53
53
  context.report({
54
- node: node,
54
+ node,
55
55
  messageId: 'recommendTypographyStyle',
56
56
  });
57
57
  }
58
58
  }
59
- }
59
+ },
60
60
  });
61
- }
61
+ },
62
62
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dialpad/eslint-plugin-dialtone",
3
- "version": "1.9.0",
3
+ "version": "1.11.0",
4
4
  "description": "dialtone eslint plugin",
5
5
  "keywords": [
6
6
  "Dialpad",
@@ -20,11 +20,6 @@
20
20
  "email": "francis.rupert@dialpad.com",
21
21
  "url": "https://github.com/francisrupert"
22
22
  },
23
- {
24
- "name": "Julio Ortega",
25
- "email": "julio.ortega@dialpad.com",
26
- "url": "https://github.com/juliodialpad"
27
- },
28
23
  {
29
24
  "name": "Ignacio Ropolo",
30
25
  "email": "ignacio.ropolo@dialpad.com",