Components: Group all G2 components in the ui folder (#28624)

* Components: Group all G2 components in the `ui` folder

* Move G2 context to the `ui` folder

* Storybook improvements for G2 stories

* Move G2 Text component to `ui` folder

* Update manifest for the handbook

* Move FontSizeControl to the `ui` subfolder

* Move createComponent util to the `ui` folder

* Move G2 utils to the `ui` folder

docs/manifest.json

@@ -965,12 +965,6 @@
 		"markdown_source": "../packages/components/src/form-token-field/README.md",
 		"parent": "components"
 	},
-	{
-		"title": "Grid",
-		"slug": "grid",
-		"markdown_source": "../packages/components/src/grid/README.md",
-		"parent": "components"
-	},
 	{
 		"title": "Guide",
 		"slug": "guide",
@@ -1073,12 +1067,6 @@
 		"markdown_source": "../packages/components/src/menu-items-choice/README.md",
 		"parent": "components"
 	},
-	{
-		"title": "BottomSheetNavigation",
-		"slug": "bottom-sheet-navigation",
-		"markdown_source": "../packages/components/src/mobile/bottom-sheet/bottom-sheet-navigation/README.md",
-		"parent": "components"
-	},
 	{
 		"title": "Modal",
 		"slug": "modal",
@@ -1223,12 +1211,6 @@
 		"markdown_source": "../packages/components/src/text-highlight/README.md",
 		"parent": "components"
 	},
-	{
-		"title": "Next",
-		"slug": "next",
-		"markdown_source": "../packages/components/src/text/next/README.md",
-		"parent": "components"
-	},
 	{
 		"title": "Text",
 		"slug": "text",
@@ -1289,24 +1271,12 @@
 		"markdown_source": "../packages/components/src/tree-select/README.md",
 		"parent": "components"
 	},
-	{
-		"title": "Truncate",
-		"slug": "truncate",
-		"markdown_source": "../packages/components/src/truncate/README.md",
-		"parent": "components"
-	},
 	{
 		"title": "UnitControl",
 		"slug": "unit-control",
 		"markdown_source": "../packages/components/src/unit-control/README.md",
 		"parent": "components"
 	},
-	{
-		"title": "View",
-		"slug": "view",
-		"markdown_source": "../packages/components/src/view/README.md",
-		"parent": "components"
-	},
 	{
 		"title": "VisuallyHidden",
 		"slug": "visually-hidden",

docs/tool/manifest.js

@@ -7,8 +7,8 @@ const glob = require( 'glob' ).sync;
 
 const baseRepoUrl = '..';
 const componentPaths = glob( 'packages/components/src/*/**/README.md', {
-	// Don't expose documentation for mobile only components just yet.
-	ignore: '**/mobile/*/README.md',
+	// Don't expose documentation for mobile only and G2 components just yet.
+	ignore: [ '**/src/mobile/**/README.md', '**/src/ui/**/README.md' ],
 } );
 const packagePaths = glob( 'packages/*/package.json' ).map(
 	( fileName ) => fileName.split( '/' )[ 1 ]

packages/components/src/font-size-picker/index.js

@@ -18,7 +18,7 @@ import Button from '../button';
 import RangeControl from '../range-control';
 import CustomSelectControl from '../custom-select-control';
 import VisuallyHidden from '../visually-hidden';
-import { withNextComponent } from './next/';
+import { withNextComponent } from './next';
 
 const DEFAULT_FONT_SIZE = 'default';
 const CUSTOM_FONT_SIZE = 'custom';

packages/components/src/font-size-picker/next/index.js → packages/components/src/font-size-picker/next.js

@@ -1,8 +1,8 @@
 /**
  * Internal dependencies
  */
-import { __unstableWithNext as withNext } from '../../__next/context';
-import FontSizeControl from './font-size-control';
+import { withNext } from '../ui/context';
+import { FontSizeControl } from '../ui/font-size-control';
 
 const FontSizePicker =
 	process.env.COMPONENT_SYSTEM_PHASE === 1

packages/components/src/index.js

@@ -71,7 +71,6 @@ export { default as FormToggle } from './form-toggle';
 export { default as FormTokenField } from './form-token-field';
 export { default as __experimentalGradientPicker } from './gradient-picker';
 export { default as __experimentalCustomGradientPicker } from './custom-gradient-picker';
-export { default as __experimentalGrid } from './grid';
 export { default as Guide } from './guide';
 export { default as GuidePage } from './guide/page';
 export { default as Icon } from './icon';
@@ -130,9 +129,7 @@ export {
 	TreeGridItem as __experimentalTreeGridItem,
 } from './tree-grid';
 export { default as TreeSelect } from './tree-select';
-export { default as __experimentalTruncate } from './truncate';
 export { default as __experimentalUnitControl } from './unit-control';
-export { default as __experimentalView } from './view';
 export { default as VisuallyHidden } from './visually-hidden';
 export { default as IsolatedEventContainer } from './isolated-event-container';
 export {
@@ -161,6 +158,6 @@ export { default as withSpokenMessages } from './higher-order/with-spoken-messag
 
 // Component System
 export {
-	__unstableWithNext,
-	__unstableComponentSystemProvider,
-} from './__next/context';
+	withNext as __unstableWithNext,
+	ComponentSystemProvider as __unstableComponentSystemProvider,
+} from './ui/context';

packages/components/src/text/next/index.js → packages/components/src/text/next.js

@@ -1,16 +1,16 @@
 /**
  * Internal dependencies
  */
-import { __unstableWithNext as withNext } from '../../__next/context';
-import NextText from './text';
-import { text } from '../styles/text-mixins';
+import { withNext } from '../ui/context';
+import { Text as NextText } from '../ui/text';
+import { text } from './styles/text-mixins';
 
 const Text = process.env.COMPONENT_SYSTEM_PHASE === 1 ? NextText : undefined;
 
 /**
  * @typedef AdaptedTextProps
  * @property {keyof JSX.IntrinsicElements} as Styled components `as` prop.
- * @property {import('../styles/text-mixins').TextVariant} variant The variant to render.
+ * @property {import('./styles/text-mixins').TextVariant} variant The variant to render.
  * @property {import('react').ReactNode} children Children to render.
  * @property {string} [className] Classname to render on the element.
  */

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

@@ -0,0 +1,2 @@
+export { ComponentSystemProvider } from './component-system-provider';
+export { withNext } from './with-next';

packages/components/src/font-size-picker/next/font-size-control.js → 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 './font-size-control-select';
-import FontSizeControlSlider from './font-size-control-slider';
-import { useFontSizeControl } from './use-font-size-control';
+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/index.js

@@ -0,0 +1,2 @@
+export { default as FontSizeControl } from './font-size-control';
+export { default as useFontSizeControl } from './use-font-size-control';

packages/components/src/font-size-picker/next/font-size-control-select.js → 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 './font-size-control-utils';
+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/font-size-picker/next/font-size-control-slider.js → 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 './font-size-control-utils';
+import { getSliderTemplateColumns } from './utils';
+import { Grid } from '../grid';
 
 function FontSizeControlSlider( props ) {
 	const {

packages/components/src/font-size-picker/next/use-font-size-control.js → packages/components/src/ui/font-size-control/use-font-size-control.js

@@ -13,17 +13,17 @@ import { useCallback, useMemo } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import * as styles from './font-size-control-styles';
+import * as styles from './styles';
 import {
 	getInputValue,
 	getSelectOptions,
 	getSelectValueFromFontSize,
 	hasUnit,
 	isCustomSelectedItem,
 	isCustomValue,
-} from './font-size-control-utils';
+} from './utils';
 
-export function useFontSizeControl( props ) {
+export default function useFontSizeControl( props ) {
 	const {
 		disableCustomFontSizes,
 		fontSizes = [],

packages/components/src/grid/README.md → packages/components/src/ui/grid/README.md

@@ -1,14 +1,11 @@
-# Grid
+# Grid (Experimental)
 
 `Grid` is a primitive layout component that can arrange content in a grid configuration.
 
 ## Usage
 
 ```jsx
-import {
-	__experientalGrid as Grid,
-	__experimentalView as View,
-} from '@wordpress/components';
+import { Grid, View } from '@wordpress/components/ui';
 
 function Example() {
 	return (

packages/components/src/grid/grid.js → packages/components/src/ui/grid/grid.js

@@ -1,15 +1,15 @@
 /**
  * Internal dependencies
  */
-import { createComponent } from '../utils/create-component';
-import { useGrid } from './use-grid';
+import { createComponent } from '../utils';
+import useGrid from './use-grid';
 
 /**
  * `Grid` is a primitive layout component that can arrange content in a grid configuration.
  *
  * @example
  * ```jsx
- * import { __experimentalGrid as Grid } from `@wordpress/components`
+ * import { Grid } from `@wordpress/components/ui`
  *
  * function Example() {
  *   return (

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

@@ -0,0 +1,2 @@
+export { default as Grid } from './grid';
+export { default as useGrid } from './use-grid';

packages/components/src/grid/stories/index.js → packages/components/src/ui/grid/stories/index.js

@@ -6,12 +6,12 @@ import { number } from '@storybook/addon-knobs';
 /**
  * Internal dependencies
  */
-import View from '../../view';
-import Grid from '../index';
+import { View } from '../../view';
+import Grid from '../grid';
 
 export default {
 	component: Grid,
-	title: 'Components/Grid',
+	title: 'G2 Components (Experimental)/Grid',
 };
 
 const Item = ( props ) => (

packages/components/src/grid/test/index.js → packages/components/src/ui/grid/test/grid.js

@@ -7,8 +7,8 @@ import { ui } from '@wp-g2/styles';
 /**
  * Internal dependencies
  */
-import View from '../../view';
-import Grid from '../index';
+import { View } from '../../view';
+import Grid from '../grid';
 
 describe( 'props', () => {
 	test( 'should render correctly', () => {

packages/components/src/grid/types.ts → packages/components/src/ui/grid/types.ts

@@ -1,5 +1,6 @@
 import { CSSProperties } from 'react';
-import { ResponsiveCSSValue } from '../utils/types';
+
+type ResponsiveCSSValue<T> = Array<T | undefined> | T;
 
 type GridAlignment =
 	| 'bottom'

packages/components/src/grid/use-grid.js → packages/components/src/ui/grid/use-grid.js

@@ -12,12 +12,12 @@ import { useMemo } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import { getAlignmentProps } from './grid-utils';
+import { getAlignmentProps } from './utils';
 
 /**
  * @param {import('@wp-g2/create-styles').ViewOwnProps<import('./types').Props, 'div'>} props
  */
-export function useGrid( props ) {
+export default function useGrid( props ) {
 	const {
 		align,
 		alignment,

packages/components/src/ui/index.js

@@ -0,0 +1,4 @@
+export * from './grid';
+export * from './text';
+export * from './truncate';
+export * from './view';