diegohaz

import React from "react";
import {
  useMenuState,
  useMenuBarState,
  Menu as MenuBase,
  MenuBar as MenuBarBase,
  MenuButton,
  MenuItem,
  MenuItemRadio,
  MenuItemCheckbox,

diegohaz

import * as React from "react";
import { FixedSizeList as List, areEqual } from "react-window";
import chunk from "lodash/chunk";
import {
  usePopoverState,
  PopoverDisclosure,
  Button,
  PopoverDisclosureHTMLProps,
} from "reakit";
import {

diegohaz

import { Toolbar, ToolbarButton, ToolbarGroup } from "@wordpress/components";

<ToolbarButton onClick={...}>Label</ToolbarButton>
<ToolbarButton icon="icon" onClick={...}>Label</ToolbarButton>
<ToolbarButton>
  {props => <DropdownMenu toggleProps={props} />}
</ToolbarButton>


<ToolbarButton as={DropdownMenu} />

diegohaz

import React from "react";
import { useButton, mergeProps } from "reakit";

function Button(props) {
  // useButton should be used when the props are being applied to a non-button element
  const button = useButton();
  return <div {...mergeProps(button, props)} />;
}

// return value of useButton

diegohaz

const Button = ({ as: T, ...props }) => <T {...props} />;

Button.propTypes = {
  as: PropTypes.oneOfType([PropTypes.string, PropTypes.func])
};

Button.defaultProps = {
  as: "button"
};

diegohaz

const callAll = (...fns) => (...args) => fns.forEach(fn => fn && fn(...args));

const internalOnLoad = () => console.log("loaded");

const Avatar = ({ className, style, onLoad, ...props }) => (
  <img 
    className={`avatar ${className}`}
    style={{ borderRadius: "50%", ...style }}
    onLoad={callAll(internalOnLoad, onLoad)}
    {...props} 

diegohaz

const Avatar = ({ className, style, ...props }) => (
  <img 
    className={`avatar ${className}`}
    style={{ borderRadius: "50%", ...style }}
    {...props} 
  />
);

Avatar.propTypes = {
  src: PropTypes.string.isRequired,

diegohaz

const Avatar = ({ className, ...props }) => (
  <img className={`avatar ${className}`} {...props} />
);

Avatar.propTypes = {
  src: PropTypes.string.isRequired,
  alt: PropTypes.string.isRequired,
  className: PropTypes.string
};

diegohaz

const Avatar = props => <img className="avatar" {...props} />;

Avatar.propTypes = {
  src: PropTypes.string.isRequired,
  alt: PropTypes.string.isRequired
};

diegohaz

const Card = ({ profile, imageUrl, imageAlt, title, description }) => (
  <div className="card">
    <div className="top-bar">
      <img className="avatar" src={profile.photoUrl} alt={profile.photoAlt} />
      <div className="username">{profile.username}</div>
    </div>
    <img className="image" src={imageUrl} alt={imageAlt} />
    <div className="content">
      <h2 className="title">{title}</h2>
      <p className="description">{description}</p>