add table component

src/components/editor/ComponentPreview.tsx

@@ -34,6 +34,13 @@ import SkeletonPreview, {
   SkeletonCirclePreview,
   SkeletonTextPreview,
 } from './previews/SkeletonPreview'
+import TableContainerPreview, {
+  TablePreview,
+  TbodyPreview,
+  TfootPreview,
+  TheadPreview,
+  TrPreview,
+} from './previews/TableContainerPreview'
 
 const ComponentPreview: React.FC<{
   componentName: string
@@ -70,6 +77,9 @@ const ComponentPreview: React.FC<{
     case 'StatLabel':
     case 'StatNumber':
     case 'StatArrow':
+    case 'Th':
+    case 'Td':
+    case 'TableCaption':
       return (
         <PreviewContainer
           component={component}
@@ -169,6 +179,20 @@ const ComponentPreview: React.FC<{
       return <NumberInputPreview component={component} />
     case 'Highlight':
       return <HighlightPreview component={component} />
+    case 'Table':
+      return <TablePreview component={component} />
+    case 'Thead':
+      return <TheadPreview component={component} />
+    case 'Tbody':
+      return <TbodyPreview component={component} />
+    case 'Tfoot':
+      return <TfootPreview component={component} />
+    case 'Tr':
+      return <TrPreview component={component} />
+    case 'TableContainer':
+      return <TableContainerPreview component={component} />
+    case 'Tr':
+      return <TrPreview component={component} />
     case 'Skeleton':
       return <SkeletonPreview component={component} />
     case 'SkeletonText':

src/components/editor/previews/TableContainerPreview.tsx

@@ -0,0 +1,143 @@
+import React from 'react'
+import { useInteractive } from '~hooks/useInteractive'
+import { useDropComponent } from '~hooks/useDropComponent'
+import {
+  Box,
+  Table,
+  TableContainer,
+  Tbody,
+  Tfoot,
+  Thead,
+  Tr,
+} from '@chakra-ui/react'
+import ComponentPreview from '~components/editor/ComponentPreview'
+
+const acceptedTypesTableContainer: ComponentType[] = ['Table']
+
+const TableContainerPreview: React.FC<IPreviewProps> = ({ component }) => {
+  const { props, ref } = useInteractive(component, true)
+  const { drop, isOver } = useDropComponent(
+    component.id,
+    acceptedTypesTableContainer,
+  )
+
+  let boxProps: any = {}
+
+  if (isOver) {
+    props.bg = 'teal.50'
+  }
+
+  return (
+    <Box ref={drop(ref)} {...boxProps}>
+      <TableContainer {...props}>
+        {component.children.map((key: string) => (
+          <ComponentPreview key={key} componentName={key} />
+        ))}
+      </TableContainer>
+    </Box>
+  )
+}
+
+const acceptedTypesTable: ComponentType[] = [
+  'TableCaption',
+  'Thead',
+  'Tbody',
+  'Tfoot',
+]
+
+export const TablePreview = ({ component }: IPreviewProps) => {
+  const { props, ref } = useInteractive(component, true, true)
+  const { drop, isOver } = useDropComponent(component.id, acceptedTypesTable)
+
+  let boxProps: any = { border: '1px solid red' }
+
+  if (isOver) {
+    props.bg = 'teal.50'
+  }
+
+  return (
+    <Box ref={drop(ref)} {...props} border="1px solid green">
+      <Table {...component.props}>
+        {component.children.map((key: string) => (
+          <ComponentPreview key={key} componentName={key} />
+        ))}
+      </Table>
+    </Box>
+  )
+}
+
+const acceptedTypesThead: ComponentType[] = ['Tr']
+
+export const TheadPreview = ({ component }: IPreviewProps) => {
+  const { props, ref } = useInteractive(component, true)
+  const { drop, isOver } = useDropComponent(component.id, acceptedTypesThead)
+
+  if (isOver) {
+    props.bg = 'teal.50'
+  }
+
+  return (
+    <Thead ref={drop(ref)} {...props}>
+      {component.children.map((key: string) => (
+        <ComponentPreview key={key} componentName={key} />
+      ))}
+    </Thead>
+  )
+}
+
+const acceptedTypesTr: ComponentType[] = ['Th', 'Td']
+
+export const TrPreview = ({ component }: IPreviewProps) => {
+  const { props, ref } = useInteractive(component, true, true)
+  const { drop, isOver } = useDropComponent(component.id, acceptedTypesTr)
+
+  if (isOver) {
+    props.bg = 'teal.50'
+  }
+
+  return (
+    <Box ref={drop(ref)} {...props} border="1px solid green">
+      <Tr {...component.props}>
+        {component.children.map((key: string) => (
+          <ComponentPreview key={key} componentName={key} />
+        ))}
+      </Tr>
+    </Box>
+  )
+}
+
+export const TbodyPreview = ({ component }: IPreviewProps) => {
+  const { props, ref } = useInteractive(component, true)
+  const { drop, isOver } = useDropComponent(component.id, acceptedTypesThead)
+
+  if (isOver) {
+    props.bg = 'teal.50'
+  }
+
+  return (
+    <Tbody ref={drop(ref)} {...props}>
+      {component.children.map((key: string) => (
+        <ComponentPreview key={key} componentName={key} />
+      ))}
+    </Tbody>
+  )
+}
+
+export const TfootPreview = ({ component }: IPreviewProps) => {
+  const { props, ref } = useInteractive(component, true)
+  const { drop, isOver } = useDropComponent(component.id, acceptedTypesThead)
+
+  if (isOver) {
+    props.bg = 'teal.50'
+  }
+
+  return (
+    <Tfoot ref={drop(ref)} {...props}>
+      {component.children.map((key: string) => (
+        <ComponentPreview key={key} componentName={key} />
+      ))}
+    </Tfoot>
+  )
+}
+
+export default TableContainerPreview

src/components/inspector/panels/Panels.tsx

@@ -54,6 +54,9 @@ import TabPanel from './components/TabPanel'
 import StatArrowPanel from './components/StatArrowPanel'
 import StatLabelPanel from './components/StatLabelPanel'
 import SkeletonPanel from './components/SkeletonPanel'
+import TablePanel from './components/TablePanel'
+import TdThPanel from './components/TdThPanel'
+import TableCaptionPanel from './components/TableCaptionPanel'
 
 const Panels: React.FC<{ component: IComponent; isRoot: boolean }> = ({
   component,
@@ -127,6 +130,10 @@ const Panels: React.FC<{ component: IComponent; isRoot: boolean }> = ({
       {type === 'StatArrow' && <StatArrowPanel />}
       {type === 'StatLabel' && <StatLabelPanel />}
       {type === 'StatNumber' && <StatLabelPanel />}
+      {type === 'Table' && <TablePanel />}
+      {type === 'Td' && <TdThPanel />}
+      {type === 'Th' && <TdThPanel />}
+      {type === 'TableCaption' && <TableCaptionPanel />}
     </>
   )
 }

src/components/inspector/panels/components/TableCaptionPanel.tsx

@@ -0,0 +1,34 @@
+import { Select } from '@chakra-ui/react'
+import { memo } from 'react'
+import ChildrenControl from '~components/inspector/controls/ChildrenControl'
+import FormControl from '~components/inspector/controls/FormControl'
+import SwitchControl from '~components/inspector/controls/SwitchControl'
+import { useForm } from '~hooks/useForm'
+import usePropsSelector from '~hooks/usePropsSelector'
+
+const TableCaptionPanel = () => {
+  const { setValueFromEvent } = useForm()
+
+  const placement = usePropsSelector('placement')
+
+  return (
+    <>
+      <ChildrenControl />
+
+      <FormControl label="Placement" htmlFor="placement">
+        <Select
+          name="placement"
+          id="placement"
+          size="sm"
+          value={placement || ''}
+          onChange={setValueFromEvent}
+        >
+          <option>top</option>
+          <option>bottom</option>
+        </Select>
+      </FormControl>
+    </>
+  )
+}
+
+export default memo(TableCaptionPanel)

src/components/inspector/panels/components/TablePanel.tsx

@@ -0,0 +1,51 @@
+import { Select } from '@chakra-ui/react'
+import { memo } from 'react'
+import ChildrenControl from '~components/inspector/controls/ChildrenControl'
+import ColorsControl from '~components/inspector/controls/ColorsControl'
+import FormControl from '~components/inspector/controls/FormControl'
+import TextControl from '~components/inspector/controls/TextControl'
+import { useForm } from '~hooks/useForm'
+import usePropsSelector from '~hooks/usePropsSelector'
+
+const TablePanel = () => {
+  const { setValueFromEvent } = useForm()
+
+  const variant = usePropsSelector('variant')
+  const size = usePropsSelector('size')
+
+  return (
+    <>
+      <ColorsControl label="Color Scheme" name="colorScheme" />
+
+      <FormControl label="Variant" htmlFor="variant">
+        <Select
+          name="variant"
+          id="variant"
+          size="sm"
+          value={variant || ''}
+          onChange={setValueFromEvent}
+        >
+          <option>simple</option>
+          <option>striped</option>
+          <option>unstyled</option>
+        </Select>
+      </FormControl>
+
+      <FormControl label="Size" htmlFor="size">
+        <Select
+          name="size"
+          id="size"
+          size="sm"
+          value={size || ''}
+          onChange={setValueFromEvent}
+        >
+          <option>sm</option>
+          <option>md</option>
+          <option>lg</option>
+        </Select>
+      </FormControl>
+    </>
+  )
+}
+
+export default memo(TablePanel)

src/components/inspector/panels/components/TdThPanel.tsx

@@ -0,0 +1,14 @@
+import { memo } from 'react'
+import ChildrenControl from '~components/inspector/controls/ChildrenControl'
+import SwitchControl from '~components/inspector/controls/SwitchControl'
+
+const TdThPanel = () => {
+  return (
+    <>
+      <ChildrenControl />
+      <SwitchControl label="Is numeric" name="isNumeric" />
+    </>
+  )
+}
+
+export default memo(TdThPanel)

src/componentsList.ts

@@ -121,6 +121,19 @@ export const menuItems: MenuItems = {
     },
   },
   Tag: {},
+  Table: {
+    children: {
+      TableContainer: {},
+      Table: {},
+      Thead: {},
+      Tbody: {},
+      Tfoot: {},
+      Tr: {},
+      Th: {},
+      Td: {},
+      TableCaption: {},
+    },
+  },
   Text: {},
   Textarea: {},
   Menu: { soon: true },
@@ -199,6 +212,15 @@ export const componentsList: ComponentType[] = [
   'TabPanel',
   'TabPanels',
   'Tabs',
+  'Table',
+  'Thead',
+  'Tbody',
+  'Tfoot',
+  'Tr',
+  'Th',
+  'Td',
+  'TableCaption',
+  'TableContainer',
   'Tag',
   'Text',
   'Textarea',