@elementor/editor-editing-panel 4.1.0-822 → 4.1.0-824

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elementor/editor-editing-panel",
-  "version": "4.1.0-822",
+  "version": "4.1.0-824",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -39,28 +39,31 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor": "4.1.0-822",
-    "@elementor/editor-canvas": "4.1.0-822",
-    "@elementor/editor-controls": "4.1.0-822",
-    "@elementor/editor-documents": "4.1.0-822",
-    "@elementor/editor-elements": "4.1.0-822",
-    "@elementor/editor-interactions": "4.1.0-822",
-    "@elementor/editor-panels": "4.1.0-822",
-    "@elementor/editor-props": "4.1.0-822",
-    "@elementor/editor-responsive": "4.1.0-822",
-    "@elementor/editor-styles": "4.1.0-822",
-    "@elementor/editor-styles-repository": "4.1.0-822",
-    "@elementor/editor-ui": "4.1.0-822",
-    "@elementor/editor-v1-adapters": "4.1.0-822",
+    "@elementor/editor": "4.1.0-824",
+    "@elementor/editor-canvas": "4.1.0-824",
+    "@elementor/editor-controls": "4.1.0-824",
+    "@elementor/editor-documents": "4.1.0-824",
+    "@elementor/editor-elements": "4.1.0-824",
+    "@elementor/editor-interactions": "4.1.0-824",
+    "@elementor/editor-notifications": "4.1.0-824",
+    "@elementor/editor-panels": "4.1.0-824",
+    "@elementor/editor-props": "4.1.0-824",
+    "@elementor/editor-responsive": "4.1.0-824",
+    "@elementor/editor-styles": "4.1.0-824",
+    "@elementor/editor-styles-repository": "4.1.0-824",
+    "@elementor/editor-ui": "4.1.0-824",
+    "@elementor/editor-v1-adapters": "4.1.0-824",
+    "@elementor/http-client": "4.1.0-824",
     "@elementor/icons": "^1.68.0",
-    "@elementor/editor-variables": "4.1.0-822",
-    "@elementor/locations": "4.1.0-822",
-    "@elementor/menus": "4.1.0-822",
-    "@elementor/schema": "4.1.0-822",
-    "@elementor/session": "4.1.0-822",
+    "@elementor/editor-variables": "4.1.0-824",
+    "@elementor/locations": "4.1.0-824",
+    "@elementor/menus": "4.1.0-824",
+    "@elementor/query": "4.1.0-824",
+    "@elementor/schema": "4.1.0-824",
+    "@elementor/session": "4.1.0-824",
     "@elementor/ui": "1.37.5",
-    "@elementor/utils": "4.1.0-822",
-    "@elementor/wp-media": "4.1.0-822",
+    "@elementor/utils": "4.1.0-824",
+    "@elementor/wp-media": "4.1.0-824",
     "@wordpress/i18n": "^5.13.0"
   },
   "peerDependencies": {

package/src/components/design-system-import/components/conflict-options.tsx

@@ -0,0 +1,67 @@
+import * as React from 'react';
+import { Card, CardActionArea, Radio, RadioGroup, Stack, Typography } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+import { type ConflictStrategy } from '../types';
+
+type Option = {
+	value: ConflictStrategy;
+	title: string;
+	description: string;
+};
+
+const getOptions = (): Option[] => [
+	{
+		value: 'replace',
+		title: __( 'Replace existing values', 'elementor' ),
+		description: __( 'Imported design system values will overwrite existing variables and classes.', 'elementor' ),
+	},
+	{
+		value: 'keep',
+		title: __( 'Keep existing values', 'elementor' ),
+		description: __( 'Existing variables and classes will not change.', 'elementor' ),
+	},
+];
+
+type Props = {
+	value: ConflictStrategy | null;
+	onChange: ( value: ConflictStrategy ) => void;
+};
+
+export const ConflictOptions = ( { value, onChange }: Props ) => {
+	const options = getOptions();
+
+	return (
+		<Stack spacing={ 1 }>
+			<Typography variant="body1">
+				{ __( 'How to handle conflicts with existing variables or classes?', 'elementor' ) }
+			</Typography>
+			<RadioGroup
+				value={ value ?? '' }
+				onChange={ ( _: unknown, next: string ) => onChange( next as ConflictStrategy ) }
+			>
+				<Stack spacing={ 1 }>
+					{ options.map( ( option ) => (
+						<Card key={ option.value } variant="outlined">
+							<CardActionArea onClick={ () => onChange( option.value ) }>
+								<Stack direction="row" alignItems="center" spacing={ 2 } padding={ 2 }>
+									<Radio
+										value={ option.value }
+										checked={ value === option.value }
+										inputProps={ { 'aria-label': option.title } }
+									/>
+									<Stack direction="column" spacing={ 0.5 }>
+										<Typography variant="subtitle2">{ option.title }</Typography>
+										<Typography variant="caption" color="text.secondary">
+											{ option.description }
+										</Typography>
+									</Stack>
+								</Stack>
+							</CardActionArea>
+						</Card>
+					) ) }
+				</Stack>
+			</RadioGroup>
+		</Stack>
+	);
+};

package/src/components/design-system-import/components/trigger-button.tsx

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import { closeDialog, openDialog } from '@elementor/editor-ui';
+import { UploadIcon } from '@elementor/icons';
+import { useIsMutating } from '@elementor/query';
+import { IconButton, Tooltip } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+import { IMPORT_DESIGN_SYSTEM_MUTATION_KEY } from '../hooks/use-import-request';
+import { ImportDesignSystemDialog } from '../import-design-system-dialog';
+
+export const TriggerButton = () => {
+	const isImporting = useIsMutating( { mutationKey: [ ...IMPORT_DESIGN_SYSTEM_MUTATION_KEY ] } ) > 0;
+
+	const label = isImporting
+		? __( 'Importing design system…', 'elementor' )
+		: __( 'Import Design System', 'elementor' );
+
+	const handleClick = () => {
+		openDialog( {
+			component: <ImportDesignSystemDialog onClose={ closeDialog } />,
+		} );
+	};
+
+	return (
+		<Tooltip title={ label } placement="top">
+			<span>
+				<IconButton size="tiny" disabled={ isImporting } aria-label={ label } onClick={ handleClick }>
+					<UploadIcon fontSize="tiny" />
+				</IconButton>
+			</span>
+		</Tooltip>
+	);
+};

package/src/components/design-system-import/hooks/use-dialog-state.ts

@@ -0,0 +1,24 @@
+import { useState } from 'react';
+
+import { type ConflictStrategy } from '../types';
+
+export type DialogState = {
+	file: File | null;
+	conflictStrategy: ConflictStrategy | null;
+};
+
+const initialState: DialogState = {
+	file: null,
+	conflictStrategy: null,
+};
+
+export const useDialogState = () => {
+	const [ state, setState ] = useState< DialogState >( initialState );
+
+	const setFile = ( file: File | null ) => setState( ( prev ) => ( { ...prev, file } ) );
+
+	const setConflictStrategy = ( conflictStrategy: ConflictStrategy ) =>
+		setState( ( prev ) => ( { ...prev, conflictStrategy } ) );
+
+	return { ...state, setFile, setConflictStrategy };
+};

package/src/components/design-system-import/hooks/use-import-request.ts

@@ -0,0 +1,38 @@
+import { GLOBAL_STYLES_IMPORTED_EVENT, type ImportedGlobalStylesPayload } from '@elementor/editor-canvas';
+import { reloadCurrentDocument } from '@elementor/editor-documents';
+import { httpService } from '@elementor/http-client';
+import { useMutation } from '@elementor/query';
+
+import { type ConflictStrategy } from '../types';
+
+const IMPORT_ENDPOINT = '/design-system/import';
+
+export const IMPORT_DESIGN_SYSTEM_MUTATION_KEY = [ 'design-system-import' ] as const;
+
+type ImportRequestArgs = {
+	file: File;
+	conflictStrategy: ConflictStrategy;
+};
+
+export const useImportRequest = () => {
+	return useMutation( {
+		mutationKey: [ ...IMPORT_DESIGN_SYSTEM_MUTATION_KEY ],
+		mutationFn: async ( { file, conflictStrategy }: ImportRequestArgs ): Promise< void > => {
+			const formData = new FormData();
+			formData.append( 'file', file );
+			formData.append( 'conflict_strategy', conflictStrategy );
+
+			const response = await httpService().post< ImportedGlobalStylesPayload >( IMPORT_ENDPOINT, formData, {
+				headers: { 'Content-Type': 'multipart/form-data' },
+			} );
+
+			window.dispatchEvent(
+				new CustomEvent< ImportedGlobalStylesPayload >( GLOBAL_STYLES_IMPORTED_EVENT, {
+					detail: response?.data,
+				} )
+			);
+
+			await reloadCurrentDocument();
+		},
+	} );
+};

package/src/components/design-system-import/import-design-system-dialog.tsx

@@ -0,0 +1,89 @@
+import * as React from 'react';
+import { closeDialog, FileUploadDropzone, FileUploadRow, openDialog } from '@elementor/editor-ui';
+import { Button, DialogActions, DialogContent, DialogHeader, DialogTitle, Stack } from '@elementor/ui';
+import { __, sprintf } from '@wordpress/i18n';
+
+import { ConflictOptions } from './components/conflict-options';
+import { useDialogState } from './hooks/use-dialog-state';
+import { useImportRequest } from './hooks/use-import-request';
+import { notifyImportFailure, notifyImportInProgress, notifyImportSuccess } from './import-notifications';
+
+const ALLOWED_FILE_TYPES: `${ string }/${ string }`[] = [ 'application/zip' ];
+const FILE_INPUT_ACCEPT = 'application/zip,.zip';
+// TODO: Replace with the actual server-enforced limit once finalized.
+const MAX_FILE_SIZE_MB = 3;
+
+type Props = {
+	onClose: () => void;
+};
+
+const reopenSelf = () => {
+	openDialog( {
+		component: <ImportDesignSystemDialog onClose={ closeDialog } />,
+	} );
+};
+
+export const ImportDesignSystemDialog = ( { onClose }: Props ) => {
+	const { file, conflictStrategy, setFile, setConflictStrategy } = useDialogState();
+	const importMutation = useImportRequest();
+
+	const isImportEnabled = Boolean( file && conflictStrategy );
+
+	const handleImport = async () => {
+		if ( ! file || ! conflictStrategy ) {
+			return;
+		}
+
+		notifyImportInProgress();
+		onClose();
+
+		try {
+			await importMutation.mutateAsync( { file, conflictStrategy } );
+			notifyImportSuccess();
+		} catch {
+			notifyImportFailure( reopenSelf );
+		}
+	};
+
+	return (
+		<>
+			<DialogHeader logo={ false }>
+				<DialogTitle>{ __( 'Import Design System', 'elementor' ) }</DialogTitle>
+			</DialogHeader>
+			<DialogContent>
+				<Stack spacing={ 3 }>
+					{ file ? (
+						<FileUploadRow file={ file } onRemove={ () => setFile( null ) } />
+					) : (
+						<FileUploadDropzone
+							onFileSelected={ setFile }
+							allowedFileTypes={ ALLOWED_FILE_TYPES }
+							accept={ FILE_INPUT_ACCEPT }
+							regionLabel={ __( 'Design system file dropzone', 'elementor' ) }
+							helperText={ sprintf(
+								// translators: %d is the maximum file size in megabytes.
+								__( 'zip (max. %dMB)', 'elementor' ),
+								MAX_FILE_SIZE_MB
+							) }
+						/>
+					) }
+					<ConflictOptions value={ conflictStrategy } onChange={ setConflictStrategy } />
+				</Stack>
+			</DialogContent>
+			<DialogActions>
+				<Button size="medium" color="secondary" onClick={ onClose }>
+					{ __( 'Cancel', 'elementor' ) }
+				</Button>
+				<Button
+					size="medium"
+					variant="contained"
+					color="primary"
+					disabled={ ! isImportEnabled }
+					onClick={ handleImport }
+				>
+					{ __( 'Import', 'elementor' ) }
+				</Button>
+			</DialogActions>
+		</>
+	);
+};

package/src/components/design-system-import/import-notifications.tsx

@@ -0,0 +1,57 @@
+import { dismissNotification, notify } from '@elementor/editor-notifications';
+import { getQueryClient } from '@elementor/query';
+import { __ } from '@wordpress/i18n';
+
+import { IMPORT_DESIGN_SYSTEM_MUTATION_KEY } from './hooks/use-import-request';
+
+const IMPORT_STARTED_NOTIFICATION_ID = 'design-system-import-started';
+const SUCCESS_NOTIFICATION_ID = 'design-system-import-succeeded';
+const FAILURE_NOTIFICATION_ID = 'design-system-import-failed';
+
+export const notifyImportInProgress = () => {
+	notify( {
+		id: IMPORT_STARTED_NOTIFICATION_ID,
+		type: 'info',
+		message: __( 'Import in Progress. You will be notified when the import is complete.', 'elementor' ),
+	} );
+};
+
+export const notifyImportSuccess = () => {
+	dismissNotification( IMPORT_STARTED_NOTIFICATION_ID );
+
+	notify( {
+		id: SUCCESS_NOTIFICATION_ID,
+		type: 'success',
+		message: __( 'Design system imported', 'elementor' ),
+	} );
+};
+
+export const notifyImportFailure = ( onRetry: () => void ) => {
+	dismissNotification( IMPORT_STARTED_NOTIFICATION_ID );
+
+	notify( {
+		id: FAILURE_NOTIFICATION_ID,
+		type: 'error',
+		message: __( 'Your design system import failed', 'elementor' ),
+		additionalActionProps: [
+			{
+				size: 'small',
+				variant: 'outlined',
+				color: 'error',
+				children: __( 'Try again', 'elementor' ),
+				onClick: () => {
+					dismissNotification( FAILURE_NOTIFICATION_ID );
+
+					const isImporting =
+						getQueryClient().isMutating( { mutationKey: [ ...IMPORT_DESIGN_SYSTEM_MUTATION_KEY ] } ) > 0;
+
+					if ( isImporting ) {
+						return;
+					}
+
+					onRetry();
+				},
+			},
+		],
+	} );
+};

package/src/components/design-system-import/types.ts

@@ -0,0 +1 @@
+export type ConflictStrategy = 'replace' | 'keep';