| Dimension | Shared | Only in A | Only in B | Overlap |
|---|---|---|---|---|
| Sections | 0 | 6 | 3 | 0% |
| Commands | 0 | 0 | 0 | — |
| Section tags | 0 | 4 | 3 | 0% |
What each file covers
Sections
0 shared · 6 only in A · 3 only in B- − React Guidelines
- − Core Rules
- − Component Structure
- − Props & Event Handlers
- − Component Design
- − Performance
- + Code Style
- + Services
- + CI/CD - build pipleline
Commands
neither file has anySection tags
0 shared · 4 only in A · 3 only in B- − architecture
- − ui
- − performance
- − do-not
- + build
- + code-style
- + deployment
Line diff
nowtec/nowCRM · .cursor/rules/react-general-guidelines.mdc
@@ −1 @@
1---
2description: React general guidelines for Twenty CRM
3alwaysApply: false
4---
5# React Guidelines
6
7## Core Rules
8- **Functional components only** (no classes)
9- **Named exports only** (no default exports)
10- **Event handlers over useEffect** for state updates
11
12## Component Structure
13```typescript
14// ✅ Correct
15export const UserProfile = ({ user, onEdit }: UserProfileProps) => {
16 const handleEdit = () => onEdit(user.id);
17
18 return (
19 <StyledContainer>
20 <h1>{user.name}</h1>
21 <Button onClick={handleEdit}>Edit</Button>
22 </StyledContainer>
23 );
24};
25```
26
27## Props & Event Handlers
28```typescript
29// ✅ Correct - Destructure props
30const Button = ({ onClick, isDisabled, children }: ButtonProps) => (
31 <button onClick={onClick} disabled={isDisabled}>
32 {children}
33 </button>
34);
35
36// ✅ Correct - Event handlers over useEffect
37const UserForm = ({ onSubmit }: UserFormProps) => {
38 const handleSubmit = async (data: FormData) => {
39 await onSubmit(data);
40 // Direct event handling, not useEffect
41 };
42
43 return <Form onSubmit={handleSubmit} />;
44};
45```
46
47## Component Design
48- **Small, focused components** - Single responsibility
49- **Composition over inheritance** - Combine simple components
50- **Extract complex logic** into custom hooks
51
52```typescript
53// ✅ Good - Composed from smaller components
54const UserCard = ({ user }: UserCardProps) => (
55 <StyledCard>
56 <UserAvatar user={user} />
57 <UserInfo user={user} />
58 <UserActions user={user} />
59 </StyledCard>
60);
61```
62
63## Performance
64```typescript
65// ✅ Use memo for expensive components only
66const ExpensiveChart = memo(({ data }: ChartProps) => {
67 // Complex rendering logic
68 return <ComplexChart data={data} />;
69});
70
71// ✅ Memoize callbacks when needed
72const UserList = ({ users, onUserSelect }: UserListProps) => {
73 const handleUserSelect = useCallback((user: User) => {
74 onUserSelect(user);
75 }, [onUserSelect]);
76
77 return (
78 <div>
79 {users.map(user => (
80 <UserItem key={user.id} user={user} onSelect={handleUserSelect} />
81 ))}
82 </div>
83 );
84};
85```
nowtec/nowCRM · CLAUDE.md
@@ +1 @@
1# Code Style
2Read coding guidelines completed
3.cursor/rules
4
5
6# Services
7See all the services under **apps** directory
8
9
10# CI/CD - build pipleline
11.github/workflows/main.yaml - creates release, builds services, pushed to Github registry, sends notification to Telegram
@@ −1 +1 @@
1−---
2−description: React general guidelines for Twenty CRM
3−alwaysApply: false
4−---
5−# React Guidelines
1+# Code Style
2+Read coding guidelines completed
3+.cursor/rules
64
7−## Core Rules
8−- **Functional components only** (no classes)
9−- **Named exports only** (no default exports)
10−- **Event handlers over useEffect** for state updates
115
12−## Component Structure
13−```typescript
14−// ✅ Correct
15−export const UserProfile = ({ user, onEdit }: UserProfileProps) => {
16− const handleEdit = () => onEdit(user.id);
17−
18− return (
19− <StyledContainer>
20− <h1>{user.name}</h1>
21− <Button onClick={handleEdit}>Edit</Button>
22− </StyledContainer>
23− );
24−};
25−```
6+# Services
7+See all the services under **apps** directory
268
27−## Props & Event Handlers
28−```typescript
29−// ✅ Correct - Destructure props
30−const Button = ({ onClick, isDisabled, children }: ButtonProps) => (
31− <button onClick={onClick} disabled={isDisabled}>
32− {children}
33− </button>
34−);
359
36−// ✅ Correct - Event handlers over useEffect
37−const UserForm = ({ onSubmit }: UserFormProps) => {
38− const handleSubmit = async (data: FormData) => {
39− await onSubmit(data);
40− // Direct event handling, not useEffect
41− };
42−
43− return <Form onSubmit={handleSubmit} />;
44−};
45−```
46−
47−## Component Design
48−- **Small, focused components** - Single responsibility
49−- **Composition over inheritance** - Combine simple components
50−- **Extract complex logic** into custom hooks
51−
52−```typescript
53−// ✅ Good - Composed from smaller components
54−const UserCard = ({ user }: UserCardProps) => (
55− <StyledCard>
56− <UserAvatar user={user} />
57− <UserInfo user={user} />
58− <UserActions user={user} />
59− </StyledCard>
60−);
61−```
62−
63−## Performance
64−```typescript
65−// ✅ Use memo for expensive components only
66−const ExpensiveChart = memo(({ data }: ChartProps) => {
67− // Complex rendering logic
68− return <ComplexChart data={data} />;
69−});
70−
71−// ✅ Memoize callbacks when needed
72−const UserList = ({ users, onUserSelect }: UserListProps) => {
73− const handleUserSelect = useCallback((user: User) => {
74− onUserSelect(user);
75− }, [onUserSelect]);
76−
77− return (
78− <div>
79− {users.map(user => (
80− <UserItem key={user.id} user={user} onSelect={handleUserSelect} />
81− ))}
82− </div>
83− );
84−};
85−```
10+# CI/CD - build pipleline
11+.github/workflows/main.yaml - creates release, builds services, pushed to Github registry, sends notification to Telegram
