feat(react): remove deprecated components from main entrypoint (#4992)

* refactor(deprecated): update deprecated component status, stories, and tests * chore: fix ci failures * chore: add changeset * Updates from editor * chore: fix packageManager field --------- Co-authored-by: Josh Black <joshblack@users.noreply.github.com>
primer · Sep 30, 2024 · d1d911a · d1d911a
1 parent 0b83fe9
commit d1d911a
Show file tree

Hide file tree

Showing 41 changed files with 190 additions and 173 deletions.
diff --git a/.changeset/dull-mirrors-dream.md b/.changeset/dull-mirrors-dream.md
@@ -0,0 +1,5 @@
+---
+'@primer/react': major
+---
+
+Move Octicon, Pagehead, Dialog (v1), and Tooltip (v1) to `@primer/react/deprecated`
diff --git a/e2e/components/Octicon.test.ts b/e2e/components/Octicon.test.ts
@@ -2,60 +2,45 @@ import {test, expect} from '@playwright/test'
 import {visit} from '../test-helpers/storybook'
 import {themes} from '../test-helpers/themes'
 
-test.describe('Octicon', () => {
-  test.describe('Default', () => {
-    for (const theme of themes) {
-      test.describe(theme, () => {
-        test('default @vrt', async ({page}) => {
-          await visit(page, {
-            id: 'components-octicon--default',
-            globals: {
-              colorScheme: theme,
-            },
-          })
+const stories = [
+  {
+    title: 'Default',
+    id: 'deprecated-components-octicon--default',
+  },
+  {
+    title: 'Playground',
+    id: 'deprecated-components-octicon--playground',
+  },
+] as const
 
-          // Default state
-          expect(await page.screenshot()).toMatchSnapshot(`Octicon.Default.${theme}.png`)
-        })
-
-        test('axe @aat', async ({page}) => {
-          await visit(page, {
-            id: 'components-octicon--default',
-            globals: {
-              colorScheme: theme,
-            },
-          })
-          await expect(page).toHaveNoViolations()
-        })
-      })
-    }
-  })
+test.describe('Octicon', () => {
+  for (const story of stories) {
+    test.describe(story.title, () => {
+      for (const theme of themes) {
+        test.describe(theme, () => {
+          test('default @vrt', async ({page}) => {
+            await visit(page, {
+              id: story.id,
+              globals: {
+                colorScheme: theme,
+              },
+            })
 
-  test.describe('Playground', () => {
-    for (const theme of themes) {
-      test.describe(theme, () => {
-        test('default @vrt', async ({page}) => {
-          await visit(page, {
-            id: 'components-octicon--playground',
-            globals: {
-              colorScheme: theme,
-            },
+            // Default state
+            expect(await page.screenshot()).toMatchSnapshot(`Octicon.${story.title}.${theme}.png`)
           })
 
-          // Default state
-          expect(await page.screenshot()).toMatchSnapshot(`Octicon.Playground.${theme}.png`)
-        })
-
-        test('axe @aat', async ({page}) => {
-          await visit(page, {
-            id: 'components-octicon--playground',
-            globals: {
-              colorScheme: theme,
-            },
+          test('axe @aat', async ({page}) => {
+            await visit(page, {
+              id: story.id,
+              globals: {
+                colorScheme: theme,
+              },
+            })
+            await expect(page).toHaveNoViolations()
           })
-          await expect(page).toHaveNoViolations()
         })
-      })
-    }
-  })
+      }
+    })
+  }
 })
diff --git a/e2e/components/Pagehead.test.ts b/e2e/components/Pagehead.test.ts
@@ -2,32 +2,41 @@ import {test, expect} from '@playwright/test'
 import {visit} from '../test-helpers/storybook'
 import {themes} from '../test-helpers/themes'
 
+const stories = [
+  {
+    title: 'Default',
+    id: 'deprecated-components-pagehead--default',
+  },
+] as const
+
 test.describe('Pagehead', () => {
-  test.describe('Default', () => {
-    for (const theme of themes) {
-      test.describe(theme, () => {
-        test('default @vrt', async ({page}) => {
-          await visit(page, {
-            id: 'components-pagehead--default',
-            globals: {
-              colorScheme: theme,
-            },
-          })
+  for (const story of stories) {
+    test.describe(story.id, () => {
+      for (const theme of themes) {
+        test.describe(theme, () => {
+          test('default @vrt', async ({page}) => {
+            await visit(page, {
+              id: story.id,
+              globals: {
+                colorScheme: theme,
+              },
+            })
 
-          // Default state
-          expect(await page.screenshot()).toMatchSnapshot(`Pagehead.Default.${theme}.png`)
-        })
+            // Default state
+            expect(await page.screenshot()).toMatchSnapshot(`Pagehead.${story.title}.${theme}.png`)
+          })
 
-        test('axe @aat', async ({page}) => {
-          await visit(page, {
-            id: 'components-pagehead--default',
-            globals: {
-              colorScheme: theme,
-            },
+          test('axe @aat', async ({page}) => {
+            await visit(page, {
+              id: story.id,
+              globals: {
+                colorScheme: theme,
+              },
+            })
+            await expect(page).toHaveNoViolations()
           })
-          await expect(page).toHaveNoViolations()
         })
-      })
-    }
-  })
+      }
+    })
+  }
 })
diff --git a/e2e/components/TabNav.test.ts b/e2e/components/TabNav.test.ts
@@ -2,38 +2,41 @@ import {test, expect} from '@playwright/test'
 import {visit} from '../test-helpers/storybook'
 import {themes} from '../test-helpers/themes'
 
-test.describe('TabNav', () => {
-  test.describe('Default', () => {
-    for (const theme of themes) {
-      test.describe(theme, () => {
-        test('default @vrt', async ({page}) => {
-          await visit(page, {
-            id: 'components-tabnav--default',
-            globals: {
-              colorScheme: theme,
-            },
-          })
+const stories = [
+  {
+    title: 'Default',
+    id: 'deprecated-components-tabnav--default',
+  },
+] as const
 
-          // Default state
-          expect(await page.screenshot()).toMatchSnapshot(`TabNav.Default.${theme}.png`)
-        })
+test.describe('TabNav', () => {
+  for (const story of stories) {
+    test.describe(story.title, () => {
+      for (const theme of themes) {
+        test.describe(theme, () => {
+          test('default @vrt', async ({page}) => {
+            await visit(page, {
+              id: story.id,
+              globals: {
+                colorScheme: theme,
+              },
+            })
 
-        test('axe @aat', async ({page}) => {
-          await visit(page, {
-            id: 'components-tabnav--default',
-            globals: {
-              colorScheme: theme,
-            },
+            // Default state
+            expect(await page.screenshot()).toMatchSnapshot(`TabNav.${story.title}.${theme}.png`)
           })
-          await expect(page).toHaveNoViolations({
-            rules: {
-              'color-contrast': {
-                enabled: theme !== 'dark_dimmed',
+
+          test('axe @aat', async ({page}) => {
+            await visit(page, {
+              id: story.id,
+              globals: {
+                colorScheme: theme,
               },
-            },
+            })
+            await expect(page).toHaveNoViolations()
           })
         })
-      })
-    }
-  })
+      }
+    })
+  }
 })
diff --git a/e2e/components/Tooltip.test.ts b/e2e/components/Tooltip.test.ts
@@ -8,7 +8,7 @@ test.describe('Tooltip', () => {
       test.describe(theme, () => {
         test('default @vrt', async ({page}) => {
           await visit(page, {
-            id: 'components-tooltip--default',
+            id: 'deprecated-components-tooltip--default',
             globals: {
               colorScheme: theme,
             },
@@ -21,7 +21,7 @@ test.describe('Tooltip', () => {
 
         test('axe @aat', async ({page}) => {
           await visit(page, {
-            id: 'components-tooltip--default',
+            id: 'deprecated-components-tooltip--default',
             globals: {
               colorScheme: theme,
             },

diff --git a/packages/react/src/ActionBar/ActionBar.stories.tsx b/packages/react/src/ActionBar/ActionBar.stories.tsx
@@ -18,7 +18,8 @@ import {
   ReplyIcon,
   ThreeBarsIcon,
 } from '@primer/octicons-react'
-import {Box, Dialog, Button, Avatar, ActionMenu, IconButton, ActionList, Textarea} from '../'
+import {Box, Button, Avatar, ActionMenu, IconButton, ActionList, Textarea} from '../'
+import {Dialog} from '../DialogV1'
 import {Divider} from '../deprecated/ActionList/Divider'
 import mockData from '../experimental/SelectPanel2/mock-story-data'
 

diff --git a/packages/react/src/Autocomplete/Autocomplete.features.stories.tsx b/packages/react/src/Autocomplete/Autocomplete.features.stories.tsx
@@ -2,7 +2,8 @@ import type {ChangeEventHandler, RefObject} from 'react'
 import React, {useCallback, useEffect, useRef, useState} from 'react'
 import type {Meta} from '@storybook/react'
 
-import {BaseStyles, Box, Dialog, ThemeProvider, registerPortalRoot} from '..'
+import {BaseStyles, Box, ThemeProvider, registerPortalRoot} from '..'
+import {Dialog} from '../DialogV1'
 import TextInputTokens from '../TextInputWithTokens'
 import Autocomplete from './Autocomplete'
 import {AnchoredOverlay} from '../AnchoredOverlay'

diff --git a/packages/react/src/Dialog.docs.json → packages/react/src/DialogV1/Dialog.docs.json b/packages/react/src/Dialog.docs.json → packages/react/src/DialogV1/Dialog.docs.json
@@ -2,10 +2,10 @@
   "id": "dialog",
   "docsId": "dialog",
   "name": "Dialog",
-  "status": "alpha",
+  "status": "deprecated",
   "a11yReviewed": false,
   "stories": [],
-  "importPath": "@primer/react",
+  "importPath": "@primer/react/deprecated",
   "props": [
     {
       "name": "isOpen",

diff --git a/packages/react/src/Dialog.stories.tsx → ...ges/react/src/DialogV1/Dialog.stories.tsx b/packages/react/src/Dialog.stories.tsx → ...ges/react/src/DialogV1/Dialog.stories.tsx
@@ -1,8 +1,8 @@
 import React, {useState, useRef} from 'react'
 import type {Meta} from '@storybook/react'
-import {Button} from './Button'
-import {Box, Link, Text} from '.'
-import {Banner} from './Banner'
+import {Button} from '../Button'
+import {Box, Link, Text} from '..'
+import {Banner} from '../Banner'
 import {default as Dialog} from './Dialog'
 
 /* Dialog Version 1*/

diff --git a/packages/react/src/__tests__/Dialog.test.tsx → packages/react/src/DialogV1/Dialog.test.tsx b/packages/react/src/__tests__/Dialog.test.tsx → packages/react/src/DialogV1/Dialog.test.tsx
@@ -1,8 +1,9 @@
 import React, {useState, useRef} from 'react'
-import {Dialog, Box, Text, Button} from '..'
+import {Box, Text, Button} from '..'
+import {Dialog} from '../DialogV1'
 import {render as HTMLRender, fireEvent} from '@testing-library/react'
 import axe from 'axe-core'
-import {behavesAsComponent, checkExports} from '../utils/testing'
+import {behavesAsComponent} from '../utils/testing'
 
 /* Dialog Version 1*/
 
@@ -108,10 +109,6 @@ describe('Dialog', () => {
     options: {skipAs: true, skipSx: true},
   })
 
-  checkExports('Dialog', {
-    default: Dialog,
-  })
-
   describe('Dialog.Header', () => {
     behavesAsComponent({Component: Dialog.Header})
   })

diff --git a/packages/react/src/Dialog.tsx → packages/react/src/DialogV1/Dialog.tsx b/packages/react/src/Dialog.tsx → packages/react/src/DialogV1/Dialog.tsx
@@ -1,14 +1,14 @@
 import React, {forwardRef, useRef} from 'react'
 import styled from 'styled-components'
-import {IconButton} from './Button'
-import {get} from './constants'
-import Box from './Box'
-import useDialog from './hooks/useDialog'
-import type {SxProp} from './sx'
-import sx from './sx'
-import Text from './Text'
-import type {ComponentProps} from './utils/types'
-import {useRefObjectAsForwardedRef} from './hooks/useRefObjectAsForwardedRef'
+import {IconButton} from '../Button'
+import {get} from '../constants'
+import Box from '../Box'
+import useDialog from '../hooks/useDialog'
+import type {SxProp} from '../sx'
+import sx from '../sx'
+import Text from '../Text'
+import type {ComponentProps} from '../utils/types'
+import {useRefObjectAsForwardedRef} from '../hooks/useRefObjectAsForwardedRef'
 import {XIcon} from '@primer/octicons-react'
 
 // Dialog v1

diff --git a/...react/src/__tests__/Dialog.types.test.tsx → .../react/src/DialogV1/Dialog.types.test.tsx b/...react/src/__tests__/Dialog.types.test.tsx → .../react/src/DialogV1/Dialog.types.test.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import Dialog from '../Dialog'
+import {Dialog} from '../DialogV1'
 
 export function shouldAcceptCallWithNoProps() {
   return <Dialog />

diff --git a/packages/react/src/DialogV1/index.ts b/packages/react/src/DialogV1/index.ts
@@ -0,0 +1,2 @@
+export {default as Dialog} from './Dialog'
+export type {DialogProps, DialogHeaderProps} from './Dialog'
diff --git a/packages/react/src/Octicon/Octicon.docs.json b/packages/react/src/Octicon/Octicon.docs.json
@@ -1,10 +1,10 @@
 {
   "id": "octicon",
   "name": "Octicon",
-  "status": "alpha",
+  "status": "deprecated",
   "a11yReviewed": false,
   "stories": [],
-  "importPath": "@primer/react",
+  "importPath": "@primer/react/deprecated",
   "props": [
     {
       "name": "aria-label",

diff --git a/packages/react/src/Octicon/Octicon.stories.tsx b/packages/react/src/Octicon/Octicon.stories.tsx
@@ -4,7 +4,7 @@ import Octicon from './Octicon'
 import {HeartFillIcon} from '@primer/octicons-react'
 
 const meta: Meta<typeof Octicon> = {
-  title: 'Components/Octicon',
+  title: 'Deprecated/Components/Octicon',
   component: Octicon,
 }
 export default meta

diff --git a/...ages/react/src/__tests__/Octicon.test.tsx → packages/react/src/Octicon/Octicon.test.tsx b/...ages/react/src/__tests__/Octicon.test.tsx → packages/react/src/Octicon/Octicon.test.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import {XIcon} from '@primer/octicons-react'
-import {Octicon} from '..'
+import Octicon from '../Octicon'
 import {behavesAsComponent, checkExports} from '../utils/testing'
 import {render as HTMLRender} from '@testing-library/react'
 import axe from 'axe-core'