Move deprecated components to deprecated folder (#1881)

* prepare integration branch

* Move deprecated components to deprecated folder

* Add subpath exports for deprecated

* Fix up the docs

* Remove dialog and formgroup components

* Fix up all the tests

* Create smooth-cameras-prove.md

Co-authored-by: Reza Rahman <rezrah@github.com>

.changeset/smooth-cameras-prove.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": major
+---
+
+Move deprecated components to deprecated folder

deprecated/package.json

@@ -0,0 +1,9 @@
+{
+    "_comment1": "this is required only for typescript. once this is fixed https://github.com/microsoft/TypeScript/issues/33079 we can remove this hack",
+    "name": "@primer/react/deprecated",
+    "types": "../lib-esm/deprecated/index.d.ts",
+    "main": "../lib-esm/deprecated/index.js",
+    "type": "module",
+    "sideEffects": false
+  }
+

docs/package.json

@@ -13,7 +13,7 @@
     "npm": ">=7"
   },
   "dependencies": {
-    "@primer/gatsby-theme-doctocat": "^3.2.0",
+    "@primer/gatsby-theme-doctocat": "^3.2.1",
     "@primer/octicons-react": "^16.1.0",
     "@primer/primitives": "4.1.0",
     "@styled-system/prop-types": "^5.1.0",

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

@@ -33,6 +33,7 @@ import {
 } from '@primer/octicons-react'
 import * as primerComponents from '@primer/react'
 import * as drafts from '@primer/react/drafts'
+import * as deprecated from '@primer/react/deprecated'
 import {Placeholder} from '@primer/react/Placeholder'
 import React from 'react'
 import {AnchoredOverlay} from '../../../../src/AnchoredOverlay'
@@ -51,6 +52,7 @@ export default function resolveScope(metastring) {
     ...doctocatComponents,
     ...primerComponents,
     ...(metastring.includes('drafts') ? drafts : {}),
+    ...deprecated,
     ReactRouterLink,
     State,
     CheckIcon,

package.json

@@ -7,12 +7,19 @@
   "exports": {
     ".": {
       "node": "./lib/index.js",
+      "require": "./lib/index.js",
       "default": "./lib-esm/index.js"
     },
     "./drafts": {
       "node": "./lib/drafts/index.js",
+      "require": "./lib/drafts/index.js",
       "default": "./lib-esm/drafts/index.js"
     },
+    "./deprecated": {
+      "node": "./lib/deprecated/index.js",
+      "require": "./lib/deprecated/index.js",
+      "default": "./lib-esm/deprecated/index.js"
+    },
     "./lib-esm/*": {
       "node": [
         "./lib/*.js",

src/__tests__/BorderBox.test.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import theme from '../theme'
-import {BorderBox} from '..'
+import {BorderBox} from '../deprecated'
 import {render, behavesAsComponent, checkExports} from '../utils/testing'
 import {render as HTMLRender, cleanup} from '@testing-library/react'
 import {axe, toHaveNoViolations} from 'jest-axe'

src/__tests__/Dropdown.test.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import {Dropdown} from '..'
+import {Dropdown} from '../deprecated'
 import {behavesAsComponent, checkExports} from '../utils/testing'
 import {render as HTMLRender, cleanup} from '@testing-library/react'
 import {axe, toHaveNoViolations} from 'jest-axe'

src/__tests__/Flex.test.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import {Flex} from '..'
+import {Flex} from '../deprecated'
 import {render, behavesAsComponent, checkExports} from '../utils/testing'
 import {render as HTMLRender, cleanup} from '@testing-library/react'
 import {axe, toHaveNoViolations} from 'jest-axe'

src/__tests__/Grid.test.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import {Grid} from '..'
+import {Grid} from '../deprecated'
 import {render, behavesAsComponent, checkExports} from '../utils/testing'
 import {render as HTMLRender, cleanup} from '@testing-library/react'
 import {axe, toHaveNoViolations} from 'jest-axe'

src/__tests__/Position.test.tsx

@@ -1,5 +1,6 @@
 import React from 'react'
-import {Box, Position, Absolute, Fixed, Relative, Sticky} from '..'
+import {Box} from '..'
+import {Position, Absolute, Fixed, Relative, Sticky} from '../deprecated'
 import {render, behavesAsComponent, checkExports} from '../utils/testing'
 import {render as HTMLRender, cleanup} from '@testing-library/react'
 import {axe, toHaveNoViolations} from 'jest-axe'

src/__tests__/SelectMenu.test.tsx

@@ -1,5 +1,6 @@
 import React from 'react'
-import {SelectMenu, Button} from '..'
+import {SelectMenu} from '../deprecated'
+import {Button} from '..'
 import {mount, render, renderRoot, COMPONENT_DISPLAY_NAME_REGEX, checkExports} from '../utils/testing'
 import {render as HTMLRender, cleanup} from '@testing-library/react'
 import {axe, toHaveNoViolations} from 'jest-axe'

src/deprecated/index.ts

@@ -0,0 +1,39 @@
+/** This is the place where we keep components that are deprecated.
+ *  We don't recommend using it in production.
+ *  If you already use them, please move to the suggested alternative components
+ *
+ *  But, they are published on npm and you can import them.
+ *  example: import {FormGroup} from '@primer/react/deprecated
+ */
+
+export {default as BorderBox} from '../BorderBox'
+export type {BorderBoxProps} from '../BorderBox'
+export {default as Flex} from '../Flex'
+export type {FlexProps} from '../Flex'
+export {default as Grid} from '../Grid'
+export type {GridProps} from '../Grid'
+export {default as Position, Absolute, Fixed, Relative, Sticky} from '../Position'
+export type {PositionProps, AbsoluteProps, FixedProps, RelativeProps, StickyProps} from '../Position'
+export {default as Dropdown} from '../Dropdown'
+export type {
+  DropdownProps,
+  DropdownCaretProps,
+  DropdownButtonProps,
+  DropdownItemProps,
+  DropdownMenuProps
+} from '../Dropdown'
+export {default as SelectMenu} from '../SelectMenu'
+export type {
+  SelectMenuProps,
+  SelectMenuDividerProps,
+  SelectMenuFilterProps,
+  SelectMenuFooterProps,
+  SelectMenuItemProps,
+  SelectMenuListProps,
+  SelectMenuModalProps,
+  SelectMenuTabsProps,
+  SelectMenuHeaderProps,
+  SelectMenuTabProps,
+  SelectMenuTabPanelProps,
+  SelectMenuLoadingAnimationProps
+} from '../SelectMenu'

src/index.ts

@@ -6,16 +6,8 @@ export {default as ThemeProvider, useTheme, useColorSchemeVar} from './ThemeProv
 export type {ThemeProviderProps} from './ThemeProvider'
 
 // Layout
-export {default as BorderBox} from './BorderBox'
-export type {BorderBoxProps} from './BorderBox'
 export {default as Box} from './Box'
 export type {BoxProps} from './Box'
-export {default as Flex} from './Flex'
-export type {FlexProps} from './Flex'
-export {default as Grid} from './Grid'
-export type {GridProps} from './Grid'
-export {default as Position, Absolute, Fixed, Relative, Sticky} from './Position'
-export type {PositionProps, AbsoluteProps, FixedProps, RelativeProps, StickyProps} from './Position'
 
 // Hooks
 export {default as useDetails} from './hooks/useDetails'
@@ -79,14 +71,7 @@ export type {DetailsProps} from './Details'
 export {default as Dialog} from './Dialog'
 export type {DialogProps, DialogHeaderProps} from './Dialog'
 export {ConfirmationDialog} from './Dialog/ConfirmationDialog'
-export {default as Dropdown} from './Dropdown'
-export type {
-  DropdownProps,
-  DropdownCaretProps,
-  DropdownButtonProps,
-  DropdownItemProps,
-  DropdownMenuProps
-} from './Dropdown'
+
 export {DropdownButton, DropdownMenu} from './DropdownMenu'
 // not exporting new DropdownMenu types yet due to conflict with Dropdown types above
 // export type {DropdownButtonProps, DropdownMenuProps} from './DropdownMenu'
@@ -124,22 +109,7 @@ export type {PopoverProps, PopoverContentProps} from './Popover'
 // export type {PortalProps} from './Portal'
 export {default as ProgressBar} from './ProgressBar'
 export type {ProgressBarProps} from './ProgressBar'
-export {default as SelectMenu} from './SelectMenu'
 export {default as Select} from './Select'
-export type {
-  SelectMenuProps,
-  SelectMenuDividerProps,
-  SelectMenuFilterProps,
-  SelectMenuFooterProps,
-  SelectMenuItemProps,
-  SelectMenuListProps,
-  SelectMenuModalProps,
-  SelectMenuTabsProps,
-  SelectMenuHeaderProps,
-  SelectMenuTabProps,
-  SelectMenuTabPanelProps,
-  SelectMenuLoadingAnimationProps
-} from './SelectMenu'
 export {SelectPanel} from './SelectPanel'
 export type {SelectPanelProps} from './SelectPanel'
 export {default as SideNav} from './SideNav'