Primeng v17: fix treeselect issues (#29706)

### Parent Issue #29058 ### Issues - TreeSelect has an unnecessary border. - Remove TreeSelect Clone - Fix Space ### Screenshots v15 | v17 :-------------------------:|:-------------------------: ![Screenshot 2024-08-20 at 3 51 51 PM](https://github.com/user-attachments/assets/0c7547ba-1f50-494b-a993-66223abac4fe) | ![Screenshot 2024-08-20 at 3 51 46 PM](https://github.com/user-attachments/assets/2bcdc838-762b-449c-8023-04ae19b0cbbe)
dotCMS · Aug 22, 2024 · 7c3eee5 · 7c3eee5
1 parent 830ac2c
commit 7c3eee5
Show file tree

Hide file tree

Showing 10 changed files with 218 additions and 1,115 deletions.
diff --git a/core-web/apps/dotcms-ui/src/stories/primeng/data/Tree.stories.ts b/core-web/apps/dotcms-ui/src/stories/primeng/data/Tree.stories.ts
@@ -10,7 +10,7 @@ import { FormsModule } from '@angular/forms';
 
 import { Tree, TreeModule } from 'primeng/tree';
 
-import { files } from '../../utils/tree-node-files';
+import { generateFakeTree } from '../../utils/tree-node-files';
 
 const meta: Meta<Tree> = {
     title: 'PrimeNG/Data/Tree',
@@ -28,18 +28,15 @@ const meta: Meta<Tree> = {
         layout: 'centered',
         docs: {
             description: {
-                component:
-                    'Tree is used to display hierarchical data: https://www.primefaces.org/primeng-v15-lts/tree'
+                component: 'Tree is used to display hierarchical data: https://primeng.org/tree'
             }
         }
     },
     args: {
-        value: [...files]
+        value: [...generateFakeTree()]
     },
     render: (args) => ({
-        props: {
-            ...args
-        },
+        props: args,
         template: `<p-tree ${argsToTemplate(args)} />`
     })
 };
@@ -49,15 +46,22 @@ type Story = StoryObj<Tree>;
 
 export const Default: Story = {};
 
+export const Checkbox: Story = {
+    args: {
+        selectionMode: 'checkbox'
+    }
+};
+
 export const VirtualScroll: Story = {
     args: {
+        value: [...generateFakeTree(1000)],
         virtualScroll: true,
         virtualScrollItemSize: 30,
         virtualScrollOptions: {
             autoSize: true,
             style: {
                 width: '200px',
-                height: '200px'
+                height: '300px'
             }
         }
     }

diff --git a/core-web/apps/dotcms-ui/src/stories/primeng/form/TreeSelect.stories.ts b/core-web/apps/dotcms-ui/src/stories/primeng/form/TreeSelect.stories.ts
@@ -12,7 +12,7 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
 import { TreeSelectModule, TreeSelect } from 'primeng/treeselect';
 
-import { files } from '../../utils/tree-node-files';
+import { generateFakeTree } from '../../utils/tree-node-files';
 
 type ExtraArgs = {
     invalid: boolean;
@@ -37,21 +37,19 @@ const meta: Meta<Args> = {
         docs: {
             description: {
                 component:
-                    'TreeSelect is a form component to choose from hierarchical data.: https://www.primefaces.org/primeng-v15-lts/treeselect'
+                    'TreeSelect is a form component to choose from hierarchical data.: https://primeng.org/treeselect'
             }
         }
     },
     args: {
         placeholder: 'Select Item',
-        options: [...files],
+        options: [...generateFakeTree()],
         showClear: true,
         invalid: false,
         selectionMode: 'single'
     },
     render: (args) => ({
-        props: {
-            ...args
-        },
+        props: args,
         template: `
         <p-treeSelect
             ${argsToTemplate(args)}

diff --git a/core-web/apps/dotcms-ui/src/stories/utils/tree-node-files.ts b/core-web/apps/dotcms-ui/src/stories/utils/tree-node-files.ts
@@ -1,82 +1,21 @@
+import { faker } from '@faker-js/faker';
+
 import { TreeNode } from 'primeng/api';
 
-export const files: TreeNode[] = [
-    {
-        label: 'Documents',
-        data: 'Documents Folder',
-        expandedIcon: 'pi pi-folder-open',
-        collapsedIcon: 'pi pi-folder',
-        children: [
-            {
-                label: 'Work',
-                data: 'Work Folder',
-                expandedIcon: 'pi pi-folder-open',
-                collapsedIcon: 'pi pi-folder',
-                children: [
-                    {
-                        label: 'Expenses.doc',
-                        icon: 'pi pi-file',
-                        data: 'Expenses Document'
-                    },
-                    { label: 'Resume.doc', icon: 'pi pi-file', data: 'Resume Document' }
-                ]
-            },
-            {
-                label: 'Home',
-                data: 'Home Folder',
-                expandedIcon: 'pi pi-folder-open',
-                collapsedIcon: 'pi pi-folder',
-                children: [
-                    {
-                        label: 'Invoices.txt',
-                        icon: 'pi pi-file',
-                        data: 'Invoices for this month'
-                    }
-                ]
-            }
-        ]
-    },
-    {
-        label: 'Pictures',
-        data: 'Pictures Folder',
-        expandedIcon: 'pi pi-folder-open',
-        collapsedIcon: 'pi pi-folder',
-        children: [
-            { label: 'barcelona.jpg', icon: 'pi pi-image', data: 'Barcelona Photo' },
-            { label: 'logo.jpg', icon: 'pi pi-image', data: 'PrimeFaces Logo' },
-            { label: 'primeui.png', icon: 'pi pi-image', data: 'PrimeUI Logo' }
-        ]
-    },
-    {
-        label: 'Movies',
-        data: 'Movies Folder',
-        expandedIcon: 'pi pi-folder-open',
-        collapsedIcon: 'pi pi-folder',
-        children: [
-            {
-                label: 'Al Pacino',
-                data: 'Pacino Movies',
-                children: [
-                    { label: 'Scarface', icon: 'pi pi-video', data: 'Scarface Movie' },
-                    { label: 'Serpico', icon: 'pi pi-video', data: 'Serpico Movie' }
-                ]
-            },
-            {
-                label: 'Robert De Niro',
-                data: 'De Niro Movies',
-                children: [
-                    {
-                        label: 'Goodfellas',
-                        icon: 'pi pi-video',
-                        data: 'Goodfellas Movie'
-                    },
-                    {
-                        label: 'Untouchables',
-                        icon: 'pi pi-video',
-                        data: 'Untouchables Movie'
-                    }
-                ]
-            }
-        ]
-    }
-];
+export const generateFakeChildrenNode = (): TreeNode => ({
+    key: faker.string.uuid(),
+    label: faker.lorem.word(),
+    icon: 'pi pi-file'
+});
+
+export const generateFakeNode = (): TreeNode => ({
+    key: faker.string.uuid(),
+    label: faker.lorem.word(),
+    expandedIcon: 'pi pi-folder-open',
+    collapsedIcon: 'pi pi-folder',
+    children: faker.helpers.multiple(generateFakeChildrenNode, {
+        count: faker.number.int({ max: 5, min: 1 })
+    })
+});
+
+export const generateFakeTree = (count = 10) => faker.helpers.multiple(generateFakeNode, { count });