fix: resolve React 19 compatibility by replacing defaultProps with attrs

.changeset/lazy-actors-wink.md

@@ -0,0 +1,5 @@
+---
+'spectacle': patch
+---
+
+Fix React 19 compatibility by replacing defaultProps with attrs method

package.json

@@ -262,6 +262,6 @@
     }
   },
   "engines": {
-    "node": ">=18.0.0"
+    "node": ">=22"
   }
 }

packages/spectacle/src/components/fullscreen.tsx

@@ -17,7 +17,7 @@ const Container = styled('div')`
 `;
 
 const FullScreen = forwardRef<HTMLDivElement, FSProps>(
-  ({ 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<HTMLDivElement, FSProps>(
 
 FullScreen.displayName = 'Fullscreen';
 
-FullScreen.defaultProps = {
-  color: '#fff',
-  size: 24
-};
-
 export default FullScreen;

packages/spectacle/src/components/image.ts

@@ -8,11 +8,10 @@ type ImageType = FC<
 >;
 
 const Image = styled.img(compose(layout, position)) as ImageType;
-const FullSizeImage = styled(Image) as unknown as ImageType;
-
-FullSizeImage.defaultProps = {
+const FullSizeImage = styled(Image).attrs<SS.LayoutProps>((props) => ({
   maxWidth: '100%',
-  maxHeight: '100%'
-};
+  maxHeight: '100%',
+  ...props
+})) as unknown as ImageType;
 
 export { Image, FullSizeImage };

packages/spectacle/src/components/layout-primitives.ts

@@ -29,25 +29,20 @@ const Box = styled.div<BoxProps>(
   containerPrintStyle
 );
 
-const FlexBox = styled.div<BoxProps & SS.FlexboxProps>(
-  compose(layout, space, position, color, border, flexbox),
-  containerPrintStyle
-);
-
-FlexBox.defaultProps = {
+const FlexBox = styled.div.attrs<BoxProps & SS.FlexboxProps>((props) => ({
   alignItems: 'center',
   justifyContent: 'center',
-  display: 'flex'
-};
-
-type GridProps = SS.LayoutProps & SS.GridProps & SS.PositionProps;
-const Grid = styled.div<GridProps>(
-  compose(layout, grid, position),
+  display: 'flex',
+  ...props
+}))<BoxProps & SS.FlexboxProps>(
+  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<GridProps>((props) => ({
+  display: 'grid',
+  ...props
+}))<GridProps>(compose(layout, grid, position), containerPrintStyle);
 
 export { Box, FlexBox, Grid };

packages/spectacle/src/components/table.tsx

@@ -19,67 +19,52 @@ export type TableProps = ColorProps &
   BorderProps &
   LayoutProps;
 
-const Table = styled.table<TableProps>(
-  compose(color, typography, space, border, layout)
-);
-
-Table.defaultProps = {
+const Table = styled.table.attrs<TableProps>((props) => ({
   color: 'primary',
   fontFamily: 'text',
   fontSize: 'text',
   textAlign: 'left',
   margin: 'listMargin',
-  width: 1
-};
-
-const TableHeader = styled.thead<TableProps>(
-  compose(color, typography, space, border, layout)
-);
+  width: 1,
+  ...props
+}))<TableProps>(compose(color, typography, space, border, layout));
 
-TableHeader.defaultProps = {
+const TableHeader = styled.thead.attrs<TableProps>((props) => ({
   color: 'primary',
   fontFamily: 'text',
   fontSize: 'text',
   fontWeight: 'bold',
   textAlign: 'left',
-  margin: 'listMargin'
-};
-
-const TableBody = styled.tbody<TableProps>(
-  compose(color, typography, space, border, layout)
-);
+  margin: 'listMargin',
+  ...props
+}))<TableProps>(compose(color, typography, space, border, layout));
 
-TableBody.defaultProps = {
+const TableBody = styled.tbody.attrs<TableProps>((props) => ({
   color: 'primary',
   fontFamily: 'text',
   fontSize: 'text',
   textAlign: 'left',
   margin: 'listMargin',
-  width: 1
-};
+  width: 1,
+  ...props
+}))<TableProps>(compose(color, typography, space, border, layout));
 
-const TableRow = styled.tr<TableProps>(
-  compose(color, typography, space, border, layout)
-);
-
-TableRow.defaultProps = {
+const TableRow = styled.tr.attrs<TableProps>((props) => ({
   color: 'primary',
   fontFamily: 'text',
   fontSize: 'text',
   textAlign: 'left',
-  margin: 'listMargin'
-};
-
-const TableCell = styled.td<TableProps>(
-  compose(color, typography, space, border, layout)
-);
+  margin: 'listMargin',
+  ...props
+}))<TableProps>(compose(color, typography, space, border, layout));
 
-TableCell.defaultProps = {
+const TableCell = styled.td.attrs<TableProps>((props) => ({
   color: 'primary',
   fontFamily: 'text',
   fontSize: 'text',
   textAlign: 'left',
-  margin: 'listMargin'
-};
+  margin: 'listMargin',
+  ...props
+}))<TableProps>(compose(color, typography, space, border, layout));
 
 export { Table, TableCell, TableRow, TableHeader, TableBody };

packages/spectacle/src/components/typography.tsx

@@ -25,101 +25,101 @@ type DecorationProps = Pick<CSSObject, 'textDecoration'>;
 
 export type CommonTypographyProps = ColorProps & TypographyProps & SpaceProps;
 
-const Text = styled.div<CommonTypographyProps>(
-  compose(color, typography, space)
-);
-Text.defaultProps = {
+const Text = styled.div.attrs<CommonTypographyProps>((props) => ({
   color: 'primary',
   fontFamily: 'text',
   fontSize: 'text',
   textAlign: 'left',
   padding: 0,
-  margin: 0
-};
+  margin: 0,
+  ...props
+}))<CommonTypographyProps>(compose(color, typography, space));
 
-const CodeSpan = styled.code<CommonTypographyProps>(
-  compose(color, typography, space)
-);
-CodeSpan.defaultProps = {
+const CodeSpan = styled.code.attrs<CommonTypographyProps>((props) => ({
   fontFamily: 'monospace',
-  fontSize: 'text'
-};
-
-const Link = styled.a<CommonTypographyProps & DecorationProps>(
+  fontSize: 'text',
+  ...props
+}))<CommonTypographyProps>(compose(color, typography, space));
+
+const Link = styled.a.attrs<CommonTypographyProps & DecorationProps>(
+  (props) => ({
+    fontFamily: 'text',
+    fontSize: 'text',
+    textDecoration: 'underline',
+    color: 'quaternary',
+    ...props
+  })
+)<CommonTypographyProps & DecorationProps>(
   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<CommonTypographyProps>((props) => ({
   color: 'secondary',
   fontFamily: 'header',
   fontSize: 'h1',
   fontWeight: 'bold',
   textAlign: 'center',
-  margin: 1
-};
+  margin: 1,
+  ...props
+}))<CommonTypographyProps>({});
 
 const Quote = styled(
   Text as FC<
     PropsWithChildren<CommonTypographyProps & Pick<BorderProps, 'borderColor'>>
   >
-)`
+).attrs<CommonTypographyProps & Pick<BorderProps, 'borderColor'>>((props) => ({
+  color: 'primary',
+  fontFamily: 'text',
+  fontSize: 'text',
+  textAlign: 'left',
+  fontStyle: 'italic',
+  padding: '16px 0 16px 8px',
+  margin: 0,
+  ...props
+}))<CommonTypographyProps & Pick<BorderProps, 'borderColor'>>`
   border-left: 1px solid
     ${({ theme, borderColor }) => borderColor || theme.colors.secondary};
 
   div {
     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<CSSObject, 'listStyleType'>;
 
-const OrderedList = styled.ol<CommonTypographyProps & ListStyleProps>(
+const OrderedList = styled.ol.attrs<CommonTypographyProps & ListStyleProps>(
+  (props) => ({
+    color: 'primary',
+    fontFamily: 'text',
+    fontSize: 'text',
+    textAlign: 'left',
+    margin: 0,
+    ...props
+  })
+)<CommonTypographyProps & ListStyleProps>(
   compose(color, typography, space, listStyle)
 );
-OrderedList.defaultProps = {
-  color: 'primary',
-  fontFamily: 'text',
-  fontSize: 'text',
-  textAlign: 'left',
-  margin: 0
-};
 
-const UnorderedList = styled.ul<CommonTypographyProps & ListStyleProps>(
+const UnorderedList = styled.ul.attrs<CommonTypographyProps & ListStyleProps>(
+  (props) => ({
+    color: 'primary',
+    fontFamily: 'text',
+    fontSize: 'text',
+    textAlign: 'left',
+    margin: 0,
+    ...props
+  })
+)<CommonTypographyProps & ListStyleProps>(
   compose(color, typography, space, listStyle)
 );
-UnorderedList.defaultProps = {
-  color: 'primary',
-  fontFamily: 'text',
-  fontSize: 'text',
-  textAlign: 'left',
-  margin: 0
-};
 
-const ListItem = styled.li<CommonTypographyProps>(
-  compose(color, typography, space)
-);
-ListItem.defaultProps = {
-  margin: 0
-};
+const ListItem = styled.li.attrs<CommonTypographyProps>((props) => ({
+  margin: 0,
+  ...props
+}))<CommonTypographyProps>(compose(color, typography, space));
 
 const FitContainer = styled.div`
   width: 100%;
@@ -130,16 +130,14 @@ const FitContainer = styled.div`
 
 const ScalableText = styled(
   Text as FC<CommonTypographyProps & RefAttributes<HTMLDivElement>>
-)<{ scale: number }>`
+).attrs<CommonTypographyProps & { scale?: number }>((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<CommonTypographyProps & HTMLAttributes<HTMLDivElement>>

website/package.json

@@ -3,7 +3,7 @@
   "version": "0.2.0",
   "private": true,
   "engines": {
-    "node": "18"
+    "node": ">=22"
   },
   "devDependencies": {
     "@docusaurus/core": "^3.3.2",