@vention/machine-ui 3.27.0

package/src/lib/components/vention-tree-item/vention-tree-item.stories.tsx

@@ -0,0 +1,618 @@
+import { Meta, StoryObj } from "@storybook/react"
+import { IconRobot, IconEye, IconAnchor } from "@tabler/icons-react"
+import React, { useState, MouseEvent } from "react"
+
+import { VentionTreeItem } from "./vention-tree-item"
+import { Box } from "@mui/material"
+import { tss } from "tss-react/mui"
+
+const TREE_WIDTH = "300px"
+
+const meta: Meta<typeof VentionTreeItem> = {
+  title: "Components/VentionTreeItem",
+  component: VentionTreeItem,
+}
+export default meta
+type Story = StoryObj<typeof VentionTreeItem>
+
+const CenteredEyeActionButton = () => {
+  return (
+    <Box sx={{ display: "flex", justifyContent: "center" }}>
+      <IconEye stroke={1} size={20} />
+    </Box>
+  )
+}
+
+const AnchorActionButton = () => {
+  return (
+    <Box sx={{ display: "flex", justifyContent: "center" }}>
+      <IconAnchor stroke={1} size={20} />
+    </Box>
+  )
+}
+
+interface ExampleContextMenuProps {
+  isVisible: boolean
+}
+const ExampleContextMenu = ({ isVisible }: ExampleContextMenuProps) => {
+  return (
+    <Box
+      sx={{
+        display: isVisible ? "flex" : "none",
+        justifyContent: "center",
+        width: "100px",
+        height: "200px",
+        backgroundColor: "white",
+        border: "0.5px solid",
+      }}
+    >
+      Render you desired context menu or execute a function on right click
+    </Box>
+  )
+}
+
+const NodeItemIcon = () => {
+  return (
+    <Box sx={{ display: "flex", justifyContent: "center" }}>
+      <IconRobot stroke={1} size={20} />
+    </Box>
+  )
+}
+
+const ExampleTree = () => {
+  const treeData = [
+    {
+      labelText: "Parent Item",
+      children: [
+        {
+          labelText: "Child Item 1",
+          children: [
+            {
+              labelText: "Grandchild Item 1",
+            },
+            {
+              labelText: "Grandchild Item 2",
+            },
+          ],
+        },
+        {
+          labelText: "Child Item 2",
+          children: [
+            {
+              labelText: "Grandchild Item 1",
+            },
+            {
+              labelText: "Grandchild Item 2",
+            },
+          ],
+        },
+      ],
+    },
+  ]
+
+  const renderTreeItems = (items, indentLevel) => {
+    return items.map(item => (
+      <VentionTreeItem
+        key={item.labelText}
+        labelText={item.labelText}
+        indentLevel={indentLevel}
+        hasWarning={item.hasWarning}
+        icon={<NodeItemIcon />}
+        actionButtons={[
+          {
+            component: <CenteredEyeActionButton />,
+            showOnHover: true,
+            onClick: () => {
+              alert("You clicked the eye button!")
+            },
+          },
+        ]}
+        isSelected={false}
+      >
+        {item.children && renderTreeItems(item.children, indentLevel + 1)}
+      </VentionTreeItem>
+    ))
+  }
+
+  return <>{renderTreeItems(treeData, 0)}</>
+}
+
+export const Default: Story = {
+  args: {
+    labelText: "Parent Item",
+    indentLevel: 0,
+    icon: <NodeItemIcon />,
+    isSelected: false,
+  },
+  render: function Render(args) {
+    return (
+      <Box
+        sx={{
+          width: TREE_WIDTH,
+          height: "200px",
+        }}
+      >
+        <VentionTreeItem {...args} />
+      </Box>
+    )
+  },
+}
+
+export const WithRename: Story = {
+  args: {
+    labelText: "Double Click to rename!",
+    indentLevel: 0,
+    icon: <NodeItemIcon />,
+    isSelected: false,
+    canRename: true,
+    onLabelChange: (newLabel: string) => {
+      alert(`Renamed to: ${newLabel}`)
+    },
+  },
+  render: function Render(args) {
+    return (
+      <Box
+        sx={{
+          width: TREE_WIDTH,
+          height: "200px",
+        }}
+      >
+        <VentionTreeItem {...args} />
+      </Box>
+    )
+  },
+}
+
+export const WithWarning: Story = {
+  args: {
+    labelText: "Parent Item",
+    indentLevel: 0,
+    icon: <NodeItemIcon />,
+    isSelected: false,
+    hasWarning: true,
+  },
+  render: function Render(args) {
+    return (
+      <Box
+        sx={{
+          width: TREE_WIDTH,
+          height: "200px",
+        }}
+      >
+        <VentionTreeItem {...args} />
+      </Box>
+    )
+  },
+}
+
+export const withACaptionRight: Story = {
+  args: {
+    labelText: "Parent Item",
+    indentLevel: 0,
+    icon: <NodeItemIcon />,
+    isSelected: false,
+    captionsRight: [
+      {
+        text: "Caption Right",
+        onClick: () => {
+          alert("Caption Right clicked")
+        },
+      },
+    ],
+  },
+  render: function Render(args) {
+    return (
+      <Box
+        sx={{
+          width: TREE_WIDTH,
+          height: "200px",
+        }}
+      >
+        <VentionTreeItem {...args} />
+      </Box>
+    )
+  },
+}
+
+export const withMultipleCaptionsRight: Story = {
+  args: {
+    labelText: "Parent Item",
+    indentLevel: 0,
+    icon: <NodeItemIcon />,
+    isSelected: false,
+    captionsRight: [
+      {
+        text: "Caption Right 1",
+        onClick: () => {
+          alert("Caption Right 1 clicked")
+        },
+      },
+      {
+        text: "Caption Right 2",
+        onClick: () => {
+          alert("Caption Right 2 clicked")
+        },
+      },
+      {
+        text: "Caption Right 3",
+        onClick: () => {
+          alert("Caption Right 3 clicked")
+        },
+      },
+    ],
+  },
+  render: function Render(args) {
+    return (
+      <Box
+        sx={{
+          width: TREE_WIDTH,
+          height: "200px",
+        }}
+      >
+        <VentionTreeItem {...args} />
+      </Box>
+    )
+  },
+}
+
+export const withACaptionRightAndTextOverflow: Story = {
+  args: {
+    labelText: "Parent Item with a very long text that will be truncated",
+    indentLevel: 0,
+    icon: <NodeItemIcon />,
+    isSelected: false,
+    captionsRight: [
+      {
+        text: "Caption Right with a very long text that will be truncated",
+        onClick: () => {
+          alert("Caption Right clicked")
+        },
+      },
+    ],
+  },
+  render: function Render(args) {
+    return (
+      <Box
+        sx={{
+          width: TREE_WIDTH,
+          height: "200px",
+        }}
+      >
+        <VentionTreeItem {...args} />
+      </Box>
+    )
+  },
+}
+
+export const WithCaptionsRightAndActionItems: Story = {
+  args: {
+    labelText: "Parent Item",
+    indentLevel: 0,
+    icon: <NodeItemIcon />,
+    isSelected: false,
+    actionButtons: [
+      {
+        component: <AnchorActionButton />,
+        showOnHover: false,
+        onClick: () => {
+          alert("Anchor button clicked")
+        },
+      },
+      {
+        component: <CenteredEyeActionButton />,
+        showOnHover: true,
+        onClick: () => {
+          alert("Eye button clicked")
+        },
+      },
+    ],
+    hasWarning: true,
+    captionsRight: [
+      {
+        text: "Caption Right 1",
+        color: "orange",
+        onClick: () => {
+          alert("Caption Right 1 clicked")
+        },
+      },
+      {
+        text: "Caption Right 2",
+        color: "blue",
+        onClick: () => {
+          alert("Caption Right 2 clicked")
+        },
+      },
+      {
+        text: "Caption Right 3",
+        color: "blue",
+      },
+    ],
+  },
+  render: function Render(args) {
+    return (
+      <Box
+        sx={{
+          width: TREE_WIDTH,
+          height: "200px",
+        }}
+      >
+        <VentionTreeItem {...args} />
+      </Box>
+    )
+  },
+}
+
+export const WithWarningAndActionButton: Story = {
+  args: {
+    labelText: "This is a very long text that will be truncated. This is a very long text that will be truncated.",
+    indentLevel: 0,
+    icon: <NodeItemIcon />,
+    isSelected: false,
+    hasWarning: true,
+    actionButtons: [
+      {
+        component: <CenteredEyeActionButton />,
+        showOnHover: true,
+        onClick: () => {
+          alert("You clicked the eye button!")
+        },
+      },
+    ],
+  },
+  render: function Render(args) {
+    return (
+      <Box
+        sx={{
+          width: TREE_WIDTH,
+          height: "200px",
+        }}
+      >
+        <VentionTreeItem {...args} />
+      </Box>
+    )
+  },
+}
+
+export const NoIconWithLongText: Story = {
+  args: {
+    labelText: "This is a very long text that will be truncated. This is a very long text that will be truncated.",
+    indentLevel: 0,
+    icon: null,
+    isSelected: false,
+  },
+  render: function Render(args) {
+    return (
+      <Box
+        sx={{
+          width: TREE_WIDTH,
+          height: "200px",
+        }}
+      >
+        <VentionTreeItem {...args} />
+      </Box>
+    )
+  },
+}
+
+export const WithActionButton: Story = {
+  args: {
+    labelText: "Hover Over Me",
+    indentLevel: 0,
+    icon: <NodeItemIcon />,
+    actionButtons: [
+      {
+        component: <CenteredEyeActionButton />,
+        showOnHover: true,
+        onClick: () => {
+          alert("You clicked the eye button!")
+        },
+      },
+    ],
+    isSelected: false,
+  },
+  render: function Render(args) {
+    return (
+      <Box
+        sx={{
+          width: TREE_WIDTH,
+          height: "200px",
+        }}
+      >
+        <VentionTreeItem {...args} />
+      </Box>
+    )
+  },
+}
+
+export const WithMultipleActionButtons: Story = {
+  args: {
+    labelText: "Hover Over Me",
+    indentLevel: 0,
+    icon: <NodeItemIcon />,
+    actionButtons: [
+      {
+        component: <AnchorActionButton />,
+        showOnHover: false,
+        onClick: () => {
+          alert("You clicked the anchor button!")
+        },
+      },
+      {
+        component: <CenteredEyeActionButton />,
+        showOnHover: true,
+        onClick: () => {
+          alert("You clicked the eye button!")
+        },
+      },
+    ],
+    isSelected: false,
+  },
+  render: function Render(args) {
+    return (
+      <Box
+        sx={{
+          width: TREE_WIDTH,
+          height: "200px",
+        }}
+      >
+        <VentionTreeItem {...args} />
+      </Box>
+    )
+  },
+}
+
+export const WithActionOnClick: Story = {
+  args: {
+    labelText: "Click Me",
+    indentLevel: 0,
+    icon: <NodeItemIcon />,
+    isSelected: false,
+    onClick: () => {
+      alert("You clicked me!")
+    },
+    actionButtons: [
+      {
+        component: <AnchorActionButton />,
+        showOnHover: false,
+        onClick: () => {
+          alert("You clicked the anchor button!")
+        },
+      },
+      {
+        component: <CenteredEyeActionButton />,
+        showOnHover: true,
+        onClick: () => {
+          alert("You clicked the eye button!")
+        },
+      },
+    ],
+  },
+  render: function Render(args) {
+    return (
+      <Box
+        sx={{
+          width: TREE_WIDTH,
+          height: "200px",
+        }}
+      >
+        <VentionTreeItem
+          labelText={args.labelText}
+          indentLevel={args.indentLevel}
+          icon={args.icon}
+          isSelected={args.isSelected}
+          onClick={args.onClick}
+        >
+          <VentionTreeItem
+            labelText="Child Item 1"
+            indentLevel={1}
+            onClick={() => alert("You clicked the children!")}
+            actionButtons={args.actionButtons}
+          />
+        </VentionTreeItem>
+      </Box>
+    )
+  },
+}
+
+export const WithChildrenItems: Story = {
+  render: function Render(args) {
+    return (
+      <Box
+        sx={{
+          width: TREE_WIDTH,
+          height: "200px",
+        }}
+      >
+        <ExampleTree />
+      </Box>
+    )
+  },
+}
+
+export const WithContextMenu: Story = {
+  args: {
+    labelText: "Right Click Me",
+    indentLevel: 0,
+    icon: <NodeItemIcon />,
+    actionButtons: [
+      {
+        component: <CenteredEyeActionButton />,
+        showOnHover: true,
+        onClick: () => {
+          alert("You clicked the eye button!")
+        },
+      },
+    ],
+    isSelected: false,
+  },
+  render: function Render(args) {
+    const [showContextMenu, setShowContextMenu] = useState(false)
+    const handleContextMenu = (event: MouseEvent) => {
+      event.preventDefault()
+      event.stopPropagation()
+      setShowContextMenu(!showContextMenu)
+    }
+
+    return (
+      <Box
+        sx={{
+          width: TREE_WIDTH,
+          height: "200px",
+        }}
+      >
+        <VentionTreeItem
+          {...args}
+          onContextMenu={handleContextMenu}
+          onClick={() => {
+            setShowContextMenu(false)
+          }}
+        />
+        <ExampleContextMenu isVisible={showContextMenu} />
+      </Box>
+    )
+  },
+}
+
+export const WithStyleOverrides: Story = {
+  args: {
+    labelText: "Right Click Me",
+    icon: <NodeItemIcon />,
+    isSelected: true,
+    actionButtons: [
+      {
+        component: <CenteredEyeActionButton />,
+        showOnHover: true,
+        onClick: () => {
+          alert("You clicked the eye button!")
+        },
+      },
+    ],
+  },
+  render: function Render(args) {
+    // overriding styles with tss https://docs.tss-react.dev/your-own-classes-prop
+    const useStyle = tss.create({
+      mainContent: { color: "cyan" },
+      label: { color: "white", backgroundColor: "green" },
+      actionButton: { backgroundColor: "yellow" },
+    })
+    const { classes } = useStyle()
+
+    return (
+      <Box
+        sx={{
+          width: TREE_WIDTH,
+          height: "200px",
+        }}
+      >
+        <VentionTreeItem
+          {...args}
+          classes={{
+            mainContent: classes.mainContent,
+            label: classes.label,
+            actionButton: classes.actionButton,
+          }}
+        />
+      </Box>
+    )
+  },
+}