@sarasanalytics-com/design-system 0.0.3

package/src/stories/KitchenSink.stories.ts

@@ -0,0 +1,86 @@
+// 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

@@ -0,0 +1,45 @@
+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

@@ -0,0 +1,61 @@
+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

@@ -0,0 +1,74 @@
+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

@@ -0,0 +1,78 @@
+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

@@ -0,0 +1,234 @@
+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

@@ -0,0 +1,61 @@
+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"
+    }
+};
+