diff --git a/.changeset/many-toys-rescue.md b/.changeset/many-toys-rescue.md deleted file mode 100644 index 9c25935f1..000000000 --- a/.changeset/many-toys-rescue.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@craftjs/core': patch ---- - -Prevent delay when drop element outside of Editor frame diff --git a/.changeset/olive-countries-approve.md b/.changeset/olive-countries-approve.md deleted file mode 100644 index 647c5e6d4..000000000 --- a/.changeset/olive-countries-approve.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -"@craftjs/core": patch ---- - -Add `hidden` prop to component's prop type diff --git a/examples/basic/components/Header.js b/examples/basic/components/Header.js index e46b8831e..5f22e1f1e 100644 --- a/examples/basic/components/Header.js +++ b/examples/basic/components/Header.js @@ -2,9 +2,9 @@ import { useEditor } from '@craftjs/core'; import { Box, Typography, - Grid, + Grid2 as Grid, Button as MaterialButton, -} from '@material-ui/core'; +} from '@mui/material'; import React from 'react'; import { Button } from './user/Button'; diff --git a/examples/basic/components/SettingsPanel.js b/examples/basic/components/SettingsPanel.js index 885c54cae..7706f1d59 100644 --- a/examples/basic/components/SettingsPanel.js +++ b/examples/basic/components/SettingsPanel.js @@ -5,7 +5,7 @@ import { Grid, Typography, Button as MaterialButton, -} from '@material-ui/core'; +} from '@mui/material'; import React from 'react'; export const SettingsPanel = () => { diff --git a/examples/basic/components/Toolbox.js b/examples/basic/components/Toolbox.js index faa1e06a8..554d62275 100644 --- a/examples/basic/components/Toolbox.js +++ b/examples/basic/components/Toolbox.js @@ -1,10 +1,5 @@ import { useEditor, Element } from '@craftjs/core'; -import { - Box, - Typography, - Grid, - Button as MaterialButton, -} from '@material-ui/core'; +import { Box, Typography, Grid, Button as MaterialButton } from '@mui/material'; import React from 'react'; import { Button } from './user/Button'; diff --git a/examples/basic/components/Topbar.js b/examples/basic/components/Topbar.js index 31cb8a42a..196cb0b51 100644 --- a/examples/basic/components/Topbar.js +++ b/examples/basic/components/Topbar.js @@ -11,7 +11,7 @@ import { DialogActions, TextField, Snackbar, -} from '@material-ui/core'; +} from '@mui/material'; import copy from 'copy-to-clipboard'; import lz from 'lzutf8'; import React, { useState } from 'react'; diff --git a/examples/basic/components/user/Button.js b/examples/basic/components/user/Button.js index 54a4ce16b..434cff7ad 100644 --- a/examples/basic/components/user/Button.js +++ b/examples/basic/components/user/Button.js @@ -6,7 +6,7 @@ import { RadioGroup, Radio, FormControlLabel, -} from '@material-ui/core'; +} from '@mui/material'; import React from 'react'; export const Button = ({ size, variant, color, text, ...props }) => { diff --git a/examples/basic/components/user/Container.js b/examples/basic/components/user/Container.js index 595c1719a..f4b77a975 100644 --- a/examples/basic/components/user/Container.js +++ b/examples/basic/components/user/Container.js @@ -1,8 +1,7 @@ import { useNode } from '@craftjs/core'; -import { Slider } from '@material-ui/core'; -import { Paper, FormControl, FormLabel } from '@material-ui/core'; -import ColorPicker from 'material-ui-color-picker'; +import { Slider, Paper, FormControl, FormLabel } from '@mui/material'; import React from 'react'; +import { HexColorPicker } from 'react-colorful'; export const Container = ({ background, padding, children, ...props }) => { const { @@ -33,9 +32,9 @@ export const ContainerSettings = () => {
Background - { setProp((props) => (props.background = color), 500); }} diff --git a/examples/basic/components/user/Text.js b/examples/basic/components/user/Text.js index 4bf332685..cd2376874 100644 --- a/examples/basic/components/user/Text.js +++ b/examples/basic/components/user/Text.js @@ -1,5 +1,5 @@ import { useNode } from '@craftjs/core'; -import { Slider, FormControl, FormLabel } from '@material-ui/core'; +import { Slider, FormControl, FormLabel } from '@mui/material'; import React, { useState, useEffect } from 'react'; import ContentEditable from 'react-contenteditable'; diff --git a/examples/basic/next.config.js b/examples/basic/next.config.js index 3f8252f79..523f24052 100644 --- a/examples/basic/next.config.js +++ b/examples/basic/next.config.js @@ -1,3 +1,4 @@ module.exports = { + output: 'export', assetPrefix: process.env.NODE_ENV === 'production' ? '/examples/basic' : '/', }; diff --git a/examples/basic/package.json b/examples/basic/package.json index 787f86c62..48603adf4 100644 --- a/examples/basic/package.json +++ b/examples/basic/package.json @@ -4,24 +4,27 @@ "private": true, "dependencies": { "@craftjs/core": "workspace:*", - "@material-ui/core": "4.5.2", + "@emotion/react": "^11.14.0", + "@emotion/styled": "^11.14.0", + "@mui/material": "^6.4.3", "clsx": "latest", "copy-to-clipboard": "3.2.0", "lzutf8": "0.5.5", - "material-ui-color-picker": "3.2.0", - "next": "13.1.6", + "next": "15.1.6", "prop-types": "latest", - "react": "18.2.0", + "react": "19.0.0", + "react-colorful": "^5.6.1", "react-contenteditable": "3.3.3", - "react-dom": "18.2.0" + "react-dom": "19.0.0" }, "scripts": { "start": "next dev -p 3002", "build": "next build", - "export": "next export", "clean": "rimraf lib .next out dist" }, "devDependencies": { + "@types/react": "19.0.8", + "@types/react-dom": "19.0.3", "cross-env": "6.0.3" } } diff --git a/examples/basic/pages/_app.js b/examples/basic/pages/_app.js index 15caec75c..747fe432e 100644 --- a/examples/basic/pages/_app.js +++ b/examples/basic/pages/_app.js @@ -1,5 +1,5 @@ -import CssBaseline from '@material-ui/core/CssBaseline'; -import { ThemeProvider } from '@material-ui/core/styles'; +import CssBaseline from '@mui/material/CssBaseline'; +import { ThemeProvider } from '@mui/material/styles'; import App from 'next/app'; import Head from 'next/head'; import React from 'react'; diff --git a/examples/basic/pages/_document.js b/examples/basic/pages/_document.js index 76eab8b40..8e6f419b1 100644 --- a/examples/basic/pages/_document.js +++ b/examples/basic/pages/_document.js @@ -1,10 +1,36 @@ -import { ServerStyleSheets } from '@material-ui/core/styles'; import Document, { Html, Head, Main, NextScript } from 'next/document'; import React from 'react'; +import { ServerStyleSheet } from 'styled-components'; import theme from '../src/theme'; export default class MyDocument extends Document { + static async getInitialProps(ctx) { + const sheet = new ServerStyleSheet(); + const originalRenderPage = ctx.renderPage; + + try { + ctx.renderPage = () => + originalRenderPage({ + enhanceApp: (App) => (props) => + sheet.collectStyles(), + }); + + const initialProps = await Document.getInitialProps(ctx); + return { + ...initialProps, + styles: ( + <> + {initialProps.styles} + {sheet.getStyleElement()} + + ), + }; + } finally { + sheet.seal(); + } + } + render() { return ( @@ -29,47 +55,3 @@ export default class MyDocument extends Document { ); } } - -MyDocument.getInitialProps = async (ctx) => { - // Resolution order - // - // On the server: - // 1. app.getInitialProps - // 2. page.getInitialProps - // 3. document.getInitialProps - // 4. app.render - // 5. page.render - // 6. document.render - // - // On the server with error: - // 1. document.getInitialProps - // 2. app.render - // 3. page.render - // 4. document.render - // - // On the client - // 1. app.getInitialProps - // 2. page.getInitialProps - // 3. app.render - // 4. page.render - - // Render app and page and get the context of the page with collected side effects. - const sheets = new ServerStyleSheets(); - const originalRenderPage = ctx.renderPage; - - ctx.renderPage = () => - originalRenderPage({ - enhanceApp: (App) => (props) => sheets.collect(), - }); - - const initialProps = await Document.getInitialProps(ctx); - - return { - ...initialProps, - // Styles fragment is rendered after the app and page rendering finish. - styles: [ - ...React.Children.toArray(initialProps.styles), - sheets.getStyleElement(), - ], - }; -}; diff --git a/examples/basic/pages/about.js b/examples/basic/pages/about.js deleted file mode 100644 index 35ef8bbc8..000000000 --- a/examples/basic/pages/about.js +++ /dev/null @@ -1,45 +0,0 @@ -import Box from '@material-ui/core/Box'; -import Button from '@material-ui/core/Button'; -import Container from '@material-ui/core/Container'; -import MuiLink from '@material-ui/core/Link'; -import Typography from '@material-ui/core/Typography'; -import React from 'react'; - -import Link from '../src/Link'; -import ProTip from '../src/ProTip'; - -function Copyright() { - return ( - - {'Copyright © '} - - Your Website - {' '} - {new Date().getFullYear()} - {'.'} - - ); -} - -export default function About() { - return ( - - - - Next.js example - - - - - - - ); -} diff --git a/examples/basic/pages/index.js b/examples/basic/pages/index.js index 84f9d81e2..f72328310 100644 --- a/examples/basic/pages/index.js +++ b/examples/basic/pages/index.js @@ -1,5 +1,5 @@ import { Editor, Frame, Element } from '@craftjs/core'; -import { Typography, Paper, Grid, makeStyles } from '@material-ui/core'; +import { Typography, Paper, Grid2 as Grid } from '@mui/material'; import React from 'react'; import { SettingsPanel } from '../components/SettingsPanel'; @@ -10,15 +10,7 @@ import { Card, CardBottom, CardTop } from '../components/user/Card'; import { Container } from '../components/user/Container'; import { Text } from '../components/user/Text'; -const useStyles = makeStyles(() => ({ - root: { - padding: 0, - background: 'rgb(252, 253, 253)', - }, -})); export default function App() { - const classes = useStyles(); - return (
@@ -36,7 +28,7 @@ export default function App() { > - + - - + + diff --git a/examples/basic/src/Link.js b/examples/basic/src/Link.js index 358d4df66..cb18ee015 100644 --- a/examples/basic/src/Link.js +++ b/examples/basic/src/Link.js @@ -1,5 +1,5 @@ /* eslint-disable jsx-a11y/anchor-has-content */ -import MuiLink from '@material-ui/core/Link'; +import { Link as MuiLink } from '@mui/material'; import clsx from 'clsx'; import NextLink from 'next/link'; import { useRouter } from 'next/router'; diff --git a/examples/basic/src/ProTip.js b/examples/basic/src/ProTip.js deleted file mode 100644 index f9e7bb7c1..000000000 --- a/examples/basic/src/ProTip.js +++ /dev/null @@ -1,37 +0,0 @@ -import Link from '@material-ui/core/Link'; -import SvgIcon from '@material-ui/core/SvgIcon'; -import Typography from '@material-ui/core/Typography'; -import { makeStyles } from '@material-ui/core/styles'; -import React from 'react'; - -function LightBulbIcon(props) { - return ( - - - - ); -} - -const useStyles = makeStyles((theme) => ({ - root: { - margin: theme.spacing(6, 0, 3), - }, - lightBulb: { - verticalAlign: 'middle', - marginRight: theme.spacing(1), - }, -})); - -export default function ProTip() { - const classes = useStyles(); - return ( - - - Pro tip: See more{' '} - - templates - {' '} - on the Material-UI documentation. - - ); -} diff --git a/examples/basic/src/theme.js b/examples/basic/src/theme.js index badb89510..fce19f4c2 100644 --- a/examples/basic/src/theme.js +++ b/examples/basic/src/theme.js @@ -1,8 +1,7 @@ -import { red } from '@material-ui/core/colors'; -import { createMuiTheme } from '@material-ui/core/styles'; +import { createTheme } from '@mui/material/styles'; // Create a theme instance. -const theme = createMuiTheme({ +const theme = createTheme({ palette: { primary: { main: '#556cd6', @@ -10,9 +9,6 @@ const theme = createMuiTheme({ secondary: { main: '#19857b', }, - error: { - main: red.A400, - }, background: { default: '#fff', }, diff --git a/examples/landing/components/editor/RenderNode.tsx b/examples/landing/components/editor/RenderNode.tsx index 8f849016c..945d2e993 100644 --- a/examples/landing/components/editor/RenderNode.tsx +++ b/examples/landing/components/editor/RenderNode.tsx @@ -1,8 +1,8 @@ import { useNode, useEditor } from '@craftjs/core'; import { ROOT_NODE } from '@craftjs/utils'; -import React, { useEffect, useRef, useCallback } from 'react'; +import * as React 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'; @@ -57,16 +57,16 @@ export const RenderNode = ({ render }) => { props: node.data.props, })); - const currentRef = useRef(); + const currentRef = React.useRef(null); - useEffect(() => { + React.useEffect(() => { if (dom) { if (isActive || isHover) dom.classList.add('component-selected'); else dom.classList.remove('component-selected'); } }, [dom, isActive, isHover]); - const getPos = useCallback((dom: HTMLElement) => { + const getPos = React.useCallback((dom: HTMLElement) => { const { top, left, bottom } = dom ? dom.getBoundingClientRect() : { top: 0, left: 0, bottom: 0 }; @@ -76,16 +76,19 @@ export const RenderNode = ({ render }) => { }; }, []); - const scroll = useCallback(() => { + const scroll = React.useCallback(() => { const { current: currentDOM } = currentRef; - if (!currentDOM) return; + if (!currentDOM) { + return; + } + const { top, left } = getPos(dom); currentDOM.style.top = top; currentDOM.style.left = left; }, [dom, getPos]); - useEffect(() => { + React.useEffect(() => { document .querySelector('.craftjs-renderer') .addEventListener('scroll', scroll); @@ -112,8 +115,13 @@ export const RenderNode = ({ render }) => { >

{name}

{moveable ? ( - - + { + drag(dom); + }} + > + ) : null} {id !== ROOT_NODE && ( @@ -123,7 +131,7 @@ export const RenderNode = ({ render }) => { actions.selectNode(parent); }} > - + )} {deletable ? ( @@ -134,7 +142,7 @@ export const RenderNode = ({ render }) => { actions.delete(id); }} > - + ) : null} , diff --git a/examples/landing/components/editor/Toolbar/ToolbarDropdown.tsx b/examples/landing/components/editor/Toolbar/ToolbarDropdown.tsx index 4d5688e19..1e762a80a 100644 --- a/examples/landing/components/editor/Toolbar/ToolbarDropdown.tsx +++ b/examples/landing/components/editor/Toolbar/ToolbarDropdown.tsx @@ -1,4 +1,4 @@ -import { FormControl, InputLabel, Select } from '@material-ui/core'; +import { FormControl, InputLabel, Select } from '@mui/material'; import React from 'react'; export const ToolbarDropdown = ({ title, value, onChange, children }: any) => { diff --git a/examples/landing/components/editor/Toolbar/ToolbarItem.tsx b/examples/landing/components/editor/Toolbar/ToolbarItem.tsx index 9d04fa294..d13a86580 100644 --- a/examples/landing/components/editor/Toolbar/ToolbarItem.tsx +++ b/examples/landing/components/editor/Toolbar/ToolbarItem.tsx @@ -1,66 +1,10 @@ import { useNode } from '@craftjs/core'; -import { Grid, Slider, RadioGroup } from '@material-ui/core'; -import { withStyles } from '@material-ui/core/styles'; -import React from 'react'; +import { Grid2 as Grid, Slider, RadioGroup } from '@mui/material'; +import * as React from 'react'; import { ToolbarDropdown } from './ToolbarDropdown'; import { ToolbarTextInput } from './ToolbarTextInput'; -const iOSBoxShadow = - '0 3px 1px rgba(0,0,0,0.1),0 4px 8px rgba(0,0,0,0.13),0 0 0 1px rgba(0,0,0,0.02)'; - -const SliderStyled = withStyles({ - root: { - color: '#3880ff', - height: 2, - padding: '5px 0', - width: '100%', - }, - thumb: { - height: 14, - width: 14, - backgroundColor: '#fff', - boxShadow: iOSBoxShadow, - marginTop: -7, - marginLeft: -7, - '&:focus,&:hover,&$active': { - boxShadow: - '0 3px 1px rgba(0,0,0,0.1),0 4px 8px rgba(0,0,0,0.3),0 0 0 1px rgba(0,0,0,0.02)', - // Reset on touch devices, it doesn't add specificity - '@media (hover: none)': { - boxShadow: iOSBoxShadow, - }, - }, - }, - active: {}, - valueLabel: { - left: 'calc(-50% + 11px)', - top: -22, - '& *': { - background: 'transparent', - color: '#000', - }, - }, - track: { - height: 2, - }, - rail: { - height: 2, - opacity: 0.5, - backgroundColor: '#bfbfbf', - }, - mark: { - backgroundColor: '#bfbfbf', - height: 8, - width: 1, - marginTop: -3, - }, - markActive: { - opacity: 1, - backgroundColor: 'currentColor', - }, -})(Slider); - export type ToolbarItemProps = { prefix?: string; label?: string; @@ -88,7 +32,7 @@ export const ToolbarItem = ({ const value = Array.isArray(propValue) ? propValue[index] : propValue; return ( - +
{['text', 'color', 'bg', 'number'].includes(type) ? ( {props.label} ) : null} - { diff --git a/examples/landing/components/editor/Toolbar/ToolbarRadio.tsx b/examples/landing/components/editor/Toolbar/ToolbarRadio.tsx index 331e2acfd..21a2f18c0 100644 --- a/examples/landing/components/editor/Toolbar/ToolbarRadio.tsx +++ b/examples/landing/components/editor/Toolbar/ToolbarRadio.tsx @@ -1,64 +1,25 @@ -import { FormControlLabel, Radio } from '@material-ui/core'; -import { makeStyles } from '@material-ui/core/styles'; -import classnames from 'classnames'; +import { FormControlLabel, Radio } from '@mui/material'; import React from 'react'; -const useStyles = makeStyles({ - icon: { - borderRadius: '100%', - width: 15, - height: 15, - background: 'transparent', - position: 'relative', - padding: '3px', - border: '2px solid rgb(142, 142, 142)', - transition: '0.4s cubic-bezier(0.19, 1, 0.22, 1)', - }, - checkedIcon: { - background: 'rgb(19, 115, 230)', - borderColor: 'transparent', - '&:before': { - content: '""', - display: 'block', - width: '100%', - height: '100%', - borderRadius: '100%', - background: '#fff', - }, - }, -}); - // Inspired by blueprintjs function StyledRadio(props) { - const classes = useStyles({}); - return ( - } - icon={} + size="small" + sx={{ + '&.Mui-checked': { + color: 'rgb(19, 115, 230)', + }, + }} {...props} /> ); } -const useLabelStyles = makeStyles({ - label: { - fontSize: '15px', - }, -}); - export const ToolbarRadio = ({ value, label }: any) => { - const classes = useLabelStyles({}); return ( - } - label={label} - /> + } label={label} /> ); }; diff --git a/examples/landing/components/editor/Toolbar/ToolbarSection.tsx b/examples/landing/components/editor/Toolbar/ToolbarSection.tsx index 429891bb9..c67bdcf17 100644 --- a/examples/landing/components/editor/Toolbar/ToolbarSection.tsx +++ b/examples/landing/components/editor/Toolbar/ToolbarSection.tsx @@ -1,46 +1,13 @@ import { useNode } from '@craftjs/core'; import { - ExpansionPanel, - ExpansionPanelDetails, - ExpansionPanelSummary, - Grid, - Divider, -} from '@material-ui/core'; -import { makeStyles } from '@material-ui/core/styles'; + Accordion, + AccordionDetails, + AccordionSummary, + Grid2 as Grid, +} from '@mui/material'; import React from 'react'; -const usePanelStyles = makeStyles((_) => ({ - root: { - background: 'transparent', - boxShadow: 'none', - '&:before': { - backgroundColor: 'rgba(0, 0, 0, 0.05)', - }, - '&.Mui-expanded': { - margin: '0 0', - minHeight: '40px', - '&:before': { - opacity: '1', - }, - '& + .MuiExpansionPanel-root:before ': { - display: 'block', - }, - }, - }, -})); - -const useSummaryStyles = makeStyles((_) => ({ - root: { - 'min-height': '36px', - padding: 0, - }, - content: { - margin: '0px', - }, -})); export const ToolbarSection = ({ title, props, summary, children }: any) => { - const panelClasses = usePanelStyles({}); - const summaryClasses = useSummaryStyles({}); const { nodeProps } = useNode((node) => ({ nodeProps: props && @@ -50,17 +17,41 @@ export const ToolbarSection = ({ title, props, summary, children }: any) => { }, {}), })); return ( - - + +
- +
{title}
{summary && props ? ( - +
{summary( props.reduce((acc: any, key: any) => { @@ -73,13 +64,12 @@ export const ToolbarSection = ({ title, props, summary, children }: any) => { ) : null}
-
- - + + {children} - -
+ + ); }; diff --git a/examples/landing/components/editor/Toolbar/ToolbarTextInput.tsx b/examples/landing/components/editor/Toolbar/ToolbarTextInput.tsx index 753a72a66..9ee3f702f 100644 --- a/examples/landing/components/editor/Toolbar/ToolbarTextInput.tsx +++ b/examples/landing/components/editor/Toolbar/ToolbarTextInput.tsx @@ -1,49 +1,8 @@ -import { TextField, makeStyles, InputAdornment } from '@material-ui/core'; -import React, { useEffect } from 'react'; +import { TextField, InputAdornment } from '@mui/material'; +import * as React from 'react'; import { useState } from 'react'; import { ChromePicker } from 'react-color'; -const useStyles = makeStyles({ - root: { - padding: 0, - width: '100%', - // background:"#efeff1", - borderRadius: '100px', - border: 'none', - margin: 0, - marginTop: 7, - position: 'relative', - }, - input: { - background: '#efeff1', - borderRadius: '100px', - fontSize: '12px', - paddingLeft: '28px', - paddingBottom: '8px', - paddingTop: '8px', - margin: 0, - }, // a style rule - // notchedOutline: { - // borderColor:'transparent', - // borderRadius: "100px" - // } -}); - -const useLabelStyles = makeStyles({ - root: { - color: 'rgb(128,128,128)', - }, - formControl: { - fontSize: '18px', - borderRadius: '100px', - paddingLeft: '0px', - paddingTop: '3px', - marginBottom: '3px', - position: 'relative', - left: '-12px', - }, // a style rule -}); - export type ToolbarTextInputProps = { prefix?: string; label?: string; @@ -61,9 +20,8 @@ export const ToolbarTextInput = ({ }: ToolbarTextInputProps) => { const [internalValue, setInternalValue] = useState(value); const [active, setActive] = useState(false); - const classes = useStyles({}); - const labelClasses = useLabelStyles({}); - useEffect(() => { + + React.useEffect(() => { let val = value; if (type === 'color' || type === 'bg') val = `rgba(${Object.values(value)})`; @@ -115,9 +73,25 @@ export const ToolbarTextInput = ({ setInternalValue(e.target.value); }} margin="dense" - variant="filled" + variant="standard" + sx={{ + padding: 0, + width: '100%', + background: 'transparent', + borderRadius: '100px', + border: 'none', + margin: 0, + marginTop: 7, + position: 'relative', + '.MuiInputBase-input': { + background: '#e5e5e5', + borderRadius: '100px', + fontSize: '0.9rem', + position: 'relative', + paddingLeft: '28px', + }, + }} InputProps={{ - classes, disableUnderline: true, startAdornment: ['color', 'bg'].includes(type) ? (
{ actions.setOptions((options) => (options.enabled = !enabled)); }} > - {enabled ? : } + {enabled ? ( + + ) : ( + + )} {enabled ? 'Finish Editing' : 'Edit'}
diff --git a/examples/landing/components/editor/Viewport/Sidebar/SidebarItem.tsx b/examples/landing/components/editor/Viewport/Sidebar/SidebarItem.tsx index b0b37bad1..08bb5191c 100644 --- a/examples/landing/components/editor/Viewport/Sidebar/SidebarItem.tsx +++ b/examples/landing/components/editor/Viewport/Sidebar/SidebarItem.tsx @@ -1,23 +1,28 @@ +import classNames from 'classnames'; 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; + border-bottom: 1px solid transparent; + border-color: ${(props) => (props.$visible ? '#eee' : 'transparent')}; `; -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; + width: 10px; + height: 10px; } `; @@ -28,6 +33,7 @@ export type SidebarItemProps = { visible?: boolean; onChange?: (bool: boolean) => void; children?: React.ReactNode; + className?: string; }; const HeaderDiv = styled.div` @@ -45,9 +51,14 @@ export const SidebarItem: React.FC = ({ children, height, onChange, + className, }) => { return ( - + { if (onChange) onChange(!visible); @@ -60,8 +71,8 @@ export const SidebarItem: React.FC = ({ {React.createElement(icon, { className: 'w-4 h-4 mr-2' })}

{title}

- - + + {visible ? ( diff --git a/examples/landing/components/editor/Viewport/Sidebar/index.tsx b/examples/landing/components/editor/Viewport/Sidebar/index.tsx index ffe7c42aa..55b6feed0 100644 --- a/examples/landing/components/editor/Viewport/Sidebar/index.tsx +++ b/examples/landing/components/editor/Viewport/Sidebar/index.tsx @@ -1,7 +1,7 @@ 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'; @@ -9,11 +9,11 @@ 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 ( - +
{ height={!layersVisible ? 'full' : '55%'} visible={toolbarVisible} onChange={(val) => setToolbarVisible(val)} + className="overflow-auto" > diff --git a/examples/landing/components/editor/Viewport/Toolbox.tsx b/examples/landing/components/editor/Viewport/Toolbox.tsx index f1a2e14e8..8431bbd1f 100644 --- a/examples/landing/components/editor/Viewport/Toolbox.tsx +++ b/examples/landing/components/editor/Viewport/Toolbox.tsx @@ -1,7 +1,7 @@ import { Element, useEditor } from '@craftjs/core'; -import { Tooltip } from '@material-ui/core'; +import { Tooltip } from '@mui/material'; 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,25 @@ 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 }>` + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + svg { - width: 22px; - height: 22px; + width: 28px; + height: 28px; fill: #707070; } ${(props) => - props.move && + props.$move && ` cursor: move; `} @@ -41,12 +46,12 @@ export const Toolbox = () => { return ( -
+
+ ref={(ref) => { create( ref, { height="300px" width="300px" > - ) - } + ); + }} > - - + +
- create(ref, ) - } + ref={(ref) => { + create( + ref, + + ); + }} > - - + +
-
create(ref,
-
create(ref,