borders.js

const colorPalette = theme.colors[color]

export function borders(children, color = "red") {
  let colors = Object.keys(theme.colors[color]);
  colors = shuffle(colors);
  return React.Children.map(children, (child, i) => {
    const borderProps = {
      style: { border: `1px solid ${colorPalette[colors[i]]}` },
    };
    const props = Object.assign({}, child.props, borderProps);
    return <child.type key={i} {...props} />;
  });
}

// NOTE: provider an array of colors to color palette, current implementation works with any system-ui framework. 

combineProviders.js

export function combineProviders(providers) {
  return providers.reduce((Combined, Provider) => ({ children }) => (
    <Combined>
      <Provider>{children}</Provider>
    </Combined>
  ));

  /***
   * USAGE:

  const Providers2 = combineProviders(providers);

  const App = () => {
    return (
      <Providers>
        {children}
      </Providers>
    )
  }

   */
}

Defer.js

// @link: https://itnext.io/improving-slow-mounts-in-react-apps-cff5117696dc

const Defer = ({ chunkSize, children }) => {
  const [renderedItemsCount, setRenderedItemsCount] = React.useState(chunkSize);

  const childrenArray = React.useMemo(() => React.Children.toArray(children), [
    children
  ]);

  React.useEffect(() => {
    if (renderedItemsCount < childrenArray.length) {
      window.requestIdleCallback(
        () => {
          setRenderedItemsCount(
            Math.min(renderedItemsCount + chunkSize, childrenArray.length)
          );
        },
        { timeout: 200 }
      );
    }
  }, [renderedItemsCount, childrenArray.length, chunkSize]);

  return childrenArray.slice(0, renderedItemsCount);
};


/*
  USAGE:
  
    <Defer chunkSize={5}>
      {items.map(item => <Card key={item.id} item={item} />)}
    </Defer>
  
*/

propper.js

export function propper(children, childProps) {
  // @SCOPE:  used to assign the same set of props to every child
  return React.Children.map(children, (child, i) => {
    const props = Object.assign({}, child.props, childProps);
    return <child.type key={i} {...props} />;
  });
}