From b25469ecc7ffb59fa1f43d3664e002c1e2a5bd46 Mon Sep 17 00:00:00 2001 From: Prev Wong Date: Mon, 13 May 2024 18:43:50 +0800 Subject: [PATCH 01/28] fix: make parentId param optional in actions.add() (#635) --- .changeset/sixty-rice-build.md | 5 +++++ packages/core/src/editor/actions.ts | 9 ++------- 2 files changed, 7 insertions(+), 7 deletions(-) create mode 100644 .changeset/sixty-rice-build.md diff --git a/.changeset/sixty-rice-build.md b/.changeset/sixty-rice-build.md new file mode 100644 index 000000000..d1a0eca63 --- /dev/null +++ b/.changeset/sixty-rice-build.md @@ -0,0 +1,5 @@ +--- +'@craftjs/core': patch +--- + +Make parentId param optional in actions.add() diff --git a/packages/core/src/editor/actions.ts b/packages/core/src/editor/actions.ts index 3295d6de4..366d30b99 100644 --- a/packages/core/src/editor/actions.ts +++ b/packages/core/src/editor/actions.ts @@ -84,12 +84,7 @@ const Methods = ( iterateChildren(tree.rootNodeId, parentId); - if (!parentId) { - invariant( - tree.rootNodeId === ROOT_NODE, - 'Cannot add non-root Node without a parent' - ); - + if (!parentId && tree.rootNodeId === ROOT_NODE) { return; } @@ -180,7 +175,7 @@ const Methods = ( * @param parentId * @param index */ - add(nodeToAdd: Node | Node[], parentId: NodeId, index?: number) { + add(nodeToAdd: Node | Node[], parentId?: NodeId, index?: number) { // TODO: Deprecate adding array of Nodes to keep implementation simpler let nodes = [nodeToAdd]; if (Array.isArray(nodeToAdd)) { From 4fa9b4654c75f75dbcb4fff0a7abc61b94984319 Mon Sep 17 00:00:00 2001 From: Traveller <117014547+Traveller23@users.noreply.github.com> Date: Thu, 16 May 2024 18:56:52 +0800 Subject: [PATCH 02/28] fix: improve resolver performance (#623) --- .changeset/fluffy-days-act.md | 5 ++ packages/core/src/utils/resolveComponent.ts | 68 ++++++++++++++------- 2 files changed, 50 insertions(+), 23 deletions(-) create mode 100644 .changeset/fluffy-days-act.md diff --git a/.changeset/fluffy-days-act.md b/.changeset/fluffy-days-act.md new file mode 100644 index 000000000..9999cf297 --- /dev/null +++ b/.changeset/fluffy-days-act.md @@ -0,0 +1,5 @@ +--- +'@craftjs/core': patch +--- + +Improve resolver performance diff --git a/packages/core/src/utils/resolveComponent.ts b/packages/core/src/utils/resolveComponent.ts index 1d54c876f..edb9919e2 100644 --- a/packages/core/src/utils/resolveComponent.ts +++ b/packages/core/src/utils/resolveComponent.ts @@ -1,38 +1,60 @@ import { ERROR_NOT_IN_RESOLVER } from '@craftjs/utils'; +import React from 'react'; import invariant from 'tiny-invariant'; import { Resolver } from '../interfaces'; +type ReversedResolver = Map; + +type CachedResolverData = { + resolver: Resolver; + reversed: ReversedResolver; +}; + +let CACHED_RESOLVER_DATA: CachedResolverData | null = null; + +const getReversedResolver = (resolver: Resolver): ReversedResolver => { + if (CACHED_RESOLVER_DATA && CACHED_RESOLVER_DATA.resolver === resolver) { + return CACHED_RESOLVER_DATA.reversed; + } + + CACHED_RESOLVER_DATA = { + resolver, + reversed: new Map(), + }; + + for (const [name, comp] of Object.entries(resolver)) { + CACHED_RESOLVER_DATA.reversed.set(comp, name); + } + + return CACHED_RESOLVER_DATA.reversed; +}; + +const getComponentName = (component: React.ElementType): string | undefined => { + return (component as any).name || (component as any).displayName; +}; + +const searchComponentInResolver = ( + resolver: Resolver, + comp: React.ElementType +): string | null => { + const name = getReversedResolver(resolver).get(comp); + return name !== undefined ? name : null; +}; + export const resolveComponent = ( resolver: Resolver, comp: React.ElementType | string -) => { - const componentName = (comp as any).name || (comp as any).displayName; - - const getNameInResolver = () => { - if (resolver[componentName]) { - return componentName; - } - - for (let i = 0; i < Object.keys(resolver).length; i++) { - const name = Object.keys(resolver)[i]; - const fn = resolver[name]; - - if (fn === comp) { - return name; - } - } - - if (typeof comp === 'string') { - return comp; - } - }; +): string => { + if (typeof comp === 'string') { + return comp; + } - const resolvedName = getNameInResolver(); + const resolvedName = searchComponentInResolver(resolver, comp); invariant( resolvedName, - ERROR_NOT_IN_RESOLVER.replace('%node_type%', componentName) + ERROR_NOT_IN_RESOLVER.replace('%node_type%', getComponentName(comp)) ); return resolvedName; From 1212856b81d28daffb767bf8ae759df5be2ac82b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=89=AF=E8=BE=B0=E7=BE=8E=E6=99=AF=E5=B2=82=E8=99=9A?= =?UTF-8?q?=E8=AE=BE?= <34734853+zzzhrookie@users.noreply.github.com> Date: Fri, 17 May 2024 13:04:41 +0800 Subject: [PATCH 03/28] chore(docs): update type of state.events.selected in useNode hook (#621) --- site/docs/guides/basic-tutorial.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/site/docs/guides/basic-tutorial.md b/site/docs/guides/basic-tutorial.md index 0e7284f4b..b721c7707 100755 --- a/site/docs/guides/basic-tutorial.md +++ b/site/docs/guides/basic-tutorial.md @@ -635,8 +635,8 @@ The `useNode` hook accepts a collector function which can be used to retrieve st // components/user/Text.js export const Text = ({text, fontSize}) => { const { connectors: {connect, drag}, hasSelectedNode, hasDraggedNode, actions: {setProp} } = useNode((state) => ({ - hasSelectedNode: state.events.selected.size > 0, - hasDraggedNode: state.events.dragged.size > 0 + hasSelectedNode: state.events.selected, + hasDraggedNode: state.events.dragged })); const [editable, setEditable] = useState(false); @@ -668,8 +668,8 @@ import {Slider, FormControl, FormLabel} from "@material-ui/core"; export const Text= ({text, fontSize, textAlign}) => { const { connectors: {connect, drag}, hasSelectedNode, hasDraggedNode, actions: {setProp} } = useNode((state) => ({ - hasSelectedNode: state.events.selected.size > 0, - hasDraggedNode: state.events.dragged.size > 0 + hasSelectedNode: state.events.selected, + hasDraggedNode: state.events.dragged })); ... From cb45f2c8785e7ce048c52e841b7d034d4059142a Mon Sep 17 00:00:00 2001 From: Tomas Cerskus Date: Fri, 17 May 2024 10:57:00 +0100 Subject: [PATCH 04/28] feat: SSR support (#637) --- .changeset/real-glasses-cross.md | 5 +++ packages/core/src/nodes/Element.tsx | 10 ++--- .../core/src/nodes/tests/Element.test.tsx | 4 +- packages/core/src/render/Frame.tsx | 43 +++++++------------ 4 files changed, 27 insertions(+), 35 deletions(-) create mode 100644 .changeset/real-glasses-cross.md diff --git a/.changeset/real-glasses-cross.md b/.changeset/real-glasses-cross.md new file mode 100644 index 000000000..279c898a8 --- /dev/null +++ b/.changeset/real-glasses-cross.md @@ -0,0 +1,5 @@ +--- +'@craftjs/core': patch +--- + +SSR support diff --git a/packages/core/src/nodes/Element.tsx b/packages/core/src/nodes/Element.tsx index b53196f93..8db7f4f6e 100644 --- a/packages/core/src/nodes/Element.tsx +++ b/packages/core/src/nodes/Element.tsx @@ -1,4 +1,4 @@ -import { ERROR_TOP_LEVEL_ELEMENT_NO_ID, useEffectOnce } from '@craftjs/utils'; +import { ERROR_TOP_LEVEL_ELEMENT_NO_ID } from '@craftjs/utils'; import React, { useState } from 'react'; import invariant from 'tiny-invariant'; @@ -47,9 +47,7 @@ export function Element({ }, })); - const [linkedNodeId, setLinkedNodeId] = useState(null); - - useEffectOnce(() => { + const [linkedNodeId] = useState(() => { invariant(!!id, ERROR_TOP_LEVEL_ELEMENT_NO_ID); const { id: nodeId, data } = node; @@ -77,9 +75,9 @@ export function Element({ linkedNodeId = tree.rootNodeId; actions.history.ignore().addLinkedNodeFromTree(tree, nodeId, id); } - - setLinkedNodeId(linkedNodeId); + return linkedNodeId; } + return null; }); return linkedNodeId ? : null; diff --git a/packages/core/src/nodes/tests/Element.test.tsx b/packages/core/src/nodes/tests/Element.test.tsx index ea8401693..a1d72f1b3 100644 --- a/packages/core/src/nodes/tests/Element.test.tsx +++ b/packages/core/src/nodes/tests/Element.test.tsx @@ -79,7 +79,9 @@ describe('', () => { }); it('should call query.parseReactElement()', () => { - expect(parseReactElement).toHaveBeenCalledWith( + const arg0 = parseReactElement.mock.calls[0][0]; + const arg0WithoutOwner = { ...arg0, _owner: null }; + expect(arg0WithoutOwner).toEqual( {children} ); }); diff --git a/packages/core/src/render/Frame.tsx b/packages/core/src/render/Frame.tsx index 5679850bf..3a4acd688 100644 --- a/packages/core/src/render/Frame.tsx +++ b/packages/core/src/render/Frame.tsx @@ -1,5 +1,5 @@ import { deprecationWarning, ROOT_NODE } from '@craftjs/utils'; -import React, { useEffect, useRef } from 'react'; +import React, { useRef } from 'react'; import { useInternalEditor } from '../editor/useInternalEditor'; import { SerializedNodes } from '../interfaces'; @@ -39,41 +39,28 @@ export const Frame: React.FC> = ({ }); } - const initialState = useRef({ - initialChildren: children, - initialData: data || json, - }); + const isLoaded = useRef(false); - const isInitialChildrenLoadedRef = useRef(false); - - useEffect(() => { - const { initialChildren, initialData } = initialState.current; + if (!isLoaded.current) { + const initialData = data || json; if (initialData) { actions.history.ignore().deserialize(initialData); - return; - } + } else if (children) { + const rootNode = React.Children.only(children) as React.ReactElement; - // Prevent recreating Nodes from child elements if we already did it the first time - // Usually an issue in React Strict Mode where this hook is called twice which results in orphaned Nodes - const isInitialChildrenLoaded = isInitialChildrenLoadedRef.current; + const node = query.parseReactElement(rootNode).toNodeTree((node, jsx) => { + if (jsx === rootNode) { + node.id = ROOT_NODE; + } + return node; + }); - if (!initialChildren || isInitialChildrenLoaded) { - return; + actions.history.ignore().addNodeTree(node); } - const rootNode = React.Children.only(initialChildren) as React.ReactElement; - - const node = query.parseReactElement(rootNode).toNodeTree((node, jsx) => { - if (jsx === rootNode) { - node.id = ROOT_NODE; - } - return node; - }); - - actions.history.ignore().addNodeTree(node); - isInitialChildrenLoadedRef.current = true; - }, [actions, query]); + isLoaded.current = true; + } return ; }; From 03f87eb6a7a772c18098f04f35c719f0f5832b9c Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" <41898282+github-actions[bot]@users.noreply.github.com> Date: Fri, 17 May 2024 18:22:52 +0800 Subject: [PATCH 05/28] chore: release (#636) --- .changeset/fluffy-days-act.md | 5 ----- .changeset/many-toys-rescue.md | 5 ----- .changeset/olive-countries-approve.md | 5 ----- .changeset/real-glasses-cross.md | 5 ----- .changeset/sixty-rice-build.md | 5 ----- packages/core/CHANGELOG.md | 14 ++++++++++++++ packages/core/package.json | 2 +- 7 files changed, 15 insertions(+), 26 deletions(-) delete mode 100644 .changeset/fluffy-days-act.md delete mode 100644 .changeset/many-toys-rescue.md delete mode 100644 .changeset/olive-countries-approve.md delete mode 100644 .changeset/real-glasses-cross.md delete mode 100644 .changeset/sixty-rice-build.md diff --git a/.changeset/fluffy-days-act.md b/.changeset/fluffy-days-act.md deleted file mode 100644 index 9999cf297..000000000 --- a/.changeset/fluffy-days-act.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@craftjs/core': patch ---- - -Improve resolver performance 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/.changeset/real-glasses-cross.md b/.changeset/real-glasses-cross.md deleted file mode 100644 index 279c898a8..000000000 --- a/.changeset/real-glasses-cross.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@craftjs/core': patch ---- - -SSR support diff --git a/.changeset/sixty-rice-build.md b/.changeset/sixty-rice-build.md deleted file mode 100644 index d1a0eca63..000000000 --- a/.changeset/sixty-rice-build.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@craftjs/core': patch ---- - -Make parentId param optional in actions.add() diff --git a/packages/core/CHANGELOG.md b/packages/core/CHANGELOG.md index 73374c884..43b048f4e 100644 --- a/packages/core/CHANGELOG.md +++ b/packages/core/CHANGELOG.md @@ -1,5 +1,19 @@ # @craftjs/core +## 0.2.6 + +### Patch Changes + +- [`4fa9b46`](https://github.com/prevwong/craft.js/commit/4fa9b4654c75f75dbcb4fff0a7abc61b94984319) Thanks [@Traveller23](https://github.com/Traveller23)! - Improve resolver performance + +* [#634](https://github.com/prevwong/craft.js/pull/634) [`4dcd6a2`](https://github.com/prevwong/craft.js/commit/4dcd6a202b1740035967856b04f612f834030b6c) Thanks [@prevwong](https://github.com/prevwong)! - Prevent delay when drop element outside of Editor frame + +- [#630](https://github.com/prevwong/craft.js/pull/630) [`fcc71d8`](https://github.com/prevwong/craft.js/commit/fcc71d81cb27ea3a5f7d5550785dfbff19690926) Thanks [@pavsidhu](https://github.com/pavsidhu)! - Add `hidden` prop to component's prop type + +* [`cb45f2c`](https://github.com/prevwong/craft.js/commit/cb45f2c8785e7ce048c52e841b7d034d4059142a) Thanks [@tomas-c](https://github.com/tomas-c)! - SSR support + +- [`b25469e`](https://github.com/prevwong/craft.js/commit/b25469ecc7ffb59fa1f43d3664e002c1e2a5bd46) Thanks [@prevwong](https://github.com/prevwong)! - Make parentId param optional in actions.add() + ## 0.2.5 ### Patch Changes diff --git a/packages/core/package.json b/packages/core/package.json index 812975042..69db3d3e8 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -1,6 +1,6 @@ { "name": "@craftjs/core", - "version": "0.2.5", + "version": "0.2.6", "description": "A React Framework for building extensible drag and drop page editors", "keywords": [ "react", From cb3f5940a30a8058abab925ff812871e870faa58 Mon Sep 17 00:00:00 2001 From: moon <362652565@qq.com> Date: Tue, 28 May 2024 17:39:42 +0800 Subject: [PATCH 06/28] chore: readme (#616) --- packages/core/README.md | 69 +++++++++++++++++++++-------------------- 1 file changed, 35 insertions(+), 34 deletions(-) diff --git a/packages/core/README.md b/packages/core/README.md index 3836b5529..416bc5068 100644 --- a/packages/core/README.md +++ b/packages/core/README.md @@ -43,38 +43,39 @@ No need for complicated plugin systems. Design your editor from top to bottom th A simple user component can easily be defined as such: ```jsx -import {useNode} from "@craftjs/core"; +import { useNode } from "@craftjs/core"; -const TextComponent = ({text}) => { - const { connectors: {drag} } = useNode(); +const TextComponent = ({ text }) => { + const { + connectors: { connect, drag }, + } = useNode(); return ( -
+
connect(drag(ref))}>

{text}

- ) -} + ); +}; + ``` Heck, the entire UI of your page editor is built using just React. ```jsx import React from "react"; -import {Editor, Frame, Canvas, Selector} from "@craftjs/core"; +import { Editor, Frame, Element } from "@craftjs/core"; const App = () => { return (
Some fancy header or whatever
// Editable area starts here - - - - + +
- ) -} + ); +}; ``` ### Control how your components are edited @@ -83,32 +84,32 @@ An obvious requirement for page editors is that they need to allow users to edit In the following example, when the user clicks on a component, we'll display a modal that requires the user to input a value for the `text` prop. As the input value changes, the component will be re-rendered with updated prop. ```jsx -import {useNode} from "@craftjs/core"; +import { useNode } from "@craftjs/core"; -const TextComponent = ({text}) => { - const { connectors: { connect, drag }, isClicked, actions: {setProp} } = useNode( - (state) => ({ - isClicked: state.event.selected, - }) - ); +const TextComponent = ({ text }) => { + const { + connectors: { connect, drag }, + isClicked, + actions: { setProp }, + } = useNode((state) => ({ + isClicked: state.events.selected, + })); return ( -
connect(drag(dom))}> +
connect(drag(dom))}>

{text}

- { - isClicked ? ( - - setProp(e.target.value)} - /> - - ) - } + {isClicked ? ( + + setProp(e.target.value)} + /> + + ) : null}
- ) -} + ); +}; ``` With this, you could easily implement content editable text or drag-to-resize components, just as any modern page editor would have. From e99cafe7e41509e5b6a51ad83d454303ecb1f1a8 Mon Sep 17 00:00:00 2001 From: Prev Wong Date: Tue, 28 May 2024 17:44:21 +0800 Subject: [PATCH 07/28] chore: sponsors --- packages/core/README.md | 6 +++++- site/docs/sponsor.md | 16 +++++++++++++++- 2 files changed, 20 insertions(+), 2 deletions(-) diff --git a/packages/core/README.md b/packages/core/README.md index 416bc5068..7d8d7e872 100644 --- a/packages/core/README.md +++ b/packages/core/README.md @@ -219,9 +219,13 @@ Craft.js is released under the [MIT license](https://github.com/prevwong/craft.j ### Sponsors - [Tangro](https://opencollective.com/tangro-software-components-gmbh) -- [Bask](https://opencollective.com/guest-14bbf5c3) ### Backers +- [Tekeste Kidanu](https://opencollective.com/guest-1703f486) - [CORS Digital](https://opencollective.com/cors-digital) - [Mattermix](https://opencollective.com/mattermix) - [muttenzer](https://github.com/muttenzer) +- [ITCuw](https://github.com/ITCuw) +- [quan](https://github.com/qu8n) +- [Victor Vanegas](vicvans20) +- [kasayo](https://opencollective.com/kasayo) diff --git a/site/docs/sponsor.md b/site/docs/sponsor.md index 70f49a806..9295bb84e 100755 --- a/site/docs/sponsor.md +++ b/site/docs/sponsor.md @@ -7,4 +7,18 @@ Craft.js is released under the [MIT license](https://github.com/prevwong/craft.j In July 2022, I left my full-time job and in that time to focus on Craft and it's [future](https://github.com/prevwong/craft.js/issues/507). If you found this project useful and would like to ensure its continued development, please consider sponsoring/donating to the project. Your contribution would mean a lot to me! -You can choose to contribute via [Github Sponsors](https://github.com/sponsors/prevwong), [OpenCollective](https://opencollective.com/craftjs), [Patreon](https://patreon.com/imprev) or [Ko-fi](https://ko-fi.com/prevwong). \ No newline at end of file +You can choose to contribute via [Github Sponsors](https://github.com/sponsors/prevwong), [OpenCollective](https://opencollective.com/craftjs), [Patreon](https://patreon.com/imprev) or [Ko-fi](https://ko-fi.com/prevwong). + + +### Sponsors +- [Tangro](https://opencollective.com/tangro-software-components-gmbh) + +### Backers +- [Tekeste Kidanu](https://opencollective.com/guest-1703f486) +- [CORS Digital](https://opencollective.com/cors-digital) +- [Mattermix](https://opencollective.com/mattermix) +- [muttenzer](https://github.com/muttenzer) +- [ITCuw](https://github.com/ITCuw) +- [quan](https://github.com/qu8n) +- [Victor Vanegas](vicvans20) +- [kasayo](https://opencollective.com/kasayo) From c069dff47176541361cd0cf1769830176c07eb99 Mon Sep 17 00:00:00 2001 From: Prev Wong Date: Fri, 31 May 2024 21:20:38 +0800 Subject: [PATCH 08/28] fix: creating linked node in strict mode (#653) --- .changeset/grumpy-shrimps-call.md | 5 + packages/core/src/nodes/Element.tsx | 43 +++--- .../core/src/nodes/tests/Element.test.tsx | 122 ------------------ 3 files changed, 22 insertions(+), 148 deletions(-) create mode 100644 .changeset/grumpy-shrimps-call.md delete mode 100644 packages/core/src/nodes/tests/Element.test.tsx diff --git a/.changeset/grumpy-shrimps-call.md b/.changeset/grumpy-shrimps-call.md new file mode 100644 index 000000000..8f4e0ef16 --- /dev/null +++ b/.changeset/grumpy-shrimps-call.md @@ -0,0 +1,5 @@ +--- +'@craftjs/core': patch +--- + +Fix linked node creating when in react strict mode diff --git a/packages/core/src/nodes/Element.tsx b/packages/core/src/nodes/Element.tsx index 8db7f4f6e..22b369e1f 100644 --- a/packages/core/src/nodes/Element.tsx +++ b/packages/core/src/nodes/Element.tsx @@ -40,42 +40,33 @@ export function Element({ }; const { query, actions } = useInternalEditor(); - const { node, inNodeContext } = useInternalNode((node) => ({ - node: { - id: node.id, - data: node.data, - }, - })); + const { id: nodeId, inNodeContext } = useInternalNode(); const [linkedNodeId] = useState(() => { invariant(!!id, ERROR_TOP_LEVEL_ELEMENT_NO_ID); - const { id: nodeId, data } = node; + const node = query.node(nodeId).get(); if (inNodeContext) { - let linkedNodeId; - - const existingNode = - data.linkedNodes && - data.linkedNodes[id] && - query.node(data.linkedNodes[id]).get(); + const existingNode = node.data.linkedNodes[id] + ? query.node(node.data.linkedNodes[id]).get() + : null; // Render existing linked Node if it already exists (and is the same type as the JSX) if (existingNode && existingNode.data.type === is) { - linkedNodeId = existingNode.id; - } else { - // otherwise, create and render a new linked Node - const linkedElement = React.createElement( - Element, - elementProps, - children - ); + return existingNode.id; + } - const tree = query.parseReactElement(linkedElement).toNodeTree(); + // otherwise, create and render a new linked Node + const linkedElement = React.createElement( + Element, + elementProps, + children + ); - linkedNodeId = tree.rootNodeId; - actions.history.ignore().addLinkedNodeFromTree(tree, nodeId, id); - } - return linkedNodeId; + const tree = query.parseReactElement(linkedElement).toNodeTree(); + + actions.history.ignore().addLinkedNodeFromTree(tree, nodeId, id); + return tree.rootNodeId; } return null; }); diff --git a/packages/core/src/nodes/tests/Element.test.tsx b/packages/core/src/nodes/tests/Element.test.tsx deleted file mode 100644 index a1d72f1b3..000000000 --- a/packages/core/src/nodes/tests/Element.test.tsx +++ /dev/null @@ -1,122 +0,0 @@ -import { render } from '@testing-library/react'; -import React from 'react'; - -import { createTestNode } from '../../utils/createTestNode'; -import { Element } from '../Element'; - -let parentNode; -let existingLinkedNode; -let newLinkedNode = createTestNode('newLinkedNode'); - -let toNodeTree = jest.fn().mockImplementation(() => ({ - rootNodeId: newLinkedNode.id, -})); - -let addLinkedNodeFromTree = jest.fn(); -let parseReactElement = jest.fn().mockImplementation(() => ({ - toNodeTree, -})); - -jest.mock('../../editor/useInternalEditor', () => ({ - useInternalEditor: () => ({ - actions: { - history: { - ignore: jest.fn().mockImplementation(() => ({ - addLinkedNodeFromTree, - })), - }, - }, - query: { - parseReactElement, - node: jest.fn().mockImplementation((id) => ({ - get() { - if (id === 'parent-node') return parentNode; - else return existingLinkedNode; - }, - })), - }, - }), -})); - -jest.mock('../useInternalNode', () => ({ - useInternalNode: () => ({ - node: parentNode, - inNodeContext: true, - }), -})); - -const NodeElementTest = jest.fn().mockImplementation(() => null); - -jest.mock('../NodeElement', () => ({ - NodeElement: jest.fn().mockImplementation((props) => NodeElementTest(props)), -})); - -describe('', () => { - beforeEach(() => { - parentNode = createTestNode('test'); - }); - - describe('when no id is passed', () => { - it('should throw error', () => { - expect(() => render()).toThrow(); - }); - }); - - describe('when there is no existing node', () => { - let elementProps, children; - - beforeEach(() => { - elementProps = { - color: '#fff', - }; - - children =

Child

; - render( - - {children} - - ); - }); - - it('should call query.parseReactElement()', () => { - const arg0 = parseReactElement.mock.calls[0][0]; - const arg0WithoutOwner = { ...arg0, _owner: null }; - expect(arg0WithoutOwner).toEqual( - {children} - ); - }); - it('should call actions.addLinkedNodeFromTree()', () => { - expect(addLinkedNodeFromTree).toHaveBeenCalled(); - }); - it('should render a new linked Node', () => { - expect(NodeElementTest).toHaveBeenCalledWith({ - id: newLinkedNode.id, - }); - }); - }); - - describe('when there is an existing node', () => { - beforeEach(() => { - existingLinkedNode = createTestNode('existing-linked-node', { - type: 'div', - props: { - background: '#000', - color: '#fff', - }, - }); - - parentNode = createTestNode('parent-node', { - linkedNodes: { - test: existingLinkedNode.id, - }, - }); - - render(); - }); - it('should render existing Node', () => { - expect(NodeElementTest).toHaveBeenCalledWith({ - id: existingLinkedNode.id, - }); - }); - }); -}); From 9eff6b811933da34f33143212bfb87b1a24829fe Mon Sep 17 00:00:00 2001 From: Prev Wong Date: Fri, 31 May 2024 21:31:41 +0800 Subject: [PATCH 09/28] chore: cleanup React.FC prop types (#655) --- .changeset/serious-garlics-refuse.md | 7 +++++++ packages/core/src/editor/Editor.tsx | 17 +++++++++++------ packages/core/src/events/Events.tsx | 2 +- packages/core/src/nodes/NodeContext.tsx | 12 ++++++++---- packages/core/src/nodes/NodeElement.tsx | 4 +--- packages/core/src/render/Frame.tsx | 7 ++----- packages/core/src/render/RenderNode.tsx | 7 +++---- packages/core/src/render/RenderPlaceholder.tsx | 9 +++++---- .../layers/src/events/RenderLayerIndicator.tsx | 8 +++++++- packages/layers/src/index.tsx | 4 +++- .../src/layers/DefaultLayer/DefaultLayer.tsx | 8 +++++--- .../layers/DefaultLayer/DefaultLayerHeader.tsx | 2 +- .../layers/src/layers/LayerContextProvider.tsx | 10 ++++++---- packages/layers/src/layers/LayerIndicator.tsx | 6 +++--- packages/layers/src/layers/LayerNode.tsx | 2 +- .../layers/src/manager/LayerManagerProvider.tsx | 9 +++++++-- packages/utils/src/RenderIndicator.tsx | 7 ++++++- 17 files changed, 77 insertions(+), 44 deletions(-) create mode 100644 .changeset/serious-garlics-refuse.md diff --git a/.changeset/serious-garlics-refuse.md b/.changeset/serious-garlics-refuse.md new file mode 100644 index 000000000..2ec07ac17 --- /dev/null +++ b/.changeset/serious-garlics-refuse.md @@ -0,0 +1,7 @@ +--- +'@craftjs/layers': patch +'@craftjs/utils': patch +'@craftjs/core': patch +--- + +Cleanup React.FC prop types diff --git a/packages/core/src/editor/Editor.tsx b/packages/core/src/editor/Editor.tsx index 721bcb576..a400c9f49 100644 --- a/packages/core/src/editor/Editor.tsx +++ b/packages/core/src/editor/Editor.tsx @@ -8,13 +8,14 @@ import { useEditorStore } from './store'; import { Events } from '../events'; import { Options } from '../interfaces'; +type EditorProps = Partial & { + children?: React.ReactNode; +}; + /** * A React Component that provides the Editor context */ -export const Editor: React.FC>> = ({ - children, - ...options -}) => { +export const Editor = ({ children, ...options }: EditorProps) => { // we do not want to warn the user if no resolver was supplied if (options.resolver !== undefined) { invariant( @@ -101,9 +102,13 @@ export const Editor: React.FC>> = ({ ); }, [context]); - return context ? ( + if (!context) { + return null; + } + + return ( {children} - ) : null; + ); }; diff --git a/packages/core/src/events/Events.tsx b/packages/core/src/events/Events.tsx index 879c73048..bfe0d18c3 100644 --- a/packages/core/src/events/Events.tsx +++ b/packages/core/src/events/Events.tsx @@ -9,7 +9,7 @@ type EventsProps = { children?: React.ReactNode; }; -export const Events: React.FC = ({ children }) => { +export const Events = ({ children }: EventsProps) => { const store = useContext(EditorContext); const handler = useMemo(() => store.query.getOptions().handlers(store), [ diff --git a/packages/core/src/nodes/NodeContext.tsx b/packages/core/src/nodes/NodeContext.tsx index d7928183b..df43cb915 100644 --- a/packages/core/src/nodes/NodeContext.tsx +++ b/packages/core/src/nodes/NodeContext.tsx @@ -9,11 +9,15 @@ export type NodeContextType = { export const NodeContext = React.createContext(null); -export type NodeProviderProps = Omit; +export type NodeProviderProps = Omit & { + children?: React.ReactNode; +}; -export const NodeProvider: React.FC> = ({ id, related = false, children }) => { +export const NodeProvider = ({ + id, + related = false, + children, +}: NodeProviderProps) => { return ( {children} diff --git a/packages/core/src/nodes/NodeElement.tsx b/packages/core/src/nodes/NodeElement.tsx index 6e899f353..df1145685 100644 --- a/packages/core/src/nodes/NodeElement.tsx +++ b/packages/core/src/nodes/NodeElement.tsx @@ -10,9 +10,7 @@ export type NodeElementProps = { render?: React.ReactElement; }; -export const NodeElement: React.FC> = ({ id, render }) => { +export const NodeElement = ({ id, render }: NodeElementProps) => { return ( diff --git a/packages/core/src/render/Frame.tsx b/packages/core/src/render/Frame.tsx index 3a4acd688..65a5eca23 100644 --- a/packages/core/src/render/Frame.tsx +++ b/packages/core/src/render/Frame.tsx @@ -6,6 +6,7 @@ import { SerializedNodes } from '../interfaces'; import { NodeElement } from '../nodes/NodeElement'; export type FrameProps = { + children?: React.ReactNode; json?: string; data?: string | SerializedNodes; }; @@ -26,11 +27,7 @@ const RenderRootNode = () => { /** * A React Component that defines the editable area */ -export const Frame: React.FC> = ({ - children, - json, - data, -}) => { +export const Frame = ({ children, json, data }: FrameProps) => { const { actions, query } = useInternalEditor(); if (!!json) { diff --git a/packages/core/src/render/RenderNode.tsx b/packages/core/src/render/RenderNode.tsx index 541505b51..cd2871efb 100644 --- a/packages/core/src/render/RenderNode.tsx +++ b/packages/core/src/render/RenderNode.tsx @@ -5,12 +5,11 @@ import { DefaultRender } from './DefaultRender'; import { useInternalEditor } from '../editor/useInternalEditor'; import { useInternalNode } from '../nodes/useInternalNode'; -type RenderNodeToElementType = { +type RenderNodeToElementProps = { render?: React.ReactElement; + children?: React.ReactNode; }; -export const RenderNodeToElement: React.FC> = ({ render }) => { +export const RenderNodeToElement = ({ render }: RenderNodeToElementProps) => { const { hidden } = useInternalNode((node) => ({ hidden: node.data.hidden, })); diff --git a/packages/core/src/render/RenderPlaceholder.tsx b/packages/core/src/render/RenderPlaceholder.tsx index b980a3360..3483202cd 100644 --- a/packages/core/src/render/RenderPlaceholder.tsx +++ b/packages/core/src/render/RenderPlaceholder.tsx @@ -3,14 +3,15 @@ import React from 'react'; import { useEditor } from '../hooks'; import { Indicator } from '../interfaces'; -export type Placeholder = { +export type RenderPlaceholderProps = { placeholder: Indicator; suggestedStyles: any; }; -export const RenderPlaceholder: React.FC> = ({ placeholder, suggestedStyles }) => { +export const RenderPlaceholder = ({ + placeholder, + suggestedStyles, +}: RenderPlaceholderProps) => { const { indicator } = useEditor((state) => ({ indicator: state.options.indicator, })); diff --git a/packages/layers/src/events/RenderLayerIndicator.tsx b/packages/layers/src/events/RenderLayerIndicator.tsx index dae4c700b..538a325c1 100644 --- a/packages/layers/src/events/RenderLayerIndicator.tsx +++ b/packages/layers/src/events/RenderLayerIndicator.tsx @@ -4,7 +4,13 @@ import React, { useMemo } from 'react'; import { useLayerManager } from '../manager/useLayerManager'; -export const RenderLayerIndicator: React.FC = ({ children }) => { +type RenderLayerIndicatorProps = { + children?: React.ReactNode; +}; + +export const RenderLayerIndicator = ({ + children, +}: RenderLayerIndicatorProps) => { const { layers, events } = useLayerManager((state) => state); const { query } = useEditor((state) => ({ enabled: state.options.enabled })); const { indicator: indicatorStyles } = query.getOptions(); diff --git a/packages/layers/src/index.tsx b/packages/layers/src/index.tsx index 88406ae62..2f30613d5 100644 --- a/packages/layers/src/index.tsx +++ b/packages/layers/src/index.tsx @@ -11,7 +11,9 @@ export { EditableLayerName, } from './layers'; -export const Layers: React.FC> = ({ ...options }) => { +type LayersProps = Partial; + +export const Layers = ({ ...options }: LayersProps) => { return ( diff --git a/packages/layers/src/layers/DefaultLayer/DefaultLayer.tsx b/packages/layers/src/layers/DefaultLayer/DefaultLayer.tsx index ece508461..b5418c411 100644 --- a/packages/layers/src/layers/DefaultLayer/DefaultLayer.tsx +++ b/packages/layers/src/layers/DefaultLayer/DefaultLayer.tsx @@ -44,9 +44,11 @@ const LayerChildren = styled.div<{ hasCanvases: boolean }>` : ''} `; -export const DefaultLayer: React.FC<{ children?: React.ReactNode }> = ({ - children, -}) => { +export type DefaultLayerProps = { + children?: React.ReactNode; +}; + +export const DefaultLayer = ({ children }: DefaultLayerProps) => { const { id, expanded, diff --git a/packages/layers/src/layers/DefaultLayer/DefaultLayerHeader.tsx b/packages/layers/src/layers/DefaultLayer/DefaultLayerHeader.tsx index 12ef914fb..3e4330919 100644 --- a/packages/layers/src/layers/DefaultLayer/DefaultLayerHeader.tsx +++ b/packages/layers/src/layers/DefaultLayer/DefaultLayerHeader.tsx @@ -91,7 +91,7 @@ const TopLevelIndicator = styled.div` } `; -export const DefaultLayerHeader: React.FC = () => { +export const DefaultLayerHeader = () => { const { id, depth, diff --git a/packages/layers/src/layers/LayerContextProvider.tsx b/packages/layers/src/layers/LayerContextProvider.tsx index 6ef5589d2..7a97c45b9 100644 --- a/packages/layers/src/layers/LayerContextProvider.tsx +++ b/packages/layers/src/layers/LayerContextProvider.tsx @@ -8,10 +8,12 @@ import { LayerNode } from './LayerNode'; import { useLayerEventHandler } from '../events/LayerEventContext'; import { LayerManagerContext } from '../manager'; -export const LayerContextProvider: React.FC> = ({ id, depth }) => { +export type LayerContextProviderProps = Omit; + +export const LayerContextProvider = ({ + id, + depth, +}: LayerContextProviderProps) => { const handlers = useLayerEventHandler(); const { store } = useContext(LayerManagerContext); diff --git a/packages/layers/src/layers/LayerIndicator.tsx b/packages/layers/src/layers/LayerIndicator.tsx index 7a3f5da64..430148b74 100644 --- a/packages/layers/src/layers/LayerIndicator.tsx +++ b/packages/layers/src/layers/LayerIndicator.tsx @@ -1,15 +1,15 @@ import { Indicator, useEditor } from '@craftjs/core'; import React from 'react'; -export type Placeholder = { +export type LayerIndicatorProps = { placeholder: Indicator; suggestedStyles: any; }; -export const LayerIndicator: React.FC = ({ +export const LayerIndicator = ({ placeholder, suggestedStyles, -}) => { +}: LayerIndicatorProps) => { const { indicator } = useEditor((state) => ({ indicator: state.options.indicator, })); diff --git a/packages/layers/src/layers/LayerNode.tsx b/packages/layers/src/layers/LayerNode.tsx index ee5bdbcce..b8a9692b3 100644 --- a/packages/layers/src/layers/LayerNode.tsx +++ b/packages/layers/src/layers/LayerNode.tsx @@ -6,7 +6,7 @@ import { useLayer } from './useLayer'; import { useLayerManager } from '../manager/useLayerManager'; -export const LayerNode: React.FC = () => { +export const LayerNode = () => { const { id, depth, children, expanded } = useLayer((layer) => ({ expanded: layer.expanded, })); diff --git a/packages/layers/src/manager/LayerManagerProvider.tsx b/packages/layers/src/manager/LayerManagerProvider.tsx index e700cb6d5..df13df1ff 100644 --- a/packages/layers/src/manager/LayerManagerProvider.tsx +++ b/packages/layers/src/manager/LayerManagerProvider.tsx @@ -8,10 +8,15 @@ import { LayerEventContextProvider } from '../events'; import { LayerOptions } from '../interfaces'; import { DefaultLayer } from '../layers'; -export const LayerManagerProvider: React.FC<{ +type LayerManagerProviderProps = { options: Partial; children?: React.ReactNode; -}> = ({ children, options }) => { +}; + +export const LayerManagerProvider = ({ + children, + options, +}: LayerManagerProviderProps) => { // TODO: fix type const store = useMethods(LayerMethods, { layers: {}, diff --git a/packages/utils/src/RenderIndicator.tsx b/packages/utils/src/RenderIndicator.tsx index e69c6920f..3199ea266 100644 --- a/packages/utils/src/RenderIndicator.tsx +++ b/packages/utils/src/RenderIndicator.tsx @@ -1,7 +1,12 @@ import React from 'react'; import ReactDOM from 'react-dom'; -export const RenderIndicator: React.FC = ({ style, parentDom }) => { +type RenderIndicatorProps = { + style: React.CSSProperties; + parentDom?: HTMLElement; +}; + +export const RenderIndicator = ({ style, parentDom }: RenderIndicatorProps) => { const indicator = (
Date: Tue, 4 Jun 2024 19:09:01 +0800 Subject: [PATCH 10/28] chore: release (#654) --- .changeset/grumpy-shrimps-call.md | 5 ----- .changeset/serious-garlics-refuse.md | 7 ------- packages/core/CHANGELOG.md | 11 +++++++++++ packages/core/package.json | 4 ++-- packages/layers/CHANGELOG.md | 9 +++++++++ packages/layers/package.json | 4 ++-- packages/utils/CHANGELOG.md | 6 ++++++ packages/utils/package.json | 2 +- yarn.lock | 6 +++--- 9 files changed, 34 insertions(+), 20 deletions(-) delete mode 100644 .changeset/grumpy-shrimps-call.md delete mode 100644 .changeset/serious-garlics-refuse.md diff --git a/.changeset/grumpy-shrimps-call.md b/.changeset/grumpy-shrimps-call.md deleted file mode 100644 index 8f4e0ef16..000000000 --- a/.changeset/grumpy-shrimps-call.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@craftjs/core': patch ---- - -Fix linked node creating when in react strict mode diff --git a/.changeset/serious-garlics-refuse.md b/.changeset/serious-garlics-refuse.md deleted file mode 100644 index 2ec07ac17..000000000 --- a/.changeset/serious-garlics-refuse.md +++ /dev/null @@ -1,7 +0,0 @@ ---- -'@craftjs/layers': patch -'@craftjs/utils': patch -'@craftjs/core': patch ---- - -Cleanup React.FC prop types diff --git a/packages/core/CHANGELOG.md b/packages/core/CHANGELOG.md index 43b048f4e..667537528 100644 --- a/packages/core/CHANGELOG.md +++ b/packages/core/CHANGELOG.md @@ -1,5 +1,16 @@ # @craftjs/core +## 0.2.7 + +### Patch Changes + +- [#653](https://github.com/prevwong/craft.js/pull/653) [`c069dff`](https://github.com/prevwong/craft.js/commit/c069dff47176541361cd0cf1769830176c07eb99) Thanks [@prevwong](https://github.com/prevwong)! - Fix linked node creating when in react strict mode + +* [`9eff6b8`](https://github.com/prevwong/craft.js/commit/9eff6b811933da34f33143212bfb87b1a24829fe) Thanks [@prevwong](https://github.com/prevwong)! - Cleanup React.FC prop types + +* Updated dependencies [[`9eff6b8`](https://github.com/prevwong/craft.js/commit/9eff6b811933da34f33143212bfb87b1a24829fe)]: + - @craftjs/utils@0.2.2 + ## 0.2.6 ### Patch Changes diff --git a/packages/core/package.json b/packages/core/package.json index 69db3d3e8..6f0cc5530 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -1,6 +1,6 @@ { "name": "@craftjs/core", - "version": "0.2.6", + "version": "0.2.7", "description": "A React Framework for building extensible drag and drop page editors", "keywords": [ "react", @@ -35,7 +35,7 @@ "url": "https://github.com/prevwong/craft.js/issues" }, "dependencies": { - "@craftjs/utils": "^0.2.1", + "@craftjs/utils": "^0.2.2", "debounce": "^1.2.0", "lodash": "^4.17.21", "tiny-invariant": "^1.0.6" diff --git a/packages/layers/CHANGELOG.md b/packages/layers/CHANGELOG.md index a85c755bf..d90e74fe0 100644 --- a/packages/layers/CHANGELOG.md +++ b/packages/layers/CHANGELOG.md @@ -1,5 +1,14 @@ # @craftjs/layers +## 0.2.3 + +### Patch Changes + +- [`9eff6b8`](https://github.com/prevwong/craft.js/commit/9eff6b811933da34f33143212bfb87b1a24829fe) Thanks [@prevwong](https://github.com/prevwong)! - Cleanup React.FC prop types + +- Updated dependencies [[`9eff6b8`](https://github.com/prevwong/craft.js/commit/9eff6b811933da34f33143212bfb87b1a24829fe)]: + - @craftjs/utils@0.2.2 + ## 0.2.2 ### Patch Changes diff --git a/packages/layers/package.json b/packages/layers/package.json index c5c5ee706..434715d60 100644 --- a/packages/layers/package.json +++ b/packages/layers/package.json @@ -11,7 +11,7 @@ "web-builder", "react" ], - "version": "0.2.2", + "version": "0.2.3", "author": "Prev Wong ", "main": "./dist/cjs/index.js", "module": "./dist/esm/index.js", @@ -31,7 +31,7 @@ }, "homepage": "https://github.com/prevwong/craft.js/", "dependencies": { - "@craftjs/utils": "^0.2.1", + "@craftjs/utils": "^0.2.2", "react-contenteditable": "^3.3.3" }, "devDependencies": { diff --git a/packages/utils/CHANGELOG.md b/packages/utils/CHANGELOG.md index 706f0f63c..b91aed901 100644 --- a/packages/utils/CHANGELOG.md +++ b/packages/utils/CHANGELOG.md @@ -1,5 +1,11 @@ # @craftjs/utils +## 0.2.2 + +### Patch Changes + +- [`9eff6b8`](https://github.com/prevwong/craft.js/commit/9eff6b811933da34f33143212bfb87b1a24829fe) Thanks [@prevwong](https://github.com/prevwong)! - Cleanup React.FC prop types + ## 0.2.1 ### Patch Changes diff --git a/packages/utils/package.json b/packages/utils/package.json index e546a6063..cb133601f 100644 --- a/packages/utils/package.json +++ b/packages/utils/package.json @@ -1,7 +1,7 @@ { "name": "@craftjs/utils", "description": "Utilities used internally across the craft.js monorepo", - "version": "0.2.1", + "version": "0.2.2", "author": "Prev Wong ", "license": "MIT", "main": "./dist/cjs/index.js", diff --git a/yarn.lock b/yarn.lock index 0e94ac3d9..17f955e24 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2517,7 +2517,7 @@ __metadata: version: 0.0.0-use.local resolution: "@craftjs/core@workspace:packages/core" dependencies: - "@craftjs/utils": ^0.2.1 + "@craftjs/utils": ^0.2.2 "@types/lodash": ^4.14.195 "@types/react": 18.0.27 debounce: ^1.2.0 @@ -2534,7 +2534,7 @@ __metadata: resolution: "@craftjs/layers@workspace:packages/layers" dependencies: "@babel/core": 7.7.4 - "@craftjs/utils": ^0.2.1 + "@craftjs/utils": ^0.2.2 "@svgr/rollup": 6.5.1 react-contenteditable: ^3.3.3 styled-components: 4.2.1 @@ -2545,7 +2545,7 @@ __metadata: languageName: unknown linkType: soft -"@craftjs/utils@^0.2.1, @craftjs/utils@workspace:packages/utils": +"@craftjs/utils@^0.2.2, @craftjs/utils@workspace:packages/utils": version: 0.0.0-use.local resolution: "@craftjs/utils@workspace:packages/utils" dependencies: From 62cb06aa3f4f8747f52998112ca66943d72322b4 Mon Sep 17 00:00:00 2001 From: Mat Date: Wed, 19 Jun 2024 15:56:44 +0200 Subject: [PATCH 11/28] chore: export dnd utils (#656) --- .changeset/nasty-parrots-serve.md | 5 +++++ packages/core/src/events/index.tsx | 2 ++ 2 files changed, 7 insertions(+) create mode 100644 .changeset/nasty-parrots-serve.md diff --git a/.changeset/nasty-parrots-serve.md b/.changeset/nasty-parrots-serve.md new file mode 100644 index 000000000..3a7bb78db --- /dev/null +++ b/.changeset/nasty-parrots-serve.md @@ -0,0 +1,5 @@ +--- +'@craftjs/core': patch +--- + +Add exports for Positioner and createShadow diff --git a/packages/core/src/events/index.tsx b/packages/core/src/events/index.tsx index e453fafa5..912b5176e 100644 --- a/packages/core/src/events/index.tsx +++ b/packages/core/src/events/index.tsx @@ -2,3 +2,5 @@ export { useEventHandler } from './EventContext'; export * from './CoreEventHandlers'; export * from './DefaultEventHandlers'; export { Events } from './Events'; +export { Positioner } from './Positioner'; +export { createShadow } from './createShadow'; From 6b64687ed283b22fd69d27f855669628cdfb6bcb Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" <41898282+github-actions[bot]@users.noreply.github.com> Date: Mon, 24 Jun 2024 14:57:57 +0800 Subject: [PATCH 12/28] chore: release (#661) --- .changeset/nasty-parrots-serve.md | 5 ----- packages/core/CHANGELOG.md | 6 ++++++ packages/core/package.json | 2 +- 3 files changed, 7 insertions(+), 6 deletions(-) delete mode 100644 .changeset/nasty-parrots-serve.md diff --git a/.changeset/nasty-parrots-serve.md b/.changeset/nasty-parrots-serve.md deleted file mode 100644 index 3a7bb78db..000000000 --- a/.changeset/nasty-parrots-serve.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@craftjs/core': patch ---- - -Add exports for Positioner and createShadow diff --git a/packages/core/CHANGELOG.md b/packages/core/CHANGELOG.md index 667537528..508247b22 100644 --- a/packages/core/CHANGELOG.md +++ b/packages/core/CHANGELOG.md @@ -1,5 +1,11 @@ # @craftjs/core +## 0.2.8 + +### Patch Changes + +- [#656](https://github.com/prevwong/craft.js/pull/656) [`62cb06a`](https://github.com/prevwong/craft.js/commit/62cb06aa3f4f8747f52998112ca66943d72322b4) Thanks [@mateusz-oi](https://github.com/mateusz-oi)! - Add exports for Positioner and createShadow + ## 0.2.7 ### Patch Changes diff --git a/packages/core/package.json b/packages/core/package.json index 6f0cc5530..5f8bfc892 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -1,6 +1,6 @@ { "name": "@craftjs/core", - "version": "0.2.7", + "version": "0.2.8", "description": "A React Framework for building extensible drag and drop page editors", "keywords": [ "react", From 46eb68ef54a036f06c9433ee74b2359a8f38c610 Mon Sep 17 00:00:00 2001 From: MaziyarMK Date: Wed, 26 Jun 2024 10:40:52 +0400 Subject: [PATCH 13/28] fix(site): typography panel summary stuck on bold (#664) --- examples/landing/components/selectors/Text/TextSettings.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/landing/components/selectors/Text/TextSettings.tsx b/examples/landing/components/selectors/Text/TextSettings.tsx index b26a18f62..1e6e6b92d 100644 --- a/examples/landing/components/selectors/Text/TextSettings.tsx +++ b/examples/landing/components/selectors/Text/TextSettings.tsx @@ -12,7 +12,7 @@ export const TextSettings = () => { props={['fontSize', 'fontWeight', 'textAlign']} summary={({ fontSize, fontWeight, textAlign }: any) => { return `${fontSize || ''}, ${weightDescription( - fontWeight + parseInt(fontWeight) )}, ${capitalize(textAlign)}`; }} > From b0a9e0bc65ebbc770a1ad093fac3e052d86fc2dc Mon Sep 17 00:00:00 2001 From: Prev Wong Date: Thu, 25 Jul 2024 15:51:28 +0800 Subject: [PATCH 14/28] feat: allow customising dnd indicator classname/style (#683) --- .changeset/modern-socks-retire.md | 6 ++++++ packages/core/src/events/RenderEditorIndicator.tsx | 2 ++ packages/core/src/interfaces/editor.ts | 2 ++ packages/utils/src/RenderIndicator.tsx | 8 +++++++- site/docs/api/Editor.md | 10 +++++++--- 5 files changed, 24 insertions(+), 4 deletions(-) create mode 100644 .changeset/modern-socks-retire.md diff --git a/.changeset/modern-socks-retire.md b/.changeset/modern-socks-retire.md new file mode 100644 index 000000000..f78074f6b --- /dev/null +++ b/.changeset/modern-socks-retire.md @@ -0,0 +1,6 @@ +--- +'@craftjs/utils': patch +'@craftjs/core': patch +--- + +Allow customising dnd indicator style/classname diff --git a/packages/core/src/events/RenderEditorIndicator.tsx b/packages/core/src/events/RenderEditorIndicator.tsx index 910a41ba0..e2ab13d45 100644 --- a/packages/core/src/events/RenderEditorIndicator.tsx +++ b/packages/core/src/events/RenderEditorIndicator.tsx @@ -35,6 +35,7 @@ export const RenderEditorIndicator = () => { } return React.createElement(RenderIndicator, { + className: indicatorOptions.className, style: { ...movePlaceholder( indicator.placement, @@ -47,6 +48,7 @@ export const RenderEditorIndicator = () => { ? indicatorOptions.error : indicatorOptions.success, transition: indicatorOptions.transition || '0.2s ease-in', + ...(indicatorOptions.style ?? {}), }, parentDom: indicator.placement.parent.dom, }); diff --git a/packages/core/src/interfaces/editor.ts b/packages/core/src/interfaces/editor.ts index 114069c4e..742b792a4 100644 --- a/packages/core/src/interfaces/editor.ts +++ b/packages/core/src/interfaces/editor.ts @@ -23,6 +23,8 @@ export type Options = { error: string; transition: string; thickness: number; + className: string; + style: React.CSSProperties; }>; handlers: (store: EditorStore) => CoreEventHandlers; normalizeNodes: ( diff --git a/packages/utils/src/RenderIndicator.tsx b/packages/utils/src/RenderIndicator.tsx index 3199ea266..609dbba00 100644 --- a/packages/utils/src/RenderIndicator.tsx +++ b/packages/utils/src/RenderIndicator.tsx @@ -3,12 +3,18 @@ import ReactDOM from 'react-dom'; type RenderIndicatorProps = { style: React.CSSProperties; + className?: string; parentDom?: HTMLElement; }; -export const RenderIndicator = ({ style, parentDom }: RenderIndicatorProps) => { +export const RenderIndicator = ({ + style, + className, + parentDom, +}: RenderIndicatorProps) => { const indicator = (
{ ``` In the above example, every user element will now be wrapped in a black `div`. -### Specifying the Drop Indicator colour +### Customising the drag-and-drop indicator -You could change the colours of the drag and drop indicators like so: +You could also change the colours/style of the drag-and-drop indicator like so: ```jsx {6-9} import {Editor} from "@craftjs/core"; @@ -65,7 +65,11 @@ const App = () => { From 8f2b7e7e334195956723cb295a277d3ed17fb0e4 Mon Sep 17 00:00:00 2001 From: Prev Wong Date: Fri, 26 Jul 2024 16:40:52 +0800 Subject: [PATCH 15/28] chore: rollup config Inject Craft package version and export sourcemaps --- .changeset/fast-tigers-jump.md | 7 +++++++ packages/core/.npmignore | 3 ++- packages/core/package.json | 3 +++ packages/layers/.npmignore | 3 ++- packages/layers/package.json | 3 +++ packages/utils/.npmignore | 3 ++- packages/utils/package.json | 3 +++ rollup.config.js | 18 ++++++++++++++++++ tsconfig.json | 1 + 9 files changed, 41 insertions(+), 3 deletions(-) create mode 100644 .changeset/fast-tigers-jump.md diff --git a/.changeset/fast-tigers-jump.md b/.changeset/fast-tigers-jump.md new file mode 100644 index 000000000..b3f7b998b --- /dev/null +++ b/.changeset/fast-tigers-jump.md @@ -0,0 +1,7 @@ +--- +'@craftjs/core': patch +'@craftjs/layers': patch +'@craftjs/utils': patch +--- + +Inject Craft package version and export sourcemaps diff --git a/packages/core/.npmignore b/packages/core/.npmignore index a2fc6a34f..439d8afe7 100644 --- a/packages/core/.npmignore +++ b/packages/core/.npmignore @@ -1,4 +1,5 @@ src rollup.config.js tsconfig.json -nodemon.json \ No newline at end of file +nodemon.json +.rollup.cache \ No newline at end of file diff --git a/packages/core/package.json b/packages/core/package.json index 5f8bfc892..41e5c6ce0 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -21,6 +21,9 @@ "main": "./dist/cjs/index.js", "module": "./dist/esm/index.js", "types": "./lib/index.d.ts", + "files": [ + "dist" + ], "repository": { "type": "git", "url": "https://github.com/prevwong/craft.js/" diff --git a/packages/layers/.npmignore b/packages/layers/.npmignore index 0fdfc98d6..94579d8b4 100644 --- a/packages/layers/.npmignore +++ b/packages/layers/.npmignore @@ -1,3 +1,4 @@ src rollup.config.js -tsconfig.json \ No newline at end of file +tsconfig.json +.rollup.cache \ No newline at end of file diff --git a/packages/layers/package.json b/packages/layers/package.json index 434715d60..765af60b5 100644 --- a/packages/layers/package.json +++ b/packages/layers/package.json @@ -17,6 +17,9 @@ "module": "./dist/esm/index.js", "license": "MIT", "types": "./lib/index.d.ts", + "files": [ + "dist" + ], "scripts": { "start": "cross-env NODE_ENV=development ../../scripts/build.sh", "build": "cross-env NODE_ENV=production ../../scripts/build.sh", diff --git a/packages/utils/.npmignore b/packages/utils/.npmignore index a2fc6a34f..439d8afe7 100644 --- a/packages/utils/.npmignore +++ b/packages/utils/.npmignore @@ -1,4 +1,5 @@ src rollup.config.js tsconfig.json -nodemon.json \ No newline at end of file +nodemon.json +.rollup.cache \ No newline at end of file diff --git a/packages/utils/package.json b/packages/utils/package.json index cb133601f..f8a2d0fee 100644 --- a/packages/utils/package.json +++ b/packages/utils/package.json @@ -7,6 +7,9 @@ "main": "./dist/cjs/index.js", "module": "./dist/esm/index.js", "types": "./lib/index.d.ts", + "files": [ + "dist" + ], "scripts": { "start": "cross-env NODE_ENV=development ../../scripts/build.sh", "build": "cross-env NODE_ENV=production ../../scripts/build.sh", diff --git a/rollup.config.js b/rollup.config.js index 31f1bbaca..d92249a29 100644 --- a/rollup.config.js +++ b/rollup.config.js @@ -8,20 +8,38 @@ import typescript from '@rollup/plugin-typescript'; const shouldMinify = process.env.NODE_ENV === 'production'; const bundle = ['tslib']; +const injectPackageVersion = () => { + const pkg = require('./package.json'); + + return ` +if ( typeof window !== 'undefined' ) { + if ( !window['__CRAFTJS__'] ) { + window['__CRAFTJS__'] = {}; + } + + window['__CRAFTJS__']["${pkg.name}"] = "${pkg.version}"; +} + `; +}; + export default { input: './src/index.ts', output: [ { file: 'dist/esm/index.js', format: 'esm', + intro: injectPackageVersion(), globals: { react: 'React', 'react-dom': 'ReactDOM', }, + sourcemap: true, }, { file: 'dist/cjs/index.js', + intro: injectPackageVersion(), format: 'cjs', + sourcemap: true, }, ], external: (id) => { diff --git a/tsconfig.json b/tsconfig.json index 6b9bc3920..db6bbbbae 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -5,6 +5,7 @@ "allowSyntheticDefaultImports": true, "allowJs": true, "esModuleInterop": true, + "sourceMap": true, "paths": { "@craftjs/core": ["packages/core/src/index"], "@craftjs/*": ["packages/core/src/*"], From 07dc0db61554a5340be06b771b11661bd5a0db37 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" <41898282+github-actions[bot]@users.noreply.github.com> Date: Fri, 26 Jul 2024 20:18:48 +0800 Subject: [PATCH 16/28] chore: release (#684) --- .changeset/fast-tigers-jump.md | 7 ------- .changeset/modern-socks-retire.md | 6 ------ packages/core/CHANGELOG.md | 11 +++++++++++ packages/core/package.json | 4 ++-- packages/layers/CHANGELOG.md | 9 +++++++++ packages/layers/package.json | 4 ++-- packages/utils/CHANGELOG.md | 8 ++++++++ packages/utils/package.json | 2 +- yarn.lock | 6 +++--- 9 files changed, 36 insertions(+), 21 deletions(-) delete mode 100644 .changeset/fast-tigers-jump.md delete mode 100644 .changeset/modern-socks-retire.md diff --git a/.changeset/fast-tigers-jump.md b/.changeset/fast-tigers-jump.md deleted file mode 100644 index b3f7b998b..000000000 --- a/.changeset/fast-tigers-jump.md +++ /dev/null @@ -1,7 +0,0 @@ ---- -'@craftjs/core': patch -'@craftjs/layers': patch -'@craftjs/utils': patch ---- - -Inject Craft package version and export sourcemaps diff --git a/.changeset/modern-socks-retire.md b/.changeset/modern-socks-retire.md deleted file mode 100644 index f78074f6b..000000000 --- a/.changeset/modern-socks-retire.md +++ /dev/null @@ -1,6 +0,0 @@ ---- -'@craftjs/utils': patch -'@craftjs/core': patch ---- - -Allow customising dnd indicator style/classname diff --git a/packages/core/CHANGELOG.md b/packages/core/CHANGELOG.md index 508247b22..49ff02ef6 100644 --- a/packages/core/CHANGELOG.md +++ b/packages/core/CHANGELOG.md @@ -1,5 +1,16 @@ # @craftjs/core +## 0.2.9 + +### Patch Changes + +- [`8f2b7e7`](https://github.com/prevwong/craft.js/commit/8f2b7e7e334195956723cb295a277d3ed17fb0e4) Thanks [@prevwong](https://github.com/prevwong)! - Inject Craft package version and export sourcemaps + +* [#683](https://github.com/prevwong/craft.js/pull/683) [`b0a9e0b`](https://github.com/prevwong/craft.js/commit/b0a9e0bc65ebbc770a1ad093fac3e052d86fc2dc) Thanks [@prevwong](https://github.com/prevwong)! - Allow customising dnd indicator style/classname + +* Updated dependencies [[`8f2b7e7`](https://github.com/prevwong/craft.js/commit/8f2b7e7e334195956723cb295a277d3ed17fb0e4), [`b0a9e0b`](https://github.com/prevwong/craft.js/commit/b0a9e0bc65ebbc770a1ad093fac3e052d86fc2dc)]: + - @craftjs/utils@0.2.3 + ## 0.2.8 ### Patch Changes diff --git a/packages/core/package.json b/packages/core/package.json index 41e5c6ce0..863d303e2 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -1,6 +1,6 @@ { "name": "@craftjs/core", - "version": "0.2.8", + "version": "0.2.9", "description": "A React Framework for building extensible drag and drop page editors", "keywords": [ "react", @@ -38,7 +38,7 @@ "url": "https://github.com/prevwong/craft.js/issues" }, "dependencies": { - "@craftjs/utils": "^0.2.2", + "@craftjs/utils": "^0.2.3", "debounce": "^1.2.0", "lodash": "^4.17.21", "tiny-invariant": "^1.0.6" diff --git a/packages/layers/CHANGELOG.md b/packages/layers/CHANGELOG.md index d90e74fe0..9dbd9ae34 100644 --- a/packages/layers/CHANGELOG.md +++ b/packages/layers/CHANGELOG.md @@ -1,5 +1,14 @@ # @craftjs/layers +## 0.2.4 + +### Patch Changes + +- [`8f2b7e7`](https://github.com/prevwong/craft.js/commit/8f2b7e7e334195956723cb295a277d3ed17fb0e4) Thanks [@prevwong](https://github.com/prevwong)! - Inject Craft package version and export sourcemaps + +- Updated dependencies [[`8f2b7e7`](https://github.com/prevwong/craft.js/commit/8f2b7e7e334195956723cb295a277d3ed17fb0e4), [`b0a9e0b`](https://github.com/prevwong/craft.js/commit/b0a9e0bc65ebbc770a1ad093fac3e052d86fc2dc)]: + - @craftjs/utils@0.2.3 + ## 0.2.3 ### Patch Changes diff --git a/packages/layers/package.json b/packages/layers/package.json index 765af60b5..ffd8b8fd9 100644 --- a/packages/layers/package.json +++ b/packages/layers/package.json @@ -11,7 +11,7 @@ "web-builder", "react" ], - "version": "0.2.3", + "version": "0.2.4", "author": "Prev Wong ", "main": "./dist/cjs/index.js", "module": "./dist/esm/index.js", @@ -34,7 +34,7 @@ }, "homepage": "https://github.com/prevwong/craft.js/", "dependencies": { - "@craftjs/utils": "^0.2.2", + "@craftjs/utils": "^0.2.3", "react-contenteditable": "^3.3.3" }, "devDependencies": { diff --git a/packages/utils/CHANGELOG.md b/packages/utils/CHANGELOG.md index b91aed901..ba0e9a6f9 100644 --- a/packages/utils/CHANGELOG.md +++ b/packages/utils/CHANGELOG.md @@ -1,5 +1,13 @@ # @craftjs/utils +## 0.2.3 + +### Patch Changes + +- [`8f2b7e7`](https://github.com/prevwong/craft.js/commit/8f2b7e7e334195956723cb295a277d3ed17fb0e4) Thanks [@prevwong](https://github.com/prevwong)! - Inject Craft package version and export sourcemaps + +* [#683](https://github.com/prevwong/craft.js/pull/683) [`b0a9e0b`](https://github.com/prevwong/craft.js/commit/b0a9e0bc65ebbc770a1ad093fac3e052d86fc2dc) Thanks [@prevwong](https://github.com/prevwong)! - Allow customising dnd indicator style/classname + ## 0.2.2 ### Patch Changes diff --git a/packages/utils/package.json b/packages/utils/package.json index f8a2d0fee..da00f637c 100644 --- a/packages/utils/package.json +++ b/packages/utils/package.json @@ -1,7 +1,7 @@ { "name": "@craftjs/utils", "description": "Utilities used internally across the craft.js monorepo", - "version": "0.2.2", + "version": "0.2.3", "author": "Prev Wong ", "license": "MIT", "main": "./dist/cjs/index.js", diff --git a/yarn.lock b/yarn.lock index 17f955e24..3f527a777 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2517,7 +2517,7 @@ __metadata: version: 0.0.0-use.local resolution: "@craftjs/core@workspace:packages/core" dependencies: - "@craftjs/utils": ^0.2.2 + "@craftjs/utils": ^0.2.3 "@types/lodash": ^4.14.195 "@types/react": 18.0.27 debounce: ^1.2.0 @@ -2534,7 +2534,7 @@ __metadata: resolution: "@craftjs/layers@workspace:packages/layers" dependencies: "@babel/core": 7.7.4 - "@craftjs/utils": ^0.2.2 + "@craftjs/utils": ^0.2.3 "@svgr/rollup": 6.5.1 react-contenteditable: ^3.3.3 styled-components: 4.2.1 @@ -2545,7 +2545,7 @@ __metadata: languageName: unknown linkType: soft -"@craftjs/utils@^0.2.2, @craftjs/utils@workspace:packages/utils": +"@craftjs/utils@^0.2.3, @craftjs/utils@workspace:packages/utils": version: 0.0.0-use.local resolution: "@craftjs/utils@workspace:packages/utils" dependencies: From cd1388144637c8e788e8e245cbcb42d9d2490e12 Mon Sep 17 00:00:00 2001 From: Prev Wong Date: Sat, 27 Jul 2024 13:47:15 +0800 Subject: [PATCH 17/28] hotfix: regression missing types --- .changeset/good-readers-look.md | 7 +++++++ packages/core/package.json | 3 ++- packages/layers/package.json | 3 ++- packages/utils/package.json | 3 ++- 4 files changed, 13 insertions(+), 3 deletions(-) create mode 100644 .changeset/good-readers-look.md diff --git a/.changeset/good-readers-look.md b/.changeset/good-readers-look.md new file mode 100644 index 000000000..366ce92ae --- /dev/null +++ b/.changeset/good-readers-look.md @@ -0,0 +1,7 @@ +--- +'@craftjs/layers': patch +'@craftjs/utils': patch +'@craftjs/core': patch +--- + +Fix regression - include typings in npm package diff --git a/packages/core/package.json b/packages/core/package.json index 863d303e2..fa53de00f 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -22,7 +22,8 @@ "module": "./dist/esm/index.js", "types": "./lib/index.d.ts", "files": [ - "dist" + "dist", + "lib" ], "repository": { "type": "git", diff --git a/packages/layers/package.json b/packages/layers/package.json index ffd8b8fd9..e5785bc56 100644 --- a/packages/layers/package.json +++ b/packages/layers/package.json @@ -18,7 +18,8 @@ "license": "MIT", "types": "./lib/index.d.ts", "files": [ - "dist" + "dist", + "lib" ], "scripts": { "start": "cross-env NODE_ENV=development ../../scripts/build.sh", diff --git a/packages/utils/package.json b/packages/utils/package.json index da00f637c..6fe985642 100644 --- a/packages/utils/package.json +++ b/packages/utils/package.json @@ -8,7 +8,8 @@ "module": "./dist/esm/index.js", "types": "./lib/index.d.ts", "files": [ - "dist" + "dist", + "lib" ], "scripts": { "start": "cross-env NODE_ENV=development ../../scripts/build.sh", From 39ea4ab84bf6e6eb526ac236e56d5164b9222e46 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" <41898282+github-actions[bot]@users.noreply.github.com> Date: Sat, 27 Jul 2024 14:03:37 +0800 Subject: [PATCH 18/28] chore: release (#687) --- .changeset/good-readers-look.md | 7 ------- packages/core/CHANGELOG.md | 9 +++++++++ packages/core/package.json | 4 ++-- packages/layers/CHANGELOG.md | 9 +++++++++ packages/layers/package.json | 4 ++-- packages/utils/CHANGELOG.md | 6 ++++++ packages/utils/package.json | 2 +- yarn.lock | 6 +++--- 8 files changed, 32 insertions(+), 15 deletions(-) delete mode 100644 .changeset/good-readers-look.md diff --git a/.changeset/good-readers-look.md b/.changeset/good-readers-look.md deleted file mode 100644 index 366ce92ae..000000000 --- a/.changeset/good-readers-look.md +++ /dev/null @@ -1,7 +0,0 @@ ---- -'@craftjs/layers': patch -'@craftjs/utils': patch -'@craftjs/core': patch ---- - -Fix regression - include typings in npm package diff --git a/packages/core/CHANGELOG.md b/packages/core/CHANGELOG.md index 49ff02ef6..b6a1bfa8a 100644 --- a/packages/core/CHANGELOG.md +++ b/packages/core/CHANGELOG.md @@ -1,5 +1,14 @@ # @craftjs/core +## 0.2.10 + +### Patch Changes + +- [`cd13881`](https://github.com/prevwong/craft.js/commit/cd1388144637c8e788e8e245cbcb42d9d2490e12) Thanks [@prevwong](https://github.com/prevwong)! - Fix regression - include typings in npm package + +- Updated dependencies [[`cd13881`](https://github.com/prevwong/craft.js/commit/cd1388144637c8e788e8e245cbcb42d9d2490e12)]: + - @craftjs/utils@0.2.4 + ## 0.2.9 ### Patch Changes diff --git a/packages/core/package.json b/packages/core/package.json index fa53de00f..7f54da2f6 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -1,6 +1,6 @@ { "name": "@craftjs/core", - "version": "0.2.9", + "version": "0.2.10", "description": "A React Framework for building extensible drag and drop page editors", "keywords": [ "react", @@ -39,7 +39,7 @@ "url": "https://github.com/prevwong/craft.js/issues" }, "dependencies": { - "@craftjs/utils": "^0.2.3", + "@craftjs/utils": "^0.2.4", "debounce": "^1.2.0", "lodash": "^4.17.21", "tiny-invariant": "^1.0.6" diff --git a/packages/layers/CHANGELOG.md b/packages/layers/CHANGELOG.md index 9dbd9ae34..836239034 100644 --- a/packages/layers/CHANGELOG.md +++ b/packages/layers/CHANGELOG.md @@ -1,5 +1,14 @@ # @craftjs/layers +## 0.2.5 + +### Patch Changes + +- [`cd13881`](https://github.com/prevwong/craft.js/commit/cd1388144637c8e788e8e245cbcb42d9d2490e12) Thanks [@prevwong](https://github.com/prevwong)! - Fix regression - include typings in npm package + +- Updated dependencies [[`cd13881`](https://github.com/prevwong/craft.js/commit/cd1388144637c8e788e8e245cbcb42d9d2490e12)]: + - @craftjs/utils@0.2.4 + ## 0.2.4 ### Patch Changes diff --git a/packages/layers/package.json b/packages/layers/package.json index e5785bc56..cbd00fcc7 100644 --- a/packages/layers/package.json +++ b/packages/layers/package.json @@ -11,7 +11,7 @@ "web-builder", "react" ], - "version": "0.2.4", + "version": "0.2.5", "author": "Prev Wong ", "main": "./dist/cjs/index.js", "module": "./dist/esm/index.js", @@ -35,7 +35,7 @@ }, "homepage": "https://github.com/prevwong/craft.js/", "dependencies": { - "@craftjs/utils": "^0.2.3", + "@craftjs/utils": "^0.2.4", "react-contenteditable": "^3.3.3" }, "devDependencies": { diff --git a/packages/utils/CHANGELOG.md b/packages/utils/CHANGELOG.md index ba0e9a6f9..fb9ddc63f 100644 --- a/packages/utils/CHANGELOG.md +++ b/packages/utils/CHANGELOG.md @@ -1,5 +1,11 @@ # @craftjs/utils +## 0.2.4 + +### Patch Changes + +- [`cd13881`](https://github.com/prevwong/craft.js/commit/cd1388144637c8e788e8e245cbcb42d9d2490e12) Thanks [@prevwong](https://github.com/prevwong)! - Fix regression - include typings in npm package + ## 0.2.3 ### Patch Changes diff --git a/packages/utils/package.json b/packages/utils/package.json index 6fe985642..48b1f3da8 100644 --- a/packages/utils/package.json +++ b/packages/utils/package.json @@ -1,7 +1,7 @@ { "name": "@craftjs/utils", "description": "Utilities used internally across the craft.js monorepo", - "version": "0.2.3", + "version": "0.2.4", "author": "Prev Wong ", "license": "MIT", "main": "./dist/cjs/index.js", diff --git a/yarn.lock b/yarn.lock index 3f527a777..f17f7cb08 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2517,7 +2517,7 @@ __metadata: version: 0.0.0-use.local resolution: "@craftjs/core@workspace:packages/core" dependencies: - "@craftjs/utils": ^0.2.3 + "@craftjs/utils": ^0.2.4 "@types/lodash": ^4.14.195 "@types/react": 18.0.27 debounce: ^1.2.0 @@ -2534,7 +2534,7 @@ __metadata: resolution: "@craftjs/layers@workspace:packages/layers" dependencies: "@babel/core": 7.7.4 - "@craftjs/utils": ^0.2.3 + "@craftjs/utils": ^0.2.4 "@svgr/rollup": 6.5.1 react-contenteditable: ^3.3.3 styled-components: 4.2.1 @@ -2545,7 +2545,7 @@ __metadata: languageName: unknown linkType: soft -"@craftjs/utils@^0.2.3, @craftjs/utils@workspace:packages/utils": +"@craftjs/utils@^0.2.4, @craftjs/utils@workspace:packages/utils": version: 0.0.0-use.local resolution: "@craftjs/utils@workspace:packages/utils" dependencies: From 48cb5cb0526cd79bc64de6c09bf6a37d1492104c Mon Sep 17 00:00:00 2001 From: pixel-toys-chris-evans <121940392+pixel-toys-chris-evans@users.noreply.github.com> Date: Wed, 23 Oct 2024 11:00:43 +0100 Subject: [PATCH 19/28] fix: update styled-components (#707) --- .changeset/red-cameras-burn.md | 5 + .../landing/components/editor/RenderNode.tsx | 2 +- .../components/editor/Viewport/Header.tsx | 2 +- .../editor/Viewport/Sidebar/SidebarItem.tsx | 24 +- .../editor/Viewport/Sidebar/index.tsx | 10 +- .../components/editor/Viewport/Toolbox.tsx | 22 +- .../components/selectors/Button/index.tsx | 41 ++- .../landing/components/selectors/Resizer.tsx | 18 +- .../components/selectors/Video/index.tsx | 8 +- examples/landing/package.json | 2 +- packages/layers/package.json | 4 +- .../src/layers/DefaultLayer/DefaultLayer.tsx | 35 +-- .../DefaultLayer/DefaultLayerHeader.tsx | 34 +-- yarn.lock | 238 +++++++----------- 14 files changed, 209 insertions(+), 236 deletions(-) create mode 100644 .changeset/red-cameras-burn.md diff --git a/.changeset/red-cameras-burn.md b/.changeset/red-cameras-burn.md new file mode 100644 index 000000000..da5e396d8 --- /dev/null +++ b/.changeset/red-cameras-burn.md @@ -0,0 +1,5 @@ +--- +'@craftjs/layers': patch +--- + +Updated 'styled-components' from 4.x.x to 6.x.x diff --git a/examples/landing/components/editor/RenderNode.tsx b/examples/landing/components/editor/RenderNode.tsx index 8f849016c..f4ab8be62 100644 --- a/examples/landing/components/editor/RenderNode.tsx +++ b/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'; diff --git a/examples/landing/components/editor/Viewport/Header.tsx b/examples/landing/components/editor/Viewport/Header.tsx index 640e6b5ea..0a80d9890 100644 --- a/examples/landing/components/editor/Viewport/Header.tsx +++ b/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'; diff --git a/examples/landing/components/editor/Viewport/Sidebar/SidebarItem.tsx b/examples/landing/components/editor/Viewport/Sidebar/SidebarItem.tsx index b0b37bad1..40937890b 100644 --- a/examples/landing/components/editor/Viewport/Sidebar/SidebarItem.tsx +++ b/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 = ({ onChange, }) => { return ( - + { if (onChange) onChange(!visible); @@ -60,7 +66,7 @@ export const SidebarItem: React.FC = ({ {React.createElement(icon, { className: 'w-4 h-4 mr-2' })}

{title}

- + diff --git a/examples/landing/components/editor/Viewport/Sidebar/index.tsx b/examples/landing/components/editor/Viewport/Sidebar/index.tsx index ffe7c42aa..feaeef80f 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 ( - +
` +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 (
@@ -61,7 +61,7 @@ export const Toolbox = () => { } > - + @@ -72,21 +72,21 @@ export const Toolbox = () => { } > - +
create(ref,
create(ref,
{children && children.length ? ( - toggleLayer()}> + toggleLayer()}> ) : null} diff --git a/yarn.lock b/yarn.lock index f17f7cb08..519264eda 100644 --- a/yarn.lock +++ b/yarn.lock @@ -523,7 +523,7 @@ __metadata: languageName: node linkType: hard -"@babel/helper-annotate-as-pure@npm:^7.0.0, @babel/helper-annotate-as-pure@npm:^7.12.13": +"@babel/helper-annotate-as-pure@npm:^7.12.13": version: 7.12.13 resolution: "@babel/helper-annotate-as-pure@npm:7.12.13" dependencies: @@ -711,7 +711,7 @@ __metadata: languageName: node linkType: hard -"@babel/helper-module-imports@npm:^7.0.0, @babel/helper-module-imports@npm:^7.13.12": +"@babel/helper-module-imports@npm:^7.13.12": version: 7.13.12 resolution: "@babel/helper-module-imports@npm:7.13.12" dependencies: @@ -2537,11 +2537,11 @@ __metadata: "@craftjs/utils": ^0.2.4 "@svgr/rollup": 6.5.1 react-contenteditable: ^3.3.3 - 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" languageName: unknown linkType: soft @@ -3171,42 +3171,26 @@ __metadata: languageName: node linkType: hard -"@emotion/is-prop-valid@npm:^0.7.3": - version: 0.7.3 - resolution: "@emotion/is-prop-valid@npm:0.7.3" - dependencies: - "@emotion/memoize": 0.7.1 - checksum: 76c2cb5043b0a81dd5c1a8d76baa7c273e9cb5d177efaa482406b0e170ca2ce4f9274f299769e5d5489b319ba2fd94dfd85b912752242c23b159098606da68a9 - languageName: node - linkType: hard - -"@emotion/is-prop-valid@npm:^0.8.1": - version: 0.8.5 - resolution: "@emotion/is-prop-valid@npm:0.8.5" +"@emotion/is-prop-valid@npm:1.2.2": + version: 1.2.2 + resolution: "@emotion/is-prop-valid@npm:1.2.2" dependencies: - "@emotion/memoize": 0.7.3 - checksum: 8aca42d69be81035215310cb126ce9804bfe435c9757d6586fb51d43b34ddbe84bfe33d8e56f06d62c832d836391c2cf735f4df56d8de1eb17f633b8c2ae23aa - languageName: node - linkType: hard - -"@emotion/memoize@npm:0.7.1": - version: 0.7.1 - resolution: "@emotion/memoize@npm:0.7.1" - checksum: fec25e74c3a4af920bfdb0f552c16f648c8f4343d51cb073af85fcec1a382ce041a4e082f458a999dc3599e9d768c0dd28e5accd6066169e01364b270b7036cf + "@emotion/memoize": ^0.8.1 + checksum: 61f6b128ea62b9f76b47955057d5d86fcbe2a6989d2cd1e583daac592901a950475a37d049b9f7a7c6aa8758a33b408735db759fdedfd1f629df0f85ab60ea25 languageName: node linkType: hard -"@emotion/memoize@npm:0.7.3": - version: 0.7.3 - resolution: "@emotion/memoize@npm:0.7.3" - checksum: 9c0372982eb360425a03272111a748a6ca4b103d52bc460c29907501bff81007f731a16a55508a0818d826c3e9ac05f8c31beb21e173ea7920f3ee3503c2e146 +"@emotion/memoize@npm:^0.8.1": + version: 0.8.1 + resolution: "@emotion/memoize@npm:0.8.1" + checksum: a19cc01a29fcc97514948eaab4dc34d8272e934466ed87c07f157887406bc318000c69ae6f813a9001c6a225364df04249842a50e692ef7a9873335fbcc141b0 languageName: node linkType: hard -"@emotion/unitless@npm:^0.7.0": - version: 0.7.4 - resolution: "@emotion/unitless@npm:0.7.4" - checksum: 45714ce24f6e0b4b3ad3376cc12e612e15d145307feb52afa0bf7d3ada550e809b0ed0553d2ca9212f1fdb9da44a8f369afa78c760f3365c175118e2feec9288 +"@emotion/unitless@npm:0.8.1": + version: 0.8.1 + resolution: "@emotion/unitless@npm:0.8.1" + checksum: 385e21d184d27853bb350999471f00e1429fa4e83182f46cd2c164985999d9b46d558dc8b9cc89975cb337831ce50c31ac2f33b15502e85c299892e67e7b4a88 languageName: node linkType: hard @@ -5575,6 +5559,13 @@ __metadata: languageName: node linkType: hard +"@types/stylis@npm:4.2.5": + version: 4.2.5 + resolution: "@types/stylis@npm:4.2.5" + checksum: 24f91719db5569979e9e2f197e050ef82e1fd72474e8dc45bca38d48ee56481eae0f0d4a7ac172540d7774b45a2a78d901a4c6d07bba77a33dbccff464ea3edf + languageName: node + linkType: hard + "@types/tough-cookie@npm:*": version: 4.0.2 resolution: "@types/tough-cookie@npm:4.0.2" @@ -7014,27 +7005,6 @@ __metadata: languageName: node linkType: hard -"babel-plugin-styled-components@npm:>= 1": - version: 1.10.6 - resolution: "babel-plugin-styled-components@npm:1.10.6" - dependencies: - "@babel/helper-annotate-as-pure": ^7.0.0 - "@babel/helper-module-imports": ^7.0.0 - babel-plugin-syntax-jsx: ^6.18.0 - lodash: ^4.17.11 - peerDependencies: - styled-components: ">= 2" - checksum: 80998176f91c8f681f612ee0f8d2d8c93afeb1cc0cb71abf69ffed0ba192c0069d15c69994c6a0ca9a00ad125487eb4ac28458fd4a71b707b8204d8569575b4a - languageName: node - linkType: hard - -"babel-plugin-syntax-jsx@npm:^6.18.0": - version: 6.18.0 - resolution: "babel-plugin-syntax-jsx@npm:6.18.0" - checksum: 0c7ce5b81d6cfc01a7dd7a76a9a8f090ee02ba5c890310f51217ef1a7e6163fb7848994bbc14fd560117892e82240df9c7157ad0764da67ca5f2afafb73a7d27 - languageName: node - linkType: hard - "babel-plugin-transform-react-remove-prop-types@npm:^0.4.24": version: 0.4.24 resolution: "babel-plugin-transform-react-remove-prop-types@npm:0.4.24" @@ -8905,14 +8875,14 @@ clsx@latest: languageName: node linkType: hard -"css-to-react-native@npm:^2.2.2": - version: 2.3.2 - resolution: "css-to-react-native@npm:2.3.2" +"css-to-react-native@npm:3.2.0": + version: 3.2.0 + resolution: "css-to-react-native@npm:3.2.0" dependencies: camelize: ^1.0.0 css-color-keywords: ^1.0.0 - postcss-value-parser: ^3.3.0 - checksum: 0cc6ea2e519614c8d4e1e8e3872344b137f8bd091f0b21335037adbaa894b600b2cdb10b14d7f9f4047f6465dcd14daff10fd7ddbfa4f2ac300093687a9f0046 + postcss-value-parser: ^4.0.2 + checksum: 263be65e805aef02c3f20c064665c998a8c35293e1505dbe6e3054fb186b01a9897ac6cf121f9840e5a9dfe3fb3994f6fcd0af84a865f1df78ba5bf89e77adce languageName: node linkType: hard @@ -9181,6 +9151,13 @@ clsx@latest: languageName: node linkType: hard +"csstype@npm:3.1.3": + version: 3.1.3 + resolution: "csstype@npm:3.1.3" + checksum: 8db785cc92d259102725b3c694ec0c823f5619a84741b5c7991b8ad135dfaa66093038a1cc63e03361a6cd28d122be48f2106ae72334e067dd619a51f49eddf7 + languageName: node + linkType: hard + "csstype@npm:^2.2.0, csstype@npm:^2.5.2, csstype@npm:^2.6.5, csstype@npm:^2.6.7": version: 2.6.7 resolution: "csstype@npm:2.6.7" @@ -10871,7 +10848,7 @@ clsx@latest: 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 tailwindcss: latest typescript: 4.9.5 languageName: unknown @@ -14038,13 +14015,6 @@ clsx@latest: languageName: node linkType: hard -"is-what@npm:^3.3.1": - version: 3.3.1 - resolution: "is-what@npm:3.3.1" - checksum: 23f40889a754f472b03504f20605cd234e97506f6a797e6d1f24193463dbbbbad7348c2b30aa217210280d1d9ef9bb400773fe292d61660155492e94087496cc - languageName: node - linkType: hard - "is-whitespace-character@npm:^1.0.0": version: 1.0.3 resolution: "is-whitespace-character@npm:1.0.3" @@ -16010,13 +15980,6 @@ clsx@latest: languageName: node linkType: hard -"memoize-one@npm:^5.0.0": - version: 5.1.1 - resolution: "memoize-one@npm:5.1.1" - checksum: 51a8e96cd94614909e1656843ecb9307440fbfa64994be12978bb30bc190f8e66010cb7a35d3ee641a52302ce701dcea990b636ea2ef3c1cf94a50b4651f5446 - languageName: node - linkType: hard - "memorystream@npm:^0.3.1": version: 0.3.1 resolution: "memorystream@npm:0.3.1" @@ -16062,15 +16025,6 @@ clsx@latest: languageName: node linkType: hard -"merge-anything@npm:^2.2.4": - version: 2.4.1 - resolution: "merge-anything@npm:2.4.1" - dependencies: - is-what: ^3.3.1 - checksum: 00f8b1bc1fd8af1d7573fff10e04df369da725aed5f9442c953a275f5ed5f66c919b5a2eb8ada74fb0a411ad318c9bdf97b3721b9120f7085b02059b479468a5 - languageName: node - linkType: hard - "merge-descriptors@npm:1.0.1": version: 1.0.1 resolution: "merge-descriptors@npm:1.0.1" @@ -16604,6 +16558,15 @@ clsx@latest: languageName: node linkType: hard +"nanoid@npm:^3.3.7": + version: 3.3.7 + resolution: "nanoid@npm:3.3.7" + bin: + nanoid: bin/nanoid.cjs + checksum: d36c427e530713e4ac6567d488b489a36582ef89da1d6d4e3b87eded11eb10d7042a877958c6f104929809b2ab0bafa17652b076cdf84324aa75b30b722204f2 + languageName: node + linkType: hard + "natural-compare-lite@npm:^1.4.0": version: 1.4.0 resolution: "natural-compare-lite@npm:1.4.0" @@ -19436,6 +19399,17 @@ clsx@latest: languageName: node linkType: hard +"postcss@npm:8.4.38": + version: 8.4.38 + resolution: "postcss@npm:8.4.38" + dependencies: + nanoid: ^3.3.7 + picocolors: ^1.0.0 + source-map-js: ^1.2.0 + checksum: 649f9e60a763ca4b5a7bbec446a069edf07f057f6d780a5a0070576b841538d1ecf7dd888f2fbfd1f76200e26c969e405aeeae66332e6927dbdc8bdcb90b9451 + languageName: node + linkType: hard + "postcss@npm:^6.0.9": version: 6.0.23 resolution: "postcss@npm:6.0.23" @@ -19707,7 +19681,7 @@ clsx@latest: languageName: node linkType: hard -"prop-types@latest, prop-types@npm:^15.5.10, prop-types@npm:^15.5.3, prop-types@npm:^15.5.4, prop-types@npm:^15.6.0, prop-types@npm:^15.6.2, prop-types@npm:^15.7.1, prop-types@npm:^15.7.2": +"prop-types@latest, prop-types@npm:^15.5.10, prop-types@npm:^15.5.3, prop-types@npm:^15.6.0, prop-types@npm:^15.6.2, prop-types@npm:^15.7.1, prop-types@npm:^15.7.2": version: 15.7.2 resolution: "prop-types@npm:15.7.2" dependencies: @@ -21585,7 +21559,7 @@ clsx@latest: languageName: node linkType: hard -"shallowequal@npm:^1.1.0": +"shallowequal@npm:1.1.0, shallowequal@npm:^1.1.0": version: 1.1.0 resolution: "shallowequal@npm:1.1.0" checksum: f4c1de0837f106d2dbbfd5d0720a5d059d1c66b42b580965c8f06bb1db684be8783538b684092648c981294bf817869f743a066538771dbecb293df78f765e00 @@ -21909,6 +21883,13 @@ clsx@latest: languageName: node linkType: hard +"source-map-js@npm:^1.2.0": + version: 1.2.1 + resolution: "source-map-js@npm:1.2.1" + checksum: 4eb0cd997cdf228bc253bcaff9340afeb706176e64868ecd20efbe6efea931465f43955612346d6b7318789e5265bdc419bc7669c1cebe3db0eb255f57efa76b + languageName: node + linkType: hard + "source-map-support@npm:0.5.13": version: 0.5.13 resolution: "source-map-support@npm:0.5.13" @@ -22508,49 +22489,23 @@ clsx@latest: languageName: node linkType: hard -"styled-components@npm:4.2.1": - version: 4.2.1 - resolution: "styled-components@npm:4.2.1" - dependencies: - "@babel/helper-module-imports": ^7.0.0 - "@emotion/is-prop-valid": ^0.7.3 - "@emotion/unitless": ^0.7.0 - babel-plugin-styled-components: ">= 1" - css-to-react-native: ^2.2.2 - memoize-one: ^5.0.0 - prop-types: ^15.5.4 - react-is: ^16.6.0 - stylis: ^3.5.0 - stylis-rule-sheet: ^0.0.10 - supports-color: ^5.5.0 - peerDependencies: - react: ">= 16.3.0" - react-dom: ">= 16.3.0" - checksum: 9e84c2ec05fcec6505344d9793f2f069c144d66615924e06ac4af7a0a68f8e65dde6b2d1ed5f293af2087bbeedce0eb17aa75b84927074fabf58bff1c587e956 - languageName: node - linkType: hard - -"styled-components@npm:4.4.1": - version: 4.4.1 - resolution: "styled-components@npm:4.4.1" +"styled-components@npm:6.1.13": + version: 6.1.13 + resolution: "styled-components@npm:6.1.13" dependencies: - "@babel/helper-module-imports": ^7.0.0 - "@babel/traverse": ^7.0.0 - "@emotion/is-prop-valid": ^0.8.1 - "@emotion/unitless": ^0.7.0 - babel-plugin-styled-components: ">= 1" - css-to-react-native: ^2.2.2 - memoize-one: ^5.0.0 - merge-anything: ^2.2.4 - prop-types: ^15.5.4 - react-is: ^16.6.0 - stylis: ^3.5.0 - stylis-rule-sheet: ^0.0.10 - supports-color: ^5.5.0 + "@emotion/is-prop-valid": 1.2.2 + "@emotion/unitless": 0.8.1 + "@types/stylis": 4.2.5 + css-to-react-native: 3.2.0 + csstype: 3.1.3 + postcss: 8.4.38 + shallowequal: 1.1.0 + stylis: 4.3.2 + tslib: 2.6.2 peerDependencies: - react: ">= 16.3.0" - react-dom: ">= 16.3.0" - checksum: df137c7f621b4250cb40e0cd915275a01d2cef0f5104314a9b8fd7fe4127787f789ca9331b958164203f847e796b03e6e315dbdd6f526b4e4d484f39077950c6 + react: ">= 16.8.0" + react-dom: ">= 16.8.0" + checksum: cb836c5d4cc8d183f4b70a4a1b1aa13551c57389e9c8fe3286619eef9fc81466fee09c39a1c8b5aa03deb0e466e4d5ee04921f7d9f3b7afe4744e539e6047550 languageName: node linkType: hard @@ -22593,19 +22548,10 @@ clsx@latest: languageName: node linkType: hard -"stylis-rule-sheet@npm:^0.0.10": - version: 0.0.10 - resolution: "stylis-rule-sheet@npm:0.0.10" - peerDependencies: - stylis: ^3.5.0 - checksum: 97ad016c64ecce8d4b2c2c1c3cf3260de3c0e2b151e78f90ded6cc1bfcca536625a77277af16a9c8a241236a9e4fd5b70d88dfa32e9b48afaddb8f102a95582d - languageName: node - linkType: hard - -"stylis@npm:^3.5.0": - version: 3.5.4 - resolution: "stylis@npm:3.5.4" - checksum: 3673a748ad236219bd77ca9c0a8730b8726812e612cbc844aa6f029f13666a10cf2825a5f8d41f05e8af02b5987d31b7d3ebe995e4b42e0255366fec23489b77 +"stylis@npm:4.3.2": + version: 4.3.2 + resolution: "stylis@npm:4.3.2" + checksum: 0faa8a97ff38369f47354376cd9f0def9bf12846da54c28c5987f64aaf67dcb6f00dce88a8632013bfb823b2c4d1d62a44f4ac20363a3505a7ab4e21b70179fc languageName: node linkType: hard @@ -23180,6 +23126,13 @@ clsx@latest: languageName: node linkType: hard +"tslib@npm:2.6.2, tslib@npm:^2.3.0": + version: 2.6.2 + resolution: "tslib@npm:2.6.2" + checksum: 329ea56123005922f39642318e3d1f0f8265d1e7fcb92c633e0809521da75eeaca28d2cf96d7248229deb40e5c19adf408259f4b9640afd20d13aecc1430f3ad + languageName: node + linkType: hard + "tslib@npm:^1.8.1, tslib@npm:^1.9.0": version: 1.14.1 resolution: "tslib@npm:1.14.1" @@ -23201,13 +23154,6 @@ clsx@latest: languageName: node linkType: hard -"tslib@npm:^2.3.0": - version: 2.6.2 - resolution: "tslib@npm:2.6.2" - checksum: 329ea56123005922f39642318e3d1f0f8265d1e7fcb92c633e0809521da75eeaca28d2cf96d7248229deb40e5c19adf408259f4b9640afd20d13aecc1430f3ad - languageName: node - linkType: hard - "tsutils@npm:^3.17.1": version: 3.17.1 resolution: "tsutils@npm:3.17.1" From 2f133d99bcc32d7ed9f9aa6069585af23ac6e226 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bj=C3=B6rn=20Friedrichs?= <2217052+itsbjoern@users.noreply.github.com> Date: Thu, 24 Oct 2024 03:22:23 +0100 Subject: [PATCH 20/28] feat: allow layers to utilise CoreEventHandler mouseleave options (#705) --- .changeset/smooth-elephants-clean.md | 6 ++++++ packages/core/src/events/CoreEventHandlers.ts | 2 +- .../core/src/events/DefaultEventHandlers.ts | 12 ++++++++---- packages/layers/src/events/LayerHandlers.ts | 19 +++++++++++++++++++ 4 files changed, 34 insertions(+), 5 deletions(-) create mode 100644 .changeset/smooth-elephants-clean.md diff --git a/.changeset/smooth-elephants-clean.md b/.changeset/smooth-elephants-clean.md new file mode 100644 index 000000000..f9a1882a7 --- /dev/null +++ b/.changeset/smooth-elephants-clean.md @@ -0,0 +1,6 @@ +--- +'@craftjs/core': patch +'@craftjs/layers': patch +--- + +Use removeHoverOnMouseleave option for layers package diff --git a/packages/core/src/events/CoreEventHandlers.ts b/packages/core/src/events/CoreEventHandlers.ts index efb032605..e56f41342 100644 --- a/packages/core/src/events/CoreEventHandlers.ts +++ b/packages/core/src/events/CoreEventHandlers.ts @@ -8,7 +8,7 @@ export interface CreateHandlerOptions { } export class CoreEventHandlers extends EventHandlers< - { store: EditorStore } & O + { store: EditorStore; removeHoverOnMouseleave: boolean } & O > { handlers() { return { diff --git a/packages/core/src/events/DefaultEventHandlers.ts b/packages/core/src/events/DefaultEventHandlers.ts index 17ae097e1..5e03d18a5 100644 --- a/packages/core/src/events/DefaultEventHandlers.ts +++ b/packages/core/src/events/DefaultEventHandlers.ts @@ -138,10 +138,14 @@ export class DefaultEventHandlers extends CoreEventHandlers< let unbindMouseleave: (() => void) | null = null; if (this.options.removeHoverOnMouseleave) { - this.addCraftEventListener(el, 'mouseleave', (e) => { - e.craft.stopPropagation(); - store.actions.setNodeEvent('hovered', null); - }); + unbindMouseleave = this.addCraftEventListener( + el, + 'mouseleave', + (e) => { + e.craft.stopPropagation(); + store.actions.setNodeEvent('hovered', null); + } + ); } return () => { diff --git a/packages/layers/src/events/LayerHandlers.ts b/packages/layers/src/events/LayerHandlers.ts index 2d3849a9d..a9957febd 100644 --- a/packages/layers/src/events/LayerHandlers.ts +++ b/packages/layers/src/events/LayerHandlers.ts @@ -42,6 +42,19 @@ export class LayerHandlers extends DerivedCoreEventHandlers<{ } ); + let unbindMouseleave: (() => void) | null = null; + + if (this.derived.options.removeHoverOnMouseleave) { + unbindMouseleave = this.addCraftEventListener( + el, + 'mouseleave', + (e) => { + e.craft.stopPropagation(); + layerStore.actions.setLayerEvent('hovered', null); + } + ); + } + const unbindDragOver = this.addCraftEventListener( el, 'dragover', @@ -174,6 +187,12 @@ export class LayerHandlers extends DerivedCoreEventHandlers<{ unbindMouseOver(); unbindDragOver(); unbindDragEnter(); + + if (!unbindMouseleave) { + return; + } + + unbindMouseleave(); }; }, layerHeader: (el: HTMLElement, layerId: NodeId) => { From 218733c0f5ba918de1c63a32c44b9b98940a7aa0 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" <41898282+github-actions[bot]@users.noreply.github.com> Date: Thu, 24 Oct 2024 23:04:56 +0700 Subject: [PATCH 21/28] chore: release (#708) --- .changeset/red-cameras-burn.md | 5 ----- .changeset/smooth-elephants-clean.md | 6 ------ packages/core/CHANGELOG.md | 6 ++++++ packages/core/package.json | 2 +- packages/layers/CHANGELOG.md | 8 ++++++++ packages/layers/package.json | 2 +- 6 files changed, 16 insertions(+), 13 deletions(-) delete mode 100644 .changeset/red-cameras-burn.md delete mode 100644 .changeset/smooth-elephants-clean.md diff --git a/.changeset/red-cameras-burn.md b/.changeset/red-cameras-burn.md deleted file mode 100644 index da5e396d8..000000000 --- a/.changeset/red-cameras-burn.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@craftjs/layers': patch ---- - -Updated 'styled-components' from 4.x.x to 6.x.x diff --git a/.changeset/smooth-elephants-clean.md b/.changeset/smooth-elephants-clean.md deleted file mode 100644 index f9a1882a7..000000000 --- a/.changeset/smooth-elephants-clean.md +++ /dev/null @@ -1,6 +0,0 @@ ---- -'@craftjs/core': patch -'@craftjs/layers': patch ---- - -Use removeHoverOnMouseleave option for layers package diff --git a/packages/core/CHANGELOG.md b/packages/core/CHANGELOG.md index b6a1bfa8a..dbb164554 100644 --- a/packages/core/CHANGELOG.md +++ b/packages/core/CHANGELOG.md @@ -1,5 +1,11 @@ # @craftjs/core +## 0.2.11 + +### Patch Changes + +- [#705](https://github.com/prevwong/craft.js/pull/705) [`2f133d9`](https://github.com/prevwong/craft.js/commit/2f133d99bcc32d7ed9f9aa6069585af23ac6e226) Thanks [@itsbjoern](https://github.com/itsbjoern)! - Use removeHoverOnMouseleave option for layers package + ## 0.2.10 ### Patch Changes diff --git a/packages/core/package.json b/packages/core/package.json index 7f54da2f6..6a2c67559 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -1,6 +1,6 @@ { "name": "@craftjs/core", - "version": "0.2.10", + "version": "0.2.11", "description": "A React Framework for building extensible drag and drop page editors", "keywords": [ "react", diff --git a/packages/layers/CHANGELOG.md b/packages/layers/CHANGELOG.md index 836239034..cd443e041 100644 --- a/packages/layers/CHANGELOG.md +++ b/packages/layers/CHANGELOG.md @@ -1,5 +1,13 @@ # @craftjs/layers +## 0.2.6 + +### Patch Changes + +- [#707](https://github.com/prevwong/craft.js/pull/707) [`48cb5cb`](https://github.com/prevwong/craft.js/commit/48cb5cb0526cd79bc64de6c09bf6a37d1492104c) Thanks [@pixel-toys-chris-evans](https://github.com/pixel-toys-chris-evans)! - Updated 'styled-components' from 4.x.x to 6.x.x + +* [#705](https://github.com/prevwong/craft.js/pull/705) [`2f133d9`](https://github.com/prevwong/craft.js/commit/2f133d99bcc32d7ed9f9aa6069585af23ac6e226) Thanks [@itsbjoern](https://github.com/itsbjoern)! - Use removeHoverOnMouseleave option for layers package + ## 0.2.5 ### Patch Changes diff --git a/packages/layers/package.json b/packages/layers/package.json index 6bc2d20cb..950868a8a 100644 --- a/packages/layers/package.json +++ b/packages/layers/package.json @@ -11,7 +11,7 @@ "web-builder", "react" ], - "version": "0.2.5", + "version": "0.2.6", "author": "Prev Wong ", "main": "./dist/cjs/index.js", "module": "./dist/esm/index.js", From 1231d0b58bf4b353bc7bdecd195ee906b0be02fa Mon Sep 17 00:00:00 2001 From: Prev Wong Date: Fri, 22 Nov 2024 21:11:01 +0800 Subject: [PATCH 22/28] =?UTF-8?q?chore:=20sponsors=20=E2=9D=A4=EF=B8=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/core/README.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/core/README.md b/packages/core/README.md index 7d8d7e872..d30251674 100644 --- a/packages/core/README.md +++ b/packages/core/README.md @@ -218,7 +218,7 @@ Craft.js is released under the [MIT license](https://github.com/prevwong/craft.j ### Sponsors -- [Tangro](https://opencollective.com/tangro-software-components-gmbh) +- [eye-square](https://github.com/eye-square) ### Backers - [Tekeste Kidanu](https://opencollective.com/guest-1703f486) @@ -226,6 +226,6 @@ Craft.js is released under the [MIT license](https://github.com/prevwong/craft.j - [Mattermix](https://opencollective.com/mattermix) - [muttenzer](https://github.com/muttenzer) - [ITCuw](https://github.com/ITCuw) -- [quan](https://github.com/qu8n) - [Victor Vanegas](vicvans20) -- [kasayo](https://opencollective.com/kasayo) +- [Andreas Thoelke](https://github.com/andreasthoelke) +- [Saltcorn](https://github.com/saltcorn) From 552a1f3f287bb4c3c452f5a3aa47522c616c8d2f Mon Sep 17 00:00:00 2001 From: Prev Wong Date: Fri, 27 Dec 2024 19:57:53 +0700 Subject: [PATCH 23/28] chore: update sponsors --- packages/core/README.md | 1 + site/docs/sponsor.md | 7 ++++--- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/packages/core/README.md b/packages/core/README.md index d30251674..104ab94b8 100644 --- a/packages/core/README.md +++ b/packages/core/README.md @@ -219,6 +219,7 @@ Craft.js is released under the [MIT license](https://github.com/prevwong/craft.j ### Sponsors - [eye-square](https://github.com/eye-square) +- [api4ui](https://github.com/api4ui) ### Backers - [Tekeste Kidanu](https://opencollective.com/guest-1703f486) diff --git a/site/docs/sponsor.md b/site/docs/sponsor.md index 9295bb84e..344ed13ef 100755 --- a/site/docs/sponsor.md +++ b/site/docs/sponsor.md @@ -11,7 +11,8 @@ You can choose to contribute via [Github Sponsors](https://github.com/sponsors/p ### Sponsors -- [Tangro](https://opencollective.com/tangro-software-components-gmbh) +- [eye-square](https://github.com/eye-square) +- [api4ui](https://github.com/api4ui) ### Backers - [Tekeste Kidanu](https://opencollective.com/guest-1703f486) @@ -19,6 +20,6 @@ You can choose to contribute via [Github Sponsors](https://github.com/sponsors/p - [Mattermix](https://opencollective.com/mattermix) - [muttenzer](https://github.com/muttenzer) - [ITCuw](https://github.com/ITCuw) -- [quan](https://github.com/qu8n) - [Victor Vanegas](vicvans20) -- [kasayo](https://opencollective.com/kasayo) +- [Andreas Thoelke](https://github.com/andreasthoelke) +- [Saltcorn](https://github.com/saltcorn) From 0bac19d9c57c3c62e50c446e6a4881a4324cd818 Mon Sep 17 00:00:00 2001 From: Sven Jensen Date: Wed, 5 Feb 2025 00:43:09 -0800 Subject: [PATCH 24/28] chore: typo in core concepts docs (#725) --- site/docs/concepts/user-components.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/site/docs/concepts/user-components.md b/site/docs/concepts/user-components.md index 294bf236f..490c018b5 100755 --- a/site/docs/concepts/user-components.md +++ b/site/docs/concepts/user-components.md @@ -156,7 +156,7 @@ Text.craft = { ## Related Components -What happens if you need to design some component to complement our user component? For instance, if we were planning on building a Toolbar somewhere in our page editor, we would like the Toolbar to display a bunch of text inputs to allow the user the edit the currently selected component. It would be great if we could retrieve a specific component that has all the relevant inputs for the user to edit the currently selected component. +What happens if you need to design some component to complement our user component? For instance, if we were planning on building a Toolbar somewhere in our page editor, we would like the Toolbar to display a bunch of text inputs to allow the user to edit the currently selected component. It would be great if we could retrieve a specific component that has all the relevant inputs for the user to edit the currently selected component. This is where related components become useful. These components share the same corresponding `Node` as the actual user component, hence the `useNode` hook that we have been using all this while will be made available to these components as well. @@ -351,4 +351,4 @@ const Container = ({background, title, children}) => { } } ``` ---> \ No newline at end of file +--> From 3f91c05c44f2704c50b86787c4b2442d656e3ea0 Mon Sep 17 00:00:00 2001 From: Ehsan Maders Date: Wed, 5 Feb 2025 10:43:51 +0200 Subject: [PATCH 25/28] chore(docs): update history methods api doc (#712) --- site/docs/api/useEditor.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/site/docs/api/useEditor.md b/site/docs/api/useEditor.md index b97c1cc80..76b60098f 100644 --- a/site/docs/api/useEditor.md +++ b/site/docs/api/useEditor.md @@ -47,7 +47,8 @@ const { connectors, actions, query, ...collected } = useEditor(collector); ["undo", "() => void", "Undo the last recorded action"], ["redo", "() => void", "Redo the last undone action"], ["ignore", "() => ActionMethods", "Run an action without recording its changes in the history"], - ["throttle", "(throttleRate: number = 500) => ActionMethods", "Run an action while throttling its changes recorded to the history. This is useful if you need to group the changes made by a certain action as a single history record"], + ["throttle", "(throttleRate: number = 500) => ActionMethods", "Run an action while throttling its changes recorded to the history. This is useful if you need to group the changes made by a certain action as a single history record within a specified time window (throttleRate)."], + ["merge", "() => ActionMethods", "Run an action and merge its changes into the latest recorded history entry. This is useful for combining multiple related changes into a single history record."], ]] ]], ["query", "QueryMethods", [ From ace25f137e3b95f515207d9f06afc4526faa1202 Mon Sep 17 00:00:00 2001 From: Prev Wong Date: Fri, 14 Feb 2025 15:14:17 +0800 Subject: [PATCH 26/28] feat: add support for react 19 (#726) --- .changeset/angry-panthers-type.md | 7 + examples/basic/components/Header.js | 4 +- examples/basic/components/SettingsPanel.js | 2 +- examples/basic/components/Toolbox.js | 7 +- examples/basic/components/Topbar.js | 2 +- examples/basic/components/user/Button.js | 2 +- examples/basic/components/user/Container.js | 9 +- examples/basic/components/user/Text.js | 2 +- examples/basic/next.config.js | 1 + examples/basic/package.json | 15 +- examples/basic/pages/_app.js | 4 +- examples/basic/pages/_document.js | 72 +- examples/basic/pages/about.js | 45 - examples/basic/pages/index.js | 21 +- examples/basic/src/Link.js | 2 +- examples/basic/src/ProTip.js | 37 - examples/basic/src/theme.js | 8 +- .../landing/components/editor/RenderNode.tsx | 30 +- .../editor/Toolbar/ToolbarDropdown.tsx | 2 +- .../components/editor/Toolbar/ToolbarItem.tsx | 77 +- .../editor/Toolbar/ToolbarRadio.tsx | 54 +- .../editor/Toolbar/ToolbarSection.tsx | 84 +- .../editor/Toolbar/ToolbarTextInput.tsx | 76 +- .../components/editor/Viewport/Header.tsx | 8 +- .../components/editor/Viewport/Toolbox.tsx | 56 +- .../components/editor/Viewport/index.tsx | 4 +- .../components/selectors/Button/index.tsx | 4 +- .../components/selectors/Custom1/index.tsx | 9 +- .../components/selectors/Custom2/index.tsx | 7 +- .../components/selectors/Custom3/index.tsx | 7 +- .../components/selectors/Video/index.tsx | 7 +- examples/landing/next-env.d.ts | 2 +- examples/landing/next.config.js | 4 + examples/landing/package.json | 29 +- examples/landing/pages/index.tsx | 5 +- package.json | 24 +- packages/core/README.md | 2 +- packages/core/package.json | 7 +- packages/core/src/editor/Editor.tsx | 8 +- packages/core/src/editor/query.tsx | 4 +- packages/core/src/utils/deserializeNode.tsx | 2 +- packages/core/src/utils/parseNodeFromJSX.tsx | 10 +- packages/layers/package.json | 2 +- .../src/layers/DefaultLayer/DefaultLayer.tsx | 4 +- .../DefaultLayer/DefaultLayerHeader.tsx | 14 +- packages/utils/package.json | 4 +- packages/utils/src/useMethods.ts | 2 +- scripts/deploy.sh | 1 - site/docs/guides/basic-tutorial.md | 34 +- site/docs/guides/save-load.md | 6 +- site/docs/sponsor.md | 2 +- site/docusaurus.config.js | 6 +- site/package.json | 13 +- yarn.lock | 25509 +++++++++------- 54 files changed, 15178 insertions(+), 11181 deletions(-) create mode 100644 .changeset/angry-panthers-type.md delete mode 100644 examples/basic/pages/about.js delete mode 100644 examples/basic/src/ProTip.js diff --git a/.changeset/angry-panthers-type.md b/.changeset/angry-panthers-type.md new file mode 100644 index 000000000..f89afed5a --- /dev/null +++ b/.changeset/angry-panthers-type.md @@ -0,0 +1,7 @@ +--- +'@craftjs/layers': patch +'@craftjs/utils': patch +'@craftjs/core': patch +--- + +Add support for react 19 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 f4ab8be62..945d2e993 100644 --- a/examples/landing/components/editor/RenderNode.tsx +++ b/examples/landing/components/editor/RenderNode.tsx @@ -1,6 +1,6 @@ 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'; @@ -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..58bc5dec4 100644 --- a/examples/landing/components/editor/Toolbar/ToolbarRadio.tsx +++ b/examples/landing/components/editor/Toolbar/ToolbarRadio.tsx @@ -1,64 +1,24 @@ -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={} + 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/Toolbox.tsx b/examples/landing/components/editor/Viewport/Toolbox.tsx index 4518e8402..8431bbd1f 100644 --- a/examples/landing/components/editor/Viewport/Toolbox.tsx +++ b/examples/landing/components/editor/Viewport/Toolbox.tsx @@ -1,5 +1,5 @@ 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'; @@ -19,9 +19,14 @@ const ToolboxDiv = styled.div<{ $enabled: 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) => @@ -44,9 +49,9 @@ export const Toolbox = () => { $enabled={enabled && enabled} className="toolbox transition w-12 h-full flex flex-col bg-white" > -
+
+ ref={(ref) => { create( ref, { height="300px" width="300px" > - ) - } + ); + }} > - - + +
- create(ref, ) - } + ref={(ref) => { + create( + ref, + + ); + }} > - - + +
-
create(ref,
-
create(ref,