c53a13417e
## Summary
Eliminates all ~350 `styled(Component)` usages across `twenty-front` and
`twenty-ui` (212 files changed). Each was replaced following these
rules:
- **Margin/layout CSS** (margin, padding, flex, align-self, width) →
wrapped in a `styled.div`/`styled.span` parent container
- **Third-party components** (Link, TextareaAutosize,
ReactPhoneNumberInput, Handle, etc.) → parent container with child CSS
selectors (`> a`, `> textarea`, `> input`, etc.)
- **Intrinsic behavior via existing props** (TableRow
`gridTemplateColumns`, TableCell `color`/`align`) → replaced
`styled(TableRow)` / `styled(TableCell)` with direct prop usage
- **Other visual overrides on twenty-ui components** (Card, Section,
TabList, Button, MenuItem, ScrollWrapper, etc.) → parent wrappers with
`> div` / `> *` child selectors
- **Extending styled.div/span** → merged all CSS into a single
`styled.div`/`styled.span`
Also adds `overflow: hidden` to parent containers wrapping
`ScrollWrapper` so scroll activates correctly with the new wrapper
structure.
### Migration patterns
| Before | After |
|--------|-------|
| `styled(Avatar)` with `margin-right` | `<StyledAvatarContainer><Avatar
/></StyledAvatarContainer>` |
| `styled(Link)` with `text-decoration: none` |
`<StyledLinkContainer><Link /></StyledLinkContainer>` with `> a { ... }`
|
| `styled(TableRow)` with `grid-template-columns` | `<TableRow
gridTemplateColumns="..." />` |
| `styled(TableCell)` with `color` / `align` | `<TableCell color={...}
align="right" />` |
| `styled(Card)` with `margin-top` | `<StyledCardContainer><Card
/></StyledCardContainer>` |
| `styled(TabList)` with `background` |
`<StyledTabListContainer><TabList /></StyledTabListContainer>` with `>
div { ... }` |
| `styled(StyledBase)` extending a `styled.div` | Single merged
`styled.div` with all styles inlined |
225 lines
5.7 KiB
JavaScript
225 lines
5.7 KiB
JavaScript
import js from '@eslint/js';
|
|
import nxPlugin from '@nx/eslint-plugin';
|
|
import typescriptEslint from '@typescript-eslint/eslint-plugin';
|
|
import typescriptParser from '@typescript-eslint/parser';
|
|
import importPlugin from 'eslint-plugin-import';
|
|
import linguiPlugin from 'eslint-plugin-lingui';
|
|
import preferArrowPlugin from 'eslint-plugin-prefer-arrow';
|
|
import prettierPlugin from 'eslint-plugin-prettier';
|
|
import unicornPlugin from 'eslint-plugin-unicorn';
|
|
import unusedImportsPlugin from 'eslint-plugin-unused-imports';
|
|
import jsoncParser from 'jsonc-eslint-parser';
|
|
import path from 'path';
|
|
import { fileURLToPath } from 'url';
|
|
|
|
const __filename = fileURLToPath(import.meta.url);
|
|
const __dirname = path.dirname(__filename);
|
|
|
|
const twentyRules = await nxPlugin.loadWorkspaceRules('packages/twenty-eslint-rules');
|
|
|
|
export default [
|
|
// Base JavaScript configuration
|
|
js.configs.recommended,
|
|
|
|
// Lingui recommended rules
|
|
linguiPlugin.configs['flat/recommended'],
|
|
|
|
// Global ignores
|
|
{
|
|
ignores: [
|
|
'**/node_modules/**',
|
|
'packages/twenty-shared/**/dist/**',
|
|
'packages/twenty-shared/vite.config.ts',
|
|
'packages/twenty-shared/scripts/**',
|
|
'src/individual-entry.ts',
|
|
'**/individual-entry.ts',
|
|
],
|
|
},
|
|
|
|
// Base configuration for all files
|
|
{
|
|
files: ['**/*.{js,jsx,ts,tsx}'],
|
|
plugins: {
|
|
'prettier': prettierPlugin,
|
|
'lingui': linguiPlugin,
|
|
'@nx': nxPlugin,
|
|
'prefer-arrow': preferArrowPlugin,
|
|
'import': importPlugin,
|
|
'unused-imports': unusedImportsPlugin,
|
|
'unicorn': unicornPlugin,
|
|
'twenty': { rules: twentyRules },
|
|
},
|
|
rules: {
|
|
// General rules
|
|
'func-style': ['error', 'declaration', { allowArrowFunctions: true }],
|
|
'no-console': ['warn', { allow: ['group', 'groupCollapsed', 'groupEnd'] }],
|
|
'no-control-regex': 0,
|
|
'no-debugger': 'error',
|
|
'no-duplicate-imports': 'error',
|
|
'no-undef': 'off',
|
|
'no-unused-vars': 'off',
|
|
'prettier/prettier': 'error',
|
|
|
|
// Nx rules
|
|
'@nx/enforce-module-boundaries': [
|
|
'error',
|
|
{
|
|
enforceBuildableLibDependency: true,
|
|
allow: [],
|
|
depConstraints: [
|
|
{
|
|
sourceTag: 'scope:shared',
|
|
onlyDependOnLibsWithTags: ['scope:shared'],
|
|
},
|
|
{
|
|
sourceTag: 'scope:backend',
|
|
onlyDependOnLibsWithTags: ['scope:shared', 'scope:backend'],
|
|
},
|
|
{
|
|
sourceTag: 'scope:frontend',
|
|
onlyDependOnLibsWithTags: ['scope:shared', 'scope:frontend'],
|
|
},
|
|
{
|
|
sourceTag: 'scope:zapier',
|
|
onlyDependOnLibsWithTags: ['scope:shared'],
|
|
},
|
|
],
|
|
},
|
|
],
|
|
|
|
// Import rules
|
|
'import/no-relative-packages': 'error',
|
|
'import/no-useless-path-segments': 'error',
|
|
'import/no-duplicates': ['error', { considerQueryString: true }],
|
|
|
|
// Prefer arrow functions
|
|
'prefer-arrow/prefer-arrow-functions': [
|
|
'error',
|
|
{
|
|
disallowPrototype: true,
|
|
singleReturnOnly: false,
|
|
classPropertiesAllowed: false,
|
|
},
|
|
],
|
|
|
|
// Unused imports
|
|
'unused-imports/no-unused-imports': 'warn',
|
|
'unused-imports/no-unused-vars': [
|
|
'warn',
|
|
{
|
|
vars: 'all',
|
|
varsIgnorePattern: '^_',
|
|
args: 'after-used',
|
|
argsIgnorePattern: '^_',
|
|
},
|
|
],
|
|
},
|
|
},
|
|
|
|
// TypeScript specific configuration
|
|
{
|
|
files: ['**/*.{ts,tsx}'],
|
|
languageOptions: {
|
|
parser: typescriptParser,
|
|
parserOptions: {
|
|
ecmaFeatures: {
|
|
jsx: true,
|
|
},
|
|
project: [path.resolve(__dirname, 'tsconfig.json')],
|
|
},
|
|
},
|
|
plugins: {
|
|
'@typescript-eslint': typescriptEslint,
|
|
},
|
|
rules: {
|
|
// TypeScript rules
|
|
'@typescript-eslint/ban-ts-comment': 'error',
|
|
'@typescript-eslint/consistent-type-imports': [
|
|
'error',
|
|
{
|
|
prefer: 'type-imports',
|
|
fixStyle: 'inline-type-imports'
|
|
},
|
|
],
|
|
'@typescript-eslint/explicit-function-return-type': 'off',
|
|
'@typescript-eslint/explicit-module-boundary-types': 'off',
|
|
'@typescript-eslint/interface-name-prefix': 'off',
|
|
'@typescript-eslint/no-empty-object-type': [
|
|
'error',
|
|
{
|
|
allowInterfaces: 'with-single-extends',
|
|
},
|
|
],
|
|
'@typescript-eslint/no-explicit-any': 'off',
|
|
'@typescript-eslint/no-empty-function': 'off',
|
|
'@typescript-eslint/no-unused-vars': 'off',
|
|
|
|
// Nx dependency checks
|
|
'@nx/dependency-checks': 'error',
|
|
},
|
|
},
|
|
|
|
// JavaScript specific configuration
|
|
{
|
|
files: ['*.{js,jsx}'],
|
|
rules: {
|
|
// JavaScript-specific rules if needed
|
|
},
|
|
},
|
|
|
|
// Test files
|
|
{
|
|
files: [
|
|
'*.spec.@(ts|tsx|js|jsx)',
|
|
'*.integration-spec.@(ts|tsx|js|jsx)',
|
|
'*.test.@(ts|tsx|js|jsx)',
|
|
],
|
|
languageOptions: {
|
|
globals: {
|
|
jest: true,
|
|
describe: true,
|
|
it: true,
|
|
expect: true,
|
|
beforeEach: true,
|
|
afterEach: true,
|
|
beforeAll: true,
|
|
afterAll: true,
|
|
},
|
|
},
|
|
rules: {
|
|
'@typescript-eslint/no-non-null-assertion': 'off',
|
|
},
|
|
},
|
|
|
|
// Constants files
|
|
{
|
|
files: ['**/constants/*.ts', '**/*.constants.ts'],
|
|
rules: {
|
|
'@typescript-eslint/naming-convention': [
|
|
'error',
|
|
{
|
|
selector: 'variable',
|
|
format: ['UPPER_CASE'],
|
|
},
|
|
],
|
|
'unicorn/filename-case': [
|
|
'warn',
|
|
{
|
|
cases: {
|
|
pascalCase: true,
|
|
},
|
|
},
|
|
],
|
|
'twenty/max-consts-per-file': ['error', { max: 1 }],
|
|
},
|
|
},
|
|
|
|
// JSON files
|
|
{
|
|
files: ['**/*.json'],
|
|
languageOptions: {
|
|
parser: jsoncParser,
|
|
},
|
|
},
|
|
];
|