@primer/components 33.1.0-rc.6856bcf5 → 33.1.0

package/src/ThemeProvider.tsx

@@ -1,193 +0,0 @@
-import React from 'react'
-import {ThemeProvider as SCThemeProvider} from 'styled-components'
-import defaultTheme from './theme'
-import deepmerge from 'deepmerge'
-
-const defaultColorMode = 'day'
-const defaultDayScheme = 'light'
-const defaultNightScheme = 'dark'
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export type Theme = {[key: string]: any}
-type ColorMode = 'day' | 'night'
-type ColorModeWithAuto = ColorMode | 'auto'
-
-export type ThemeProviderProps = {
-  theme?: Theme
-  colorMode?: ColorModeWithAuto
-  dayScheme?: string
-  nightScheme?: string
-}
-
-const ThemeContext = React.createContext<{
-  theme?: Theme
-  colorScheme?: string
-  colorMode?: ColorModeWithAuto
-  resolvedColorMode?: ColorMode
-  resolvedColorScheme?: string
-  dayScheme?: string
-  nightScheme?: string
-  setColorMode: React.Dispatch<React.SetStateAction<ColorModeWithAuto>>
-  setDayScheme: React.Dispatch<React.SetStateAction<string>>
-  setNightScheme: React.Dispatch<React.SetStateAction<string>>
-}>({
-  setColorMode: () => null,
-  setDayScheme: () => null,
-  setNightScheme: () => null
-})
-
-export const ThemeProvider: React.FC<ThemeProviderProps> = ({children, ...props}) => {
-  // Get fallback values from parent ThemeProvider (if exists)
-  const {
-    theme: fallbackTheme,
-    colorMode: fallbackColorMode,
-    dayScheme: fallbackDayScheme,
-    nightScheme: fallbackNightScheme
-  } = useTheme()
-
-  // Initialize state
-  const theme = props.theme ?? fallbackTheme ?? defaultTheme
-  const [colorMode, setColorMode] = React.useState(props.colorMode ?? fallbackColorMode ?? defaultColorMode)
-  const [dayScheme, setDayScheme] = React.useState(props.dayScheme ?? fallbackDayScheme ?? defaultDayScheme)
-  const [nightScheme, setNightScheme] = React.useState(props.nightScheme ?? fallbackNightScheme ?? defaultNightScheme)
-  const systemColorMode = useSystemColorMode()
-  const resolvedColorMode = resolveColorMode(colorMode, systemColorMode)
-  const colorScheme = chooseColorScheme(resolvedColorMode, dayScheme, nightScheme)
-  const {resolvedTheme, resolvedColorScheme} = React.useMemo(
-    () => applyColorScheme(theme, colorScheme),
-    [theme, colorScheme]
-  )
-
-  // Update state if props change
-  React.useEffect(() => {
-    setColorMode(props.colorMode ?? fallbackColorMode ?? defaultColorMode)
-  }, [props.colorMode, fallbackColorMode])
-
-  React.useEffect(() => {
-    setDayScheme(props.dayScheme ?? fallbackDayScheme ?? defaultDayScheme)
-  }, [props.dayScheme, fallbackDayScheme])
-
-  React.useEffect(() => {
-    setNightScheme(props.nightScheme ?? fallbackNightScheme ?? defaultNightScheme)
-  }, [props.nightScheme, fallbackNightScheme])
-
-  return (
-    <ThemeContext.Provider
-      value={{
-        theme: resolvedTheme,
-        colorScheme,
-        colorMode,
-        resolvedColorMode,
-        resolvedColorScheme,
-        dayScheme,
-        nightScheme,
-        setColorMode,
-        setDayScheme,
-        setNightScheme
-      }}
-    >
-      <SCThemeProvider theme={resolvedTheme}>{children}</SCThemeProvider>
-    </ThemeContext.Provider>
-  )
-}
-
-export function useTheme() {
-  return React.useContext(ThemeContext)
-}
-
-export function useColorSchemeVar(values: Partial<Record<string, string>>, fallback: string) {
-  const {colorScheme = ''} = useTheme()
-  return values[colorScheme] ?? fallback
-}
-
-function useSystemColorMode() {
-  const [systemColorMode, setSystemColorMode] = React.useState(getSystemColorMode)
-
-  React.useEffect(() => {
-    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-    const media = window?.matchMedia?.('(prefers-color-scheme: dark)')
-
-    function handleChange(event: MediaQueryListEvent) {
-      const isNight = event.matches
-      setSystemColorMode(isNight ? 'night' : 'day')
-    }
-
-    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-    if (media) {
-      // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-      if (media.addEventListener !== undefined) {
-        media.addEventListener('change', handleChange)
-        return function cleanup() {
-          media.removeEventListener('change', handleChange)
-        }
-      }
-      // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-      else if (media.addListener !== undefined) {
-        media.addListener(handleChange)
-        return function cleanup() {
-          media.removeListener(handleChange)
-        }
-      }
-    }
-  }, [])
-
-  return systemColorMode
-}
-
-function getSystemColorMode(): ColorMode {
-  // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-  if (typeof window !== 'undefined' && window.matchMedia?.('(prefers-color-scheme: dark)')?.matches) {
-    return 'night'
-  }
-
-  return 'day'
-}
-
-function resolveColorMode(colorMode: ColorModeWithAuto, systemColorMode: ColorMode) {
-  switch (colorMode) {
-    case 'auto':
-      return systemColorMode
-    default:
-      return colorMode
-  }
-}
-
-function chooseColorScheme(colorMode: ColorMode, dayScheme: string, nightScheme: string) {
-  switch (colorMode) {
-    case 'day':
-      return dayScheme
-    case 'night':
-      return nightScheme
-  }
-}
-
-function applyColorScheme(
-  theme: Theme,
-  colorScheme: string
-): {resolvedTheme: Theme; resolvedColorScheme: string | undefined} {
-  if (!theme.colorSchemes) {
-    return {
-      resolvedTheme: theme,
-      resolvedColorScheme: undefined
-    }
-  }
-
-  if (!theme.colorSchemes[colorScheme]) {
-    // eslint-disable-next-line no-console
-    console.error(`\`${colorScheme}\` scheme not defined in \`theme.colorSchemes\``)
-
-    // Apply the first defined color scheme
-    const defaultColorScheme = Object.keys(theme.colorSchemes)[0]
-    return {
-      resolvedTheme: deepmerge(theme, theme.colorSchemes[defaultColorScheme]),
-      resolvedColorScheme: defaultColorScheme
-    }
-  }
-
-  return {
-    resolvedTheme: deepmerge(theme, theme.colorSchemes[colorScheme]),
-    resolvedColorScheme: colorScheme
-  }
-}
-
-export default ThemeProvider

package/src/Timeline.tsx

@@ -1,140 +0,0 @@
-import classnames from 'classnames'
-import React from 'react'
-import styled, {css} from 'styled-components'
-import {Box} from '.'
-import {get} from './constants'
-import sx, {SxProp} from './sx'
-import {ComponentProps} from './utils/types'
-
-const Timeline = styled.div<{clipSidebar?: boolean} & SxProp>`
-  display: flex;
-  flex-direction: column;
-  ${props =>
-    props.clipSidebar &&
-    css`
-      .Timeline-Item:first-child {
-        padding-top: 0;
-      }
-
-      .Timeline-Item:last-child {
-        padding-bottom: 0;
-      }
-    `}
-
-  ${sx};
-`
-
-type StyledTimelineItemProps = {condensed?: boolean} & SxProp
-
-const TimelineItem = styled.div.attrs<StyledTimelineItemProps>(props => ({
-  className: classnames('Timeline-Item', props.className)
-}))<StyledTimelineItemProps>`
-  display: flex;
-  position: relative;
-  padding: ${get('space.3')} 0;
-  margin-left: ${get('space.3')};
-
-  &::before {
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    display: block;
-    width: 2px;
-    content: '';
-    background-color: ${get('colors.border.muted')};
-  }
-
-  ${props =>
-    props.condensed &&
-    css`
-      padding-top: ${get('space.1')};
-      padding-bottom: 0;
-      &:last-child {
-        padding-bottom: ${get('space.3')};
-      }
-
-      .TimelineItem-Badge {
-        height: 16px;
-        margin-top: ${get('space.2')};
-        margin-bottom: ${get('space.2')};
-        color: ${get('colors.fg.muted')};
-        background-color: ${get('colors.canvas.default')};
-        border: 0;
-      }
-    `}
-
-  ${sx};
-`
-
-export type TimelineBadgeProps = {children?: React.ReactNode} & SxProp
-
-const TimelineBadge = (props: TimelineBadgeProps) => {
-  return (
-    <Box position="relative" zIndex={1}>
-      <Box
-        display="flex"
-        className="TimelineItem-Badge"
-        flexShrink={0}
-        borderRadius="50%"
-        borderWidth="2px"
-        borderStyle="solid"
-        borderColor="canvas.default"
-        overflow="hidden"
-        color="fg.muted"
-        bg="timeline.badgeBg"
-        width="32px"
-        height="32px"
-        mr={2}
-        ml="-15px"
-        alignItems="center"
-        justifyContent="center"
-        sx={props.sx}
-      >
-        {props.children}
-      </Box>
-    </Box>
-  )
-}
-
-const TimelineBody = styled.div<SxProp>`
-  min-width: 0;
-  max-width: 100%;
-  margin-top: ${get('space.1')};
-  color: ${get('colors.fg.muted')};
-  flex: auto;
-  font-size: ${get('fontSizes.1')};
-  ${sx};
-`
-
-const TimelineBreak = styled.div<SxProp>`
-  position: relative
-  z-index: 1;
-  height: 24px;
-  margin: 0;
-  margin-bottom: -${get('space.3')};
-  margin-left: 0;
-  background-color: ${get('colors.canvas.default')};
-  border: 0;
-  border-top: ${get('space.1')} solid ${get('colors.border.default')};
-  ${sx};
-`
-
-TimelineItem.displayName = 'Timeline.Item'
-
-TimelineBadge.displayName = 'Timeline.Badge'
-
-TimelineBody.displayName = 'Timeline.Body'
-
-TimelineBreak.displayName = 'Timeline.Break'
-
-export type TimelineProps = ComponentProps<typeof Timeline>
-export type TimelineItemsProps = ComponentProps<typeof TimelineItem>
-export type TimelineBodyProps = ComponentProps<typeof TimelineBody>
-export type TimelineBreakProps = ComponentProps<typeof TimelineBreak>
-export default Object.assign(Timeline, {
-  Item: TimelineItem,
-  Badge: TimelineBadge,
-  Body: TimelineBody,
-  Break: TimelineBreak
-})

package/src/Token/AvatarToken.tsx

@@ -1,54 +0,0 @@
-import React, {forwardRef} from 'react'
-import styled from 'styled-components'
-import {get} from '../constants'
-import {TokenBaseProps, defaultTokenSize, tokenSizes, TokenSizeKeys} from './TokenBase'
-import Token from './Token'
-import {Avatar} from '..'
-
-export interface AvatarTokenProps extends TokenBaseProps {
-  avatarSrc: string
-}
-
-const AvatarContainer = styled.span<{avatarSize: TokenSizeKeys}>`
-  // 'space.1' is used because to match space from the left of the token to the left of the avatar
-  // '* 2' is done to account for the top and bottom
-  --spacing: calc(${get('space.1')} * 2);
-
-  display: block;
-  height: ${props => `calc(${tokenSizes[props.avatarSize]} - var(--spacing))`};
-  width: ${props => `calc(${tokenSizes[props.avatarSize]} - var(--spacing))`};
-`
-
-const AvatarToken = forwardRef<HTMLElement, AvatarTokenProps>(({avatarSrc, id, size, ...rest}, forwardedRef) => {
-  return (
-    <Token
-      leadingVisual={() => (
-        <AvatarContainer avatarSize={size || defaultTokenSize}>
-          <Avatar
-            src={avatarSrc}
-            size={parseInt(tokenSizes[size || defaultTokenSize], 10)}
-            sx={{
-              width: '100%',
-              height: '100%'
-            }}
-          />
-        </AvatarContainer>
-      )}
-      size={size}
-      id={id?.toString()}
-      sx={{
-        paddingLeft: get('space.1')
-      }}
-      {...rest}
-      ref={forwardedRef}
-    />
-  )
-})
-
-AvatarToken.defaultProps = {
-  size: defaultTokenSize
-}
-
-AvatarToken.displayName = 'AvatarToken'
-
-export default AvatarToken

package/src/Token/IssueLabelToken.tsx

@@ -1,150 +0,0 @@
-import React, {forwardRef, MouseEventHandler, useMemo} from 'react'
-import {CSSObject} from '@styled-system/css'
-import TokenBase, {defaultTokenSize, isTokenInteractive, TokenBaseProps} from './TokenBase'
-import RemoveTokenButton from './_RemoveTokenButton'
-import {parseToHsla, parseToRgba} from 'color2k'
-import {useTheme} from '../ThemeProvider'
-import TokenTextContainer from './_TokenTextContainer'
-
-export interface IssueLabelTokenProps extends TokenBaseProps {
-  /**
-   * The color that corresponds to the label
-   */
-  fillColor?: string
-  /**
-   * Whether the remove button should be rendered in the token
-   */
-  hideRemoveButton?: boolean
-}
-
-const tokenBorderWidthPx = 1
-
-const lightModeStyles = {
-  '--lightness-threshold': '0.453',
-  '--border-threshold': '0.96',
-  '--border-alpha': 'max(0, min(calc((var(--perceived-lightness) - var(--border-threshold)) * 100), 1))',
-  background: 'rgb(var(--label-r), var(--label-g), var(--label-b))',
-  color: 'hsl(0, 0%, calc(var(--lightness-switch) * 100%))',
-  borderWidth: tokenBorderWidthPx,
-  borderStyle: 'solid',
-  borderColor: 'hsla(var(--label-h),calc(var(--label-s) * 1%),calc((var(--label-l) - 25) * 1%),var(--border-alpha))'
-}
-
-const darkModeStyles = {
-  '--lightness-threshold': '0.6',
-  '--background-alpha': '0.18',
-  '--border-alpha': '0.3',
-  '--lighten-by': 'calc(((var(--lightness-threshold) - var(--perceived-lightness)) * 100) * var(--lightness-switch))',
-  borderWidth: tokenBorderWidthPx,
-  borderStyle: 'solid',
-  background: 'rgba(var(--label-r), var(--label-g), var(--label-b), var(--background-alpha))',
-  color: 'hsl(var(--label-h), calc(var(--label-s) * 1%), calc((var(--label-l) + var(--lighten-by)) * 1%))',
-  borderColor:
-    'hsla(var(--label-h), calc(var(--label-s) * 1%),calc((var(--label-l) + var(--lighten-by)) * 1%),var(--border-alpha))'
-}
-
-const IssueLabelToken = forwardRef<HTMLElement, IssueLabelTokenProps>((props, forwardedRef) => {
-  const {as, fillColor = '#999', onRemove, id, isSelected, text, size, hideRemoveButton, href, onClick, ...rest} = props
-  const interactiveTokenProps = {
-    as,
-    href,
-    onClick
-  }
-  const {colorScheme} = useTheme()
-  const hasMultipleActionTargets = isTokenInteractive(props) && Boolean(onRemove) && !hideRemoveButton
-  const onRemoveClick: MouseEventHandler = e => {
-    e.stopPropagation()
-    onRemove && onRemove()
-  }
-  const labelStyles: CSSObject = useMemo(() => {
-    const [r, g, b] = parseToRgba(fillColor)
-    const [h, s, l] = parseToHsla(fillColor)
-
-    // label hack taken from https://github.com/github/github/blob/master/app/assets/stylesheets/hacks/hx_primer-labels.scss#L43-L108
-    // this logic should eventually live in primer/components. Also worthy of note is that the dotcom hack code will be moving to primer/css soon.
-    return {
-      '--label-r': String(r),
-      '--label-g': String(g),
-      '--label-b': String(b),
-      '--label-h': String(Math.round(h)),
-      '--label-s': String(Math.round(s * 100)),
-      '--label-l': String(Math.round(l * 100)),
-      '--perceived-lightness':
-        'calc(((var(--label-r) * 0.2126) + (var(--label-g) * 0.7152) + (var(--label-b) * 0.0722)) / 255)',
-      '--lightness-switch': 'max(0, min(calc((var(--perceived-lightness) - var(--lightness-threshold)) * -1000), 1))',
-      paddingRight: hideRemoveButton || !onRemove ? undefined : 0,
-      position: 'relative',
-      ...(colorScheme === 'light' ? lightModeStyles : darkModeStyles),
-      ...(isSelected
-        ? {
-            background:
-              colorScheme === 'light'
-                ? 'hsl(var(--label-h), calc(var(--label-s) * 1%), calc((var(--label-l) - 5) * 1%))'
-                : darkModeStyles.background,
-            ':focus': {
-              outline: 'none'
-            },
-            ':after': {
-              content: '""',
-              position: 'absolute',
-              zIndex: 1,
-              top: `-${tokenBorderWidthPx * 2}px`,
-              right: `-${tokenBorderWidthPx * 2}px`,
-              bottom: `-${tokenBorderWidthPx * 2}px`,
-              left: `-${tokenBorderWidthPx * 2}px`,
-              display: 'block',
-              pointerEvents: 'none',
-              boxShadow: `0 0 0 ${tokenBorderWidthPx * 2}px ${
-                colorScheme === 'light'
-                  ? 'rgb(var(--label-r), var(--label-g), var(--label-b))'
-                  : 'hsl(var(--label-h), calc(var(--label-s) * 1%), calc((var(--label-l) + var(--lighten-by)) * 1%))'
-              }`,
-              borderRadius: '999px'
-            }
-          }
-        : {})
-    }
-  }, [colorScheme, fillColor, isSelected, hideRemoveButton, onRemove])
-
-  return (
-    <TokenBase
-      onRemove={onRemove}
-      id={id?.toString()}
-      isSelected={isSelected}
-      text={text}
-      size={size}
-      sx={labelStyles}
-      {...(!hasMultipleActionTargets ? interactiveTokenProps : {})}
-      {...rest}
-      ref={forwardedRef}
-    >
-      <TokenTextContainer {...(hasMultipleActionTargets ? interactiveTokenProps : {})}>{text}</TokenTextContainer>
-      {!hideRemoveButton && onRemove ? (
-        <RemoveTokenButton
-          borderOffset={tokenBorderWidthPx}
-          onClick={onRemoveClick}
-          size={size}
-          aria-hidden={hasMultipleActionTargets ? 'true' : 'false'}
-          isParentInteractive={isTokenInteractive(props)}
-          sx={
-            hasMultipleActionTargets
-              ? {
-                  position: 'relative',
-                  zIndex: '1'
-                }
-              : {}
-          }
-        />
-      ) : null}
-    </TokenBase>
-  )
-})
-
-IssueLabelToken.defaultProps = {
-  fillColor: '#999',
-  size: defaultTokenSize
-}
-
-IssueLabelToken.displayName = 'IssueLabelToken'
-
-export default IssueLabelToken

package/src/Token/Token.tsx

@@ -1,126 +0,0 @@
-import React, {forwardRef, MouseEventHandler} from 'react'
-import styled, {css} from 'styled-components'
-import {get} from '../constants'
-import sx, {SxProp} from '../sx'
-import TokenBase, {defaultTokenSize, isTokenInteractive, TokenBaseProps} from './TokenBase'
-import RemoveTokenButton from './_RemoveTokenButton'
-import TokenTextContainer from './_TokenTextContainer'
-
-export interface TokenProps extends TokenBaseProps {
-  /**
-   * A function that renders a component before the token text
-   */
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  leadingVisual?: React.ComponentType<any>
-  /**
-   * Whether the remove button should be rendered in the token
-   */
-  hideRemoveButton?: boolean
-}
-
-const tokenBorderWidthPx = 1
-
-const DefaultTokenStyled = styled(TokenBase)<TokenProps & {isTokenInteractive: boolean} & SxProp>`
-  background-color: ${get('colors.neutral.subtle')};
-  border-color: ${props => (props.isSelected ? get('colors.fg.default') : get('colors.border.subtle'))};
-  border-style: solid;
-  border-width: ${tokenBorderWidthPx}px;
-  color: ${props => (props.isSelected ? get('colors.fg.default') : get('colors.fg.muted'))};
-  max-width: 100%;
-  padding-right: ${props => (!props.hideRemoveButton ? 0 : undefined)};
-  position: relative;
-  ${sx}
-
-  ${props => {
-    if (props.isTokenInteractive) {
-      return css`
-        &:hover {
-          background-color: ${get('colors.neutral.muted')};
-          box-shadow: ${get('colors.shadow.medium')};
-          color: ${get('colors.fg.default')};
-        }
-      `
-    }
-  }}
-`
-
-const LeadingVisualContainer = styled('span')<Pick<TokenBaseProps, 'size'>>`
-  flex-shrink: 0;
-  line-height: 0;
-
-  ${props => {
-    switch (props.size) {
-      case 'large':
-      case 'extralarge':
-        return css`
-          margin-right: ${get('space.2')};
-        `
-      default:
-        return css`
-          margin-right: ${get('space.1')};
-        `
-    }
-  }}
-`
-
-const Token = forwardRef<HTMLAnchorElement | HTMLButtonElement | HTMLSpanElement, TokenProps & SxProp>(
-  (props, forwardedRef) => {
-    const {as, onRemove, id, leadingVisual: LeadingVisual, text, size, hideRemoveButton, href, onClick, ...rest} = props
-    const hasMultipleActionTargets = isTokenInteractive(props) && Boolean(onRemove) && !hideRemoveButton
-    const onRemoveClick: MouseEventHandler = e => {
-      e.stopPropagation()
-      onRemove && onRemove()
-    }
-    const interactiveTokenProps = {
-      as,
-      href,
-      onClick
-    }
-
-    return (
-      <DefaultTokenStyled
-        onRemove={onRemove}
-        hideRemoveButton={hideRemoveButton || !onRemove}
-        id={id?.toString()}
-        text={text}
-        size={size}
-        isTokenInteractive={isTokenInteractive(props)}
-        {...(!hasMultipleActionTargets ? interactiveTokenProps : {})}
-        {...rest}
-        ref={forwardedRef}
-      >
-        {LeadingVisual ? (
-          <LeadingVisualContainer size={size}>
-            <LeadingVisual />
-          </LeadingVisualContainer>
-        ) : null}
-        <TokenTextContainer {...(hasMultipleActionTargets ? interactiveTokenProps : {})}>{text}</TokenTextContainer>
-        {!hideRemoveButton && onRemove ? (
-          <RemoveTokenButton
-            borderOffset={tokenBorderWidthPx}
-            onClick={onRemoveClick}
-            size={size}
-            isParentInteractive={isTokenInteractive(props)}
-            aria-hidden={hasMultipleActionTargets ? 'true' : 'false'}
-            sx={
-              hasMultipleActionTargets
-                ? {
-                    position: 'relative',
-                    zIndex: '1'
-                  }
-                : {}
-            }
-          />
-        ) : null}
-      </DefaultTokenStyled>
-    )
-  }
-)
-
-Token.displayName = 'Token'
-
-Token.defaultProps = {
-  size: defaultTokenSize
-}
-
-export default Token