Design Systems and Component Architecture Questions

// React-like pseudo-code
function useDateRangeController({ value, defaultValue, onChange, onOpenChange }){
  const isControlled = value !== undefined
  const [internal, setInternal] = useState(defaultValue ?? { start: null, end: null })
  const state = isControlled ? value : internal
  const openRef = useRef(false)

  // unified updater
  const setRange = useCallback(newRange => {
    if (!isControlled) setInternal(newRange)
    onChange?.(newRange)
  }, [isControlled, onChange])

  const open = () => { openRef.current = true; onOpenChange?.(true) }
  const close = () => { openRef.current = false; onOpenChange?.(false) }

  // keyboard dispatcher
  const onKeyDown = (e, ctx = {}) => {
    if (e.key === 'Escape') { close(); return }
    if (e.key === 'Enter') {
      if (ctx.focused === 'calendar') { setRange(ctx.pending || state); close() }
      return
    }
    // arrows: move focus/date depending on subcomponent
    if (e.key.startsWith('Arrow')) {
      // compute next date/focus; keep pure and testable
      const next = computeNext(state, e.key, ctx)
      setRange(next)
    }
  }

  // test helpers
  const __test = {
    serialize: () => ({ state, open: openRef.current }),
    setNow: (d) => { /* override now for deterministic tests */ }
  }

  return { state, setRange, open, close, onKeyDown, ref: openRef, __test }
}

// Context provider for composition
function DateRangeProvider(props){
  const controller = useDateRangeController(props)
  return <Context.Provider value={controller}>{props.children}</Context.Provider>
}

// tokens/raw/colors.json
{ "color": { "blue": { "100": { "value":"#DCEEFB" } } } }
// tokens/semantic/components.json
{ "button": { "primary": { "bg": { "value":"{color.blue.100}" } } } }

"build:tokens": "style-dictionary build"

// BaseButton.js
class Button extends React.Component {
  render() { return <button className={this.props.className}>{this.props.children}</button>; }
}
// IconButton.js
class IconButton extends Button {
  render() { return <button className={this.props.className}><Icon />{this.props.children}</button>; }
}

// Button.js
export function Button({ children, ...p }) { return <button {...p}>{children}</button>; }
// IconButton.js
export function IconButton(props) {
  return <Button {...props}><Icon />{props.children}</Button>;
}
// Or using children directly:
<Card>
  <Card.Header>Title</Card.Header>
  <Card.Body>Content</Card.Body>
</Card>