Charles Bochet
3b2bf39565
## Summary - Move Modal UI components (`Modal`, `ModalContent`, `ModalHeader`, `ModalFooter`, `ModalBackdrop`) from `twenty-front` to `twenty-ui` as stateless, reusable components - Create `ModalStatefulWrapper` in `twenty-front` that connects Jotai state (`isModalOpenedComponentState`) to the stateless `Modal` via an `isOpen` prop - Rename `modalVariant` prop to `overlay` with clearer values: `'dark'` (default), `'light'` (in-container), `'transparent'` (invisible panel). Remove unused `'medium'` overlay - Rename `modalId` to `modalInstanceId` across the entire modal zone (~30 consumer files) - Extract `ModalProps` to its own file in `twenty-ui/types/ModalProps.ts`; extract `ModalStatefulWrapperProps` to its own file using `Pick<ModalProps, ...>` for shared props - Extract `ModalBackdrop` to its own file and export from `twenty-ui`; use it in `UserOrMetadataLoader` instead of a local styled component - Use `ModalFooter` in `StepNavigationButton` and `ModalHeader` in `SpreadsheetImportStepperContainer` instead of duplicated `styled.div` definitions - Remove unused `onClose` prop from stateless `Modal`; fix `typeof document` guard in `ModalStatefulWrapper` - Split shared types into individual files: `ModalSize.ts`, `ModalPadding.ts`, `ModalOverlay.ts` - Extract wyw profiling instrumentation from `vite.config.ts` into reusable `createWywProfilingPlugin` with parametrized threshold and improved logging - Delete old `Modal.tsx`, `Modal.styles.ts`, `ModalContent.tsx`, `ModalHeader.tsx`, `ModalFooter.tsx` from `twenty-front` - Add comprehensive Storybook stories in `twenty-ui` covering Default, Confirmation, Small, ExtraLarge, Closed, and Interactive variants
74 lines
2.2 KiB
JavaScript
74 lines
2.2 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/**',
|
|
'**/generated/**',
|
|
],
|
|
},
|
|
|
|
// 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',
|
|
},
|
|
},
|
|
];
|