Move G2 utils to the ui folder

packages/components/src/ui/font-size-control/font-size-control.js

@@ -1,20 +1,21 @@
 /**
- * WordPress dependencies
+ * External dependencies
  */
-import { __ } from '@wordpress/i18n';
+import { contextConnect } from '@wp-g2/context';
+import { VisuallyHidden, VStack } from '@wp-g2/components';
 
 /**
- * External dependencies
+ * WordPress dependencies
  */
-import { contextConnect } from '@wp-g2/context';
-import { View, VisuallyHidden, VStack } from '@wp-g2/components';
+import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
 import FontSizeControlSelect from './select';
 import FontSizeControlSlider from './slider';
 import useFontSizeControl from './use-font-size-control';
+import { View } from '../view';
 
 function FontSizeControl( props, forwardedRef ) {
 	const {

packages/components/src/ui/font-size-control/select.js

@@ -1,26 +1,26 @@
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-
 /**
  * External dependencies
  */
 import { noop } from 'lodash';
 import { contextConnect, useContextSystem } from '@wp-g2/context';
 import {
-	Grid,
 	TextInput,
 	SelectDropdown,
 	FormGroup,
 	Button,
-	View,
 } from '@wp-g2/components';
 
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
 /**
  * Internal dependencies
  */
 import { getSelectTemplateColumns } from './utils';
+import { Grid } from '../grid';
+import { View } from '../view';
 
 function renderItem( { name, style } ) {
 	return <span style={ style }>{ name }</span>;

packages/components/src/ui/font-size-control/slider.js

@@ -1,24 +1,19 @@
 /**
- * WordPress dependencies
+ * External dependencies
  */
-import { __ } from '@wordpress/i18n';
+import { noop } from 'lodash';
+import { ControlLabel, Slider, TextInput, VStack } from '@wp-g2/components';
 
 /**
- * External dependencies
+ * WordPress dependencies
  */
-import { noop } from 'lodash';
+import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
-import {
-	ControlLabel,
-	Grid,
-	Slider,
-	TextInput,
-	VStack,
-} from '@wp-g2/components';
 import { getSliderTemplateColumns } from './utils';
+import { Grid } from '../grid';
 
 function FontSizeControlSlider( props ) {
 	const {

packages/components/src/ui/text/use-text.js

@@ -14,7 +14,7 @@ import { useMemo, Children, cloneElement } from '@wordpress/element';
  * Internal dependencies
  */
 import { useTruncate } from '../truncate';
-import { getOptimalTextShade } from '../../utils/colors';
+import { getOptimalTextShade } from '../utils';
 import * as styles from './styles';
 import { createHighlighterText } from './utils';
 

packages/components/src/ui/utils/colors.js

@@ -0,0 +1,99 @@
+/**
+ * External dependencies
+ */
+import memoize from 'memize';
+import tinycolor from 'tinycolor2';
+
+/** @type {HTMLDivElement} */
+let colorComputationNode;
+
+/**
+ * @return {HTMLDivElement | undefined} The HTML element for color computation.
+ */
+function getColorComputationNode() {
+	if ( typeof document === 'undefined' ) return;
+
+	if ( ! colorComputationNode ) {
+		// Create a temporary element for style computation.
+		const el = document.createElement( 'div' );
+		el.setAttribute( 'data-g2-color-computation-node', '' );
+		// Inject for window computed style.
+		document.body.appendChild( el );
+		colorComputationNode = el;
+	}
+
+	return colorComputationNode;
+}
+
+/**
+ * @param {string | unknown} value
+ *
+ * @return {boolean} Whether the value is a valid color.
+ */
+function isColor( value ) {
+	if ( typeof value !== 'string' ) return false;
+	const test = tinycolor( value );
+
+	return test.isValid();
+}
+
+/**
+ * Retrieves the computed background color. This is useful for getting the
+ * value of a CSS variable color.
+ *
+ * @param {string | unknown} backgroundColor The background color to compute.
+ *
+ * @return {string} The computed background color.
+ */
+function _getComputedBackgroundColor( backgroundColor ) {
+	if ( typeof backgroundColor !== 'string' ) return '';
+
+	if ( isColor( backgroundColor ) ) return backgroundColor;
+
+	if ( ! backgroundColor.includes( 'var(' ) ) return '';
+	if ( typeof document === 'undefined' ) return '';
+
+	// Attempts to gracefully handle CSS variables color values.
+	const el = getColorComputationNode();
+	if ( ! el ) return '';
+
+	el.style.background = backgroundColor;
+	// Grab the style
+	const computedColor = window?.getComputedStyle( el ).background;
+	// Reset
+	el.style.background = '';
+
+	return computedColor || '';
+}
+
+const getComputedBackgroundColor = memoize( _getComputedBackgroundColor );
+
+/**
+ * Get the text shade optimized for readability, based on a background color.
+ *
+ * @param {string | unknown} backgroundColor  The background color.
+ *
+ * @return {string} The optimized text color (black or white).
+ */
+function getOptimalTextColor( backgroundColor ) {
+	const background = getComputedBackgroundColor( backgroundColor );
+	const isReadableWithBlackText = tinycolor.isReadable(
+		background,
+		'#000000'
+	);
+
+	return isReadableWithBlackText ? '#000000' : '#ffffff';
+}
+
+/**
+ * Get the text shade optimized for readability, based on a background color.
+ *
+ * @param {string | unknown} backgroundColor The background color.
+ *
+ * @return {string} The optimized text shade (dark or light).
+ */
+export function getOptimalTextShade( backgroundColor ) {
+	const result = getOptimalTextColor( backgroundColor );
+
+	return result === '#000000' ? 'dark' : 'light';
+}

packages/components/src/ui/utils/index.js

@@ -1 +1,2 @@
+export { getOptimalTextShade } from './colors';
 export { createComponent } from './create-component';

packages/components/src/utils/colors.js

@@ -3,7 +3,6 @@
  */
 import { get } from 'lodash';
 import tinycolor from 'tinycolor2';
-import memoize from 'memize';
 
 /**
  * Internal dependencies
@@ -40,146 +39,3 @@ export function color( value ) {
 	const fallbackColor = '#000';
 	return get( COLORS, value, fallbackColor );
 }
-
-/** @type {HTMLDivElement} */
-let __colorComputationNode;
-
-/**
- * @return {HTMLDivElement | undefined} The HTML element for color computation.
- */
-function getColorComputationNode() {
-	if ( typeof document === 'undefined' ) return;
-
-	if ( ! __colorComputationNode ) {
-		// Create a temporary element for style computation.
-		const el = document.createElement( 'div' );
-		el.setAttribute( 'data-g2-color-computation-node', '' );
-		// Inject for window computed style.
-		document.body.appendChild( el );
-		__colorComputationNode = el;
-	}
-
-	return __colorComputationNode;
-}
-
-/**
- * @param {string | unknown} value
- *
- * @return {boolean} Whether the value is a valid color.
- */
-export function isColor( value ) {
-	if ( typeof value !== 'string' ) return false;
-	const test = tinycolor( value );
-
-	return test.isValid();
-}
-
-/**
- * Retrieves the computed background color. This is useful for getting the
- * value of a CSS variable color.
- *
- * @param {string | unknown} backgroundColor The background color to compute.
- *
- * @return {string} The computed background color.
- */
-function __getComputedBackgroundColor( backgroundColor ) {
-	if ( typeof backgroundColor !== 'string' ) return '';
-
-	if ( isColor( backgroundColor ) ) return backgroundColor;
-
-	if ( ! backgroundColor.includes( 'var(' ) ) return '';
-	if ( typeof document === 'undefined' ) return '';
-
-	// Attempts to gracefully handle CSS variables color values.
-	const el = getColorComputationNode();
-	if ( ! el ) return '';
-
-	el.style.background = backgroundColor;
-	// Grab the style
-	const computedColor = window?.getComputedStyle( el ).background;
-	// Reset
-	el.style.background = '';
-
-	return computedColor || '';
-}
-
-/**
- * Retrieves the computed background color. This is useful for getting the
- * value of a CSS variable color.
- *
- * @param {string | unknown} color The background color to compute.
- *
- * @return {string} The computed background color.
- */
-export const getComputedBackgroundColor = memoize(
-	__getComputedBackgroundColor
-);
-
-/**
- * Retrieves the computed text color. This is useful for getting the
- * value of a CSS variable color.
- *
- * @param {string | unknown} textColor
- *
- * @return {string} The computed text color.
- */
-function __getComputedColor( textColor ) {
-	if ( typeof textColor !== 'string' ) return '';
-
-	if ( isColor( textColor ) ) return textColor;
-
-	if ( ! textColor.includes( 'var(' ) ) return '';
-	if ( typeof document === 'undefined' ) return '';
-
-	// Attempts to gracefully handle CSS variables color values.
-	const el = getColorComputationNode();
-	if ( ! el ) return '';
-
-	el.style.color = textColor;
-	// Grab the style
-	const computedColor = window?.getComputedStyle( el ).color;
-	// Reset
-	el.style.color = '';
-
-	return computedColor || '';
-}
-
-/**
- * Retrieves the computed text color. This is useful for getting the
- * value of a CSS variable color.
- *
- * @param {string | unknown} color
- *
- * @return {string} The computed text color.
- */
-export const getComputedColor = memoize( __getComputedColor );
-
-/**
- * Get the text shade optimized for readability, based on a background color.
- *
- * @param {string | unknown} backgroundColor  The background color.
- *
- * @return {string} The optimized text color (black or white).
- */
-export function getOptimalTextColor( backgroundColor ) {
-	const background = getComputedBackgroundColor( backgroundColor );
-	const isReadableWithBlackText = tinycolor.isReadable(
-		background,
-		'#000000'
-	);
-
-	return isReadableWithBlackText ? '#000000' : '#ffffff';
-}
-
-/**
- * Get the text shade optimized for readability, based on a background color.
- *
- * @param {string | unknown} backgroundColor The background color.
- *
- * @return {string} The optimized text shade (dark or light).
- */
-export function getOptimalTextShade( backgroundColor ) {
-	const result = getOptimalTextColor( backgroundColor );
-
-	return result === '#000000' ? 'dark' : 'light';
-}