fix: tests and linting

packages/components/src/components/DesignComponent/DesignComponent.tsx

@@ -1,4 +1,8 @@
-import { CompositionComponentNode, StyleProps } from '@contentful/experience-builder-core/types';
+import {
+  CompositionComponentNode,
+  ResolveDesignValueType,
+  StyleProps,
+} from '@contentful/experience-builder-core/types';
 import React from 'react';
 
 export type DesignComponentProps<EditorMode = boolean> = EditorMode extends true
@@ -9,13 +13,15 @@ export type DesignComponentProps<EditorMode = boolean> = EditorMode extends true
       cfOpenInNewTab?: StyleProps['cfOpenInNewTab'];
       editorMode?: EditorMode;
       node: CompositionComponentNode;
-      resolveDesignValue?: any;
+      resolveDesignValue?: ResolveDesignValueType;
       renderDropZone: (
         node: CompositionComponentNode,
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         props?: Record<string, any>
       ) => React.ReactNode;
     }
-  : Record<string, any>;
+  : // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    Record<string, any>;
 
 const designComponentStyle = { display: 'contents' };
 

packages/core/src/definitions/styles.ts

@@ -172,17 +172,6 @@ export const builtInStyles: Partial<
   },
 };
 
-export const containerBuiltInStyles = {
-  ...builtInStyles,
-  cfHeight: {
-    displayName: 'Height',
-    type: 'Text',
-    group: 'style',
-    description: 'The height of the section',
-    defaultValue: 'auto',
-  } as ComponentDefinitionVariable<'Text'>,
-};
-
 export const optionalBuiltInStyles: Partial<
   Record<ContainerStyleVariableName, ComponentDefinitionVariable<'Text' | 'Boolean'>>
 > = {

packages/core/src/utils/isLinkToAsset.spec.ts

@@ -1,5 +1,5 @@
 import { isLinkToAsset } from './isLinkToAsset';
-
+import { describe, it, expect } from 'vitest';
 describe('isLinkToAsset', () => {
   it('should return false for undefined', () => {
     expect(isLinkToAsset(undefined)).toBe(false);

packages/core/src/utils/isLinkToAsset.ts

@@ -1,5 +1,6 @@
 import type { Link } from '@/types';
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 export const isLinkToAsset = (variable: any): variable is Link<'Asset'> => {
   if (!variable) return false;
   if (typeof variable !== 'object') return false;

packages/core/tsconfig.json

@@ -16,7 +16,7 @@
       "@/*": ["./src/*"]
     }
   },
-  "include": ["src/**/*", "cypress", "../experience-builder-sdk/src/hooks/useBreakpoints.spec.ts"],
+  "include": ["src/**/*", "cypress"],
   "exclude": [
     "dist",
     "node_modules",

packages/experience-builder-sdk/test/__fixtures__/composition.ts

@@ -1,10 +1,10 @@
-import { LATEST_SCHEMA_VERSION } from '../../src';
 import type {
   Composition,
   ExperienceEntry,
   SchemaVersions,
 } from '@contentful/experience-builder-core/types';
 import { entityIds } from './entities';
+import { LATEST_SCHEMA_VERSION } from '@contentful/experience-builder-core/constants';
 
 const compositionFields: Composition = {
   title: 'Test Composition',

packages/experience-builder-sdk/test/__fixtures__/designComponent.ts

@@ -1,9 +1,12 @@
 import {
-  CompositionComponentNode,
+  CONTENTFUL_CONTAINER_ID,
   DESIGN_COMPONENT_NODE_TYPE,
+  LATEST_SCHEMA_VERSION,
+} from '@contentful/experience-builder-core/constants';
+import type {
+  CompositionComponentNode,
   SchemaVersions,
-} from '@contentful/experience-builder-types';
-import { CONTENTFUL_CONTAINER_ID, LATEST_SCHEMA_VERSION } from '../../src';
+} from '@contentful/experience-builder-core/types';
 
 type createDesignComponentEntryArgs = {
   schemaVersion: SchemaVersions;

packages/visual-editor/package.json

@@ -17,8 +17,10 @@
     "predev": "npm run clean",
     "bundle": "npx watchify dist/index.cjs -o dist/bundle.js",
     "dev": "rollup -c ./rollup.dev.config.mjs --watch",
-    "lint": "echo \"No linting configured until current code is cleaned up\"",
-    "lint:fix": "echo \"No linting configured until current code is cleaned up\""
+    "lint": "eslint src --ext '.ts,.tsx,.js,.jsx' --max-warnings 0 --ignore-path ../../.eslintignore",
+    "lint:fix": "eslint src --ext '.ts,.tsx,.js,.jsx' --fix",
+    "test": "vitest",
+    "test:coverage": "vitest run --coverage"
   },
   "dependencies": {
     "@contentful/experience-builder-components": "file:../components",

packages/visual-editor/rollup.config.mjs

@@ -26,7 +26,17 @@ export default [
       }),
       nodeResolve(),
       commonjs(),
-      typescript({ tsconfig: './tsconfig.json' }),
+      typescript({
+        tsconfig: './tsconfig.json',
+        exclude: [
+          'dist',
+          'node_modules',
+          'src/**/*.test.tsx',
+          'src/**/*.spec.tsx',
+          'src/**/*.stories.tsx',
+          'test',
+        ],
+      }),
       terser(),
     ],
     external: [/node_modules\/(?!tslib.*)/],

packages/visual-editor/src/components/DropZone/Dropzone.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo } from 'react';
+import React, { ElementType, useEffect, useMemo } from 'react';
 import { Droppable } from '@hello-pangea/dnd';
 import type { ResolveDesignValueType } from '@contentful/experience-builder-core/types';
 import EditorBlock from './EditorBlock';
@@ -21,7 +21,7 @@ type DropZoneProps = {
   resolveDesignValue?: ResolveDesignValueType;
   className?: string;
   sectionId: string;
-  WrapperComponent?: any;
+  WrapperComponent?: ElementType | string;
 };
 
 function isDropEnabled(
@@ -92,7 +92,7 @@ export function DropZone({
 
   useEffect(() => {
     addSectionWithZone(sectionId);
-  }, [sectionId]);
+  }, [sectionId, addSectionWithZone]);
 
   const draggingOverArea = useMemo(() => {
     if (!userIsDragging) {

packages/visual-editor/src/components/EmptyContainer/EmptyContainer.tsx

@@ -55,7 +55,7 @@ export const EmptyEditorContainer = ({ isDragging }: EmptyContainerProps) => {
         <path
           fill="#fff"
           stroke="#fff"
-          stroke-width=".243"
+          strokeWidth=".243"
           d="M31.113 17.038a.463.463 0 0 0-.683-.517l-1.763 1.032-1.033-1.763a.464.464 0 0 0-.8.469l1.034 1.763-1.763 1.033a.463.463 0 1 0 .468.8l1.763-1.033 1.033 1.763a.463.463 0 1 0 .8-.469l-1.033-1.763 1.763-1.033a.463.463 0 0 0 .214-.282Z"
         />
       </svg>

packages/visual-editor/src/components/RootRenderer/RootRenderer.tsx

@@ -40,8 +40,8 @@ export const RootRenderer: React.FC<Props> = ({ onChange }) => {
   const tree = useTreeStore((state) => state.tree);
 
   useEffect(() => {
-    if (onChange) onChange(tree as any);
-  }, [tree]);
+    if (onChange) onChange(tree);
+  }, [tree, onChange]);
 
   const { onDragStartOrUpdate } = usePlaceholderStyle();
 

packages/visual-editor/src/components/VisualEditorRoot.tsx

@@ -21,11 +21,11 @@ export const VisualEditorRoot = () => {
     }
 
     resetEntityStore(locale);
-  }, [locale]);
+  }, [locale, resetEntityStore]);
 
   useEffect(() => {
     const onMouseMove = (e: MouseEvent) => {
-      if ((e.target as any)?.id === 'item') {
+      if ((e.target as HTMLElement)?.id === 'item') {
         return;
       }
 

packages/visual-editor/src/hooks/useBreakpoints.spec.ts

@@ -1,5 +1,6 @@
 import { getValueForBreakpoint } from '@contentful/experience-builder-core';
 import { Breakpoint } from '@contentful/experience-builder-core/types';
+import { describe, it, expect } from 'vitest';
 
 const breakpoints: Breakpoint[] = [
   {

packages/visual-editor/src/hooks/useComponentProps.tsx

@@ -168,7 +168,7 @@ export const useComponentProps = ({
 
   const { className } = useStyleTag({ styles: cfStyles, nodeId: node.data.id });
 
-  const renderDropZone = (node: CompositionComponentNode, props?: Record<string, any>) => {
+  const renderDropZone = (node: CompositionComponentNode, props?: Record<string, unknown>) => {
     return (
       <DropZone
         sectionId={node.data.id}

packages/visual-editor/src/hooks/useEditorSubscriber.ts

@@ -78,7 +78,7 @@ export function useEditorSubscriber() {
     };
 
     resolveEntities();
-  }, [dataSource, areEntitesResolvedInParent, entityStore]);
+  }, [dataSource, areEntitesResolvedInParent, entityStore, setEntitiesFetched]);
 
   useEffect(() => {
     const onMessage = (event: MessageEvent) => {
@@ -252,7 +252,17 @@ export function useEditorSubscriber() {
     return () => {
       window.removeEventListener('message', onMessage);
     };
-  }, []);
+  }, [
+    entityStore,
+    setComponentId,
+    setDataSource,
+    setLocale,
+    setSelectedNodeId,
+    setEntitiesResolvedInParent,
+    setUnboundValues,
+    unboundValues,
+    updateTree,
+  ]);
 
   /*
    * Handles on scroll business

packages/visual-editor/src/hooks/useInitializeEditor.ts

@@ -33,7 +33,7 @@ export const useInitializeEditor = () => {
     return () => {
       window.removeEventListener(INTERNAL_EVENTS.VisualEditorInitialize, onVisualEditorInitialize);
     };
-  }, []);
+  }, [initializeEditor, resetEntityStore]);
 
   useEffect(() => {
     if (initialized) {
@@ -42,7 +42,7 @@ export const useInitializeEditor = () => {
 
     // Dispatch Visual Editor Ready event
     window.dispatchEvent(new CustomEvent(VISUAL_EDITOR_EVENTS.Ready));
-  }, []);
+  }, [initialized]);
 
   return initialized;
 };

packages/visual-editor/src/hooks/usePlaceholderStyle.ts

@@ -141,7 +141,7 @@ export const usePlaceholderStyle = () => {
         outlineOffset: -1,
       });
     },
-    [zones]
+    [zones, updateStyle]
   );
 
   return { onDragStartOrUpdate };

packages/visual-editor/src/hooks/useSelectedInstanceCoordinates.ts

@@ -15,5 +15,5 @@ export const useSelectedInstanceCoordinates = ({ node }: { node: CompositionComp
     }
 
     sendSelectedComponentCoordinates(node.data.id);
-  }, [node]);
+  }, [node, selectedNodeId]);
 };

packages/visual-editor/src/types/Config.tsx

@@ -4,12 +4,12 @@ type WithCtflProps<Props> = Props & {
   id: string;
 };
 
-export type DefaultComponentProps = { [key: string]: any; editorMode?: boolean };
+export type DefaultComponentProps = { [key: string]: unknown; editorMode?: boolean };
 
 export type Content = ComponentData[];
 
 export type CtflComponent<Props extends DefaultComponentProps = DefaultComponentProps> = (
-  props: WithCtflProps<Props & { ctfl: any }>
+  props: WithCtflProps<Props & { ctfl: unknown }>
 ) => JSX.Element;
 
 export type ComponentConfig<

packages/visual-editor/src/utils/designComponentUtils.spec.ts

@@ -3,9 +3,9 @@ import {
   createDesignComponentEntry,
   createDesignComponentNode,
   designComponentGeneratedVariableName,
-} from '../../../test/__fixtures__/designComponent';
-import { assets } from '../../../test/__fixtures__/entities';
-import { designComponentsRegistry } from '../../blocks/editor/VisualEditorContext';
+} from '../../test/__fixtures__/designComponent';
+import { assets } from '../../test/__fixtures__/entities';
+
 import {
   DESIGN_COMPONENT_BLOCK_NODE_TYPE,
   DESIGN_COMPONENT_NODE_TYPE,
@@ -16,6 +16,8 @@ import type {
 } from '@contentful/experience-builder-core/types';
 import { EditorModeEntityStore } from '@contentful/experience-builder-core';
 import { deserializeDesignComponentNode, resolveDesignComponent } from './designComponentUtils';
+import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+import { designComponentsRegistry } from '@/store/registries';
 
 const designComponentEntry = createDesignComponentEntry({
   id: 'design-component-id',

packages/visual-editor/src/utils/getItem.ts

@@ -39,6 +39,7 @@ export const getItem = (
     type: 'block',
     data: {
       id: ROOT_ID,
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
     } as any,
     children: tree.root.children,
   });