Removing all unused components from @primer/styled-react (#7806)

Author: jonrohan

.changeset/shiny-cheetahs-compare.md

@@ -0,0 +1,5 @@
+---
+"@primer/styled-react": patch
+---
+
+Removing `ActionList, Box, Button, Dialog, Flash, FormControl, Header, Heading, IconButton, Label, Link, LinkButton, SegmentedControl, Spinner, Text, TextInput, ToggleSwitch, UnderlineNav, DialogV1, Octicon, TabNav` from the @primer/styled-react package

e2e/styled-react/components/Button.test.ts

@@ -7,14 +7,6 @@
       "types": "./dist/index.d.ts",
       "default": "./dist/index.js"
     },
-    "./deprecated": {
-      "types": "./dist/deprecated.d.ts",
-      "default": "./dist/deprecated.js"
-    },
-    "./experimental": {
-      "types": "./dist/experimental.d.ts",
-      "default": "./dist/experimental.js"
-    },
     "./components.json": "./dist/components.json"
   },
   "files": [

packages/styled-react/package.json

@@ -16,7 +16,7 @@ function createPackageRegex(name) {
 }
 
 export default defineConfig({
-  input: ['src/index.tsx', 'src/experimental.tsx', 'src/deprecated.tsx'],
+  input: ['src/index.tsx'],
   external: dependencies.map(createPackageRegex),
   plugins: [
     typescript({

packages/styled-react/rollup.config.js

@@ -14,7 +14,7 @@ async function generateComponentsJson() {
   const types = new Set()
   const utilities = new Set()
 
-  const entrypoints = ['src/index.tsx', 'src/deprecated.tsx', 'src/experimental.tsx']
+  const entrypoints = ['src/index.tsx']
 
   for (const entrypoint of entrypoints) {
     const filename = path.join(PACKAGE_ROOT, entrypoint)

packages/styled-react/script/generate-components-json

@@ -2,7 +2,12 @@ import {render, screen, waitFor} from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import {describe, expect, it, vi} from 'vitest'
 import React from 'react'
-import {ThemeProvider, useColorSchemeVar, useTheme, Box} from '../'
+import styled from 'styled-components'
+import {color, space} from 'styled-system'
+import type {ColorProps, SpaceProps} from 'styled-system'
+import {ThemeProvider, useColorSchemeVar, useTheme} from '../'
+
+const Box = styled.div<ColorProps & SpaceProps>(color, space)
 
 // window.matchMedia() is not implemented by JSDOM so we have to create a mock:
 // https://vijs.io/docs/manual-mocks#mocking-methods-which-are-not-implemented-in-jsdom

packages/styled-react/src/__tests__/Box.browser.test.tsx

@@ -2,7 +2,7 @@
 
 exports[`has default theme 1`] = `
 <div
-  class="sc-aXZVg hPmBIl"
+  class="sc-aXZVg iOsRUA"
   color="fg.default"
 >
   Hello

packages/styled-react/src/__tests__/ThemeProvider.browser.test.tsx

@@ -2,41 +2,13 @@
 
 exports[`@primer/styled-react exports 1`] = `
 [
-  "ActionList",
   "BaseStyles",
-  "Box",
-  "Button",
-  "Dialog",
-  "Flash",
-  "Heading",
-  "IconButton",
-  "Label",
-  "Link",
   "merge",
-  "Spinner",
   "sx",
-  "Text",
-  "TextInput",
   "theme",
   "themeGet",
   "ThemeProvider",
-  "ToggleSwitch",
-  "UnderlineNav",
   "useColorSchemeVar",
   "useTheme",
 ]
 `;
-
-exports[`@primer/styled-react/deprecated exports 1`] = `
-[
-  "ActionList",
-  "Dialog",
-  "Octicon",
-]
-`;
-
-exports[`@primer/styled-react/experimental exports 1`] = `
-[
-  "Dialog",
-]
-`;

packages/styled-react/src/__tests__/__snapshots__/ThemeProvider.browser.test.tsx.snap

@@ -4,11 +4,7 @@ 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'), []],
-]
+> = [['@primer/styled-react', path.resolve(import.meta.dirname, '../index.tsx'), []]]
 
 const program = ts.createProgram(
   entrypoints.map(entrypoint => entrypoint[1]),