Initial block editor

[girl-loves-coding]

We have initial set of blocks: Start, Input, Logic, Output, End. (Keep in mind that there will be more blocks of different types, so it should be easy to introduce new blocks).
As a user, I want to click on each block, it will trigger opening side panel where I can configure parameters and settings for the selected block.

Specific Parameters (for version v0.0.1)

All the blocks have these parameters in common: Name - string, Description - string

These settings will differ based on the type of block being used:

For Input Blocks

1. Input Type: Specify if the input is from a user, API, or database.
2. Default Input Value: Pre-fill data to use when the flow starts.
3. Validation Rules: Conditions that input must meet (e.g., not empty, max length).

For Logic Blocks

1. Condition Logic: Define the conditional statements (e.g., if-else logic).
2. True/False Path: Specify which blocks to execute if the condition is true or false.
3. Script/Code Snippet: Allow basic custom code snippets (in a controlled environment) to determine the block's logic.

For Output Blocks

1. Output Destination: Where the output should be sent (e.g., console, API endpoint, database).
2. Output Format: Define the output format (e.g., JSON, XML, plain text).
3. Error Handling for Output: Specify what to do if the output operation fails.

For API Call Blocks

1. API Endpoint: The URL of the API being called.
2. Request Method: GET, POST, PUT, DELETE.
3. Headers: Set HTTP headers required for the API call.
4. Payload: Define the data payload for POST or PUT requests.
5. Authentication: OAuth, API Key, or None.

Future Considerations

Since it's v0.0.1, keep the parameters lightweight and straightforward to avoid overwhelming users. As you iterate, you can introduce more advanced settings like caching, data transformations, or advanced debugging options.

Keep blocks configuration in the global state. You are welcome to make design choices that you think will fit application best!

[girl-loves-coding]

Here is a very raw mockup

[mazilkhatib]

I am working on it...

[c0rtexR]

done