patterns explicit variants

Create Explicit Component Variants

Instead of one component with many boolean props, create explicit variant components. Each variant composes the pieces it needs. The code documents itself.

Incorrect (one component, many modes):

// What does this component actually render?

Correct (explicit variants):

// Immediately clear what this renders

// Or

// Or

Each implementation is unique, explicit and self-contained. Yet they can each use shared parts.

Implementation:

function ThreadComposer({ channelId }: { channelId: string }) {
  return (
    
      <Composer.Frame>
        <Composer.Input />
        
        <Composer.Footer>
          <Composer.Formatting />
          <Composer.Emojis />
          <Composer.Submit />
        </Composer.Footer>
      </Composer.Frame>
    
  )
}

function EditMessageComposer({ messageId }: { messageId: string }) {
  return (
    
      <Composer.Frame>
        <Composer.Input />
        <Composer.Footer>
          <Composer.Formatting />
          <Composer.Emojis />
          <Composer.CancelEdit />
          <Composer.SaveEdit />
        </Composer.Footer>
      </Composer.Frame>
    
  )
}

function ForwardMessageComposer({ messageId }: { messageId: string }) {
  return (
    
      <Composer.Frame>
        <Composer.Input placeholder="Add a message, if you'd like." />
        <Composer.Footer>
          <Composer.Formatting />
          <Composer.Emojis />
          <Composer.Mentions />
        </Composer.Footer>
      </Composer.Frame>
    
  )
}

Each variant is explicit about:

• What provider/state it uses
• What UI elements it includes
• What actions are available

No boolean prop combinations to reason about. No impossible states.