admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

fix: Migrate all rules from eslint-plugin-twenty to eslint-plugin-twenty-ts (#1618)

Browse Source 
* migrate rules

* fix

* final

* final
This commit is contained in:
Anik Dhabal Babu
2023-09-17 20:43:05 +05:30
committed by GitHub
parent aaa63b3820
commit 84eaa45027
19 changed files with 732 additions and 405 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
front/.eslintrc.js
View File

@ -10,7 +10,6 @@ module.exports = {
'unused-imports',
'simple-import-sort',
'prefer-arrow',
'twenty',
'twenty-ts',
],
extends: [
@ -61,11 +60,11 @@ module.exports = {
'@typescript-eslint/no-explicit-any': 'off',
'simple-import-sort/imports': 'error',
'simple-import-sort/exports': 'error',
'twenty/sort-css-properties-alphabetically': 'error',
'twenty/no-hardcoded-colors': 'error',
'twenty/styled-components-prefixed-with-styled': 'error',
'twenty/matching-state-variable': 'error',
'twenty-ts/effect-components': 'error',
'twenty-ts/no-hardcoded-colors': 'error',
'twenty-ts/matching-state-variable': 'error',
'twenty-ts/sort-css-properties-alphabetically': 'error',
'twenty-ts/styled-components-prefixed-with-styled': 'error',
'func-style':['error', 'declaration', { 'allowArrowFunctions': true }],
"@typescript-eslint/no-unused-vars": "off",
"no-unused-vars": "off",

141
packages/eslint-plugin-twenty-ts/src/rules/matching-state-variable.ts Normal file
View File

@ -0,0 +1,141 @@
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;

49
packages/eslint-plugin-twenty-ts/src/rules/no-hardcoded-colors.ts Normal file
View File

@ -0,0 +1,49 @@
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: "avoidHardcodedColors",
data: {
color: quasi.value.raw,
},
});
}
});
},
};
},
name: "avoid-hardcoded-colors",
meta: {
type: "suggestion",
docs: {
description: "Avoid hardcoded RGBA or Hex colors, use colors from the theme file.",
recommended: "recommended",
},
schema: [],
fixable: "code",
messages: {
avoidHardcodedColors:
"Do not use hardcoded RGBA or Hex colors. Please use a color from the theme file.",
},
},
defaultOptions: []
});
module.exports = noHardcodedColorsRule;
export default noHardcodedColorsRule;

239
packages/eslint-plugin-twenty-ts/src/rules/sort-css-properties-alphabetically.ts Normal file
View File

@ -0,0 +1,239 @@
import { TSESTree, ESLintUtils, AST_NODE_TYPES } from "@typescript-eslint/utils";
import postcss from "postcss";
import {
RuleFixer,
SourceCode,
} from "@typescript-eslint/utils/ts-eslint";
const createRule = ESLintUtils.RuleCreator((name) => `https://docs.twenty.com`);
const isStyledTagname = (
node: TSESTree.TaggedTemplateExpression
): boolean =>
(node.tag.type === "Identifier" && node.tag.name === "css") ||
(node.tag.type === "MemberExpression" &&
node.tag.object.type === "Identifier" &&
node.tag.object.name === "styled") ||
(node.tag.type === "CallExpression" &&
(node.tag.callee.type === "Identifier" && node.tag.callee.name === "styled") ||
// @ts-ignore
(node.tag.callee.object &&
// @ts-ignore
((node.tag.callee.object.type === "CallExpression" &&
// @ts-ignore
node.tag.callee.object.callee.type === "Identifier" &&
// @ts-ignore
node.tag.callee.object.callee.name === "styled") ||
// @ts-ignore
(node.tag.callee.object.type === "MemberExpression" &&
// @ts-ignore
node.tag.callee.object.object.type === "Identifier" &&
// @ts-ignore
node.tag.callee.object.object.name === "styled")))
);
/**
* An atomic rule is a rule without nested rules.
*/
const isValidAtomicRule = (rule: postcss.Rule): { isValid: boolean; loc?: postcss.NodeSource } => {
const decls = rule.nodes.filter((node: postcss.Node) => node.type === "decl");
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 || 0,
column: (decls[i - 1].source?.start?.column || 0) - 1,
},
end: {
line: decls[i].source?.end?.line || 0,
column: (decls[i].source?.end?.column || 0) - 1,
},
};
return { isValid: false, loc };
}
}
return { isValid: true };
};
const isValidRule = (rule: postcss.Rule): { isValid: boolean; loc?: postcss.NodeSource } => {
// check each rule recursively
const { isValid, loc } = rule.nodes.reduce(
(map:any, node: postcss.Node) => {
return node.type === "rule" ? isValidRule(node) : 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) - 1;
let styles = `${"\n".repeat(lineBreakCount)}${" ".repeat(
(node.quasi.loc?.start?.column || 0) + 1
)}${firstQuasi.value.raw}`;
// replace expression by spaces and line breaks
quasis.forEach(({ value, loc }, idx) => {
const prevLoc = idx === 0 ? node.quasi.loc : quasis[idx - 1].loc;
const lineBreaksCount = (loc?.start?.line || 1) - (prevLoc?.end?.line || 0);
const spacesCount =
loc?.start?.line === prevLoc?.end?.line
? (loc?.start?.column || 0) - (prevLoc?.end?.column || 0) + 2
: (loc?.start?.column || 0) + 1;
styles = `${styles}${" "}${"\n".repeat(lineBreaksCount)}${" ".repeat(
spacesCount
)}${value.raw}`;
});
return styles;
};
const fix = ({
rule,
fixer,
src,
}: {
rule: postcss.Rule;
fixer: RuleFixer;
src: SourceCode;
}) => {
let fixings: ReturnType<RuleFixer["removeRange"] | RuleFixer["insertTextAfterRange"]>[] = [];
// concat fixings recursively
rule.nodes.forEach((node: postcss.Node) => {
if (node.type === "rule") {
fixings = [...fixings, ...fix({ rule: node, fixer, src })];
}
});
const declarations = rule.nodes.filter((node: postcss.Node) => node.type === "decl");
const sortedDeclarations = sortDeclarations(declarations);
declarations.forEach((decl: postcss.Declaration, idx: number) => {
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.Declaration,
b: postcss.Declaration
): boolean =>
a.source?.start.line === b.source?.start.line &&
a.source?.start.column === b.source?.start.column;
const getDeclRange = ({ decl, src }: { decl: postcss.Declaration; src: SourceCode }) => {
const loc = {
start: {
line: decl.source?.start?.line || 1,
column: (decl.source?.start?.column || 0) - 1,
},
end: {
line: decl.source?.end?.line || 1,
column: (decl.source?.end?.column || 0) - 1,
},
};
const startIdx = src.getIndexFromLoc(loc.start);
const endIdx = src.getIndexFromLoc(loc.end);
return { startIdx, endIdx };
};
const getDeclText = ({ decl, src }: { decl: postcss.Declaration; src: SourceCode }) => {
const { startIdx, endIdx } = getDeclRange({ decl, src });
return src.getText().substring(startIdx, endIdx + 1);
};
const sortDeclarations = (
declarations: postcss.Declaration[]
): 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;

51
packages/eslint-plugin-twenty-ts/src/rules/styled-components-prefixed-with-styled.ts Normal file
View File

@ -0,0 +1,51 @@
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;

47
packages/eslint-plugin-twenty-ts/src/tests/matching-state-variable.spec.ts Normal file
View File

@ -0,0 +1,47 @@
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 myState = useRecoilValue(someAtom);',
},
{
code: 'const [myState, setMyState] = useRecoilState(someAtom);',
},
],
invalid: [
{
code: 'const myValue = useRecoilValue(someAtom);',
errors: [
{
messageId: 'invalidVariableName',
},
],
output: 'const some = useRecoilValue(someAtom);',
},
{
code: 'const [myValue, setMyValue] = useRecoilState(someAtom);',
errors: [
{
messageId: 'invalidVariableName',
},
{
messageId: 'invalidSetterName',
},
],
output: 'const [some, setSome] = useRecoilState(someAtom);',
},
],
});

56
packages/eslint-plugin-twenty-ts/src/tests/no-hardcoded-colors.spec.ts Normal file
View File

@ -0,0 +1,56 @@
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.primaryColor;',
filename: 'example.ts',
},
{
code: 'const color = "#FFFFFF";',
filename: 'example.ts',
},
],
invalid: [
{
code: 'const color = "#FF0000";',
filename: 'example.ts',
errors: [
{
messageId: 'avoidHardcodedColors',
},
],
},
{
code: 'const color = "rgba(255, 0, 0, 0.5)";',
filename: 'example.ts',
errors: [
{
messageId: 'avoidHardcodedColors',
},
],
},
{
code: 'const color = "#123456";',
filename: 'themes.ts',
errors: [
{
messageId: 'avoidHardcodedColors',
},
],
},
],
});

60
packages/eslint-plugin-twenty-ts/src/tests/sort-css-properties-alphabetically.spec.ts Normal file
View File

@ -0,0 +1,60 @@
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: 'example.ts',
},
{
code: 'const style = styled.div`background-color: $bgColor;`;',
filename: 'example.ts',
},
// Add more valid cases as needed
],
invalid: [
{
code: 'const style = css`color: #FF0000;`;',
filename: 'example.ts',
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: 'example.ts',
errors: [
{
messageId: "sort-css-properties-alphabetically",
suggestions: [
{
messageId: "sort-css-properties-alphabetically",
output: 'const style = styled.div`background-color: $bgColor; color: white;`;',
},
],
},
],
},
// Add more invalid cases as needed
],
});

75
packages/eslint-plugin-twenty-ts/src/tests/styled-components-prefixed-with-styled.spec.ts Normal file
View File

@ -0,0 +1,75 @@
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: 'example.ts',
},
{
code: 'const StyledComponent = styled.div``;',
filename: 'example.ts',
},
],
invalid: [
{
code: 'const Button = styled.button``;',
filename: 'example.ts',
errors: [
{
messageId: 'noStyledPrefix',
},
],
},
{
code: 'const Component = styled.div``;',
filename: 'example.ts',
errors: [
{
messageId: 'noStyledPrefix',
},
],
},
{
code: 'const styled = {}; const Button = styled.button``;',
filename: 'example.ts',
errors: [
{
messageId: 'noStyledPrefix',
},
],
},
{
code: 'const styled = {}; const Component = styled.div``;',
filename: 'example.ts',
errors: [
{
messageId: 'noStyledPrefix',
},
],
},
{
code: 'const StyledButton = styled.button``;',
filename: 'themes.ts',
errors: [
{
messageId: 'noStyledPrefix',
},
],
},
],
});

14
packages/eslint-plugin-twenty/index.js
View File

@ -1,14 +0,0 @@
// eslint-disable-next-line @typescript-eslint/no-var-requires
const noHardcodedColors = require('./rules/no-hardcoded-colors');
const cssAlphabetically = require('./rules/sort-css-properties-alphabetically');
const styledComponentsPrefixedWithStyled = require('./rules/styled-components-prefixed-with-styled');
const matchingStateVariable = require('./rules/matching-state-variable');
module.exports = {
rules: {
'no-hardcoded-colors': noHardcodedColors,
'sort-css-properties-alphabetically': cssAlphabetically,
'styled-components-prefixed-with-styled': styledComponentsPrefixedWithStyled,
'matching-state-variable': matchingStateVariable
},
};

8
packages/eslint-plugin-twenty/package.json
View File

@ -1,8 +0,0 @@
{
"name": "eslint-plugin-twenty",
"version": "0.0.2",
"main": "index.js",
"dependencies": {
"postcss": "^8.4.24"
}
}

98
packages/eslint-plugin-twenty/rules/matching-state-variable.js
View File

@ -1,98 +0,0 @@
"use strict";
module.exports = {
meta: {
type: "problem",
docs: {
description:
"Ensure recoil value and setter are named after their atom name",
category: "Possible Errors",
recommended: true,
},
fixable: "code",
schema: [],
},
create: (context) => ({
VariableDeclarator(node) {
if (
node?.init?.callee?.name &&
typeof node.init.callee.name === "string" &&
[
"useRecoilState",
"useRecoilFamilyState",
"useRecoilSelector",
"useRecoilScopedState",
"useRecoilScopedFamilyState",
"useRecoilScopedSelector",
"useRecoilValue",
].includes(node.init.callee.name)
) {
const stateNameBase = node.init.arguments?.[0].name;
if (!stateNameBase) {
return;
}
let expectedVariableNameBase = stateNameBase.replace(
/(State|FamilyState|Selector|ScopedState|ScopedFamilyState|ScopedSelector)$/,
""
);
if (node.id.type === "Identifier") {
const actualVariableName = node.id.name;
if (actualVariableName !== expectedVariableNameBase) {
context.report({
node,
message: `Invalid usage of ${node.init.callee.name}: the value should be named '${expectedVariableNameBase}' but found '${actualVariableName}'.`,
fix(fixer) {
return fixer.replaceText(node.id, expectedVariableNameBase);
},
});
}
return;
}
if (node.id.type === "ArrayPattern") {
const actualVariableName = node.id.elements?.[0]?.name;
if (
actualVariableName &&
actualVariableName !== expectedVariableNameBase
) {
context.report({
node,
message: `Invalid usage of ${node.init.callee.name}: the value should be named '${expectedVariableNameBase}' but found '${actualVariableName}'.`,
fix(fixer) {
return fixer.replaceText(
node.id.elements[0],
expectedVariableNameBase
);
},
});
return;
}
if (node.id.elements?.[1]?.name) {
const actualSetterName = node.id.elements[1].name;
const expectedSetterName = `set${expectedVariableNameBase
.charAt(0)
.toUpperCase()}${expectedVariableNameBase.slice(1)}`;
if (actualSetterName !== expectedSetterName) {
context.report({
node,
message: `Invalid usage of ${node.init.callee.name}: Expected setter '${expectedSetterName}' but found '${actualSetterName}'.`,
fix(fixer) {
return fixer.replaceText(
node.id.elements[1],
expectedSetterName
);
},
});
}
}
}
}
},
}),
};

22
packages/eslint-plugin-twenty/rules/no-hardcoded-colors.js
View File

@ -1,22 +0,0 @@
module.exports = {
create: (context) => ({
TaggedTemplateExpression(node) {
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,
message:
"Do not use hardcoded RGBA or Hex colors. Please use a color from the theme file.",
});
}
});
},
}),
};

198
packages/eslint-plugin-twenty/rules/sort-css-properties-alphabetically.js
View File

@ -1,198 +0,0 @@
"use strict";
const postcss = require("postcss");
const isStyledTagname = (node) =>
(node.tag.type === "Identifier" && node.tag.name === "css") ||
(node.tag.type === "MemberExpression" && node.tag.object.name === "styled") ||
(node.tag.type === "CallExpression" &&
(node.tag.callee.name === "styled" ||
(node.tag.callee.object &&
((node.tag.callee.object.callee &&
node.tag.callee.object.callee.name === "styled") ||
(node.tag.callee.object.object &&
node.tag.callee.object.object.name === "styled")))));
/**
* An atomic rule is a rule without nested rules.
*/
const isValidAtomicRule = (rule) => {
const decls = rule.nodes.filter((node) => node.type === "decl");
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) => {
// check each rule recursively
const { isValid, loc } = rule.nodes.reduce(
(map, node) => {
return node.type === "rule" ? isValidRule(node) : map;
},
{ isValid: true }
);
// if there is any invalid rule, return result
if (!isValid) {
return { isValid, loc };
}
// check declarations
return isValidAtomicRule(rule);
};
const getNodeStyles = (node) => {
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 create = (context) => ({
TaggedTemplateExpression(node) {
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({
rule: root,
fixer,
src: context.getSourceCode(),
}),
});
}
} catch (e) {
return true;
}
}
},
});
const fix = ({ rule, fixer, src }) => {
let fixings = [];
// 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");
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, b) =>
a.source.start.line === b.source.start.line &&
a.source.start.column === b.source.start.column;
const getDeclRange = ({ decl, src }) => {
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 }) => {
const { startIdx, endIdx } = getDeclRange({ decl, src });
return src.getText().substring(startIdx, endIdx + 1);
};
const sortDeclarations = (declarations) =>
declarations
.slice()
.sort((declA, declB) => (declA.prop > declB.prop ? 1 : -1));
module.exports = {
meta: {
docs: {
description: "Styles are sorted alphabetically.",
category: "Fill me in",
recommended: false,
},
messages: {
"sort-css-properties-alphabetically":
"Declarations should be sorted alphabetically.",
},
fixable: "code",
},
create,
};

32
packages/eslint-plugin-twenty/rules/styled-components-prefixed-with-styled.js
View File

@ -1,32 +0,0 @@
module.exports = {
meta: {
type: 'suggestion',
docs: {
description: 'Warn when StyledComponents are not prefixed with Styled',
},
recommended: true,
fixable: 'code',
schema: [],
},
create: function(context) {
return {
VariableDeclarator: node => {
const templateExpr = node.init
if (templateExpr?.type !== 'TaggedTemplateExpression') {
return;
}
const tag = templateExpr.tag
const tagged = tag.type === 'MemberExpression' ? tag.object
: tag.type === 'CallExpression' ? tag.callee
: null
if (tagged?.name === 'styled') {
const variable = node.id;
if (variable?.name.startsWith('Styled')) {
return;
}
context.report({ node, message: `'${variable.name}' is a StyledComponent and is not prefixed with Styled.` });
}
},
}
}
};

27
packages/eslint-plugin-twenty/yarn.lock
View File

@ -1,27 +0,0 @@
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
# yarn lockfile v1
nanoid@^3.3.6:
version "3.3.6"
resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.6.tgz#443380c856d6e9f9824267d960b4236ad583ea4c"
integrity sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==
picocolors@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.0.0.tgz#cb5bdc74ff3f51892236eaf79d68bc44564ab81c"
integrity sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==
postcss@^8.4.24:
version "8.4.24"
resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.24.tgz#f714dba9b2284be3cc07dbd2fc57ee4dc972d2df"
integrity sha512-M0RzbcI0sO/XJNucsGjvWU9ERWxb/ytp1w6dKtxTKgixdtQDq4rmx/g8W1hnaheq9jgwL/oyEdH5Bc4WwJKMqg==
dependencies:
nanoid "^3.3.6"
picocolors "^1.0.0"
source-map-js "^1.0.2"
source-map-js@^1.0.2:
version "1.0.2"
resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.0.2.tgz#adbc361d9c62df380125e7f161f71c826f1e490c"
integrity sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==

7
server/.eslintrc.js
View File

@ -5,7 +5,7 @@ module.exports = {
tsconfigRootDir : __dirname,
sourceType: 'module',
},
plugins: ['@typescript-eslint/eslint-plugin', 'import', 'unused-imports'],
plugins: ['@typescript-eslint/eslint-plugin', 'import', 'unused-imports','twenty-ts'],
extends: [
'plugin:@typescript-eslint/recommended',
'plugin:prettier/recommended',
@ -17,6 +17,11 @@ module.exports = {
},
ignorePatterns: ['.eslintrc.js', 'src/core/@generated/**'],
rules: {
'twenty-ts/effect-components': 'error',
'twenty-ts/no-hardcoded-colors': 'error',
'twenty-ts/matching-state-variable': 'error',
'twenty-ts/sort-css-properties-alphabetically': 'error',
'twenty-ts/styled-components-prefixed-with-styled': 'error',
'@typescript-eslint/interface-name-prefix': 'off',
'@typescript-eslint/explicit-function-return-type': 'off',
'@typescript-eslint/explicit-module-boundary-types': 'off',

1
server/package.json
View File

@ -108,6 +108,7 @@
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-import": "^2.27.5",
"eslint-plugin-prettier": "^4.0.0",
"eslint-plugin-twenty-ts": "file:../packages/eslint-plugin-twenty-ts",
"eslint-plugin-unused-imports": "^3.0.0",
"jest": "28.1.3",
"prettier": "^2.3.2",

3
server/yarn.lock
View File

@ -4883,6 +4883,9 @@ eslint-plugin-prettier@^4.0.0:
dependencies:
prettier-linter-helpers "^1.0.0"
"eslint-plugin-twenty-ts@file:../packages/eslint-plugin-twenty-ts":
version "1.0.1"
eslint-plugin-unused-imports@^3.0.0:
version "3.0.0"
resolved "https://registry.yarnpkg.com/eslint-plugin-unused-imports/-/eslint-plugin-unused-imports-3.0.0.tgz#d25175b0072ff16a91892c3aa72a09ca3a9e69e7"