@primer/components 29.1.0 → 29.1.1-rc.cea79543

package/src/utils/testing.tsx

@@ -0,0 +1,243 @@
+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>
+  systemPropArray: unknown[]
+  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)
+  })
+}

package/src/utils/theme.js

@@ -0,0 +1,64 @@
+// Utility functions used in theme-preval.js
+// This file needs to be a JavaScript file using CommonJS to be compatiable with preval
+
+const isEmpty = require('lodash.isempty')
+const isObject = require('lodash.isobject')
+const chroma = require('chroma-js')
+
+function fontStack(fonts) {
+  return fonts.map(font => (font.includes(' ') ? `"${font}"` : font)).join(', ')
+}
+
+// The following functions are a temporary measure for splitting shadow values out from the colors object.
+// Eventually, we will push these structural changes upstream to primer/primitives so this data manipulation
+// will not be needed.
+
+function isShadowValue(value) {
+  return typeof value === 'string' && /(inset\s|)([0-9.]+(\w*)\s){1,4}(rgb[a]?\(.*\)|\w+)/.test(value)
+}
+
+function isColorValue(value) {
+  return chroma.valid(value)
+}
+
+function filterObject(obj, predicate) {
+  if (Array.isArray(obj)) {
+    return obj.filter(predicate)
+  }
+
+  return Object.entries(obj).reduce((acc, [key, value]) => {
+    if (isObject(value)) {
+      const result = filterObject(value, predicate)
+
+      // Don't include empty objects or arrays
+      if (!isEmpty(result)) {
+        acc[key] = result
+      }
+    } else if (predicate(value)) {
+      acc[key] = value
+    }
+
+    return acc
+  }, {})
+}
+
+function partitionColors(colors) {
+  return {
+    colors: filterObject(colors, value => isColorValue(value)),
+    shadows: filterObject(colors, value => isShadowValue(value))
+  }
+}
+
+function omitScale(obj) {
+  const {scale, ...rest} = obj
+  return rest
+}
+
+module.exports = {
+  fontStack,
+  isShadowValue,
+  isColorValue,
+  filterObject,
+  partitionColors,
+  omitScale
+}

package/src/utils/types.ts

@@ -0,0 +1,90 @@
+/**
+ * Extract a component's props
+ *
+ * Source: https://react-typescript-cheatsheet.netlify.app/docs/advanced/patterns_by_usecase#wrappingmirroring-a-component
+ *
+ * @example ComponentProps<typeof MyComponent>
+ */
+export type ComponentProps<T> = T extends React.ComponentType<infer Props>
+  ? // eslint-disable-next-line @typescript-eslint/ban-types
+    Props extends object
+    ? Props
+    : never
+  : never
+
+/**
+ * Contruct a type describing the items in `T`, if `T` is an array.
+ */
+export type Flatten<T extends unknown> = T extends (infer U)[] ? U : never
+
+// ref: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques
+export type AriaRole =
+  | 'alert'
+  | 'alertdialog'
+  | 'application'
+  | 'article'
+  | 'banner'
+  | 'button'
+  | 'cell'
+  | 'checkbox'
+  | 'columnheader'
+  | 'combobox'
+  | 'complementary'
+  | 'contentinfo'
+  | 'definition'
+  | 'dialog'
+  | 'directory'
+  | 'document'
+  | 'feed'
+  | 'figure'
+  | 'form'
+  | 'grid'
+  | 'gridcell'
+  | 'group'
+  | 'heading'
+  | 'img'
+  | 'link'
+  | 'list'
+  | 'listbox'
+  | 'listitem'
+  | 'log'
+  | 'main'
+  | 'marquee'
+  | 'math'
+  | 'menu'
+  | 'menubar'
+  | 'menuitem'
+  | 'menuitemcheckbox '
+  | 'menuitemradio'
+  | 'navigation'
+  | 'none'
+  | 'note'
+  | 'option'
+  | 'presentation'
+  | 'progressbar'
+  | 'radio'
+  | 'radiogroup'
+  | 'region'
+  | 'row'
+  | 'rowgroup'
+  | 'rowheader'
+  | 'scrollbar'
+  | 'search'
+  | 'searchbox'
+  | 'separator'
+  | 'slider'
+  | 'spinbutton'
+  | 'status'
+  | 'switch'
+  | 'tab'
+  | 'table'
+  | 'tablist'
+  | 'tabpanel'
+  | 'term'
+  | 'textbox'
+  | 'timer'
+  | 'toolbar'
+  | 'tooltip'
+  | 'tree'
+  | 'treegrid'
+  | 'treeitem'

package/src/utils/uniqueId.ts

@@ -0,0 +1,6 @@
+// Note: uniqueId may be unsafe in SSR contexts if it is used create DOM IDs or otherwise cause a hydration warning. Use useSSRSafeId instead.
+
+let idSeed = 10000
+export function uniqueId(): string {
+  return `__primer_id_${idSeed++}`
+}

package/src/utils/userAgent.ts

@@ -0,0 +1,7 @@
+let isMac: boolean | undefined = undefined
+export function isMacOS(): boolean {
+  if (isMac === undefined) {
+    isMac = /^mac/i.test(window.navigator.platform)
+  }
+  return isMac
+}