Devdocs: WordPress components gallery (#45523)

* WIP: WordPress components gallery

* Update type definition depdency version

* Fix linting errors

* Fit name of new page on one line

Co-authored-by: Marin Atanasov <8436925+tyxla@users.noreply.github.com>

* Update client/devdocs/design/wordpress-components-gallery/autocomplete.scss

Co-authored-by: Marin Atanasov <8436925+tyxla@users.noreply.github.com>

* Make autocomplete match real-world examples

* Rename default exports to be more descriptive

* Remove importing of WP components styles

They'll be imported globally by #45724

Co-authored-by: Marin Atanasov <8436925+tyxla@users.noreply.github.com>

client/devdocs/controller.js

@@ -109,6 +109,11 @@ const devdocs = {
 		next();
 	},
 
+	wpComponentsGallery( context, next ) {
+		context.primary = <AsyncLoad require="./design/wordpress-components-gallery" />;
+		next();
+	},
+
 	selectors: function ( context, next ) {
 		context.primary = (
 			<AsyncLoad

client/devdocs/design/wordpress-components-gallery/alignment-matrix-control.tsx

@@ -0,0 +1,17 @@
+/**
+ * External dependencies
+ */
+import React, { useState } from 'react';
+
+/**
+ * WordPress dependencies
+ */
+import { __experimentalAlignmentMatrixControl as AlignmentMatrixControl } from '@wordpress/components';
+
+const AlignmentMatrixControlExample = () => {
+	const [ alignment, setAlignment ] = useState( 'center center' );
+
+	return <AlignmentMatrixControl value={ alignment } onChange={ setAlignment } />;
+};
+
+export default AlignmentMatrixControlExample;

client/devdocs/design/wordpress-components-gallery/angle-picker-control.tsx

@@ -0,0 +1,16 @@
+/**
+ * External dependencies
+ */
+import React, { useState } from 'react';
+
+/**
+ * WordPress dependencies
+ */
+import { AnglePickerControl } from '@wordpress/components';
+
+const AnglePickerControlExample = () => {
+	const [ angle, setAngle ] = useState();
+	return <AnglePickerControl value={ angle } onChange={ setAngle } />;
+};
+
+export default AnglePickerControlExample;

client/devdocs/design/wordpress-components-gallery/animate.tsx

@@ -0,0 +1,21 @@
+/**
+ * External dependencies
+ */
+import React from 'react';
+
+/**
+ * WordPress dependencies
+ */
+import { Animate, Notice } from '@wordpress/components';
+
+const AnimateExample = () => (
+	<Animate type="loading">
+		{ ( { className } ) => (
+			<Notice className={ className } status="success">
+				<p>Loading animation</p>
+			</Notice>
+		) }
+	</Animate>
+);
+
+export default AnimateExample;

client/devdocs/design/wordpress-components-gallery/autocomplete.tsx

@@ -0,0 +1,58 @@
+/**
+ * External dependencies
+ */
+import React, { useState } from 'react';
+
+/**
+ * WordPress dependencies
+ */
+import { Autocomplete, __experimentalInputControl as InputControl } from '@wordpress/components';
+
+const autocompleters = [
+	{
+		name: 'fruit',
+		// The prefix that triggers this completer
+		triggerPrefix: '~',
+		// The option data
+		options: [
+			{ visual: '🍎', name: 'Apple', id: 1 },
+			{ visual: '🍊', name: 'Orange', id: 2 },
+			{ visual: '🍇', name: 'Grapes', id: 3 },
+		],
+		// Returns a label for an option like "🍊 Orange"
+		getOptionLabel: ( option ) => (
+			<span>
+				<span>{ option.visual }</span>
+				{ option.name }
+			</span>
+		),
+		// Declares that options should be matched by their name
+		getOptionKeywords: ( option ) => [ option.name ],
+		// Declares that the Grapes option is disabled
+		isOptionDisabled: ( option ) => option.name === 'Grapes',
+		// Declares completions should be inserted as abbreviations
+		getOptionCompletion: ( option ) => <abbr title={ option.name }>{ option.visual }</abbr>,
+	},
+];
+
+const AutocompleteExample = () => {
+	const [ value, setValue ] = useState( '' );
+	return (
+		<div>
+			<Autocomplete record={ value } onChange={ setValue } completers={ autocompleters }>
+				{ ( { isExpanded, listBoxId, activeId, onKeyDown } ) => (
+					<InputControl
+						onKeyDown={ onKeyDown }
+						aria-autocomplete="list"
+						aria-expanded={ isExpanded }
+						aria-owns={ listBoxId }
+						aria-activedescendant={ activeId }
+					/>
+				) }
+			</Autocomplete>
+			<p>Type ~ for triggering the autocomplete.</p>
+		</div>
+	);
+};
+
+export default AutocompleteExample;

client/devdocs/design/wordpress-components-gallery/base-control.tsx

@@ -0,0 +1,17 @@
+/**
+ * External dependencies
+ */
+import React from 'react';
+
+/**
+ * WordPress dependencies
+ */
+import { BaseControl } from '@wordpress/components';
+
+const BaseControlExample = () => (
+	<BaseControl id="textarea-1" label="Text" help="Enter some text">
+		<textarea id="textarea-1" />
+	</BaseControl>
+);
+
+export default BaseControlExample;

client/devdocs/design/wordpress-components-gallery/box-control.tsx

@@ -0,0 +1,29 @@
+/**
+ * External dependencies
+ */
+import React, { useState } from 'react';
+
+/**
+ * WordPress dependencies
+ */
+import { __experimentalBoxControl as BoxControl } from '@wordpress/components';
+
+const { __Visualizer: Visualizer } = BoxControl;
+
+const BoxControlExample = () => {
+	const [ values, setValues ] = useState( {
+		top: '50px',
+		left: '10%',
+		right: '10%',
+		bottom: '50px',
+	} );
+
+	return (
+		<>
+			<BoxControl values={ values } onChange={ setValues } />
+			<Visualizer values={ values } />
+		</>
+	);
+};
+
+export default BoxControlExample;

client/devdocs/design/wordpress-components-gallery/button-group.tsx

@@ -0,0 +1,25 @@
+/**
+ * External dependencies
+ */
+import React from 'react';
+
+/**
+ * WordPress dependencies
+ */
+import { Button, ButtonGroup } from '@wordpress/components';
+
+const ButtonGroupExample = () => {
+	const style = { margin: '0 4px' };
+	return (
+		<ButtonGroup>
+			<Button isPrimary style={ style }>
+				Button 1
+			</Button>
+			<Button isPrimary style={ style }>
+				Button 2
+			</Button>
+		</ButtonGroup>
+	);
+};
+
+export default ButtonGroupExample;

client/devdocs/design/wordpress-components-gallery/button.tsx

@@ -0,0 +1,60 @@
+/**
+ * External dependencies
+ */
+import React from 'react';
+
+/**
+ * WordPress dependencies
+ */
+import { more } from '@wordpress/icons';
+import { Button as InnerButton, Flex, FlexItem } from '@wordpress/components';
+
+const Button = ( props: InnerButton.Props ) => (
+	<FlexItem>
+		<InnerButton { ...props } />
+	</FlexItem>
+);
+
+const ButtonExample = () => {
+	return (
+		<div style={ { padding: '20px' } }>
+			<h2>Small Buttons</h2>
+			<Flex gap={ 2 }>
+				<Button isSmall>Button</Button>
+				<Button isPrimary isSmall>
+					Primary Button
+				</Button>
+				<Button isSecondary isSmall>
+					Secondary Button
+				</Button>
+				<Button isTertiary isSmall>
+					Tertiary Button
+				</Button>
+				<Button isSmall icon={ more } />
+				<Button isSmall isPrimary icon={ more } />
+				<Button isSmall isSecondary icon={ more } />
+				<Button isSmall isTertiary icon={ more } />
+				<Button isSmall isPrimary icon={ more }>
+					Icon & Text
+				</Button>
+			</Flex>
+
+			<h2>Regular Buttons</h2>
+			<Flex gap={ 4 }>
+				<Button>Button</Button>
+				<Button isPrimary>Primary Button</Button>
+				<Button isSecondary>Secondary Button</Button>
+				<Button isTertiary>Tertiary Button</Button>
+				<Button icon={ more } />
+				<Button isPrimary icon={ more } />
+				<Button isSecondary icon={ more } />
+				<Button isTertiary icon={ more } />
+				<Button isPrimary icon={ more }>
+					Icon & Text
+				</Button>
+			</Flex>
+		</div>
+	);
+};
+
+export default ButtonExample;

client/devdocs/design/wordpress-components-gallery/card.tsx

@@ -0,0 +1,42 @@
+/**
+ * External dependencies
+ */
+import React from 'react';
+
+/**
+ * WordPress dependencies
+ */
+import {
+	Button,
+	Card,
+	CardBody,
+	CardFooter,
+	CardDivider,
+	CardHeader,
+	FlexBlock,
+	FlexItem,
+} from '@wordpress/components';
+
+const CardExample = () => (
+	<Card isElevated>
+		<CardHeader isShady={ false }>
+			<FlexBlock>Header: Code is Poetry</FlexBlock>
+			<FlexItem>
+				<Button isLink>Dismiss</Button>
+			</FlexItem>
+		</CardHeader>
+
+		<CardBody>...</CardBody>
+		<CardDivider />
+		<CardBody>...</CardBody>
+
+		<CardFooter isShady={ false }>
+			<FlexBlock>Footer: Code is Poetry</FlexBlock>
+			<FlexItem>
+				<Button isPrimary>Action</Button>
+			</FlexItem>
+		</CardFooter>
+	</Card>
+);
+
+export default CardExample;

client/devdocs/design/wordpress-components-gallery/checkbox-control.tsx

@@ -0,0 +1,23 @@
+/**
+ * External dependencies
+ */
+import React, { useState } from 'react';
+
+/**
+ * WordPress dependencies
+ */
+import { CheckboxControl } from '@wordpress/components';
+
+const CheckboxControlExample = () => {
+	const [ isChecked, setChecked ] = useState( false );
+
+	return (
+		<CheckboxControl
+			label="Example Checkbox Control"
+			checked={ isChecked }
+			onChange={ setChecked }
+		/>
+	);
+};
+
+export default CheckboxControlExample;

client/devdocs/design/wordpress-components-gallery/clipboard-button.tsx

@@ -0,0 +1,27 @@
+/**
+ * External dependencies
+ */
+import React, { useState } from 'react';
+
+/**
+ * WordPress dependencies
+ */
+import { ClipboardButton } from '@wordpress/components';
+
+const ClipboardButtonExample = () => {
+	const [ isCopied, setCopied ] = useState( false );
+
+	const text = 'Code is Poetry';
+	return (
+		<ClipboardButton
+			text={ text }
+			isPrimary
+			onCopy={ () => setCopied( true ) }
+			onFinishCopy={ () => setCopied( false ) }
+		>
+			{ isCopied ? 'Copied!' : `Copy "${ text }"` }
+		</ClipboardButton>
+	);
+};
+
+export default ClipboardButtonExample;

client/devdocs/design/wordpress-components-gallery/color-palette.tsx

@@ -0,0 +1,29 @@
+/**
+ * External dependencies
+ */
+import React, { useState } from 'react';
+
+/**
+ * WordPress dependencies
+ */
+import { ColorPalette } from '@wordpress/components';
+
+const ColorPaletteExample = () => {
+	const colors: ColorPalette.Color[] = [
+		{ name: 'red', color: '#f00' },
+		{ name: 'white', color: '#fff' },
+		{ name: 'blue', color: '#00f' },
+	];
+
+	const [ color, setColor ] = useState( colors[ 0 ] );
+
+	return (
+		<ColorPalette
+			colors={ colors }
+			value={ color }
+			onChange={ ( maybeColor ) => maybeColor && setColor( maybeColor ) }
+		/>
+	);
+};
+
+export default ColorPaletteExample;