Cursor rule

1---
2alwaysApply: false
3---
4 
5## Create Explicit Component Variants
6 
7Instead of one component with many boolean props, create explicit variant
8components. Each variant composes the pieces it needs. The code documents
9itself.
10 
11**Incorrect (one component, many modes):**
12 
13```tsx
14// What does this component actually render?
15<Composer
16  isThread
17  isEditing={false}
18  channelId='abc'
19  showAttachments
20  showFormatting={false}
21/>
22```
23 
24**Correct (explicit variants):**
25 
26```tsx
27// Immediately clear what this renders
28<ThreadComposer channelId="abc" />
29 
30// Or
31<EditMessageComposer messageId="xyz" />
32 
33// Or
34<ForwardMessageComposer messageId="123" />
35```
36 
37Each implementation is unique, explicit and self-contained. Yet they can each
38use shared parts.
39 
40**Implementation:**
41 
42```tsx
43function ThreadComposer({ channelId }: { channelId: string }) {
44  return (
45    <ThreadProvider channelId={channelId}>
46      <Composer.Frame>
47        <Composer.Input />
48        <AlsoSendToChannelField channelId={channelId} />
49        <Composer.Footer>
50          <Composer.Formatting />
51          <Composer.Emojis />
52          <Composer.Submit />
53        </Composer.Footer>
54      </Composer.Frame>
55    </ThreadProvider>
56  )
57}
58 
59function EditMessageComposer({ messageId }: { messageId: string }) {
60  return (
61    <EditMessageProvider messageId={messageId}>
62      <Composer.Frame>
63        <Composer.Input />
64        <Composer.Footer>
65          <Composer.Formatting />
66          <Composer.Emojis />
67          <Composer.CancelEdit />
68          <Composer.SaveEdit />
69        </Composer.Footer>
70      </Composer.Frame>
71    </EditMessageProvider>
72  )
73}
74 
75function ForwardMessageComposer({ messageId }: { messageId: string }) {
76  return (
77    <ForwardMessageProvider messageId={messageId}>
78      <Composer.Frame>
79        <Composer.Input placeholder="Add a message, if you'd like." />
80        <Composer.Footer>
81          <Composer.Formatting />
82          <Composer.Emojis />
83          <Composer.Mentions />
84        </Composer.Footer>
85      </Composer.Frame>
86    </ForwardMessageProvider>
87  )
88}
89```
90 
91Each variant is explicit about:
92 
93- What provider/state it uses
94- What UI elements it includes
95- What actions are available
96 
97No boolean prop combinations to reason about. No impossible states.
98