@primer/components 29.0.0-rc.f749c85e → 29.1.0

package/docs/package.json

@@ -1,35 +0,0 @@
-{
-  "name": "docs",
-  "repository": "primer/react",
-  "version": "1.0.0",
-  "scripts": {
-    "clean": "gatsby clean",
-    "develop": "gatsby develop",
-    "build": "pushd .. && npm install && popd && cross-env NODE_ENV=production gatsby build --prefix-paths"
-  },
-  "engines": {
-    "node": ">= 10.x"
-  },
-  "dependencies": {
-    "@primer/gatsby-theme-doctocat": "^1.7.0",
-    "@primer/octicons-react": "^10.0.0",
-    "@primer/primitives": "4.1.0",
-    "@styled-system/prop-types": "^5.1.0",
-    "@styled-system/theme-get": "^5.1.0",
-    "deepmerge": "4.2.2",
-    "gatsby": "^3.7.2",
-    "gatsby-plugin-alias-imports": "^1.0.5",
-    "gatsby-plugin-typescript": "2.10.0",
-    "prop-types": "^15.7.2",
-    "react": "^17.0.0",
-    "react-docgen-typescript": "^2.0.0",
-    "react-dom": "^17.0.0",
-    "styled-system": "^5.1.0"
-  },
-  "devDependencies": {
-    "cross-env": "7.0.2",
-    "globby": "^11.0.4",
-    "minipass": "^2.9.0",
-    "path-browserify": "^1.0.1"
-  }
-}

package/docs/src/@primer/gatsby-theme-doctocat/components/hero.js

@@ -1,21 +0,0 @@
-import {Box, Heading, Text} from '@primer/components'
-import React from 'react'
-import {Container} from '@primer/gatsby-theme-doctocat'
-import heroIllustration from '../primer-components-hero.svg'
-import {version} from '../../../../../package.json'
-
-export default function Hero() {
-  return (
-    <Box bg="black" py={6}>
-      <Container>
-        <Heading color="blue.4" fontSize={7} lineHeight="condensed" pb={3} m={0}>
-          Primer React
-        </Heading>
-        <Text as="p" fontFamily="mono" mt={0} mb={2} color="blue.3" fontSize={2}>
-          v{version}
-        </Text>
-        <img src={heroIllustration} alt="" width="100%" />
-      </Container>
-    </Box>
-  )
-}

package/docs/src/@primer/gatsby-theme-doctocat/components/live-code.js

@@ -1,84 +0,0 @@
-import {Box, Text} from '@primer/components'
-import ClipboardCopy from '@primer/gatsby-theme-doctocat/src/components/clipboard-copy'
-import LivePreviewWrapper from '@primer/gatsby-theme-doctocat/src/components/live-preview-wrapper'
-import githubTheme from '@primer/gatsby-theme-doctocat/src/github'
-import scope from '@primer/gatsby-theme-doctocat/src/live-code-scope'
-import htmlReactParser from 'html-react-parser'
-import React, {useState} from 'react'
-import reactElementToJsxString from 'react-element-to-jsx-string'
-import {LiveEditor, LiveError, LivePreview, LiveProvider} from 'react-live'
-import {ThemeContext} from 'styled-components'
-
-// Temporarily shadowing this file to update the border color of the live examples.
-// We can remove this file when Doctocat uses functional color variables.
-
-const languageTransformers = {
-  html: html => htmlToJsx(html),
-  jsx: jsx => wrapWithFragment(jsx)
-}
-
-function htmlToJsx(html) {
-  try {
-    const reactElement = htmlReactParser(removeNewlines(html))
-    // The output of htmlReactParser could be a single React element
-    // or an array of React elements. reactElementToJsxString does not accept arrays
-    // so we have to wrap the output in React fragment.
-    return reactElementToJsxString(<>{reactElement}</>)
-  } catch (error) {
-    return wrapWithFragment(html)
-  }
-}
-
-function removeNewlines(string) {
-  return string.replace(/(\r\n|\n|\r)/gm, '')
-}
-
-function wrapWithFragment(jsx) {
-  // eslint-disable-next-line github/unescaped-html-literal
-  return `<React.Fragment>${jsx}</React.Fragment>`
-}
-
-function LiveCode({code, language, noinline}) {
-  const theme = React.useContext(ThemeContext)
-  const [liveCode, setLiveCode] = useState(code)
-  const handleChange = updatedLiveCode => setLiveCode(updatedLiveCode)
-
-  return (
-    <Box display="flex" flexDirection="column" mb={3}>
-      <LiveProvider scope={scope} code={liveCode} transformCode={languageTransformers[language]} noInline={noinline}>
-        <Box
-          sx={{
-            border: '1px solid',
-            borderColor: 'border.primary',
-            borderTopRightRadius: 2,
-            borderTopLeftRadius: 2
-          }}
-        >
-          <LivePreviewWrapper>
-            <LivePreview />
-          </LivePreviewWrapper>
-        </Box>
-        <Box position="relative">
-          <LiveEditor
-            onChange={handleChange}
-            theme={githubTheme}
-            ignoreTabKey={true}
-            padding={theme.space[3]}
-            style={{
-              fontFamily: theme.fonts.mono,
-              fontSize: '85%',
-              borderBottomLeftRadius: theme.radii[2],
-              borderBottomRightRadius: theme.radii[2]
-            }}
-          />
-          <Box position="absolute" top={0} right={0} p={2}>
-            <ClipboardCopy value={liveCode} />
-          </Box>
-        </Box>
-        <Text as={LiveError} m={0} p={3} fontFamily="mono" fontSize={1} color="white" bg="red.5" />
-      </LiveProvider>
-    </Box>
-  )
-}
-
-export default LiveCode

package/docs/src/@primer/gatsby-theme-doctocat/components/live-preview-wrapper.js

@@ -1,39 +0,0 @@
-import {BaseStyles, Box, ThemeProvider} from '@primer/components'
-import React from 'react'
-
-// This is a temporary way to allow us to preview components in dark mode.
-// We'll replace this component when @primer/components has a first-class
-// API for theme switching.
-function ThemeSwitcher({children}) {
-  const [colorMode, setColorMode] = React.useState('day')
-
-  React.useEffect(() => {
-    function handleKeyDown(event) {
-      // Use `ctrl + cmd + t` to toggle between light and dark mode
-      if (event.key === 't' && event.ctrlKey && event.metaKey) {
-        setColorMode(colorMode === 'day' ? 'night' : 'day')
-      }
-    }
-    document.addEventListener('keydown', handleKeyDown)
-
-    return function cleanup() {
-      document.removeEventListener('keydown', handleKeyDown)
-    }
-  }, [colorMode])
-
-  return <ThemeProvider colorMode={colorMode}>{children}</ThemeProvider>
-}
-
-// Users can shadow this file to wrap live previews.
-// This is useful for applying global styles.
-function LivePreviewWrapper({children}) {
-  return (
-    <ThemeSwitcher>
-      <Box width="100%" p={3} bg="bg.canvas" sx={{borderTopLeftRadius: 2, borderTopRightRadius: 2}}>
-        <BaseStyles>{children}</BaseStyles>
-      </Box>
-    </ThemeSwitcher>
-  )
-}
-
-export default LivePreviewWrapper

package/docs/src/@primer/gatsby-theme-doctocat/components/nav-dropdown.js

@@ -1,48 +0,0 @@
-import {Box, StyledOcticon, Details, useDetails, Text, themeGet} from '@primer/components'
-import {TriangleDownIcon} from '@primer/octicons-react'
-import React from 'react'
-import styled from 'styled-components'
-
-// Temporarily shadowing this component until Doctocat uses the
-// latest version of the Details or ActionMenu component
-
-function NavDropdown({title, children}) {
-  const {getDetailsProps} = useDetails({closeOnOutsideClick: true})
-  return (
-    <Details {...getDetailsProps()}>
-      <summary style={{cursor: 'pointer'}}>
-        <Text>{title}</Text>
-        <StyledOcticon icon={TriangleDownIcon} ml={1} />
-      </summary>
-      <Box position="absolute">
-        <Box
-          color="white"
-          bg="gray.8"
-          py={1}
-          mt={2}
-          boxShadow="medium"
-          borderWidth="1px"
-          borderStyle="solid"
-          borderColor="gray.7"
-          borderRadius={2}
-        >
-          {children}
-        </Box>
-      </Box>
-    </Details>
-  )
-}
-
-export const NavDropdownItem = styled.a`
-  display: block;
-  padding: ${themeGet('space.2')} ${themeGet('space.3')};
-  color: inherit;
-  text-decoration: none;
-  &:hover {
-    color: ${themeGet('colors.white')};
-    background-color: ${themeGet('colors.blue.5')};
-    text-decoration: none;
-  }
-`
-
-export default NavDropdown

package/docs/src/@primer/gatsby-theme-doctocat/components/wrap-page-element.js

@@ -1,25 +0,0 @@
-import {BaseStyles, theme, ThemeProvider} from '@primer/components'
-import SkipLink from '@primer/gatsby-theme-doctocat/src/components/skip-link'
-import primitives from '@primer/primitives'
-import deepmerge from 'deepmerge'
-import React from 'react'
-
-// Temporarily shadowing this file to wrap the page in our custom ThemeProvider.
-// We can remove this file when Doctocat uses the custom ThemeProvider.
-
-// Doctocat still uses presentional color variables.
-// We can remove this customTheme when Doctocat uses functional color variables
-const customTheme = deepmerge(theme, {colors: primitives.colors.light.scale})
-
-function wrapPageElement({element}) {
-  return (
-    <ThemeProvider theme={customTheme}>
-      <BaseStyles>
-        <SkipLink />
-        {element}
-      </BaseStyles>
-    </ThemeProvider>
-  )
-}
-
-export default wrapPageElement

package/docs/src/@primer/gatsby-theme-doctocat/live-code-scope.js

@@ -1,54 +0,0 @@
-import * as primerComponents from '@primer/components'
-import * as doctocatComponents from '@primer/gatsby-theme-doctocat'
-import {
-  CheckIcon,
-  ZapIcon,
-  XIcon,
-  SearchIcon,
-  DotIcon,
-  OctofaceIcon,
-  PersonIcon,
-  MailIcon,
-  GitCommitIcon,
-  FlameIcon,
-  MarkGithubIcon,
-  NoteIcon,
-  ProjectIcon,
-  FilterIcon,
-  GearIcon,
-  TypographyIcon,
-  VersionsIcon
-} from '@primer/octicons-react'
-import State from '../../../components/State'
-import {Dialog as Dialog2} from '../../../../src/Dialog/Dialog'
-import {AnchoredOverlay} from '../../../../src/AnchoredOverlay'
-import {ConfirmationDialog, useConfirm} from '../../../../src/Dialog/ConfirmationDialog'
-import {SelectPanel} from '../../../../src/SelectPanel/SelectPanel'
-
-export default {
-  ...doctocatComponents,
-  ...primerComponents,
-  State,
-  CheckIcon,
-  SearchIcon,
-  ZapIcon,
-  XIcon,
-  DotIcon,
-  OctofaceIcon,
-  PersonIcon,
-  MailIcon,
-  GitCommitIcon,
-  FlameIcon,
-  MarkGithubIcon,
-  NoteIcon,
-  ProjectIcon,
-  FilterIcon,
-  GearIcon,
-  TypographyIcon,
-  VersionsIcon,
-  Dialog2,
-  ConfirmationDialog,
-  useConfirm,
-  AnchoredOverlay,
-  SelectPanel
-}

package/docs/src/@primer/gatsby-theme-doctocat/nav.yml

@@ -1,132 +0,0 @@
-- title: About
-  url: /getting-started
-  children:
-    - title: Getting started
-      url: /getting-started
-
-    - title: Theming
-      url: /theming
-
-    - title: Theme reference
-      url: /theme-reference
-
-    - title: Linting
-      url: /linting
-
-    - title: System props
-      url: /system-props
-
-    - title: Core concepts
-      url: /core-concepts
-
-    - title: Philosophy
-      url: /philosophy
-
-    - title: Overriding styles
-      url: /overriding-styles
-- title: Hooks
-  children:
-    - title: useSafeTimeout
-      url: /useSafeTimeout
-    # - title: useOnOutsideClick
-    #   url: /useOnOutsideClick
-    # - title: useOpenAndCloseFocus
-    #   url: /useOpenAndCloseFocus
-    # - title: useOnEscapePress
-    #   url: /useOnEscapePress
-    # - title: useOverlay
-    #   url: /useOverlay
-- title: Components
-  children:
-    - title: Avatar
-      url: /Avatar
-    - title: AvatarStack
-      url: /AvatarStack
-    - title: Box
-      url: /Box
-    - title: BranchName
-      url: /BranchName
-    - title: Breadcrumbs
-      url: /Breadcrumbs
-    - title: Buttons
-      url: /Buttons
-    - title: CircleBadge
-      url: /CircleBadge
-    - title: CircleOcticon
-      url: /CircleOcticon
-    - title: CounterLabel
-      url: /CounterLabel
-    - title: Details & useDetails
-      url: /Details
-    - title: Dialog
-      url: /Dialog
-    - title: Dropdown
-      url: /Dropdown
-    - title: FilteredSearch
-      url: /FilteredSearch
-    - title: FilterList
-      url: /FilterList
-    - title: Flash
-      url: /Flash
-    - title: FormGroup
-      url: /FormGroup
-    - title: Header
-      url: /Header
-    - title: Heading
-      url: /Heading
-    - title: Label
-      url: /Label
-    - title: LabelGroup
-      url: /LabelGroup
-    - title: Link
-      url: /Link
-    # - title: Overlay
-    #   url: /Overlay
-    - title: Pagehead
-      url: /Pagehead
-    - title: Pagination
-      url: /Pagination
-    - title: PointerBox
-      url: /PointerBox
-    - title: Popover
-      url: /Popover
-    # - title: Portal
-    #   url: /Portal
-    - title: ProgressBar
-      url: /ProgressBar
-    - title: SelectMenu
-      url: /SelectMenu
-    - title: SideNav
-      url: /SideNav
-    - title: Spinner
-      url: /Spinner
-    - title: StateLabel
-      url: /StateLabel
-    - title: StyledOcticon
-      url: /StyledOcticon
-    - title: SubNav
-      url: /SubNav
-    - title: TabNav
-      url: /TabNav
-    - title: Text
-      url: /Text
-    - title: TextInput
-      url: /TextInput
-    - title: Timeline
-      url: /Timeline
-    - title: Tooltip
-      url: /Tooltip
-    - title: Truncate
-      url: /Truncate
-    - title: UnderlineNav
-      url: /UnderlineNav
-- title: Deprecated
-  children:
-    - title: BorderBox
-      url: /BorderBox
-    - title: Flex
-      url: /Flex
-    - title: Grid
-      url: /Grid
-    - title: Position
-      url: /Position