From a6e09ba1be98dbb3f9f95df9317c82e5aa2a7277 Mon Sep 17 00:00:00 2001 From: Umar Date: Fri, 13 Jun 2025 23:21:43 +0100 Subject: [PATCH 1/4] refactor: remove defaultProps --- .../spectacle/src/components/fullscreen.tsx | 7 +- packages/spectacle/src/components/image.ts | 14 +- .../src/components/layout-primitives.ts | 25 ++-- packages/spectacle/src/components/table.tsx | 55 +++----- .../spectacle/src/components/typography.tsx | 124 +++++++++--------- 5 files changed, 103 insertions(+), 122 deletions(-) diff --git a/packages/spectacle/src/components/fullscreen.tsx b/packages/spectacle/src/components/fullscreen.tsx index acb42b55b..6cb907d4a 100644 --- a/packages/spectacle/src/components/fullscreen.tsx +++ b/packages/spectacle/src/components/fullscreen.tsx @@ -17,7 +17,7 @@ const Container = styled('div')` `; const FullScreen = forwardRef( - ({ size, color, ...props }, ref) => { + ({ size = 24, color = '#fff', ...props }, ref) => { const toggleFullScreen = useToggleFullScreen(); const [isClient, setIsClient] = useState(false); @@ -52,9 +52,4 @@ const FullScreen = forwardRef( FullScreen.displayName = 'Fullscreen'; -FullScreen.defaultProps = { - color: '#fff', - size: 24 -}; - export default FullScreen; diff --git a/packages/spectacle/src/components/image.ts b/packages/spectacle/src/components/image.ts index 49d1d649a..b73b38b1f 100644 --- a/packages/spectacle/src/components/image.ts +++ b/packages/spectacle/src/components/image.ts @@ -8,11 +8,19 @@ type ImageType = FC< >; const Image = styled.img(compose(layout, position)) as ImageType; -const FullSizeImage = styled(Image) as unknown as ImageType; -FullSizeImage.defaultProps = { +// Option 1: Using styled-components `attrs` method to set default props +const FullSizeImage = styled(Image).attrs({ maxWidth: '100%', maxHeight: '100%' -}; +})` + /* Additional styles can go here if needed */ +` as unknown as ImageType; + +// Option 2: Alternative approach using CSS defaults +// const FullSizeImage = styled(Image)` +// max-width: 100%; +// max-height: 100%; +// ` as unknown as ImageType; export { Image, FullSizeImage }; diff --git a/packages/spectacle/src/components/layout-primitives.ts b/packages/spectacle/src/components/layout-primitives.ts index 81cbe87e2..1805b7f46 100644 --- a/packages/spectacle/src/components/layout-primitives.ts +++ b/packages/spectacle/src/components/layout-primitives.ts @@ -29,25 +29,20 @@ const Box = styled.div( containerPrintStyle ); -const FlexBox = styled.div( - compose(layout, space, position, color, border, flexbox), - containerPrintStyle -); - -FlexBox.defaultProps = { +const FlexBox = styled.div.attrs((props) => ({ alignItems: 'center', justifyContent: 'center', - display: 'flex' -}; - -type GridProps = SS.LayoutProps & SS.GridProps & SS.PositionProps; -const Grid = styled.div( - compose(layout, grid, position), + display: 'flex', + ...props +}))( + compose(layout, space, position, color, border, flexbox), containerPrintStyle ); -Grid.defaultProps = { - display: 'grid' -}; +type GridProps = SS.LayoutProps & SS.GridProps & SS.PositionProps; +const Grid = styled.div.attrs((props) => ({ + display: 'grid', + ...props +}))(compose(layout, grid, position), containerPrintStyle); export { Box, FlexBox, Grid }; diff --git a/packages/spectacle/src/components/table.tsx b/packages/spectacle/src/components/table.tsx index 904bfb1b4..d6c932470 100644 --- a/packages/spectacle/src/components/table.tsx +++ b/packages/spectacle/src/components/table.tsx @@ -19,67 +19,52 @@ export type TableProps = ColorProps & BorderProps & LayoutProps; -const Table = styled.table( - compose(color, typography, space, border, layout) -); - -Table.defaultProps = { +const Table = styled.table.attrs((props) => ({ color: 'primary', fontFamily: 'text', fontSize: 'text', textAlign: 'left', margin: 'listMargin', - width: 1 -}; - -const TableHeader = styled.thead( - compose(color, typography, space, border, layout) -); + width: 1, + ...props +}))(compose(color, typography, space, border, layout)); -TableHeader.defaultProps = { +const TableHeader = styled.thead.attrs((props) => ({ color: 'primary', fontFamily: 'text', fontSize: 'text', fontWeight: 'bold', textAlign: 'left', - margin: 'listMargin' -}; - -const TableBody = styled.tbody( - compose(color, typography, space, border, layout) -); + margin: 'listMargin', + ...props +}))(compose(color, typography, space, border, layout)); -TableBody.defaultProps = { +const TableBody = styled.tbody.attrs((props) => ({ color: 'primary', fontFamily: 'text', fontSize: 'text', textAlign: 'left', margin: 'listMargin', - width: 1 -}; + width: 1, + ...props +}))(compose(color, typography, space, border, layout)); -const TableRow = styled.tr( - compose(color, typography, space, border, layout) -); - -TableRow.defaultProps = { +const TableRow = styled.tr.attrs((props) => ({ color: 'primary', fontFamily: 'text', fontSize: 'text', textAlign: 'left', - margin: 'listMargin' -}; - -const TableCell = styled.td( - compose(color, typography, space, border, layout) -); + margin: 'listMargin', + ...props +}))(compose(color, typography, space, border, layout)); -TableCell.defaultProps = { +const TableCell = styled.td.attrs((props) => ({ color: 'primary', fontFamily: 'text', fontSize: 'text', textAlign: 'left', - margin: 'listMargin' -}; + margin: 'listMargin', + ...props +}))(compose(color, typography, space, border, layout)); export { Table, TableCell, TableRow, TableHeader, TableBody }; diff --git a/packages/spectacle/src/components/typography.tsx b/packages/spectacle/src/components/typography.tsx index 895acaa82..c6054f9b0 100644 --- a/packages/spectacle/src/components/typography.tsx +++ b/packages/spectacle/src/components/typography.tsx @@ -25,51 +25,58 @@ type DecorationProps = Pick; export type CommonTypographyProps = ColorProps & TypographyProps & SpaceProps; -const Text = styled.div( - compose(color, typography, space) -); -Text.defaultProps = { +const Text = styled.div.attrs((props) => ({ color: 'primary', fontFamily: 'text', fontSize: 'text', textAlign: 'left', padding: 0, - margin: 0 -}; + margin: 0, + ...props +}))(compose(color, typography, space)); -const CodeSpan = styled.code( - compose(color, typography, space) -); -CodeSpan.defaultProps = { +const CodeSpan = styled.code.attrs((props) => ({ fontFamily: 'monospace', - fontSize: 'text' -}; - -const Link = styled.a( + fontSize: 'text', + ...props +}))(compose(color, typography, space)); + +const Link = styled.a.attrs( + (props) => ({ + fontFamily: 'text', + fontSize: 'text', + textDecoration: 'underline', + color: 'quaternary', + ...props + }) +)( compose(color, typography, space, decoration) ); -Link.defaultProps = { - fontFamily: 'text', - fontSize: 'text', - textDecoration: 'underline', - color: 'quaternary' -}; -const Heading = styled(Text)({}); -Heading.defaultProps = { +const Heading = styled(Text).attrs((props) => ({ color: 'secondary', fontFamily: 'header', fontSize: 'h1', fontWeight: 'bold', textAlign: 'center', - margin: 1 -}; + margin: 1, + ...props +}))({}); const Quote = styled( Text as FC< PropsWithChildren> > -)` +).attrs>((props) => ({ + color: 'primary', + fontFamily: 'text', + fontSize: 'text', + textAlign: 'left', + fontStyle: 'italic', + padding: '16px 0 16px 8px', + margin: 0, + ...props +}))>` border-left: 1px solid ${({ theme, borderColor }) => borderColor || theme.colors.secondary}; @@ -77,49 +84,42 @@ const Quote = styled( margin: 0; } `; -Quote.defaultProps = { - color: 'primary', - fontFamily: 'text', - fontSize: 'text', - textAlign: 'left', - fontStyle: 'italic', - padding: '16px 0 16px 8px', - margin: 0 -}; const listStyle = system({ listStyleType: true }); type ListStyleProps = Pick; -const OrderedList = styled.ol( +const OrderedList = styled.ol.attrs( + (props) => ({ + color: 'primary', + fontFamily: 'text', + fontSize: 'text', + textAlign: 'left', + margin: 0, + ...props + }) +)( compose(color, typography, space, listStyle) ); -OrderedList.defaultProps = { - color: 'primary', - fontFamily: 'text', - fontSize: 'text', - textAlign: 'left', - margin: 0 -}; -const UnorderedList = styled.ul( +const UnorderedList = styled.ul.attrs( + (props) => ({ + color: 'primary', + fontFamily: 'text', + fontSize: 'text', + textAlign: 'left', + margin: 0, + ...props + }) +)( compose(color, typography, space, listStyle) ); -UnorderedList.defaultProps = { - color: 'primary', - fontFamily: 'text', - fontSize: 'text', - textAlign: 'left', - margin: 0 -}; -const ListItem = styled.li( - compose(color, typography, space) -); -ListItem.defaultProps = { - margin: 0 -}; +const ListItem = styled.li.attrs((props) => ({ + margin: 0, + ...props +}))(compose(color, typography, space)); const FitContainer = styled.div` width: 100%; @@ -130,16 +130,14 @@ const FitContainer = styled.div` const ScalableText = styled( Text as FC> -)<{ scale: number }>` +).attrs((props) => ({ + textAlign: 'center', + ...props +}))<{ scale?: number }>` transform-origin: center; - transform: scale(${(props) => props.scale}); + transform: scale(${(props) => props.scale || 1}); white-space: nowrap; `; -ScalableText.defaultProps = { - ...Text.defaultProps, - textAlign: 'center', - scale: 1 -}; const FitText: FC< PropsWithChildren> From 0228a9c5f94c3fd86eb9f5c92eddfaaae6c3fa8e Mon Sep 17 00:00:00 2001 From: Umar Date: Fri, 13 Jun 2025 23:29:28 +0100 Subject: [PATCH 2/4] refactor: update FullSizeImage to use props in styled-components attrs --- packages/spectacle/src/components/image.ts | 17 ++++------------- 1 file changed, 4 insertions(+), 13 deletions(-) diff --git a/packages/spectacle/src/components/image.ts b/packages/spectacle/src/components/image.ts index b73b38b1f..fe5718b13 100644 --- a/packages/spectacle/src/components/image.ts +++ b/packages/spectacle/src/components/image.ts @@ -8,19 +8,10 @@ type ImageType = FC< >; const Image = styled.img(compose(layout, position)) as ImageType; - -// Option 1: Using styled-components `attrs` method to set default props -const FullSizeImage = styled(Image).attrs({ +const FullSizeImage = styled(Image).attrs((props) => ({ maxWidth: '100%', - maxHeight: '100%' -})` - /* Additional styles can go here if needed */ -` as unknown as ImageType; - -// Option 2: Alternative approach using CSS defaults -// const FullSizeImage = styled(Image)` -// max-width: 100%; -// max-height: 100%; -// ` as unknown as ImageType; + maxHeight: '100%', + ...props +})) as unknown as ImageType; export { Image, FullSizeImage }; From 1bfad3b65ffc8a3f34bf003b676c3c0976e85b30 Mon Sep 17 00:00:00 2001 From: Umar Date: Sat, 14 Jun 2025 00:06:10 +0100 Subject: [PATCH 3/4] chore: create changeset --- .changeset/lazy-actors-wink.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/lazy-actors-wink.md diff --git a/.changeset/lazy-actors-wink.md b/.changeset/lazy-actors-wink.md new file mode 100644 index 000000000..e15fd464a --- /dev/null +++ b/.changeset/lazy-actors-wink.md @@ -0,0 +1,5 @@ +--- +'spectacle': patch +--- + +Fix React 19 compatibility by replacing defaultProps with attrs method From 2c858637a7b8534f21052cdf0e89eefa9d6b8401 Mon Sep 17 00:00:00 2001 From: Ryan Roemer Date: Thu, 25 Sep 2025 09:28:00 -0700 Subject: [PATCH 4/4] Update node versions --- package.json | 2 +- website/package.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index f671a54ea..774f002e4 100644 --- a/package.json +++ b/package.json @@ -262,6 +262,6 @@ } }, "engines": { - "node": ">=18.0.0" + "node": ">=22" } } diff --git a/website/package.json b/website/package.json index 72a4bf9ca..2f200e963 100644 --- a/website/package.json +++ b/website/package.json @@ -3,7 +3,7 @@ "version": "0.2.0", "private": true, "engines": { - "node": "18" + "node": ">=22" }, "devDependencies": { "@docusaurus/core": "^3.3.2",