pixel-react 1.9.4 → 1.9.6

package/src/components/Tabs/Tabs.scss

@@ -5,6 +5,7 @@
   box-sizing: border-box;
 
   .ff-tab-row {
+    flex: 0 1 auto;
     &--default {
       display: flex;
       gap: 8px;
@@ -38,11 +39,13 @@
               font-size: 8px;
               font-weight: 600;
               padding: 0 2px;
+
               &--active {
                 background-color: var(--tabs-label-active-color);
               }
             }
           }
+
           .ff-tab-bar {
             width: 100%;
             border-radius: 2px 2px 0 0;
@@ -69,8 +72,10 @@
                 color: var(--tabs-label-active-color) !important;
               }
             }
+
             .tab-count {
               background-color: var(--input-hover-border-color);
+
               &--active {
                 background-color: var(--tabs-label-active-color);
               }
@@ -125,11 +130,48 @@
     &--no-border {
       border: none;
     }
+
+    &--no-padding {
+      border-radius: 8px;
+      background: white;
+      padding: 0px;
+      justify-content: flex-start;
+      margin-right: 8px;
+
+      .ff-tab-button {
+        &--capsule {
+          background: transparent;
+          border: none;
+          padding: 3px 4px;
+          border-radius: 7px;
+          cursor: pointer;
+
+          &:hover {
+            .ff-tab-label {
+              color: var(--input-hover-border-color) !important;
+
+              &--active {
+                color: var(--tabs-label-active-color) !important;
+              }
+            }
+          }
+
+          &.active {
+            background-color: var(--slider-table-color);
+          }
+
+          .ff-tab-bar {
+            display: none;
+          }
+        }
+      }
+    }
   }
 
   .ff-tab-content {
     width: inherit;
   }
+
   .ff-defaultStatus {
     position: absolute;
     top: 2px;
@@ -143,9 +185,10 @@
       background-color: var(--confirm-tick-icon-color);
       box-shadow: 0px 1px 1px 0px var(--toggle-strip-shadow);
     }
+
     &.ff-dangerStatus {
       background-color: var(--delete-text-color);
       box-shadow: 0px 1px 1px 0px var(--toggle-strip-shadow);
     }
   }
-}
+}

package/src/components/Tabs/Tabs.stories.tsx

@@ -150,4 +150,30 @@ export const WithoutBorder: Story = {
   },
 };
 
+export const WithoutPadding: Story = {
+  render: () => {
+    const [activeTabIdDefault, setActiveTabIdDefault] =
+      useState<string>('tab-1');
+
+    return (
+      <div style={{ display: 'flex', gap: '10px' }}>
+        <Tabs
+          tabsData={tabsData}
+          activeTabId={activeTabIdDefault}
+          onTabClick={setActiveTabIdDefault}
+          noPadding={true}
+        />{' '}
+        <hr />
+        <Tabs
+          variant="capsule"
+          tabsData={tabsData}
+          activeTabId={activeTabIdDefault}
+          onTabClick={setActiveTabIdDefault}
+          noPadding={true}
+        />
+      </div>
+    );
+  },
+};
+
 export default meta;

package/src/components/Tabs/Tabs.tsx

@@ -10,12 +10,14 @@ const Tabs = ({
   activeTabId,
   onTabClick,
   noBorder = false,
+  noPadding = false,
 }: TabsProps) => {
   return (
     <div className={`ff-tabs-container`}>
       <div
         className={classNames(`ff-tab-row--${variant}`, {
           'ff-tab-row--no-border': noBorder,
+          'ff-tab-row--no-padding': noPadding,
         })}
       >
         {tabsData.map((tab) => (

package/src/components/Tabs/types.ts

@@ -46,4 +46,5 @@ export interface TabsProps {
    * noBorder:true , removes the outer border from tabs
    */
   noBorder?: boolean;
+  noPadding?:boolean
 }

package/src/index.ts

@@ -105,7 +105,13 @@ import ConditionalDropdown from './components/ConditionalDropdown/ConditionalDro
 import { hasDuplicateFile } from './utils/checkDuplicates/checkDuplicates';
 import PhoneInputField from './components/PhoneInput';
 import { useKeyboardActions } from './utils/keyBoardActionUtil/UseKeyboardActions';
-import { rearrangeDragItem } from './utils/swapArrayItem/dragAndDropUtils'
+import { rearrangeDragItem } from './utils/swapArrayItem/dragAndDropUtils';
+
+import { getTreeDetails } from './utils/getTreeDetails/getTreeDetails';
+import { handleTreeNodeSect } from './utils/handleTreeNodeSelect/handleTreeNodeSelect';
+
+import { TreeNodeProps } from './ComponentProps/TreeNodeProps';
+
 import {
   EMAIL_REGEX,
   URL_REGEX,
@@ -163,7 +169,10 @@ import {
   ELEMENTS_WHITE_SPACE_REGEX,
   PARAMETER_ALPHANUMERIC_REGEX,
 } from './validations/regex';
-import { getFromIndexedDB, saveToIndexedDB } from './utils/indexDBStore/indexDB';
+import {
+  getFromIndexedDB,
+  saveToIndexedDB,
+} from './utils/indexDBStore/indexDB';
 
 export {
   Button,
@@ -275,7 +284,13 @@ export {
   saveToIndexedDB,
   getFromIndexedDB,
   rearrangeDragItem,
+  getTreeDetails,
+  handleTreeNodeSect,
+
+  //types
+  TreeNodeProps,
 
+  //Regex
   EMAIL_REGEX,
   URL_REGEX,
   PHONE_REGEX,

package/src/utils/findAndInsert/findAndInsert.stories.tsx

@@ -1,6 +1,7 @@
 // findAndInsert.stories.tsx
 import { useState } from 'react';
 import { findAndInsert, AnyObject } from './findAndInsert';
+import React from 'react';
 
 export default {
   title: 'Utils/findAndInsert',

package/src/utils/getTreeDetails/getTreeDetails.stories.tsx

@@ -0,0 +1,167 @@
+import { useState } from 'react';
+import { getTreeDetails, TreeNode, TreeDetailsResult } from './getTreeDetails';
+import React from 'react';
+
+export default {
+  title: 'Utils/getTreeDetails',
+  component: getTreeDetails,
+};
+
+const initialData: TreeNode[] = [
+  {
+    createdBy: 'USR4705',
+    modifiedBy: '--',
+    createdByUname: 'Saqeb',
+    modifiedByUname: '--',
+    createdOn: '2023-05-31T10:54:33.296Z',
+    modifiedOn: '2023-05-31T10:54:33.296Z',
+    state: 'APPROVED',
+    path: '/Root',
+    searchKey: '/PAG1010',
+    key: 'PAG1010',
+    name: 'Root',
+    projectId: 'PJT1006',
+    hierarchy: 0,
+    executionOrder: 0,
+    subContainerCount: 1,
+    resourceCount: 0,
+    totalSubContainerCount: 1,
+    totalResourceCount: 2,
+    totalProjectElementCount: 0,
+    totalSharedElementCount: 0,
+    container: false,
+    localDelete: false,
+    defaultEntity: false,
+    lastResource: false,
+    platform: '',
+  },
+  {
+    createdBy: 'USR4705',
+    modifiedBy: '--',
+    createdByUname: 'Saqeb',
+    modifiedByUname: '--',
+    createdOn: '2023-05-31T10:57:31.721Z',
+    modifiedOn: '2023-05-31T10:57:31.721Z',
+    state: 'APPROVED',
+    path: '/Root/page1',
+    searchKey: '/PAG1010/PAG1011',
+    key: 'PAG1011',
+    name: 'page1',
+    projectId: 'PJT1006',
+    hierarchy: 0,
+    executionOrder: 1,
+    subContainerCount: 0,
+    resourceCount: 3,
+    totalSubContainerCount: 0,
+    totalResourceCount: 1,
+    totalProjectElementCount: 0,
+    totalSharedElementCount: 0,
+    container: false,
+    localDelete: false,
+    defaultEntity: false,
+    lastResource: true,
+    platform: '',
+  },
+];
+
+export const InteractivePlayground = () => {
+  const [data, setData] = useState<TreeNode[]>(initialData);
+  const [newData, setNewData] = useState<TreeNode[]>([]);
+  const [action, setAction] = useState<'above' | 'below' | 'expand' | 'collapse' | 'start'>('below');
+  const [index, setIndex] = useState<number | undefined>(undefined);
+  const [result, setResult] = useState<TreeDetailsResult | null>(null);
+
+  const handleGetTreeDetails = () => {
+    try {
+      const treeDetails = getTreeDetails(action, data, newData, index);
+      setData(treeDetails.treeDataList);
+      setResult(treeDetails);
+    } catch (error) {
+      alert(error instanceof Error ? error.message : 'An error occurred');
+    }
+  };
+
+  return (
+    <div>
+      <h1>Interactive Playground for getTreeDetails</h1>
+
+      <div>
+        <label htmlFor="action">Action:</label>
+        <select
+          id="action"
+          value={action}
+          onChange={(e) =>
+            setAction(e.target.value as 'above' | 'below' | 'expand' | 'collapse' | 'start')
+          }
+        >
+          <option value="above">Above</option>
+          <option value="below">Below</option>
+          <option value="expand">Expand</option>
+          <option value="collapse">Collapse</option>
+          <option value="start">Start</option>
+        </select>
+      </div>
+
+      {(action === 'expand' || action === 'collapse') && (
+        <div>
+          <label htmlFor="index">Index (for expand/collapse):</label>
+          <input
+            type="number"
+            id="index"
+            value={index !== undefined ? index : ''}
+            onChange={(e) =>
+              setIndex(e.target.value ? parseInt(e.target.value, 10) : undefined)
+            }
+            disabled={action !== 'expand' && action !== 'collapse'}
+          />
+        </div>
+      )}
+
+      <div>
+        <label htmlFor="newData">New Data (JSON):</label>
+        <textarea
+          id="newData"
+          value={JSON.stringify(newData, null, 2)}
+          onChange={(e) => {
+            try {
+              setNewData(JSON.parse(e.target.value));
+            } catch {
+              alert('Invalid JSON');
+            }
+          }}
+        />
+      </div>
+
+      <button onClick={handleGetTreeDetails}>Get Tree Details</button>
+
+      <h2>Result:</h2>
+      {result ? (
+        <div>
+          {result.root && (
+            <>
+              <h3>Root:</h3>
+              <pre>{JSON.stringify(result.root, null, 2)}</pre>
+            </>
+          )}
+          <p>
+            <strong>Next:</strong> {result.next.toString()}
+          </p>
+          <p>
+            <strong>Previous:</strong> {result.previous.toString()}
+          </p>
+          <p>
+            <strong>Start ID:</strong> {result.startId}
+          </p>
+          <p>
+            <strong>End ID:</strong> {result.endId}
+          </p>
+        </div>
+      ) : (
+        <p>No result yet. Perform an action to see the details.</p>
+      )}
+
+      <h2>Current Tree Data:</h2>
+      <pre>{JSON.stringify(data, null, 2)}</pre>
+    </div>
+  );
+};

package/src/utils/getTreeDetails/getTreeDetails.ts

@@ -0,0 +1,65 @@
+import { TreeNodeProps as TreeNode } from '../../ComponentProps/TreeNodeProps';
+
+export interface TreeDetailsResult {
+  treeDataList: TreeNode[];
+  next: boolean;
+  previous: boolean;
+  startId: string;
+  endId: string;
+  root?: TreeNode;
+}
+
+export const getTreeDetails = (
+  action: 'above' | 'below' | 'expand' | 'collapse' | 'start',
+  oldData: TreeNode[],
+  newData: TreeNode[],
+  index?: number
+): TreeDetailsResult => {
+  let treeDataList: TreeNode[];
+  let root: TreeNode | undefined = undefined;
+
+  switch (action) {
+    case 'above':
+      treeDataList = [...newData, ...oldData].slice(0, 40);
+      break;
+    case 'below':
+      treeDataList = [...oldData, ...newData].slice(0, 40);
+      break;
+    case 'expand':
+    case 'collapse':
+      if (typeof index === 'number') {
+        treeDataList = [...oldData.slice(0, index + 1), ...newData];
+      } else {
+        throw new Error(
+          "Index is required for 'expand' or 'collapse' actions."
+        );
+      }
+      break;
+    case 'start':
+      if (oldData.length > 0) {
+        root = oldData[0];
+        treeDataList = oldData.slice(1);
+      } else {
+        throw new Error('Tree data list is empty, cannot determine root.');
+      }
+      break;
+    default:
+      throw new Error(`Invalid action: ${action}`);
+  }
+
+  if (treeDataList.length === 0 && action !== 'start') {
+    throw new Error('Tree data list is empty.');
+  }
+
+  const firstNode = treeDataList[0] || root!;
+  const lastNode = treeDataList[treeDataList.length - 1]!;
+
+  return {
+    treeDataList,
+    next: !lastNode.lastResource,
+    previous: !firstNode.lastResource,
+    startId: firstNode.key,
+    endId: lastNode.key,
+    root,
+  };
+};

package/src/utils/handleTreeNodeSelect/HandleTreeNodeSelect.stories.tsx

@@ -0,0 +1,195 @@
+import React, { useState } from 'react';
+import { handleTreeNodeSect, TreeNode } from './handleTreeNodeSelect'; // Ensure this imports the utility function
+
+export default {
+  title: 'Utils/handleTreeNodeSect',
+  component: handleTreeNodeSect,
+};
+
+const initialData: TreeNode[] = [
+  {
+    createdBy: 'USR4705',
+    modifiedBy: '--',
+    createdByUname: 'Saqeb',
+    modifiedByUname: '--',
+    createdOn: '2023-05-31T10:54:33.296Z',
+    modifiedOn: '2023-05-31T10:54:33.296Z',
+    state: 'APPROVED',
+    path: '/Root',
+    searchKey: '/PAG1010',
+    key: 'PAG1010',
+    name: 'Root',
+    projectId: 'PJT1006',
+    hierarchy: 0,
+    executionOrder: 0,
+    subContainerCount: 1,
+    resourceCount: 0,
+    totalSubContainerCount: 1,
+    totalResourceCount: 2,
+    totalProjectElementCount: 0,
+    totalSharedElementCount: 0,
+    container: false,
+    localDelete: false,
+    defaultEntity: false,
+    lastResource: false,
+    platform: '',
+  },
+  {
+    createdBy: 'USR4705',
+    modifiedBy: '--',
+    createdByUname: 'Saqeb',
+    modifiedByUname: '--',
+    createdOn: '2023-05-31T10:57:31.721Z',
+    modifiedOn: '2023-05-31T10:57:31.721Z',
+    state: 'APPROVED',
+    path: '/Root/page1',
+    searchKey: '/PAG1010/PAG1011',
+    parentId: 'PAG1010',
+    parentName: 'Root Page',
+    key: 'PAG1011',
+    name: 'page1',
+    projectId: 'PJT1006',
+    hierarchy: 1,
+    executionOrder: 1,
+    subContainerCount: 0,
+    resourceCount: 3,
+    totalSubContainerCount: 0,
+    totalResourceCount: 1,
+    totalProjectElementCount: 0,
+    totalSharedElementCount: 0,
+    container: false,
+    localDelete: false,
+    defaultEntity: false,
+    lastResource: true,
+  },
+  {
+    createdBy: 'USR4705',
+    modifiedBy: '--',
+    createdByUname: 'Saqeb',
+    modifiedByUname: '--',
+    createdOn: '2023-05-31T11:00:00.000Z',
+    modifiedOn: '2023-05-31T11:00:00.000Z',
+    state: 'APPROVED',
+    path: '/Root/page2',
+    searchKey: '/PAG1010/PAG1012',
+    parentId: 'PAG1010',
+    parentName: 'Root Page',
+    key: 'PAG1012',
+    name: 'page2',
+    projectId: 'PJT1006',
+    hierarchy: 1,
+    executionOrder: 2,
+    subContainerCount: 2,
+    resourceCount: 5,
+    totalSubContainerCount: 2,
+    totalResourceCount: 7,
+    totalProjectElementCount: 0,
+    totalSharedElementCount: 0,
+    container: true,
+    localDelete: false,
+    defaultEntity: false,
+    lastResource: false,
+  },
+  {
+    createdBy: 'USR4705',
+    modifiedBy: '--',
+    createdByUname: 'Saqeb',
+    modifiedByUname: '--',
+    createdOn: '2023-05-31T11:05:00.000Z',
+    modifiedOn: '2023-05-31T11:05:00.000Z',
+    state: 'APPROVED',
+    path: '/Root/page2/subpage1',
+    searchKey: '/PAG1010/PAG1012/PAG1013',
+    parentId: 'PAG1012',
+    parentName: 'page2',
+    key: 'PAG1013',
+    name: 'subpage1',
+    projectId: 'PJT1006',
+    hierarchy: 2,
+    executionOrder: 1,
+    subContainerCount: 0,
+    resourceCount: 2,
+    totalSubContainerCount: 0,
+    totalResourceCount: 2,
+    totalProjectElementCount: 0,
+    totalSharedElementCount: 0,
+    container: false,
+    localDelete: false,
+    defaultEntity: false,
+    lastResource: true,
+  },
+  {
+    createdBy: 'USR4705',
+    modifiedBy: '--',
+    createdByUname: 'Saqeb',
+    modifiedByUname: '--',
+    createdOn: '2023-05-31T11:10:00.000Z',
+    modifiedOn: '2023-05-31T11:10:00.000Z',
+    state: 'APPROVED',
+    path: '/Root/page2/subpage2',
+    searchKey: '/PAG1010/PAG1012/PAG1014',
+    parentId: 'PAG1012',
+    parentName: 'page2',
+    key: 'PAG1014',
+    name: 'subpage2',
+    projectId: 'PJT1006',
+    hierarchy: 2,
+    executionOrder: 2,
+    subContainerCount: 0,
+    resourceCount: 4,
+    totalSubContainerCount: 0,
+    totalResourceCount: 4,
+    totalProjectElementCount: 0,
+    totalSharedElementCount: 0,
+    container: false,
+    localDelete: false,
+    defaultEntity: false,
+    lastResource: true,
+  },
+  // Repeat similar patterns to generate 50 entries, modifying hierarchy, executionOrder, and other attributes as needed.
+];
+
+export const InteractiveTreeSelector = () => {
+  const [data, setData] = useState<TreeNode[]>(initialData);
+  const [selectedKey, setSelectedKey] = useState<string>('');
+  const [isChecked, setIsChecked] = useState<boolean>(false);
+
+  const handleUpdateTree = () => {
+    const updatedTree = handleTreeNodeSect(data, selectedKey, isChecked);
+    setData([...updatedTree]);
+  };
+
+  return (
+    <div style={{ fontFamily: 'Arial, sans-serif', padding: '20px' }}>
+      <h1>Interactive Tree Selector</h1>
+      <div>
+        <label htmlFor="nodeKey">Node Key:</label>
+        <input
+          id="nodeKey"
+          type="text"
+          value={selectedKey}
+          onChange={(e) => setSelectedKey(e.target.value)}
+          placeholder="Enter node key"
+        />
+      </div>
+      <div>
+        <label>
+          <input
+            type="checkbox"
+            checked={isChecked}
+            onChange={(e) => setIsChecked(e.target.checked)}
+          />
+          Set Checked
+        </label>
+      </div>
+      <button onClick={handleUpdateTree} style={{ marginTop: '10px' }}>
+        Update Tree
+      </button>
+
+      <h2>Tree Data:</h2>
+      <pre style={{ backgroundColor: '#f4f4f4', padding: '10px' }}>
+        {JSON.stringify(data, null, 2)}
+      </pre>
+    </div>
+  );
+};

package/src/utils/handleTreeNodeSelect/handleTreeNodeSelect.ts

@@ -0,0 +1,61 @@
+import { TreeNodeProps as TreeNode } from '../../ComponentProps/TreeNodeProps';
+
+export const handleTreeNodeSect = (
+  data: TreeNode[],
+  key: string,
+  isChecked: boolean | 'partial'
+): TreeNode[] => {
+  const nodesMap = new Map<string, TreeNode>();
+
+  // Build a map for quick access to nodes by key
+  data.forEach((node) => nodesMap.set(node.key, node));
+
+  // Helper to update child nodes
+  function updateChildren(nodeKey: string, checkedStatus: boolean | 'partial') {
+    for (const node of data) {
+      if (node.parentId === nodeKey) {
+        node.checked = checkedStatus;
+        updateChildren(node.key, checkedStatus);
+      }
+    }
+  }
+
+  // Helper to update parent nodes
+  function updateParents(nodeKey: string) {
+    const node = nodesMap.get(nodeKey);
+    if (node && node.parentId) {
+      const parentNode = nodesMap.get(node.parentId);
+      if (parentNode) {
+        const siblings = data.filter(
+          (sibling) => sibling.parentId === parentNode.key
+        );
+        const allChecked = siblings.every(
+          (sibling) => sibling.checked === true
+        );
+        const someChecked = siblings.some(
+          (sibling) => sibling.checked === true || sibling.checked === 'partial'
+        );
+
+        parentNode.checked = allChecked
+          ? true
+          : someChecked
+          ? 'partial'
+          : false;
+
+        updateParents(parentNode.key);
+      }
+    }
+  }
+
+  // Find the target node and update its state
+  const targetNode = nodesMap.get(key);
+  if (targetNode) {
+    targetNode.checked = isChecked;
+    // Update children recursively
+    updateChildren(key, isChecked);
+    // Update parents recursively
+    updateParents(key);
+  }
+
+  return data;
+};