External Media: Move codebase to the shared-extension-utils

projects/js-packages/shared-extension-utils/index.js

@@ -1,3 +1,4 @@
+export * from './src/block-icons';
 export { default as getJetpackData, JETPACK_DATA_PATH } from './src/get-jetpack-data';
 export { default as getSiteFragment } from './src/get-site-fragment';
 export * from './src/site-type-utils';
@@ -14,10 +15,17 @@ export {
 	getUsableBlockProps,
 } from './src/plan-utils';
 export { default as isCurrentUserConnected } from './src/is-current-user-connected';
+export { default as useAiFeature } from './src/hooks/use-api-feature';
 export { default as useAnalytics } from './src/hooks/use-analytics';
 export { default as useModuleStatus } from './src/hooks/use-module-status';
+export { default as usePlanType } from './src/hooks/use-plan-type';
+export { default as usePostContent } from './src/hooks/use-post-content';
+export { default as useSaveToMediaLibrary } from './src/hooks/use-save-to-media-library';
 export { default as JetpackEditorPanelLogo } from './src/components/jetpack-editor-panel-logo';
 export { getBlockIconComponent, getBlockIconProp } from './src/get-block-icon-from-metadata';
 export { default as getJetpackBlocksVariation } from './src/get-jetpack-blocks-variation';
+export * from './src/icons';
 export * from './src/modules-state';
 export { default as isMyJetpackAvailable } from './src/is-my-jetpack-available';
+export { default as useRafInterval } from './src/use-ref-interval';
+export * from './src/wait-for';

projects/plugins/jetpack/extensions/shared/block-icons.js → projects/js-packages/shared-extension-utils/src/block-icons.js

@@ -1,5 +1,5 @@
 import colorStudio from '@automattic/color-studio';
-import { isAtomicSite, isSimpleSite } from '@automattic/jetpack-shared-extension-utils';
+import { isAtomicSite, isSimpleSite } from './site-type-utils';
 
 /**
  * Constants

projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/ai-image/components/ai-image-modal.tsx → projects/js-packages/shared-extension-utils/src/components/ai-image/components/ai-image-modal.tsx

@@ -9,11 +9,11 @@ import {
 	ImageStyle,
 	AiModalFooter,
 } from '@automattic/jetpack-ai-client';
-import { useAnalytics } from '@automattic/jetpack-shared-extension-utils';
 import { SelectControl } from '@wordpress/components';
 import { useCallback, useRef, useState, useEffect } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import debugFactory from 'debug';
+import { useAnalytics } from '@automattic/jetpack-shared-extension-utils';
 /**
  * Internal dependencies
  */
@@ -27,6 +27,42 @@ const FEATURED_IMAGE_UPGRADE_PROMPT_PLACEMENT = 'ai-image-generator';
 
 const debug = debugFactory( 'jetpack-ai:ai-image-modal' );
 
+/**
+ *
+ * @param root0
+ * @param root0.title
+ * @param root0.cost
+ * @param root0.open
+ * @param root0.placement
+ * @param root0.images
+ * @param root0.currentIndex
+ * @param root0.onClose
+ * @param root0.onTryAgain
+ * @param root0.onGenerate
+ * @param root0.generating
+ * @param root0.notEnoughRequests
+ * @param root0.requireUpgrade
+ * @param root0.currentLimit
+ * @param root0.currentUsage
+ * @param root0.isUnlimited
+ * @param root0.upgradeDescription
+ * @param root0.hasError
+ * @param root0.postContent
+ * @param root0.handlePreviousImage
+ * @param root0.handleNextImage
+ * @param root0.acceptButton
+ * @param root0.autoStart
+ * @param root0.autoStartAction
+ * @param root0.generateButtonLabel
+ * @param root0.instructionsPlaceholder
+ * @param root0.imageStyles
+ * @param root0.onGuessStyle
+ * @param root0.prompt
+ * @param root0.setPrompt
+ * @param root0.initialStyle
+ * @param root0.inputDisabled
+ * @param root0.actionDisabled
+ */
 export default function AiImageModal( {
 	title,
 	cost,
@@ -133,8 +169,8 @@ export default function AiImageModal( {
 	const upgradePromptVisible = ( requireUpgrade || notEnoughRequests ) && ! generating;
 	const counterVisible = Boolean( ! isUnlimited && cost && currentLimit );
 
-	const generateLabel = __( 'Generate', 'jetpack' );
-	const tryAgainLabel = __( 'Try again', 'jetpack' );
+	const generateLabel = __( 'Generate', 'jetpack-shared-extension-utils' );
+	const tryAgainLabel = __( 'Try again', 'jetpack-shared-extension-utils' );
 
 	/**
 	 * Trigger image generation automatically.
@@ -174,7 +210,7 @@ export default function AiImageModal( {
 						{ showStyleSelector && (
 							<div style={ { display: 'flex', alignItems: 'center', gap: 16 } }>
 								<div style={ { fontWeight: 500, flexGrow: 1 } }>
-									{ __( 'Generate image', 'jetpack' ) }
+									{ __( 'Generate image', 'jetpack-shared-extension-utils' ) }
 								</div>
 								<div>
 									<SelectControl

projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/ai-image/components/carrousel.tsx → projects/js-packages/shared-extension-utils/src/components/ai-image/components/carrousel.tsx

@@ -27,6 +27,13 @@ export type CarrouselImageData = {
 
 export type CarrouselImages = CarrouselImageData[];
 
+/**
+ *
+ * @param root0
+ * @param root0.children
+ * @param root0.isDotted
+ * @param root0.contentClassName
+ */
 function BlankImage( { children, isDotted = false, contentClassName = '' } ) {
 	const blankImage = (
 		<img
@@ -50,6 +57,15 @@ function BlankImage( { children, isDotted = false, contentClassName = '' } ) {
 	);
 }
 
+/**
+ *
+ * @param root0
+ * @param root0.images
+ * @param root0.current
+ * @param root0.handlePreviousImage
+ * @param root0.handleNextImage
+ * @param root0.actions
+ */
 export default function Carrousel( {
 	images,
 	current,
@@ -126,7 +142,7 @@ export default function Carrousel( {
 					>
 						{ generating ? (
 							<BlankImage contentClassName="ai-assistant-image__loading">
-								{ __( 'Creating image…', 'jetpack' ) }
+								{ __( 'Creating image…', 'jetpack-shared-extension-utils' ) }
 								<Spinner
 									style={ {
 										width: '50px',
@@ -141,7 +157,7 @@ export default function Carrousel( {
 										<div className="ai-assistant-image__error">
 											{ __(
 												'An error occurred while generating the image. Please, try again!',
-												'jetpack'
+												'jetpack-shared-extension-utils'
 											) }
 											{ error?.message && (
 												<span className="ai-assistant-image__error-message">

projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/ai-image/components/usage-counter.tsx → projects/js-packages/shared-extension-utils/src/components/ai-image/components/usage-counter.tsx

@@ -14,19 +14,32 @@ type UsageCounterProps = {
 	cost: number;
 };
 
+/**
+ *
+ * @param root0
+ * @param root0.currentLimit
+ * @param root0.currentUsage
+ * @param root0.cost
+ */
 export default function UsageCounter( { currentLimit, currentUsage, cost }: UsageCounterProps ) {
 	const requestsBalance = currentLimit - currentUsage;
 
 	const requestsNeeded = createInterpolateElement(
 		// Translators: %d is the cost of one image.
-		sprintf( __( 'Requests needed: <counter>%d</counter>', 'jetpack' ), cost ),
+		sprintf(
+			__( 'Requests needed: <counter>%d</counter>', 'jetpack-shared-extension-utils' ),
+			cost
+		),
 		{
 			counter: <span />,
 		}
 	);
 	const requestsAvailable = createInterpolateElement(
 		// Translators: %d is the current requests balance.
-		sprintf( __( 'Requests available: <counter>%d</counter>', 'jetpack' ), requestsBalance ),
+		sprintf(
+			__( 'Requests available: <counter>%d</counter>', 'jetpack-shared-extension-utils' ),
+			requestsBalance
+		),
 		{
 			counter:
 				requestsBalance < cost ? (

projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/ai-image/featured-image.tsx → projects/js-packages/shared-extension-utils/src/components/ai-image/featured-image.tsx

@@ -2,25 +2,25 @@
  * External dependencies
  */
 import { ImageStyle } from '@automattic/jetpack-ai-client';
-import { useAnalytics } from '@automattic/jetpack-shared-extension-utils';
 import { Button } from '@wordpress/components';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { store as editorStore } from '@wordpress/editor';
 import { useCallback, useState } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
 import debugFactory from 'debug';
+import { useAnalytics } from '@automattic/jetpack-shared-extension-utils';
 /**
  * Internal dependencies
  */
 import './style.scss';
-import useAiFeature from '../../../../blocks/ai-assistant/hooks/use-ai-feature';
-import { PLAN_TYPE_UNLIMITED, usePlanType } from '../../../../shared/use-plan-type';
-import usePostContent from '../../hooks/use-post-content';
-import useSaveToMediaLibrary from '../../hooks/use-save-to-media-library';
 import {
 	PLACEMENT_JETPACK_SIDEBAR,
 	PLACEMENT_DOCUMENT_SETTINGS,
-} from '../ai-assistant-plugin-sidebar/constants';
+} from '../../../../../plugins/jetpack/extensions/shared/constants';
+import useAiFeature from '../../hooks/use-ai-feature';
+import { PLAN_TYPE_UNLIMITED, usePlanType } from '../../hooks/use-plan-type';
+import usePostContent from '../../hooks/use-post-content';
+import useSaveToMediaLibrary from '../../hooks/use-save-to-media-library';
 import AiImageModal from './components/ai-image-modal';
 import useAiImage from './hooks/use-ai-image';
 import useSiteType from './hooks/use-site-type';
@@ -35,6 +35,14 @@ import type { EditorSelectors } from './types';
 
 const debug = debugFactory( 'jetpack-ai:featured-image' );
 
+/**
+ *
+ * @param root0
+ * @param root0.busy
+ * @param root0.disabled
+ * @param root0.placement
+ * @param root0.onClose
+ */
 export default function FeaturedImage( {
 	busy,
 	disabled,
@@ -336,8 +344,8 @@ export default function FeaturedImage( {
 		saveToMediaLibrary,
 	] );
 
-	const generateAgainText = __( 'Generate another image', 'jetpack' );
-	const generateText = __( 'Generate', 'jetpack' );
+	const generateAgainText = __( 'Generate another image', 'jetpack-shared-extension-utils' );
+	const generateText = __( 'Generate', 'jetpack-shared-extension-utils' );
 
 	const hasContent = postContent.trim?.() || postTitle.trim?.() ? true : false;
 	const hasPrompt = hasContent ? prompt.length >= 0 : prompt.length >= 3;
@@ -349,7 +357,7 @@ export default function FeaturedImage( {
 				// Translators: %d is the cost of generating a featured image.
 				__(
 					"Featured image generation costs %d requests per image. You don't have enough requests to generate another image.",
-					'jetpack'
+					'jetpack-shared-extension-utils'
 				),
 				featuredImageCost
 		  )
@@ -365,7 +373,7 @@ export default function FeaturedImage( {
 				currentImage?.libraryId === postFeaturedMediaId
 			}
 		>
-			{ __( 'Set as featured image', 'jetpack' ) }
+			{ __( 'Set as featured image', 'jetpack-shared-extension-utils' ) }
 		</Button>
 	);
 
@@ -374,14 +382,19 @@ export default function FeaturedImage( {
 			{ ( placement === PLACEMENT_JETPACK_SIDEBAR ||
 				placement === PLACEMENT_DOCUMENT_SETTINGS ) && (
 				<>
-					<p>{ __( 'Create and use an AI generated featured image for your post.', 'jetpack' ) }</p>
+					<p>
+						{ __(
+							'Create and use an AI generated featured image for your post.',
+							'jetpack-shared-extension-utils'
+						) }
+					</p>
 					<Button
 						onClick={ handleModalOpen }
 						isBusy={ busy }
 						disabled={ disabled || notEnoughRequests }
 						variant="secondary"
 					>
-						{ __( 'Generate image', 'jetpack' ) }
+						{ __( 'Generate image', 'jetpack-shared-extension-utils' ) }
 					</Button>
 				</>
 			) }
@@ -391,7 +404,7 @@ export default function FeaturedImage( {
 				autoStartAction={ handleFirstGenerate }
 				images={ images }
 				currentIndex={ current }
-				title={ __( 'Generate a featured image with AI', 'jetpack' ) }
+				title={ __( 'Generate a featured image with AI', 'jetpack-shared-extension-utils' ) }
 				cost={ featuredImageCost }
 				open={ isFeaturedImageModalVisible }
 				placement={ placement }
@@ -414,7 +427,7 @@ export default function FeaturedImage( {
 				generateButtonLabel={ pointer?.current > 0 ? generateAgainText : generateText }
 				instructionsPlaceholder={ __(
 					"Describe the featured image you'd like to create and select a style.",
-					'jetpack'
+					'jetpack-shared-extension-utils'
 				) }
 				imageStyles={ imageStyles }
 				onGuessStyle={ handleGuessStyle }

projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/ai-image/general-purpose-image.tsx → projects/js-packages/shared-extension-utils/src/components/ai-image/general-purpose-image.tsx

@@ -1,17 +1,17 @@
 /**
  * External dependencies
  */
-import { useAnalytics } from '@automattic/jetpack-shared-extension-utils';
 import { Button } from '@wordpress/components';
 import { useCallback, useState } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
 import debugFactory from 'debug';
+import { useAnalytics } from '@automattic/jetpack-shared-extension-utils';
 /**
  * Internal dependencies
  */
 import './style.scss';
-import useAiFeature from '../../../../blocks/ai-assistant/hooks/use-ai-feature';
-import { PLAN_TYPE_UNLIMITED, usePlanType } from '../../../../shared/use-plan-type';
+import useAiFeature from '../../hooks/use-ai-feature';
+import { PLAN_TYPE_UNLIMITED, usePlanType } from '../../hooks/use-plan-type';
 import usePostContent from '../../hooks/use-post-content';
 import useSaveToMediaLibrary from '../../hooks/use-save-to-media-library';
 import AiImageModal from './components/ai-image-modal';
@@ -33,6 +33,13 @@ type SetImageCallbackProps = {
 
 const debug = debugFactory( 'jetpack-ai:general-purpose-image' );
 
+/**
+ *
+ * @param root0
+ * @param root0.placement
+ * @param root0.onClose
+ * @param root0.onSetImage
+ */
 export default function GeneralPurposeImage( {
 	placement,
 	onClose = () => {},
@@ -230,15 +237,15 @@ export default function GeneralPurposeImage( {
 		saveToMediaLibrary,
 	] );
 
-	const generateAgainText = __( 'Generate another image', 'jetpack' );
-	const generateText = __( 'Generate', 'jetpack' );
+	const generateAgainText = __( 'Generate another image', 'jetpack-shared-extension-utils' );
+	const generateText = __( 'Generate', 'jetpack-shared-extension-utils' );
 
 	const upgradeDescription = notEnoughRequests
 		? sprintf(
 				// Translators: %d is the cost of generating a featured image.
 				__(
 					"Image generation costs %d requests per image. You don't have enough requests to generate another image.",
-					'jetpack'
+					'jetpack-shared-extension-utils'
 				),
 				generalImageCost
 		  )
@@ -250,7 +257,7 @@ export default function GeneralPurposeImage( {
 			variant="primary"
 			disabled={ ! currentImage?.image || currentImage?.generating }
 		>
-			{ __( 'Insert image', 'jetpack' ) }
+			{ __( 'Insert image', 'jetpack-shared-extension-utils' ) }
 		</Button>
 	);
 
@@ -259,7 +266,7 @@ export default function GeneralPurposeImage( {
 			postContent={ true }
 			images={ images }
 			currentIndex={ current }
-			title={ __( 'Generate an image with AI', 'jetpack' ) }
+			title={ __( 'Generate an image with AI', 'jetpack-shared-extension-utils' ) }
 			cost={ generalImageCost }
 			open={ isFeaturedImageModalVisible }
 			placement={ placement }
@@ -280,7 +287,7 @@ export default function GeneralPurposeImage( {
 			generateButtonLabel={ pointer?.current > 0 ? generateAgainText : generateText }
 			instructionsPlaceholder={ __(
 				"Describe the image you'd like to create and select a style.",
-				'jetpack'
+				'jetpack-shared-extension-utils'
 			) }
 			imageStyles={ imageStyles }
 			onGuessStyle={ guessStyle }