From da2a06b112068ea0f6897903fb3f4e1372208474 Mon Sep 17 00:00:00 2001
From: Seth Black <sblack@sethserver.com>
Date: Mon, 12 Sep 2022 20:14:32 -0500
Subject: [PATCH] Add GridItem to list of supported components as a child of
 Grid.

---
 src/components/editor/ComponentPreview.tsx     |  1 +
 .../panels/components/GridItemPanel.tsx        | 18 ++++++++++++++++++
 src/componentsList.ts                          |  8 +++++++-
 src/react-app-env.d.ts                         |  1 +
 src/utils/defaultProps.tsx                     |  5 +++++
 src/utils/editor.ts                            |  1 +
 6 files changed, 33 insertions(+), 1 deletion(-)
 create mode 100644 src/components/inspector/panels/components/GridItemPanel.tsx

diff --git a/src/components/editor/ComponentPreview.tsx b/src/components/editor/ComponentPreview.tsx
index 09fe6f89b5..064dd62f50 100644
--- a/src/components/editor/ComponentPreview.tsx
+++ b/src/components/editor/ComponentPreview.tsx
@@ -96,6 +96,7 @@ const ComponentPreview: React.FC<{
     case 'TabList':
     case 'TabPanels':
     case 'Grid':
+    case 'GridItem':
     case 'Center':
     case 'Container':
       return (
diff --git a/src/components/inspector/panels/components/GridItemPanel.tsx b/src/components/inspector/panels/components/GridItemPanel.tsx
new file mode 100644
index 0000000000..cefe363e5a
--- /dev/null
+++ b/src/components/inspector/panels/components/GridItemPanel.tsx
@@ -0,0 +1,18 @@
+import React, { memo } from 'react'
+import TextControl from '~components/inspector/controls/TextControl'
+
+const GridItemPanel = () => {
+  return (
+    <>
+      <TextControl label="Area" name="area" />
+      <TextControl label="Column Span" name="colSpan" />
+      <TextControl label="Column Start" name="colStart" />
+      <TextControl label="Column End" name="colEnd" />
+      <TextControl label="Row Span" name="rowSpan" />
+      <TextControl label="Row Start" name="rowStart" />
+      <TextControl label="Row End" name="rowEnd" />
+    </>
+  )
+}
+
+export default memo(GridItemPanel)
diff --git a/src/componentsList.ts b/src/componentsList.ts
index 720f2493e9..9215449000 100644
--- a/src/componentsList.ts
+++ b/src/componentsList.ts
@@ -61,7 +61,12 @@ export const menuItems: MenuItems = {
       FormErrorMessage: {},
     },
   },
-  Grid: {},
+  Grid: {
+    children: {
+      Grid: {},
+      GridItem: {},
+    }
+  },
   Heading: {},
   Highlight: {},
   Icon: {},
@@ -141,6 +146,7 @@ export const componentsList: ComponentType[] = [
   'FormHelperText',
   'FormLabel',
   'Grid',
+  'GridItem',
   'Heading',
   'Highlight',
   'Icon',
diff --git a/src/react-app-env.d.ts b/src/react-app-env.d.ts
index e30513d40c..db3600bb9f 100644
--- a/src/react-app-env.d.ts
+++ b/src/react-app-env.d.ts
@@ -37,6 +37,7 @@ type ComponentType =
   | 'FormHelperText'
   | 'FormErrorMessage'
   | 'Grid'
+  | 'GridItem'
   | 'Heading'
   | 'Highlight'
   | 'Icon'
diff --git a/src/utils/defaultProps.tsx b/src/utils/defaultProps.tsx
index 91d5a8fade..bec1d8fe0a 100644
--- a/src/utils/defaultProps.tsx
+++ b/src/utils/defaultProps.tsx
@@ -59,6 +59,7 @@ import {
   BreadcrumbLinkProps,
   ListProps,
   HighlightProps,
+  GridItemProps,
 } from '@chakra-ui/react'
 
 import iconsList from '~iconsList'
@@ -106,6 +107,7 @@ type PreviewDefaultProps = {
   FormHelperText?: PropsWithForm<TextProps>
   FormErrorMessage?: PropsWithForm<FormErrorMessageProps>
   Grid?: PropsWithForm<GridProps>
+  GridItem?: PropsWithForm<GridItemProps>
   TabList?: PropsWithForm<TabListProps>
   TabPanel?: PropsWithForm<TabPanelProps>
   TabPanels?: PropsWithForm<TabPanelsProps>
@@ -210,6 +212,9 @@ export const DEFAULT_PROPS: PreviewDefaultProps = {
       display: 'grid',
     },
   },
+  GridItem: {
+    colSpan: 1,
+  },
   Heading: {
     children: 'Heading title',
   },
diff --git a/src/utils/editor.ts b/src/utils/editor.ts
index 50cdeba3e7..14d8d7a142 100644
--- a/src/utils/editor.ts
+++ b/src/utils/editor.ts
@@ -26,6 +26,7 @@ export const COMPONENTS: (ComponentType | MetaComponentType)[] = [
   'FormHelperText',
   'FormErrorMessage',
   'Grid',
+  'GridItem',
   'Heading',
   'Highlight',
   'Icon',