@primer/components 29.1.0 → 29.1.1-rc.cea79543

package/docs/package.json

@@ -0,0 +1,35 @@
+{
+  "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

@@ -0,0 +1,21 @@
+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

@@ -0,0 +1,84 @@
+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.default',
+            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

@@ -0,0 +1,39 @@
+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="canvas.default" sx={{borderTopLeftRadius: 2, borderTopRightRadius: 2}}>
+        <BaseStyles>{children}</BaseStyles>
+      </Box>
+    </ThemeSwitcher>
+  )
+}
+
+export default LivePreviewWrapper

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

@@ -0,0 +1,48 @@
+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

@@ -0,0 +1,25 @@
+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

@@ -0,0 +1,54 @@
+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

@@ -0,0 +1,127 @@
+- 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: Server-side rendering
+      url: /ssr
+- 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