feat(styled-react): add deprecated tags to exports

.changeset/dull-books-fry.md

@@ -0,0 +1,5 @@
+---
+'@primer/styled-react': patch
+---
+
+Update exports from @primer/styled-react to be marked as deprecated

packages/styled-react/src/__tests__/deprecated-exports.test.ts

@@ -0,0 +1,46 @@
+import {describe, test, expect} from 'vitest'
+import ts from 'typescript'
+import path from 'node:path'
+
+const entrypoints: Array<
+  [name: string, filepath: string, exports: Array<[name: string, deprecatedTag: boolean, deprecatedComment: boolean]>]
+> = [
+  ['@primer/styled-react', path.resolve(import.meta.dirname, '../index.tsx'), []],
+  ['@primer/styled-react/deprecated', path.resolve(import.meta.dirname, '../deprecated.tsx'), []],
+  ['@primer/styled-react/experimental', path.resolve(import.meta.dirname, '../experimental.tsx'), []],
+]
+
+const program = ts.createProgram(
+  entrypoints.map(entrypoint => entrypoint[1]),
+  {
+    target: ts.ScriptTarget.Latest,
+    module: ts.ModuleKind.ESNext,
+  },
+)
+
+for (const [, filepath, exports] of entrypoints) {
+  const sourceFile = program.getSourceFile(filepath)
+
+  ts.forEachChild(sourceFile!, node => {
+    if (ts.isExportDeclaration(node) && node.exportClause && ts.isNamedExports(node.exportClause)) {
+      for (const element of node.exportClause.elements) {
+        const jsDocTags = ts.getJSDocTags(element)
+        const deprecatedTag = jsDocTags.find(tag => tag.tagName.text === 'deprecated')
+
+        exports.push([element.name.text, !!deprecatedTag, deprecatedTag ? deprecatedTag.comment !== undefined : false])
+      }
+    }
+  })
+}
+
+describe.each(entrypoints)('%s', (_name, _filepath, exports) => {
+  describe.each(exports)('%s export', (_exportName, deprecatedTag, deprecatedComment) => {
+    test('deprecated', () => {
+      expect(deprecatedTag).toBe(true)
+    })
+
+    test('has deprecation comment', () => {
+      expect(deprecatedComment).toBe(true)
+    })
+  })
+})

packages/styled-react/src/deprecated.tsx

@@ -1,10 +1,93 @@
-export {TabNav, type TabNavProps, type TabNavLinkProps} from './components/deprecated/TabNav'
-export {Dialog, type DialogProps, type DialogHeaderProps} from './components/deprecated/DialogV1'
-export {Octicon, type OcticonProps} from './components/deprecated/Octicon'
-export {Tooltip, type TooltipProps} from './components/deprecated/Tooltip'
 export {
+  /**
+   * @deprecated Usage of the `sx` prop with this component is no longer
+   * supported. Use the component from `@primer/react` with CSS Modules instead.
+   */
+  TabNav,
+
+  /**
+   * @deprecated Usage of the `sx` prop with this component is no longer
+   * supported. Use the component from `@primer/react` with CSS Modules instead.
+   */
+  type TabNavProps,
+
+  /**
+   * @deprecated Usage of the `sx` prop with this component is no longer
+   * supported. Use the component from `@primer/react` with CSS Modules instead.
+   */
+  type TabNavLinkProps,
+} from './components/deprecated/TabNav'
+
+export {
+  /**
+   * @deprecated Usage of the `sx` prop with this component is no longer
+   * supported. Use the component from `@primer/react` with CSS Modules instead.
+   */
+  Dialog,
+
+  /**
+   * @deprecated Usage of the `sx` prop with this component is no longer
+   * supported. Use the component from `@primer/react` with CSS Modules instead.
+   */
+  type DialogProps,
+
+  /**
+   * @deprecated Usage of the `sx` prop with this component is no longer
+   * supported. Use the component from `@primer/react` with CSS Modules instead.
+   */
+  type DialogHeaderProps,
+} from './components/deprecated/DialogV1'
+
+export {
+  /**
+   * @deprecated Usage of the `sx` prop with this component is no longer
+   * supported. Use the component from `@primer/react` with CSS Modules instead.
+   */
+  Octicon,
+
+  /**
+   * @deprecated Usage of the `sx` prop with this component is no longer
+   * supported. Use the component from `@primer/react` with CSS Modules instead.
+   */
+  type OcticonProps,
+} from './components/deprecated/Octicon'
+
+export {
+  /**
+   * @deprecated Usage of the `sx` prop with this component is no longer
+   * supported. Use the component from `@primer/react` with CSS Modules instead.
+   */
+  Tooltip,
+
+  /**
+   * @deprecated Usage of the `sx` prop with this component is no longer
+   * supported. Use the component from `@primer/react` with CSS Modules instead.
+   */
+  type TooltipProps,
+} from './components/deprecated/Tooltip'
+
+export {
+  /**
+   * @deprecated Usage of the `sx` prop with this component is no longer
+   * supported. Use the component from `@primer/react` with CSS Modules instead.
+   */
   ActionList,
+
+  /**
+   * @deprecated Usage of the `sx` prop with this component is no longer
+   * supported. Use the component from `@primer/react` with CSS Modules instead.
+   */
   type ActionListProps,
+
+  /**
+   * @deprecated Usage of the `sx` prop with this component is no longer
+   * supported. Use the component from `@primer/react` with CSS Modules instead.
+   */
   type ActionListItemProps,
+
+  /**
+   * @deprecated Usage of the `sx` prop with this component is no longer
+   * supported. Use the component from `@primer/react` with CSS Modules instead.
+   */
   type ActionListGroupProps,
 } from './components/deprecated/ActionList'

packages/styled-react/src/experimental.tsx

@@ -1,30 +1,147 @@
-export {Dialog, type DialogProps} from './components/Dialog'
 export {
+  /**
+   * @deprecated Usage of the `sx` prop with this component is no longer
+   * supported. Use the component from `@primer/react` with CSS Modules instead.
+   */
+  Dialog,
+
+  /**
+   * @deprecated Usage of the `sx` prop with this component is no longer
+   * supported. Use the component from `@primer/react` with CSS Modules instead.
+   */
+  type DialogProps,
+} from './components/Dialog'
+
+export {
+  /**
+   * @deprecated Usage of the `sx` prop with this component is no longer
+   * supported. Use the component from `@primer/react` with CSS Modules instead.
+   */
   PageHeader,
+
+  /**
+   * @deprecated Usage of the `sx` prop with this component is no longer
+   * supported. Use the component from `@primer/react` with CSS Modules instead.
+   */
   type PageHeaderProps,
+
+  /**
+   * @deprecated Usage of the `sx` prop with this component is no longer
+   * supported. Use the component from `@primer/react` with CSS Modules instead.
+   */
   type PageHeaderActionsProps,
+
+  /**
+   * @deprecated Usage of the `sx` prop with this component is no longer
+   * supported. Use the component from `@primer/react` with CSS Modules instead.
+   */
   type PageHeaderTitleProps,
 } from './components/PageHeader'
 
-export {Tooltip, type TooltipProps} from './components/Tooltip'
+export {
+  /**
+   * @deprecated Usage of the `sx` prop with this component is no longer
+   * supported. Use the component from `@primer/react` with CSS Modules instead.
+   */
+  Tooltip,
+
+  /**
+   * @deprecated Usage of the `sx` prop with this component is no longer
+   * supported. Use the component from `@primer/react` with CSS Modules instead.
+   */
+  type TooltipProps,
+} from './components/Tooltip'
 
 export {
+  /**
+   * @deprecated Usage of the `sx` prop with this component is no longer
+   * supported. Use the component from `@primer/react` with CSS Modules instead.
+   */
   UnderlinePanels,
+
+  /**
+   * @deprecated Usage of the `sx` prop with this component is no longer
+   * supported. Use the component from `@primer/react` with CSS Modules instead.
+   */
   type UnderlinePanelsProps,
+
+  /**
+   * @deprecated Usage of the `sx` prop with this component is no longer
+   * supported. Use the component from `@primer/react` with CSS Modules instead.
+   */
   type UnderlinePanelsTabProps,
+
+  /**
+   * @deprecated Usage of the `sx` prop with this component is no longer
+   * supported. Use the component from `@primer/react` with CSS Modules instead.
+   */
   type UnderlinePanelsPanelProps,
 } from './components/UnderlinePanels'
 
 export {
+  /**
+   * @deprecated Usage of the `sx` prop with this component is no longer
+   * supported. Use the component from `@primer/react` with CSS Modules instead.
+   */
   Table,
+
+  /**
+   * @deprecated Usage of the `sx` prop with this component is no longer
+   * supported. Use the component from `@primer/react` with CSS Modules instead.
+   */
   type DataTableContainerProps,
+
+  /**
+   * @deprecated Usage of the `sx` prop with this component is no longer
+   * supported. Use the component from `@primer/react` with CSS Modules instead.
+   */
   type TableProps,
+
+  /**
+   * @deprecated Usage of the `sx` prop with this component is no longer
+   * supported. Use the component from `@primer/react` with CSS Modules instead.
+   */
   type TableHeadProps,
+
+  /**
+   * @deprecated Usage of the `sx` prop with this component is no longer
+   * supported. Use the component from `@primer/react` with CSS Modules instead.
+   */
   type TableBodyProps,
+
+  /**
+   * @deprecated Usage of the `sx` prop with this component is no longer
+   * supported. Use the component from `@primer/react` with CSS Modules instead.
+   */
   type TableRowProps,
+
+  /**
+   * @deprecated Usage of the `sx` prop with this component is no longer
+   * supported. Use the component from `@primer/react` with CSS Modules instead.
+   */
   type TableHeaderProps,
+
+  /**
+   * @deprecated Usage of the `sx` prop with this component is no longer
+   * supported. Use the component from `@primer/react` with CSS Modules instead.
+   */
   type TableCellProps,
+
+  /**
+   * @deprecated Usage of the `sx` prop with this component is no longer
+   * supported. Use the component from `@primer/react` with CSS Modules instead.
+   */
   type TableTitleProps,
+
+  /**
+   * @deprecated Usage of the `sx` prop with this component is no longer
+   * supported. Use the component from `@primer/react` with CSS Modules instead.
+   */
   type TableSubtitleProps,
+
+  /**
+   * @deprecated Usage of the `sx` prop with this component is no longer
+   * supported. Use the component from `@primer/react` with CSS Modules instead.
+   */
   type TableActionsProps,
 } from './components/DataTable'