How can I create perfect composite component ??

[ProPhycient5]

I want to build composite component like CheckBox with Label. I am able to build that component, but I am not getting top Movable and Deletable icons. I am getting extra div which I passed in is attribute of <Element/> ,which I don't want to show CheckBoxWithText. Bcoz in my use case, I want three component to work independently ( ComposedCheck , CheckBox, TextFields).
I am attaching the screenshot so that you can have idea about it.
Help me to bring above two icons with functionalities, what needs to implemented or changed in the below code.

import { Element, useNode } from '@craftjs/core';
import { CheckBox } from '../CheckBox';
import { TextFields } from '../TextFields';
import{ ComposedCheckSettings } from "./ComposedCheckSettings";

const defaultProps = {
  className: "checkboxwithtext",
  style: { width: "100px", height: "80px", display: "flex", "flex-direction": "row"},
 }

export const CheckBoxWithText = ({ children, className,...props}) => {
  props = {
    ...defaultProps,
    ...props,
  };
  const {
    connectors: { connect },
  } = useNode();
  return (
    <div ref={connect} className={className}>
      {children}
    </div>
  );
};

CheckBoxWithText.craft = {
  rules: {
    canMoveIn: (node) => node.data.type == CheckBox || TextFields,
    canDrag: () => true,
  },
  related: {
    toolbar: ComposedCheckSettings,
  }, 
};

export const ComposedCheck = (props: any) => {
  return (
      <Element canvas id="wow" is={CheckBoxWithText} {...props}>
        <CheckBox />
        <TextFields/>
      </Element>
  );
};

ComposedCheck.craft = {
    displayName: 'ComposedCheck',
    props: defaultProps,
  rules: {
    canDrag: () => true,
  },     
};```

[ankri]

The blue toolbar, when the component is selected should be described by this part:

  related: {
    toolbar: ComposedCheckSettings,
  }, 

Your `ComposedCheckSettings should also include the buttons to remove and move the component. Can you please check the code and/or paste it here?

[ProPhycient5]

Yeah I am not getting above two buttons. I have attached gif where you can see, I am getting four component, but actually I want three component i.e. Checkbox, TextFields and ComposedCheck (this is parent div of other two). What I need to change in the code so as not to show CheckWithText component?????
Below is the recent code.

import React from "react";
import { Element, useNode } from "@craftjs/core";
import  {CheckBox}  from "../CheckBox";
import { TextFields } from "../TextFields";
import { Container } from "../Container";
import { ComposedCheckSettings } from "./ComposedCheckSettings";

const defaultProps = {
  className: "composedcheck",
  style: {
    width: "100px",
    height: "80px",
    display: "flex",
    "flex-direction": "row",
  },
};

export const CheckBoxWithText = ({ children }) => {
  const {
    connectors: { connect },
  } = useNode();
  return (
    <div ref={connect} >
      {children}
    </div>
  );
};

CheckBoxWithText.craft = {
  rules: {
    canMoveIn: (node) => node.data.type == CheckBox || TextFields,
    // canDrag: () => true,
  },
  // related: {
  //   toolbar: ComposedCheckSettings,
  // },
};

export const ComposedCheck = (props: any) => {
  props = {
    ...defaultProps,
    ...props,
  };
  const { className, style } = props;
  return (
   <Container  {...props}>
    <Element canvas id="bsdfe" is={CheckBoxWithText}>
      <CheckBox />
      <TextFields />
    </Element>
    </Container>
  );
}

ComposedCheck.craft = {
  ...Container.craft,
  displayName: "ComposedCheck",
  props: defaultProps,
  // rules: {
  //   canDrag: () => true,
  // },
};

[ankri]

I don't know if I understand you fully, but you have connected the CheckBoxWithText. You need to connect the individual components if you want to have them selectable.

export const CheckBoxWithText = ({ children }) => {
  const {
    connectors: { connect },
  } = useNode();
  return (
-    <div ref={connect} >
      {children}
    </div>
  );
};

[ProPhycient5]

Yes, I have connected individual components in their respective files, that I have imported (here CheckBox and TextFields). But my query is how should I able to block CheckBoxWithText on UI, because ultimately my intention is to deal with three component i.e. <CheckBox/>, <TextFields/> and their wrapper component which is <ComposedCheck/>.
I simply don't want box (top blue icon box ) of <CheckBoxWithText/> to be show on canvas.

So I want that help from you how to show only three component on UI.

[ankri]

I suppose you render the Blue Frame in your RenderNode.tsx ? Why not skip rendering of the blue box in RenderNode for node.type = 'CheckBoxWithText' ?

Otherwise. Please provide a reproducible example on codesandbox