Fix eslint-plugin-twenty (#1640)
* Fixed color rule * Fixed naming * Fix effect component rule * Deactivated broken rules * Fixed lint * Complete eslint-plugin-twenty work --------- Co-authored-by: Charles Bochet <charles@twenty.com>
This commit is contained in:
Lucas Bordeau
1
packages/eslint-plugin-twenty-ts/.gitignore
vendored
1
packages/eslint-plugin-twenty-ts/.gitignore
vendored
@ -1 +0,0 @@
|
||||
dist/
|
||||
@ -1,9 +0,0 @@
|
||||
module.exports = {
|
||||
rules: {
|
||||
"effect-components": require("./src/rules/effect-components"),
|
||||
"no-hardcoded-colors": require("./src/rules/no-hardcoded-colors"),
|
||||
"matching-state-variable": require("./src/rules/matching-state-variable"),
|
||||
"sort-css-properties-alphabetically": require("./src/rules/sort-css-properties-alphabetically"),
|
||||
"styled-components-prefixed-with-styled": require("./src/rules/styled-components-prefixed-with-styled"),
|
||||
},
|
||||
};
|
||||
@ -1,7 +0,0 @@
|
||||
/** @type {import('ts-jest').JestConfigWithTsJest} */
|
||||
module.exports = {
|
||||
preset: 'ts-jest',
|
||||
testEnvironment: 'node',
|
||||
testRegex: '(/__tests__/.*|(\\.|/)(test|spec))\\.tsx?$',
|
||||
"moduleDirectories": ["node_modules"]
|
||||
};
|
||||
@ -1,36 +0,0 @@
|
||||
{
|
||||
"name": "eslint-plugin-twenty-ts",
|
||||
"version": "1.0.2",
|
||||
"description": "",
|
||||
"main": "dist/index.js",
|
||||
"files": [
|
||||
"dist",
|
||||
"src"
|
||||
],
|
||||
"scripts": {
|
||||
"test": "jest",
|
||||
"build": "rimraf ./dist && tsc --outDir ./dist"
|
||||
},
|
||||
"keywords": [],
|
||||
"author": "",
|
||||
"license": "ISC",
|
||||
"dependencies": {},
|
||||
"devDependencies": {
|
||||
"@types/jest": "^29.5.4",
|
||||
"@typescript-eslint/eslint-plugin": "^6.7.0",
|
||||
"@typescript-eslint/parser": "^6.7.0",
|
||||
"@typescript-eslint/rule-tester": "^6.7.0",
|
||||
"@typescript-eslint/utils": "^6.7.0",
|
||||
"eslint": "^8.49.0",
|
||||
"eslint-config-prettier": "^9.0.0",
|
||||
"eslint-config-standard-with-typescript": "^39.0.0",
|
||||
"eslint-plugin-import": "^2.28.1",
|
||||
"eslint-plugin-prettier": "^5.0.0",
|
||||
"jest": "^28.1.3",
|
||||
"postcss": "^8.4.29",
|
||||
"prettier": "^3.0.3",
|
||||
"ts-jest": "^29.1.1",
|
||||
"ts-node": "^10.9.1",
|
||||
"typescript": "^5.2.2"
|
||||
}
|
||||
}
|
||||
@ -1,114 +0,0 @@
|
||||
import { TSESTree, ESLintUtils } from "@typescript-eslint/utils";
|
||||
|
||||
const createRule = ESLintUtils.RuleCreator((name) => `https://docs.twenty.com`);
|
||||
|
||||
const checkIsPascalCase = (input: string): boolean => {
|
||||
const pascalCaseRegex = /^(?:\p{Uppercase_Letter}\p{Letter}*)+$/u;
|
||||
|
||||
return pascalCaseRegex.test(input);
|
||||
};
|
||||
|
||||
const effectComponentsRule = createRule({
|
||||
create(context) {
|
||||
const checkThatNodeIsEffectComponent = (node: TSESTree.FunctionDeclaration | TSESTree.ArrowFunctionExpression | TSESTree.FunctionExpression) => {
|
||||
const isPascalCase = checkIsPascalCase(node.id?.name ?? "");
|
||||
|
||||
if(!isPascalCase) {
|
||||
return;
|
||||
}
|
||||
|
||||
const isReturningFragmentOrNull = (
|
||||
// Direct return of JSX fragment, e.g., () => <></>
|
||||
(node.body.type === 'JSXFragment' && node.body.children.length === 0) ||
|
||||
// Direct return of null, e.g., () => null
|
||||
(node.body.type === 'Literal' && node.body.value === null) ||
|
||||
// Return JSX fragment or null from block
|
||||
(node.body.type === 'BlockStatement' &&
|
||||
node.body.body.some(statement =>
|
||||
statement.type === 'ReturnStatement' &&
|
||||
(
|
||||
// Empty JSX fragment return, e.g., return <></>;
|
||||
(statement.argument?.type === 'JSXFragment' && statement.argument.children.length === 0) ||
|
||||
// Empty React.Fragment return, e.g., return <React.Fragment></React.Fragment>;
|
||||
(statement.argument?.type === 'JSXElement' &&
|
||||
statement.argument.openingElement.name.type === 'JSXIdentifier' &&
|
||||
statement.argument.openingElement.name.name === 'React.Fragment' &&
|
||||
statement.argument.children.length === 0) ||
|
||||
// Literal null return, e.g., return null;
|
||||
(statement.argument?.type === 'Literal' && statement.argument.value === null)
|
||||
)
|
||||
))
|
||||
);
|
||||
|
||||
const hasEffectSuffix = node.id?.name.endsWith("Effect");
|
||||
|
||||
const hasEffectSuffixButIsNotEffectComponent = hasEffectSuffix && !isReturningFragmentOrNull
|
||||
const isEffectComponentButDoesNotHaveEffectSuffix = !hasEffectSuffix && isReturningFragmentOrNull;
|
||||
|
||||
if(isEffectComponentButDoesNotHaveEffectSuffix) {
|
||||
context.report({
|
||||
node,
|
||||
messageId: "effectSuffix",
|
||||
data: {
|
||||
componentName: node.id?.name,
|
||||
},
|
||||
fix(fixer) {
|
||||
if (node.id) {
|
||||
return fixer.replaceText(
|
||||
node.id,
|
||||
node.id?.name + "Effect",
|
||||
);
|
||||
}
|
||||
|
||||
return null;
|
||||
},
|
||||
});
|
||||
} else if(hasEffectSuffixButIsNotEffectComponent) {
|
||||
context.report({
|
||||
node,
|
||||
messageId: "noEffectSuffix",
|
||||
data: {
|
||||
componentName: node.id?.name,
|
||||
},
|
||||
fix(fixer) {
|
||||
if (node.id) {
|
||||
return fixer.replaceText(
|
||||
node.id,
|
||||
node.id?.name.replace("Effect", ""),
|
||||
);
|
||||
}
|
||||
|
||||
return null;
|
||||
},
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
ArrowFunctionExpression: checkThatNodeIsEffectComponent,
|
||||
FunctionDeclaration: checkThatNodeIsEffectComponent,
|
||||
FunctionExpression: checkThatNodeIsEffectComponent,
|
||||
};
|
||||
},
|
||||
name: "effect-components",
|
||||
meta: {
|
||||
docs: {
|
||||
description:
|
||||
"Effect components should end with the Effect suffix. This rule checks only components that are in PascalCase and that return a JSX fragment or null. Any renderProps or camelCase components are ignored.",
|
||||
},
|
||||
messages: {
|
||||
effectSuffix:
|
||||
"Effect component {{ componentName }} should end with the Effect suffix.",
|
||||
noEffectSuffix:
|
||||
"Component {{ componentName }} shouldn't end with the Effect suffix because it doesn't return a JSX fragment or null.",
|
||||
},
|
||||
type: "suggestion",
|
||||
schema: [],
|
||||
fixable: "code",
|
||||
},
|
||||
defaultOptions: [],
|
||||
});
|
||||
|
||||
module.exports = effectComponentsRule;
|
||||
|
||||
export default effectComponentsRule;
|
||||
@ -1,141 +0,0 @@
|
||||
import {
|
||||
TSESTree,
|
||||
ESLintUtils,
|
||||
AST_NODE_TYPES,
|
||||
} from "@typescript-eslint/utils";
|
||||
|
||||
const createRule = ESLintUtils.RuleCreator((name) => `https://docs.twenty.com`);
|
||||
|
||||
const matchingStateVariableRule = createRule({
|
||||
create: (context) => {
|
||||
return {
|
||||
VariableDeclarator(node: TSESTree.VariableDeclarator) {
|
||||
if (
|
||||
node?.init?.type === AST_NODE_TYPES.CallExpression &&
|
||||
node.init.callee.type === AST_NODE_TYPES.Identifier &&
|
||||
[
|
||||
"useRecoilState",
|
||||
"useRecoilFamilyState",
|
||||
"useRecoilSelector",
|
||||
"useRecoilScopedState",
|
||||
"useRecoilScopedFamilyState",
|
||||
"useRecoilScopedSelector",
|
||||
"useRecoilValue",
|
||||
].includes(node.init.callee.name)
|
||||
) {
|
||||
const stateNameBase =
|
||||
node.init.arguments?.[0]?.type === AST_NODE_TYPES.Identifier
|
||||
? node.init.arguments[0].name
|
||||
: undefined;
|
||||
|
||||
if (!stateNameBase) {
|
||||
return;
|
||||
}
|
||||
|
||||
let expectedVariableNameBase = stateNameBase.replace(
|
||||
/(State|FamilyState|Selector|ScopedState|ScopedFamilyState|ScopedSelector)$/,
|
||||
""
|
||||
);
|
||||
|
||||
if (node.id.type === AST_NODE_TYPES.Identifier) {
|
||||
const actualVariableName = node.id.name;
|
||||
if (actualVariableName !== expectedVariableNameBase) {
|
||||
context.report({
|
||||
node,
|
||||
messageId: "invalidVariableName",
|
||||
data: {
|
||||
actual: actualVariableName,
|
||||
expected: expectedVariableNameBase,
|
||||
callee: node.init.callee.name,
|
||||
},
|
||||
fix(fixer) {
|
||||
return fixer.replaceText(node.id, expectedVariableNameBase);
|
||||
},
|
||||
});
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
if (node.id.type === AST_NODE_TYPES.ArrayPattern) {
|
||||
const actualVariableName =
|
||||
node.id.elements?.[0]?.type === AST_NODE_TYPES.Identifier
|
||||
? node.id.elements[0].name
|
||||
: undefined;
|
||||
if (
|
||||
actualVariableName &&
|
||||
actualVariableName !== expectedVariableNameBase
|
||||
) {
|
||||
context.report({
|
||||
node,
|
||||
messageId: "invalidVariableName",
|
||||
data: {
|
||||
actual: actualVariableName,
|
||||
expected: expectedVariableNameBase,
|
||||
callee: node.init.callee.name,
|
||||
},
|
||||
fix(fixer) {
|
||||
if (node.id.type === AST_NODE_TYPES.ArrayPattern) {
|
||||
return fixer.replaceText(
|
||||
node.id.elements[0] as TSESTree.Node,
|
||||
expectedVariableNameBase
|
||||
);
|
||||
}
|
||||
return null;
|
||||
},
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
if (node.id.elements?.[1]?.type === AST_NODE_TYPES.Identifier) {
|
||||
const actualSetterName = node.id.elements[1].name;
|
||||
const expectedSetterName = `set${expectedVariableNameBase
|
||||
.charAt(0)
|
||||
.toUpperCase()}${expectedVariableNameBase.slice(1)}`;
|
||||
|
||||
if (actualSetterName !== expectedSetterName) {
|
||||
context.report({
|
||||
node,
|
||||
messageId: "invalidSetterName",
|
||||
data: {
|
||||
actual: actualSetterName,
|
||||
expected: expectedSetterName,
|
||||
},
|
||||
fix(fixer) {
|
||||
if (node.id.type === AST_NODE_TYPES.ArrayPattern) {
|
||||
return fixer.replaceText(
|
||||
node.id.elements[1]!,
|
||||
expectedSetterName
|
||||
);
|
||||
}
|
||||
return null;
|
||||
},
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
};
|
||||
},
|
||||
name: "recoil-hook-naming",
|
||||
meta: {
|
||||
type: "problem",
|
||||
docs: {
|
||||
description: "Ensure recoil value and setter are named after their atom name",
|
||||
recommended: "recommended",
|
||||
},
|
||||
fixable: "code",
|
||||
schema: [],
|
||||
messages: {
|
||||
invalidVariableName:
|
||||
"Invalid usage of {{hookName}}: the value should be named '{{expectedName}}' but found '{{actualName}}'.",
|
||||
invalidSetterName:
|
||||
"Invalid usage of {{hookName}}: Expected setter '{{expectedName}}' but found '{{actualName}}'.",
|
||||
},
|
||||
},
|
||||
defaultOptions: [],
|
||||
});
|
||||
|
||||
module.exports = matchingStateVariableRule;
|
||||
|
||||
export default matchingStateVariableRule;
|
||||
@ -1,49 +0,0 @@
|
||||
import { TSESTree, ESLintUtils } from "@typescript-eslint/utils";
|
||||
|
||||
const createRule = ESLintUtils.RuleCreator((name) => `https://docs.twenty.com`);
|
||||
|
||||
const noHardcodedColorsRule = createRule({
|
||||
create(context) {
|
||||
return {
|
||||
TaggedTemplateExpression(node: TSESTree.TaggedTemplateExpression) {
|
||||
if (context.getFilename().endsWith("themes.ts")) {
|
||||
return;
|
||||
}
|
||||
|
||||
node.quasi.quasis.forEach((quasi) => {
|
||||
const colorRegex =
|
||||
/(?:rgba?\((\d{1,3}),\s*(\d{1,3}),\s*(\d{1,3})(,\s*\d+\.?\d*)?\))|(?:#[0-9a-fA-F]{6})/i;
|
||||
|
||||
if (colorRegex.test(quasi.value.raw)) {
|
||||
context.report({
|
||||
node,
|
||||
messageId: "hardcodedColor",
|
||||
data: {
|
||||
color: quasi.value.raw,
|
||||
},
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
};
|
||||
},
|
||||
name: "no-hardcoded-colors",
|
||||
meta: {
|
||||
docs: {
|
||||
description:
|
||||
"Do not use hardcoded RGBA or Hex colors. Please use a color from the theme file.",
|
||||
},
|
||||
messages: {
|
||||
hardcodedColor:
|
||||
"Hardcoded color {{ color }} found. Please use a color from the theme file.",
|
||||
},
|
||||
type: "suggestion",
|
||||
schema: [],
|
||||
fixable: "code",
|
||||
},
|
||||
defaultOptions: [],
|
||||
});
|
||||
|
||||
module.exports = noHardcodedColorsRule;
|
||||
|
||||
export default noHardcodedColorsRule;
|
||||
@ -1,268 +0,0 @@
|
||||
import postcss from "postcss";
|
||||
import { AST_NODE_TYPES, TSESTree } from "@typescript-eslint/utils";
|
||||
import { ESLintUtils } from "@typescript-eslint/utils";
|
||||
import type { Identifier, TaggedTemplateExpression } from "@babel/types";
|
||||
import {
|
||||
RuleFix,
|
||||
RuleFixer,
|
||||
SourceCode,
|
||||
} from "@typescript-eslint/utils/ts-eslint";
|
||||
|
||||
const createRule = ESLintUtils.RuleCreator((name) => `https://docs.twenty.com`);
|
||||
|
||||
interface loc {
|
||||
start: {
|
||||
line: number;
|
||||
column: number;
|
||||
};
|
||||
end: {
|
||||
line: number;
|
||||
column: number;
|
||||
};
|
||||
}
|
||||
|
||||
const isStyledTagname = (node: TSESTree.TaggedTemplateExpression): boolean => {
|
||||
return (
|
||||
(node.tag.type === "Identifier" && node.tag.name === "css") ||
|
||||
(node.tag.type === "MemberExpression" &&
|
||||
// @ts-ignore
|
||||
node.tag.object.name === "styled") ||
|
||||
(node.tag.type === "CallExpression" &&
|
||||
// @ts-ignore
|
||||
(node.tag.callee.name === "styled" ||
|
||||
// @ts-ignore
|
||||
(node.tag.callee.object &&
|
||||
// @ts-ignore
|
||||
|
||||
((node.tag.callee.object.callee &&
|
||||
// @ts-ignore
|
||||
node.tag.callee.object.callee.name === "styled") ||
|
||||
// @ts-ignore
|
||||
(node.tag.callee.object.object &&
|
||||
// @ts-ignore
|
||||
node.tag.callee.object.object.name === "styled")))))
|
||||
);
|
||||
};
|
||||
/**
|
||||
* An atomic rule is a rule without nested rules.
|
||||
*/
|
||||
const isValidAtomicRule = (
|
||||
rule: postcss.Root
|
||||
): { isValid: boolean; loc?: loc } => {
|
||||
const decls = rule.nodes.filter(
|
||||
(node) => node.type === "decl"
|
||||
) as unknown as postcss.Declaration[];
|
||||
if (decls.length < 0) {
|
||||
return { isValid: true };
|
||||
}
|
||||
|
||||
for (let i = 1; i < decls.length; i++) {
|
||||
const current = decls[i].prop;
|
||||
const prev = decls[i - 1].prop;
|
||||
if (current < prev) {
|
||||
const loc = {
|
||||
start: {
|
||||
line: decls[i - 1].source!.start!.line,
|
||||
column: decls[i - 1].source!.start!.column - 1,
|
||||
},
|
||||
end: {
|
||||
line: decls[i].source!.end!.line,
|
||||
column: decls[i].source!.end!.column - 1,
|
||||
},
|
||||
};
|
||||
|
||||
return { isValid: false, loc };
|
||||
}
|
||||
}
|
||||
|
||||
return { isValid: true };
|
||||
};
|
||||
|
||||
const isValidRule = (rule: postcss.Root): { isValid: boolean; loc?: loc } => {
|
||||
// check each rule recursively
|
||||
const { isValid, loc } = rule.nodes.reduce<{ isValid: boolean; loc?: loc }>(
|
||||
(map, node) => {
|
||||
return node.type === "rule"
|
||||
? isValidRule(node as unknown as postcss.Root)
|
||||
: map;
|
||||
},
|
||||
{ isValid: true }
|
||||
);
|
||||
|
||||
// if there is any invalid rule, return result
|
||||
if (!isValid) {
|
||||
return { isValid, loc };
|
||||
}
|
||||
|
||||
// check declarations
|
||||
return isValidAtomicRule(rule);
|
||||
};
|
||||
|
||||
const getNodeStyles = (node: TSESTree.TaggedTemplateExpression): string => {
|
||||
const [firstQuasi, ...quasis] = node.quasi.quasis;
|
||||
// remove line break added to the first quasi
|
||||
const lineBreakCount = node.quasi.loc.start.line - 1;
|
||||
let styles = `${"\n".repeat(lineBreakCount)}${" ".repeat(
|
||||
node.quasi.loc.start.column + 1
|
||||
)}${firstQuasi.value.raw}`;
|
||||
|
||||
// replace expression by spaces and line breaks
|
||||
quasis.forEach(({ value, loc }, idx) => {
|
||||
const prevLoc = idx === 0 ? firstQuasi.loc : quasis[idx - 1].loc;
|
||||
const lineBreaksCount = loc.start.line - prevLoc.end.line;
|
||||
const spacesCount =
|
||||
loc.start.line === prevLoc.end.line
|
||||
? loc.start.column - prevLoc.end.column + 2
|
||||
: loc.start.column + 1;
|
||||
styles = `${styles}${" "}${"\n".repeat(lineBreaksCount)}${" ".repeat(
|
||||
spacesCount
|
||||
)}${value.raw}`;
|
||||
});
|
||||
|
||||
return styles;
|
||||
};
|
||||
|
||||
const fix = ({
|
||||
rule,
|
||||
fixer,
|
||||
src,
|
||||
}: {
|
||||
rule: postcss.Rule;
|
||||
fixer: RuleFixer;
|
||||
src: SourceCode;
|
||||
}): RuleFix[] => {
|
||||
let fixings: RuleFix[] = [];
|
||||
|
||||
// concat fixings recursively
|
||||
rule.nodes.forEach((node) => {
|
||||
if (node.type === "rule") {
|
||||
fixings = [...fixings, ...fix({ rule: node, fixer, src })];
|
||||
}
|
||||
});
|
||||
|
||||
const declarations = rule.nodes.filter(
|
||||
(node) => node.type === "decl"
|
||||
) as unknown as postcss.Declaration[];
|
||||
const sortedDeclarations = sortDeclarations(declarations);
|
||||
|
||||
declarations.forEach((decl, idx) => {
|
||||
if (!areSameDeclarations(decl, sortedDeclarations[idx])) {
|
||||
try {
|
||||
const range = getDeclRange({ decl, src });
|
||||
const sortedDeclText = getDeclText({
|
||||
decl: sortedDeclarations[idx],
|
||||
src,
|
||||
});
|
||||
|
||||
fixings.push(fixer.removeRange([range.startIdx, range.endIdx + 1]));
|
||||
fixings.push(
|
||||
fixer.insertTextAfterRange(
|
||||
[range.startIdx, range.startIdx],
|
||||
sortedDeclText
|
||||
)
|
||||
);
|
||||
} catch (e) {
|
||||
console.log(e);
|
||||
}
|
||||
}
|
||||
});
|
||||
return fixings;
|
||||
};
|
||||
|
||||
const areSameDeclarations = (
|
||||
a: postcss.ChildNode,
|
||||
b: postcss.ChildNode
|
||||
): boolean =>
|
||||
a.source!.start!.line === b.source!.start!.line &&
|
||||
a.source!.start!.column === b.source!.start!.column;
|
||||
|
||||
const getDeclRange = ({
|
||||
decl,
|
||||
src,
|
||||
}: {
|
||||
decl: postcss.ChildNode;
|
||||
src: SourceCode;
|
||||
}): { startIdx: number; endIdx: number } => {
|
||||
const loc = {
|
||||
start: {
|
||||
line: decl.source!.start!.line,
|
||||
column: decl.source!.start!.column - 1,
|
||||
},
|
||||
end: {
|
||||
line: decl.source!.end!.line,
|
||||
column: decl.source!.end!.column - 1,
|
||||
},
|
||||
};
|
||||
|
||||
const startIdx = src.getIndexFromLoc(loc.start);
|
||||
const endIdx = src.getIndexFromLoc(loc.end);
|
||||
return { startIdx, endIdx };
|
||||
};
|
||||
|
||||
const getDeclText = ({
|
||||
decl,
|
||||
src,
|
||||
}: {
|
||||
decl: postcss.ChildNode;
|
||||
src: SourceCode;
|
||||
}) => {
|
||||
const { startIdx, endIdx } = getDeclRange({ decl, src });
|
||||
return src.getText().substring(startIdx, endIdx + 1);
|
||||
};
|
||||
|
||||
const sortDeclarations = (declarations: postcss.Declaration[]) =>
|
||||
declarations
|
||||
.slice()
|
||||
.sort((declA, declB) => (declA.prop > declB.prop ? 1 : -1));
|
||||
|
||||
const sortCssPropertiesAlphabeticallyRule = createRule({
|
||||
create(context) {
|
||||
return {
|
||||
TaggedTemplateExpression(node: TSESTree.TaggedTemplateExpression) {
|
||||
if (isStyledTagname(node)) {
|
||||
try {
|
||||
const root = postcss.parse(getNodeStyles(node));
|
||||
|
||||
const { isValid, loc } = isValidRule(root);
|
||||
|
||||
if (!isValid) {
|
||||
return context.report({
|
||||
node,
|
||||
messageId: "sort-css-properties-alphabetically",
|
||||
loc,
|
||||
fix: (fixer) =>
|
||||
fix({
|
||||
// @ts-ignore
|
||||
rule: root,
|
||||
fixer,
|
||||
src: context.getSourceCode(),
|
||||
}),
|
||||
});
|
||||
}
|
||||
} catch (e) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
},
|
||||
};
|
||||
},
|
||||
name: "sort-css-properties-alphabetically",
|
||||
meta: {
|
||||
docs: {
|
||||
description: "Styles are sorted alphabetically.",
|
||||
recommended: "recommended",
|
||||
},
|
||||
messages: {
|
||||
"sort-css-properties-alphabetically":
|
||||
"Declarations should be sorted alphabetically.",
|
||||
},
|
||||
type: "suggestion",
|
||||
schema: [],
|
||||
fixable: "code",
|
||||
},
|
||||
defaultOptions: [],
|
||||
});
|
||||
|
||||
module.exports = sortCssPropertiesAlphabeticallyRule;
|
||||
|
||||
export default sortCssPropertiesAlphabeticallyRule;
|
||||
@ -1,51 +0,0 @@
|
||||
import { TSESTree, ESLintUtils, AST_NODE_TYPES } from "@typescript-eslint/utils";
|
||||
|
||||
const createRule = ESLintUtils.RuleCreator((name) => `https://docs.twenty.com`);
|
||||
|
||||
const styledComponentsPrefixedWithStyledRule = createRule({
|
||||
create(context) {
|
||||
return {
|
||||
VariableDeclarator: (node: TSESTree.VariableDeclarator) => {
|
||||
const templateExpr = node.init
|
||||
if (templateExpr?.type !== AST_NODE_TYPES.TaggedTemplateExpression) {
|
||||
return;
|
||||
}
|
||||
const tag = templateExpr.tag
|
||||
const tagged = tag.type === AST_NODE_TYPES.MemberExpression ? tag.object
|
||||
: tag.type === AST_NODE_TYPES.CallExpression ? tag.callee
|
||||
: null
|
||||
if (tagged?.type === AST_NODE_TYPES.Identifier && tagged.name === 'styled') {
|
||||
const variable = node.id as TSESTree.Identifier;
|
||||
if (variable.name.startsWith('Styled')) {
|
||||
return;
|
||||
}
|
||||
context.report({
|
||||
node,
|
||||
messageId: 'noStyledPrefix',
|
||||
data: {
|
||||
componentName: variable.name
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
}
|
||||
},
|
||||
name: 'styled-components-prefixed-with-styled',
|
||||
meta: {
|
||||
type: 'suggestion',
|
||||
docs: {
|
||||
description: 'Warn when StyledComponents are not prefixed with Styled',
|
||||
recommended: "recommended"
|
||||
},
|
||||
messages: {
|
||||
noStyledPrefix: '{{componentName}} is a StyledComponent and is not prefixed with Styled.',
|
||||
},
|
||||
fixable: 'code',
|
||||
schema: [],
|
||||
},
|
||||
defaultOptions: []
|
||||
});
|
||||
|
||||
module.exports = styledComponentsPrefixedWithStyledRule;
|
||||
|
||||
export default styledComponentsPrefixedWithStyledRule;
|
||||
@ -1,85 +0,0 @@
|
||||
import { RuleTester } from "@typescript-eslint/rule-tester";
|
||||
|
||||
import effectComponentsRule from "../rules/effect-components";
|
||||
|
||||
const ruleTester = new RuleTester({
|
||||
parser: "@typescript-eslint/parser",
|
||||
parserOptions: {
|
||||
project: "./tsconfig.json",
|
||||
tsconfigRootDir: __dirname,
|
||||
ecmaFeatures: {
|
||||
jsx: true,
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
ruleTester.run("effect-components", effectComponentsRule, {
|
||||
valid: [
|
||||
{
|
||||
code: `const TestComponentEffect = () => <></>;`,
|
||||
},
|
||||
{
|
||||
code: `const TestComponent = () => <div></div>;`,
|
||||
},
|
||||
{
|
||||
code: `export const useUpdateEffect = () => null;`,
|
||||
},
|
||||
{
|
||||
code: `export const useUpdateEffect = () => <></>;`,
|
||||
},
|
||||
{
|
||||
code: `const TestComponent = () => <><div></div></>;`,
|
||||
},
|
||||
{
|
||||
code: `const TestComponentEffect = () => null;`,
|
||||
},
|
||||
{
|
||||
code: `const TestComponentEffect = () => {
|
||||
useEffect(() => {}, []);
|
||||
|
||||
return null;
|
||||
}`,
|
||||
},
|
||||
{
|
||||
code: `const TestComponentEffect = () => {
|
||||
useEffect(() => {}, []);
|
||||
|
||||
return <></>;
|
||||
}`,
|
||||
},
|
||||
{
|
||||
code: `const TestComponentEffect = () => {
|
||||
useEffect(() => {}, []);
|
||||
|
||||
return <></>;
|
||||
}`,
|
||||
},
|
||||
{
|
||||
code: `const TestComponentEffect = () => {
|
||||
useEffect(() => {}, []);
|
||||
|
||||
return null;
|
||||
}`,
|
||||
},
|
||||
],
|
||||
invalid: [
|
||||
{
|
||||
code: "const TestComponent = () => <></>;",
|
||||
output: 'const TestComponentEffect = () => <></>;',
|
||||
errors: [
|
||||
{
|
||||
messageId: "effectSuffix",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
code: "const TestComponentEffect = () => <><div></div></>;",
|
||||
output: 'const TestComponent = () => <><div></div></>;',
|
||||
errors: [
|
||||
{
|
||||
messageId: "noEffectSuffix",
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
});
|
||||
@ -1 +0,0 @@
|
||||
// Required by typescript-eslint https://typescript-eslint.io/packages/rule-tester#type-aware-testing
|
||||
@ -1,47 +0,0 @@
|
||||
import { RuleTester } from "@typescript-eslint/rule-tester";
|
||||
import matchingStateVariableRule from "../rules/matching-state-variable";
|
||||
|
||||
const ruleTester = new RuleTester({
|
||||
parser: "@typescript-eslint/parser",
|
||||
parserOptions: {
|
||||
project: "./tsconfig.json",
|
||||
tsconfigRootDir: __dirname,
|
||||
ecmaFeatures: {
|
||||
jsx: true,
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
ruleTester.run('matching-state-variable', matchingStateVariableRule, {
|
||||
valid: [
|
||||
{
|
||||
code: 'const variable = useRecoilValue(variableState);',
|
||||
},
|
||||
{
|
||||
code: 'const [variable, setVariable] = useRecoilState(variableState);',
|
||||
},
|
||||
],
|
||||
invalid: [
|
||||
{
|
||||
code: 'const myValue = useRecoilValue(variableState);',
|
||||
errors: [
|
||||
{
|
||||
messageId: 'invalidVariableName',
|
||||
},
|
||||
],
|
||||
output: 'const variable = useRecoilValue(variableState);',
|
||||
},
|
||||
{
|
||||
code: 'const [myValue, setMyValue] = useRecoilState(variableState);',
|
||||
errors: [
|
||||
{
|
||||
messageId: 'invalidVariableName',
|
||||
},
|
||||
{
|
||||
messageId: 'invalidSetterName',
|
||||
},
|
||||
],
|
||||
output: 'const [variable, setVariable] = useRecoilState(variableState);',
|
||||
},
|
||||
],
|
||||
});
|
||||
@ -1,42 +0,0 @@
|
||||
import { RuleTester } from "@typescript-eslint/rule-tester";
|
||||
import noHardcodedColorsRule from "../rules/no-hardcoded-colors";
|
||||
|
||||
const ruleTester = new RuleTester({
|
||||
parser: "@typescript-eslint/parser",
|
||||
parserOptions: {
|
||||
project: "./tsconfig.json",
|
||||
tsconfigRootDir: __dirname,
|
||||
ecmaFeatures: {
|
||||
jsx: true,
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
ruleTester.run("no-hardcoded-colors", noHardcodedColorsRule, {
|
||||
valid: [
|
||||
{
|
||||
code: "const color = theme.background.secondary;",
|
||||
},
|
||||
{
|
||||
code: 'const color = "#000000";',
|
||||
},
|
||||
],
|
||||
invalid: [
|
||||
{
|
||||
code: 'const color = "rgb(154,205,50)";',
|
||||
errors: [
|
||||
{
|
||||
messageId: "hardcodedColor",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
code: 'const color = "#ADFF2F";',
|
||||
errors: [
|
||||
{
|
||||
messageId: "hardcodedColor",
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
});
|
||||
@ -1 +0,0 @@
|
||||
// Required by typescript-eslint https://typescript-eslint.io/packages/rule-tester#type-aware-testing
|
||||
@ -1,58 +0,0 @@
|
||||
import { RuleTester } from "@typescript-eslint/rule-tester";
|
||||
import sortCssPropertiesAlphabeticallyRule from "../rules/sort-css-properties-alphabetically";
|
||||
|
||||
const ruleTester = new RuleTester({
|
||||
parser: "@typescript-eslint/parser",
|
||||
parserOptions: {
|
||||
project: "./tsconfig.json",
|
||||
tsconfigRootDir: __dirname,
|
||||
ecmaFeatures: {
|
||||
jsx: true,
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
ruleTester.run("sort-css-properties-alphabetically", sortCssPropertiesAlphabeticallyRule, {
|
||||
valid: [
|
||||
{
|
||||
code: 'const style = css`color: red;`;',
|
||||
filename: 'react.tsx',
|
||||
},
|
||||
{
|
||||
code: 'const style = styled.div`background-color: $bgColor;`;',
|
||||
filename: 'react.tsx',
|
||||
},
|
||||
],
|
||||
invalid: [
|
||||
{
|
||||
code: 'const style = css`color: #FF0000;`;',
|
||||
filename: 'react.tsx',
|
||||
errors: [
|
||||
{
|
||||
messageId: "sort-css-properties-alphabetically",
|
||||
suggestions: [
|
||||
{
|
||||
messageId: "sort-css-properties-alphabetically",
|
||||
output: 'const style = css`color: red;`;',
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
code: 'const style = styled.div`background-color: $bgColor; color: #FFFFFF;`;',
|
||||
filename: 'react.tsx',
|
||||
errors: [
|
||||
{
|
||||
messageId: "sort-css-properties-alphabetically",
|
||||
suggestions: [
|
||||
{
|
||||
messageId: "sort-css-properties-alphabetically",
|
||||
output: 'const style = styled.div`background-color: $bgColor; color: white;`;',
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
});
|
||||
@ -1,46 +0,0 @@
|
||||
import { RuleTester } from "@typescript-eslint/rule-tester";
|
||||
import styledComponentsPrefixedWithStyledRule from "../rules/styled-components-prefixed-with-styled";
|
||||
|
||||
const ruleTester = new RuleTester({
|
||||
parser: "@typescript-eslint/parser",
|
||||
parserOptions: {
|
||||
project: "./tsconfig.json",
|
||||
tsconfigRootDir: __dirname,
|
||||
ecmaFeatures: {
|
||||
jsx: true,
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
ruleTester.run("styled-components-prefixed-with-styled", styledComponentsPrefixedWithStyledRule, {
|
||||
valid: [
|
||||
{
|
||||
code: 'const StyledButton = styled.button``;',
|
||||
filename: 'react.tsx',
|
||||
},
|
||||
{
|
||||
code: 'const StyledComponent = styled.div``;',
|
||||
filename: 'react.tsx',
|
||||
},
|
||||
],
|
||||
invalid: [
|
||||
{
|
||||
code: 'const Button = styled.button``;',
|
||||
filename: 'react.tsx',
|
||||
errors: [
|
||||
{
|
||||
messageId: 'noStyledPrefix',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
code: 'const Component = styled.div``;',
|
||||
filename: 'react.tsx',
|
||||
errors: [
|
||||
{
|
||||
messageId: 'noStyledPrefix',
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
});
|
||||
@ -1,6 +0,0 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"strict": true
|
||||
},
|
||||
"include": ["./file.ts", "./react.tsx"]
|
||||
}
|
||||
@ -1,14 +0,0 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
|
||||
/* Visit https://aka.ms/tsconfig to read more about this file */
|
||||
"target": "es2016", /* Set the JavaScript language version for emitted JavaScript and in clude compatible library declarations. */
|
||||
"module": "Node16", /* Specify what module code is generated. */
|
||||
"esModuleInterop": true, /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */
|
||||
"forceConsistentCasingInFileNames": true, /* Ensure that casing is correct in imports. */
|
||||
"strict": true, /* Enable all strict type-checking options. */
|
||||
"noImplicitAny": true, /* Enable error reporting for expressions and declarations with an implied 'any' type. */
|
||||
"skipLibCheck": true, /* Skip type checking all .d.ts files. */
|
||||
"moduleResolution": "Node16",
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user