Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: Update styled-components #707

Merged
merged 3 commits into from
Oct 23, 2024
Merged

fix: Update styled-components #707

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
61a801c
fix: Update styled-components
pixel-toys-chris-evans Oct 16, 2024
ca97341
chore: Add changeset
pixel-toys-chris-evans Oct 16, 2024
c9ad7e8
chore: amend changeset
pixel-toys-chris-evans Oct 22, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions .changeset/red-cameras-burn.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
---
'@craftjs/layers': minor
'@craftjs/core': patch
---
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

  1. I don't think the core package needs an update since the changes here only affect the layers package?
  2. Can you change the @craftjs/layers as a patch update instead? It's not ideal but the reason being we're still in major version 0 and we use the minor version to indicate a breaking change in Craft

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I have made these changes, just fighting with the test-suite. It's suddenly stopped recognising react-hooks when ran through @testing-library/react

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done and pushed 😄


Updated 'styled-components' from 4.x.x to 6.x.x
2 changes: 1 addition & 1 deletion examples/landing/components/editor/RenderNode.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down
2 changes: 1 addition & 1 deletion examples/landing/components/editor/Viewport/Header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down
24 changes: 15 additions & 9 deletions examples/landing/components/editor/Viewport/Sidebar/SidebarItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
Expand Down Expand Up @@ -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);
Expand All @@ -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>
Expand Down
10 changes: 5 additions & 5 deletions examples/landing/components/editor/Viewport/Sidebar/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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`
Expand Down Expand Up @@ -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}
Expand Down
22 changes: 11 additions & 11 deletions examples/landing/components/editor/Viewport/Toolbox.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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;
`}
Expand All @@ -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">
Expand All @@ -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>
Expand All @@ -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>
Expand Down
41 changes: 28 additions & 13 deletions examples/landing/components/selectors/Button/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';

Expand All @@ -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>
);
};
Expand Down
18 changes: 9 additions & 9 deletions examples/landing/components/selectors/Resizer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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;
Expand All @@ -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;
Expand All @@ -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;
Expand All @@ -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')};
}
}
`;
Expand Down Expand Up @@ -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>
Expand Down
8 changes: 4 additions & 4 deletions examples/landing/components/selectors/Video/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
}
Expand All @@ -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={{
Expand Down
2 changes: 1 addition & 1 deletion examples/landing/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
4 changes: 2 additions & 2 deletions packages/layers/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
}
}
Loading
Loading