How to add a new component in the visual editor?

[cruxcode]

[cruxcode]

To add a new component, follow these steps:

1. Follow the steps in CONTRIBUTING.md to set up the codebase on your local machine.
2. In packages/react-component-manifests/src/manifests directory create a folder with with the new component's name.
3. Inside that folder, you can create all the tsx/css etc. files.
4. Inside new component folder generally three files are added . Component.tsx , Component.manifest.ts and Icon.svg
   • Few Components also have Component.dev.tsx, This component is used by editor (i.e., some components need some adjustment to work around on the editor side. Some example are div, flex, modal, etc)
5. You can take inspiration from packages/react-component-manifests/src/manifests/Button/Button.tsx and packages/react-component-manifests/src/manifests/Input/Input.tsx.

You might see a piece of code that looks like this:

const iconManifest = {
  panel: { comp: "CommonIcon", props: { name: "Button" } },
  drag: {
    comp: "CommonIcon",
    props: {
      name: "Button",
      containerStyle: { padding: "1rem" },
    },
  },
  renderSchema: compManifest,
};

Here, we are specifying the name of icon that will show on the component manager side bar.
if we don't specify Icon.svg in our Component folder it will take default icon.

[cruxcode]

In the code for Button component here packages/react-component-manifests/src/manifests/Button/Button.tsx, you will see the component definition as follows:

export const Button = forwardRef<
  HTMLButtonElement,
  {
    styles: React.CSSProperties;
    custom: { text: string };
    onClick: (event: { pageX: number; pageY: number }) => void;
    className: string;
  }
>((props, ref) => {
  const onClick = useCallback(
    (e: React.MouseEvent) => {
      props.onClick({ pageX: e.pageX, pageY: e.pageY });
    },
    [props]
  );
  return (
    <button ref={ref} style={props.styles} onClick={onClick} className={props.className}>
      {props.custom.text}
    </button>
  );
});

• All the components that you develop must be wrapped inside forwardRef and the forwardedRef must be assigned to the top-most element in your JSX.
• All the components that you create, must be a controlled component.

You might see a piece of code that looks like this:

const cssTreeOptions: CSSTreeOptions = {
  flexContainerOptions: false,
  flexChildOptions: true,
  positionOptions: true,
  typographyOptions: true,
  spacingOptions: true,
  sizeOptions: true,
  borderOptions: true,
  outlineOptions: true,
  backgroundOptions: true,
  miscellaneousOptions: true,
};

Here, we are specifying what kind of CSS properties are applicable to the component you are trying to create.

[cruxcode]

You might see a piece of code that describes what are the custom fields that this component can take:

const customTreeOptions: CustomPropsTreeOptions = {
  dataTypes: {
    text: "text",
  },
};

Here, we are specifying that a custom prop called text that is of type "text" will be passed as custom props.

Please refer #184 for detailed discussion on custom props.

[cruxcode]

Each component's behavior inside the editor and in the generated app is described using a manifest.

For button component, you will see a manifest like this

const compManifest: ReactComponentManifestSchema = {
  meta: { key: "Button", category: "Basics" },
  render: {
    comp: Button,
  },
  dev: {
    decorators: [],
    attachProps: {
      styles: {
        treeId: CSSTreeId,
        initialValue: {
          color: "#fff",
          backgroundColor: "#1890ff",
        },
        treeOptions: cssTreeOptions,
        canvasOptions: { groupByBreakpoint: true },
      },
      custom: {
        treeId: CustomTreeId,
        initialValue: {
          text: "Submit",
        },
        treeOptions: customTreeOptions,
        canvasOptions: { groupByBreakpoint: false },
      },
    },
    attachCallbacks: {
      onClick: [{ type: "do_nothing" }],
    },
    defaultCallbackHandlers: {
      onClick: [{ sendEventData: true }],
    },
  },
};

The attachProps field describes the type of props this component takes. You can just keep all the values in attachProps.styles as they are and just change attachProps.styles.initialValue as per your requirement.

The description for other fields are in the comments below.

[cruxcode]

attachCallbacks - Your component might want to inform it's parent whenever an event occurs. For example, the button component would inform it's parent whenever click occurs, therefore, you see attachCallbacks has a onClick key with the value [{ type: "do_nothing" }].

Please refer discussion #186 for more details on this.

[cruxcode]

In some components, like any chart component, you might find two React Components defined. One react component maybe named as BarChart and the other react component maybe named as DevBarChart. The difference between these two components is that, the DevBarChart component is used in the editor (Dev prefix signifies Development mode) while the BarChart component is used in the app that gets generated.

The reason behind this design of having two different components is that we want to keep the components that becomes part of the generater app as light as possible.

[darshitac11]

Video tutorial on how to add a new component: https://www.youtube.com/watch?v=h3FNiiPZqpo&t=1s