Add GridItem to list of supported components as a child of Grid.

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 (

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)

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',

src/react-app-env.d.ts

@@ -37,6 +37,7 @@ type ComponentType =
   | 'FormHelperText'
   | 'FormErrorMessage'
   | 'Grid'
+  | 'GridItem'
   | 'Heading'
   | 'Highlight'
   | 'Icon'

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',
   },

src/utils/editor.ts

@@ -26,6 +26,7 @@ export const COMPONENTS: (ComponentType | MetaComponentType)[] = [
   'FormHelperText',
   'FormErrorMessage',
   'Grid',
+  'GridItem',
   'Heading',
   'Highlight',
   'Icon',