@sarasanalytics-com/design-system 0.0.43 → 0.0.45

package/src/stories/page-layout.stories.ts

@@ -1,200 +0,0 @@
-// page-layout.component.stories.ts
-
-import { Meta, StoryObj, moduleMetadata } from '@storybook/angular';
-import { PageLayoutComponent } from '../../projects/component-library/src/lib/page-layout/page-layout.component';
-import { ProgressBarComponent } from '../../projects/component-library/src/lib/progress-bar/progress-bar.component';
-
-const meta: Meta<PageLayoutComponent> = {
-  title: 'Layouts/Page Layout',
-  component: PageLayoutComponent,
-  decorators: [
-    moduleMetadata({
-      imports: [ProgressBarComponent],
-    }),
-  ],
-  tags: ['autodocs'],
-  argTypes: {
-    showRightContent: {
-      control: { type: 'boolean' },
-      description: 'Show/Hide Right Section',
-      defaultValue: true
-    },
-    showFooterContent: {
-      control: { type: 'boolean' },
-      description: 'Show/Hide Footer Section',
-      defaultValue: true
-    },
-    showProgressBarContent: {
-      control: { type: 'boolean' },
-      description: 'Show/Hide Progress Bar Section',
-      defaultValue: true
-    },
-  }
-};
-
-export default meta;
-type Story = StoryObj<PageLayoutComponent>;
-
-export const Default: Story = {
-  args: {
-    showRightContent: true,
-    showFooterContent: true,
-    showProgressBarContent: true
-  },
-  render: (args) => ({
-    props: {
-      ...args
-    },
-    template: `
-    <div style="height: 600px;">
-        <sa-page-layout [showRightContent]="showRightContent" [showFooterContent]="showFooterContent" [showProgressBarContent]="showProgressBarContent">
-        <div progress-bar-content>
-          <div class="progress-bar">
-            <sa-progress-bar [progressValue]="50" [borderRadius]="'10px'" [height]="'8px'"></sa-progress-bar>
-          </div>
-        </div>
-        <div top-content>
-            <sa-icon size='100' icon='sarasFullLogo' altText='S'></sa-icon>
-          </div>
-          <div left-content>
-            <h2>Left Content</h2>
-            <p>This is the main content area.</p>
-          </div>
-          <div right-content>
-            <h3>Right Sidebar</h3>
-            <p>Additional information or navigation can go here.</p>
-          </div>
-          <div footer-content>
-            <p>Footer Content</p>
-          </div>
-        </sa-page-layout>
-      </div>
-    `
-  })
-};
-
-export const WithoutRightSection: Story = {
-  args: {
-    showRightContent: false,
-    showFooterContent: false,
-    showProgressBarContent: true
-  },
-  render: (args) => ({
-    props: {
-      ...args,
-    },
-    template: `
-    <div style="height: 600px;">
-      <sa-page-layout [showRightContent]="showRightContent" [showFooterContent]="showFooterContent" [showProgressBarContent]="showProgressBarContent">
-        <div progress-bar-content>
-        <div class="progress-bar">
-          <sa-progress-bar [progressValue]="50" [borderRadius]="'10px'" [height]="'8px'"></sa-progress-bar>
-        </div>
-       </div>
-       <div top-content>
-          <sa-icon size='100' icon='sarasFullLogo' altText='S'></sa-icon>
-        </div>
-        <div left-content>
-          <h2>Full Width Content</h2>
-          <p>This content takes up the full width when there's no right section.</p>
-        </div>
-        <div footer-content>
-          <p>Footer Content</p>
-        </div>
-      </sa-page-layout>
-    </div>
-  `,
-  }),
-};
-
-export const CustomContent: Story = {
-  args: {
-    showRightContent: true,
-    showFooterContent: true,
-    showProgressBarContent: true
-  },
-  render: (args) => ({
-    props: {
-      ...args,
-    },
-    template: `
-    <div style="height: 600px;">  
-      <sa-page-layout [showRightContent]="showRightContent" [showFooterContent]="showFooterContent" [showProgressBarContent]="showProgressBarContent">
-        <div progress-bar-content>
-          <div class="progress-bar">
-            <sa-progress-bar [progressValue]="50" [borderRadius]="'10px'" [height]="'8px'"></sa-progress-bar>
-          </div>
-        </div>
-        <div top-content>
-            <sa-icon size='100' icon='sarasFullLogo' altText='S'></sa-icon>
-        </div>
-        <div left-content>
-          <h2>Custom Left Content</h2>
-          <ul>
-            <li>Item 1</li>
-            <li>Item 2</li>
-            <li>Item 3</li>
-          </ul>
-        </div>
-        <div right-content>
-          <h3>Custom Right Content</h3>
-          <button>Action Button</button>
-        </div>
-        <div footer-content>
-          <p>Footer Content</p>
-        </div>
-      </sa-page-layout>
-    </div>
-  `,
-  }),
-};
-
-
-export const WithoutProgressSection: Story = {
-  args: {
-    showRightContent: true,
-    showFooterContent: true,
-    showProgressBarContent: false
-  },
-  render: (args) => ({
-    props: {
-      ...args,
-    },
-    template: `
-    <div style="height: 100vh; padding: 2rem;">
-      <div
-      style="position: relative;border: 1px solid var(--grey-100, #EAECF0);background: var(--structural-white);box-shadow: 3px 4px 16px 4px rgba(0, 0, 0, 0.08);border-radius: var(--small-16px, 16px);overflow: hidden;">
-        <div style="position: absolute;top: 0;width: 100%;">
-          <sa-progress-bar [progressValue]="50" [borderRadius]="'10px'" [height]="'8px'"></sa-progress-bar>
-        </div>
-        <sa-page-layout [showRightContent]="showRightContent" [showFooterContent]="showFooterContent" [showProgressBarContent]="showProgressBarContent">
-          <div progress-bar-content>
-            <div class="progress-bar">
-              <sa-progress-bar [progressValue]="50" [borderRadius]="'10px'" [height]="'8px'"></sa-progress-bar>
-            </div>
-          </div>
-          <div top-content>
-              <sa-icon size='100' icon='sarasFullLogo' altText='S'></sa-icon>
-          </div>
-          <div left-content>
-            <h2>Custom Left Content</h2>
-            <ul>
-              <li>Item 1</li>
-              <li>Item 2</li>
-              <li>Item 3</li>
-            </ul>
-          </div>
-          <div right-content>
-            <h3>Custom Right Content</h3>
-            <button>Action Button</button>
-          </div>
-          <div footer-content>
-            <p>Footer Content</p>
-          </div>
-        </sa-page-layout>
-      </div>
-    </div>
-    
-  `,
-  }),
-}

package/src/stories/progress-bar.stories.ts

@@ -1,40 +0,0 @@
-// src/app/stories/ProgressBar.stories.ts
-
-import type { Meta, StoryObj } from '@storybook/angular';
-import { argsToTemplate } from '@storybook/angular';
-import { ProgressBarComponent } from '../../projects/component-library/src/lib/progress-bar/progress-bar.component';
-
-const meta: Meta<ProgressBarComponent> = {
-    title: 'Progress Bar',
-    component: ProgressBarComponent,
-    tags: ['autodocs'],
-    argTypes: {
-        progressValue: {
-            control: { type: 'range', min: 0, max: 100 },
-            description: 'Percentage completion from 0 to 100',
-            defaultValue: 10,
-        },
-        borderRadius: {
-            control: { type: 'text' },
-            description: 'Border radius of the bar',
-            defaultValue: '10px',
-        },
-        height: {
-            control: { type: 'text' },
-            description: 'Height of the bar',
-            defaultValue: '8px',
-        },
-    },
-}
-
-
-export default meta;
-type Story = StoryObj<ProgressBarComponent>;
-
-export const ProgressBar: Story = {
-    args: {
-        progressValue: 50,
-        borderRadius: '10px',
-        height: '8px',
-    },
-};

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

@@ -1,80 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/angular';
-import { RadioButtonComponent } from '../../projects/component-library/src/lib/radio-button/radio-button.component';
-import { ReactiveFormsModule } from '@angular/forms';
-import { FormlyForm, FormlyModule } from '@ngx-formly/core';
-import { moduleMetadata } from '@storybook/angular';
-
-const meta: Meta<RadioButtonComponent> = {
-    title: 'Radio Button',
-    component: RadioButtonComponent,
-    tags: ['autodocs'],
-    argTypes: {
-        options: {
-            control: { type: 'object' },
-        },
-        field: {
-            control: { type: 'object' },
-        },
-        model: {
-            control: { type: 'object' },
-        },
-    },
-    decorators: [
-        moduleMetadata({
-            imports: [ReactiveFormsModule,
-                FormlyModule.forRoot({
-                    types: [
-                        {
-                            name: 'sa-radio-button',
-                            component: RadioButtonComponent,
-                        },
-                    ],
-                })
-            ],
-
-        }),
-
-    ],
-    render: (args) => ({
-        props: {
-            ...args,
-            modelChangeHandler: (event: any) => {
-                console.log(event);
-            },
-        },
-        template: ` <form>
-        <formly-form 
-            [form]="form" 
-            [fields]="fields" 
-            [model]="model"
-            (modelChange)="modelChangeHandler($event)">
-        </formly-form>
-    </form>`
-    }),
-};
-
-export default meta;
-type Story = StoryObj<FormlyForm>;
-
-export const RadioButton: Story = {
-    args: {
-        fields: [
-            {
-                key: 'radio-select',
-                type: 'sa-radio-button',
-                props: {
-                    options: [
-                        { value: 'option1', label: 'We are a Brand' },
-                        { value: 'option2', label: 'Option 2' },
-                        { value: 'option3', label: 'We are an Agency' },
-                    ],
-                    label: 'Select an Option',
-                    column: false,
-                    description: 'Description here',
-                    helpText: 'HelpText here',
-                },
-            },
-        ],
-        model: { 'radio-select': 'option2' },
-    },
-};

package/src/stories/scrolling-card.stories.ts

@@ -1,36 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/angular';
-import { ScrollingCardsComponent } from "../../projects/component-library/src/lib/scrolling-cards/scrolling-cards.component";
-
-const meta: Meta<ScrollingCardsComponent> = {
-    title: 'Interactive Components/Scrolling Cards',
-    component: ScrollingCardsComponent,
-    tags: ['autodocs'],
-    argTypes: {
-        direction: {
-            control: 'select',
-            options: ['up', 'down', 'left', 'right'],
-        },
-        duration: {
-            control: 'number',
-        },
-    },
-};
-
-export default meta;
-
-type Story = StoryObj<ScrollingCardsComponent>;
-
-export const ScrollingCards: Story = {
-    args: {
-        cards: [
-            { title: 'Acquisition Marketer', body: 'Analyse channels have the most profitable customers & optimise our marketing ROI', icon: 'avatar' },
-            { title: 'Marketing Head', body: 'Analyse channels have the most profitable customers & optimise our marketing ROI', icon: 'avatar' },
-            { title: 'eCommerce Head', body: 'Analyse channels have the most profitable customers & optimise our marketing ROI', icon: 'avatar' },
-            // ... add more cards as needed
-        ],
-        duration: 30,
-        direction: 'up',
-    },
-};
-
-ScrollingCards.storyName = 'Scrolling Cards';

package/src/stories/selectInput.stories.ts

@@ -1,176 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/angular';
-import { argsToTemplate } from '@storybook/angular';
-import { moduleMetadata } from '@storybook/angular';
-import { ReactiveFormsModule } from '@angular/forms';
-import { FormlyForm, FormlyModule } from '@ngx-formly/core';
-import { FormSelectComponent } from '../../projects/component-library/src/lib/form-select/form-select.component';
-import { ButtonComponent } from '../../projects/component-library/src/public-api';
-import { SelectInterface } from '../../projects/component-library/src/interfaces/select-interface';
-
-const meta: Meta<FormlyForm> = {
-    title: 'Select Input',
-    component: FormlyForm,
-    tags: ['autodocs'],
-    decorators: [
-        moduleMetadata({
-            imports: [
-                FormlyModule,
-                FormSelectComponent,
-                ReactiveFormsModule,
-                ButtonComponent,
-                FormlyModule.forRoot({
-                    types: [
-                        {
-                            name: 'sa-select',                        // always use this `name` to reference component, otherwise storybook breaks. 
-                            component: FormSelectComponent,
-                        },
-                    ],
-                })
-            ],
-        }),
-    ],
-    argTypes: {
-        fields: {
-            description: [
-                "**This component is expected to be used with formly form.**",
-                "`Fields` is an array of objects. Each object (lets say `fieldObj`) represents a field in the form.",
-                "To use this component as a form field, set `type: 'sa-select'` in `fieldObj`.",
-                "`Key` represents the name of this field.",
-                "`props` is an object that will be used to pass data and configure this component.",
-                "**Please use `SelectInterface` to pass props.**"
-            ].join(" ")
-        },
-        model: {
-            description: [
-                "It is an object, each `key-value` pair represents a field.",
-                "`key` for the name of the field",
-                "`value` for default selections of that field."
-            ].join(" ")
-        },
-        modelChange: {
-            action: 'modelChange'
-        }
-    },
-    render: (args) => ({
-        props: {
-            ...args,
-        },
-        template: `    
-        <form>
-            <formly-form ${argsToTemplate(args)}>
-            </formly-form>
-        </form>
-        `
-    }),
-};
-
-
-
-const default_props: SelectInterface = {
-    options: [
-        { id: 1, name: 'One' },
-        { id: 2, name: 'Two' },
-        { id: 3, name: 'Three' },
-        { id: 4, name: 'Four' },
-        { id: 5, name: 'Five' },
-    ],
-    disabled: false,
-    params: {
-        label: 'Label',
-        supportText: "Supporting text",
-        dropIcon: '../assets/downChevronOutlined.svg',
-        dropIconPosition: "both",
-        multiple: true,
-        iconPath: "../assets/closeBlueOutlined.svg",
-        type: "regular",
-        state: "primary",
-        filling: "filled",
-        iconPosition: "left"
-    }
-}
-
-export default meta;
-type Story = StoryObj<FormlyForm>;
-export const Regular: Story = {
-    args: {
-        fields: [
-            {
-                key: 'Test',
-                type: 'sa-select',           // storybook breaks (change in params won't reflect in component) if `FormSelectComponent` is used.
-                props: {
-                    ...default_props,
-                    searchable: true
-                },
-            }
-        ],
-        model: {},
-    }
-};
-export const Non_Searchable_dropdown: Story = {
-    args: {
-        fields: [
-            {
-                key: 'Test',
-                type: 'sa-select',
-                props: {
-                    ...default_props,
-                    searchable: false
-                },
-            }
-        ],
-        model: {},
-    }
-};
-
-export const Disabled: Story = {
-    args: {
-        fields: [{
-            key: 'Test',
-            type: 'sa-select',
-            props: {
-                ...default_props,
-                disabled: true
-            }
-        }
-        ],
-        model: {}
-    }
-};
-
-export const Regular_Default_Value: Story = {
-    args: {
-        fields: [
-            {
-                key: 'Test',
-                type: 'sa-select',
-                props: default_props,
-            }
-        ],
-        model: {
-            "Test": [{
-                "id": 1,
-                "name": "One"
-            }]
-        },
-    }
-};
-
-export const Disabled_Default_Value: Story = {
-    args: {
-        fields: [{
-            key: 'Test',
-            type: 'sa-select',
-            props: {
-                ...default_props,
-                disabled: true
-            }
-        }
-        ],
-        model: {
-            "Test": [{
-                "id": 1,
-                "name": "One"
-            }]
-        }
-    }
-};

package/src/stories/stepper.stories.ts

@@ -1,92 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/angular';
-import { argsToTemplate } from '@storybook/angular';
-import { moduleMetadata } from '@storybook/angular';
-import { ReactiveFormsModule } from '@angular/forms';
-import { FormlyForm, FormlyModule } from '@ngx-formly/core';
-import { StepperComponent } from '../../projects/component-library/src/lib/stepper/stepper.component';
-
-const meta: Meta<FormlyForm> = {
-    title: 'Stepper',
-    component: FormlyForm,
-    tags: ['autodocs'],
-    decorators: [
-        moduleMetadata({
-            imports: [
-                FormlyModule,
-                StepperComponent,
-                ReactiveFormsModule,
-                FormlyModule.forRoot({
-                    types: [
-                        {
-                            name: 'sa-stepper',                        // always use this `name` to reference component, otherwise storybook breaks. 
-                            component: StepperComponent,
-                        },
-                    ],
-                })
-            ],
-        }),
-    ],
-    argTypes: {
-        modelChange: {
-            action: 'modelChange'
-        }
-    },
-    render: (args) => ({
-        props: {
-            ...args,
-        },
-        template: `    
-        <form>
-            <formly-form ${argsToTemplate(args)}>
-            </formly-form>
-        </form>
-        `
-    }),
-};
-
-
-const default_props = {
-    disabled: false,
-    options: [
-        { id: 0, name: 'Zero' },
-        { id: 1, name: 'One' },
-        { id: 2, name: 'Two' },
-        { id: 3, name: 'Three' },
-    ],
-    params: {
-        editable: true,
-        doneIcon: "../assets/checkOutlined.svg"
-    }
-}
-
-export default meta;
-type Story = StoryObj<FormlyForm>;
-export const Default: Story = {
-    args: {
-        model: {},
-        fields: [
-            {
-                key: 'Test-stepper',
-                type: 'sa-stepper',           // storybook breaks (change in params won't reflect in component) if `StepperComponent` is used.
-                props: default_props,
-            }
-        ]
-    }
-};
-
-export const Default_selection: Story = {
-    args: {
-        model: {
-            "Test-stepper": {
-                "id": 2,
-            }
-        },
-        fields: [
-            {
-                key: 'Test-stepper',
-                type: 'sa-stepper',
-                props: default_props,
-            }
-        ]
-    }
-};