diff --git a/.changeset/shiny-cheetahs-compare.md b/.changeset/shiny-cheetahs-compare.md new file mode 100644 index 00000000000..c38f37df279 --- /dev/null +++ b/.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 diff --git a/e2e/styled-react/components/Button.test.ts b/e2e/styled-react/components/Button.test.ts deleted file mode 100644 index 31ec58dd0f6..00000000000 --- a/e2e/styled-react/components/Button.test.ts +++ /dev/null @@ -1,21 +0,0 @@ -import path from 'node:path' -import {test, expect} from '@playwright/test' -import {getStories, visit} from '../../test-helpers/storybook' - -const stories = getStories(path.resolve(__dirname, '../../../packages/styled-react/src/components/Button.stories.tsx')) - -test.describe('Button (@primer/styled-react)', () => { - for (const story of stories) { - test.describe(story.title, () => { - test(`default @vrt`, async ({page}) => { - await visit(page, { - id: story.id, - storybook: 'styled-react', - }) - - // Default state - await expect(page.getByTestId('screenshot')).toHaveScreenshot(`Button.${story.title}.png`) - }) - }) - } -}) diff --git a/packages/styled-react/package.json b/packages/styled-react/package.json index af99f60f94e..4836ca7e253 100644 --- a/packages/styled-react/package.json +++ b/packages/styled-react/package.json @@ -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": [ diff --git a/packages/styled-react/rollup.config.js b/packages/styled-react/rollup.config.js index d3acfdd0e32..309868570be 100644 --- a/packages/styled-react/rollup.config.js +++ b/packages/styled-react/rollup.config.js @@ -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({ diff --git a/packages/styled-react/script/generate-components-json b/packages/styled-react/script/generate-components-json index acd4d87db5e..ba3977b9fb6 100755 --- a/packages/styled-react/script/generate-components-json +++ b/packages/styled-react/script/generate-components-json @@ -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) diff --git a/packages/styled-react/src/__tests__/Box.browser.test.tsx b/packages/styled-react/src/__tests__/Box.browser.test.tsx deleted file mode 100644 index 86fc4e1d2f4..00000000000 --- a/packages/styled-react/src/__tests__/Box.browser.test.tsx +++ /dev/null @@ -1,131 +0,0 @@ -import {render, screen} from '@testing-library/react' -import {describe, expect, it} from 'vitest' -import React from 'react' -import Box from '../components/Box' -import {theme} from '@primer/react' - -const breakpoints = [ - null, - 'screen and (min-width: 544px)', - 'screen and (min-width: 768px)', - 'screen and (min-width: 1012px)', -] as const - -describe('Box', () => { - it('should support `className` on the outermost element', () => { - const Element = () => - expect(render().container.firstChild).toHaveClass('test-class-name') - }) - - it('should support margin', () => { - render() - const box = screen.getByTestId('box') - expect(getCSSRuleForClass(getClassName(box.className)).style.margin).toBe(theme.space[1]) - }) - - it('should support responsive margin', () => { - const m = [0, 1, 2, 3] - - render() - - const box = screen.getByTestId('box') - const className = getClassName(box.className) - - for (let i = 0; i < m.length; i++) { - let themeValue = theme.space[m[i]] - if (themeValue === '0') { - themeValue = '0px' - } - - if (i === 0) { - const cssRule = getCSSRuleForClass(className) - expect(cssRule.style.margin).toBe(themeValue) - } else { - const cssRule = getCSSRuleForClass(className, breakpoints[i]!) - expect(cssRule.style.margin).toBe(themeValue) - } - } - }) - - it('should support padding', () => { - render() - const box = screen.getByTestId('box') - expect(getCSSRuleForClass(getClassName(box.className)).style.padding).toBe(theme.space[1]) - }) - - it('should support responsive padding', () => { - const p = [0, 1, 2, 3] - - render() - - const box = screen.getByTestId('box') - const className = getClassName(box.className) - - for (let i = 0; i < p.length; i++) { - let themeValue = theme.space[p[i]] - if (themeValue === '0') { - themeValue = '0px' - } - - if (i === 0) { - const cssRule = getCSSRuleForClass(className) - expect(cssRule.style.padding).toBe(themeValue) - } else { - const cssRule = getCSSRuleForClass(className, breakpoints[i]!) - expect(cssRule.style.padding).toBe(themeValue) - } - } - }) - - it('should support display', () => { - render() - const box = screen.getByTestId('box') - expect(getCSSRuleForClass(getClassName(box.className)).style.display).toBe('inline') - }) - - it('should support responsive display', () => { - const display = ['none', 'inline', 'inline-block', 'block'] - render() - const box = screen.getByTestId('box') - const className = getClassName(box.className) - for (let i = 0; i < display.length; i++) { - if (i === 0) { - const cssRule = getCSSRuleForClass(className) - expect(cssRule.style.display).toBe(display[i]) - } else { - const cssRule = getCSSRuleForClass(className, breakpoints[i]!) - expect(cssRule.style.display).toBe(display[i]) - } - } - }) -}) - -function getClassName(className: string): string { - // styled-components with `Box` seems to generate two classes: `sx-` and - // ``. We are looking for the second class which seems to be the one the - // styles are applied to in CSS. - const classes = className.split(' ') - return classes[1] -} - -function getCSSRuleForClass(className: string, mediaText?: string): CSSStyleRule { - for (const sheet of document.styleSheets) { - for (const rule of sheet.cssRules) { - if (mediaText) { - if (rule instanceof CSSMediaRule && rule.media.mediaText === mediaText) { - for (const innerRule of rule.cssRules) { - if (innerRule instanceof CSSStyleRule && innerRule.selectorText === `.${className}`) { - return innerRule - } - } - } - } else if (rule instanceof CSSStyleRule) { - if (rule.selectorText === `.${className}`) { - return rule - } - } - } - } - - throw new Error(`CSS rule for class "${className}" not found`) -} diff --git a/packages/styled-react/src/__tests__/ThemeProvider.browser.test.tsx b/packages/styled-react/src/__tests__/ThemeProvider.browser.test.tsx index 8e269dfe690..74d86d463e5 100644 --- a/packages/styled-react/src/__tests__/ThemeProvider.browser.test.tsx +++ b/packages/styled-react/src/__tests__/ThemeProvider.browser.test.tsx @@ -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(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 diff --git a/packages/styled-react/src/__tests__/__snapshots__/ThemeProvider.browser.test.tsx.snap b/packages/styled-react/src/__tests__/__snapshots__/ThemeProvider.browser.test.tsx.snap index ab7d44ec634..cf7fa56c34e 100644 --- a/packages/styled-react/src/__tests__/__snapshots__/ThemeProvider.browser.test.tsx.snap +++ b/packages/styled-react/src/__tests__/__snapshots__/ThemeProvider.browser.test.tsx.snap @@ -2,7 +2,7 @@ exports[`has default theme 1`] = `
Hello diff --git a/packages/styled-react/src/__tests__/__snapshots__/exports.test.ts.snap b/packages/styled-react/src/__tests__/__snapshots__/exports.test.ts.snap index 2744a1066e6..b40fbbb0a29 100644 --- a/packages/styled-react/src/__tests__/__snapshots__/exports.test.ts.snap +++ b/packages/styled-react/src/__tests__/__snapshots__/exports.test.ts.snap @@ -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", -] -`; diff --git a/packages/styled-react/src/__tests__/deprecated-exports.test.ts b/packages/styled-react/src/__tests__/deprecated-exports.test.ts index eff24a3f1b6..0dfa5b61f4b 100644 --- a/packages/styled-react/src/__tests__/deprecated-exports.test.ts +++ b/packages/styled-react/src/__tests__/deprecated-exports.test.ts @@ -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]), diff --git a/packages/styled-react/src/__tests__/exports.test.ts b/packages/styled-react/src/__tests__/exports.test.ts index a6c58b205e0..c7cb27b4259 100644 --- a/packages/styled-react/src/__tests__/exports.test.ts +++ b/packages/styled-react/src/__tests__/exports.test.ts @@ -1,10 +1,6 @@ import {test, expect} from 'vitest' // eslint-disable-next-line import/no-namespace import * as StyledReact from '../' -// eslint-disable-next-line import/no-namespace -import * as StyledReactDeprecated from '../deprecated' -// eslint-disable-next-line import/no-namespace -import * as StyledReactExperimental from '../experimental' test('@primer/styled-react exports', () => { expect( @@ -13,19 +9,3 @@ test('@primer/styled-react exports', () => { }), ).toMatchSnapshot() }) - -test('@primer/styled-react/deprecated exports', () => { - expect( - Object.keys(StyledReactDeprecated).sort((a, b) => { - return a.localeCompare(b) - }), - ).toMatchSnapshot() -}) - -test('@primer/styled-react/experimental exports', () => { - expect( - Object.keys(StyledReactExperimental).sort((a, b) => { - return a.localeCompare(b) - }), - ).toMatchSnapshot() -}) diff --git a/packages/styled-react/src/__tests__/primer-react-deprecated.browser.test.tsx b/packages/styled-react/src/__tests__/primer-react-deprecated.browser.test.tsx deleted file mode 100644 index 4da7549e67a..00000000000 --- a/packages/styled-react/src/__tests__/primer-react-deprecated.browser.test.tsx +++ /dev/null @@ -1,22 +0,0 @@ -import {render, screen} from '@testing-library/react' -import {describe, expect, test} from 'vitest' -import {Dialog, Octicon} from '../deprecated' - -describe('@primer/react/deprecated', () => { - test('Dialog supports `sx` prop', () => { - render() - expect(window.getComputedStyle(screen.getByTestId('component')).backgroundColor).toBe('rgb(255, 0, 0)') - expect(screen.getByTestId('component').role).toBe('dialog') - }) - - test('Dialog.Header supports `sx` prop', () => { - render() - expect(window.getComputedStyle(screen.getByTestId('component')).backgroundColor).toBe('rgb(255, 0, 0)') - expect(screen.getByTestId('component').className.includes('Header')).toBe(true) - }) - - test('Octicon supports `sx` prop', () => { - render( } sx={{background: 'red'}} />) - expect(window.getComputedStyle(screen.getByTestId('component')).backgroundColor).toBe('rgb(255, 0, 0)') - }) -}) diff --git a/packages/styled-react/src/__tests__/primer-react-experimental.browser.test.tsx b/packages/styled-react/src/__tests__/primer-react-experimental.browser.test.tsx deleted file mode 100644 index f1d26691363..00000000000 --- a/packages/styled-react/src/__tests__/primer-react-experimental.browser.test.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import {render, screen} from '@testing-library/react' -import {describe, expect, test} from 'vitest' -import {Dialog} from '../experimental' - -describe('@primer/react/experimental', () => { - test('Dialog supports `sx` prop', () => { - render( {}} sx={{background: 'red'}} />) - expect(window.getComputedStyle(screen.getByRole('dialog')).backgroundColor).toBe('rgb(255, 0, 0)') - }) -}) diff --git a/packages/styled-react/src/__tests__/primer-react.browser.test.tsx b/packages/styled-react/src/__tests__/primer-react.browser.test.tsx deleted file mode 100644 index bc79672a865..00000000000 --- a/packages/styled-react/src/__tests__/primer-react.browser.test.tsx +++ /dev/null @@ -1,153 +0,0 @@ -import {render, screen} from '@testing-library/react' -import {describe, expect, test} from 'vitest' -import { - ActionList, - Box, - Button, - Dialog, - Flash, - Heading, - IconButton, - Label, - Link, - Spinner, - Text, - TextInput, - UnderlineNav, -} from '../' - -describe('@primer/react', () => { - test('ActionList supports `sx` prop', () => { - render() - expect(window.getComputedStyle(screen.getByTestId('component')).backgroundColor).toBe('rgb(255, 0, 0)') - expect(screen.getByTestId('component')).toHaveAttribute('data-variant', 'inset') - }) - - test('Box supports `sx` prop', () => { - render() - expect(window.getComputedStyle(screen.getByTestId('component')).backgroundColor).toBe('rgb(255, 0, 0)') - }) - - test('Button supports `sx` prop', () => { - render( - -export const WithFontSize = () => diff --git a/packages/styled-react/src/components/Button.tsx b/packages/styled-react/src/components/Button.tsx deleted file mode 100644 index 7d49c8ed618..00000000000 --- a/packages/styled-react/src/components/Button.tsx +++ /dev/null @@ -1,100 +0,0 @@ -import {Button as PrimerButton, type ButtonProps as PrimerButtonProps, type SlotMarker} from '@primer/react' -import type {SxProp, CSSCustomProperties, BetterSystemStyleObject} from '../sx' -import {forwardRef} from 'react' -import type {ForwardRefComponent} from '../polymorphic' -import styled from 'styled-components' -import {sx} from '../sx' - -type ButtonComponentProps = PrimerButtonProps & SxProp & {as?: React.ElementType} - -const StyledButtonComponent: ForwardRefComponent<'button', ButtonComponentProps> = styled(PrimerButton).withConfig({ - shouldForwardProp: prop => (prop as keyof ButtonComponentProps) !== 'sx', -})` - ${sx} -` - -const ButtonComponent = forwardRef(({as, sx, style: propStyle, ...props}: ButtonComponentProps, ref) => { - const {block, size = 'medium', leadingVisual, trailingVisual, trailingAction} = props - let sxStyles: {[key: string]: BetterSystemStyleObject} = {} - const style: CSSCustomProperties = {...(propStyle || {})} - - if (sx !== null && Object.keys(sx || {}).length > 0) { - sxStyles = generateCustomSxProp( - {block, size, leadingVisual, trailingVisual, trailingAction}, - sx as BetterSystemStyleObject, - ) - - const {color} = sx as {color?: string} - if (color) style['--button-color'] = color - } - - return -}) as ForwardRefComponent<'button', ButtonComponentProps> & SlotMarker - -// This function is used to generate a custom cssSelector for the sxProp - -// The usual sx prop can like this: -// sx={{ -// [`@media (max-width: 768px)`]: { -// '& > ul': { -// backgroundColor: 'deeppink', -// }, -// '&:hover': { -// backgroundColor: 'yellow', -// }, -// }, -// '&:hover': { -// backgroundColor: 'yellow', -// }, -// '&': { -// width : 320px -// } -// }} -//* -/* What we want for Button styles is this: -sx={{ -// [`@media (max-width: 768px)`]: { -// '&[data-attribute="something"] > ul': { -// backgroundColor: 'deeppink', -// }, -// '&[data-attribute="something"]:hover': { -// backgroundColor: 'yellow', -// }, -// }, -// '&[data-attribute="something"]:hover': { -// backgroundColor: 'yellow', -// }, -// '&[data-attribute="something"]': { -// width : 320px -// } -// }} - -// We need to make sure we append the customCSSSelector to the original class selector. i.e & - > &[data-attribute="Icon"][data-size="small"] -*/ -export function generateCustomSxProp( - props: Partial>, - providedSx: BetterSystemStyleObject, -) { - // Possible data attributes: data-size, data-block, data-no-visuals - const size = `[data-size="${props.size}"]` - const block = props.block ? `[data-block="block"]` : '' - const noVisuals = props.leadingVisual || props.trailingVisual || props.trailingAction ? '' : '[data-no-visuals]' - - // this is a custom selector. We need to make sure we add the data attributes to the base css class (& -> &[data-attributename="value"]]) - const cssSelector = `&${size}${block}${noVisuals}` // &[data-size="small"][data-block="block"][data-no-visuals] - - const customSxProp: { - [key: string]: BetterSystemStyleObject - } = {} - - if (!providedSx) return customSxProp - else { - customSxProp[cssSelector] = providedSx - return customSxProp - } -} - -ButtonComponent.displayName = 'Button' -ButtonComponent.__SLOT__ = PrimerButton.__SLOT__ - -export {ButtonComponent, type ButtonComponentProps} diff --git a/packages/styled-react/src/components/Dialog.tsx b/packages/styled-react/src/components/Dialog.tsx deleted file mode 100644 index eed01f36378..00000000000 --- a/packages/styled-react/src/components/Dialog.tsx +++ /dev/null @@ -1,69 +0,0 @@ -import {Dialog as PrimerDialog} from '@primer/react' -import type {DialogProps as PrimerDialogProps, SlotMarker} from '@primer/react' -import type {SxProp} from '../sx' -import {sx} from '../sx' -import styled from 'styled-components' -import {forwardRef, type ComponentPropsWithoutRef, type PropsWithChildren} from 'react' - -type DialogProps = PropsWithChildren & SxProp & {as?: React.ElementType} - -const StyledDialog = styled(PrimerDialog).withConfig({ - shouldForwardProp: prop => (prop as keyof DialogProps) !== 'sx', -})` - ${sx} -` - -const DialogImpl = forwardRef(function Dialog({as, ...props}, ref) { - return -}) - -type DialogHeaderProps = ComponentPropsWithoutRef<'div'> & SxProp & {as?: React.ElementType} - -const StyledDialogHeader = styled(PrimerDialog.Header).withConfig({ - shouldForwardProp: prop => (prop as keyof DialogHeaderProps) !== 'sx', -})` - ${sx} -` - -const DialogHeader = forwardRef(function DialogHeader({as, ...props}, ref) { - return -}) - -type StyledBodyProps = React.ComponentProps<'div'> & SxProp & {as?: React.ElementType} - -const StyledDialogBody = styled(PrimerDialog.Body).withConfig({ - shouldForwardProp: prop => (prop as keyof StyledBodyProps) !== 'sx', -})` - ${sx} -` - -const DialogBody = forwardRef(function DialogBody({as, ...props}, ref) { - return -}) - -type StyledFooterProps = React.ComponentProps<'div'> & SxProp & {as?: React.ElementType} - -const StyledDialogFooter = styled(PrimerDialog.Footer).withConfig({ - shouldForwardProp: prop => (prop as keyof StyledFooterProps) !== 'sx', -})` - ${sx} -` - -const DialogFooter = forwardRef(function DialogFooter({as, ...props}, ref) { - return -}) - -;(DialogHeader as typeof DialogHeader & SlotMarker).__SLOT__ = PrimerDialog.Header.__SLOT__ -;(DialogBody as typeof DialogBody & SlotMarker).__SLOT__ = PrimerDialog.Body.__SLOT__ -;(DialogFooter as typeof DialogFooter & SlotMarker).__SLOT__ = PrimerDialog.Footer.__SLOT__ - -const Dialog = Object.assign(DialogImpl, { - __SLOT__: PrimerDialog['__SLOT__'], - Buttons: PrimerDialog.Buttons, - Header: DialogHeader, - Body: DialogBody, - Footer: DialogFooter, -}) - -export {Dialog} -export type {DialogProps} diff --git a/packages/styled-react/src/components/Flash.tsx b/packages/styled-react/src/components/Flash.tsx deleted file mode 100644 index c4ae4624e96..00000000000 --- a/packages/styled-react/src/components/Flash.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import {type FlashProps as PrimerFlashProps, Flash as PrimerFlash} from '@primer/react' -import styled from 'styled-components' -import {sx, type SxProp} from '../sx' -import type {ForwardRefComponent} from '../polymorphic' - -type FlashProps = PrimerFlashProps & SxProp - -const Flash: ForwardRefComponent<'div', FlashProps> = styled(PrimerFlash).withConfig({ - shouldForwardProp: prop => prop !== 'sx', -})` - ${sx} -` - -export {Flash} -export type {FlashProps} diff --git a/packages/styled-react/src/components/Heading.tsx b/packages/styled-react/src/components/Heading.tsx deleted file mode 100644 index 92c364a449b..00000000000 --- a/packages/styled-react/src/components/Heading.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import {Heading as PrimerHeading} from '@primer/react' -import {type HeadingProps as PrimerHeadingProps} from '@primer/react' -import type {ForwardRefComponent} from '../polymorphic' -import {sx, type SxProp} from '../sx' -import styled from 'styled-components' - -type HeadingLevels = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' - -type HeadingProps = PrimerHeadingProps & SxProp - -const Heading: ForwardRefComponent = styled(PrimerHeading).withConfig({ - shouldForwardProp: prop => (prop as keyof HeadingProps) !== 'sx', -})` - ${sx} -` - -export {Heading, type HeadingProps} diff --git a/packages/styled-react/src/components/IconButton.tsx b/packages/styled-react/src/components/IconButton.tsx deleted file mode 100644 index 9c68b165c86..00000000000 --- a/packages/styled-react/src/components/IconButton.tsx +++ /dev/null @@ -1,35 +0,0 @@ -import { - IconButton as PrimerIconButton, - type IconButtonProps as PrimerIconButtonProps, - type SlotMarker, -} from '@primer/react' -import {type ForwardRefComponent} from '../polymorphic' -import {generateCustomSxProp} from './Button' -import {forwardRef} from 'react' -import styled from 'styled-components' -import {sx, type SxProp} from '../sx' - -type IconButtonProps = PrimerIconButtonProps & SxProp & {as?: React.ElementType} - -const StyledIconButton = styled(PrimerIconButton).withConfig({ - shouldForwardProp: prop => (prop as keyof IconButtonProps) !== 'sx', -})` - ${sx} -` - -const IconButton = forwardRef(({as, sx, ...props}: IconButtonProps, ref) => { - let sxStyles = sx - // grap the button props that have associated data attributes in the styles - const {size = 'medium'} = props - - if (sx !== null && sx !== undefined && Object.keys(sx).length > 0) { - sxStyles = generateCustomSxProp({size}, sx) - } - - return -}) as ForwardRefComponent<'a' | 'button', IconButtonProps> & SlotMarker - -IconButton.__SLOT__ = PrimerIconButton.__SLOT__ - -export {IconButton} -export type {IconButtonProps} diff --git a/packages/styled-react/src/components/Label.tsx b/packages/styled-react/src/components/Label.tsx deleted file mode 100644 index dd5121acc82..00000000000 --- a/packages/styled-react/src/components/Label.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import {type LabelProps as PrimerLabelProps, Label as PrimerLabel} from '@primer/react' -import {sx, type SxProp} from '../sx' -import {forwardRef} from 'react' -import type {ForwardRefComponent} from '../polymorphic' -import styled from 'styled-components' - -type LabelProps = PrimerLabelProps & SxProp & {as?: React.ElementType} - -const StyledLabel: ForwardRefComponent<'span', LabelProps> = styled(PrimerLabel).withConfig({ - shouldForwardProp: prop => (prop as keyof LabelProps) !== 'sx', -})` - ${sx} -` - -const Label = forwardRef(({as, ...props}, ref) => { - return -}) as ForwardRefComponent<'span', LabelProps> - -export {Label, type LabelProps} diff --git a/packages/styled-react/src/components/Link.tsx b/packages/styled-react/src/components/Link.tsx deleted file mode 100644 index f87879d9a09..00000000000 --- a/packages/styled-react/src/components/Link.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import {Link as PrimerLink, type LinkProps as PrimerLinkProps} from '@primer/react' -import styled from 'styled-components' -import {sx, type SxProp} from '../sx' -import type {ForwardRefComponent} from '../polymorphic' -import {forwardRef} from 'react' - -type LinkProps = PrimerLinkProps & SxProp - -const StyledLink = styled(PrimerLink).withConfig({ - shouldForwardProp: prop => prop !== 'sx', -})` - ${sx} -` as ForwardRefComponent<'a', LinkProps> - -const Link = forwardRef(({as, ...props}, ref) => { - return -}) as ForwardRefComponent<'a', LinkProps> - -export {Link, type LinkProps} diff --git a/packages/styled-react/src/components/Spinner.tsx b/packages/styled-react/src/components/Spinner.tsx deleted file mode 100644 index 4349262f6c3..00000000000 --- a/packages/styled-react/src/components/Spinner.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import {Spinner as PrimerSpinner, type SpinnerProps as PrimerSpinnerProps} from '@primer/react' -import {sx, type SxProp} from '../sx' -import styled from 'styled-components' - -export type SpinnerProps = PrimerSpinnerProps & SxProp - -export const Spinner = styled(PrimerSpinner).withConfig({ - shouldForwardProp: prop => (prop as keyof SpinnerProps) !== 'sx', -})` - ${sx} -` diff --git a/packages/styled-react/src/components/Text.tsx b/packages/styled-react/src/components/Text.tsx deleted file mode 100644 index efee4e79acf..00000000000 --- a/packages/styled-react/src/components/Text.tsx +++ /dev/null @@ -1,31 +0,0 @@ -import {Text as PrimerText, type TextProps as PrimerTextProps} from '@primer/react' -import {sx, type SxProp} from '../sx' -import styled from 'styled-components' -import type React from 'react' -import {forwardRef} from 'react' -import type {ForwardRefComponent} from '../polymorphic' - -// Create a base type without generics for styled-components -type BaseTextProps = { - size?: 'large' | 'medium' | 'small' - weight?: 'light' | 'normal' | 'medium' | 'semibold' - className?: string - children?: React.ReactNode - as?: React.ElementType -} & SxProp & - React.HTMLAttributes - -// Generic type that matches PrimerText exactly -type TextProps = PrimerTextProps & SxProp - -const StyledText = styled(PrimerText).withConfig({ - shouldForwardProp: prop => (prop as keyof BaseTextProps) !== 'sx', -})` - ${sx} -` - -const Text = forwardRef(({as, ...props}, ref) => { - return -}) as ForwardRefComponent<'span', BaseTextProps> - -export {Text, type TextProps} diff --git a/packages/styled-react/src/components/TextInput.tsx b/packages/styled-react/src/components/TextInput.tsx deleted file mode 100644 index 1777d704137..00000000000 --- a/packages/styled-react/src/components/TextInput.tsx +++ /dev/null @@ -1,40 +0,0 @@ -import { - TextInput as PrimerTextInput, - type TextInputProps as PrimerTextInputProps, - type TextInputActionProps as PrimerTextInputActionProps, -} from '@primer/react' -import {forwardRef, type ForwardRefExoticComponent, type RefAttributes} from 'react' -import {sx, type SxProp} from '../sx' -import {type ForwardRefComponent} from '../polymorphic' -import styled from 'styled-components' - -export type TextInputProps = PrimerTextInputProps & SxProp & {as?: React.ElementType} -export type TextInputActionProps = PrimerTextInputActionProps & SxProp - -const StyledTextInput: ForwardRefComponent<'input', TextInputProps> = styled(PrimerTextInput).withConfig({ - shouldForwardProp: prop => (prop as keyof TextInputProps) !== 'sx', -})` - ${sx} -` - -const TextInputImpl = forwardRef(({as, ...props}, ref) => { - return -}) - -const TextInputAction: ForwardRefComponent<'button', TextInputActionProps> = styled(PrimerTextInput.Action).withConfig({ - shouldForwardProp: prop => (prop as keyof TextInputActionProps) !== 'sx', -})` - ${sx} -` - -type TextInputComposite = ForwardRefExoticComponent> & { - Action: typeof TextInputAction -} - -export const TextInput: TextInputComposite = Object.assign(TextInputImpl, { - __SLOT__: PrimerTextInput.__SLOT__, - Action: TextInputAction, -}) - -TextInputAction.displayName = 'TextInputAction' -TextInputImpl.displayName = 'TextInput' diff --git a/packages/styled-react/src/components/ToggleSwitch.tsx b/packages/styled-react/src/components/ToggleSwitch.tsx deleted file mode 100644 index 53974f63d85..00000000000 --- a/packages/styled-react/src/components/ToggleSwitch.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import {ToggleSwitch as PrimerToggleSwitch, type ToggleSwitchProps as PrimerToggleSwitchProps} from '@primer/react' -import {forwardRef} from 'react' -import {Box} from './Box' -import type {StyledProps} from '../styled-props' - -type ToggleSwitchProps = PrimerToggleSwitchProps & Omit - -const ToggleSwitch = forwardRef(function ToggleSwitch(props, ref) { - return -}) - -export {ToggleSwitch, type ToggleSwitchProps} diff --git a/packages/styled-react/src/components/UnderlineNav.tsx b/packages/styled-react/src/components/UnderlineNav.tsx deleted file mode 100644 index 8ccbb31a960..00000000000 --- a/packages/styled-react/src/components/UnderlineNav.tsx +++ /dev/null @@ -1,37 +0,0 @@ -import { - UnderlineNav as PrimerUnderlineNav, - type UnderlineNavProps as PrimerUnderlineNavProps, - type UnderlineNavItemProps as PrimerUnderlineNavItemProps, -} from '@primer/react' -import {Box} from './Box' -import type {ForwardRefComponent} from '../polymorphic' -import {forwardRef} from 'react' -import styled from 'styled-components' -import {sx, type SxProp} from '../sx' - -export type UnderlineNavProps = PrimerUnderlineNavProps & SxProp - -const StyledUnderlineNav = forwardRef(function UnderlineNav(props, ref) { - return -}) - -export const UnderlineNavImpl = forwardRef(({as, ...props}: UnderlineNavProps, ref) => ( - -)) as ForwardRefComponent<'nav', UnderlineNavProps> - -export type UnderlineNavItemProps = PrimerUnderlineNavItemProps & SxProp & React.HTMLAttributes - -const StyledUnderlineNavItem: ForwardRefComponent<'a', UnderlineNavItemProps> = styled( - PrimerUnderlineNav.Item, -).withConfig({ - shouldForwardProp: prop => prop !== 'sx', -})` - ${sx} -` -export const UnderlineNavItem = forwardRef(({as, ...props}: UnderlineNavItemProps, ref) => ( - -)) as ForwardRefComponent<'a', UnderlineNavItemProps> - -export const UnderlineNav = Object.assign(UnderlineNavImpl, { - Item: UnderlineNavItem, -}) diff --git a/packages/styled-react/src/components/deprecated/ActionList.tsx b/packages/styled-react/src/components/deprecated/ActionList.tsx deleted file mode 100644 index 88908a51ac0..00000000000 --- a/packages/styled-react/src/components/deprecated/ActionList.tsx +++ /dev/null @@ -1,47 +0,0 @@ -import {type PropsWithChildren, forwardRef} from 'react' -import { - ActionList as PrimerActionList, - type ActionListProps as PrimerActionListProps, - type ActionListItemProps as PrimerActionListItemProps, - type ActionListGroupProps as PrimerActionListGroupProps, -} from '@primer/react/deprecated' -import {sx, type SxProp} from '../../sx' -import {Box} from '../Box' -import styled from 'styled-components' -import type {ActionListDividerProps} from '@primer/react' - -type ActionListProps = PropsWithChildren -// Add explicit `as` prop since polymorphic typing doesn't carry over to type aliases -type ActionListItemProps = PropsWithChildren -type ActionListGroupProps = PropsWithChildren - -const ActionListImpl = forwardRef(function ActionList(props, ref) { - return -}) - -const StyledActionListItem = styled(PrimerActionList.Item).withConfig({ - shouldForwardProp: prop => (prop as keyof ActionListItemProps) !== 'sx', -})` - ${sx} -` - -const ActionListItem = forwardRef(({as, ...props}, ref) => ( - -)) - -function ActionListGroup(props: ActionListGroupProps) { - return -} - -function ActionListDivider(props: ActionListDividerProps) { - return -} - -const ActionList = Object.assign(ActionListImpl, { - Item: ActionListItem, - Group: ActionListGroup, - Divider: ActionListDivider, -}) - -export type {ActionListProps, ActionListItemProps, ActionListGroupProps} -export {ActionList} diff --git a/packages/styled-react/src/components/deprecated/DialogV1.tsx b/packages/styled-react/src/components/deprecated/DialogV1.tsx deleted file mode 100644 index 98eba8edcb1..00000000000 --- a/packages/styled-react/src/components/deprecated/DialogV1.tsx +++ /dev/null @@ -1,36 +0,0 @@ -import {Dialog as PrimerDialog} from '@primer/react/deprecated' -import type { - DialogProps as PrimerDialogProps, - DialogHeaderProps as PrimerDialogHeaderProps, -} from '@primer/react/deprecated' -import {Box} from '../Box' -import type {SxProp} from '../../sx' -import {forwardRef} from 'react' -import type {ForwardRefComponent} from '../../polymorphic' - -type DialogProps = PrimerDialogProps & SxProp - -const StyledDialog = forwardRef(function Dialog(props, ref) { - return -}) - -const DialogImpl = forwardRef(({as, ...props}: DialogProps, ref) => ( - -)) as ForwardRefComponent<'div', DialogProps> - -type DialogHeaderProps = PrimerDialogHeaderProps & SxProp - -const StyledDialogHeader = forwardRef(function DialogHeader(props, ref) { - return -}) - -const DialogHeader = forwardRef(({as, ...props}: DialogHeaderProps, ref) => ( - -)) as ForwardRefComponent<'div', DialogHeaderProps> - -const Dialog = Object.assign(DialogImpl, { - Header: DialogHeader, -}) - -export {Dialog} -export type {DialogProps, DialogHeaderProps} diff --git a/packages/styled-react/src/components/deprecated/Octicon.tsx b/packages/styled-react/src/components/deprecated/Octicon.tsx deleted file mode 100644 index beb019beb83..00000000000 --- a/packages/styled-react/src/components/deprecated/Octicon.tsx +++ /dev/null @@ -1,27 +0,0 @@ -import {Octicon as PrimerOcticon, type OcticonProps as PrimerOcticonProps} from '@primer/react/deprecated' -import styled from 'styled-components' -import {type SxProp, sx} from '../../sx' -import {forwardRef} from 'react' - -/** - * @deprecated Use the icon component directly from `@primer/octicons-react` instead - */ -export type OcticonProps = PrimerOcticonProps & SxProp & {color?: string} - -/** - * @deprecated Use the icon component directly from `@primer/octicons-react` instead - */ -const StyledOcticon = styled(PrimerOcticon).withConfig({ - shouldForwardProp(prop) { - return prop !== 'sx' - }, -})` - ${({color, sx: sxProp}) => sx({sx: {color, ...sxProp}})} -` - -const Octicon = forwardRef(({as, ...props}: OcticonProps, ref) => { - return -}) - -export default Octicon -export {Octicon} diff --git a/packages/styled-react/src/deprecated.tsx b/packages/styled-react/src/deprecated.tsx deleted file mode 100644 index d93969a6d80..00000000000 --- a/packages/styled-react/src/deprecated.tsx +++ /dev/null @@ -1,59 +0,0 @@ -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. - */ - 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' diff --git a/packages/styled-react/src/experimental.tsx b/packages/styled-react/src/experimental.tsx deleted file mode 100644 index 6142b2818e6..00000000000 --- a/packages/styled-react/src/experimental.tsx +++ /dev/null @@ -1,13 +0,0 @@ -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' diff --git a/packages/styled-react/src/index.tsx b/packages/styled-react/src/index.tsx index 7b2aa90ed8b..8be78d5a223 100644 --- a/packages/styled-react/src/index.tsx +++ b/packages/styled-react/src/index.tsx @@ -1,19 +1,5 @@ 'use client' -export { - /** - * @deprecated This component is no longer supported. Prefer using CSS Modules - * instead. - */ - Box, - - /** - * @deprecated This component is no longer supported. Prefer using CSS Modules - * instead. - */ - type BoxProps, -} from './components/Box' - // theming depends on styled-components export { /** @@ -71,230 +57,6 @@ export { get as themeGet, } from './theme-get' -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 ActionListLinkItemProps, - - /** - * @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, - - /** - * @deprecated Usage of the `sx` prop with this component is no longer - * supported. Use the component from `@primer/react` with CSS Modules instead. - */ - type ActionListDividerProps, - - /** - * @deprecated Usage of the `sx` prop with this component is no longer - * supported. Use the component from `@primer/react` with CSS Modules instead. - */ - type ActionListLeadingVisualProps, - - /** - * @deprecated Usage of the `sx` prop with this component is no longer - * supported. Use the component from `@primer/react` with CSS Modules instead. - */ - type ActionListTrailingVisualProps, - - /** - * @deprecated Usage of the `sx` prop with this component is no longer - * supported. Use the component from `@primer/react` with CSS Modules instead. - */ - type ActionListTrailingActionProps, -} from './components/ActionList' - -export { - /** - * @deprecated Usage of the `sx` prop with this component is no longer - * supported. Use the component from `@primer/react` with CSS Modules instead. - */ - ButtonComponent as Button, - - /** - * @deprecated Usage of the `sx` prop with this component is no longer - * supported. Use the component from `@primer/react` with CSS Modules instead. - */ - type ButtonComponentProps as ButtonProps, -} from './components/Button' - -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. - */ - Flash, -} from './components/Flash' - -export { - /** - * @deprecated Usage of the `sx` prop with this component is no longer - * supported. Use the component from `@primer/react` with CSS Modules instead. - */ - Heading, -} from './components/Heading' - -export { - /** - * @deprecated Usage of the `sx` prop with this component is no longer - * supported. Use the component from `@primer/react` with CSS Modules instead. - */ - IconButton, - - /** - * @deprecated Usage of the `sx` prop with this component is no longer - * supported. Use the component from `@primer/react` with CSS Modules instead. - */ - type IconButtonProps, -} from './components/IconButton' - -export { - /** - * @deprecated Usage of the `sx` prop with this component is no longer - * supported. Use the component from `@primer/react` with CSS Modules instead. - */ - Label, - - /** - * @deprecated Usage of the `sx` prop with this component is no longer - * supported. Use the component from `@primer/react` with CSS Modules instead. - */ - type LabelProps, -} from './components/Label' - -export { - /** - * @deprecated Usage of the `sx` prop with this component is no longer - * supported. Use the component from `@primer/react` with CSS Modules instead. - */ - Link, - - /** - * @deprecated Usage of the `sx` prop with this component is no longer - * supported. Use the component from `@primer/react` with CSS Modules instead. - */ - type LinkProps, -} from './components/Link' - -export { - /** - * @deprecated Usage of the `sx` prop with this component is no longer - * supported. Use the component from `@primer/react` with CSS Modules instead. - */ - Spinner, - - /** - * @deprecated Usage of the `sx` prop with this component is no longer - * supported. Use the component from `@primer/react` with CSS Modules instead. - */ - type SpinnerProps, -} from './components/Spinner' - -export { - /** - * @deprecated Usage of the `sx` prop with this component is no longer - * supported. Use the component from `@primer/react` with CSS Modules instead. - */ - Text, - - /** - * @deprecated Usage of the `sx` prop with this component is no longer - * supported. Use the component from `@primer/react` with CSS Modules instead. - */ - type TextProps, -} from './components/Text' - -export { - /** - * @deprecated Usage of the `sx` prop with this component is no longer - * supported. Use the component from `@primer/react` with CSS Modules instead. - */ - TextInput, - - /** - * @deprecated Usage of the `sx` prop with this component is no longer - * supported. Use the component from `@primer/react` with CSS Modules instead. - */ - type TextInputProps, - - /** - * @deprecated Usage of the `sx` prop with this component is no longer - * supported. Use the component from `@primer/react` with CSS Modules instead. - */ - type TextInputActionProps, -} from './components/TextInput' - -export { - /** - * @deprecated Usage of the `sx` prop with this component is no longer - * supported. Use the component from `@primer/react` with CSS Modules instead. - */ - ToggleSwitch, - - /** - * @deprecated Usage of the `sx` prop with this component is no longer - * supported. Use the component from `@primer/react` with CSS Modules instead. - */ - type ToggleSwitchProps, -} from './components/ToggleSwitch' - -export { - /** - * @deprecated Usage of the `sx` prop with this component is no longer - * supported. Use the component from `@primer/react` with CSS Modules instead. - */ - UnderlineNav, - - /** - * @deprecated Usage of the `sx` prop with this component is no longer - * supported. Use the component from `@primer/react` with CSS Modules instead. - */ - type UnderlineNavProps, - - /** - * @deprecated Usage of the `sx` prop with this component is no longer - * supported. Use the component from `@primer/react` with CSS Modules instead. - */ - type UnderlineNavItemProps, -} from './components/UnderlineNav' - export { /** * @deprecated Theming in JavaScript is no longer supported. Prefer using