Proposal: Presets

[Idered]

Define component presets:

const presets = {
  button: {
    save: {
      children: 'Save [ICON]',
      appearance: 'primary',
      intent: 'success'
    },
    cancel: {
      children: 'Cancel',
      appearance: 'minimal'
    }
  }
}

const App = () => (
  <SmashingPresetProvider value={presets}>
    <Page/>
  </SmashingPresetProvider>
)

Bind preset group to component:

const Button = (props) => {
  const presetProps = usePreset('button', props)

  return <button {...presetProps} />
}
//or
const Button withPreset('button', (props) => {
  return <button {...props} />
})

Use preset:

const Page = () => (
  <>
    <Button preset="save" />
    <Button preset="cancel" appearance="subtle" /> 
  </>
)

This will render two buttons with props taken from presets. Preset can be overwritten with a prop: cancel button has appearance overwritten.