@automattic/launchpad: Add missing dependencies (#95431)

* @automattic/launchpad: Add missing @wordpress/base-styles dependency

* @automattic/launchpad: Add missing @automattic/typography dependency

* @automattic/launchpad: Add missing @tanstack/react-query dependency

* @automattic/launchpad: Add missing @wordpress/icons dependency

* @automattic/data-stores: Bump version to 3.0.2

* @automattic/launchpad: Add missing @automattic/calypso-analytics dependency

* @automattic/launchpad: Add missing @automattic/viewport dependency

* @automattic/launchpad: Add missing @wordpress/url dependency

* @automattic/launchpad: Bump version to 1.0.2

* @automattic/launchpad: Replace i18n-calypso with @wordpress/i18n

* Bump rc.1

* @automattic/data-stores: Fix command not found

* @automattic/data-stores: Move @automattic/design-picker to dev dependency

* @automattic/data-stores: Bump version to 3.1.0-rc.2

* @automattic/components: Add missing dependencies

* @automattic/components: Bump version to 2.1.2-rc.1

* @automattic/components: Bump version to 2.2.0-rc.1

* @automattic/calypso-products: Bump version to 1.2.1-rc.1

* @automattic/launchpad: Bump version to 1.1.0-rc.2

* @automattic/data-stores: Bump version to 3.1.0-rc.3

* @automattic/data-stores: Add missing @automattic/load-script

* @automattic/data-stores: Move wpcom-proxy-request to dependency

* @automattic/components: Move debug to dependency

* @automattic/launchpad: Add missing @automattic/calypso-config dependency

* @automattic/data-stores: Bump version to 3.1.0-rc.4

* @automattic/components: Bump version to 2.2.0-rc.2

* @automattic/data-stores: Replace wpcom with wpcom-proxy-request

* @automattic/viewport-react: Bump version to 1.0.1-rc.1

* @automattic/oauth-token: Init package

* @automattic/components: Bump version to 2.2.0-rc.3

* @automattic/data-stores: Bump version to 3.1.0-rc.5

* @automattic/launchpad: Bump version to 1.1.0-rc.3

* @automattic/shopping-cart: Bump versino to 2.0.1-rc.1

* @automattic/components: Add missing dependencies

* @automattic/components: Bump version to 2.2.0-rc.4

* Update yarn.lock

* @automattic/data-stores: Fix the request url outside of calypso

* @automattic/data-stores: Bump version to 3.1.0-rc.6

* @automattic/odie-client: Update the version of @automattic/components

* Update yarn.lock

* Bump versions

client/boot/common.js

@@ -5,6 +5,7 @@ import { addBreadcrumb, initSentry } from '@automattic/calypso-sentry';
 import { getUrlParts } from '@automattic/calypso-url';
 import { geolocateCurrencySymbol } from '@automattic/format-currency';
 import { getLanguageSlugs } from '@automattic/i18n-utils';
+import { getToken } from '@automattic/oauth-token';
 import { JETPACK_PRICING_PAGE } from '@automattic/urls';
 import debugFactory from 'debug';
 import ReactDom from 'react-dom';
@@ -22,7 +23,6 @@ import detectHistoryNavigation from 'calypso/lib/detect-history-navigation';
 import isJetpackCloud from 'calypso/lib/jetpack/is-jetpack-cloud';
 import loadDevHelpers from 'calypso/lib/load-dev-helpers';
 import { attachLogmein } from 'calypso/lib/logmein';
-import { getToken } from 'calypso/lib/oauth-token';
 import { checkFormHandler } from 'calypso/lib/protect-form';
 import { setReduxStore as setReduxBridgeReduxStore } from 'calypso/lib/redux-bridge';
 import { getSiteFragment, normalize } from 'calypso/lib/route';

client/lib/desktop-listeners/index.js

@@ -1,6 +1,6 @@
+import * as oAuthToken from '@automattic/oauth-token';
 import debugFactory from 'debug';
 import { navigate } from 'calypso/lib/navigate';
-import * as oAuthToken from 'calypso/lib/oauth-token';
 import { newPost } from 'calypso/lib/paths';
 import { recordTracksEvent as recordTracksEventAction } from 'calypso/state/analytics/actions';
 import { redirectToLogout } from 'calypso/state/current-user/actions';

client/lib/wp/browser.js

@@ -1,8 +1,8 @@
 import config from '@automattic/calypso-config';
+import * as oauthToken from '@automattic/oauth-token';
 import debugFactory from 'debug';
 import WPCOM from 'wpcom';
 import wpcomProxyRequest from 'wpcom-proxy-request';
-import * as oauthToken from 'calypso/lib/oauth-token';
 import wpcomSupport from 'calypso/lib/wp/support';
 import wpcomXhrWrapper, { jetpack_site_xhr_wrapper } from 'calypso/lib/wpcom-xhr-wrapper';
 import { injectFingerprint } from './handlers/fingerprint';

client/package.json

@@ -56,6 +56,7 @@
 		"@automattic/material-design-icons": "workspace:^",
 		"@automattic/mini-cart": "workspace:^",
 		"@automattic/notifications": "workspace:^",
+		"@automattic/oauth-token": "workspace:^",
 		"@automattic/onboarding": "workspace:^",
 		"@automattic/plans-grid": "workspace:^",
 		"@automattic/plans-grid-next": "workspace:^",

client/signup/main.jsx

@@ -8,6 +8,7 @@ import {
 import page from '@automattic/calypso-router';
 import { isBlankCanvasDesign } from '@automattic/design-picker';
 import { camelToSnakeCase } from '@automattic/js-utils';
+import * as oauthToken from '@automattic/oauth-token';
 import debugModule from 'debug';
 import {
 	clone,
@@ -39,7 +40,6 @@ import {
 	recordSignupPlanChange,
 	SIGNUP_DOMAIN_ORIGIN,
 } from 'calypso/lib/analytics/signup';
-import * as oauthToken from 'calypso/lib/oauth-token';
 import {
 	isWooOAuth2Client,
 	isGravatarOAuth2Client,

packages/calypso-products/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/calypso-products",
-	"version": "1.2.0",
+	"version": "1.2.1",
 	"description": "This module contains information about the various products sold within calypso, such as product slugs, plan intervals, etc.",
 	"main": "dist/cjs/index.js",
 	"module": "dist/esm/index.js",
@@ -9,7 +9,7 @@
 	"sideEffects": false,
 	"scripts": {
 		"clean": "tsc --build ./tsconfig.json ./tsconfig-cjs.json --clean && rm -rf dist",
-		"build": "tsc --build ./tsconfig.json ./tsconfig-cjs.json",
+		"build": "tsc --build ./tsconfig.json ./tsconfig-cjs.json && run -T copy-assets",
 		"prepare": "yarn run build",
 		"prepack": "yarn run clean && yarn run build",
 		"watch": "tsc --build ./tsconfig.json --watch"

packages/components/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/components",
-	"version": "2.1.1",
+	"version": "2.2.0",
 	"description": "Automattic Components.",
 	"homepage": "https://github.com/Automattic/wp-calypso",
 	"license": "GPL-2.0-or-later",
@@ -28,22 +28,31 @@
 	"types": "dist/types",
 	"dependencies": {
 		"@automattic/calypso-analytics": "workspace:^",
+		"@automattic/calypso-color-schemes": "workspace:^",
 		"@automattic/calypso-url": "workspace:^",
+		"@automattic/color-studio": "^3.0.1",
 		"@automattic/format-currency": "workspace:^",
 		"@automattic/i18n-utils": "workspace:^",
+		"@automattic/load-script": "workspace:^",
 		"@automattic/material-design-icons": "workspace:^",
 		"@automattic/typography": "workspace:^",
 		"@automattic/viewport-react": "workspace:^",
+		"@emotion/css": "^11.11.2",
+		"@emotion/react": "^11.11.1",
+		"@emotion/styled": "^11.11.0",
 		"@wordpress/base-styles": "^5.8.0",
 		"@wordpress/components": "^28.8.0",
 		"@wordpress/icons": "^10.8.0",
 		"@wordpress/react-i18n": "^4.8.0",
 		"canvas-confetti": "^1.6.0",
 		"clsx": "^2.1.1",
+		"colord": "2.9.3",
+		"debug": "^4.3.4",
 		"gridicons": "^3.4.2",
 		"i18n-calypso": "workspace:^",
 		"lodash": "^4.17.21",
 		"prop-types": "^15.7.2",
+		"qrcode.react": "^3.1.0",
 		"react-modal": "^3.16.1",
 		"react-router-dom": "^6.23.1",
 		"react-slider": "^2.0.5",
@@ -57,7 +66,6 @@
 	},
 	"devDependencies": {
 		"@automattic/calypso-build": "workspace:^",
-		"@automattic/calypso-color-schemes": "workspace:^",
 		"@automattic/calypso-storybook": "workspace:^",
 		"@automattic/calypso-typescript-config": "workspace:^",
 		"@storybook/addon-actions": "^7.6.19",
@@ -68,9 +76,7 @@
 		"@testing-library/user-event": "^14.5.2",
 		"@types/canvas-confetti": "^1.6.0",
 		"@types/react-slider": "^1.3.6",
-		"debug": "^4.3.3",
 		"postcss": "^8.4.5",
-		"qrcode.react": "^3.1.0",
 		"resize-observer-polyfill": "^1.5.1",
 		"typescript": "^5.3.3",
 		"webpack": "^5.94.0"

packages/data-stores/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/data-stores",
-	"version": "3.0.1",
+	"version": "3.1.0",
 	"description": "Calypso Data Stores.",
 	"homepage": "https://github.com/Automattic/wp-calypso",
 	"license": "GPL-2.0-or-later",
@@ -26,7 +26,7 @@
 	"types": "dist/types",
 	"scripts": {
 		"clean": "tsc --build ./tsconfig.json ./tsconfig-cjs.json --clean && rm -rf dist",
-		"build": "tsc --build ./tsconfig.json ./tsconfig-cjs.json && copy-assets",
+		"build": "tsc --build ./tsconfig.json ./tsconfig-cjs.json && run -T copy-assets",
 		"prepare": "yarn run build",
 		"prepack": "yarn run clean && yarn run build",
 		"watch": "tsc --build ./tsconfig.json --watch"
@@ -35,10 +35,11 @@
 		"@automattic/calypso-analytics": "workspace:^",
 		"@automattic/calypso-config": "workspace:^",
 		"@automattic/calypso-products": "workspace:^",
-		"@automattic/design-picker": "workspace:^",
 		"@automattic/format-currency": "workspace:^",
 		"@automattic/i18n-utils": "workspace:^",
 		"@automattic/js-utils": "workspace:^",
+		"@automattic/load-script": "workspace:^",
+		"@automattic/oauth-token": "workspace:^",
 		"@automattic/shopping-cart": "workspace:^",
 		"@tanstack/react-query": "^5.15.5",
 		"@wordpress/api-fetch": "^7.8.0",
@@ -58,7 +59,8 @@
 		"tslib": "^2.3.0",
 		"use-debounce": "^3.1.0",
 		"utility-types": "^3.10.0",
-		"validator": "^13.5.2"
+		"validator": "^13.5.2",
+		"wpcom-proxy-request": "workspace:^"
 	},
 	"peerDependencies": {
 		"@wordpress/data": "^10.8.0",
@@ -67,13 +69,13 @@
 	},
 	"devDependencies": {
 		"@automattic/calypso-typescript-config": "workspace:^",
+		"@automattic/design-picker": "workspace:^",
 		"@remix-run/router": "^1.5.0",
 		"@types/validator": "^13.7.1",
 		"jest-fetch-mock": "^3.0.3",
 		"nock": "^13.5.4",
 		"node-fetch": "^2.6.6",
 		"typescript": "^5.3.3",
-		"wait-for-expect": "^3.0.2",
-		"wpcom-proxy-request": "workspace:^"
+		"wait-for-expect": "^3.0.2"
 	}
 }

packages/data-stores/src/queries/use-launchpad.ts

@@ -1,10 +1,8 @@
-/* eslint-disable no-restricted-imports */
 import { recordTracksEvent } from '@automattic/calypso-analytics';
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import apiFetch from '@wordpress/api-fetch';
 import { addQueryArgs } from '@wordpress/url';
 import wpcomRequest, { canAccessWpcomApis } from 'wpcom-proxy-request';
-import wpcom from 'calypso/lib/wp'; // Import restricted
 
 interface APIFetchOptions {
 	global: boolean;
@@ -71,21 +69,22 @@ export const fetchLaunchpad = (
 	const slug = encodeURIComponent( siteSlug as string );
 	const checklistSlugEncoded = checklistSlug ? encodeURIComponent( checklistSlug ) : null;
 	const launchpadContextEncoded = launchpadContext ? encodeURIComponent( launchpadContext ) : null;
-
-	const requestUrl = addQueryArgs( `/sites/${ slug }/launchpad?_locale=user`, {
+	const queryArgs = {
+		_locale: 'uesr',
 		...( checklistSlug && { checklist_slug: checklistSlugEncoded } ),
 		...( launchpadContext && { launchpad_context: launchpadContextEncoded } ),
-	} );
+	};
 
 	return canAccessWpcomApis()
-		? wpcom.req.get( {
-				path: requestUrl,
+		? wpcomRequest( {
+				path: addQueryArgs( `/sites/${ slug }/launchpad`, queryArgs ),
 				apiNamespace: 'wpcom/v2',
 				apiVersion: '2',
+				method: 'GET',
 		  } )
 		: apiFetch( {
 				global: true,
-				path: `/wpcom/v2${ requestUrl }`,
+				path: addQueryArgs( `/wpcom/v2/launchpad`, queryArgs ),
 		  } as APIFetchOptions );
 };
 
@@ -159,18 +158,17 @@ export const updateLaunchpadSettings = (
 	settings: LaunchpadUpdateSettings = {}
 ) => {
 	const slug = siteSlug ? encodeURIComponent( siteSlug ) : null;
-	const requestUrl = `/sites/${ slug }/launchpad`;
 
 	return canAccessWpcomApis()
 		? wpcomRequest( {
-				path: requestUrl,
+				path: `/sites/${ slug }/launchpad`,
 				apiNamespace: 'wpcom/v2',
 				method: 'PUT',
 				body: settings,
 		  } )
 		: apiFetch( {
 				global: true,
-				path: `/wpcom/v2${ requestUrl }`,
+				path: `/wpcom/v2/launchpad`,
 				method: 'PUT',
 				data: settings,
 		  } as APIFetchOptions );

packages/data-stores/src/subscriber/actions.ts

@@ -1,5 +1,4 @@
-/* eslint-disable no-restricted-imports */
-import * as oauthToken from 'calypso/lib/oauth-token'; // Import restricted
+import * as oauthToken from '@automattic/oauth-token';
 import { wpcomRequest } from '../wpcom-request-controls';
 import {
 	AddSubscribersResponse,

packages/launchpad/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/launchpad",
-	"version": "1.0.1",
+	"version": "1.1.0",
 	"description": "Launchpad components.",
 	"homepage": "https://github.com/Automattic/wp-calypso",
 	"license": "GPL-2.0-or-later",
@@ -30,10 +30,18 @@
 		"storybook": "sb dev"
 	},
 	"dependencies": {
+		"@automattic/calypso-analytics": "workspace:^",
+		"@automattic/calypso-config": "workspace:^",
 		"@automattic/components": "workspace:^",
 		"@automattic/data-stores": "workspace:^",
 		"@automattic/i18n-utils": "workspace:^",
+		"@automattic/typography": "workspace:^",
+		"@automattic/viewport": "workspace:^",
+		"@tanstack/react-query": "^5.15.5",
+		"@wordpress/base-styles": "^5.8.0",
 		"@wordpress/components": "^28.8.0",
+		"@wordpress/icons": "^10.8.0",
+		"@wordpress/url": "^4.8.0",
 		"clsx": "^2.1.1",
 		"tslib": "^2.3.0",
 		"utility-types": "^3.10.0",

packages/launchpad/src/action-components/share-site-modal/index.tsx

@@ -2,8 +2,8 @@ import { Popover } from '@automattic/components';
 import { updateLaunchpadSettings } from '@automattic/data-stores';
 import { useQueryClient } from '@tanstack/react-query';
 import { Button, Modal } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
 import { Icon, link } from '@wordpress/icons';
-import { useTranslate } from 'i18n-calypso';
 import { useState, useRef } from 'react';
 import type { SiteDetails } from '@automattic/data-stores';
 
@@ -15,7 +15,6 @@ interface ShareSiteModalProps {
 }
 
 const ShareSiteModal = ( { setModalIsOpen, site }: ShareSiteModalProps ) => {
-	const translate = useTranslate();
 	const queryClient = useQueryClient();
 	const getSiteSlug = ( site: SiteDetails | null ): string | null => {
 		if ( ! site ) {
@@ -57,9 +56,14 @@ const ShareSiteModal = ( { setModalIsOpen, site }: ShareSiteModalProps ) => {
 			>
 				<div className="share-site-modal__modal-content">
 					<div className="share-site-modal__modal-text">
-						<h1 className="share-site-modal__modal-heading">{ translate( 'Share your site' ) }</h1>
+						<h1 className="share-site-modal__modal-heading">
+							{ __( 'Share your site', 'launchpad' ) }
+						</h1>
 						<p className="share-site-modal__modal-body">
-							{ translate( 'Now you can head over to your site and share it with the world.' ) }
+							{ __(
+								'Now you can head over to your site and share it with the world.',
+								'launchpad'
+							) }
 						</p>
 					</div>
 					<div className="share-site-modal__modal-actions">
@@ -75,7 +79,7 @@ const ShareSiteModal = ( { setModalIsOpen, site }: ShareSiteModalProps ) => {
 									context={ clipboardTextEl.current }
 									position="top"
 								>
-									{ translate( 'Copied to clipboard!' ) }
+									{ __( 'Copied to clipboard!', 'launchpad' ) }
 								</Popover>
 							</div>
 
@@ -86,7 +90,7 @@ const ShareSiteModal = ( { setModalIsOpen, site }: ShareSiteModalProps ) => {
 							>
 								<Icon icon={ link } size={ 22 } />
 								<span className="share-site-modal__modal-view-site-text">
-									{ translate( 'Copy' ) }
+									{ __( 'Copy', 'launchpad' ) }
 								</span>
 							</Button>
 						</div>

packages/launchpad/src/checklist-item/index.tsx

@@ -1,7 +1,7 @@
 import { Badge, Gridicon } from '@automattic/components';
 import { Button } from '@wordpress/components';
+import { __, isRTL } from '@wordpress/i18n';
 import clsx from 'clsx';
-import { translate, useRtl } from 'i18n-calypso';
 import type { Task, Expandable } from '../types';
 import type { FC, Key } from 'react';
 
@@ -16,7 +16,6 @@ interface Props {
 }
 
 const ChecklistItem: FC< Props > = ( { task, isPrimaryAction, expandable, onClick } ) => {
-	const isRtl = useRtl();
 	const { id, completed, disabled = false, title, subtitle, actionDispatch } = task;
 
 	// If the task says we should use the Calypso path, ensure we use that link for the button's href.
@@ -79,7 +78,7 @@ const ChecklistItem: FC< Props > = ( { task, isPrimaryAction, expandable, onClic
 						// show checkmark for completed tasks regardless if they are disabled or kept active
 						<div className="checklist-item__checkmark-container">
 							<Gridicon
-								aria-label={ translate( 'Task complete' ) }
+								aria-label={ __( 'Task complete', 'launchpad' ) }
 								className="checklist-item__checkmark"
 								icon="checkmark"
 								size={ 18 }
@@ -95,9 +94,9 @@ const ChecklistItem: FC< Props > = ( { task, isPrimaryAction, expandable, onClic
 					) }
 					{ shouldDisplayChevron && (
 						<Gridicon
-							aria-label={ translate( 'Task enabled' ) }
+							aria-label={ __( 'Task enabled', 'launchpad' ) }
 							className="checklist-item__chevron"
-							icon={ `chevron-${ isRtl ? 'left' : 'right' }` }
+							icon={ `chevron-${ isRTL() ? 'left' : 'right' }` }
 							size={ 18 }
 						/>
 					) }

packages/oauth-token/CHANGELOG.md

@@ -0,0 +1,3 @@
+## 1.0.0
+
+- Initial release after extracting from Calypso.