Move Fragment to SDK

Signed-off-by: Zvonimir Fras <[email protected]>

app/src/components/index.ts

@@ -1,5 +1,4 @@
 export * from './header';
 export * from './main';
-export * from './fragment';
 export * from './grid';
 export * from './notification';

app/src/routes/edit/index.tsx

@@ -4,7 +4,6 @@ import React, {
 	useState
 } from 'react';
 import { css, cx } from 'emotion';
-import { Fragment } from '../../components';
 import { EditHeader } from './edit-header';
 import { GlobalStateContext } from '../../context/global-state-context';
 import {
@@ -37,12 +36,14 @@ import { CodeContextPane } from './code-context-pane';
 import { useParams } from 'react-router-dom';
 import { useHotkeys } from 'react-hotkeys-hook';
 import {
+	Fragment,
 	getParentComponent,
 	getSelectedComponent,
 	initializeIds,
 	stateWithoutComponent,
 	updatedState
 } from '@carbon-builder/sdk-react';
+import { useRemoteCustomComponentsCollections } from '../../utils/misc-tools';
 
 const leftPaneWidth = '300px';
 const rightPaneWidth = '302px';
@@ -189,8 +190,10 @@ export const Edit = () => {
 		addAction,
 		undoAction,
 		redoAction,
+		customComponentsCollections,
 		styleClasses
 	} = useContext(GlobalStateContext);
+	const [remoteCustomComponentsCollections] = useRemoteCustomComponentsCollections();
 
 	const params = useParams();
 
@@ -309,8 +312,16 @@ export const Edit = () => {
 			className={cx('edit-content', selectedLeftPane !== SelectedLeftPane.NONE ? 'is-side-panel-active' : '')}
 			onClick={() => updateFragment({ ...fragment, selectedComponentId: null }, false)}>
 				{
-					// eslint-disable-next-line
-					fragment && <Fragment fragment={fragment} setFragment={updateFragment} outline={fragment.outline} />
+					fragment
+					// eslint-disable-next-line react/jsx-no-useless-fragment
+					&& <Fragment
+						fragment={fragment}
+						setFragment={updateFragment}
+						outline={fragment.outline}
+						fragments={fragments}
+						customComponentsCollections={customComponentsCollections}
+						styleClasses={styleClasses}
+						remoteCustomComponentsCollections={remoteCustomComponentsCollections} />
 				}
 			</div>
 			<div className={rightPanel}>

app/src/components/fragment.tsx → sdk/react/src/lib/components/fragment.tsx

@@ -1,5 +1,4 @@
 import React, {
-	useContext,
 	useEffect,
 	useRef,
 	useState
@@ -11,8 +10,6 @@ import parse, { attributesToProps, domToReact } from 'html-react-parser';
 import { throttle } from 'lodash';
 import axios from 'axios';
 import Handlebars from 'handlebars';
-import { getFragmentsFromLocalStorage } from '../utils/fragment-tools';
-import { GlobalStateContext } from '../context';
 import { getAllFragmentStyleClasses, styleObjectToString } from '@carbon-builder/player-react';
 import {
 	AComponent,
@@ -23,9 +20,8 @@ import {
 	stateWithoutComponent,
 	updateComponentCounter,
 	updatedState
-} from '@carbon-builder/sdk-react';
+} from '../../index';
 import './fragment-preview.scss';
-import { useRemoteCustomComponentsCollections } from '../utils/misc-tools';
 
 const canvas = css`
 	border: 2px solid #d8d8d8;
@@ -101,12 +97,18 @@ const fetchCSS = async (urls: string[]) => {
 	}
 };
 
-export const Fragment = ({ fragment, setFragment, outline }: any) => {
-	const globalState = useContext(GlobalStateContext);
+export const Fragment = ({
+	fragment,
+	setFragment,
+	fragments,
+	outline,
+	remoteCustomComponentsCollections,
+	customComponentsCollections,
+	styleClasses
+}: any) => {
 	const [showDragOverIndicator, setShowDragOverIndicator] = useState(false);
 	const [customComponentsStyles, setCustomComponentsStyles] = useState(css``);
 	const [customComponentsStylesUrls, _setCustomComponentsStylesUrls] = useState<string[]>([]);
-	const [remoteCustomComponentsCollections] = useRemoteCustomComponentsCollections();
 	const [allCustomComponentsCollections, setAllCustomComponentsCollections] = useState([] as any[]);
 	const containerRef = useRef(null as any);
 	const holderRef = useRef(null as any);
@@ -139,9 +141,9 @@ export const Fragment = ({ fragment, setFragment, outline }: any) => {
 	useEffect(() => {
 		setAllCustomComponentsCollections([
 			...(remoteCustomComponentsCollections as any[] || []).flat(),
-			...globalState.customComponentsCollections
+			...customComponentsCollections
 		]);
-	}, [remoteCustomComponentsCollections, globalState.customComponentsCollections]);
+	}, [remoteCustomComponentsCollections, customComponentsCollections]);
 
 	const resize = throttle((e: any) => {
 		const rect = containerRef.current.getBoundingClientRect();
@@ -167,10 +169,6 @@ export const Fragment = ({ fragment, setFragment, outline }: any) => {
 		return <SkeletonPlaceholder />;
 	}
 
-	// try to use the state but get the fragments from local storage if state is not available
-	// localStorage info is used when rendering and can't be used for interaction
-	const { fragments } = globalState || { fragments: getFragmentsFromLocalStorage() };
-
 	// initialize component counter
 	updateComponentCounter(fragment.data);
 
@@ -365,7 +363,7 @@ export const Fragment = ({ fragment, setFragment, outline }: any) => {
 		return null;
 	};
 
-	const styles = css`${getAllFragmentStyleClasses(fragment, fragments, globalState?.styleClasses).map((styleClass: any) => `.${styleClass.id} {
+	const styles = css`${getAllFragmentStyleClasses(fragment, fragments, styleClasses).map((styleClass: any) => `.${styleClass.id} {
 			${styleClass.content}
 		}`)
 	}`;

sdk/react/src/lib/components/index.ts

@@ -2,3 +2,4 @@ export * from './actions-connector';
 export * from './fragment-layout-widget';
 export * from './fragment-preview';
 export * from './custom-components-collection-editor';
+export * from './fragment';