Reorganize files and add more READMEs

docs/manifest.json

@@ -779,10 +779,22 @@
 		"markdown_source": "../packages/components/src/external-link/README.md",
 		"parent": "components"
 	},
+	{
+		"title": "FlexBlock",
+		"slug": "flex-block",
+		"markdown_source": "../packages/components/src/flex/flex-block/README.md",
+		"parent": "components"
+	},
+	{
+		"title": "FlexItem",
+		"slug": "flex-item",
+		"markdown_source": "../packages/components/src/flex/flex-item/README.md",
+		"parent": "components"
+	},
 	{
 		"title": "Flex",
 		"slug": "flex",
-		"markdown_source": "../packages/components/src/flex/README.md",
+		"markdown_source": "../packages/components/src/flex/flex/README.md",
 		"parent": "components"
 	},
 	{

packages/components/src/flex/flex-block/README.md

@@ -0,0 +1,15 @@
+# FlexBlock
+
+A layout component to contain items of a fixed width within `Flex`.
+
+## Usage
+
+See [`flex/README.md#usage`](../flex/README.md#usage) for how to use `FlexBlock`.
+
+## Props
+
+### display
+
+**Type**: `[CSSProperties['display']]`
+
+The CSS display property of `FlexBlock`.

packages/components/src/flex/flex-block.js → packages/components/src/flex/flex-block/component.js

@@ -1,8 +1,8 @@
 /**
  * Internal dependencies
  */
-import { createComponent } from '../ui/utils';
-import { useFlexBlock } from './use-flex-block';
+import { createComponent } from '../../ui/utils';
+import { useFlexBlock } from './hook';
 
 /**
  * `FlexBlock` is a primitive layout component that adaptively resizes content within layout containers like `Flex`.

packages/components/src/flex/use-flex-block.js → packages/components/src/flex/flex-block/hook.js

@@ -1,11 +1,11 @@
 /**
  * Internal dependencies
  */
-import { useContextSystem } from '../ui/context';
-import { useFlexItem } from './use-flex-item';
+import { useContextSystem } from '../../ui/context';
+import { useFlexItem } from '../flex-item';
 
 /**
- * @param {import('../ui/context').ViewOwnProps<import('./types').FlexBlockProps, 'div'>} props
+ * @param {import('../../ui/context').ViewOwnProps<import('../types').FlexBlockProps, 'div'>} props
  */
 export function useFlexBlock( props ) {
 	const otherProps = useContextSystem( props, 'FlexBlock' );

packages/components/src/flex/flex-block/index.js

@@ -0,0 +1,2 @@
+export { default } from './component';
+export { useFlexBlock } from './hook';

packages/components/src/flex/flex-item/README.md

@@ -0,0 +1,21 @@
+# FlexItem
+
+A layout component to contain items of a fixed width within `Flex`.
+
+## Usage
+
+See [`flex/README.md#usage`](../flex/README.md#usage) for how to use `FlexItem`.
+
+## Props
+
+### display
+
+**Type**: `[CSSProperties['display']]`
+
+The CSS display property of `FlexItem`.
+
+### isBlock
+
+**Type**: `[boolean]`
+
+Determins if `FlexItem` should render as an adaptive full-width block.

packages/components/src/flex/flex-item.js → packages/components/src/flex/flex-item/component.js

@@ -1,8 +1,8 @@
 /**
  * Internal dependencies
  */
-import { createComponent } from '../ui/utils';
-import { useFlexItem } from './use-flex-item';
+import { createComponent } from '../../ui/utils';
+import { useFlexItem } from './hook';
 
 /**
  * `FlexItem` is a primitive layout component that aligns content within layout containers like `Flex`.

packages/components/src/flex/use-flex-item.js → packages/components/src/flex/flex-item/hook.js

@@ -6,12 +6,12 @@ import { css, cx } from 'emotion';
 /**
  * Internal dependencies
  */
-import { useContextSystem } from '../ui/context';
-import { useFlexContext } from './context';
-import * as styles from './styles';
+import { useContextSystem } from '../../ui/context';
+import { useFlexContext } from '../context';
+import * as styles from '../styles';
 
 /**
- * @param {import('../ui/context').ViewOwnProps<import('./types').FlexItemProps, 'div'>} props
+ * @param {import('../../ui/context').ViewOwnProps<import('../types').FlexItemProps, 'div'>} props
  */
 export function useFlexItem( props ) {
 	const {

packages/components/src/flex/flex-item/index.js

@@ -0,0 +1,2 @@
+export { default } from './component';
+export { useFlexItem } from './hook';

packages/components/src/flex/README.md → packages/components/src/flex/flex/README.md

@@ -27,39 +27,39 @@ function Example() {
 
 ##### align
 
-**Type**: `CSS['alignItems']`
+**Type**: `CSSProperties['alignItems']`
 
 Aligns children using CSS Flexbox `align-items`. Vertically aligns content if the `direction` is `row`, or horizontally aligns content if the `direction` is `column`.
 
 In the example below, `flex-start` will align the children content to the top.
 
 ##### direction
 
-**Type**: `FlexDirection`
+**Type**: `[ResponsiveCSSValue<CSSProperties['flexDirection']>]`
 
 The direction flow of the children content can be adjusted with `direction`. `column` will align children vertically and `row` will align children horizontally.
 
 ##### expanded
 
-**Type**: `boolean`
+**Type**: `[boolean]`
 
 Expands to the maximum available width (if horizontal) or height (if vertical).
 
 ##### gap
 
-**Type**: `number`
+**Type**: `[number | string]`
 
 Spacing in between each child can be adjusted by using `gap`. The value of `gap` works as a multiplier to the library's grid system (base of `4px`).
 
 ##### justify
 
-**Type**: `CSS['justifyContent']`
+**Type**: `[CSSProperties['justifyContent']]`
 
 Horizontally aligns content if the `direction` is `row`, or vertically aligns content if the `direction` is `column`.
 In the example below, `flex-start` will align the children content to the left.
 
 ##### wrap
 
-**Type**: `boolean`
+**Type**: `[boolean]`
 
 Determines if children should wrap.

packages/components/src/flex/flex.js → packages/components/src/flex/flex/component.js

@@ -1,13 +1,13 @@
 /**
  * Internal dependencies
  */
-import { contextConnect } from '../ui/context';
-import { useFlex } from './use-flex';
-import { FlexContext } from './context';
-import { View } from '../ui/view';
+import { contextConnect } from '../../ui/context';
+import { useFlex } from './hook';
+import { FlexContext } from './../context';
+import { View } from '../../ui/view';
 
 /**
- * @param {import('../ui/context').ViewOwnProps<import('./types').FlexProps, 'div'>} props
+ * @param {import('../../ui/context').ViewOwnProps<import('../types').FlexProps, 'div'>} props
  * @param {import('react').Ref<any>} forwardedRef
  */
 function Flex( props, forwardedRef ) {

packages/components/src/flex/use-flex.js → packages/components/src/flex/flex/hook.js

@@ -12,15 +12,15 @@ import deprecated from '@wordpress/deprecated';
 /**
  * Internal dependencies
  */
-import { useContextSystem } from '../ui/context';
-import { useResponsiveValue } from '../ui/utils/use-responsive-value';
-import { space } from '../ui/utils/space';
-import * as styles from './styles';
+import { useContextSystem } from '../../ui/context';
+import { useResponsiveValue } from '../../ui/utils/use-responsive-value';
+import { space } from '../../ui/utils/space';
+import * as styles from '../styles';
 
 /**
  *
- * @param {import('../ui/context').ViewOwnProps<import('./types').FlexProps, 'div'>} props
- * @return {import('../ui/context').ViewOwnProps<import('./types').FlexProps, 'div'>} Props with the deprecated props removed.
+ * @param {import('../../ui/context').ViewOwnProps<import('../types').FlexProps, 'div'>} props
+ * @return {import('../../ui/context').ViewOwnProps<import('../types').FlexProps, 'div'>} Props with the deprecated props removed.
  */
 function useDeprecatedProps( { isReversed, ...otherProps } ) {
 	if ( typeof isReversed !== 'undefined' ) {
@@ -38,7 +38,7 @@ function useDeprecatedProps( { isReversed, ...otherProps } ) {
 }
 
 /**
- * @param {import('../ui/context').ViewOwnProps<import('./types').FlexProps, 'div'>} props
+ * @param {import('../../ui/context').ViewOwnProps<import('../types').FlexProps, 'div'>} props
  */
 export function useFlex( props ) {
 	const {

packages/components/src/flex/flex/index.js

@@ -0,0 +1,2 @@
+export { default } from './component';
+export { useFlex } from './hook';

packages/components/src/flex/index.js

@@ -1,7 +1,3 @@
-export { default as Flex } from './flex';
-export { default as FlexItem } from './flex-item';
-export { default as FlexBlock } from './flex-block';
-
-export * from './use-flex';
-export * from './use-flex-item';
-export * from './use-flex-block';
+export { default as Flex, useFlex } from './flex';
+export { default as FlexItem, useFlexItem } from './flex-item';
+export { default as FlexBlock, useFlexBlock } from './flex-block';

packages/components/src/flex/types.ts

@@ -22,10 +22,6 @@ export type FlexProps = {
 	 * @default 'center'
 	 */
 	align?: CSSProperties[ 'alignItems' ];
-	/**
-	 * @default false
-	 */
-	alignItems?: boolean;
 	/**
 	 * The direction flow of the children content can be adjusted with `direction`. `column` will align children vertically and `row` will align children horizontally.
 	 *
@@ -51,10 +47,6 @@ export type FlexProps = {
 	 * @default 'space-between'
 	 */
 	justify?: CSSProperties[ 'justifyContent' ];
-	/**
-	 * @default false
-	 */
-	justifyContent?: boolean;
 	/**
 	 * Determines if children should wrap.
 	 *