Add TreeSelect to storybook (#28666)

### Parent Issue #28494 ### Proposed Changes Add Support to TreeSelect Component to StoryBook. ### Additional Info This component is based on based [TreeSelect](https://www.primefaces.org/primeng-v15-lts/treeselect) Component by PrimeNG. ### Screenshots | | | |--------|--------| | Basic | Invalid | | ![localhost_4400__path=_story_primeng-form-treeselect--default globals=backgrounds value_!hex(F8F8F8);backgrounds grid_!false (1)](https://github.com/dotCMS/core/assets/7611944/1f70b3d4-7443-4e3f-8fc1-9f79e7ee8896) | ![localhost_4400__path=_story_primeng-form-treeselect--default globals=backgrounds value_!hex(F8F8F8);backgrounds grid_!false (2)](https://github.com/dotCMS/core/assets/7611944/e782779d-a4be-478d-b124-46fe5c5e0e58) | | With Label | With float label | | ![localhost_4400__path=_story_primeng-form-treeselect--default globals=backgrounds value_!hex(F8F8F8);backgrounds grid_!false (3)](https://github.com/dotCMS/core/assets/7611944/cd223b8e-d740-4121-bc14-cb1e352dfc84) | ![localhost_4400__path=_story_primeng-form-treeselect--default globals=backgrounds value_!hex(F8F8F8);backgrounds grid_!false (5)](https://github.com/dotCMS/core/assets/7611944/be3b04a0-a60b-47ca-b411-d35b54e02254) | | Disabled | Multiple Choice | | ![localhost_4400__path=_story_primeng-form-treeselect--default globals=backgrounds value_!hex(F8F8F8);backgrounds grid_!false (6)](https://github.com/dotCMS/core/assets/7611944/12837c61-fad0-458e-843f-17019a9137b2) | ![localhost_4400__path=_story_primeng-form-treeselect--default globals=backgrounds value_!hex(F8F8F8);backgrounds grid_!false (7)](https://github.com/dotCMS/core/assets/7611944/ccab3f9c-2acd-4734-b271-d8a1c54e7af7) | | Checkboxes | Search | | ![localhost_4400__path=_story_primeng-form-treeselect--default globals=backgrounds value_!hex(F8F8F8);backgrounds grid_!false (8)](https://github.com/dotCMS/core/assets/7611944/c13bb166-3083-4058-bb2f-638382dc080a) | ![localhost_4400__path=_story_primeng-form-treeselect--default globals=backgrounds value_!hex(F8F8F8);backgrounds grid_!false (9)](https://github.com/dotCMS/core/assets/7611944/bb020f69-5e38-477f-b80f-cb570404c9ec) | | Not found | | | ![localhost_4400__path=_story_primeng-form-treeselect--default globals=backgrounds value_!hex(F8F8F8);backgrounds grid_!false (10)](https://github.com/dotCMS/core/assets/7611944/173b9b3e-ee69-4a1d-aa1e-7193addb5773) | |
dotCMS · May 29, 2024 · 39cd937 · 39cd937
1 parent f28fc49
commit 39cd937
Show file tree

Hide file tree

Showing 10 changed files with 450 additions and 114 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
@@ -1,27 +1,26 @@
-// also exported from '@storybook/angular' if you can deal with breaking changes in 6.1
-import { Meta, moduleMetadata, Story } from '@storybook/angular';
+import { TreeNode } from 'primeng/api';
+import { Tree, TreeModule } from 'primeng/tree';
 
-import { TreeModule } from 'primeng/tree';
+import type { Meta, StoryObj } from '@storybook/angular';
 
-export default {
+const meta: Meta<Tree> = {
     title: 'PrimeNG/Data/Tree',
-    decorators: [
-        moduleMetadata({
-            imports: [TreeModule]
-        })
-    ],
+    component: Tree,
     parameters: {
         layout: 'centered',
         docs: {
             description: {
                 component:
-                    'Paginator is a generic component to display content in paged format.: https://primefaces.org/primeng/showcase/#/paginator'
+                    'Tree is used to display hierarchical data: https://www.primefaces.org/primeng-v15-lts/tree'
             }
         }
     }
-} as Meta;
+};
+export default meta;
+
+type Story = StoryObj<Tree>;
 
-const files = [
+export const files: TreeNode[] = [
     {
         label: 'Documents',
         data: 'Documents Folder',
@@ -102,21 +101,14 @@ const files = [
     }
 ];
 
-const BasicTemplate = `<p-tree [value]="files"></p-tree>`;
-
-export const Basic: Story = () => {
-    return {
-        template: BasicTemplate,
+export const Default: Story = {
+    render: () => ({
+        moduleMetadata: {
+            imports: [TreeModule]
+        },
         props: {
             files
-        }
-    };
-};
-
-Basic.parameters = {
-    docs: {
-        source: {
-            code: BasicTemplate
-        }
-    }
+        },
+        template: `<p-tree [value]="files"></p-tree>`
+    })
 };
diff --git a/core-web/apps/dotcms-ui/src/stories/primeng/form/Chips.stories.ts b/core-web/apps/dotcms-ui/src/stories/primeng/form/Chips.stories.ts
@@ -1,54 +1,41 @@
-import { Meta, moduleMetadata, Story } from '@storybook/angular';
+import { Meta, StoryObj } from '@storybook/angular';
 
+import { FormsModule } from '@angular/forms';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
 import { Chips, ChipsModule } from 'primeng/chips';
 
-export default {
+const meta: Meta = {
     title: 'PrimeNG/Form/Chips',
     component: Chips,
     parameters: {
         docs: {
             description: {
                 component:
-                    'Chips is used to enter multiple values on an input field: https://primeng.org/checkbox'
+                    'Chips is used to enter multiple values on an input field: https://primeng.org/chips'
             }
         }
     },
-    decorators: [
-        moduleMetadata({
-            imports: [ChipsModule, BrowserAnimationsModule]
-        })
-    ],
+    argTypes: {
+        values: {
+            name: 'values',
+            description: 'Array of strings, each representing a chip.'
+        }
+    },
     args: {
-        values: ['first']
-    }
-} as Meta;
-
-const ChipsTemplate = `<p-chips [(ngModel)]="values" ></p-chips>`;
-
-const Template: Story<Chips> = (props: Chips) => {
-    const template = ChipsTemplate;
-
-    return {
-        props,
-        template
-    };
-};
-
-export const Basic: Story = Template.bind({});
-
-Basic.argTypes = {
-    values: {
-        name: 'values',
-        description: 'Array of strings, each representing a chip.'
+        values: ['one', 'two']
     }
 };
-
-Basic.parameters = {
-    docs: {
-        source: {
-            code: ChipsTemplate
-        }
-    }
+export default meta;
+
+type Story = StoryObj<Chips>;
+
+export const Default: Story = {
+    render: (args) => ({
+        props: args,
+        moduleMetadata: {
+            imports: [ChipsModule, BrowserAnimationsModule, FormsModule]
+        },
+        template: `<p-chips [(ngModel)]="values" />`
+    })
 };
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
@@ -0,0 +1,231 @@
+import { Meta, StoryObj } from '@storybook/angular';
+
+import { FormsModule } from '@angular/forms';
+import { BrowserModule } from '@angular/platform-browser';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+
+import { TreeSelectModule, TreeSelect } from 'primeng/treeselect';
+
+import { files } from './../data/Tree.stories';
+
+const meta: Meta<TreeSelect> = {
+    title: 'PrimeNG/Form/TreeSelect',
+    component: TreeSelect,
+    parameters: {
+        layout: 'centered',
+        docs: {
+            description: {
+                component:
+                    'TreeSelect is a form component to choose from hierarchical data.: https://www.primefaces.org/primeng-v15-lts/treeselect'
+            }
+        }
+    }
+};
+export default meta;
+
+type Story = StoryObj<TreeSelect>;
+
+const storyConfigBase: Partial<Story['render']> = {
+    moduleMetadata: {
+        imports: [TreeSelectModule, FormsModule, BrowserAnimationsModule, BrowserModule]
+    },
+    props: {
+        files,
+        selectedNodes: ''
+    }
+};
+
+export const Default: Story = {
+    render: () => ({
+        ...storyConfigBase,
+        template: `
+        <div class="card flex justify-content-center w-25rem h-25rem">
+            <p-treeSelect
+                [(ngModel)]="selectedNodes"
+                class="md:w-20rem w-full" containerStyleClass="w-full"
+                [options]="files"
+                placeholder="Select Item"
+                [showClear]="true"
+            >
+                <ng-template pTemplate="triggericon">
+                    <i class="pi pi-chevron-down"></i>
+                </ng-template>
+            </p-treeSelect> 
+        </div>
+        `
+    })
+};
+
+export const Invalid: Story = {
+    render: () => ({
+        ...storyConfigBase,
+        template: `
+        <div class="card flex justify-content-center w-25rem h-25rem">
+            <p-treeSelect
+                class="md:w-20rem w-full ng-invalid ng-dirty"
+                containerStyleClass="w-full"
+                [(ngModel)]="selectedNodes"
+                [options]="files"
+                placeholder="Select Item"
+                [showClear]="true"
+            >
+                <ng-template pTemplate="triggericon">
+                    <i class="pi pi-chevron-down"></i>
+                </ng-template>
+            </p-treeSelect> 
+        </div>
+        `
+    })
+};
+
+export const WithLabel: Story = {
+    render: () => ({
+        ...storyConfigBase,
+        template: `
+        <div class="card flex justify-content-center w-25rem h-25rem">
+            <span class="md:w-20rem w-full">
+                <label for="treeselect">Label</label>
+                <p-treeSelect
+                    containerStyleClass="w-full"
+                    [(ngModel)]="selectedNodes"
+                    [options]="files"
+                    placeholder="Select Item"
+                    [showClear]="true"
+                >
+                    <ng-template pTemplate="triggericon">
+                        <i class="pi pi-chevron-down"></i>
+                    </ng-template>
+                </p-treeSelect> 
+            </span>
+        </div>
+        `
+    })
+};
+
+export const WithFloatLabel: Story = {
+    render: () => ({
+        ...storyConfigBase,
+        template: `
+        <div class="card flex justify-content-center w-25rem h-25rem">
+            <div class="md:w-20rem w-full">
+                <span class="p-float-label w-full">
+                    <p-treeSelect
+                        containerStyleClass="w-full"
+                        [(ngModel)]="selectedNodes"
+                        [options]="files"
+                        placeholder="Select Item"
+                        [showClear]="true"
+                    >
+                        <ng-template pTemplate="triggericon">
+                            <i class="pi pi-chevron-down"></i>
+                        </ng-template>
+                    </p-treeSelect> 
+                    <label for="treeselect">Float Label</label>
+                </span>
+            </div>
+        </div>
+        `
+    })
+};
+
+export const Disable: Story = {
+    render: () => ({
+        ...storyConfigBase,
+        template: `
+        <div class="card flex justify-content-center w-25rem h-25rem">
+            <p-treeSelect
+                [disabled]="true"
+                [(ngModel)]="selectedNodes"
+                class="md:w-20rem w-full" containerStyleClass="w-full"
+                [options]="files"
+                placeholder="Select Item"
+                [showClear]="true"
+            >
+                <ng-template pTemplate="triggericon">
+                    <i class="pi pi-chevron-down"></i>
+                </ng-template>
+            </p-treeSelect> 
+        </div>
+        `
+    })
+};
+
+export const Multiple: Story = {
+    render: () => ({
+        ...storyConfigBase,
+        template: `  
+        <div class="card flex justify-content-center w-25rem h-25rem">
+            <p-treeSelect
+                class="w-full md:w-20rem"
+                containerStyleClass="w-full"
+                [(ngModel)]="selectedNodes"
+                [options]="files"
+                [metaKeySelection]="false"
+                selectionMode="multiple"
+                placeholder="Select Item"
+                [showClear]="true"
+            >
+                <ng-template pTemplate="triggericon">
+                    <i class="pi pi-chevron-down"></i>
+                </ng-template>
+            </p-treeSelect> 
+        </div>
+        `
+    })
+};
+
+export const Checkbox: Story = {
+    render: () => ({
+        ...storyConfigBase,
+        template: `  
+        <div class="card flex justify-content-center w-25rem h-25rem">
+            <p-treeSelect
+                class="w-full md:w-20rem"
+                containerStyleClass="w-full"
+                [(ngModel)]="selectedNodes"
+                [options]="files"
+                [showClear]="true"
+                display="chip"
+                [metaKeySelection]="false"
+                selectionMode="checkbox"
+                placeholder="Select Item"
+                [showClear]="true"
+            >
+                <ng-template pTemplate="triggericon">
+                    <i class="pi pi-chevron-down"></i>
+                </ng-template>
+            </p-treeSelect> 
+        </div>
+        `
+    })
+};
+
+export const Filter: Story = {
+    render: () => ({
+        ...storyConfigBase,
+        template: `  
+        <div class="card flex justify-content-center w-25rem h-25rem">
+            <p-treeSelect
+                class="md:w-20rem w-full"
+                containerStyleClass="w-full"
+                [(ngModel)]="selectedNodes"
+                [options]="files"
+                placeholder="Select Item"
+                [filter]="true"
+                [filterInputAutoFocus]="true"
+                [showClear]="true"
+            >
+                <ng-template pTemplate="triggericon">
+                    <i class="pi pi-chevron-down"></i>
+                </ng-template>
+                <ng-template pTemplate="filtericon">
+                    <i class="pi pi-search"></i>
+                </ng-template>
+                <ng-template pTemplate="closeicon">
+                    <i class="pi pi-times"></i>
+                </ng-template>
+            </p-treeSelect>
+        </div>
+        `
+    })
+};
diff --git a/core-web/libs/dotcms-scss/angular/dotcms-theme/components/_tree.scss b/core-web/libs/dotcms-scss/angular/dotcms-theme/components/_tree.scss
@@ -9,7 +9,7 @@
 }
 
 .p-tree .p-tree-container .p-treenode {
-    padding: 0.25rem;
+    padding: $spacing-0;
 }
 
 .p-tree .p-tree-container .p-treenode .p-treenode-content {