std-tabs

Level: Atom | Entity: TabContent | Persistence: runtime

1 states, 2 events, 2 transitions

Live Preview

schema.orb

{
"name": "TabContentOrbital",
"orbitals": [
  {
    "name": "TabContentOrbital",
    "entity": {
      "name": "TabContent",
      "persistence": "runtime",
      "fields": [
        {
          "name": "id",
          "type": "string"
        },
        {
          "name": "name",
          "type": "string"
        },
        {
          "name": "description",
          "type": "string"
        },
        {
          "name": "status",
          "type": "string",
          "default": "active",
          "values": [
            "active",
            "inactive",
            "pending"
          ]
        },
        {
          "name": "createdAt",
          "type": "string"
        }
      ]
    },
    "traits": [
      {
        "name": "TabContentTabs",
        "linkedEntity": "TabContent",
        "category": "interaction",
        "stateMachine": {
          "states": [
            {
              "name": "idle",
              "isInitial": true
            }
          ],
          "events": [
            {
              "key": "INIT",
              "name": "Initialize"
            },
            {
              "key": "SELECT_TAB",
              "name": "Select Tab",
              "payload": [
                {
                  "name": "tab",
                  "type": "string",
                  "required": true
                }
              ]
            }
          ],
          "transitions": [
            {
              "from": "idle",
              "to": "idle",
              "event": "INIT",
              "effects": [
                [
                  "fetch",
                  "TabContent"
                ],
                [
                  "render-ui",
                  "main",
                  {
                    "type": "stack",
                    "direction": "vertical",
                    "gap": "lg",
                    "children": [
                      {
                        "type": "stack",
                        "direction": "horizontal",
                        "gap": "sm",
                        "align": "center",
                        "children": [
                          {
                            "type": "icon",
                            "name": "layout-grid",
                            "size": "lg"
                          },
                          {
                            "type": "typography",
                            "content": "TabContents",
                            "variant": "h2"
                          }
                        ]
                      },
                      {
                        "type": "divider"
                      },
                      {
                        "type": "tabs",
                        "tabs": [
                          {
                            "label": "Name",
                            "value": "name"
                          },
                          {
                            "label": "Description",
                            "value": "description"
                          },
                          {
                            "label": "Status",
                            "value": "status"
                          },
                          {
                            "label": "CreatedAt",
                            "value": "createdAt"
                          }
                        ],
                        "defaultActiveTab": "name",
                        "onTabChange": "SELECT_TAB"
                      },
                      {
                        "type": "divider"
                      },
                      {
                        "type": "data-grid",
                        "entity": "TabContent",
                        "emptyIcon": "inbox",
                        "emptyTitle": "No tabcontents yet",
                        "emptyDescription": "Add tabcontents to see them here.",
                        "className": "transition-shadow hover:shadow-md cursor-pointer",
                        "renderItem": [
                          "fn",
                          "item",
                          {
                            "type": "stack",
                            "direction": "vertical",
                            "gap": "sm",
                            "children": [
                              {
                                "type": "typography",
                                "variant": "h4",
                                "content": "@item.name"
                              },
                              {
                                "type": "typography",
                                "variant": "caption",
                                "color": "muted",
                                "content": "@item.name"
                              }
                            ]
                          }
                        ]
                      }
                    ]
                  }
                ]
              ]
            },
            {
              "from": "idle",
              "to": "idle",
              "event": "SELECT_TAB",
              "effects": [
                [
                  "fetch",
                  "TabContent"
                ],
                [
                  "render-ui",
                  "main",
                  {
                    "type": "stack",
                    "direction": "vertical",
                    "gap": "lg",
                    "children": [
                      {
                        "type": "stack",
                        "direction": "horizontal",
                        "gap": "sm",
                        "align": "center",
                        "children": [
                          {
                            "type": "icon",
                            "name": "layout-grid",
                            "size": "lg"
                          },
                          {
                            "type": "typography",
                            "content": "TabContents",
                            "variant": "h2"
                          }
                        ]
                      },
                      {
                        "type": "divider"
                      },
                      {
                        "type": "tabs",
                        "tabs": [
                          {
                            "label": "Name",
                            "value": "name"
                          },
                          {
                            "label": "Description",
                            "value": "description"
                          },
                          {
                            "label": "Status",
                            "value": "status"
                          },
                          {
                            "label": "CreatedAt",
                            "value": "createdAt"
                          }
                        ],
                        "defaultActiveTab": "name",
                        "activeTab": "@payload.tab",
                        "onTabChange": "SELECT_TAB"
                      },
                      {
                        "type": "divider"
                      },
                      {
                        "type": "data-grid",
                        "entity": "TabContent",
                        "emptyIcon": "inbox",
                        "emptyTitle": "No tabcontents yet",
                        "emptyDescription": "Add tabcontents to see them here.",
                        "className": "transition-shadow hover:shadow-md cursor-pointer",
                        "renderItem": [
                          "fn",
                          "item",
                          {
                            "type": "stack",
                            "direction": "vertical",
                            "gap": "sm",
                            "children": [
                              {
                                "type": "typography",
                                "variant": "h4",
                                "content": "@item.name"
                              },
                              {
                                "type": "typography",
                                "variant": "caption",
                                "color": "muted",
                                "content": "@item.name"
                              }
                            ]
                          }
                        ]
                      }
                    ]
                  }
                ]
              ]
            }
          ]
        }
      }
    ],
    "pages": [
      {
        "name": "TabContentTabsPage",
        "path": "/tabcontents",
        "traits": [
          {
            "ref": "TabContentTabs"
          }
        ]
      }
    ]
  }
],
"description": "Tab navigation atom. Uses the `tabs` pattern component with clickable tab headers. Each tab shows different entity data."
}

Loading preview...

Orbital Visualization

Loading visualization...

Entity Fields

Field	Type	Default
id	string	-
name	string	-
description	string	-
status	string	"active"
createdAt	string	-

States

State	Type
idle	Initial

Events

Event	Payload
INIT	-
SELECT_TAB	tab: string

Transitions

From	Event	To	Effects
idle	INIT	idle	2 effects
idle	SELECT_TAB	idle	2 effects