@primer/components 29.1.0-rc.79e8b21e → 29.1.0

package/src/TextInput.tsx

@@ -1,183 +0,0 @@
-import classnames from 'classnames'
-import React from 'react'
-import styled, {css} from 'styled-components'
-import {maxWidth, MaxWidthProps, minWidth, MinWidthProps, variant, width, WidthProps} from 'styled-system'
-import {get} from './constants'
-import sx, {SxProp} from './sx'
-import {ComponentProps} from './utils/types'
-
-const sizeVariants = variant({
-  variants: {
-    small: {
-      minHeight: '28px',
-      px: 2,
-      py: '3px',
-      fontSize: 0,
-      lineHeight: '20px'
-    },
-    large: {
-      px: 2,
-      py: '10px',
-      fontSize: 3
-    }
-  }
-})
-
-const Input = styled.input`
-  border: 0;
-  font-size: inherit;
-  font-family: inherit;
-  background-color: transparent;
-  -webkit-appearance: none;
-  color: inherit;
-  width: 100%;
-  &:focus {
-    outline: 0;
-  }
-`
-
-type StyledWrapperProps = {
-  disabled?: boolean
-  hasIcon?: boolean
-  block?: boolean
-  contrast?: boolean
-  variant?: 'small' | 'large'
-} & WidthProps &
-  MinWidthProps &
-  MaxWidthProps &
-  SxProp
-
-const Wrapper = styled.span<StyledWrapperProps>`
-  display: inline-flex;
-  align-items: stretch;
-  min-height: 34px;
-  font-size: ${get('fontSizes.1')};
-  line-height: 20px;
-  color: ${get('colors.fg.default')};
-  vertical-align: middle;
-  background-repeat: no-repeat; // Repeat and position set for form states (success, error, etc)
-  background-position: right 8px center; // For form validation. This keeps images 8px from right and centered vertically.
-  border: 1px solid ${get('colors.border.default')};
-  border-radius: ${get('radii.2')};
-  outline: none;
-  box-shadow: ${get('shadows.primer.shadow.inset')};
-
-  ${props => {
-    if (props.hasIcon) {
-      return css`
-        padding: 0;
-      `
-    } else {
-      return css`
-        padding: 6px 12px;
-      `
-    }
-  }}
-
-  .TextInput-icon {
-    align-self: center;
-    color: ${get('colors.fg.muted')};
-    margin: 0 ${get('space.2')};
-    flex-shrink: 0;
-  }
-
-  &:focus-within {
-    border-color: ${get('colors.accent.emphasis')};
-    box-shadow: ${get('shadows.primer.shadow.focus')};
-  }
-
-  ${props =>
-    props.contrast &&
-    css`
-      background-color: ${get('colors.canvas.inset')};
-    `}
-
-  ${props =>
-    props.disabled &&
-    css`
-      color: ${get('colors.fg.muted')};
-      background-color: ${get('colors.input.disabledBg')};
-      border-color: ${get('colors.border.default')};
-    `}
-
-  ${props =>
-    props.block &&
-    css`
-      display: block;
-      width: 100%;
-    `}
-
-  // Ensures inputs don't zoom on mobile but are body-font size on desktop
-  @media (min-width: ${get('breakpoints.1')}) {
-    font-size: ${get('fontSizes.1')};
-  }
-  ${width}
-  ${minWidth}
-  ${maxWidth}
-  ${sizeVariants}
-  ${sx};
-`
-
-// Props that are not passed through to Input:
-type NonPassthroughProps = {
-  className?: string
-  icon?: React.ComponentType<{className?: string}>
-} & Pick<
-  ComponentProps<typeof Wrapper>,
-  'block' | 'contrast' | 'disabled' | 'sx' | 'theme' | 'width' | 'maxWidth' | 'minWidth' | 'variant'
->
-
-type TextInputInternalProps = NonPassthroughProps &
-  // Note: using ComponentProps instead of ComponentPropsWithoutRef here would cause a type issue where `css` is a required prop.
-  Omit<React.ComponentPropsWithoutRef<typeof Input>, keyof NonPassthroughProps>
-
-// using forwardRef is important so that other components (ex. SelectMenu) can autofocus the input
-const TextInput = React.forwardRef<HTMLInputElement, TextInputInternalProps>(
-  (
-    {
-      icon: IconComponent,
-      block,
-      className,
-      contrast,
-      disabled,
-      sx: sxProp,
-      theme,
-      width: widthProp,
-      minWidth: minWidthProp,
-      maxWidth: maxWidthProp,
-      variant: variantProp,
-      ...inputProps
-    },
-    ref
-  ) => {
-    // this class is necessary to style FilterSearch, plz no touchy!
-    const wrapperClasses = classnames(className, 'TextInput-wrapper')
-    return (
-      <Wrapper
-        block={block}
-        className={wrapperClasses}
-        contrast={contrast}
-        disabled={disabled}
-        hasIcon={!!IconComponent}
-        sx={sxProp}
-        theme={theme}
-        width={widthProp}
-        minWidth={minWidthProp}
-        maxWidth={maxWidthProp}
-        variant={variantProp}
-      >
-        {IconComponent && <IconComponent className="TextInput-icon" />}
-        <Input ref={ref} disabled={disabled} {...inputProps} />
-      </Wrapper>
-    )
-  }
-)
-
-TextInput.defaultProps = {
-  type: 'text'
-}
-
-TextInput.displayName = 'TextInput'
-
-export type TextInputProps = ComponentProps<typeof TextInput>
-export default TextInput

package/src/ThemeProvider.tsx

@@ -1,176 +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
-  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 = 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,
-        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) {
-  if (!theme.colorSchemes) {
-    return theme
-  }
-
-  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 deepmerge(theme, theme.colorSchemes[defaultColorScheme])
-  }
-
-  return deepmerge(theme, theme.colorSchemes[colorScheme])
-}
-
-export default ThemeProvider

package/src/Timeline.tsx

@@ -1,141 +0,0 @@
-import classnames from 'classnames'
-import React from 'react'
-import styled, {css} from 'styled-components'
-import Box, {BoxProps} from './Box'
-import {COMMON, get} from './constants'
-import sx from './sx'
-import {ComponentProps} from './utils/types'
-
-const Timeline = styled(Box)<{clipSidebar?: boolean}>`
-  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}
-
-const TimelineItem = styled(Box).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;
-      }
-    `}
-
-  ${COMMON};
-  ${sx};
-`
-
-export type TimelineBadgeProps = BoxProps
-
-const TimelineBadge = (props: TimelineBadgeProps) => {
-  return (
-    <Box position="relative" zIndex={1}>
-      <Box
-        display="flex"
-        className={classnames(props.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"
-        {...props}
-      >
-        {props.children}
-      </Box>
-    </Box>
-  )
-}
-
-const TimelineBody = styled(Box)`
-  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(Box)`
-  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
-})