https://github.com/lenra-io/components-api

https://github.com/lenra-io/components-api

Last synced: about 1 month ago
JSON representation

• Host: GitHub
• URL: https://github.com/lenra-io/components-api
• Owner: lenra-io
• License: mit
• Created: 2021-08-17T08:26:22.000Z (over 3 years ago)
• Default Branch: beta
• Last Pushed: 2024-03-01T08:25:32.000Z (10 months ago)
• Last Synced: 2024-03-01T09:31:29.267Z (10 months ago)
• Homepage:
• Size: 264 KB
• Stars: 2
• Watchers: 1
• Forks: 0
• Open Issues: 5
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# components-api

The component API project. The API is described with JSON Schema files.

## Normalization of the API

### General JSON format

The API follow the camelCase convention for keys and enum-styled values of the json object.

```json

{

    "type": "flex",

    "direction": "horizontal",

    "mainAxisAlignment": "spaceAround",

    "children": []

}

```

### The `value` key :

The `value` key describe the user-given main value of the component.

Typically the boolean of a radio/checkbox, the text of a text input, the text of a "text" component...

This value is typically replaced by a variable in the end-user code.

```json

{

    "type": "checkbox",

    "value": true,

    [...]

}

```

### The `label` key : 

The `label` key must describe a text that is displayed next to the component.

```json

{

    "type": "checkbox",

    [...]

    "label": "My Checkbox"

}

```

### The `text` key : 

The `text` key must describe a text that is displayed inside the component.

```json

{

    "type": "button",

    [...]

    "text": "My Button"

}

```

### The listeners

All the listeners must start with `on` and be passed `onPressed`, `onChanged`...

All listeners MUST have the `name` property and MAY have the `props` object property.

#### The `onPressed` listener

This listener is used to react on a click/press on a component. 

Do NOT use the `onClick` or `onTap` key.

```json

{

    "type": "checkbox",

    [...]

    "listeners": {

        "onPressed": {

            "_type": "listener",

            "name": "toggleCheckbox"

        },

    }

}

```

#### The `onChanged` listener

This listener is used to react on a value changed by the user.

This listener is never called when the value is changed programatically.

```json

{

    "type": "textfield",

    "listeners": {

        "onChanged": {

            "_type": "listener",

            "name": "myAction",

        }

    }

}

```

> **_NOTE:_** When the value is changed by a click/tap, the `onPressed` is probably the best choice.