@primer/components 31.0.0 → 31.0.2-rc.c7dafefb

package/src/theme-preval.js

@@ -0,0 +1,79 @@
+// @preval
+// This file needs to be a JavaScript file using CommonJS to be compatiable with preval
+
+const {default: primitives} = require('@primer/primitives')
+const {partitionColors, fontStack, omitScale} = require('./utils/theme')
+
+const {lineHeight: lineHeights} = primitives.typography.normal
+
+const animation = {
+  easeOutCubic: 'cubic-bezier(0.33, 1, 0.68, 1)'
+}
+
+const breakpoints = ['544px', '768px', '1012px', '1280px']
+
+const fonts = {
+  normal: fontStack([
+    '-apple-system',
+    'BlinkMacSystemFont',
+    'Segoe UI',
+    'Helvetica',
+    'Arial',
+    'sans-serif',
+    'Apple Color Emoji',
+    'Segoe UI Emoji'
+  ]),
+  mono: fontStack(['SFMono-Regular', 'Consolas', 'Liberation Mono', 'Menlo', 'Courier', 'monospace'])
+}
+
+const fontWeights = {
+  light: 300,
+  normal: 400,
+  semibold: 500,
+  bold: 600
+}
+
+const borderWidths = [0, '1px']
+
+const radii = ['0', '3px', '6px', '100px']
+
+const sizes = {
+  small: '544px',
+  medium: '768px',
+  large: '1012px',
+  xlarge: '1280px'
+}
+
+const fontSizes = ['12px', '14px', '16px', '20px', '24px', '32px', '40px', '48px']
+
+const space = ['0', '4px', '8px', '16px', '24px', '32px', '40px', '48px', '64px', '80px', '96px', '112px', '128px']
+
+/**
+ * @type Record<keyof typeof primitives.colors, Record<'colors' | 'shadows', Partial<typeof primitives.colors.light>>
+ */
+const colorSchemes = Object.entries(primitives.colors).reduce((acc, [name, variables]) => {
+  const {colors, shadows} = partitionColors(variables)
+  acc[name] = {
+    colors: omitScale(colors),
+    shadows: omitScale(shadows)
+  }
+  return acc
+}, {})
+
+const theme = {
+  animation,
+  borderWidths,
+  breakpoints,
+  fonts,
+  fontSizes,
+  fontWeights,
+  lineHeights,
+  radii,
+  sizes,
+  space,
+  colorSchemes
+}
+
+module.exports = {
+  theme
+}

package/src/theme.ts

@@ -0,0 +1,3 @@
+import {theme} from './theme-preval'
+
+export default theme

package/src/utils/deprecate.tsx

@@ -0,0 +1,73 @@
+import {useRef, useCallback} from 'react'
+declare let __DEV__: boolean
+
+type DeprecationType = {name: string; message: string; version: string}
+
+// eslint-disable-next-line @typescript-eslint/no-empty-function
+const noop = () => {}
+// eslint-disable-next-line import/no-mutable-exports
+let deprecate: ({name, message, version}: DeprecationType) => void | (() => void) = noop
+
+if (__DEV__) {
+  deprecate = ({name, message, version}: DeprecationType) => {
+    Deprecations.deprecate({name, message, version})
+  }
+}
+
+export {deprecate}
+
+// eslint-disable-next-line import/no-mutable-exports
+let useDeprecation = null
+
+if (__DEV__) {
+  useDeprecation = ({name, message, version}: DeprecationType) => {
+    const ref = useRef(false)
+    const logDeprecation = useCallback(() => {
+      if (!ref.current) {
+        ref.current = true
+        deprecate({name, message, version})
+      }
+    }, [name, message, version])
+
+    return logDeprecation
+  }
+} else {
+  useDeprecation = () => {
+    return noop
+  }
+}
+
+export {useDeprecation}
+
+export class Deprecations {
+  static instance: Deprecations | null = null
+  deprecations: Array<DeprecationType>
+
+  static get() {
+    if (!Deprecations.instance) {
+      Deprecations.instance = new Deprecations()
+    }
+
+    return Deprecations.instance
+  }
+
+  constructor() {
+    this.deprecations = []
+  }
+
+  static deprecate({name, message, version}: DeprecationType) {
+    const msg = `WARNING! ${name} is deprecated and will be removed in version ${version}. ${message}`
+    // eslint-disable-next-line no-console
+    console.warn(msg)
+
+    this.get().deprecations.push({name, message, version})
+  }
+
+  static getDeprecations() {
+    return this.get().deprecations
+  }
+
+  static clearDeprecations() {
+    this.get().deprecations.length = 0
+  }
+}

package/src/utils/isNumeric.tsx

@@ -0,0 +1,4 @@
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export default function isNumeric(n: any) {
+  return !isNaN(parseFloat(n)) && isFinite(n)
+}

package/src/utils/iterateFocusableElements.ts

@@ -0,0 +1,121 @@
+/**
+ * Options to the focusable elements iterator
+ */
+export interface IterateFocusableElements {
+  /**
+   * (Default: false) Iterate through focusable elements in reverse-order
+   */
+  reverse?: boolean
+
+  /**
+   * (Default: false) Perform additional checks to determine tabbability
+   * which may adversely affect app performance.
+   */
+  strict?: boolean
+
+  /**
+   * (Default: false) Only iterate tabbable elements, which is the subset
+   * of focusable elements that are part of the page's tab sequence.
+   */
+  onlyTabbable?: boolean
+}
+
+/**
+ * Returns an iterator over all of the focusable elements within `container`.
+ * Note: If `container` is itself focusable it will be included in the results.
+ * @param container The container over which to find focusable elements.
+ * @param reverse If true, iterate backwards through focusable elements.
+ */
+export function* iterateFocusableElements(
+  container: HTMLElement,
+  options: IterateFocusableElements = {}
+): Generator<HTMLElement, undefined, undefined> {
+  const strict = options.strict ?? false
+  const acceptFn = options.onlyTabbable ?? false ? isTabbable : isFocusable
+  const walker = document.createTreeWalker(container, NodeFilter.SHOW_ELEMENT, {
+    acceptNode: node =>
+      node instanceof HTMLElement && acceptFn(node, strict) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP
+  })
+  let nextNode: Node | null = null
+
+  // Allow the container to participate
+  if (!options.reverse && acceptFn(container, strict)) {
+    yield container
+  }
+
+  // If iterating in reverse, continue traversing down into the last child until we reach
+  // a leaf DOM node
+  if (options.reverse) {
+    let lastChild = walker.lastChild()
+    while (lastChild) {
+      nextNode = lastChild
+      lastChild = walker.lastChild()
+    }
+  } else {
+    nextNode = walker.firstChild()
+  }
+  while (nextNode instanceof HTMLElement) {
+    yield nextNode
+    nextNode = options.reverse ? walker.previousNode() : walker.nextNode()
+  }
+
+  // Allow the container to participate (in reverse)
+  if (options.reverse && acceptFn(container, strict)) {
+    yield container
+  }
+
+  return undefined
+}
+
+/**
+ * Determines whether the given element is focusable. If `strict` is true, we may
+ * perform additional checks that require a reflow (less performant).
+ * @param elem
+ * @param strict
+ */
+export function isFocusable(elem: HTMLElement, strict = false): boolean {
+  // Certain conditions cause an element to never be focusable, even if they have tabindex="0"
+  const disabledAttrInert =
+    ['BUTTON', 'INPUT', 'SELECT', 'TEXTAREA', 'OPTGROUP', 'OPTION', 'FIELDSET'].includes(elem.tagName) &&
+    (elem as HTMLElement & {disabled: boolean}).disabled
+  const hiddenInert = elem.hidden
+  const hiddenInputInert = elem instanceof HTMLInputElement && elem.type === 'hidden'
+  if (disabledAttrInert || hiddenInert || hiddenInputInert) {
+    return false
+  }
+
+  // Each of the conditions checked below require a reflow, thus are gated by the `strict`
+  // argument. If any are true, the element is not focusable, even if tabindex is set.
+  if (strict) {
+    const sizeInert = elem.offsetWidth === 0 || elem.offsetHeight === 0
+    const visibilityInert = ['hidden', 'collapse'].includes(getComputedStyle(elem).visibility)
+    const clientRectsInert = elem.getClientRects().length === 0
+    if (sizeInert || visibilityInert || clientRectsInert) {
+      return false
+    }
+  }
+
+  // Any element with `tabindex` explicitly set can be focusable, even if it's set to "-1"
+  if (elem.getAttribute('tabindex') != null) {
+    return true
+  }
+
+  // One last way `elem.tabIndex` can be wrong.
+  if (elem instanceof HTMLAnchorElement && elem.getAttribute('href') == null) {
+    return false
+  }
+
+  return elem.tabIndex !== -1
+}
+
+/**
+ * Determines whether the given element is tabbable. If `strict` is true, we may
+ * perform additional checks that require a reflow (less performant). This check
+ * ensures that the element is focusable and that its tabindex is not explicitly
+ * set to "-1" (which makes it focusable, but removes it from the tab order).
+ * @param elem
+ * @param strict
+ */
+export function isTabbable(elem: HTMLElement, strict = false): boolean {
+  return isFocusable(elem, strict) && elem.getAttribute('tabindex') !== '-1'
+}

package/src/utils/ssr.tsx

@@ -0,0 +1 @@
+export {SSRProvider, useSSRSafeId} from '@react-aria/ssr'

package/src/utils/test-deprecations.tsx

@@ -0,0 +1,19 @@
+import semver from 'semver'
+import {Deprecations} from './deprecate'
+
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const ourVersion = require('../../package.json').version
+
+beforeEach(() => {
+  Deprecations.clearDeprecations()
+})
+
+afterEach(() => {
+  const deprecations = Deprecations.getDeprecations()
+
+  for (const dep of deprecations) {
+    if (semver.gte(ourVersion, dep.version)) {
+      throw new Error(`Found a deprecation that should be removed in ${dep.version}`)
+    }
+  }
+})

package/src/utils/test-helpers.tsx

@@ -0,0 +1,7 @@
+// JSDOM doesn't mock ResizeObserver
+global.ResizeObserver = jest.fn().mockImplementation(() => {
+  return {
+    observe: jest.fn(),
+    disconnect: jest.fn()
+  }
+})

package/src/utils/test-matchers.tsx

@@ -0,0 +1,109 @@
+import 'jest-styled-components'
+import {styleSheetSerializer} from 'jest-styled-components/serializer'
+import React from 'react'
+import {ReactTestRendererJSON, ReactTestRendererNode} from 'react-test-renderer'
+import {getClasses, getComputedStyles, render} from './testing'
+
+expect.addSnapshotSerializer(styleSheetSerializer)
+
+const stringify = (d: Record<string, unknown>) => JSON.stringify(d, null, '  ')
+
+expect.extend({
+  toMatchKeys(obj, values) {
+    return {
+      pass: Object.keys(values).every(key => this.equals(obj[key], values[key])),
+      message: () => `Expected ${stringify(obj)} to have matching keys: ${stringify(values)}`
+    }
+  },
+
+  toHaveClass(node, klass) {
+    const classes = getClasses(node)
+    const pass = classes.includes(klass)
+    return {
+      pass,
+      message: () => `expected ${stringify(classes)} to include: ${stringify(klass)}`
+    }
+  },
+
+  toHaveClasses(node, klasses, only = false) {
+    const classes = getClasses(node)
+    const pass = only
+      ? this.equals(classes.sort(), klasses.sort())
+      : klasses.every((klass: Array<string>) => classes.includes(klass))
+    return {
+      pass,
+      message: () => `expected ${stringify(classes)} to include: ${stringify(klasses)}`
+    }
+  },
+
+  toImplementSxBehavior(element) {
+    const mediaKey = '@media (max-width:123px)'
+    const sxPropValue = {
+      [mediaKey]: {
+        color: 'red.5'
+      }
+    }
+
+    const elem = React.cloneElement(element, {sx: sxPropValue})
+
+    function checkStylesDeep(rendered: ReactTestRendererJSON): boolean {
+      const className = rendered.props.className
+      const styles = getComputedStyles(className)
+      const mediaStyles = styles[mediaKey] as Record<string, string> | null
+      if (mediaStyles && mediaStyles.color) {
+        return true
+      } else if (rendered.children) {
+        return rendered.children.some((child: ReactTestRendererNode) => checkStylesDeep(child as ReactTestRendererJSON))
+      } else {
+        return false
+      }
+    }
+
+    return {
+      pass: checkStylesDeep(render(elem)),
+      message: () => 'sx prop values did not change styles of component nor of any sub-components'
+    }
+  },
+
+  toSetExports(mod, expectedExports) {
+    if (!Object.keys(expectedExports).includes('default')) {
+      return {
+        pass: false,
+        message: () => "You must specify the module's default export"
+      }
+    }
+
+    const seen = new Set()
+    for (const exp of Object.keys(expectedExports)) {
+      seen.add(exp)
+      if (mod[exp] !== expectedExports[exp]) {
+        if (!mod[exp] && !expectedExports[exp]) {
+          continue
+        }
+
+        return {
+          pass: false,
+          message: () => `Module exported a different value from key '${exp}' than expected`
+        }
+      }
+    }
+
+    for (const exp of Object.keys(mod)) {
+      if (seen.has(exp)) {
+        continue
+      }
+
+      if (mod[exp] !== expectedExports[exp]) {
+        return {
+          pass: false,
+          message: () => `Module exported an unexpected value from key '${exp}'`
+        }
+      }
+    }
+
+    return {
+      pass: true,
+      message: () => ''
+    }
+  }
+})

package/src/utils/testing.tsx

@@ -0,0 +1,242 @@
+import React from 'react'
+import {promisify} from 'util'
+import renderer from 'react-test-renderer'
+import enzyme from 'enzyme'
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17'
+import {ThemeProvider} from '..'
+import {default as defaultTheme} from '../theme'
+
+type ComputedStyles = Record<string, string | Record<string, string>>
+
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const readFile = promisify(require('fs').readFile)
+
+export const COMPONENT_DISPLAY_NAME_REGEX = /^[A-Z][A-Za-z]+(\.[A-Z][A-Za-z]+)*$/
+
+enzyme.configure({adapter: new Adapter()})
+
+export function mount(component: React.ReactElement) {
+  return enzyme.mount(component)
+}
+
+declare global {
+  // eslint-disable-next-line @typescript-eslint/no-namespace
+  namespace jest {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    interface Matchers<R> {
+      toImplementSxBehavior: () => boolean
+      toSetExports: (exports: Record<string, string>) => boolean
+    }
+  }
+}
+
+/**
+ * Render the component (a React.createElement() or JSX expression)
+ * into its intermediate object representation with 'type',
+ * 'props', and 'children' keys
+ *
+ * The returned object can be matched with expect().toEqual(), e.g.
+ *
+ * ```js
+ * expect(render(<Foo />)).toEqual(render(<div foo='bar' />))
+ * ```
+ */
+export function render(component: React.ReactElement, theme = defaultTheme) {
+  return renderer
+    .create(<ThemeProvider theme={theme}>{component}</ThemeProvider>)
+    .toJSON() as renderer.ReactTestRendererJSON
+}
+
+/**
+ * Render the component (a React.createElement() or JSX expression)
+ * using react-test-renderer and return the root node
+ * ```
+ */
+export function renderRoot(component: React.ReactElement) {
+  return renderer.create(component).root
+}
+
+/**
+ * Get the HTML class names rendered by the component instance
+ * as an array.
+ *
+ * ```js
+ * expect(renderClasses(<div className='a b' />))
+ *   .toEqual(['a', 'b'])
+ * ```
+ */
+export function renderClasses(component: React.ReactElement): string {
+  const {
+    props: {className}
+  } = render(component)
+  return className ? className.trim().split(' ') : []
+}
+
+/**
+ * Returns true if a node renders with a single class.
+ */
+export function rendersClass(node: React.ReactElement, klass: string): boolean {
+  return renderClasses(node).includes(klass)
+}
+
+export function px(value: number | string): string {
+  return typeof value === 'number' ? `${value}px` : value
+}
+
+export function percent(value: number | string): string {
+  return typeof value === 'number' ? `${value}%` : value
+}
+
+export function renderStyles(node: React.ReactElement) {
+  const {
+    props: {className}
+  } = render(node)
+  return getComputedStyles(className)
+}
+
+export function getComputedStyles(className: string) {
+  const div = document.createElement('div')
+  div.className = className
+
+  const computed: ComputedStyles = {}
+  for (const sheet of document.styleSheets) {
+    // CSSRulesLists assumes every rule is a CSSRule, not a CSSStyleRule
+    for (const rule of sheet.cssRules) {
+      if (rule instanceof CSSMediaRule) {
+        readMedia(rule)
+      } else if (rule instanceof CSSStyleRule) {
+        readRule(rule, computed)
+      } else {
+        // console.warn('rule.type =', rule.type)
+      }
+    }
+  }
+
+  return computed
+
+  function matchesSafe(node: HTMLDivElement, selector: string) {
+    if (!selector) {
+      return false
+    }
+    try {
+      return node.matches(selector)
+    } catch (error) {
+      return false
+    }
+  }
+
+  function readRule(rule: CSSStyleRule, dest: ComputedStyles) {
+    if (matchesSafe(div, rule.selectorText)) {
+      const {style} = rule
+      for (let i = 0; i < style.length; i++) {
+        const prop = style[i]
+        dest[prop] = style.getPropertyValue(prop)
+      }
+    } else {
+      // console.warn('no match:', rule.selectorText)
+    }
+  }
+
+  function readMedia(mediaRule: CSSMediaRule) {
+    const key = `@media ${mediaRule.media[0]}`
+    // const dest = computed[key] || (computed[key] = {})
+    const dest = {}
+    for (const rule of mediaRule.cssRules) {
+      if (rule instanceof CSSStyleRule) {
+        readRule(rule, dest)
+      }
+    }
+
+    // Don't add media rule to computed styles
+    // if no styles were actually applied
+    if (Object.keys(dest).length > 0) {
+      computed[key] = dest
+    }
+  }
+}
+/**
+ * This provides a layer of compatibility between the render() function from
+ * react-test-renderer and Enzyme's mount()
+ */
+export function getProps(node: React.ReactElement) {
+  return typeof node.props === 'function' ? node.props() : node.props
+}
+
+export function getClassName(node: React.ReactElement) {
+  return getProps(node).className
+}
+
+export function getClasses(node: React.ReactElement) {
+  const className = getClassName(node)
+  return className ? className.trim().split(/ +/) : []
+}
+
+export async function loadCSS(path: string) {
+  const css = await readFile(require.resolve(path), 'utf8')
+  const style = document.createElement('style')
+  style.setAttribute('data-path', path)
+  style.textContent = css
+  document.head.appendChild(style)
+  return style
+}
+
+export function unloadCSS(path: string) {
+  const style = document.querySelector(`style[data-path="${path}"]`)
+  if (style) {
+    style.remove()
+    return true
+  }
+}
+
+// If a component requires certain props or other conditions in order
+// to render without errors, you can pass a `toRender` function that
+// returns an element ready to be rendered.
+
+interface Options {
+  skipAs?: boolean
+  skipSx?: boolean
+}
+
+interface BehavesAsComponent {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  Component: React.ComponentType<any>
+  toRender?: () => React.ReactElement
+  options?: Options
+}
+
+export function behavesAsComponent({Component, toRender, options}: BehavesAsComponent) {
+  options = options || {}
+
+  const getElement = () => (toRender ? toRender() : <Component />)
+
+  if (!options.skipSx) {
+    it('implements sx prop behavior', () => {
+      expect(getElement()).toImplementSxBehavior()
+    })
+  }
+
+  if (!options.skipAs) {
+    it('respects the as prop', () => {
+      const As = React.forwardRef<HTMLDivElement>((_props, ref) => <div className="as-component" ref={ref} />)
+      const elem = React.cloneElement(getElement(), {as: As})
+      expect(render(elem)).toEqual(render(<As />))
+    })
+  }
+
+  it('sets a valid displayName', () => {
+    expect(Component.displayName).toMatch(COMPONENT_DISPLAY_NAME_REGEX)
+  })
+
+  it('renders consistently', () => {
+    expect(render(getElement())).toMatchSnapshot()
+  })
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function checkExports(path: string, exports: Record<any, any>): void {
+  it('has declared exports', () => {
+    // eslint-disable-next-line @typescript-eslint/no-var-requires
+    const mod = require(`../${path}`)
+    expect(mod).toSetExports(exports)
+  })
+}