pixel-react 1.0.0

package/src/components/TableTree/TableTree.scss

@@ -0,0 +1,142 @@
+@use '../../assets/styles/fonts';
+.ff-tree-container {
+  width: 100%;
+  font-size: 12px;
+  color: var(--brand-color);
+  transition: all 0.3s ease;
+  @extend .fontSm;
+  table {
+    border-collapse: collapse;
+    width: 100%;
+    text-align: left;
+  }
+  .ff-toggle-arrow-icon {
+    height: 12px;
+    width: 12px;
+    margin-left: 8px;
+    display: grid;
+    place-items: center;
+    transform: rotate(0deg);
+
+    svg {
+      path {
+        fill: var(--brand-color);
+      }
+    }
+
+    &.ff-expanded {
+      transform: rotate(0deg);
+    }
+
+    &.ff-collapsed {
+      transform: rotate(-90deg);
+    }
+  }
+
+  th,
+  td {
+    padding: 0 8px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  th {
+    vertical-align: middle;
+    height: 32px;
+    background-color: var(--slider-table-color);
+    color: var(--text-color);
+    font-weight: 600;
+    text-transform: uppercase;
+  }
+
+  tr {
+    .ff-action-section {
+      display: none;
+    }
+    &:hover {
+      background-color: var(--hover-color);
+      .ff-action-section {
+        display: block;
+      }
+    }
+  }
+
+  .ff-title-container {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+
+    .ff-toggle-folder {
+      display: flex;
+      cursor: pointer;
+    }
+    &.ff-folder {
+      font-weight: 600;
+    }
+
+    &.ff-file {
+      font-weight: 400;
+    }
+    .ff-title {
+      display: flex;
+      gap: 4px;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      font-weight: 400;
+      cursor: pointer;
+
+      .ff-hover-icon {
+        display: none;
+        position: absolute;
+        right: 10px;
+      }
+    }
+  }
+
+  .ff-node-li {
+    position: relative;
+    --indent-size: 16px;
+    --total-children-height: var(--node-height);
+
+    td:first-child {
+      padding-left: calc(var(--level) * var(--indent-size));
+      height: 32px;
+    }
+
+    // Vertical line connecting the node to the parent
+    &::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: calc(var(--level) * var(--indent-size) - 4px);
+      width: 1px;
+      height: calc(var(--total-children-height));
+      background-color: var(--tree-connecting-lines-color);
+      z-index: 1;
+    }
+
+    // Horizontal line connecting child node to parent
+    &::after {
+      content: '';
+      position: absolute;
+      top: 50%;
+      left: calc(var(--level) * var(--indent-size) - 4px);
+      width: 12px;
+      height: 1px;
+      background-color: var(--tree-connecting-lines-color);
+      z-index: 1;
+    }
+
+    // For the last child node, limit the vertical line
+    &.ff-is-last::before {
+      height: calc(var(--node-height) / 2);
+    }
+
+    // Remove the  lines for root level
+    &[style*='--level: 0']::before,
+    &[style*='--level: 0']::after {
+      content: none;
+    }
+  }
+}

package/src/components/TableTree/TableTree.stories.tsx

@@ -0,0 +1,121 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import TableTree from './TableTree';
+import Button from '../Button';
+import treeData from './data';
+import Typography from '../Typography/Typography';
+import Icon from '../Icon/Icon';
+import Chip from '../Chip/Chip';
+import './TableTreeStories.scss';
+
+const meta: Meta<typeof TableTree> = {
+  title: 'Components/Table tree',
+  component: TableTree,
+  tags: ['autodocs'],
+};
+
+type Story = StoryObj<typeof TableTree>;
+
+// NOTE :: For Action section use ff-action-section classname
+
+// TODO :: below code is a temporary will Modify later
+
+const createTilteAndAction = (row: any): JSX.Element => {
+  if (row?.folder) {
+    return (
+      <div className="ff-parent-node-section">
+        <div className="ff-folder-name-style">
+          <Typography fontWeight="semi-bold">{`${row?.title} - Action Folder lenthy name`}</Typography>
+        </div>
+
+        <Chip
+          fullText={`Sub Modules ${row?.scriptCount}`}
+          label={`SM ${row?.subModuleCount}`}
+          variant="primary"
+        />
+        <Chip
+          fullText={`Scripts Count ${row?.scriptCount}`}
+          label={`SC ${row?.scriptCount}`}
+          variant="primary"
+        />
+        <div className="ff-action-section">
+          <div className="ff-action-menu">
+            <Icon hoverEffect name="logo" />
+            <Icon hoverEffect name="sun_icon" />
+            <Icon hoverEffect name="more" />
+          </div>
+        </div>
+      </div>
+    );
+  } else {
+    return (
+      <div className="ff-parent-node-section">
+        <div className="ff-file-name-style">
+          <Typography>{`${row.title} - Action File with lenthy name`}</Typography>
+        </div>
+        <div className="ff-action-section">
+          <div className="ff-action-menu">
+            <Icon hoverEffect name="file" />
+            <Icon hoverEffect name="manage_apps" />
+            <Icon hoverEffect name="dropzone_icon" />
+            <Icon hoverEffect name="more" />
+          </div>
+        </div>
+      </div>
+    );
+  }
+};
+
+export const Default: Story = {
+  args: {
+    withCheckBox: false,
+    treeData,
+    columnsData: [
+      {
+        name: 'Script Name',
+        accessor: 'title',
+        width: '400px',
+        isClickable: true,
+        cell: (e) => {
+          return createTilteAndAction(e.row);
+        },
+      },
+
+      {
+        name: 'Module Path',
+        accessor: 'path',
+        width: '200px',
+        isClickable: true,
+      },
+      { name: 'Created By', accessor: 'createdByUname', width: '200px' },
+      {
+        name: 'Script Count',
+        accessor: 'moduleLevelScriptCount',
+        width: '200px',
+      },
+      {
+        name: 'state',
+        accessor: 'state',
+        width: '100px',
+        cell: ({ value }) => {
+          return (
+            value && (
+              <Button
+                variant="secondary"
+                onClick={() => {
+                  console.log('====', value); //Todo:need to remove
+                }}
+              >
+                {value}
+              </Button>
+            )
+          );
+        },
+      },
+    ],
+    onClick: (e, data) => {
+      console.log('🚀 ~ e, data:', e, data); //Todo:need to remove
+    },
+  },
+};
+
+export default meta;

package/src/components/TableTree/TableTree.tsx

@@ -0,0 +1,216 @@
+/* eslint-disable */
+// @ts-nocheck
+import './TableTree.scss';
+import React, { ReactNode, useLayoutEffect, useRef, useState } from 'react';
+import { prepareData } from '../../utils/TableCell/TableCell';
+import Icon from '../Icon';
+import { checkEmpty } from '../../utils/checkEmpty/checkEmpty';
+
+interface ColumnDataProps {
+  name: string;
+  accessor: string;
+  width: string;
+  isClickable?: boolean;
+  minWidth?: string;
+  cell?: (e: any) => JSX.Element | string | ReactNode;
+}
+
+interface ObjectProps {
+  [key: string]: any;
+}
+
+interface TableTreeProps {
+  withCheckBox: boolean;
+  columnsData: Array<ColumnDataProps>;
+  treeData: Array<ObjectProps>;
+  onClick?: (
+    event: React.MouseEvent<HTMLDivElement, MouseEvent>,
+    data: any
+  ) => void;
+}
+
+const TableTree = ({
+  columnsData,
+  treeData,
+  onClick = () => {},
+}: TableTreeProps) => {
+  const [expandedNodes, setExpandedNodes] = useState<Set<ObjectProps>>(
+    new Set()
+  );
+
+  useLayoutEffect(() => {
+    const defaultExpanded: Set<ObjectProps> = new Set();
+
+    // Recursive function to add nodes and their children to the expanded set
+    const expandNodeRecursively = (node: ObjectProps) => {
+      if (node.expanded) {
+        // Add the node to the expanded set
+        defaultExpanded.add(node);
+
+        // If the node has children, recursively expand them as well
+        if (node.children) {
+          node.children.forEach((child: ObjectProps) =>
+            expandNodeRecursively(child)
+          );
+        }
+      }
+    };
+
+    // Iterate over the treeData to check which nodes should be expanded
+    treeData.forEach((node) => {
+      expandNodeRecursively(node);
+    });
+
+    // Set the expanded nodes state
+    setExpandedNodes(defaultExpanded);
+  }, [treeData]);
+  // Function to calculate total children height
+  const calculateTotalChildrenHeight = (node: any): number => {
+    if (!node.children || node.children.length === 0) {
+      return 1;
+    }
+    // Start with 1 for the current node and  node itself is included in the height calculation before considering its children.
+    let totalHeight = 1;
+    if (expandedNodes.has(node)) {
+      node.children.forEach((child: any) => {
+        totalHeight += calculateTotalChildrenHeight(child);
+      });
+    }
+    return totalHeight;
+  };
+
+  const TreeNode = ({ node, level, isLast }: any) => {
+    const nodeRef = useRef<HTMLTableRowElement | null>(null);
+    const [nodeHeight, setNodeHeight] = useState<number>(0);
+    const [totalChildrenHeight, setTotalChildrenHeight] = useState<number>(0);
+
+    const isExpanded = expandedNodes.has(node);
+
+    useLayoutEffect(() => {
+      if (nodeRef.current) {
+        const observer = new ResizeObserver(() => {
+          // Update nodeHeight when the size of the element changes
+          const currentHeight = nodeRef.current?.offsetHeight || 0;
+          setNodeHeight(currentHeight);
+
+          // Calculate total children height
+          const childrenHeight = calculateTotalChildrenHeight(node);
+          setTotalChildrenHeight(childrenHeight);
+        });
+
+        // Start observing the current node
+        observer.observe(nodeRef.current);
+
+        return () => {
+          observer.disconnect();
+        };
+      }
+    }, [isExpanded, node]);
+
+    const handleToggleExpand = () => {
+      setExpandedNodes((prev) => {
+        const newExpandedNodes = new Set(prev);
+        if (newExpandedNodes.has(node)) {
+          newExpandedNodes.delete(node); // Collapse the node
+        } else {
+          newExpandedNodes.add(node); // Expand the node
+        }
+        return newExpandedNodes;
+      });
+    };
+    const renderRowData = (columnsData: any) => {
+      return columnsData.map((column: any) => {
+        if (column.accessor === 'title') {
+          return (
+            <td className="ff-title-container">
+              <span className="ff-toggle-folder" onClick={handleToggleExpand}>
+                {node.folder && (
+                  <span
+                    className={`ff-toggle-arrow-icon ${
+                      isExpanded ? 'ff-expanded' : 'ff-collapsed'
+                    }`}
+                  >
+                    <Icon name="arrows_down_icon" height={12} width={12} />
+                  </span>
+                )}
+              </span>
+
+              <div
+                className="ff-title"
+                style={{ fontWeight: node.folder ? 600 : 400 }}
+                onClick={(event) => onClick(event, node)}
+              >
+                {prepareData(node, column)}
+              </div>
+            </td>
+          );
+        } else if (column.accessor) {
+          return (
+            <td key={column.accessor} style={{ maxWidth: column.width }}>
+              {prepareData(node, column)}
+            </td>
+          );
+        }
+      });
+    };
+    return (
+      <>
+        <tr
+          ref={nodeRef}
+          className={`ff-node-li ${node.children ? 'ff-has-children' : ''} ${
+            isLast ? 'ff-is-last' : ''
+          }`}
+          style={
+            {
+              '--level': level,
+              '--node-height': `${nodeHeight}px`,
+              '--total-children-height': `${
+                totalChildrenHeight * nodeHeight
+              }px`,
+            } as React.CSSProperties
+          }
+        >
+          {renderRowData(columnsData)}
+        </tr>
+
+        {/* Render children only if the node is expanded */}
+        {isExpanded &&
+          !checkEmpty(node?.children) &&
+          renderTree(node.children, level + 1)}
+      </>
+    );
+  };
+
+  const renderTree = (nodes: any, level = 0) => {
+    return nodes.map((node: any, index: number) => {
+      const isLast = index === nodes.length - 1;
+      return <TreeNode key={index} node={node} level={level} isLast={isLast} />;
+    });
+  };
+
+  return (
+    <div className="ff-tree-container">
+      <table>
+        <thead>
+          <tr>
+            {columnsData.map((column: any, index) => (
+              <th
+                key={column.accessor}
+                style={
+                  index === 0
+                    ? { minWidth: column.width }
+                    : { width: column.width }
+                }
+              >
+                {column.name}
+              </th>
+            ))}
+          </tr>
+        </thead>
+        <tbody>{renderTree(treeData)}</tbody>
+      </table>
+    </div>
+  );
+};
+
+export default TableTree;

package/src/components/TableTree/TableTreeStories.scss

@@ -0,0 +1,22 @@
+.ff-parent-node-section {
+  display: flex;
+  gap: 4px;
+  width: 400px;
+  align-items: center;
+
+  .ff-folder-name-style {
+    width: 200px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .ff-file-name-style {
+    @extend .ff-folder-name-style;
+    margin-left: 8px;
+  }
+
+  .ff-action-menu {
+    display: flex;
+    gap: 6px;
+  }
+}