chore: cleanup React.FC prop types (#655)

Author: prevwong

.changeset/serious-garlics-refuse.md

@@ -0,0 +1,7 @@
+---
+'@craftjs/layers': patch
+'@craftjs/utils': patch
+'@craftjs/core': patch
+---
+
+Cleanup React.FC prop types

packages/core/src/editor/Editor.tsx

@@ -8,13 +8,14 @@ import { useEditorStore } from './store';
 import { Events } from '../events';
 import { Options } from '../interfaces';
 
+type EditorProps = Partial<Options> & {
+  children?: React.ReactNode;
+};
+
 /**
  * A React Component that provides the Editor context
  */
-export const Editor: React.FC<React.PropsWithChildren<Partial<Options>>> = ({
-  children,
-  ...options
-}) => {
+export const Editor = ({ children, ...options }: EditorProps) => {
   // we do not want to warn the user if no resolver was supplied
   if (options.resolver !== undefined) {
     invariant(
@@ -101,9 +102,13 @@ export const Editor: React.FC<React.PropsWithChildren<Partial<Options>>> = ({
     );
   }, [context]);
 
-  return context ? (
+  if (!context) {
+    return null;
+  }
+
+  return (
     <EditorContext.Provider value={context}>
       <Events>{children}</Events>
     </EditorContext.Provider>
-  ) : null;
+  );
 };

packages/core/src/events/Events.tsx

@@ -9,7 +9,7 @@ type EventsProps = {
   children?: React.ReactNode;
 };
 
-export const Events: React.FC<EventsProps> = ({ children }) => {
+export const Events = ({ children }: EventsProps) => {
   const store = useContext(EditorContext);
 
   const handler = useMemo(() => store.query.getOptions().handlers(store), [

packages/core/src/nodes/NodeContext.tsx

@@ -9,11 +9,15 @@ export type NodeContextType = {
 
 export const NodeContext = React.createContext<NodeContextType>(null);
 
-export type NodeProviderProps = Omit<NodeContextType, 'connectors'>;
+export type NodeProviderProps = Omit<NodeContextType, 'connectors'> & {
+  children?: React.ReactNode;
+};
 
-export const NodeProvider: React.FC<React.PropsWithChildren<
-  NodeProviderProps
->> = ({ id, related = false, children }) => {
+export const NodeProvider = ({
+  id,
+  related = false,
+  children,
+}: NodeProviderProps) => {
   return (
     <NodeContext.Provider value={{ id, related }}>
       {children}

packages/core/src/nodes/NodeElement.tsx

@@ -10,9 +10,7 @@ export type NodeElementProps = {
   render?: React.ReactElement;
 };
 
-export const NodeElement: React.FC<React.PropsWithChildren<
-  NodeElementProps
->> = ({ id, render }) => {
+export const NodeElement = ({ id, render }: NodeElementProps) => {
   return (
     <NodeProvider id={id}>
       <RenderNodeToElement render={render} />

packages/core/src/render/Frame.tsx

@@ -6,6 +6,7 @@ import { SerializedNodes } from '../interfaces';
 import { NodeElement } from '../nodes/NodeElement';
 
 export type FrameProps = {
+  children?: React.ReactNode;
   json?: string;
   data?: string | SerializedNodes;
 };
@@ -26,11 +27,7 @@ const RenderRootNode = () => {
 /**
  * A React Component that defines the editable area
  */
-export const Frame: React.FC<React.PropsWithChildren<FrameProps>> = ({
-  children,
-  json,
-  data,
-}) => {
+export const Frame = ({ children, json, data }: FrameProps) => {
   const { actions, query } = useInternalEditor();
 
   if (!!json) {

packages/core/src/render/RenderNode.tsx

@@ -5,12 +5,11 @@ import { DefaultRender } from './DefaultRender';
 import { useInternalEditor } from '../editor/useInternalEditor';
 import { useInternalNode } from '../nodes/useInternalNode';
 
-type RenderNodeToElementType = {
+type RenderNodeToElementProps = {
   render?: React.ReactElement;
+  children?: React.ReactNode;
 };
-export const RenderNodeToElement: React.FC<React.PropsWithChildren<
-  RenderNodeToElementType
->> = ({ render }) => {
+export const RenderNodeToElement = ({ render }: RenderNodeToElementProps) => {
   const { hidden } = useInternalNode((node) => ({
     hidden: node.data.hidden,
   }));

packages/core/src/render/RenderPlaceholder.tsx

@@ -3,14 +3,15 @@ import React from 'react';
 import { useEditor } from '../hooks';
 import { Indicator } from '../interfaces';
 
-export type Placeholder = {
+export type RenderPlaceholderProps = {
   placeholder: Indicator;
   suggestedStyles: any;
 };
 
-export const RenderPlaceholder: React.FC<React.PropsWithChildren<
-  Placeholder
->> = ({ placeholder, suggestedStyles }) => {
+export const RenderPlaceholder = ({
+  placeholder,
+  suggestedStyles,
+}: RenderPlaceholderProps) => {
   const { indicator } = useEditor((state) => ({
     indicator: state.options.indicator,
   }));

packages/layers/src/events/RenderLayerIndicator.tsx

@@ -4,7 +4,13 @@ import React, { useMemo } from 'react';
 
 import { useLayerManager } from '../manager/useLayerManager';
 
-export const RenderLayerIndicator: React.FC<any> = ({ children }) => {
+type RenderLayerIndicatorProps = {
+  children?: React.ReactNode;
+};
+
+export const RenderLayerIndicator = ({
+  children,
+}: RenderLayerIndicatorProps) => {
   const { layers, events } = useLayerManager((state) => state);
   const { query } = useEditor((state) => ({ enabled: state.options.enabled }));
   const { indicator: indicatorStyles } = query.getOptions();

packages/layers/src/index.tsx

@@ -11,7 +11,9 @@ export {
   EditableLayerName,
 } from './layers';
 
-export const Layers: React.FC<Partial<LayerOptions>> = ({ ...options }) => {
+type LayersProps = Partial<LayerOptions>;
+
+export const Layers = ({ ...options }: LayersProps) => {
   return (
     <LayerManagerProvider options={options}>
       <LayerContextProvider id={ROOT_NODE} depth={0} />

packages/layers/src/layers/DefaultLayer/DefaultLayer.tsx

@@ -44,9 +44,11 @@ const LayerChildren = styled.div<{ hasCanvases: boolean }>`
       : ''}
 `;
 
-export const DefaultLayer: React.FC<{ children?: React.ReactNode }> = ({
-  children,
-}) => {
+export type DefaultLayerProps = {
+  children?: React.ReactNode;
+};
+
+export const DefaultLayer = ({ children }: DefaultLayerProps) => {
   const {
     id,
     expanded,

packages/layers/src/layers/DefaultLayer/DefaultLayerHeader.tsx

@@ -91,7 +91,7 @@ const TopLevelIndicator = styled.div`
   }
 `;
 
-export const DefaultLayerHeader: React.FC = () => {
+export const DefaultLayerHeader = () => {
   const {
     id,
     depth,

packages/layers/src/layers/LayerContextProvider.tsx

@@ -8,10 +8,12 @@ import { LayerNode } from './LayerNode';
 import { useLayerEventHandler } from '../events/LayerEventContext';
 import { LayerManagerContext } from '../manager';
 
-export const LayerContextProvider: React.FC<Omit<
-  LayerContextType,
-  'connectors'
->> = ({ id, depth }) => {
+export type LayerContextProviderProps = Omit<LayerContextType, 'connectors'>;
+
+export const LayerContextProvider = ({
+  id,
+  depth,
+}: LayerContextProviderProps) => {
   const handlers = useLayerEventHandler();
 
   const { store } = useContext(LayerManagerContext);

packages/layers/src/layers/LayerIndicator.tsx

@@ -1,15 +1,15 @@
 import { Indicator, useEditor } from '@craftjs/core';
 import React from 'react';
 
-export type Placeholder = {
+export type LayerIndicatorProps = {
   placeholder: Indicator;
   suggestedStyles: any;
 };
 
-export const LayerIndicator: React.FC<Placeholder> = ({
+export const LayerIndicator = ({
   placeholder,
   suggestedStyles,
-}) => {
+}: LayerIndicatorProps) => {
   const { indicator } = useEditor((state) => ({
     indicator: state.options.indicator,
   }));

packages/layers/src/layers/LayerNode.tsx

@@ -6,7 +6,7 @@ import { useLayer } from './useLayer';
 
 import { useLayerManager } from '../manager/useLayerManager';
 
-export const LayerNode: React.FC = () => {
+export const LayerNode = () => {
   const { id, depth, children, expanded } = useLayer((layer) => ({
     expanded: layer.expanded,
   }));

packages/layers/src/manager/LayerManagerProvider.tsx

@@ -8,10 +8,15 @@ import { LayerEventContextProvider } from '../events';
 import { LayerOptions } from '../interfaces';
 import { DefaultLayer } from '../layers';
 
-export const LayerManagerProvider: React.FC<{
+type LayerManagerProviderProps = {
   options: Partial<LayerOptions>;
   children?: React.ReactNode;
-}> = ({ children, options }) => {
+};
+
+export const LayerManagerProvider = ({
+  children,
+  options,
+}: LayerManagerProviderProps) => {
   // TODO: fix type
   const store = useMethods(LayerMethods, {
     layers: {},

packages/utils/src/RenderIndicator.tsx

@@ -1,7 +1,12 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 
-export const RenderIndicator: React.FC<any> = ({ style, parentDom }) => {
+type RenderIndicatorProps = {
+  style: React.CSSProperties;
+  parentDom?: HTMLElement;
+};
+
+export const RenderIndicator = ({ style, parentDom }: RenderIndicatorProps) => {
   const indicator = (
     <div
       style={{