@primer/components 31.0.2-rc.95622264 → 31.2.0-rc.0b631515

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/components",
-  "version": "31.0.2-rc.95622264",
+  "version": "31.2.0-rc.0b631515",
   "description": "Primer react components",
   "main": "lib/index.js",
   "module": "lib-esm/index.js",
@@ -15,7 +15,7 @@
     "start": "concurrently npm:start:*",
     "start:docs": "cd docs && npm run develop",
     "start:storybook": "start-storybook -p 6006",
-    "lint": "eslint '**/*.{js,ts,tsx,md,mdx}'",
+    "lint": "eslint '**/*.{js,ts,tsx,md,mdx}' --max-warnings=0",
     "lint:fix": "npm run lint -- --fix",
     "test": "jest",
     "test:update": "npm run test -- --updateSnapshot",
@@ -132,7 +132,9 @@
     "rollup-plugin-visualizer": "5.5.0",
     "semver": "7.3.5",
     "size-limit": "5.0.2",
+    "storybook-addon-performance": "0.16.1",
     "styled-components": "4.4.1",
+    "ts-toolbelt": "9.6.0",
     "typescript": "4.2.2"
   },
   "peerDependencies": {

package/script/build

@@ -1,5 +1,7 @@
 #!/bin/bash
 
+set -e
+
 # Clean up
 rm -rf dist
 rm -rf lib

package/src/ActionList/Header.tsx

@@ -68,7 +68,7 @@ export function Header({
   return (
     <StyledHeader role="heading" variant={variant} {...props}>
       {title}
-      {auxiliaryText && <span>auxiliaryText</span>}
+      {auxiliaryText && <span>{auxiliaryText}</span>}
     </StyledHeader>
   )
 }

package/src/Overlay.tsx

@@ -1,7 +1,8 @@
 import styled from 'styled-components'
-import React, {ReactElement, useEffect, useLayoutEffect, useRef} from 'react'
+import React, {ReactElement, useEffect, useRef} from 'react'
 import {get, COMMON, SystemPositionProps, SystemCommonProps} from './constants'
 import {ComponentProps} from './utils/types'
+import useLayoutEffect from './utils/useIsomorphicLayoutEffect'
 import {useOverlay, TouchOrMouseEvent} from './hooks'
 import Portal from './Portal'
 import sx, {SxProp} from './sx'

package/src/Portal/Portal.tsx

@@ -1,5 +1,6 @@
 import React from 'react'
 import {createPortal} from 'react-dom'
+import useLayoutEffect from '../utils/useIsomorphicLayoutEffect'
 
 const PRIMER_PORTAL_ROOT_ID = '__primerPortalRoot__'
 const DEFAULT_PORTAL_CONTAINER_NAME = '__default__'
@@ -69,7 +70,7 @@ export const Portal: React.FC<PortalProps> = ({children, onMount, containerName:
   hostElement.style.zIndex = '1'
   const elementRef = React.useRef(hostElement)
 
-  React.useLayoutEffect(() => {
+  useLayoutEffect(() => {
     let containerName = _containerName
     if (containerName === undefined) {
       containerName = DEFAULT_PORTAL_CONTAINER_NAME

package/src/__tests__/KeyPaths.types.test.ts

@@ -0,0 +1,14 @@
+import {Union} from 'ts-toolbelt'
+import {KeyPaths} from '../utils/types/KeyPaths'
+
+type NestedObject = {
+  a: string
+  b: {
+    b1: string
+    b2: string
+  }
+}
+
+export function generatesKeyPathsFromObject(x: Union.Diff<KeyPaths<NestedObject>, 'a' | 'b.b1' | 'b.b2'>): never {
+  return x
+}

package/src/__tests__/TextInputWithTokens.test.tsx

@@ -29,16 +29,6 @@ const LabelledTextInputWithTokens: React.FC<TextInputWithTokensProps> = ({onToke
   </>
 )
 
-// describe('axe test', () => {
-//   it('should have no axe violations', async () => {
-//     const onRemoveMock = jest.fn()
-//     const {container} = HTMLRender(<LabelledTextInputWithTokens tokens={mockTokens} onTokenRemove={onRemoveMock} />)
-//     const results = await axe(container)
-//     expect(results).toHaveNoViolations()
-//     cleanup()
-//   })
-// })
-
 jest.useFakeTimers()
 
 describe('TextInputWithTokens', () => {

package/src/hooks/useAnchoredPosition.ts

@@ -2,6 +2,7 @@ import React from 'react'
 import {PositionSettings, getAnchoredPosition, AnchorPosition} from '../behaviors/anchoredPosition'
 import {useProvidedRefOrCreate} from './useProvidedRefOrCreate'
 import {useResizeObserver} from './useResizeObserver'
+import useLayoutEffect from '../utils/useIsomorphicLayoutEffect'
 
 export interface AnchoredPositionHookSettings extends Partial<PositionSettings> {
   floatingElementRef?: React.RefObject<Element>
@@ -41,7 +42,7 @@ export function useAnchoredPosition(
     [floatingElementRef, anchorElementRef, ...dependencies]
   )
 
-  React.useLayoutEffect(updatePosition, [updatePosition])
+  useLayoutEffect(updatePosition, [updatePosition])
 
   useResizeObserver(updatePosition)
 

package/src/hooks/useCombinedRefs.ts

@@ -1,4 +1,5 @@
-import React, {ForwardedRef, useRef} from 'react'
+import {ForwardedRef, useRef} from 'react'
+import useLayoutEffect from '../utils/useIsomorphicLayoutEffect'
 
 /**
  * Creates a ref by combining multiple constituent refs. The ref returned by this hook
@@ -11,7 +12,7 @@ import React, {ForwardedRef, useRef} from 'react'
 export function useCombinedRefs<T>(...refs: (ForwardedRef<T> | null | undefined)[]) {
   const combinedRef = useRef<T | null>(null)
 
-  React.useLayoutEffect(() => {
+  useLayoutEffect(() => {
     function setRefs(current: T | null = null) {
       for (const ref of refs) {
         if (!ref) {
@@ -32,7 +33,6 @@ export function useCombinedRefs<T>(...refs: (ForwardedRef<T> | null | undefined)
       // eslint-disable-next-line react-hooks/exhaustive-deps
       setRefs(combinedRef.current)
     }
-
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [...refs, combinedRef.current])
 

package/src/hooks/useResizeObserver.ts

@@ -1,7 +1,7 @@
-import React from 'react'
+import useLayoutEffect from '../utils/useIsomorphicLayoutEffect'
 
 export function useResizeObserver(callback: () => void) {
-  React.useLayoutEffect(() => {
+  useLayoutEffect(() => {
     const observer = new window.ResizeObserver(() => callback())
     observer.observe(document.documentElement)
     return () => {

package/src/stories/Button.stories.tsx

@@ -77,7 +77,7 @@ export const buttonGroup = (args: StrictButtonStyleProps) => (
 export const buttonTableList = (args: ButtonStyleProps) => (
   <ButtonTableList {...args}>Button Table List</ButtonTableList>
 )
-export const disabledButton = (args: ButtonStyleProps) => {
+export const disabledButton = (args: StrictButtonStyleProps) => {
   const props = {disabled: true, ...args}
   return <Button {...props}>Disabled</Button>
 }

package/src/stories/Token.stories.tsx

@@ -7,6 +7,7 @@ import {BaseStyles, ThemeProvider} from '..'
 import Box from '../Box'
 import Token, {TokenProps} from '../Token/Token'
 import Text from '../Text'
+import {GitBranchIcon} from '@primer/octicons-react'
 
 export default {
   title: 'Tokens/Default',
@@ -29,7 +30,7 @@ export default {
   ]
 } as Meta
 
-const excludedControlKeys = ['id', 'as', 'tabIndex', 'onRemove']
+const excludedControlKeys = ['id', 'as', 'tabIndex', 'onRemove', 'leadingVisual']
 
 const SingleExampleContainer: React.FC<{label?: string}> = ({children, label}) => (
   <Box
@@ -94,6 +95,16 @@ export const Interactive = (args: Omit<TokenProps, 'ref' | 'text'>) => {
 }
 Interactive.parameters = {controls: {exclude: [...excludedControlKeys, 'hideRemoveButton', 'text']}}
 
+export const WithLeadingVisual = (args: Omit<TokenProps, 'ref'>) => {
+  return (
+    <ExampleCollectionContainer>
+      <Token {...args} leadingVisual={() => <GitBranchIcon />} />
+    </ExampleCollectionContainer>
+  )
+}
+WithLeadingVisual.storyName = 'with leadingVisual'
+WithLeadingVisual.parameters = {controls: {exclude: [...excludedControlKeys, 'hideRemoveButton']}}
+
 export const WithOnRemoveFn = (args: Omit<TokenProps, 'ref'>) => {
   return (
     <ExampleCollectionContainer>

package/src/sx.ts

@@ -1,7 +1,19 @@
-import css, {SystemStyleObject} from '@styled-system/css'
+import css, {SystemCssProperties, SystemStyleObject} from '@styled-system/css'
+import {ThemeColorPaths, ThemeShadowPaths} from './theme'
+import {ColorProps, ShadowProps} from 'styled-system'
+
+export type BetterCssProperties = {
+  [K in keyof SystemCssProperties]: K extends keyof ColorProps
+    ? ThemeColorPaths | SystemCssProperties[K]
+    : K extends keyof ShadowProps
+    ? ThemeShadowPaths | SystemCssProperties[K]
+    : SystemCssProperties[K]
+}
+
+export type BetterSystemStyleObject = BetterCssProperties | SystemStyleObject
 
 export interface SxProp {
-  sx?: SystemStyleObject
+  sx?: BetterSystemStyleObject
 }
 
 const sx = (props: SxProp) => css(props.sx)

package/src/theme.ts

@@ -1,3 +1,89 @@
 import {theme} from './theme-preval'
+import {KeyPaths} from './utils/types/KeyPaths'
 
 export default theme
+
+// NOTE: for now, ThemeColors and ThemeShadows are handcrafted types. It would be nice if these
+// were exports from primitives (or a different shape but derived from those exports).
+
+type ThemeColors = {
+  fg: {
+    default: string
+    muted: string
+    subtle: string
+    onEmphasis: string
+  }
+  canvas: {
+    default: string
+    overlay: string
+    inset: string
+    subtle: string
+  }
+  border: {
+    default: string
+    muted: string
+    subtle: string
+  }
+
+  // Roles
+  neutral: {
+    emphasisPlus: string
+    emphasis: string
+    muted: string
+    subtle: string
+  }
+  accent: {
+    fg: string
+    emphasis: string
+    muted: string
+    subtle: string
+  }
+  success: {
+    fg: string
+    emphasis: string
+    muted: string
+    subtle: string
+  }
+  attention: {
+    fg: string
+    emphasis: string
+    muted: string
+    subtle: string
+  }
+  severe: {
+    fg: string
+    emphasis: string
+    muted: string
+    subtle: string
+  }
+  danger: {
+    fg: string
+    emphasis: string
+    muted: string
+    subtle: string
+  }
+  done: {
+    fg: string
+    emphasis: string
+    muted: string
+    subtle: string
+  }
+  sponsors: {
+    fg: string
+    emphasis: string
+    muted: string
+    subtle: string
+  }
+}
+
+type ThemeShadows = {
+  shadow: {
+    small: string
+    medium: string
+    large: string
+    extraLarge: string
+  }
+}
+
+export type ThemeColorPaths = KeyPaths<ThemeColors>
+export type ThemeShadowPaths = KeyPaths<ThemeShadows>

package/src/utils/types/KeyPaths.ts

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

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