@sarasanalytics-com/design-system 0.0.3 → 0.0.4

package/src/stories/KitchenSink.stories.ts

@@ -1,86 +0,0 @@
-// parent.component.stories.ts
-import { moduleMetadata, StoryFn, Meta } from '@storybook/angular';
-import { KitchenSinkComponent } from '../app/kitchen-sink/kitchen-sink.component';
-import { AvatarComponent } from '../../projects/component-library/src/public-api';
-import { ChipsComponent } from '../../projects/component-library/src/public-api';
-import { ButtonComponent } from '../../projects/component-library/src/public-api';
-
-export default {
-    title: 'Kitchen Sink',
-    component: KitchenSinkComponent,
-    decorators: [
-        moduleMetadata({
-            imports: [KitchenSinkComponent],
-        }),
-    ],
-    argTypes: {
-        inputComponent: { control: 'object' },
-    },
-} as Meta;
-
-const Template: StoryFn<KitchenSinkComponent> = (args: KitchenSinkComponent) => ({
-    props: args,
-});
-
-export const _Avatar = Template.bind({});
-export const _Button = Template.bind({});
-export const _Chip = Template.bind({});
-
-_Avatar.args = {
-    inputComponent: AvatarComponent,
-    params: [
-        ["../assets/avatar.svg", ""],
-        ["extra-small", "small", "medium", "large", "extra-large"],
-        ["AB"]
-    ],
-    paramTypes: ["imagePath", "size", "altText"]
-};
-
-_Button.args = {
-    inputComponent: ButtonComponent,
-    params: [
-        ["primary", "outline", "transparent"],
-        ["default", "error", "disabled"],
-        ["small", "medium", "large"],
-        ["Button"],
-        ["../assets/Sources.svg"],
-        ["both", "left", "right"],
-        ["https://sarasanalytics.com"],
-        ["self"]
-    ],
-    paramTypes: [
-        "type",
-        "state",
-        "size",
-        "text",
-        "ImagePath",
-        "iconPosition",
-        "href",
-        "hrefTarget"
-    ]
-}
-
-
-_Chip.args = {
-    inputComponent: ChipsComponent,
-    params: [
-        ["regular", "small", "large"],
-        ["primary", "secondary", "neutral", "success", "error", "warning"],
-        ["filled", "outline"],
-        ["Chip text"],
-        ["../assets/Frame.svg"],
-        ["both", "left", "right"],
-        ["../assets/dot.svg"],
-        ["Good"],
-    ],
-    paramTypes: [
-        "type",
-        "state",
-        "filling",
-        "text",
-        "iconPath",
-        "iconPosition",
-        "largeStateIcon",
-        "largeStateText"
-    ]
-};

package/src/stories/avatar.stories.ts

@@ -1,45 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/angular';
-import { argsToTemplate } from '@storybook/angular';
-import { AvatarComponent } from '../../projects/component-library/src/lib/avatar/avatar.component';
-
-const meta: Meta<AvatarComponent> = {
-    title: 'Avatar',
-    component: AvatarComponent,
-    tags: ['autodocs'],
-    argTypes: {
-        size: {
-            options: ['extra-small', 'small', 'medium', 'large', 'extra-large'],
-            control: { type: 'radio' },
-        },
-        altText: {
-            description: "Alternate text that should be displayed if image doesn't exist or is broken"
-        },
-        onClickEvent: {
-            action: "onClickEvent"
-        },
-        onMouseInEvent: {
-            action: "onMouseInEvent"
-        },
-        onMouseOutEvent: {
-            action: "onMouseOutEvent"
-        },
-    },
-    render: (args) => ({
-        props: {
-            ...args,
-        },
-        template: `<sa-avatar ${argsToTemplate(args)}></sa-avatar>`
-    }),
-};
-
-export default meta;
-type Story = StoryObj<AvatarComponent>;
-
-
-export const Avatar: Story = {
-    args: {
-        size: "medium",
-        imagePath: "../assets/avatar.svg",
-        altText: "AB"
-    }
-};

package/src/stories/chips.stories.ts

@@ -1,61 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/angular';
-import { argsToTemplate } from '@storybook/angular';
-import { ChipsComponent } from '../../projects/component-library/src/lib/chips/chips.component';
-
-
-const meta: Meta<ChipsComponent> = {
-    title: 'Chips',
-    component: ChipsComponent,
-    tags: ['autodocs'],
-    argTypes: {
-        largeStateIcon: {
-            description: "This icon will be used when type is set to `large`.",
-        },
-        largeStateText: {
-            description: "This text will be used next to `text` when type is set to `large`."
-        },
-        type: {
-            options: ['regular', 'small', 'large'],
-            control: { type: 'radio' },
-        },
-        state: {
-            options: ['primary', 'secondary', 'neutral', 'error', 'warning', 'success'],
-            control: { type: 'radio' },
-        },
-        filling: {
-            options: ['outline', 'filled'],
-            control: { type: 'radio' },
-        },
-        iconPosition: {
-            description: "`''` renders no icon",
-            options: ['left', 'right', 'both', ''],
-            control: { type: 'radio' },
-        },
-        onClickEvent: {
-            action: "onClickEvent"
-        },
-    },
-    render: (args) => ({
-        props: {
-            ...args,
-        },
-        template: `<sa-chip ${argsToTemplate(args)}></sa-chip>`
-    }),
-};
-
-export default meta;
-type Story = StoryObj<ChipsComponent>;
-
-
-export const chips: Story = {
-    args: {
-        iconPath: "../assets/Frame.svg",
-        text: "Chip text",
-        type: "regular",
-        state: "success",
-        filling: "outline",
-        iconPosition: "both",
-        largeStateIcon: "../assets/dot.svg",
-        largeStateText: "Good",
-    }
-};

package/src/stories/custom-button.stories.ts

@@ -1,74 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/angular';
-import { argsToTemplate } from '@storybook/angular';
-import { ButtonComponent } from '../../projects/component-library/src/lib/button/button.component';
-
-const meta: Meta<ButtonComponent> = {
-    title: 'Button',
-    component: ButtonComponent,
-    tags: ['autodocs'],
-    argTypes: {
-        href: {
-            description: "Button redirects to the link given here."
-        },
-        type: {
-            options: ['primary', 'outline', 'transparent'],
-            control: { type: 'radio' },
-        },
-        size: {
-            options: ['small', 'medium', 'large'],
-            control: { type: 'radio' },
-        },
-        state: {
-            options: ['default', 'error', 'disabled'],
-            control: { type: 'radio' },
-        },
-        iconPosition: {
-            description: "`''` renders no icon",
-            options: ['left', 'right', 'both', ''],
-            control: { type: 'radio' },
-        },
-        hrefTarget: {
-            options: ['blank', 'self'],
-            control: { type: 'radio' },
-            description: "Specifies where the `href` should be opened. (same tab or different tab)."
-        },
-        isSubmit: {
-            options: [true, false],
-            control: { type: 'boolean' },
-            description: "Setting this `True`, Button will act as a submit button inside a form."
-        },
-        onClickEvent: {
-            action: "onClickEvent"
-        },
-        onMouseInEvent: {
-            action: "onMouseInEvent"
-        },
-        onMouseOutEvent: {
-            action: "onMouseOutEvent"
-        },
-    },
-    render: (args) => ({
-        props: {
-            ...args,
-        },
-        template: `<sa-button ${argsToTemplate(args)}></sa-button>`
-    }),
-};
-
-export default meta;
-type Story = StoryObj<ButtonComponent>;
-
-
-export const default_button: Story = {
-    args: {
-        id: 1,
-        text: "Button",
-        type: "primary",
-        size: "medium",
-        state: "default",
-        ImagePath: "../assets/Sources.svg",
-        iconPosition: "both",
-        href: "",
-        hrefTarget: "blank",
-    }
-};

package/src/stories/datepicker.stories.ts

@@ -1,78 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/angular';
-import { argsToTemplate } from '@storybook/angular';
-import { DatepickerComponent } from '../../projects/component-library/src/lib/datepicker/datepicker.component';
-import { MatFormFieldModule } from '@angular/material/form-field';
-import { MatInputModule } from '@angular/material/input';
-import { MatDatepickerModule } from '@angular/material/datepicker';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { moduleMetadata } from '@storybook/angular';
-import { CalendarHeaderComponent } from '../../projects/component-library/src/lib/calendar-header/calendar-header.component';
-import { MatIcon } from '@angular/material/icon';
-
-const meta: Meta<DatepickerComponent> = {
-    title: 'Datepicker',
-    component: DatepickerComponent,
-    tags: ['autodocs'],
-    decorators: [
-        moduleMetadata({
-            imports: [
-                MatFormFieldModule,
-                MatInputModule,
-                MatDatepickerModule,
-                BrowserAnimationsModule,
-                CalendarHeaderComponent,
-                MatIcon
-            ]
-        }),
-    ],
-    render: (args) => ({
-        props: {
-            ...args,
-        },
-        template: `<sa-datepicker ${argsToTemplate(args)}></sa-datepicker>`
-    }),
-};
-
-export default meta;
-type Story = StoryObj<DatepickerComponent>;
-
-
-export const datepicker: Story = {
-    args: {
-    }
-};
-
-// import type { Meta, StoryObj } from '@storybook/angular';
-// import { moduleMetadata } from '@storybook/angular';
-// import { DatepickerComponent } from '../../projects/component-library/src/lib/datepicker/datepicker.component';
-// import { MatFormFieldModule } from '@angular/material/form-field';
-// import { MatInputModule } from '@angular/material/input';
-// import { MatDatepickerModule } from '@angular/material/datepicker';
-// import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-
-
-// export default {
-//     title: 'Datepicker',
-//     component: DatepickerComponent,
-//     decorators: [
-//         moduleMetadata({
-//             declarations: [],
-//             imports: [
-//                 MatFormFieldModule,
-//                 MatInputModule,
-//                 MatDatepickerModule,
-//                 BrowserAnimationsModule,
-//             ],
-//         })
-//     ]
-// } as Meta;
-
-// const Template: any = (args: DatepickerComponent) => ({
-//     props: args,
-// });
-
-// export const Primary = Template.bind({});
-// Primary.args = {
-//     start: new Date(),
-//     end: new Date()
-// };

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/Scan.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/Frame.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/Sources.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/Person.svg"],
-            ["Info Text 2", "../assets/Location.svg"],
-            ["Info Text 3", "../assets/Mail.svg"]
-        ],
-        buttonMain: "+ Button",
-        buttonHelper: "Helper",
-        headerName: "Header"
-    }
-};
-
-export const With_Chips: Story = {
-    args: {
-        info: [
-            ["Info Text 1", "../assets/Person.svg"],
-            ["Info Text 2", "../assets/Location.svg"],
-            ["Info Text 3", "../assets/Mail.svg"]
-        ],
-        chipConfig: [
-            ["Chip 1", "success"],
-            ["Chip 2", "warning"],
-            ["Chip 3", "error"],
-        ],
-        buttonMain: "+ Button",
-        buttonHelper: "Helper",
-        headerName: "Header"
-    }
-};
-