{
  "name": "FlexTab",
  "description": "An advanced, flexible tabs/tab manager",
  "user_stories": [
    "As a user I would like to see a list of tabs so I can toggle between content",
    "As a user I would like the option to rename a tab",
    "As a user I would like the option to re-order the tabs using drag/drop",
    "As a user I would like the option to add new tabs to the list",
    "As a user I would like the option to have a dropdown menu on my tabs so I can perform custom actions about that tab",
    "As a user if I have more tabs than the container can fit, I would like my tabs to be a small carousel that I can use to toggle left/right to see hidden tabs",
    "As a developer I would like to style my tabs",
    "As a developer I would like to replace my tab containers"
  ],
  "screens": "",
  "workflow": "",
  "test_plan": [],
  "components": [
    {
      "name": "FlexTab",
      "type": "Components",
      "description": "An advanced, flexible tabs/tab manager",
      "behaviors": "",
      "exists": "No",
      "package": "No",
      "schema": [
        {
          "name": "name",
          "type": "string",
          "description": "The name of the tab list",
          "schema_type": "prop"
        },
        {
          "name": "tabs",
          "type": "Array<{ id:string, name:string, caption:string, icon:string, isActive:string, customAction:() => void, style: React.CSSProperties() }>",
          "description": "The list of tabs to show",
          "schema_type": "prop"
        },
        {
          "name": "enableTabDropdowns",
          "type": "boolean",
          "description": "Whether or not the tabs have a dropdown menu of actions",
          "schema_type": "prop"
        },
        {
          "name": "enableContextMenu",
          "type": "boolean",
          "description": "Whether or not the user can trigger the tab action dropdown via right-click",
          "schema_type": "prop"
        },
        {
          "name": "tabActions",
          "type": "Array<{ id:string, label:string, icon:string, onSelect: () => void }>",
          "description": "The list of actions that are avaiable for each tab to take (will show in the dropdown)",
          "schema_type": "prop"
        },
        {
          "name": "canRename",
          "type": "boolean",
          "description": "Whether or not the tabs can be renamed",
          "schema_type": "prop"
        },
        {
          "name": "canDrag",
          "type": "boolean",
          "description": "Whether or not the tabs can be dragged/re-ordered",
          "schema_type": "prop"
        },
        {
          "name": "overflow",
          "type": "enum(HIDDEN, CAROUSEL)",
          "description": "The action to take when there are more tabs than the container permits",
          "schema_type": "prop"
        },
        {
          "name": "canAdd",
          "type": "boolean",
          "description": "Whether or not an add button is showing that allows the creation of more tabs",
          "schema_type": "prop"
        },
        {
          "name": "componentWrapper",
          "type": "JSX.Element",
          "description": "The component to use (instead of the default) to wrap each tab item",
          "schema_type": "prop"
        },
        {
          "name": "style",
          "type": "React.CSSProperties",
          "description": "The style to apply to the tab container",
          "schema_type": "prop"
        },
        {
          "name": "tabComponent",
          "type": "JSX.Element",
          "description": "The component to use (instead of the default) to replace each tab item",
          "schema_type": "prop"
        },
        {
          "name": "vertical",
          "type": "boolean",
          "description": "Whether the tabs should appear vertically or not",
          "schema_type": "prop"
        },
        {
          "name": "onTabSwitch()",
          "type": "() => void",
          "description": "Triggers when the tab is switched",
          "schema_type": "prop"
        },
        {
          "name": "onTabRename()",
          "type": "() => void",
          "description": "Triggers when the tab is renamed",
          "schema_type": "prop"
        },
        {
          "name": "onTabDelete()",
          "type": "() => void",
          "description": "Triggers when the tab is deleted",
          "schema_type": "prop"
        },
        {
          "name": "onTabCreate()",
          "type": "() => void",
          "description": "Triggers when a tab is created",
          "schema_type": "prop"
        },
        {
          "name": "switchTab()",
          "type": "() => void",
          "description": "Switches the tab from one to another",
          "schema_type": "method"
        }
      ],
      "tests": [
        {
          "it": "Should render the component in the dom",
          "type": "Integration"
        },
        {
          "it": "Should render a list of tabs in the dom that number the same as the number of tabs in the tabs array prop",
          "type": "Integration"
        },
        {
          "it": "Should render each tab with a caption that matches the tab item associated with that tab in the tabs array prop",
          "type": "Integration"
        },
        {
          "it": "Should render each tab with an icon (if one is present) that matches the tab item associated with that tab in the tabs array prop",
          "type": "Integration"
        },
        {
          "it": "Should render the tab as \"active\" it the tab in the tabs array prop has the isActive property set to true",
          "type": "Integration"
        },
        {
          "it": "Should render a dropdown of actions where the number of actions match the number of items in the tabActions prop",
          "type": "Integration"
        },
        {
          "it": "Should render a dropdown of actions on each tab if the enableTabDropdowns prop is set to true",
          "type": "Integration"
        },
        {
          "it": "Should render a dropdown of actions that are activated on right-click if the enableContextMenu prop is set to true",
          "type": "Integration"
        },
        {
          "it": "Should not permit renaming if the canRename prop is false",
          "type": "Integration"
        },
        {
          "it": "Should not permit re-ordering if the canDrag prop is false",
          "type": "Integration"
        },
        {
          "it": "Should not permit adding new tabs if the canAdd prop is false",
          "type": "Integration"
        },
        {
          "it": "Should render the tabs as a carousel when the number of tabs exceed the number that can fit on the screen",
          "type": "Integration"
        },
        {
          "it": "Should render the tabs normally with the overflow tabs hidden if the overflow prop is set to HIDDEN",
          "type": "Integration"
        },
        {
          "it": "Should render the component in the componentWrapper prop if one is provided",
          "type": "Integration"
        },
        {
          "it": "Should render the component in the tabComponent prop if one is provided",
          "type": "Integration"
        },
        {
          "it": "Should render the same number of tabComponent props as the amount of tabs in the tabs array prop",
          "type": "Integration"
        },
        {
          "it": "Should render the tabs as vertical if the vertical prop is set to true",
          "type": "Integration"
        },
        {
          "it": "(Events) Should trigger the onTabSwitch() event when the tab is switched",
          "type": "Integration"
        },
        {
          "it": "(Events) Should trigger the onTabRename() event when the tab is renamed",
          "type": "Integration"
        },
        {
          "it": "(Events) Should trigger the onTabDelete() event when the tab is deleted",
          "type": "Integration"
        },
        {
          "it": "(Events) Should trigger the onTabCreate() event when a tab is created",
          "type": "Integration"
        },
        {
          "it": "(Events) Should trigger the onSelect() action in the tab action prop if the tab dropdown action is selected",
          "type": "Integration"
        },
        {
          "it": "(Methods) Should switch the tab from one to another",
          "type": "Integration"
        },
        {
          "it": "(Hooks) Should trigger the onComponentRender(\"FlexTabs\") plugin hook when the component is being rendered",
          "type": "Integration"
        },
        {
          "it": "(Hooks) Should trigger the onListItems(\"TabList\") when the tab list is being generated",
          "type": "Integration"
        },
        {
          "it": "(Hooks) Should trigger the onListItems(\"TabActions\") plugin hook when the tab actions are being generated",
          "type": "Integration"
        },
        {
          "it": "(Hooks) Should trigger the onEventTrigger(\"TabSwitch\") plugin hook when a tab is switched",
          "type": "Integration"
        },
        {
          "it": "(Hooks) Should trigger the onEventTrigger(\"TabRename\") plugin hook when a tab is renamed",
          "type": "Integration"
        },
        {
          "it": "(Hooks) Should trigger the onEventTrigger(\"TabDelete\") plugin hook when a tab is deleted",
          "type": "Integration"
        },
        {
          "it": "(Hooks) Should trigger the onEventTrigger(\"TabCreate\") plugin hook when a tab is created",
          "type": "Integration"
        }
      ]
    }
  ],
  "database": [],
  "api": []
}