Component Prop Spreading

[andresin87]

Coding an Adevinta react @sui-component

Current agreement:

– What

There is no agreement using prop spreading.

Currently we have an agreement for closing classNames string prop (do not concat) and never use style inline. However, we also commonly find closed props in many of our components. This is not a problem at all because we have the agreement we can iterate every single component to increase its functionality with extra props but if can be tough when adding props for every single html attribute like 'data' and 'aria' attributes.

The final decision will be part of our @SUI-Components agreements.

– How

const ReactComponent = ({
	a,
	b,
	c,
	///...props
	}) => {
  // const {classNames, styles, ...rest} = props
  return (
	<tag
		a={a}
		b={b}
		c={c}
		/** {...rest} **/
	/>)
}


const App = () => (
  <ReactComponent a={0} b="b" c className="ignore-classname" style={{ display: 'ignore this value' }} />
)

– Why

We agree every Adevintan is a sui-components maintainer and our philosophy is to have a unique place to concentrate our repeated necessities all over our different brands. This repository concentrate the react-components of all of them. This suppose take decisions and keep in mind when coding in order to do not break any brand particularity.

Classname prop

We keep it close (not concated) in order to follow-through on our commitment and extend and maintain design tokens.

Style prop

We keep it closed (rules ignored) in order to follow-through on our commitment and maintain design tokens and separate the application between the "what" (html) and "how" (css)

Advantages ❤️	Disadvantages 💔
Open-Close principle (open for extension, but closed for modification)	Every new prop needs a feature iteration (which means more work)
Deterministic solution
Every single prop needs to be declared and documented

⬇⬇⬇

[andresin87]

A) Prop spreading

This option needs to manage our className and style closed props agreement and ignore it on each component and do NEVER forget it.

const ReactComponent = ({a, b c, ...props}) => {
  const {classNames, styles, ...rest} = props
  return (<tag a={a} b={b} c={c} {...rest} />)
}


const App = () => (
  <ReactComponent a={0} b="b" c d={<D/>} aria-label="label" data-attribute="attribute" />
)

[andresin87]

B)useAcceptedProps customHook for easy tackling our accepted props

This custom hook useProps gets the props and return only the common accepted/valid (aria- and data- in that case) props . Follows the DRY rule and SRP principle.

// Component
import useProps from '@s-ui/component-dependencies/useProps';

const ReactComponent = ({a, b c, ...other}) => {
  const acceptedProps = useAcceptedProps(other)
  return (
    <tag {...acceptedProps} a={a} b={b} c={c} />
)}

// App
const App = () => (
  <ReactComponent a={0} b="b" c d={<D/>} aria-label="label" data-attribute="attribute" />
)

// useAcceptedProps
export default (props={}) => Object.entries(props).reduce((props, [propKey, propValue]) => ({
   ...props,
   ...(propKey.startsWith('data-') || propKey.startsWith('aria-') && {[propKey]: propValue})
}), {})

This is easy to test because we can create a test template to check the useAcceptedProps is called 1 time at least when mounting the component and className and style are closed also. If we in future change our decisions, there is a single point of truth that concentrates the agreements and only iterating that hook will make every single component inherits our new agreements.

[andresin87]

C) useAriaProps and useDataProps customHooks

This custom hooks useAriaProps and useDataProps gets the props and return only the valid aria- and data- props . Follows the DRY rule and SRP principle dividing it in 2 different hooks.

// Component
import useAriaProps from '@s-ui/component-dependencies/useAriaProps';
import useDataProps from '@s-ui/component-dependencies/useDataProps';

const ReactComponent = ({a, b c, ...props}) => {
  const ariaProps = useAriaProps(props)
  const dataProps = useDataProps(props)
  return (
    <tag {...dataProps, ...ariaProps} a={a} b={b} c={c} />
)}

// App
const App = () => (
  <ReactComponent a={0} b="b" c d={<D/>} aria-label="label" data-attribute="attribute" />
)

// useAriaProps
export default (props={}) => Object.entries(props).reduce((acc, [propKey, propValue]) => {
    return {
      ...acc,
      ...(propKey.startsWith('aria-') && {[propKey]: propValue})
    }
  }, {})

// useDataProps
export default (props={}) => Object.entries(props).reduce((acc, [propKey, propValue]) => {
    return {
      ...acc,
      ...(propKey.startsWith('data-') && {[propKey]: propValue})
    }
  }, {})