pixel-react 1.10.4 → 1.10.6

package/src/components/TableTree/Components/TableCell.tsx

@@ -10,7 +10,8 @@ import { AddModule } from './AddModule/AddModule';
 const renderSpaces = (
   level: number,
   parentSiblings: boolean[] = [],
-  isLast?: boolean | undefined
+  isLast?: boolean | undefined,
+  isContainer?: boolean | undefined
 ) => {
   let siblingsArray = parentSiblings;
   let isLastNode = isLast;
@@ -27,8 +28,10 @@ const renderSpaces = (
       {siblingsArray?.reverse()?.map((line, i) => (
         <span
           key={i}
-          className={`tree-table-space-block ${!line ? 'no-lines' : ''} ${
-            isLastNode && i === level - 1 ? 'last-node' : ''
+          className={`tree-table-space-block tree-table-space-block-${i} ${
+            !line ? 'no-lines' : ''
+          } ${isLastNode && i === level - 1 ? 'last-node' : ''} ${
+            isContainer ? 'folder' : ''
           }`}
         />
       ))}
@@ -38,19 +41,28 @@ const renderSpaces = (
 
 const TableCell = React.memo(
   ({
+    treeRowRef,
     col,
     node,
     selected,
     select,
     onCheckBoxChange,
     onToggleExpand,
-    index,
     onAddConfirm,
     onAddCancel,
   }: TableCellProps) => (
-    <td className={`${col.isTree && node.folder ? 'folder' : ''}`}>
+    <td
+      className={`ff-table-tree-td ${
+        col.isTree && node.container ? 'folder' : ''
+      }`}
+    >
       {col.isTree &&
-        renderSpaces(node.hierarchy + 1, node.parentSiblings, node.last)}
+        renderSpaces(
+          node.hierarchy + 1,
+          node.parentSiblings,
+          node.lastResource,
+          node.container
+        )}
       <div className="tree-title-container">
         {col.isTree && (
           <span
@@ -70,7 +82,7 @@ const TableCell = React.memo(
         )}
         <span
           className={`tree-table-td-content ${
-            col.isTree && node.folder ? 'folder' : ''
+            col.isTree && node.container ? 'folder' : ''
           }`}
         >
           {!node?.isNewNode && (
@@ -106,9 +118,12 @@ const TableCell = React.memo(
           )}
         </span>
       </div>
-
-      {col.actions && !node?.isNewNode && (
-        <div className="table-tree-row-action">{col.actions(node, index)}</div>
+      {col.actions && (
+        <div className={`table-tree-row-action`}>
+          {(() => {
+            return col.actions(node, treeRowRef);
+          })()}
+        </div>
       )}
     </td>
   )

package/src/components/TableTree/Components/TableHead.tsx

@@ -8,18 +8,18 @@ const TableHead = React.memo(({ columnsData }: TableHeadProps) => {
   );
 
   return (
-    <thead>
-      <tr>
+    <thead className="ff-table-tree-head">
+      <tr className="ff-table-tree-row">
         {columnsData.map(({ name, width }) => (
-          <th key={name} style={{ width: width }}>
+          <th className="ff-table-tree-th" key={name} style={{ width: width }}>
             {name}
           </th>
         ))}
       </tr>
       {hasDefaultValues && (
-        <tr>
+        <tr className="ff-table-tree-row">
           {columnsData.map(({ defaultValue, defaultActions }, index) => (
-            <td key={index}>
+            <td className="ff-table-tree-td" key={index}>
               {defaultValue && (
                 <span className="tree-table-default-content">
                   {defaultValue}

package/src/components/TableTree/Components/TableRow.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useRef } from 'react';
 import { TableRowProps } from '../types';
 import TableCell from './TableCell';
 
@@ -11,31 +11,34 @@ const TableRow = React.memo(
     onRowClick,
     onToggleExpand,
     onCheckBoxChange,
-    index,
     onAddConfirm,
     onAddCancel,
-  }: TableRowProps) => (
-    <tr
-      data-level={node.hierarchy}
-      className="show"
-      onClick={(e) => onRowClick(e, node)}
-    >
-      {columnsData.map((col) => (
-        <TableCell
-          key={col.name}
-          col={col}
-          node={node}
-          selected={selected}
-          select={select}
-          onCheckBoxChange={onCheckBoxChange}
-          onToggleExpand={onToggleExpand}
-          index={index}
-          onAddConfirm={onAddConfirm}
-          onAddCancel={onAddCancel}
-        />
-      ))}
-    </tr>
-  )
+  }: TableRowProps) => {
+    const treeRowRef = useRef<HTMLTableRowElement | null>(null);
+    return (
+      <tr
+        data-level={node.hierarchy}
+        ref={treeRowRef}
+        className="ff-table-tree-row show"
+        onClick={(e) => onRowClick(e, node)}
+      >
+        {columnsData.map((col) => (
+          <TableCell
+            treeRowRef={treeRowRef}
+            key={col.name}
+            col={col}
+            node={node}
+            selected={selected}
+            select={select}
+            onCheckBoxChange={onCheckBoxChange}
+            onToggleExpand={onToggleExpand}
+            onAddConfirm={onAddConfirm}
+            onAddCancel={onAddCancel}
+          />
+        ))}
+      </tr>
+    );
+  }
 );
 
 export default TableRow;

package/src/components/TableTree/TableTree.scss

@@ -45,7 +45,7 @@
     width: 8px;
 
     &::after {
-      width: 18px;
+      width: 22px;
       left: -10px;
     }
   }
@@ -71,6 +71,18 @@
     top: -4px;
     z-index: -1;
   }
+
+  &.folder {
+    &.last-node::before {
+      height: 13px;
+    }
+  }
+}
+
+.tree-title-container {
+  .tree-table-space-block {
+    width: 16px;
+  }
 }
 
 .hidden {
@@ -105,7 +117,8 @@
 }
 
 .table-scrollable {
-  height: var(--table-height); /* Adjust height as needed */
+  height: var(--table-height);
+  /* Adjust height as needed */
   overflow-y: auto;
   position: relative;
 }
@@ -114,12 +127,6 @@
   overflow: scroll;
 }
 
-tr {
-  &:hover {
-    background-color: var(--hover-color);
-  }
-}
-
 .tree-table {
   // border: 1px solid #f1f1f1;
   table-layout: fixed;
@@ -127,92 +134,105 @@ tr {
   border-collapse: collapse;
   overflow: scroll;
 
-  thead {
+  .ff-table-tree-head {
     position: sticky;
     top: 0;
     z-index: 2;
   }
 
-  tr {
+  .ff-table-tree-row {
     background-color: var(--base-bg-color);
+
     .table-tree-row-action {
       display: none;
     }
 
-    // &:hover {
-    //   background-color: var(--hover-color);
-    //   td {
-    //     &:first-child {
-    //       background-color: var(--hover-color);
-    //     }
-    //   }
-
-    .table-tree-row-action {
+    .table-row-add-button {
       display: inline-flex;
-      align-items: center;
+      z-index: 9999;
     }
-  }
+    &:hover {
+      background-color: var(--hover-color);
 
-  &::after {
-    content: '';
-    display: block;
-    visibility: hidden;
-    clear: both;
-  }
-}
+      .ff-table-tree-td {
+        &:first-child {
+          background-color: var(--hover-color);
+        }
+      }
 
-th,
-td {
-  text-align: left;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  overflow: hidden;
-}
+      .table-tree-row-action {
+        display: inline-flex;
+        align-items: center;
+      }
+    }
 
-th {
-  color: var(--brand-color);
-  background: var(--slider-table-color);
-  font-size: 13px;
-  width: 400px;
-  height: 32px;
-  box-sizing: border-box;
+    &::after {
+      content: '';
+      display: block;
+      visibility: hidden;
+      clear: both;
+    }
+  }
 
-  &:first-child {
-    width: 400px !important;
-    position: sticky;
-    left: 0;
+  .ff-table-tree-th,
+  .ff-table-tree-td {
+    text-align: left;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
   }
-}
 
-td {
-  font-size: 14px;
-  color: var(--brand-color);
-  height: 18px;
+  .ff-table-tree-th {
+    color: var(--table-header-text-color);
+    background: var(--border-color);
+    font-size: 12px;
+    font-weight: 600;
+    width: 400px;
+    height: 32px;
+    box-sizing: border-box;
+
+    &:first-child {
+      width: 400px !important;
+      position: sticky;
+      left: 0;
+      padding-left: 8px;
+    }
+  }
 
-  &:first-child {
-    overflow: initial;
-    position: sticky;
-    left: 0;
-    background-color: white;
+  .ff-table-tree-td {
+    font-size: 12px;
+    color: var(--nlp-color);
+    height: 18px;
 
-    &:hover {
-      background-color: var(--hover-color);
-    }
+    &:first-child {
+      overflow: initial;
+      position: sticky;
+      left: 0;
+      background-color: white;
 
-    .tree-table-default-content {
-      margin-left: 8px;
-    }
+      // &:hover {
+      //   background-color: var(--hover-color);
+      // }
+
+      .tree-table-default-content {
+        margin-left: 8px;
+      }
 
-    .tree-table-td-content {
-      padding-left: 4px;
+      .tree-table-td-content {
+        padding-left: 4px;
 
-      .tree-table-td-content-text {
-        margin-left: 4px;
+        .tree-table-td-content-text {
+          margin-left: 4px;
+        }
+      }
+      .tree-table-default-content {
+        font-weight: 700;
       }
     }
-  }
-  &.folder {
-    height: 28px;
+
+    &.folder {
+      height: 28px;
+    }
   }
 }
 

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

@@ -5,6 +5,7 @@ import treeData from './data';
 import Icon from '../Icon/Icon';
 import './TableTreeStories.scss';
 import React, { useState } from 'react';
+import AddResourceButton from '../AddResourceButton/AddResourceButton';
 
 const meta: Meta<typeof TableTree> = {
   title: 'Components/Table tree',
@@ -20,13 +21,76 @@ const colData = [
     accessor: 'name',
     width: '400px',
     isClickable: true,
-    actions: (row) => {
-      console.log('🚀 ~ row:', row);
+    actions: (row, treeRowRef) => {
+      console.log('🚀 ~ row:', row, treeRowRef);
+
       return [
         <Icon hoverEffect name="file" />,
         <Icon hoverEffect name="manage_apps" />,
         <Icon hoverEffect name="dropzone_icon" />,
         <Icon hoverEffect name="more" />,
+        <AddResourceButton
+          treeRowRef={treeRowRef}
+          directionalArrow={[
+            {
+              direction: 'top',
+              menuOptions: [
+                {
+                  label: 'Module',
+                  value: 'add_module',
+                  icon: 'module_icon',
+                  disable: false,
+                },
+              ],
+            },
+            {
+              direction: 'right',
+              menuOptions: [
+                {
+                  label: 'Sub Module',
+                  value: 'add_module',
+                  icon: 'module_icon',
+                  disable: false,
+                },
+                {
+                  label: 'Automation Script',
+                  value: 'add_module',
+                  icon: 'module_icon',
+                  disable: false,
+                },
+                {
+                  label: 'Manual Test Case',
+                  value: 'add_module',
+                  icon: 'module_icon',
+                  disable: false,
+                },
+                {
+                  label: 'Pre / Post Condition',
+                  value: 'add_module',
+                  icon: 'module_icon',
+                  disable: false,
+                },
+                {
+                  label: 'Authorization',
+                  value: 'add_module',
+                  icon: 'module_icon',
+                  disable: false,
+                },
+              ],
+            },
+            {
+              direction: 'down',
+              menuOptions: [
+                {
+                  label: 'Sub Module',
+                  value: 'sub_module',
+                  icon: 'module_icon',
+                  disable: false,
+                },
+              ],
+            },
+          ]}
+        />,
       ];
     },
     isTree: true,

package/src/components/TableTree/types.ts

@@ -4,13 +4,14 @@ import { TreeNodeProps as TreeNode } from '../../ComponentProps/TreeNodeProps';
 declare type JSX = ReactNode | JSX.Element[] | string | null;
 
 export interface TableCellProps {
+  treeRowRef?: React.RefObject<any | null>;
   col: any;
   node: any;
   selected: string[];
   select: string | null;
   onCheckBoxChange: (e: any, node: string[] | any) => void;
   onToggleExpand: (node: any) => void;
-  index: number;
+  index?: number;
   onAddConfirm?: (_name: string) => void;
   onAddCancel?: () => void;
 }
@@ -45,7 +46,7 @@ export interface TableRowProps {
   onRowClick: (e: any, node: any) => void;
   onToggleExpand: (node: TreeNode) => void;
   onCheckBoxChange: (e: any, node: string[] | any) => void;
-  index: number;
+  index?: number;
   onAddConfirm?: (_name: string) => void;
   onAddCancel?: () => void;
 }
@@ -56,7 +57,7 @@ export interface Column {
   width: string;
   isClickable?: boolean;
   cell?: (row: any) => JSX;
-  actions?: (row: any) => JSX;
+  actions?: (row: any, treeRowRef?: React.RefObject<any | null>) => JSX;
   isTree?: boolean;
   defaultValue?: string;
   defaultActions?: () => JSX;

package/src/index.ts

@@ -32,6 +32,7 @@ import RadioGroup from './components/RadioGroup';
 import MiniModal from './components/MiniModal';
 import TableTree from './components/TableTree';
 import Tabs from './components/Tabs';
+import BrowserTabs from './components/BrowserTabs';
 import HighlightText from './components/HighlightText';
 import Checkbox from './components/Checkbox';
 import Search from './components/Search/Search';
@@ -211,6 +212,7 @@ export {
   HighlightText,
   TableTree,
   Tabs,
+  BrowserTabs,
   Checkbox,
   Search,
   DatePicker,

package/src/utils/getTreeDetails/getTreeDetails.ts

@@ -1,4 +1,5 @@
 import { TreeNodeProps as TreeNode } from '../../ComponentProps/TreeNodeProps';
+import { checkEmpty } from '../checkEmpty/checkEmpty';
 
 export interface TreeDetailsResult {
   treeDataList: TreeNode[];
@@ -28,7 +29,7 @@ export const getTreeDetails = (
     case 'expand':
     case 'collapse':
       if (typeof index === 'number') {
-        treeDataList = [...oldData.slice(0, index + 1), ...newData];
+        treeDataList = [...oldData.slice(0, index), ...newData];
       } else {
         throw new Error(
           "Index is required for 'expand' or 'collapse' actions."
@@ -36,7 +37,7 @@ export const getTreeDetails = (
       }
       break;
     case 'start':
-      if (newData.length > 0) {
+      if (!checkEmpty(newData)) {
         root = newData[0];
         treeDataList = newData.slice(1);
       } else {
@@ -47,7 +48,7 @@ export const getTreeDetails = (
       throw new Error(`Invalid action: ${action}`);
   }
 
-  if (treeDataList.length === 0 && action !== 'start') {
+  if (checkEmpty(treeDataList) && action !== 'start') {
     throw new Error('Tree data list is empty.');
   }
 
@@ -56,10 +57,10 @@ export const getTreeDetails = (
 
   return {
     treeDataList,
-    next: !lastNode.lastResource,
-    previous: !firstNode.lastResource,
-    startId: firstNode.key,
-    endId: lastNode.key,
+    next: !lastNode?.lastResource,
+    previous: !firstNode?.lastResource,
+    startId: firstNode?.key,
+    endId: lastNode?.key,
     root,
   };
 };

package/lib/StyleGuide/ColorPalette/ColorPalette.stories.d.ts

@@ -1,6 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import StyleGuide from './ColorPalette';
-declare const meta: Meta<typeof StyleGuide>;
-type Story = StoryObj<typeof StyleGuide>;
-export declare const ColorList: Story;
-export default meta;

package/lib/StyleGuide/Typography/Typography.stories.d.ts

@@ -1,6 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import Typography from './Typography';
-declare const meta: Meta<typeof Typography>;
-type Story = StoryObj<typeof Typography>;
-export declare const AllFonts: Story;
-export default meta;

package/lib/components/Accordion/Accordion.stories.d.ts

@@ -1,6 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import Accordion from './Accordion';
-declare const meta: Meta<typeof Accordion>;
-type Story = StoryObj<typeof Accordion>;
-export declare const SampleAccordion: Story;
-export default meta;

package/lib/components/AddResourceButton/AddButton.stories.d.ts

@@ -1,8 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import AddButton from './AddButton';
-declare const meta: Meta<typeof AddButton>;
-type Story = StoryObj<typeof AddButton>;
-export declare const Default: Story;
-export declare const TwoArrowsButtons: Story;
-export declare const ThreeArrowsButton: Story;
-export default meta;

package/lib/components/Button/Button.stories.d.ts

@@ -1,12 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import Button from './Button';
-declare const meta: Meta<typeof Button>;
-type Story = StoryObj<typeof Button>;
-export declare const Primary: Story;
-export declare const Secondary: Story;
-export declare const Tertiary: Story;
-export declare const Delete: Story;
-export declare const PrimaryWithIcon: Story;
-export declare const SecondaryWithIcon: Story;
-export declare const TertiaryWithIcon: Story;
-export default meta;

package/lib/components/Charts/DonutChart/DonutChart.stories.d.ts

@@ -1,6 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react/*';
-import DonutChart from './DonutChart';
-declare const meta: Meta<typeof DonutChart>;
-export default meta;
-type Story = StoryObj<typeof DonutChart>;
-export declare const Default: Story;

package/lib/components/Charts/RadialChart/RadialChart.stories.d.ts

@@ -1,6 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import RadialChart from './RadialChart';
-declare const meta: Meta<typeof RadialChart>;
-export default meta;
-type Story = StoryObj<typeof RadialChart>;
-export declare const ChartWithStatus: Story;

package/lib/components/Checkbox/Checkbox.stories.d.ts

@@ -1,8 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import Checkbox from './Checkbox';
-declare const meta: Meta<typeof Checkbox>;
-export default meta;
-type Story = StoryObj<typeof meta>;
-export declare const Default: Story;
-export declare const Partial: Story;
-export declare const Controlled: Story;

package/lib/components/Chip/Chip.stories.d.ts

@@ -1,14 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import Chip from './Chip';
-import '../../assets/styles/_colors.scss';
-import './Chip.scss';
-declare const meta: Meta<typeof Chip>;
-type Story = StoryObj<typeof Chip>;
-export declare const Primary: Story;
-export declare const withoutExpand: Story;
-export declare const Group: Story;
-export declare const CustomChip: Story;
-export declare const Success: Story;
-export declare const Errors: Story;
-export declare const Warning: Story;
-export default meta;

package/lib/components/DatePicker/DatePicker.stories.d.ts

@@ -1,9 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import CustomDatePicker from './DatePicker';
-declare const meta: Meta<typeof CustomDatePicker>;
-export default meta;
-type Story = StoryObj<typeof CustomDatePicker>;
-export declare const Default: Story;
-export declare const StartDateFilter: Story;
-export declare const EndDateInput: Story;
-export declare const ScheduleDateInput: Story;

package/lib/components/DragAndDrop/DragAndDrop.stories.d.ts

@@ -1,6 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import DragAndDropList from './DragAndDropList';
-declare const meta: Meta<typeof DragAndDropList>;
-type Story = StoryObj<typeof DragAndDropList>;
-export declare const Primary: Story;
-export default meta;