Developer (Future Feature)

WEVY is preparing a feature that allows developers to create components. This guide covers the process of developing basic components for WEVY. Let's learn how to develop a basic component by creating a simple button.

Directory Structure

Each basic component is organized into a single folder. The files within this folder are as follows:

• [BasicComponent].info.json
• [BasicComponent].info.js
• [BasicComponent].jsx
• preview.png

---

[BasicComponent].info.json

This JSON file contains essential information about the component. This information forms the basis of the 'Add Component' screen.

ButtonComponent.info.json

{
  "name": "Button",
  "version": "0.1.1",
  "category": "Basic",
  "description": "Button Component"
}

---

[BasicComponent].info.js

This file defines the attributes and actions of the component. Please refer to the example below.

ButtonComponent.info.js

export default {
  props: {
    title: {
      type: PROPS_TYPE.STRING,
      defaultValue: "Confirm",
      isProps: true,
      description: "Button name",
      propsType: "data",
      helpText:
        "Enter the name of the button. This will be displayed as button text.",
    },
    buttonSize: {
      type: PROPS_TYPE.STRING,
      defaultValue: "100%",
      label: "button size(px)",
      description: "Button size(px)",
      isProps: true,
      placeholder: "Button size",
      propsType: "view",
      helpText: "Define the size of the button in pixels.",
    },
    fontSize: {
      type: PROPS_TYPE.NUMBER,
      defaultValue: 15,
      description: "Font size",
      isProps: true,
      placeholder: "Font size",
      propsType: "view",
      helpText: "Define the font size for the text on the button.",
    },
    color: {
      type: PROPS_TYPE.COLOR_PICKER,
      defaultValue: "#ffffff",
      description: "Font color",
      isProps: true,
      placeholder: "Please select a color",
      propsType: "view",
      helpText: "Select a color for the button text.",
    },
  },
  actions: [ACTIONS.ON_CLICK],
  actionInfo: {
    [ACTIONS.ON_CLICK]: {
      title: "Button On Click Event",
      link: "Link URL Data",
    },
  },
  result: {
    type: RESULT_TYPE.NONE,
  },
};

---

Attributes

Let's examine the props Object. The key of the object serves as a unique identifier. Consider the title attribute.

 title: {
      type: PROPS_TYPE.STRING,
      defaultValue: "Confirm",
      isProps: true,
      description: "Button name",
      propsType: "data",
      helpText:
        "Enter the name of the button. This will be displayed as button text.",
},

• type : This defines the type of the attribute. The type of form that receives the attribute value. Please add a constant included in PROPS_TYPE.
• defaultValue : The default value.
• description : A brief description.
• propsType : The type of the attribute. Input either view or data.
• helpText : Helpful instructions for the attribute. Attributes with complex values might need a help text.

Events

Events should be defined here for them to be exposed to the WEVY system. The key serves as a unique identifier for the event.

events:{
    onClick: {
        title: "Button On Click Event",
        data:{
            link: "Link URL Data"
        }
    },
}

• title : This defines the name of the event.
• data : The data passed through the event. This value is included in the description of the component event.

---

[BasicComponent].jsx

The jsx file is written based on react. Let's first take a look at the source.

ButtonComponent.jsx

import { Box, Button } from "@mui/material";
import BasicComponent from "@site/BasicComponent/BasicComponent";
import componentInfo from "./ButtonComponent.info";

class ButtonComponent extends BasicComponent {
  constructor() {
    super();

    this.componentInfo = componentInfo;
  }


  render() {
    const componentProps = this.getComponentProps();
    const componentActions = this.getComponentAction();
    const { systemApplicationUniqPath } = this.props;

    return (
      <Box
        style={{
          width: componentProps.buttonSize,
        }}
        css={style}
      >
        <Button
          sx={
            width: "100%",
            height: "100%",
            fontSize: parseInt(componentProps.fontSize)
          }}
          onClick={() => {
            componentActions.onClick();
          }}
        >
          {componentProps.title}
        </Button>
      </Box>
    );
  }
}

ButtonComponent.componentInfo = componentInfo;
export default ButtonComponent;

You need to structure a Class component that inherits from BasicComponent. In the constructor, assign the [BasicComponent].info.js file to this.componentInfo. Since BasicComponent has logic related to componentDidMount, componentDidUpdate, and componentWillUnMount, if you manage the lifecycle, you must execute the parent class's lifecycle.

Example

componentDidMount(){
    super.componentDidMount();

    //...
}

BasicComponent contains the functions getComponentProps and getComponentAction. These functions obtain property values from the system or convey the occurrence of an event to the system based on registered events. The data fetched with getComponentProps can be accessed using the key defined in componentInfo.

The event retrieved with getComponentAction is a function. By invoking this function, you can notify the system that a specific event has occurred. To send event data to the system, you must set the data before calling the event function. Use setEventData to register the data.

Example

const componentActions = this.getComponentAction();
this.setEventData({
  data: { key: value },
});
componentActions.onClick();

---

preview.png

The preview image is used as an image on the Add Component screen.