Skip to content

Commit 8bcc21e

Browse files
M-i-k-e-lethanshar
M-i-k-e-l
and
ethanshar
authored
Fix Typography lint catching non truthy props (#1137)
* Fix Typography lint catching non truthy props * Check for relevant components instead of value * Add comments Co-authored-by: Ethan Sharabi <[email protected]>
1 parent 70f14a4 commit 8bcc21e

File tree

4 files changed

+290
-3
lines changed

4 files changed

+290
-3
lines changed

‎eslint-rules/lib/rules/typography-deprecation.js

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -48,10 +48,21 @@ module.exports = {
4848
localImportSpecifier = utils.getLocalImportSpecifier(node, source, defaultImportName);
4949
}
5050

51+
function isComponentRelevant(node, components) {
52+
let isComponentRelevant = true;
53+
if (!_.isEmpty(components)) {
54+
if (_.get(node, 'parent.type') === 'JSXOpeningElement') {
55+
return components.includes(_.get(node, 'parent.name.name'));
56+
}
57+
}
58+
59+
return isComponentRelevant;
60+
}
61+
5162
function findAndReportDeprecation(node, possibleDeprecation, useShortVersion) {
5263
const path = `${defaultImportName}.${possibleDeprecation}`;
5364
const foundDeprecation = _.find(deprecations, {path});
54-
if (foundDeprecation) {
65+
if (foundDeprecation && isComponentRelevant(node, foundDeprecation.components)) {
5566
reportDeprecatedTypography(node, foundDeprecation, useShortVersion);
5667
}
5768
}

‎eslint-rules/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "eslint-plugin-uilib",
3-
"version": "1.0.27",
3+
"version": "1.0.28",
44
"description": "uilib set of eslint rules",
55
"keywords": [
66
"eslint",

‎eslint-rules/tests/lib/rules/typography-deprecation.js

Lines changed: 271 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -312,6 +312,86 @@ ruleTester.run('typography-deprecation', rule, {
312312
{
313313
options: options,
314314
code: `${fullClassValidRenamed}`,
315+
},
316+
{
317+
options: options,
318+
code: `
319+
${ourImport}
320+
import {List} from 'another-source';
321+
<List.Item title={'bla'} />`
322+
},
323+
{
324+
options: options,
325+
code: `
326+
import React, {Component} from 'react';
327+
import {Typography} from 'our-source';
328+
import {List} from 'another-source';
329+
export default class OurList extends Component {
330+
render() {
331+
const titleVal = 'bla';
332+
return (
333+
<List.Item title={titleVal}/>
334+
)
335+
}
336+
}`
337+
},
338+
{
339+
options: options,
340+
code: `
341+
import React, {Component} from 'react';
342+
import {Typography, List} from 'our-source';
343+
export default class OurList extends Component {
344+
render() {
345+
const titleVal = 'bla';
346+
return (
347+
<List.Item title={titleVal}/>
348+
)
349+
}
350+
}`
351+
},
352+
{
353+
options: options,
354+
code: `
355+
import React, {Component} from 'react';
356+
import {Typography, List} from 'our-source';
357+
export default class OurList extends Component {
358+
render() {
359+
const titleVal = this.props.title;
360+
const subtitleVal = this.props.subtitle;
361+
return (
362+
<List.Item title={titleVal} subtitle={subtitleVal}/>
363+
)
364+
}
365+
}`
366+
},
367+
{
368+
options: options,
369+
code: `
370+
import React, {Component} from 'react';
371+
import {Typography, List} from 'our-source';
372+
export default class OurList extends Component {
373+
render() {
374+
const {title, subtitle} = this.props;
375+
return (
376+
<List.Item title={title} subtitle={subtitle}/>
377+
)
378+
}
379+
}`
380+
},
381+
{
382+
options: options,
383+
code: `
384+
import React, {Component} from 'react';
385+
import {Typography, List} from 'our-source';
386+
export default class OurList extends Component {
387+
render() {
388+
const {title: titleVal, subtitle: subtitleVal} = this.props;
389+
return (
390+
<List.Item title={titleVal} subtitle={subtitleVal}/>
391+
)
392+
}
393+
}`,
394+
errors: [{message: `'Typography.title' is deprecated. Please use 'Typography.heading' instead (fix is available).`}]
315395
}
316396
],
317397
invalid: [
@@ -439,6 +519,196 @@ ruleTester.run('typography-deprecation', rule, {
439519
options: options,
440520
code: `${fullClassTest2}`,
441521
errors: [{message: error}]
442-
}
522+
},
523+
{
524+
options: options,
525+
code: `
526+
import React, {Component} from 'react';
527+
import {Typography, Text} from 'our-source';
528+
export default class OurList extends Component {
529+
render() {
530+
const titleVal = true;
531+
return (
532+
<Text title={titleVal}/>
533+
)
534+
}
535+
}`,
536+
errors: [{message: `'Typography.title' is deprecated. Please use 'Typography.heading' instead (fix is available).`}]
537+
},
538+
{
539+
options: options,
540+
code: `
541+
import React, {Component} from 'react';
542+
import {Typography, Text} from 'our-source';
543+
export default class OurList extends Component {
544+
render() {
545+
const {isTitle} = this.props;
546+
const titleVal = this.props.isTitle;
547+
const subtitleVal = !this.props.isTitle;
548+
return (
549+
<Text title={titleVal} subtitle={subtitleVal}/>
550+
)
551+
}
552+
}`,
553+
errors: [{message: `'Typography.title' is deprecated. Please use 'Typography.heading' instead (fix is available).`}]
554+
},
555+
{
556+
options: options,
557+
code: `
558+
import React, {Component} from 'react';
559+
import {Typography, Text} from 'our-source';
560+
export default class OurList extends Component {
561+
render() {
562+
const {isTitle} = this.props;
563+
const titleVal = isTitle;
564+
const subtitleVal = !isTitle;
565+
return (
566+
<Text title={titleVal} subtitle={subtitleVal}/>
567+
)
568+
}
569+
}`,
570+
errors: [{message: `'Typography.title' is deprecated. Please use 'Typography.heading' instead (fix is available).`}]
571+
},
572+
{
573+
options: options,
574+
code: `
575+
import React, {Component} from 'react';
576+
import {Typography, TextField} from 'our-source';
577+
export default class OurList extends Component {
578+
render() {
579+
const titleVal = true;
580+
return (
581+
<TextField title={titleVal}/>
582+
)
583+
}
584+
}`,
585+
errors: [{message: `'Typography.title' is deprecated. Please use 'Typography.heading' instead (fix is available).`}]
586+
},
587+
{
588+
options: options,
589+
code: `
590+
import React, {Component} from 'react';
591+
import {Typography, TextField} from 'our-source';
592+
export default class OurList extends Component {
593+
render() {
594+
const {isTitle} = this.props;
595+
const titleVal = this.props.isTitle;
596+
const subtitleVal = !this.props.isTitle;
597+
return (
598+
<TextField title={titleVal} subtitle={subtitleVal}/>
599+
)
600+
}
601+
}`,
602+
errors: [{message: `'Typography.title' is deprecated. Please use 'Typography.heading' instead (fix is available).`}]
603+
},
604+
{
605+
options: options,
606+
code: `
607+
import React, {Component} from 'react';
608+
import {Typography, TextField} from 'our-source';
609+
export default class OurList extends Component {
610+
render() {
611+
const {isTitle} = this.props;
612+
const titleVal = isTitle;
613+
const subtitleVal = !isTitle;
614+
return (
615+
<TextField title={titleVal} subtitle={subtitleVal}/>
616+
)
617+
}
618+
}`,
619+
errors: [{message: `'Typography.title' is deprecated. Please use 'Typography.heading' instead (fix is available).`}]
620+
},
621+
// TODO: these tests are not currently supported, they might be supported when prop-value-shape-deprecation is merged (or we'll have to add support)
622+
// {
623+
// options: options,
624+
// code: `
625+
// import React, {Component} from 'react';
626+
// import {Typography, Button} from 'our-source';
627+
// export default class OurList extends Component {
628+
// render() {
629+
// const titleVal = true;
630+
// return (
631+
// <Button labelProps={{title: titleVal}}/>
632+
// )
633+
// }
634+
// }`,
635+
// errors: [{message: `'Typography.title' is deprecated. Please use 'Typography.heading' instead (fix is available).`}]
636+
// },
637+
// {
638+
// options: options,
639+
// code: `
640+
// import React, {Component} from 'react';
641+
// import {Typography, Button} from 'our-source';
642+
// export default class OurList extends Component {
643+
// render() {
644+
// const titleVal = true;
645+
// return (
646+
// <Button title={titleVal}/>
647+
// )
648+
// }
649+
// }`,
650+
// errors: [{message: `'Typography.title' is deprecated. Please use 'Typography.heading' instead (fix is available).`}]
651+
// },
652+
// {
653+
// options: options,
654+
// code: `
655+
// import React, {Component} from 'react';
656+
// import {Typography, Card} from 'our-source';
657+
// export default class OurList extends Component {
658+
// render() {
659+
// const titleVal = true;
660+
// return (
661+
// <Card.Section content={{title: titleVal}}/>
662+
// )
663+
// }
664+
// }`,
665+
// errors: [{message: `'Typography.title' is deprecated. Please use 'Typography.heading' instead (fix is available).`}]
666+
// },
667+
// {
668+
// options: options,
669+
// code: `
670+
// import React, {Component} from 'react';
671+
// import {Typography, TabBar} from 'our-source';
672+
// export default class OurList extends Component {
673+
// render() {
674+
// const titleVal = true;
675+
// return (
676+
// <TabBar labelStyle={{title: titleVal}} selectedLabelStyle={{title: titleVal}}/>
677+
// )
678+
// }
679+
// }`,
680+
// errors: [{message: `'Typography.title' is deprecated. Please use 'Typography.heading' instead (fix is available).`}]
681+
// },
682+
// {
683+
// options: options,
684+
// code: `
685+
// import React, {Component} from 'react';
686+
// import {Typography, Label} from 'our-source';
687+
// export default class OurList extends Component {
688+
// render() {
689+
// const titleVal = true;
690+
// return (
691+
// <Label labelProps={{title: titleVal}}/>
692+
// )
693+
// }
694+
// }`,
695+
// errors: [{message: `'Typography.title' is deprecated. Please use 'Typography.heading' instead (fix is available).`}]
696+
// },
697+
// TODO: this is not currently supported, it should be easily supported after the new utils are added
698+
// {
699+
// options: options,
700+
// code: `
701+
// import React, {Component} from 'react';
702+
// import {Typography, Text as T} from 'our-source';
703+
// export default class OurList extends Component {
704+
// render() {
705+
// const titleVal = true;
706+
// return (
707+
// <T title={titleVal}/>
708+
// )
709+
// }
710+
// }`,
711+
// errors: [{message: `'Typography.title' is deprecated. Please use 'Typography.heading' instead (fix is available).`}]
712+
// },
443713
],
444714
});

‎eslint-rules/tests/typography_deprecation.json

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,5 +3,11 @@
33
"path": "Typography.deprecated",
44
"message": "Please use 'Typography.valid' instead (fix is available).",
55
"fix": "Typography.valid"
6+
},
7+
{
8+
"path": "Typography.title",
9+
"message": "Please use 'Typography.heading' instead (fix is available).",
10+
"fix": "Typography.heading",
11+
"components": ["Text", "TextField"]
612
}
713
]

0 commit comments

Comments
 (0)