wojtekmaj

function Button({ buttonLabel, onClick }) {
  return (
    <button
      /**
       * Apparently iOS Safari sometimes "forgets" to update button innerHTML. So to cope with
       * that, we're forcing iOS Safari to re-render the button completely on label change. Why
       * all this hassle with UA? Removing a button and rendering it again causes it to lose
       * focus.
       */
      key={buttonLabel}

wojtekmaj

.react-calendar {
  .rounded-corners();
  width: 350px;
  max-width: 100%;
  background: white;
  font: inherit;
  line-height: 1.125em;
  border: 0;
  overflow: hidden;

wojtekmaj

.pnp.*
.yarn/*
!.yarn/patches
!.yarn/plugins
!.yarn/releases
!.yarn/sdks
!.yarn/versions

wojtekmaj

if (!('open' in document.createElement('details'))) {
  const DETAILS = 'details';
  const SUMMARY = 'summary';

  function injectStyle(style) {
    const styleElement = document.createElement('style');
    styleElement.innerHTML = style;

    document.getElementsByTagName('head')[0].appendChild(styleElement);
  }

wojtekmaj

function round(value, decimals) {
  return Number(`${Math.round(`${value}e${decimals}`)}e-${decimals}`);
}

function roundPath(path, decimals = 3) {
  function roundPathPoint(pathPoint) {
    function roundPathPointElement(pathPointElement) {
      if (pathPointElement.match(/^[A-Za-z]/)) {
        return `${pathPointElement[0]}${pathPointElement.slice(1) && round(pathPointElement.slice(1), decimals)}`;
      }

wojtekmaj

function toPx(val) {
  return typeof val === 'number' ? `${val}px` : val;
}

/**
 * Creates a background with a single line, e.g. for simulating underline.
 *
 * Sample usage in styled-components:
 * ${props => lineBackground('to bottom', '2px', props.color)}
 *

wojtekmaj

function toPx(val) {
  return typeof val === 'number' ? `${val}px` : val;
}

/**
 * Creates a text outline of a given width and color.
 *
 * Sample usage in styled-components:
 * ${props => textOutline('2px', props.color)}
 *

wojtekmaj

/**
 * Transforms HTML table into JSON data.
 * 
 * Sample input:
 * 
 * <table>
 *   <thead>
 *     <tr>
 *       <th>Heading 1</th>
 *       <th>Heading 2</th>

wojtekmaj

/**
 * Allows to use multiple refs on a single React element.
 * Supports both functions and ref objects created using createRef() and useRef().
 *
 * Usage:
 * ```jsx
 * <div ref={mergeRefs(ref1, ref2, ref3)} />
 * ```
 *
 * @param {...Array<Function|Object>} inputRefs Array of refs

wojtekmaj

const findScrollContainer = (element) => {
  if (!element) {
    return undefined;
  }

  let parent = element.parentElement;
  while (parent) {
    const { overflow } = window.getComputedStyle(parent);
    if (overflow.split(' ').every(o => o === 'auto' || o === 'scroll')) {
      return parent;