@primer/components 33.0.0-rc.b3e4ccee → 33.0.0

package/src/utils/testing.tsx

@@ -1,264 +0,0 @@
-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 {cleanup, render as HTMLRender} from '@testing-library/react'
-import {axe, toHaveNoViolations} from 'jest-axe'
-import type {Story as StoryType} from '@storybook/react'
-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)
-  })
-}
-
-expect.extend(toHaveNoViolations)
-export function checkStoriesForAxeViolations(name: string) {
-  // eslint-disable-next-line @typescript-eslint/no-var-requires
-  const stories = require(`../stories/${name}.stories`)
-
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars -- _meta
-  const {default: _meta, ...Stories} = stories
-  Object.values(Stories).map(Story => {
-    if (typeof Story !== 'function') return
-
-    it(`story ${(Story as StoryType).storyName} should have no axe violations`, async () => {
-      const {container} = HTMLRender(<Story />)
-      const results = await axe(container)
-      expect(results).toHaveNoViolations()
-      cleanup()
-    })
-  })
-}

package/src/utils/theme.js

@@ -1,64 +0,0 @@
-// 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/AriaRole.ts

@@ -1,71 +0,0 @@
-// 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/types/ComponentProps.ts

@@ -1,13 +0,0 @@
-/**
- * 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

package/src/utils/types/Flatten.ts

@@ -1,4 +0,0 @@
-/**
- * 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

package/src/utils/types/KeyPaths.ts

@@ -1,10 +0,0 @@
-// Produces a union of dot-delimited keypaths to the string values in a nested object:
-export type KeyPaths<O extends Record<string, unknown>> = {
-  [K in keyof O]: K extends string
-    ? O[K] extends string
-      ? `${K}`
-      : // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        // @ts-ignore TypeScript has bested me, but the KeyPaths type is tested.
-        `${K}.${KeyPaths<O[K]>}`
-    : never
-}[keyof O]

package/src/utils/types/MandateProps.ts

@@ -1,19 +0,0 @@
-/* 
-Used to convert a list of properties in a type from optional to required
-
-For example, we could make a new type from `Datum`
-where 'id' and 'label' required:
-  type Datum = {
-    description?: string
-    id?: string
-    label?: string
-    value: string
-  }
-
-  type DatumWithRequiredIdAndLabel = MandateProps<Datum, 'id' | 'label'>
-*/
-
-export type MandateProps<T extends unknown, K extends keyof T> = Omit<T, K> &
-  {
-    [MK in K]-?: NonNullable<T[MK]>
-  }

package/src/utils/types/Merge.ts

@@ -1,20 +0,0 @@
-/**
- * Given two object types A and B, return a type with all the properties of A that aren't also
- * properties of B, and all the properties of B.
- *
- * Useful when we have a component that spreads a "rest" of its props on a subcomponent:
- *
- * ```ts
- * interface OwnProps {
- *  foo: string
- * }
- *
- * type MyComponentProps = Merge<SubcomponentProps, OwnProps>
- * const MyComponent = ({foo, ...rest}: MyComponentProps) => {
- *   // ...
- *   return <SubComponent {...rest} />
- * }
- * ```
- */
-// eslint-disable-next-line @typescript-eslint/ban-types
-export type Merge<A = {}, B = {}> = Omit<A, keyof B> & B

package/src/utils/types/index.ts

@@ -1,5 +0,0 @@
-export * from './AriaRole'
-export * from './ComponentProps'
-export * from './Flatten'
-export * from './Merge'
-export * from './MandateProps'

package/src/utils/uniqueId.ts

@@ -1,6 +0,0 @@
-// 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/use-force-update.ts

@@ -1,7 +0,0 @@
-// Inspired from reach-ui: https://github.com/reach/reach-ui/blob/develop/packages/utils/src/use-force-update.ts
-import React from 'react'
-
-export const useForceUpdate = () => {
-  const [, rerender] = React.useState({})
-  return React.useCallback(() => rerender({}), [])
-}

package/src/utils/useIsomorphicLayoutEffect.ts

@@ -1,10 +0,0 @@
-import {useEffect, useLayoutEffect} from 'react'
-
-const useIsomorphicLayoutEffect =
-  typeof window !== 'undefined' &&
-  typeof window.document !== 'undefined' &&
-  typeof window.document.createElement !== 'undefined'
-    ? useLayoutEffect
-    : useEffect
-
-export default useIsomorphicLayoutEffect

package/src/utils/userAgent.ts

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