@sarasanalytics-com/design-system 0.0.43 → 0.0.44

package/src/stories/gridCell.stories.ts

@@ -1,234 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/angular';
-import { argsToTemplate } from '@storybook/angular';
-import { GridInterface } from '../../projects/component-library/src/public-api';
-import { GridCellComponent } from '../../projects/component-library/src/public-api';
-import { moduleMetadata } from '@storybook/angular';
-import { AgGridAngular, AgGridModule } from 'ag-grid-angular';
-
-
-const meta: Meta<AgGridAngular> = {
-    title: 'GridCell',
-    component: AgGridAngular,
-    tags: ['autodocs'],
-    decorators: [
-        moduleMetadata({ imports: [GridCellComponent, AgGridAngular, AgGridModule], }),
-    ],
-    argTypes: {
-        rowData: {
-            description: [
-                "An array of objects.",
-                "Each object in this array (lets call it `rowObj`) represents a row.",
-                "The `keys` in `rowObj` takes the same name (lets call it `colName`) as columns in that row,",
-                "and the values take `GridInterface` object describing how that cell is rendered and with what content.",
-                "**Please use `GridInterface` to configure cells**."
-            ].join(" ")
-        },
-        columnDefs: {
-            description: [
-                "An array of objects. Each object represents a column.",
-                "The `field` attribute in this object must be same as `colName`(from `rowData`).",
-                "`CellRenderer` should be set to `GridCellComponent`.",
-                "Remaining parameters are common to general ag-grid configuration."
-            ].join(" ")
-        }
-    },
-    render: (args) => ({
-        props: {
-            ...args,
-        },
-        template: `    
-        <ag-grid-angular
-            style="height: 300px;"
-            [rowHeight]=50
-            [headerHeight]=44
-            [suppressCellFocus]=true
-            ${argsToTemplate(args)}>
-        </ag-grid-angular>
-        `
-    }),
-};
-
-export default meta;
-type Story = StoryObj<AgGridAngular>;
-
-const params: GridInterface = {
-    cellType: '',
-    viewText: false,
-    viewLeadingIcon: false,
-    viewTrailingIcon: false,
-    viewButton: false,
-    viewChip: false,
-    viewAvatar: false,
-}
-
-const default_colDef = [{
-    field: "TestField",
-    headerComponentParams: {
-        ...params,
-        text: "Cell Text",
-        cellType: "header",
-        viewText: true
-    },
-    resizable: false,
-    headerComponent: GridCellComponent,
-    cellRenderer: GridCellComponent,
-}]
-
-export const Regular: Story = {
-    args: {
-        rowData: [{
-            TestField: {
-                ...params,
-                viewText: true,
-                cellType: 'row',
-                text: 1,
-            }
-        },
-        {
-            TestField: {
-                ...params,
-                viewText: true,
-                cellType: 'row',
-                text: 2,
-            }
-        }],
-        columnDefs: default_colDef
-    }
-};
-
-export const Numeric: Story = {
-    args: {
-        rowData: [{
-            TestField: {
-                ...params,
-                viewText: true,
-                cellType: 'numeric',
-                text: 1,
-            },
-        }],
-        columnDefs: default_colDef
-    }
-};
-
-export const Text_SubText: Story = {
-    args: {
-        rowData: [{
-            TestField: {
-                ...params,
-                viewText: true,
-                cellType: "row",
-                text: "Nithish",
-                subText: "Developer",
-            },
-        }],
-        columnDefs: default_colDef
-    }
-};
-
-
-export const leadingIcon: Story = {
-    args: {
-        rowData: [{
-            TestField: {
-                ...params,
-                viewText: true,
-                viewLeadingIcon: true,
-                iconPath: '../assets/targetScanOutlined.svg',
-                cellType: 'Row',
-                text: "Cell Name",
-            },
-        }],
-        columnDefs: default_colDef
-    }
-};
-
-export const Chip: Story = {
-    args: {
-        rowData: [{
-            TestField: {
-                ...params,
-                viewChip: true,
-                cellType: 'Row',
-                chipConfig: [
-                    {
-                        id: 0,
-                        text: "Chip text",
-                        type: 'primary',
-                        state: 'regular',
-                        filling: 'filled',
-                        iconPath: '../assets/closeBlueOutlined.svg',
-                        iconPosition: 'left',
-                        largeStateIcon: '',
-                        largeStateText: '',
-                    }
-                ],
-                chipClicked: (evt: Event) => {
-                    console.log(evt);
-                }
-            },
-        }],
-        columnDefs: default_colDef
-    }
-};
-
-export const Interactive: Story = {
-    args: {
-        rowData: [{
-            TestField: {
-                ...params,
-                viewText: true,
-                cellType: 'interactive',
-                interactiveLink: '',
-                interactiveLinkTarget: 'blank',
-                text: "Cell Name",
-            },
-        }],
-        columnDefs: default_colDef
-    }
-};
-
-export const Button: Story = {
-    args: {
-        rowData: [{
-            TestField: {
-                ...params,
-                viewButton: true,
-                cellType: 'Row',
-                buttonConfig: {
-                    id: 0,
-                    type: 'primary',
-                    state: 'default',
-                    size: 'small',
-                    text: 'Button',
-                    imagePath: '../assets/sourcesOutlined.svg',
-                    iconPosition: 'right',
-                    href: "",
-                    hrefTarget: 'blank',
-                }
-            },
-        }],
-        columnDefs: default_colDef
-    }
-};
-
-export const Avatar: Story = {
-    args: {
-        rowData: [{
-            TestField: {
-                ...params,
-                viewText: true,
-                cellType: "row",
-                avatarConfig: {
-                    id: 0,
-                    size: 'small',
-                    imagePath: '../assets/avatar.svg',
-                    altText: 'AB'
-                },
-                viewAvatar: true,
-                text: "Nithish",
-                subText: "Developer",
-            },
-        }],
-        columnDefs: default_colDef
-    }
-};

package/src/stories/header.stories.ts

@@ -1,61 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/angular';
-import { argsToTemplate } from '@storybook/angular';
-import { HeaderComponent } from '../../projects/component-library/src/lib/header/header.component';
-
-const meta: Meta<HeaderComponent> = {
-    title: 'Header',
-    component: HeaderComponent,
-    tags: ['autodocs'],
-    argTypes: {
-        mainButtonClicked: {
-            action: "mainButtonClicked"
-        },
-        helperButtonClicked: {
-            action: "helperButtonClicked"
-        },
-        info: {
-            description: "Two dimensional array of strings containing label and it's icon address."
-        }
-    },
-    render: (args) => ({
-        props: {
-            ...args,
-        },
-        template: `<sa-header ${argsToTemplate(args)}></sa-header>`
-    }),
-};
-
-export default meta;
-type Story = StoryObj<HeaderComponent>;
-
-export const Default: Story = {
-    args: {
-        info: [
-            ["Info Text 1", "../assets/personOutlined.svg"],
-            ["Info Text 2", "../assets/locationOutlined.svg"],
-            ["Info Text 3", "../assets/mailOutlined.svg"]
-        ],
-        buttonMain: "+ Button",
-        buttonHelper: "Helper",
-        headerName: "Header"
-    }
-};
-
-export const With_Chips: Story = {
-    args: {
-        info: [
-            ["Info Text 1", "../assets/personOutlined.svg"],
-            ["Info Text 2", "../assets/locationOutlined.svg"],
-            ["Info Text 3", "../assets/mailOutlined.svg"]
-        ],
-        chipConfig: [
-            ["Chip 1", "success"],
-            ["Chip 2", "warning"],
-            ["Chip 3", "error"],
-        ],
-        buttonMain: "+ Button",
-        buttonHelper: "Helper",
-        headerName: "Header"
-    }
-};
-

package/src/stories/icon.stories.ts

@@ -1,65 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/angular';
-import { argsToTemplate, moduleMetadata } from '@storybook/angular';
-import { IconComponent } from '../../projects/component-library/src/lib/icon/icon.component';
-import { HttpClientModule } from '@angular/common/http';
-import { IconService } from '../../projects/component-library/src/lib/icon/icon.service';
-import { iconNames } from '../../projects/component-library/src/public-api';
-
-const meta: Meta<IconComponent> = {
-    title: 'Icon',
-    component: IconComponent,
-    tags: ['autodocs'],
-    decorators: [
-        moduleMetadata({
-            imports: [HttpClientModule],
-            providers: [IconService],
-        }),
-    ],
-    argTypes: {
-        icon: {
-            control: 'select',
-            options: [...iconNames],
-            defaultValue: 'headsetOutlined',
-            description: "Svg icon name"
-        },
-        iconUrl: {
-            control: { type: 'text', },
-            description: "Svg icon web url"
-        },
-        size: {
-            options: ['22', '24', '36', '48'],
-            control: { type: 'radio' },
-            defaultValue: "22"
-        },
-    },
-    render: (args: IconComponent) => ({
-        props: {
-            ...args,
-        },
-        template: `<sa-icon ${argsToTemplate(args)}></sa-icon>`
-    }),
-};
-
-export default meta;
-type Story = StoryObj<IconComponent>;
-
-
-export const defaultIcon: Story = {
-    args: {
-        icon: 'avatar',
-        size: "22",
-    }
-};
-
-export const icon_with_url: Story = {
-    args: {
-        iconUrl: 'https://cdn.prod.website-files.com/672882dbaf15942b1d3d3da7/67288fc322cd2acbd8423e74_Consolidation.svg',
-    }
-};
-
-export const Icon_with_path: Story = {
-    args: {
-        size: "22",
-        iconPath: "/assets/avatar.svg"
-    }
-};

package/src/stories/leftnav.stories.ts

@@ -1,67 +0,0 @@
-import { Meta, StoryObj } from '@storybook/angular';
-import { LeftNavComponent, ILeftNav, ILeftNavItem } from '../../projects/component-library/src/lib/left-nav/left-nav.component';
-import { Router, ActivatedRoute } from '@angular/router';
-import { moduleMetadata } from '@storybook/angular';
-import { of } from 'rxjs';
-import { HttpClientModule } from '@angular/common/http';
-import { IconService } from '../../projects/component-library/src/lib/icon/icon.service';
-
-const mockRouter = {
-    navigate: (path: string[]) => console.log('Navigated to:', path)
-};
-
-const mockActivatedRoute = {
-    snapshot: {
-        params: {}
-    },
-    params: of({})
-};
-
-const meta: Meta<LeftNavComponent> = {
-    title: 'LeftNav',
-    component: LeftNavComponent,
-    decorators: [
-        moduleMetadata({
-            imports: [HttpClientModule],
-            providers: [
-                IconService,
-                { provide: Router, useValue: mockRouter },
-                { provide: ActivatedRoute, useValue: mockActivatedRoute }
-            ]
-        })
-    ],
-    tags: ['autodocs'],
-    argTypes: {
-        clickEvent: { action: 'clickEvent' },
-        data: {
-            control: { type: 'object' }
-        },
-    },
-    render: (args) => ({
-        props: {
-            ...args,
-            clickEvent: args.clickEvent,
-        },
-        template: `<sa-left-nav [data]="data" (clickEvent)="clickEvent($event)"></sa-left-nav>`
-    }),
-};
-
-export default meta;
-type Story = StoryObj<LeftNavComponent>;
-
-export const Default: Story = {
-    args: {
-        data: {
-            items: [
-                { title: 'Home', icon: 'homeOutlined', disable: false, path: 'home', active: true },
-                { title: 'Pricing', icon: 'pricingIcon', disable: false, path: 'reports', active: false },
-                { title: 'Settings', icon: 'settingsOutlined', disable: false, path: 'settings', active: false }
-            ],
-            footerItems: [
-                { title: 'Help', icon: 'chatHelpOutlined', disable: true, type: 'ICON', tooltip: "coming soon" },
-                { title: 'Profile', icon: 'AVATAR', disable: false, type: 'AVATAR' },
-                { title: 'Chevron', icon: 'doublechevron', disable: true, type: 'ICON' }
-            ]
-        } as ILeftNav
-    }
-};

package/src/stories/message-banner.stories.ts

@@ -1,116 +0,0 @@
-import { Meta, StoryObj } from '@storybook/angular';
-import { MessageBannerComponent } from '../../projects/component-library/src/lib/message-banner/message-banner.component';
-import { buttonPosition, buttonSizes, buttonType, iconNames } from '../../projects/component-library/src/public-api';
-
-const meta: Meta<MessageBannerComponent> = {
-    title: 'MessageBanner',
-    component: MessageBannerComponent,
-    tags: ['autodocs'],
-    render: (args: MessageBannerComponent) => ({
-        props: {
-            ...args,
-        },
-        template: `
-      <sa-message-banner [type]="type" [bannerIcon]="bannerIcon" [bannerIconSize]="bannerIconSize" [actionText]="actionText" [buttonIcon]="buttonIcon" [buttonIconPosition]="buttonIconPosition" [buttonSize]="buttonSize" [buttonType]="buttonType"
-      [buttonIconSize]="buttonIconSize" [onAction]="onAction">
-        {{ content }}
-      </sa-message-banner>
-    `,
-    }),
-    argTypes: {
-        type: {
-            control: 'select',
-            options: ['success', 'warning', 'info', 'error'],
-        },
-        actionText: {
-            control: 'text',
-            defaultValue: 'Learn more'
-        },
-        bannerIcon: {
-            control: 'select',
-            options: [...iconNames]
-        },
-        bannerIconSize: {
-            control: 'text',
-            defaultValue: '24'
-        },
-        buttonIcon: {
-            control: 'select',
-            options: [...iconNames]
-        },
-        buttonType: {
-            control: 'select',
-            options: [...buttonType]
-        },
-        buttonIconPosition: {
-            control: 'select',
-            options: [...buttonPosition]
-        },
-        buttonSize: {
-            control: 'select',
-            options: [...buttonSizes]
-        },
-        buttonIconSize: {
-            options: ['16', '22', '24', '36', '48'],
-            control: { type: 'radio' },
-            defaultValue: "22"
-        },
-        onAction: { action: 'onAction' },
-    },
-};
-
-export default meta;
-type Story = StoryObj<MessageBannerComponent>;
-
-export const Success: Story = {
-    args: {
-        type: 'info',
-        bannerIcon: 'infoCircleOutlined',
-        bannerIconSize: '28',
-        buttonIcon: 'headsetOutlined',
-        buttonType: 'transparent',
-        buttonSize: 'medium',
-        buttonIconPosition: 'left',
-        buttonIconSize: '24',
-        content: 'Oh ho! Some recommended sources needed for your selected features aren\'t connected',
-        actionText: 'Learn more',
-    },
-};
-
-export const Info: Story = {
-    args: {
-        type: 'info',
-        content: 'Stay tuned—we\'ll keep you updated via email and let you know the moment your dashboards are ready',
-    },
-};
-
-export const Warning: Story = {
-    args: {
-        type: 'warning',
-        content: 'Unsure which features to select? No worries—we\'re here to assist you!',
-        actionText: 'Schedule a call',
-        buttonIcon: 'headsetOutlined'
-    },
-};
-
-export const Error: Story = {
-    args: {
-        type: 'error',
-        content: 'Brand name will be used consistently throughout Pulse; please enter a name that is most appropriate',
-    },
-};
-
-export const InfoWithAction: Story = {
-    args: {
-        type: 'info',
-        bannerIcon: 'infoCircleOutlined',
-        bannerIconSize: '28',
-        buttonIcon: 'headsetOutlined',
-        buttonType: 'outline',
-        buttonSize: 'small',
-        buttonIconPosition: 'left',
-        buttonIconSize: '16',
-        content: 'To speed up your onboarding, please have your required data source credentials handy',
-        actionText: 'Learn more',
-    },
-};