Slate

Slate Kit is a robust framework that we offer to enable the display of complex UI components within the community platform. For instance, consider the following JSON representation, showcasing how Slate Kit can be utilized to generate the Zapier settings page:

{
    "rootBlock": "root",
    "blocks": [
        {
            "children": ["header","content","divider","second-header","second-content"],
            "id": "root",
            "name": "Card",
        },
        {
            "children": [],
            "id": "header",
            "name": "Card.Header",
            "props": {
                "title":"API Key"
            }
        },
        {
            
            "children": ["api-key-input","alert","generate"],
            "id": "content",
            "name": "Card.Content",
            "props": {
                "className": "space-y-3"
            }
        },
        {
            
            "children": [],
            "id": "api-key-input",
            "name": "Input",
            "props": {
                "name":"token",
                "readOnly":true,
                "hideValue":true,
                "value":"zapier-api-key",
                "copy":true
            }
        },
        {
            
            "children": [],
            "id": "alert",
            "name": "Alert",
            "props": {
                "status":"warning",
                "title":"Generating a new key will stop your existing Zaps. You need to reconnect Zapier to Bettermode using the new API key."
            }
        },
        {
            
            "children": ["generate-button-text"],
            "id": "generate",
            "name": "Button",
            "props": {
                "callbackId":"generate",
                "variant":"primary"
            }
        },
        {
            
            "children": [],
            "id": "generate-button-text",
            "name": "Text",
            "props": {
                "value":"Generate API Key"
            }
        },
        {
            
            "children": [],
            "id": "divider",
            "name": "Divider",
            "props": {
                "padding":"none"
            }
        },
        {
            
            "children": [],
            "id": "second-header",
            "name": "Card.Header",
            "props": {
                "title": "Set up your Zapier connection","description":"The easiest way is to create new zap and choose “Bettermode” under “Choose app & event” dropdown. After picking your trigger or action, click on “Sign in to Bettermode” button. There you will be prompted to add the API Key generated in the field above."
            }
        },
        {
            
            "children": ["second-card-button"],
            "id": "second-content",
            "name": "Card.Content",
        },
        {
            
            "children": ["link"],
            "id": "second-card-button",
            "name": "Button",
            "props": {
                "variant":"outline"
            }
        },
        {
            
            "children": ["link-text"],
            "id": "link",
            "name": "Link",
            "props": {
                "href":"https://zapier.com/apps/tribe/integrations",
                "external":true
            }
        },
        {
            
            "id": "link-text",
            "name": "Text",
            "props": {
                "value":"Open zapier.com"
            }
        }
    ]
}

As you can see it consists of two important properties. rootBlock and blocks. Let's dive in to each ones in detail.

Block

A block is a JSON object that can be translated to an HTML element. It has the following properties:

• id This the ID of the block and it is important because it determines the position of the element in the HTML hierachy.
• name This is the name of the component.
• props These are attributes to be passed to the element.
• children This is an array of IDs that demermines which elements must be added to this element.

Let's look at the example below

{           
    "id": "link-text",
    "name": "Text",
    "props": {
        "value":"Open zapier.com"
    }
}

This is a simple Text element that shows a text.

Blocks

Each slate consists of different blocks. Look at the example below:

[
    {       
        "children": ["api-key-input","alert","generate"],
        "id": "content",
        "name": "Card.Content",
        "props": {
            "className": "space-y-3"
        }
    },
    {
        
        "children": [],
        "id": "api-key-input",
        "name": "Input",
        "props": {
            "name":"token",
            "readOnly":true,
            "hideValue":true,
            "value":"zapier-api-key",
            "copy":true
        }
    },
    {
        
        "children": [],
        "id": "alert",
        "name": "Alert",
        "props": {
            "status":"warning",
            "title":"Generating a new key will stop your existing Zaps. You need to reconnect Zapier to Bettermode using the new API key."
        }
    },
    {
        
        "children": ["generate-button-text"],
        "id": "generate",
        "name": "Button",
        "props": {
            "callbackId":"generate",
            "variant":"primary"
        }
    },
    {
        
        "children": [],
        "id": "generate-button-text",
        "name": "Text",
        "props": {
            "value":"Generate API Key"
        }
    }
]

The JSON above can be translated to the following React format:

<Card.Content className="space-y-3">
    <Input name="token" readOnly hideValue value="zapier-api-key" copy></Input>
    <Alert status="warning" title="Generating a new key will stop your existing Zaps. You need to reconnect Zapier to Bettermode using the new API key."></Alert>
    <Button callbackId="generate" variant="primary">
        <Text value="Generate API Key"></Text>
    </Button>
</Card.Content>

Root block

The rootBlock is a crucial property that determines the initial block that must be the first element within the slate. It plays a pivotal role in the proper functioning of the slate structure. It is essential to ensure that a block with the same ID as the rootBlock is present; otherwise, the slate may not work as intended.

[
    "rootBlock": "root-block-id",
    "blocks": [
        { 
            "children": [],
            "id": "root-block-id",
            "name": "Text",
            "props": {
                "value":"Generate API Key"
            }
        }
    ]
]

List of available blocks

Name	Props	Note
Accordion	title (the default value is Accordions) items	items is an array of object with the following properties [title,description,defaultOpen (boolean)]
Alert	status (error,warning,success,info,neutral,primary) align (leading,center) title
Button	variant (primary, secondary,outline, danger, basic) size (xs, sm, md, lg, xl) fullWidth (boolean) rounded (boolean) disabled (boolean) loading (boolean) autoDisabled (boolean) autoLoading (boolean) callbackId text leadingIcon trailingIcon	size is set to md by default.
CallToAction	alignment (left, center) title image description (boolean) action	action is an array of object with the following properties [type (button, link),text,href,openInNewWindow (boolean)]
Card	alignment (left, center) padding (xs, sm, md, lg, xl) attached (top, bottom, left, right, all,none)	Since this is a layout element, it is important to pass some children.
Card.Content		Since this is a layout element, it is important to pass some children.
Card.Header	title description size (sm, md) withBorder (boolean)	Since this is a layout element, it is important to pass some children.
Card.Footer	withBorder (boolean)
Container	size (xs, sm, md, lg, xl, full) padding (xs, sm, md, lg, xl, full, none) direction (vertical, horizontal, vertical-reverse, horizontal-reverse, grid)	Since this is a layout element, it is important to pass some children.
Divider	padding (xs, sm, md, lg, none) position (center, trailing)
Form	callbackId defaultValues (Object)
Icon	name (refresh-cw-hr, check-circle, alert-triangle, switch-horizontal) size (xs, sm, md, lg) iconType (solid, outline) color (default, primary, positive, negative, attention, highlight)
Iframe	src height (number) title hidden (boolean)
Image	url size (xxs, xs, sm, md, lg, xl, 2xl, 3xl) shape (circle, square, rounded)
Input	readOnly name hideValue (boolean) value copy (boolean) required (boolean) invalid (boolean) hidden (boolean) label placeholder helperText error leadingIcon
Link	href external (boolean) variant (inherit, neutral, primary, accent)
Markdown	text	You should pass text to show the text.
RichText	content hidden (boolean) textColor (dark, light) backgroundColor textColor (none, card, card-with-padding)	You should pass content to show the text.
Select	callbackId isSearchable (boolean) dataCallbackId hideClearIcon (boolean) avatarRounded (none, sm, md, full) avatarSize (xxs, xs, sm, md, lg, xl, 2xl, 3xl)	You should pass content to show the text.
Text	value align (leading, center, trailing) size (xs, sm, md, lg, xl, 2xl) truncate (boolean) format (plain, markdown)	You should pass value to show the text.
Textarea	name value required (boolean) invalid (boolean) label placeholder helperText hidden (boolean)
Toggle	name title description checked (boolean) size (sm, md) required (boolean) invalid (boolean) label placeholder

Common props

Prop's name	definition
className	This is the class attribute of the final html element. You can use Tailwind CSS classes.
name	This is used mostly for elemenst inside a Form.
callbackId	This is used mostly for elemenst inside a Form.