Skip to content

Commit 7dd4e0c

Browse files
juanpinheirojuanpinheiro
authored
Merge pull request #1 from juanpinheiro/release-1.0.0
Fix: Fixing documentaiton and README.MD
2 parents 52f672f + 90dd471 commit 7dd4e0c

File tree

4 files changed

+128
-59
lines changed

4 files changed

+128
-59
lines changed

‎README.md‎

Lines changed: 32 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -3,27 +3,25 @@
33
[![NPM version](http://img.shields.io/npm/v/eslint-plugin-deprecate-classnames.svg)](https://www.npmjs.com/package/eslint-plugin-deprecate-classnames)
44
![downloads](https://img.shields.io/npm/dm/eslint-plugin-deprecate-classnames.svg)
55

6-
This plugin helps you to refactor your codebase. This is an extension of [eslint-plugin-deprecate](https://github.com/AlexMost/eslint-plugin-deprecate).
6+
This plugin helps you refactor your codebase by identifying and replacing deprecated css class names.
77

88
## Installation
9+
First, you'll need to install [ESLint](http://eslint.org):
910

10-
You'll first need to install [ESLint](http://eslint.org):
11-
12-
```
13-
$ npm i eslint --save-dev
11+
```sh
12+
npm install eslint --save-dev
1413
```
1514

16-
Next, install `eslint-plugin-deprecate-classnames`:
15+
Next, install eslint-plugin-deprecate-classnames:
1716

18-
```
19-
$ npm install eslint-plugin-deprecate-classnames --save-dev
17+
```sh
18+
npm install eslint-plugin-deprecate-classnames --save-dev
2019
```
2120

2221
## Usage
22+
Add deprecate-classnames to the plugins section of your .eslintrc configuration file. You can omit the eslint-plugin- prefix:
2323

24-
Add `deprecate` to the plugins section of your `.eslintrc` configuration file. You can omit the `eslint-plugin-` prefix:
25-
26-
```json
24+
```
2725
{
2826
"plugins": [
2927
"deprecate-classnames"
@@ -33,18 +31,18 @@ Add `deprecate` to the plugins section of your `.eslintrc` configuration file. Y
3331

3432
Then configure the rules you want to use under the rules section.
3533

36-
### Rule `classnames`
34+
## Rule: `classnames`
35+
This rule identifies the use of deprecated class names in your JSX/TSX files and suggests alternatives.
3736

38-
to identify the use of deprecated classnames in JSX/TSX files:
37+
### Example:
38+
Given the following JSX code:
3939

4040
```jsx
4141
<div className="test-classname test-classname-2" />
4242
```
4343

44-
use the following configuration:
45-
44+
### Specific classnames:
4645
```json
47-
// Specific classnames
4846
{
4947
"rules": {
5048
"deprecate-classnames/classnames": ["error",
@@ -54,9 +52,8 @@ use the following configuration:
5452
}
5553
```
5654

57-
55+
### Multiple classnames:
5856
```json
59-
// Multiple classnames
6057
{
6158
"rules": {
6259
"deprecate-classnames/classnames": ["error",
@@ -66,28 +63,29 @@ use the following configuration:
6663
}
6764
```
6865

66+
### Regular expression for classnames:
6967
```json
70-
// RegExp
7168
{
7269
"rules": {
7370
"deprecate-classnames/classnames": ["error",
74-
{"nameRegExp": "test-", "use": "new-classnames"}
71+
{"nameRegExp": /^test-/, "use": "new-classname"}
7572
]
7673
}
7774
}
7875
```
7976

80-
### Rule `classes`
77+
## Rule: `classes`
78+
This rule identifies the use of deprecated class names within the classes prop used in Material-UI components and suggests alternatives.
8179

80+
### Example:
81+
Given the following JSX code:
8282

8383
```jsx
8484
<div classes={{ root: "test-classname test-classname-2" }} />
8585
```
8686

87-
use the following configuration:
88-
87+
### Specific classnames:
8988
```json
90-
// Specific classnames
9189
{
9290
"rules": {
9391
"deprecate-classnames/classes": ["error",
@@ -97,8 +95,8 @@ use the following configuration:
9795
}
9896
```
9997

98+
### Multiple classnames:
10099
```json
101-
// Multiple classnames
102100
{
103101
"rules": {
104102
"deprecate-classnames/classes": ["error",
@@ -108,23 +106,21 @@ use the following configuration:
108106
}
109107
```
110108

109+
### Regular expression for classnames:
111110
```json
112-
// RegExp
113111
{
114112
"rules": {
115113
"deprecate-classnames/classes": ["error",
116-
{"names": ["test-classname", "test-classname-2"], "use": "new-classname"}
114+
{"nameRegExp": /^test-/, "use": "new-classname"}
117115
]
118116
}
119117
}
120118
```
121119

122-
```json
123-
{
124-
"rules": {
125-
"deprecate-classnames/classes": ["error",
126-
{"nameRegExp": "test-", "use": "new-classnames"}
127-
]
128-
}
129-
}
130-
```
120+
### Summary
121+
[eslint-plugin-deprecate-classnames](https://www.npmjs.com/package/eslint-plugin-deprecate-classnames) is a powerful tool for maintaining a clean and up-to-date codebase by ensuring deprecated class names are systematically identified and replaced. This is especially useful for large teams and during major refactoring efforts. By integrating this plugin, you can automate the enforcement of class name conventions and improve code quality.
122+
123+
For more information, visit the [npm package page](https://www.npmjs.com/package/eslint-plugin-deprecate-classnames).
124+
125+
## Credits
126+
This plugin is an extension of the [eslint-plugin-deprecate](https://github.com/AlexMost/eslint-plugin-deprecate) by AlexMost. The original plugin provides a flexible way to deprecate functions and variables, and this extension builds on that foundation to specifically target and manage deprecated class names in JSX and TSX files, with a special focus on the `classes` prop used in Material-UI components.

‎docs/rules/classes.md‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
# Prevents Deprecated Material-UI Classes Usage
2+
3+
## Rule Details
4+
5+
This rule allows you to forbid the usage of deprecated Material-UI class names in your codebase and suggests alternatives. It is especially useful for large teams during a refactor process.
6+
7+
### Example:
8+
Let's consider we have this configuration in `.eslintrc`:
9+
10+
```json
11+
{
12+
"plugins": ["deprecate"],
13+
"rules": {
14+
"deprecate/classes": ["error",
15+
{ "name": "MuiOldClass", "use": "MuiNewClass" }
16+
]
17+
}
18+
}
19+
```
20+
21+
### The following patterns are considered as errors:
22+
23+
```jsx
24+
// any usage of class "MuiOldClass"
25+
<div classes={{ root: "MuiOldClass" ❌ }}>Deprecated class</div>
26+
```
27+
28+
### The following patterns are not errors:
29+
30+
```jsx
31+
// usage of non-deprecated classes
32+
<div classes={{ root: "MuiNewClass" ✅ }}>Updated class</div>
33+
```
34+
35+
## Options
36+
37+
You can specify deprecated class names as strings or objects to provide more control and suggest alternatives:
38+
39+
### Simple string names:
40+
41+
```json
42+
"deprecate/classes": [ 2, "MuiOldClass1", "MuiOldClass2" ]
43+
```
44+
45+
### Detailed objects:
46+
47+
```json
48+
"deprecate/classes": [ 2,
49+
{ "name": "MuiOldClass1", "use": "MuiNewClass1" },
50+
{ "name": "MuiOldClass2", "use": "MuiNewClass2" }
51+
]
52+
```
53+
54+
### Regular expression for class names:
55+
56+
```json
57+
"deprecate/classes": [ 2,
58+
{ "nameRegExp": "MuiOld.*", "use": "MuiNew.*" }
59+
]
60+
```

‎docs/rules/classnames.md‎

Lines changed: 34 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
1-
# Prevents some function usage
1+
# Prevents Deprecated Class Names Usage
22

33
## Rule Details
44

5-
This rule allows you to forbid some function usage and to suggest some alternative.
6-
Maybe really handy for large teams while refactoring codebase.
5+
This rule allows you to forbid the usage of deprecated class names in your codebase and suggests alternatives. It is especially useful for large teams during a refactor process.
76

87
### Example:
98
Let's consider we have this configuration in `.eslintrc`:
@@ -12,36 +11,50 @@ Let's consider we have this configuration in `.eslintrc`:
1211
{
1312
"plugins": ["deprecate"],
1413
"rules": {
15-
"deprecate/function": ["error",
16-
{"name": "legacyFunc", "use": "newFunc from this package"}
14+
"deprecate/classnames": ["error",
15+
{ "name": "old-class", "use": "new-class" }
1716
]
1817
}
1918
}
20-
```
2119

2220
### The following patterns are considered as errors:
2321

24-
```js
25-
// any function call with name legacyFunc
26-
console.log(legacyFunc());
27-
legacyFunc();
22+
```jsx
23+
// any usage of class "old-class"
24+
<div className="old-class❌">Deprecated class</div>
2825
```
2926

30-
## Options
31-
You can just pass deprecated function names as strings:
27+
### The following patterns are not errors:
3228

33-
```js
34-
"deprecate/function": [ 2, "<fn name1>", "<fn name2>"]
29+
```jsx
30+
// usage of non-deprecated classes
31+
<div className="new-class✅">Updated class</div>
3532
```
3633

37-
If you want more control over displayed errors (suggest alternative function e.t.c)
38-
you can pass objects instead of just function names:
34+
### Options
35+
36+
You can specify deprecated class names as strings or objects to provide more control and suggest alternatives:
37+
38+
## Simple string names:
3939

40-
```js
41-
"deprecate/function": [ 2,
42-
{"name": "<fn name>", "use": "<suggested alternative>"}, ... ]
40+
```json
41+
"deprecate/classnames": [ 2, "old-class1", "old-class2" ]
4342
```
4443

45-
## When Not To Use It
44+
## Detailed objects:
45+
4646

47-
When you don't want to forbid some function usage in your codebase.
47+
```json
48+
"deprecate/classnames": [ 2,
49+
{ "name": "old-class1", "use": "new-class1" },
50+
{ "name": "old-class2", "use": "new-class2" }
51+
]
52+
```
53+
54+
## Regular expression for class names:
55+
56+
```json
57+
"deprecate/classnames": [ 2,
58+
{ "nameRegExp": "old-.*", "use": "new-*"}
59+
]
60+
```

‎package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "eslint-plugin-deprecate-classnames",
3-
"version": "0.3.3",
4-
"description": "",
3+
"version": "1.0.0",
4+
"description": "An ESLint plugin with rules reporting usage of deprecated css classes",
55
"main": "dist/index.js",
66
"scripts": {
77
"test": "mocha --compilers js:babel-register --recursive tests/**/*.js",

0 commit comments

Comments
 (0)