feat: add empty state (#18)

package.json

@@ -27,7 +27,8 @@
     "lodash.get": "^4.4.2",
     "lodash.throttle": "^4.1.1",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "vite-plugin-svgr": "^3.2.0"
   },
   "devDependencies": {
     "@commitlint/cli": "^17.6.1",

src/blocks/EmptyContainer.tsx

@@ -0,0 +1,38 @@
+import { css } from '@emotion/css'
+import { ReactComponent as EmptyStateIcon } from './emptyState.svg'
+import React from 'react'
+import tokens from '@contentful/f36-tokens'
+
+const styles = {
+  emptyContainer: css({
+    height: '200px',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexDirection: 'row',
+    color: tokens.gray500,
+    fontSize: tokens.fontSizeM,
+    fontFamily: tokens.fontStackPrimary,
+    border: `1px dashed ${tokens.gray500}`,
+    '&:hover': {
+      border: `1px dashed ${tokens.blue500}`,
+      backgroundColor: tokens.blue100,
+    },
+  }),
+  icon: css({
+    marginLeft: tokens.spacingS,
+  }),
+}
+
+export const EmptyContainer = ({ onComponentDropped }: any) => {
+  return (
+    <div
+      className={styles.emptyContainer}
+      onMouseUp={() => {
+        onComponentDropped({ node: { data: { id: 'root' } } })
+      }}>
+      <EmptyStateIcon />
+      <span className={styles.icon}>Add components to begin</span>
+    </div>
+  )
+}

src/blocks/VisualEditorRoot.tsx

@@ -1,14 +1,15 @@
 import tokens from '@contentful/f36-tokens'
-import { css, cx } from '@emotion/css'
+import { css } from '@emotion/css'
 import React from 'react'
 import { Experience } from '../types'
 import { useInteraction } from '../hooks/useInteraction'
 import { VisualEditorBlock } from './VisualEditorBlock'
+import { EmptyContainer } from './EmptyContainer'
 
 const styles = {
   root: css({
-    height: '45vh',
-    paddingBottom: '355.05px',
+    minHeight: '45vh',
+    paddingBottom: '100px',
     overflow: 'scroll',
   }),
   hover: css({
@@ -29,17 +30,8 @@ export const VisualEditorRoot = ({ experience, locale }: VisualEditorRootProps)
 
   const { tree, dataSource } = experience
 
-  if (!tree) {
-    return React.createElement(
-      'div',
-      {
-        className: cx(styles.root, styles.hover),
-        onMouseUp: () => {
-          onComponentDropped({ node: { data: { id: 'root' } } })
-        },
-      },
-      []
-    )
+  if (!tree?.root.children.length) {
+    return React.createElement(EmptyContainer, { onComponentDropped }, [])
   }
 
   return React.createElement(

tsconfig.json

@@ -15,7 +15,8 @@
     "isolatedModules": true,
     "noEmit": false,
     "jsx": "react-jsx",
-    "outDir": "dist"
+    "outDir": "dist",
+    "types": ["vite-plugin-svgr/client", "jest", "@testing-library/jest-dom"]
   },
   "include": ["src", "vite.config.ts"],
   "exclude": [

vite.config.ts

@@ -2,6 +2,7 @@ import react from '@vitejs/plugin-react-swc'
 import { resolve } from 'path'
 import { defineConfig } from 'vite'
 import dts from 'vite-plugin-dts'
+import svgr from 'vite-plugin-svgr'
 
 export default defineConfig({
   build: {
@@ -22,5 +23,5 @@ export default defineConfig({
       },
     },
   },
-  plugins: [react(), dts()],
+  plugins: [svgr(), react(), dts()],
 })