Upgrade primer/components -> primer/react (github#25591)

mikesurowiec · web-flow · commit f3fc80cf058c · 2022-02-24T00:30:14.000Z
* upgrade primer/components -&gt; primer/react

* fix jest failure
diff --git a/components/Search.tsx b/components/Search.tsx
@@ -2,8 +2,8 @@ import React, { useState, useEffect, useRef, ReactNode, RefObject } from 'react'
 import { useRouter } from 'next/router'
 import useSWR from 'swr'
 import cx from 'classnames'
-import { ActionList, DropdownMenu, Flash, Label, Overlay } from '@primer/components'
-import { ItemInput } from '@primer/components/lib/ActionList/List'
+import { ActionList, DropdownMenu, Flash, Label, Overlay } from '@primer/react'
+import { ItemInput } from '@primer/react/lib/ActionList/List'
 
 import { useTranslation } from 'components/hooks/useTranslation'
 import { sendEvent, EventType } from 'components/lib/events'
diff --git a/components/article/ArticleGridLayout.tsx b/components/article/ArticleGridLayout.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import styled from 'styled-components'
-import { Box, themeGet } from '@primer/components'
+import { Box, themeGet } from '@primer/react'
 
 type Props = {
   intro?: React.ReactNode
diff --git a/components/article/ArticlePage.tsx b/components/article/ArticlePage.tsx
@@ -2,7 +2,7 @@ import { useState, useEffect } from 'react'
 import { useRouter } from 'next/router'
 import dynamic from 'next/dynamic'
 import cx from 'classnames'
-import { ActionList, Heading } from '@primer/components'
+import { ActionList, Heading } from '@primer/react'
 
 import { ZapIcon, InfoIcon, ShieldLockIcon } from '@primer/octicons-react'
 import { Callout } from 'components/ui/Callout'
diff --git a/components/article/PlatformPicker.tsx b/components/article/PlatformPicker.tsx
@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react'
 import Cookies from 'js-cookie'
-import { SubNav, TabNav, UnderlineNav } from '@primer/components'
+import { SubNav, TabNav, UnderlineNav } from '@primer/react'
 import { sendEvent, EventType } from 'components/lib/events'
 import { useRouter } from 'next/router'
 
diff --git a/components/article/ToolPicker.tsx b/components/article/ToolPicker.tsx
@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react'
 import Cookies from 'js-cookie'
-import { UnderlineNav } from '@primer/components'
+import { UnderlineNav } from '@primer/react'
 import { sendEvent, EventType } from 'components/lib/events'
 import { preserveAnchorNodePosition } from 'scroll-anchoring'
 
diff --git a/components/guides/ArticleCard.tsx b/components/guides/ArticleCard.tsx
@@ -1,5 +1,5 @@
 import { ArticleGuide } from 'components/context/ProductGuidesContext'
-import { Label } from '@primer/components'
+import { Label } from '@primer/react'
 
 type Props = {
   card: ArticleGuide
diff --git a/components/guides/ArticleCards.tsx b/components/guides/ArticleCards.tsx
@@ -3,8 +3,8 @@ import React, { useEffect, useRef, useState } from 'react'
 import { ArticleGuide, useProductGuidesContext } from 'components/context/ProductGuidesContext'
 import { useTranslation } from 'components/hooks/useTranslation'
 import { ArticleCard } from './ArticleCard'
-import { DropdownMenu } from '@primer/components'
-import { ItemInput } from '@primer/components/lib/ActionList/List'
+import { DropdownMenu } from '@primer/react'
+import { ItemInput } from '@primer/react/lib/ActionList/List'
 
 const PAGE_SIZE = 9
 export const ArticleCards = () => {
diff --git a/components/guides/LearningTrack.tsx b/components/guides/LearningTrack.tsx
@@ -1,7 +1,7 @@
 import cx from 'classnames'
 import { useTranslation } from 'components/hooks/useTranslation'
 import { ArrowRightIcon } from '@primer/octicons-react'
-import { ActionList } from '@primer/components'
+import { ActionList } from '@primer/react'
 import { useState } from 'react'
 import { FeaturedTrack } from 'components/context/ProductGuidesContext'
 import { TruncateLines } from 'components/ui/TruncateLines'
diff --git a/components/hooks/useBreakpoint.ts b/components/hooks/useBreakpoint.ts
@@ -1,4 +1,4 @@
-import { useTheme } from '@primer/components'
+import { useTheme } from '@primer/react'
 
 import { useMediaQuery } from './useMediaQuery'
 
diff --git a/components/landing/ArticleList.tsx b/components/landing/ArticleList.tsx
@@ -1,6 +1,6 @@
 import cx from 'classnames'
 import dayjs from 'dayjs'
-import { ActionList } from '@primer/components'
+import { ActionList } from '@primer/react'
 import { useTranslation } from 'components/hooks/useTranslation'
 import { Link } from 'components/Link'
 import { ArrowRightIcon } from '@primer/octicons-react'
diff --git a/components/landing/CodeExampleCard.tsx b/components/landing/CodeExampleCard.tsx
@@ -1,7 +1,7 @@
 import { RepoIcon } from '@primer/octicons-react'
 import { CodeExample } from 'components/context/ProductLandingContext'
 import { TruncateLines } from 'components/ui/TruncateLines'
-import { Label } from '@primer/components'
+import { Label } from '@primer/react'
 
 type Props = {
   example: CodeExample
diff --git a/components/landing/CodeExamples.tsx b/components/landing/CodeExamples.tsx
@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react'
 import { ArrowRightIcon, SearchIcon } from '@primer/octicons-react'
-import { Text } from '@primer/components'
+import { Text } from '@primer/react'
 
 import { useProductLandingContext } from 'components/context/ProductLandingContext'
 import { useTranslation } from 'components/hooks/useTranslation'
diff --git a/components/landing/ProductArticlesList.tsx b/components/landing/ProductArticlesList.tsx
@@ -2,7 +2,7 @@ import cx from 'classnames'
 import { useState } from 'react'
 
 import { ChevronDownIcon } from '@primer/octicons-react'
-import { ActionList } from '@primer/components'
+import { ActionList } from '@primer/react'
 
 import { ProductTreeNode, useMainContext } from 'components/context/MainContext'
 import { Link } from 'components/Link'
diff --git a/components/landing/TableOfContents.tsx b/components/landing/TableOfContents.tsx
@@ -1,7 +1,7 @@
 import { useRouter } from 'next/router'
 import cx from 'classnames'
 
-import { ActionList } from '@primer/components'
+import { ActionList } from '@primer/react'
 import { Link } from 'components/Link'
 import { BumpLink } from 'components/ui/BumpLink'
 import type { TocItem } from 'components/context/ProductLandingContext'
diff --git a/components/page-header/DeprecationBanner.tsx b/components/page-header/DeprecationBanner.tsx
@@ -1,6 +1,6 @@
 import { useMainContext } from 'components/context/MainContext'
 import { useVersion } from 'components/hooks/useVersion'
-import { Flash } from '@primer/components'
+import { Flash } from '@primer/react'
 
 export const DeprecationBanner = () => {
   const { data, enterpriseServerReleases } = useMainContext()
diff --git a/components/page-header/RestBanner.tsx b/components/page-header/RestBanner.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import { Flash } from '@primer/components'
+import { Flash } from '@primer/react'
 import { useRouter } from 'next/router'
 import { Link } from 'components/Link'
 
diff --git a/components/playground/ArticleMarkdown.tsx b/components/playground/ArticleMarkdown.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import cx from 'classnames'
-import { useTheme } from '@primer/components'
+import { useTheme } from '@primer/react'
 import ReactMarkdown from 'react-markdown'
 import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'
 import { vs, vscDarkPlus } from 'react-syntax-highlighter/dist/cjs/styles/prism'
diff --git a/components/playground/CodeLanguagePicker.tsx b/components/playground/CodeLanguagePicker.tsx
@@ -1,4 +1,4 @@
-import { SelectMenu, Button, Dropdown } from '@primer/components'
+import { SelectMenu, Button, Dropdown } from '@primer/react'
 import { Link } from 'components/Link'
 import { useRouter } from 'next/router'
 import { usePlaygroundContext } from 'components/context/PlaygroundContext'
diff --git a/components/playground/editor/ActionBar.tsx b/components/playground/editor/ActionBar.tsx
@@ -1,5 +1,5 @@
 import { CopyIcon, CheckIcon } from '@primer/octicons-react'
-import { Tooltip } from '@primer/components'
+import { Tooltip } from '@primer/react'
 
 import useClipboard from 'components/hooks/useClipboard'
 
diff --git a/components/playground/editor/Editor.tsx b/components/playground/editor/Editor.tsx
@@ -8,7 +8,7 @@ import { LoadingIndicator } from './LoadingIndicator'
 import { ActionBar } from './ActionBar'
 
 import { CodeBlockRef, PlaygroundArticleT } from '../types'
-import { useTheme } from '@primer/components'
+import { useTheme } from '@primer/react'
 
 const getNormalizedHighlight = (
   highlight: Exclude<CodeBlockRef['highlight'], undefined>
diff --git a/components/playground/editor/LoadingIndicator.tsx b/components/playground/editor/LoadingIndicator.tsx
@@ -1,4 +1,4 @@
-import { Box, Text } from '@primer/components'
+import { Box, Text } from '@primer/react'
 
 export function LoadingIndicator() {
   return (
diff --git a/components/sidebar/SidebarHomepage.tsx b/components/sidebar/SidebarHomepage.tsx
@@ -1,6 +1,6 @@
 import { useRouter } from 'next/router'
 import { LinkExternalIcon } from '@primer/octicons-react'
-import { ActionList } from '@primer/components'
+import { ActionList } from '@primer/react'
 
 import { useVersion } from 'components/hooks/useVersion'
 import { useMainContext } from 'components/context/MainContext'
diff --git a/components/sidebar/SidebarProduct.tsx b/components/sidebar/SidebarProduct.tsx
@@ -2,7 +2,7 @@ import { useRouter } from 'next/router'
 import cx from 'classnames'
 import { useState, useEffect, SyntheticEvent } from 'react'
 import { ChevronDownIcon } from '@primer/octicons-react'
-import { ActionList } from '@primer/components'
+import { ActionList } from '@primer/react'
 
 import { Link } from 'components/Link'
 import { ProductTreeNode, useMainContext } from 'components/context/MainContext'
diff --git a/components/ui/Picker/Picker.tsx b/components/ui/Picker/Picker.tsx
@@ -1,7 +1,7 @@
 import { ReactNode } from 'react'
 import cx from 'classnames'
 
-import { Details, useDetails, Text, Dropdown, Box } from '@primer/components'
+import { Details, useDetails, Text, Dropdown, Box } from '@primer/react'
 import { ChevronDownIcon } from '@primer/octicons-react'
 
 export type PickerOptionsTypeT = {
diff --git a/jest.config.js b/jest.config.js
@@ -23,6 +23,10 @@ module.exports = {
     },
   },
   preset: isBrowser ? 'jest-puppeteer' : undefined,
+  moduleNameMapper: {
+    // fix for "Unexpected token 'export'" error when running jest
+    '@primer/behaviors': '<rootDir>/node_modules/@primer/behaviors/dist/cjs/index.js',
+  },
   reporters,
   modulePathIgnorePatterns: ['assets/'],
   setupFilesAfterEnv: ['@alex_neo/jest-expect-message'],
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
diff --git a/pages/_app.tsx b/pages/_app.tsx

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-import { useTheme } from '@primer/components'`
	`1`	`+import { useTheme } from '@primer/react'`
`2`	`2`
`3`	`3`	`import { useMediaQuery } from './useMediaQuery'`
`4`	`4`