Raphaël Bosi
cb7d0b83a8
## PR description This PR: - Creates a TypeScript-based extractor that discovers all exported twenty-ui components by scanning barrel files, extracting props/slots/events via ts-morph type analysis, and generating the remote DOM bindings automatically. - Adds a new ESLint rule which enforces all *Props types in twenty-ui components to be exported, which is required for the extractor to discover component prop types. Existing twenty-ui components are updated to comply with this rule. - Extends the remote DOM generation to support slots, per-component events, forwardRef wrappers, and richer property types (array, object, function) ## Edge cases to fix in another PR - Icons cannot be rendered inside buttons - IconButtons throw an error when mounted - MenuItems are not displayed correctly - MenuItemNavigate throws on click ## Video Demo https://github.com/user-attachments/assets/c2ed67cf-6a15-4896-9fec-e83fac0e862b
95 lines
2.6 KiB
JavaScript
95 lines
2.6 KiB
JavaScript
import typescriptParser from '@typescript-eslint/parser';
|
|
import path from 'path';
|
|
import { fileURLToPath } from 'url';
|
|
import reactConfig from '../twenty-eslint-rules/eslint.config.react.mjs';
|
|
|
|
const __filename = fileURLToPath(import.meta.url);
|
|
const __dirname = path.dirname(__filename);
|
|
|
|
export default [
|
|
// Extend shared React configuration
|
|
...reactConfig,
|
|
|
|
// Global ignores
|
|
{
|
|
ignores: [
|
|
'**/node_modules/**',
|
|
],
|
|
},
|
|
|
|
// TypeScript project-specific configuration
|
|
{
|
|
files: ['**/*.{ts,tsx}'],
|
|
languageOptions: {
|
|
parser: typescriptParser,
|
|
parserOptions: {
|
|
project: [path.resolve(__dirname, 'tsconfig.json')],
|
|
ecmaFeatures: {
|
|
jsx: true,
|
|
},
|
|
},
|
|
},
|
|
rules: {
|
|
// Override import restrictions for twenty-ui
|
|
'no-restricted-imports': [
|
|
'error',
|
|
{
|
|
patterns: [
|
|
{
|
|
group: ['@tabler/icons-react'],
|
|
message: 'Please import icons from `@ui/display`',
|
|
},
|
|
{
|
|
group: ['react-hotkeys-web-hook'],
|
|
importNames: ['useHotkeys'],
|
|
message: 'Please use the custom wrapper: `useScopedHotkeys` from `@ui/utilities`',
|
|
},
|
|
{
|
|
group: ['lodash'],
|
|
message: "Please use the standalone lodash package (for instance: `import groupBy from 'lodash.groupby'` instead of `import { groupBy } from 'lodash'`)",
|
|
},
|
|
{
|
|
group: ['@lingui/*'],
|
|
message: 'Lingui should not be used in twenty-ui. Pass translatable strings as props from twenty-front instead.',
|
|
},
|
|
],
|
|
},
|
|
],
|
|
|
|
// Nx dependency checks
|
|
'@nx/dependency-checks': 'error',
|
|
|
|
// Disable lingui rules for twenty-ui - translations should be handled in twenty-front
|
|
'lingui/no-unlocalized-strings': 'off',
|
|
'lingui/t-call-in-function': 'off',
|
|
'lingui/no-single-variables-to-translate': 'off',
|
|
'lingui/no-expression-in-message': 'off',
|
|
'lingui/no-single-tag-to-translate': 'off',
|
|
'lingui/no-trans-inside-trans': 'off',
|
|
'lingui/text-restrictions': 'off',
|
|
},
|
|
},
|
|
|
|
{
|
|
files: [
|
|
'**/src/input/**/*.tsx',
|
|
'**/src/components/**/*.tsx',
|
|
'**/src/display/**/*.tsx',
|
|
'**/src/feedback/**/*.tsx',
|
|
'**/src/layout/**/*.tsx',
|
|
'**/src/navigation/**/*.tsx',
|
|
'**/src/accessibility/**/*.tsx',
|
|
],
|
|
ignores: [
|
|
'**/*.stories.tsx',
|
|
'**/__stories__/**/*.tsx',
|
|
'**/*.test.tsx',
|
|
'**/__tests__/**/*.tsx',
|
|
'**/testing/**/*.tsx',
|
|
],
|
|
rules: {
|
|
'twenty/export-component-props': 'error',
|
|
},
|
|
},
|
|
];
|