Cursor rule

1---
2alwaysApply: false
3---
4 
5## Define Generic Context Interfaces for Dependency Injection
6 
7Define a **generic interface** for your component context with three parts:
8`state`, `actions`, and `meta`. This interface is a contract that any provider
9can implement—enabling the same UI components to work with completely different
10state implementations.
11 
12**Core principle:** Lift state, compose internals, make state
13dependency-injectable.
14 
15**Incorrect (UI coupled to specific state implementation):**
16 
17```tsx
18function ComposerInput() {
19  // Tightly coupled to a specific hook
20  const { input, setInput } = useChannelComposerState()
21  return <TextInput value={input} onChangeText={setInput} />
22}
23```
24 
25**Correct (generic interface enables dependency injection):**
26 
27```tsx
28// Define a GENERIC interface that any provider can implement
29interface ComposerState {
30  input: string
31  attachments: Attachment[]
32  isSubmitting: boolean
33}
34 
35interface ComposerActions {
36  update: (updater: (state: ComposerState) => ComposerState) => void
37  submit: () => void
38}
39 
40interface ComposerMeta {
41  inputRef: React.RefObject<TextInput>
42}
43 
44interface ComposerContextValue {
45  state: ComposerState
46  actions: ComposerActions
47  meta: ComposerMeta
48}
49 
50const ComposerContext = createContext<ComposerContextValue | null>(null)
51```
52 
53**UI components consume the interface, not the implementation:**
54 
55```tsx
56function ComposerInput() {
57  const {
58    state,
59    actions: { update },
60    meta,
61  } = use(ComposerContext)
62 
63  // This component works with ANY provider that implements the interface
64  return (
65    <TextInput
66      ref={meta.inputRef}
67      value={state.input}
68      onChangeText={(text) => update((s) => ({ ...s, input: text }))}
69    />
70  )
71}
72```
73 
74**Different providers implement the same interface:**
75 
76```tsx
77// Provider A: Local state for ephemeral forms
78function ForwardMessageProvider({ children }: { children: React.ReactNode }) {
79  const [state, setState] = useState(initialState)
80  const inputRef = useRef(null)
81  const submit = useForwardMessage()
82 
83  return (
84    <ComposerContext
85      value={{
86        state,
87        actions: { update: setState, submit },
88        meta: { inputRef },
89      }}
90    >
91      {children}
92    </ComposerContext>
93  )
94}
95 
96// Provider B: Global synced state for channels
97function ChannelProvider({ channelId, children }: Props) {
98  const { state, update, submit } = useGlobalChannel(channelId)
99  const inputRef = useRef(null)
100 
101  return (
102    <ComposerContext
103      value={{
104        state,
105        actions: { update, submit },
106        meta: { inputRef },
107      }}
108    >
109      {children}
110    </ComposerContext>
111  )
112}
113```
114 
115**The same composed UI works with both:**
116 
117```tsx
118// Works with ForwardMessageProvider (local state)
119<ForwardMessageProvider>
120  <Composer.Frame>
121    <Composer.Input />
122    <Composer.Submit />
123  </Composer.Frame>
124</ForwardMessageProvider>
125 
126// Works with ChannelProvider (global synced state)
127<ChannelProvider channelId="abc">
128  <Composer.Frame>
129    <Composer.Input />
130    <Composer.Submit />
131  </Composer.Frame>
132</ChannelProvider>
133```
134 
135**Custom UI outside the component can access state and actions:**
136 
137The provider boundary is what matters—not the visual nesting. Components that
138need shared state don't have to be inside the `Composer.Frame`. They just need
139to be within the provider.
140 
141```tsx
142function ForwardMessageDialog() {
143  return (
144    <ForwardMessageProvider>
145      <Dialog>
146        {/* The composer UI */}
147        <Composer.Frame>
148          <Composer.Input placeholder="Add a message, if you'd like." />
149          <Composer.Footer>
150            <Composer.Formatting />
151            <Composer.Emojis />
152          </Composer.Footer>
153        </Composer.Frame>
154 
155        {/* Custom UI OUTSIDE the composer, but INSIDE the provider */}
156        <MessagePreview />
157 
158        {/* Actions at the bottom of the dialog */}
159        <DialogActions>
160          <CancelButton />
161          <ForwardButton />
162        </DialogActions>
163      </Dialog>
164    </ForwardMessageProvider>
165  )
166}
167 
168// This button lives OUTSIDE Composer.Frame but can still submit based on its context!
169function ForwardButton() {
170  const {
171    actions: { submit },
172  } = use(ComposerContext)
173  return <Button onPress={submit}>Forward</Button>
174}
175 
176// This preview lives OUTSIDE Composer.Frame but can read composer's state!
177function MessagePreview() {
178  const { state } = use(ComposerContext)
179  return <Preview message={state.input} attachments={state.attachments} />
180}
181```
182 
183The `ForwardButton` and `MessagePreview` are not visually inside the composer
184box, but they can still access its state and actions. This is the power of
185lifting state into providers.
186 
187The UI is reusable bits you compose together. The state is dependency-injected
188by the provider. Swap the provider, keep the UI.
189