struxadotcloud/struxa

public

initial commitd4cb9e15 months ago94 lines · 2.3 KB

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