fix: Update styled-components

.changeset/red-cameras-burn.md

@@ -0,0 +1,5 @@
+---
+'@craftjs/layers': patch
+---
+
+Updated 'styled-components' from 4.x.x to 6.x.x

examples/landing/components/editor/RenderNode.tsx

@@ -2,7 +2,7 @@ import { useNode, useEditor } from '@craftjs/core';
 import { ROOT_NODE } from '@craftjs/utils';
 import React, { useEffect, useRef, useCallback } from 'react';
 import ReactDOM from 'react-dom';
-import styled from 'styled-components';
+import { styled } from 'styled-components';
 
 import ArrowUp from '../../public/icons/arrow-up.svg';
 import Delete from '../../public/icons/delete.svg';

examples/landing/components/editor/Viewport/Header.tsx

@@ -2,7 +2,7 @@ import { useEditor } from '@craftjs/core';
 import { Tooltip } from '@material-ui/core';
 import cx from 'classnames';
 import React from 'react';
-import styled from 'styled-components';
+import { styled } from 'styled-components';
 
 import Checkmark from '../../../public/icons/check.svg';
 import Customize from '../../../public/icons/customize.svg';

examples/landing/components/editor/Viewport/Sidebar/SidebarItem.tsx

@@ -1,20 +1,22 @@
 import React from 'react';
-import styled from 'styled-components';
+import { styled } from 'styled-components';
 
 import Arrow from '../../../../public/icons/arrow.svg';
 
-const SidebarItemDiv = styled.div<{ visible?: boolean; height?: string }>`
+const SidebarItemDiv = styled.div<{ $visible?: boolean; $height?: string }>`
   height: ${(props) =>
-    props.visible && props.height && props.height !== 'full'
-      ? `${props.height}`
+    props.$visible && props.$height && props.$height !== 'full'
+      ? `${props.$height}`
       : 'auto'};
   flex: ${(props) =>
-    props.visible && props.height && props.height === 'full' ? `1` : 'unset'};
+    props.$visible && props.$height && props.$height === 'full'
+      ? `1`
+      : 'unset'};
   color: #545454;
 `;
 
-const Chevron = styled.a<{ visible: boolean }>`
-  transform: rotate(${(props) => (props.visible ? 180 : 0)}deg);
+const Chevron = styled.a<{ $visible: boolean }>`
+  transform: rotate(${(props) => (props.$visible ? 180 : 0)}deg);
   svg {
     width: 8px;
     height: 8px;
@@ -47,7 +49,11 @@ export const SidebarItem: React.FC<SidebarItemProps> = ({
   onChange,
 }) => {
   return (
-    <SidebarItemDiv visible={visible} height={height} className="flex flex-col">
+    <SidebarItemDiv
+      $visible={visible}
+      $height={height}
+      className="flex flex-col"
+    >
       <HeaderDiv
         onClick={() => {
           if (onChange) onChange(!visible);
@@ -60,7 +66,7 @@ export const SidebarItem: React.FC<SidebarItemProps> = ({
           {React.createElement(icon, { className: 'w-4 h-4 mr-2' })}
           <h2 className="text-xs uppercase">{title}</h2>
         </div>
-        <Chevron visible={visible}>
+        <Chevron $visible={visible}>
           <Arrow />
         </Chevron>
       </HeaderDiv>

examples/landing/components/editor/Viewport/Sidebar/index.tsx

@@ -1,19 +1,19 @@
 import { useEditor } from '@craftjs/core';
 import { Layers } from '@craftjs/layers';
 import React, { useState } from 'react';
-import styled from 'styled-components';
+import { styled } from 'styled-components';
 
 import { SidebarItem } from './SidebarItem';
 
 import CustomizeIcon from '../../../../public/icons/customize.svg';
 import LayerIcon from '../../../../public/icons/layers.svg';
 import { Toolbar } from '../../Toolbar';
 
-export const SidebarDiv = styled.div<{ enabled: boolean }>`
+export const SidebarDiv = styled.div<{ $enabled: boolean }>`
   width: 280px;
-  opacity: ${(props) => (props.enabled ? 1 : 0)};
+  opacity: ${(props) => (props.$enabled ? 1 : 0)};
   background: #fff;
-  margin-right: ${(props) => (props.enabled ? 0 : -280)}px;
+  margin-right: ${(props) => (props.$enabled ? 0 : -280)}px;
 `;
 
 const CarbonAdsContainer = styled.div`
@@ -143,7 +143,7 @@ export const Sidebar = () => {
   }));
 
   return (
-    <SidebarDiv enabled={enabled} className="sidebar transition bg-white w-2">
+    <SidebarDiv $enabled={enabled} className="sidebar transition bg-white w-2">
       <div className="flex flex-col h-full">
         <SidebarItem
           icon={CustomizeIcon}

examples/landing/components/editor/Viewport/Toolbox.tsx

@@ -1,7 +1,7 @@
 import { Element, useEditor } from '@craftjs/core';
 import { Tooltip } from '@material-ui/core';
 import React from 'react';
-import styled from 'styled-components';
+import { styled } from 'styled-components';
 
 import ButtonSvg from '../../../public/icons/toolbox/button.svg';
 import SquareSvg from '../../../public/icons/toolbox/rectangle.svg';
@@ -12,20 +12,20 @@ import { Container } from '../../selectors/Container';
 import { Text } from '../../selectors/Text';
 import { Video } from '../../selectors/Video';
 
-const ToolboxDiv = styled.div<{ enabled: boolean }>`
+const ToolboxDiv = styled.div<{ $enabled: boolean }>`
   transition: 0.4s cubic-bezier(0.19, 1, 0.22, 1);
-  ${(props) => (!props.enabled ? `width: 0;` : '')}
-  ${(props) => (!props.enabled ? `opacity: 0;` : '')}
+  ${(props) => (!props.$enabled ? `width: 0;` : '')}
+  ${(props) => (!props.$enabled ? `opacity: 0;` : '')}
 `;
 
-const Item = styled.a<{ move?: boolean }>`
+const Item = styled.a<{ $move?: boolean }>`
   svg {
     width: 22px;
     height: 22px;
     fill: #707070;
   }
   ${(props) =>
-    props.move &&
+    props.$move &&
     `
     cursor: move;
   `}
@@ -41,7 +41,7 @@ export const Toolbox = () => {
 
   return (
     <ToolboxDiv
-      enabled={enabled && enabled}
+      $enabled={enabled && enabled}
       className="toolbox transition w-12 h-full flex flex-col bg-white"
     >
       <div className="flex flex-1 flex-col items-center pt-3">
@@ -61,7 +61,7 @@ export const Toolbox = () => {
           }
         >
           <Tooltip title="Container" placement="right">
-            <Item className="m-2 pb-2 cursor-pointer block" move>
+            <Item className="m-2 pb-2 cursor-pointer block" $move>
               <SquareSvg />
             </Item>
           </Tooltip>
@@ -72,21 +72,21 @@ export const Toolbox = () => {
           }
         >
           <Tooltip title="Text" placement="right">
-            <Item className="m-2 pb-2 cursor-pointer block" move>
+            <Item className="m-2 pb-2 cursor-pointer block" $move>
               <TypeSvg />
             </Item>
           </Tooltip>
         </div>
         <div ref={(ref) => create(ref, <Button />)}>
           <Tooltip title="Button" placement="right">
-            <Item className="m-2 pb-2 cursor-pointer block" move>
+            <Item className="m-2 pb-2 cursor-pointer block" $move>
               <ButtonSvg />
             </Item>
           </Tooltip>
         </div>
         <div ref={(ref) => create(ref, <Video />)}>
           <Tooltip title="Video" placement="right">
-            <Item className="m-2 pb-2 cursor-pointer block" move>
+            <Item className="m-2 pb-2 cursor-pointer block" $move>
               <YoutubeSvg />
             </Item>
           </Tooltip>

examples/landing/components/selectors/Button/index.tsx

@@ -1,7 +1,7 @@
 import { UserComponent, useNode } from '@craftjs/core';
 import cx from 'classnames';
 import React from 'react';
-import styled from 'styled-components';
+import { styled } from 'styled-components';
 
 import { ButtonSettings } from './ButtonSettings';
 
@@ -16,40 +16,55 @@ type ButtonProps = {
   textComponent?: any;
 };
 
-const StyledButton = styled.button<ButtonProps>`
+// N.B: Alias required StyledComponent props for Transient Props; https://styled-components.com/docs/api#transient-props
+type StyledButtonProps = {
+  $background?: Record<'r' | 'g' | 'b' | 'a', number>;
+  $buttonStyle?: string;
+  $margin?: any[];
+};
+
+const StyledButton = styled.button<StyledButtonProps>`
   background: ${(props) =>
-    props.buttonStyle === 'full'
-      ? `rgba(${Object.values(props.background)})`
+    props.$buttonStyle === 'full'
+      ? `rgba(${Object.values(props.$background)})`
       : 'transparent'};
   border: 2px solid transparent;
   border-color: ${(props) =>
-    props.buttonStyle === 'outline'
-      ? `rgba(${Object.values(props.background)})`
+    props.$buttonStyle === 'outline'
+      ? `rgba(${Object.values(props.$background)})`
       : 'transparent'};
-  margin: ${({ margin }) =>
-    `${margin[0]}px ${margin[1]}px ${margin[2]}px ${margin[3]}px`};
+  margin: ${({ $margin }) =>
+    `${$margin[0]}px ${$margin[1]}px ${$margin[2]}px ${$margin[3]}px`};
 `;
 
-export const Button: UserComponent<ButtonProps> = (props: any) => {
+export const Button: UserComponent<ButtonProps> = ({
+  text,
+  textComponent,
+  color,
+  buttonStyle,
+  background,
+  margin,
+}: ButtonProps) => {
   const {
     connectors: { connect },
   } = useNode((node) => ({
     selected: node.events.selected,
   }));
 
-  const { text, textComponent, color, ...otherProps } = props;
   return (
     <StyledButton
       ref={connect}
       className={cx([
         'rounded w-full px-4 py-2',
         {
-          'shadow-lg': props.buttonStyle === 'full',
+          'shadow-lg': buttonStyle === 'full',
         },
       ])}
-      {...otherProps}
+      $buttonStyle={buttonStyle}
+      $background={background}
+      $margin={margin}
     >
-      <Text {...textComponent} text={text} color={props.color} />
+      <Text {...textComponent} text={text} color={color} />
     </StyledButton>
   );
 };

examples/landing/components/selectors/Resizer.tsx

@@ -3,7 +3,7 @@ import cx from 'classnames';
 import { debounce } from 'debounce';
 import { Resizable } from 're-resizable';
 import React, { useRef, useEffect, useState, useCallback } from 'react';
-import styled from 'styled-components';
+import { styled } from 'styled-components';
 
 import {
   isPercentage,
@@ -12,7 +12,7 @@ import {
   getElementDimensions,
 } from '../../utils/numToMeasurement';
 
-const Indicators = styled.div<{ bound?: 'row' | 'column' }>`
+const Indicators = styled.div<{ $bound?: 'row' | 'column' }>`
   position: absolute;
   top: 0;
   left: 0;
@@ -32,8 +32,8 @@ const Indicators = styled.div<{ bound?: 'row' | 'column' }>`
     border: 2px solid #36a9e0;
     &:nth-child(1) {
       ${(props) =>
-        props.bound
-          ? props.bound === 'row'
+        props.$bound
+          ? props.$bound === 'row'
             ? `
                 left: 50%;
                 top: -5px;
@@ -52,12 +52,12 @@ const Indicators = styled.div<{ bound?: 'row' | 'column' }>`
     &:nth-child(2) {
       right: -5px;
       top: -5px;
-      display: ${(props) => (props.bound ? 'none' : 'block')};
+      display: ${(props) => (props.$bound ? 'none' : 'block')};
     }
     &:nth-child(3) {
       ${(props) =>
-        props.bound
-          ? props.bound === 'row'
+        props.$bound
+          ? props.$bound === 'row'
             ? `
                 left: 50%;
                 bottom: -5px;
@@ -76,7 +76,7 @@ const Indicators = styled.div<{ bound?: 'row' | 'column' }>`
     &:nth-child(4) {
       bottom: -5px;
       right: -5px;
-      display: ${(props) => (props.bound ? 'none' : 'block')};
+      display: ${(props) => (props.$bound ? 'none' : 'block')};
     }
   }
 `;
@@ -257,7 +257,7 @@ export const Resizer = ({ propKey, children, ...props }: any) => {
     >
       {children}
       {active && (
-        <Indicators bound={fillSpace === 'yes' ? parentDirection : false}>
+        <Indicators $bound={fillSpace === 'yes' ? parentDirection : false}>
           <span></span>
           <span></span>
           <span></span>

examples/landing/components/selectors/Video/index.tsx

@@ -1,18 +1,18 @@
 import { useNode, useEditor } from '@craftjs/core';
 import React from 'react';
 import YouTube from 'react-youtube';
-import styled from 'styled-components';
+import { styled } from 'styled-components';
 
 import { VideoSettings } from './VideoSettings';
 
-const YoutubeDiv = styled.div<any>`
+const YoutubeDiv = styled.div<{ $enabled: boolean }>`
   width: 100%;
   height: 100%;
   > div {
     height: 100%;
   }
   iframe {
-    pointer-events: ${(props) => (props.enabled ? 'none' : 'auto')};
+    pointer-events: ${(props) => (props.$enabled ? 'none' : 'auto')};
     // width:100%!important;
     // height:100%!important;
   }
@@ -31,7 +31,7 @@ export const Video = (props: any) => {
   const { videoId } = props;
 
   return (
-    <YoutubeDiv ref={connect} enabled={enabled}>
+    <YoutubeDiv ref={connect} $enabled={enabled}>
       <YouTube
         videoId={videoId}
         opts={{

examples/landing/package.json

@@ -29,7 +29,7 @@
     "react-loading": "2.0.3",
     "react-rnd": "10.1.1",
     "react-youtube": "7.9.0",
-    "styled-components": "4.4.1"
+    "styled-components": "6.1.13"
   },
   "devDependencies": {
     "@babel/core": "7.7.5",

packages/layers/package.json

@@ -41,11 +41,11 @@
   "devDependencies": {
     "@babel/core": "7.7.4",
     "@svgr/rollup": "6.5.1",
-    "styled-components": "4.2.1"
+    "styled-components": "6.1.13"
   },
   "peerDependencies": {
     "@craftjs/core": ">=0.2.0",
     "react": "^16.8.0 || ^17 || ^18",
-    "styled-components": ">= 4"
+    "styled-components": ">= 6.1"
   }
 }