| Dimension | Shared | Only in A | Only in B | Overlap |
|---|---|---|---|---|
| Sections | 0 | 3 | 6 | 0% |
| Commands | 0 | 0 | 0 | — |
| Section tags | 0 | 3 | 4 | 0% |
What each file covers
Sections
0 shared · 3 only in A · 6 only in B- − Code Style
- − Services
- − CI/CD - build pipleline
- + React Guidelines
- + Core Rules
- + Component Structure
- + Props & Event Handlers
- + Component Design
- + Performance
Commands
neither file has anySection tags
0 shared · 3 only in A · 4 only in B- − build
- − code-style
- − deployment
- + architecture
- + ui
- + performance
- + do-not
Line diff
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
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```
@@ −1 +1 @@
1−# Code Style
2−Read coding guidelines completed
3−.cursor/rules
1+---
2+description: React general guidelines for Twenty CRM
3+alwaysApply: false
4+---
5+# React Guidelines
46
7+## Core Rules
8+- **Functional components only** (no classes)
9+- **Named exports only** (no default exports)
10+- **Event handlers over useEffect** for state updates
511
6−# Services
7−See all the services under **apps** directory
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+```
826
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+);
935
10−# CI/CD - build pipleline
11−.github/workflows/main.yaml - creates release, builds services, pushed to Github registry, sends notification to Telegram
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+```
