add page component

WordPress · May 18, 2023 · e09ad12 · ciampo · May 18, 2023 · e09ad12
1 parent 671d727
commit e09ad12
Show file tree

Hide file tree

Showing 13 changed files with 813 additions and 428 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -22,6 +22,7 @@
 		"IS_GUTENBERG_PLUGIN": true
 	},
 	"dependencies": {
+		"@tanstack/react-table": "8.9.1",
 		"@types/gradient-parser": "0.1.2",
 		"@wordpress/a11y": "file:packages/a11y",
 		"@wordpress/annotations": "file:packages/annotations",

diff --git a/packages/edit-site/src/components/filter-bar/index.js b/packages/edit-site/src/components/filter-bar/index.js
@@ -0,0 +1,48 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	__experimentalHStack as HStack,
+	SearchControl,
+	__experimentalToggleGroupControl as ToggleGroupControl,
+	__experimentalToggleGroupControlOptionIcon as ToggleGroupControlOptionIcon,
+} from '@wordpress/components';
+import { menu, grid } from '@wordpress/icons';
+/**
+ * Internal dependencies
+ */
+
+export default function FilterBar() {
+	return (
+		<HStack
+			className="edit-site-page-filter-bar"
+			spacing={ 3 }
+			alignment="left"
+		>
+			<SearchControl
+				className="edit-site-page-filter-bar__search"
+				label="Search templates..."
+				placeholder="Search templates..."
+			/>
+			<ToggleGroupControl
+				__nextHasNoMarginBottom
+				label="view type"
+				value="list"
+				isBlock
+				size="__unstable-large"
+				hideLabelFromVision
+			>
+				<ToggleGroupControlOptionIcon
+					icon={ menu }
+					value="list"
+					label="List"
+				/>
+				<ToggleGroupControlOptionIcon
+					icon={ grid }
+					value="grid"
+					label="Grid"
+				/>
+			</ToggleGroupControl>
+		</HStack>
+	);
+}
diff --git a/packages/edit-site/src/components/filter-bar/style.scss b/packages/edit-site/src/components/filter-bar/style.scss
@@ -0,0 +1,37 @@
+.edit-site-page-filter-bar {
+	margin-bottom: $grid-unit-30;
+	.components-text-control__input {
+		background: $gray-800;
+		border: 1px solid $gray-700;
+		color: $gray-100;
+	}
+	.components-toggle-group-control {
+		border: none;
+		background: $gray-800;
+		box-shadow: none;
+	}
+	.components-base-control__field {
+		margin: 0;
+		.components-toggle-group-control-option-base {
+			color: $gray-400;
+		}
+	}
+}
+
+.edit-site-page-filter-bar__search {
+	flex-grow: 1;
+	svg {
+		fill: $gray-400;
+	}
+	input[type="search"].components-search-control__input {
+		background: $gray-800;
+		color: $gray-100;
+		height: 40px;
+		border: none;
+		&:focus {
+			background: $gray-800;
+			border: 1px solid $gray-700;
+			box-shadow: none;
+		}
+	}
+}
diff --git a/packages/edit-site/src/components/layout/index.js b/packages/edit-site/src/components/layout/index.js
@@ -35,7 +35,7 @@ import { privateApis as coreCommandsPrivateApis } from '@wordpress/core-commands
  */
 import Sidebar from '../sidebar';
 import Editor from '../editor';
-import ListPage from '../list';
+import PageMainTemplates from '../page-main-templates';
 import ErrorBoundary from '../error-boundary';
 import { store as editSiteStore } from '../../store';
 import getIsListPage from '../../utils/get-is-list-page';
@@ -275,76 +275,90 @@ export default function Layout() {
 					<SavePanel />
 
 					{ showCanvas && (
-						<div
-							className={ classnames(
-								'edit-site-layout__canvas-container',
-								{
-									'is-resizing': isResizing,
-								}
+						<>
+							{ isListPage && (
+								<div className="edit-site-layout__main">
+									<PageMainTemplates />
+								</div>
 							) }
-							style={ {
-								paddingTop: showFrame ? canvasPadding : 0,
-								paddingBottom: showFrame ? canvasPadding : 0,
-							} }
-						>
-							{ canvasResizer }
-							{ !! canvasSize.width && (
-								<motion.div
-									whileHover={
-										isEditorPage && canvasMode === 'view'
-											? {
-													scale: 1.005,
-													transition: {
-														duration:
-															disableMotion ||
-															isResizing
-																? 0
-																: 0.5,
-														ease: 'easeOut',
-													},
-											  }
-											: {}
-									}
-									initial={ false }
-									layout="position"
-									className="edit-site-layout__canvas"
-									transition={ {
-										type: 'tween',
-										duration:
-											disableMotion || isResizing
-												? 0
-												: ANIMATION_DURATION,
-										ease: 'easeOut',
+							{ isEditorPage && (
+								<div
+									className={ classnames(
+										'edit-site-layout__canvas-container',
+										{
+											'is-resizing': isResizing,
+										}
+									) }
+									style={ {
+										paddingTop: showFrame
+											? canvasPadding
+											: 0,
+										paddingBottom: showFrame
+											? canvasPadding
+											: 0,
 									} }
 								>
-									<motion.div
-										style={ {
-											position: 'absolute',
-											top: 0,
-											left: 0,
-											bottom: 0,
-										} }
-										initial={ false }
-										animate={ {
-											width: canvasWidth,
-										} }
-										transition={ {
-											type: 'tween',
-											duration:
-												disableMotion || isResizing
-													? 0
-													: ANIMATION_DURATION,
-											ease: 'easeOut',
-										} }
-									>
-										<ErrorBoundary>
-											{ isEditorPage && <Editor /> }
-											{ isListPage && <ListPage /> }
-										</ErrorBoundary>
-									</motion.div>
-								</motion.div>
+									{ canvasResizer }
+									{ !! canvasSize.width && (
+										<motion.div
+											whileHover={
+												isEditorPage &&
+												canvasMode === 'view'
+													? {
+															scale: 1.005,
+															transition: {
+																duration:
+																	disableMotion ||
+																	isResizing
+																		? 0
+																		: 0.5,
+																ease: 'easeOut',
+															},
+													  }
+													: {}
+											}
+											initial={ false }
+											layout="position"
+											className="edit-site-layout__canvas"
+											transition={ {
+												type: 'tween',
+												duration:
+													disableMotion || isResizing
+														? 0
+														: ANIMATION_DURATION,
+												ease: 'easeOut',
+											} }
+										>
+											<motion.div
+												style={ {
+													position: 'absolute',
+													top: 0,
+													left: 0,
+													bottom: 0,
+												} }
+												initial={ false }
+												animate={ {
+													width: canvasWidth,
+												} }
+												transition={ {
+													type: 'tween',
+													duration:
+														disableMotion ||
+														isResizing
+															? 0
+															: ANIMATION_DURATION,
+													ease: 'easeOut',
+												} }
+											>
+												<ErrorBoundary>
+													<Editor />
+												</ErrorBoundary>
+											</motion.div>
+										</motion.div>
+									) }
+								</div>
 							) }
-						</div>
+						</>
 					) }
 				</div>
 			</div>

diff --git a/packages/edit-site/src/components/layout/style.scss b/packages/edit-site/src/components/layout/style.scss
@@ -81,6 +81,11 @@
 	}
 }
 
+.edit-site-layout__main {
+	flex-grow: 1;
+	border-left: 1px solid $gray-800;
+}
+
 .edit-site-layout__canvas-container {
 	position: relative;
 	flex-grow: 1;

diff --git a/packages/edit-site/src/components/page-main-templates/index.js b/packages/edit-site/src/components/page-main-templates/index.js
@@ -0,0 +1,24 @@
+/**
+ * WordPress dependencies
+ */
+import { Button } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import Page from '../page';
+import FilterBar from '../filter-bar';
+import Table from '../table';
+
+export default function PageMainTemplates() {
+	return (
+		<Page
+			title="Templates"
+			subTitle="Manage all your templates"
+			actions={ <Button variant="primary">New Template</Button> }
+		>
+			<FilterBar />
+			<Table />
+		</Page>
+	);
+}
diff --git a/packages/edit-site/src/components/page/header.js b/packages/edit-site/src/components/page/header.js
@@ -0,0 +1,36 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	__experimentalHeading as Heading,
+	__experimentalText as Text,
+	__experimentalHStack as HStack,
+	FlexBlock,
+	FlexItem,
+} from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+
+export default function Header( { title, subTitle, actions } ) {
+	return (
+		<HStack as="header" alignment="left" className="edit-site-page-header">
+			<FlexBlock className="edit-site-page-header__page-title">
+				<Heading
+					has="h1"
+					level={ 3 }
+					className="edit-site-page-header__title"
+				>
+					{ title }
+				</Heading>
+				<Text as="p" className="edit-site-page-header__sub-title">
+					{ subTitle }
+				</Text>
+			</FlexBlock>
+			<FlexItem className="edit-site-page-header__actions">
+				{ actions }
+			</FlexItem>
+		</HStack>
+	);
+}
diff --git a/packages/edit-site/src/components/page/index.js b/packages/edit-site/src/components/page/index.js
@@ -0,0 +1,19 @@
+/**
+ * WordPress dependencies
+ */
+import { __experimentalVStack as VStack } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+
+import Header from './header';
+
+export default function Page( { title, subTitle, actions, children } ) {
+	return (
+		<VStack spacing={ 0 } className="edit-site-page">
+			<Header title={ title } subTitle={ subTitle } actions={ actions } />
+			<div className="edit-site-page-content">{ children }</div>
+		</VStack>
+	);
+}
diff --git a/packages/edit-site/src/components/page/style.scss b/packages/edit-site/src/components/page/style.scss
@@ -0,0 +1,20 @@
+.edit-site-page {
+	color: $gray-400;
+}
+
+.edit-site-page-header {
+	padding: $grid-unit-40;
+	.components-text {
+		color: $gray-400;
+	}
+	.components-heading {
+		color: $gray-100;
+	}
+	.edit-site-page-header__sub-title {
+		margin-top: $grid-unit-10;
+	}
+}
+
+.edit-site-page-content {
+	padding: 0 $grid-unit-40 $grid-unit-40;
+}