Skip to content

Commit 48cb5cb

Browse files
pixel-toys-chris-evanspixel-toys-chris-evans
authored
fix: update styled-components (#707)
1 parent 39ea4ab commit 48cb5cb

File tree

14 files changed

+209
-236
lines changed

14 files changed

+209
-236
lines changed

‎.changeset/red-cameras-burn.md

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@craftjs/layers': patch
3+
---
4+
5+
Updated 'styled-components' from 4.x.x to 6.x.x

‎examples/landing/components/editor/RenderNode.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { useNode, useEditor } from '@craftjs/core';
22
import { ROOT_NODE } from '@craftjs/utils';
33
import React, { useEffect, useRef, useCallback } from 'react';
44
import ReactDOM from 'react-dom';
5-
import styled from 'styled-components';
5+
import { styled } from 'styled-components';
66

77
import ArrowUp from '../../public/icons/arrow-up.svg';
88
import Delete from '../../public/icons/delete.svg';

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { useEditor } from '@craftjs/core';
22
import { Tooltip } from '@material-ui/core';
33
import cx from 'classnames';
44
import React from 'react';
5-
import styled from 'styled-components';
5+
import { styled } from 'styled-components';
66

77
import Checkmark from '../../../public/icons/check.svg';
88
import Customize from '../../../public/icons/customize.svg';

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

+15-9
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,22 @@
11
import React from 'react';
2-
import styled from 'styled-components';
2+
import { styled } from 'styled-components';
33

44
import Arrow from '../../../../public/icons/arrow.svg';
55

6-
const SidebarItemDiv = styled.div<{ visible?: boolean; height?: string }>`
6+
const SidebarItemDiv = styled.div<{ $visible?: boolean; $height?: string }>`
77
height: ${(props) =>
8-
props.visible && props.height && props.height !== 'full'
9-
? `${props.height}`
8+
props.$visible && props.$height && props.$height !== 'full'
9+
? `${props.$height}`
1010
: 'auto'};
1111
flex: ${(props) =>
12-
props.visible && props.height && props.height === 'full' ? `1` : 'unset'};
12+
props.$visible && props.$height && props.$height === 'full'
13+
? `1`
14+
: 'unset'};
1315
color: #545454;
1416
`;
1517

16-
const Chevron = styled.a<{ visible: boolean }>`
17-
transform: rotate(${(props) => (props.visible ? 180 : 0)}deg);
18+
const Chevron = styled.a<{ $visible: boolean }>`
19+
transform: rotate(${(props) => (props.$visible ? 180 : 0)}deg);
1820
svg {
1921
width: 8px;
2022
height: 8px;
@@ -47,7 +49,11 @@ export const SidebarItem: React.FC<SidebarItemProps> = ({
4749
onChange,
4850
}) => {
4951
return (
50-
<SidebarItemDiv visible={visible} height={height} className="flex flex-col">
52+
<SidebarItemDiv
53+
$visible={visible}
54+
$height={height}
55+
className="flex flex-col"
56+
>
5157
<HeaderDiv
5258
onClick={() => {
5359
if (onChange) onChange(!visible);
@@ -60,7 +66,7 @@ export const SidebarItem: React.FC<SidebarItemProps> = ({
6066
{React.createElement(icon, { className: 'w-4 h-4 mr-2' })}
6167
<h2 className="text-xs uppercase">{title}</h2>
6268
</div>
63-
<Chevron visible={visible}>
69+
<Chevron $visible={visible}>
6470
<Arrow />
6571
</Chevron>
6672
</HeaderDiv>

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

+5-5
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,19 @@
11
import { useEditor } from '@craftjs/core';
22
import { Layers } from '@craftjs/layers';
33
import React, { useState } from 'react';
4-
import styled from 'styled-components';
4+
import { styled } from 'styled-components';
55

66
import { SidebarItem } from './SidebarItem';
77

88
import CustomizeIcon from '../../../../public/icons/customize.svg';
99
import LayerIcon from '../../../../public/icons/layers.svg';
1010
import { Toolbar } from '../../Toolbar';
1111

12-
export const SidebarDiv = styled.div<{ enabled: boolean }>`
12+
export const SidebarDiv = styled.div<{ $enabled: boolean }>`
1313
width: 280px;
14-
opacity: ${(props) => (props.enabled ? 1 : 0)};
14+
opacity: ${(props) => (props.$enabled ? 1 : 0)};
1515
background: #fff;
16-
margin-right: ${(props) => (props.enabled ? 0 : -280)}px;
16+
margin-right: ${(props) => (props.$enabled ? 0 : -280)}px;
1717
`;
1818

1919
const CarbonAdsContainer = styled.div`
@@ -143,7 +143,7 @@ export const Sidebar = () => {
143143
}));
144144

145145
return (
146-
<SidebarDiv enabled={enabled} className="sidebar transition bg-white w-2">
146+
<SidebarDiv $enabled={enabled} className="sidebar transition bg-white w-2">
147147
<div className="flex flex-col h-full">
148148
<SidebarItem
149149
icon={CustomizeIcon}

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

+11-11
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { Element, useEditor } from '@craftjs/core';
22
import { Tooltip } from '@material-ui/core';
33
import React from 'react';
4-
import styled from 'styled-components';
4+
import { styled } from 'styled-components';
55

66
import ButtonSvg from '../../../public/icons/toolbox/button.svg';
77
import SquareSvg from '../../../public/icons/toolbox/rectangle.svg';
@@ -12,20 +12,20 @@ import { Container } from '../../selectors/Container';
1212
import { Text } from '../../selectors/Text';
1313
import { Video } from '../../selectors/Video';
1414

15-
const ToolboxDiv = styled.div<{ enabled: boolean }>`
15+
const ToolboxDiv = styled.div<{ $enabled: boolean }>`
1616
transition: 0.4s cubic-bezier(0.19, 1, 0.22, 1);
17-
${(props) => (!props.enabled ? `width: 0;` : '')}
18-
${(props) => (!props.enabled ? `opacity: 0;` : '')}
17+
${(props) => (!props.$enabled ? `width: 0;` : '')}
18+
${(props) => (!props.$enabled ? `opacity: 0;` : '')}
1919
`;
2020

21-
const Item = styled.a<{ move?: boolean }>`
21+
const Item = styled.a<{ $move?: boolean }>`
2222
svg {
2323
width: 22px;
2424
height: 22px;
2525
fill: #707070;
2626
}
2727
${(props) =>
28-
props.move &&
28+
props.$move &&
2929
`
3030
cursor: move;
3131
`}
@@ -41,7 +41,7 @@ export const Toolbox = () => {
4141

4242
return (
4343
<ToolboxDiv
44-
enabled={enabled && enabled}
44+
$enabled={enabled && enabled}
4545
className="toolbox transition w-12 h-full flex flex-col bg-white"
4646
>
4747
<div className="flex flex-1 flex-col items-center pt-3">
@@ -61,7 +61,7 @@ export const Toolbox = () => {
6161
}
6262
>
6363
<Tooltip title="Container" placement="right">
64-
<Item className="m-2 pb-2 cursor-pointer block" move>
64+
<Item className="m-2 pb-2 cursor-pointer block" $move>
6565
<SquareSvg />
6666
</Item>
6767
</Tooltip>
@@ -72,21 +72,21 @@ export const Toolbox = () => {
7272
}
7373
>
7474
<Tooltip title="Text" placement="right">
75-
<Item className="m-2 pb-2 cursor-pointer block" move>
75+
<Item className="m-2 pb-2 cursor-pointer block" $move>
7676
<TypeSvg />
7777
</Item>
7878
</Tooltip>
7979
</div>
8080
<div ref={(ref) => create(ref, <Button />)}>
8181
<Tooltip title="Button" placement="right">
82-
<Item className="m-2 pb-2 cursor-pointer block" move>
82+
<Item className="m-2 pb-2 cursor-pointer block" $move>
8383
<ButtonSvg />
8484
</Item>
8585
</Tooltip>
8686
</div>
8787
<div ref={(ref) => create(ref, <Video />)}>
8888
<Tooltip title="Video" placement="right">
89-
<Item className="m-2 pb-2 cursor-pointer block" move>
89+
<Item className="m-2 pb-2 cursor-pointer block" $move>
9090
<YoutubeSvg />
9191
</Item>
9292
</Tooltip>

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

+28-13
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { UserComponent, useNode } from '@craftjs/core';
22
import cx from 'classnames';
33
import React from 'react';
4-
import styled from 'styled-components';
4+
import { styled } from 'styled-components';
55

66
import { ButtonSettings } from './ButtonSettings';
77

@@ -16,40 +16,55 @@ type ButtonProps = {
1616
textComponent?: any;
1717
};
1818

19-
const StyledButton = styled.button<ButtonProps>`
19+
// N.B: Alias required StyledComponent props for Transient Props; https://styled-components.com/docs/api#transient-props
20+
type StyledButtonProps = {
21+
$background?: Record<'r' | 'g' | 'b' | 'a', number>;
22+
$buttonStyle?: string;
23+
$margin?: any[];
24+
};
25+
26+
const StyledButton = styled.button<StyledButtonProps>`
2027
background: ${(props) =>
21-
props.buttonStyle === 'full'
22-
? `rgba(${Object.values(props.background)})`
28+
props.$buttonStyle === 'full'
29+
? `rgba(${Object.values(props.$background)})`
2330
: 'transparent'};
2431
border: 2px solid transparent;
2532
border-color: ${(props) =>
26-
props.buttonStyle === 'outline'
27-
? `rgba(${Object.values(props.background)})`
33+
props.$buttonStyle === 'outline'
34+
? `rgba(${Object.values(props.$background)})`
2835
: 'transparent'};
29-
margin: ${({ margin }) =>
30-
`${margin[0]}px ${margin[1]}px ${margin[2]}px ${margin[3]}px`};
36+
margin: ${({ $margin }) =>
37+
`${$margin[0]}px ${$margin[1]}px ${$margin[2]}px ${$margin[3]}px`};
3138
`;
3239

33-
export const Button: UserComponent<ButtonProps> = (props: any) => {
40+
export const Button: UserComponent<ButtonProps> = ({
41+
text,
42+
textComponent,
43+
color,
44+
buttonStyle,
45+
background,
46+
margin,
47+
}: ButtonProps) => {
3448
const {
3549
connectors: { connect },
3650
} = useNode((node) => ({
3751
selected: node.events.selected,
3852
}));
3953

40-
const { text, textComponent, color, ...otherProps } = props;
4154
return (
4255
<StyledButton
4356
ref={connect}
4457
className={cx([
4558
'rounded w-full px-4 py-2',
4659
{
47-
'shadow-lg': props.buttonStyle === 'full',
60+
'shadow-lg': buttonStyle === 'full',
4861
},
4962
])}
50-
{...otherProps}
63+
$buttonStyle={buttonStyle}
64+
$background={background}
65+
$margin={margin}
5166
>
52-
<Text {...textComponent} text={text} color={props.color} />
67+
<Text {...textComponent} text={text} color={color} />
5368
</StyledButton>
5469
);
5570
};

‎examples/landing/components/selectors/Resizer.tsx

+9-9
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import cx from 'classnames';
33
import { debounce } from 'debounce';
44
import { Resizable } from 're-resizable';
55
import React, { useRef, useEffect, useState, useCallback } from 'react';
6-
import styled from 'styled-components';
6+
import { styled } from 'styled-components';
77

88
import {
99
isPercentage,
@@ -12,7 +12,7 @@ import {
1212
getElementDimensions,
1313
} from '../../utils/numToMeasurement';
1414

15-
const Indicators = styled.div<{ bound?: 'row' | 'column' }>`
15+
const Indicators = styled.div<{ $bound?: 'row' | 'column' }>`
1616
position: absolute;
1717
top: 0;
1818
left: 0;
@@ -32,8 +32,8 @@ const Indicators = styled.div<{ bound?: 'row' | 'column' }>`
3232
border: 2px solid #36a9e0;
3333
&:nth-child(1) {
3434
${(props) =>
35-
props.bound
36-
? props.bound === 'row'
35+
props.$bound
36+
? props.$bound === 'row'
3737
? `
3838
left: 50%;
3939
top: -5px;
@@ -52,12 +52,12 @@ const Indicators = styled.div<{ bound?: 'row' | 'column' }>`
5252
&:nth-child(2) {
5353
right: -5px;
5454
top: -5px;
55-
display: ${(props) => (props.bound ? 'none' : 'block')};
55+
display: ${(props) => (props.$bound ? 'none' : 'block')};
5656
}
5757
&:nth-child(3) {
5858
${(props) =>
59-
props.bound
60-
? props.bound === 'row'
59+
props.$bound
60+
? props.$bound === 'row'
6161
? `
6262
left: 50%;
6363
bottom: -5px;
@@ -76,7 +76,7 @@ const Indicators = styled.div<{ bound?: 'row' | 'column' }>`
7676
&:nth-child(4) {
7777
bottom: -5px;
7878
right: -5px;
79-
display: ${(props) => (props.bound ? 'none' : 'block')};
79+
display: ${(props) => (props.$bound ? 'none' : 'block')};
8080
}
8181
}
8282
`;
@@ -257,7 +257,7 @@ export const Resizer = ({ propKey, children, ...props }: any) => {
257257
>
258258
{children}
259259
{active && (
260-
<Indicators bound={fillSpace === 'yes' ? parentDirection : false}>
260+
<Indicators $bound={fillSpace === 'yes' ? parentDirection : false}>
261261
<span></span>
262262
<span></span>
263263
<span></span>

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

+4-4
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,18 @@
11
import { useNode, useEditor } from '@craftjs/core';
22
import React from 'react';
33
import YouTube from 'react-youtube';
4-
import styled from 'styled-components';
4+
import { styled } from 'styled-components';
55

66
import { VideoSettings } from './VideoSettings';
77

8-
const YoutubeDiv = styled.div<any>`
8+
const YoutubeDiv = styled.div<{ $enabled: boolean }>`
99
width: 100%;
1010
height: 100%;
1111
> div {
1212
height: 100%;
1313
}
1414
iframe {
15-
pointer-events: ${(props) => (props.enabled ? 'none' : 'auto')};
15+
pointer-events: ${(props) => (props.$enabled ? 'none' : 'auto')};
1616
// width:100%!important;
1717
// height:100%!important;
1818
}
@@ -31,7 +31,7 @@ export const Video = (props: any) => {
3131
const { videoId } = props;
3232

3333
return (
34-
<YoutubeDiv ref={connect} enabled={enabled}>
34+
<YoutubeDiv ref={connect} $enabled={enabled}>
3535
<YouTube
3636
videoId={videoId}
3737
opts={{

‎examples/landing/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@
2929
"react-loading": "2.0.3",
3030
"react-rnd": "10.1.1",
3131
"react-youtube": "7.9.0",
32-
"styled-components": "4.4.1"
32+
"styled-components": "6.1.13"
3333
},
3434
"devDependencies": {
3535
"@babel/core": "7.7.5",

‎packages/layers/package.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -41,11 +41,11 @@
4141
"devDependencies": {
4242
"@babel/core": "7.7.4",
4343
"@svgr/rollup": "6.5.1",
44-
"styled-components": "4.2.1"
44+
"styled-components": "6.1.13"
4545
},
4646
"peerDependencies": {
4747
"@craftjs/core": ">=0.2.0",
4848
"react": "^16.8.0 || ^17 || ^18",
49-
"styled-components": ">= 4"
49+
"styled-components": ">= 6.1"
5050
}
5151
}

0 commit comments

Comments
 (0)