@sarasanalytics-com/design-system 0.0.3 → 0.0.4

package/src/stories/selectInput.stories.ts

@@ -1,158 +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/Chevron.svg',
-        dropIconPosition: "both",
-        multiple: true,
-        iconPath: "../assets/Frame.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,
-            }
-        ],
-        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/tick-icon.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,
-            }
-        ]
-    }
-};

package/src/stories/tabs.stories.ts

@@ -1,97 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/angular';
-import { argsToTemplate } from '@storybook/angular';
-import { TabsComponent } from '../../projects/component-library/src/lib/tabs/tabs.component';
-import { TabInterface } from '../../projects/component-library/src/interfaces/tab-interface';
-
-const meta: Meta<TabsComponent> = {
-    title: 'Tabs',
-    component: TabsComponent,
-    tags: ['autodocs'],
-    argTypes: {
-        tabs: {
-            description: [
-                "array of `TabInterface` objects. Each one to configure one tab."
-            ].join(" ")
-        },
-        type: {
-            options: ['inline', 'box'],
-            control: { type: 'radio' }
-        },
-        tabChanged: {
-            action: "tabChanged"
-        }
-    },
-    render: (args) => ({
-        props: {
-            ...args,
-        },
-        template: `<sa-tabs ${argsToTemplate(args)}></sa-tabs>`
-    }),
-};
-
-export default meta;
-type Story = StoryObj<TabsComponent>;
-
-const tabs: TabInterface[] = [
-    {
-        tabName: "Tab 1",
-        tabIcon: "../assets/Sources.svg",
-        iconPosition: "left",
-        badgeContent: "3 new",
-    },
-    {
-        tabName: "Tab 2",
-        tabIcon: "../assets/Grid.svg",
-        iconPosition: "left",
-        badgeContent: "9 new",
-    },
-    {
-        tabName: "Tab 3",
-        tabIcon: "../assets/warningmark.svg",
-        iconPosition: "left",
-        badgeContent: "17 new",
-    },
-    {
-        tabName: "Tab 4",
-        tabIcon: "../assets/Person.svg",
-        iconPosition: "left",
-    },
-    {
-        tabName: "Tab 5",
-        tabIcon: "../assets/Mail.svg",
-        badgeContent: "6 new",
-        iconPosition: "left",
-    }
-];
-
-export const Inline_tabs_default: Story = {
-    args: {
-        tabs: tabs,
-        type: "inline",
-        defaultTab: -1,
-    }
-};
-
-export const inline_tabs_selected: Story = {
-    args: {
-        tabs: tabs,
-        defaultTab: 2,
-        type: "inline"
-    }
-};
-
-export const box_tabs_default: Story = {
-    args: {
-        tabs: tabs,
-        type: "box"
-    }
-};
-
-export const box_tabs_selected: Story = {
-    args: {
-        tabs: tabs,
-        defaultTab: 2,
-        type: "box"
-    }
-};
-

package/src/stories/toast.stories.ts

@@ -1,54 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/angular';
-import { argsToTemplate } from '@storybook/angular';
-import { ToastComponent } from '../../projects/component-library/src/lib/toast/toast.component';
-import { min } from 'rxjs';
-
-const meta: Meta<ToastComponent> = {
-    title: 'Toast',
-    component: ToastComponent,
-    tags: ['autodocs'],
-    argTypes: {
-        firstButton: {
-            action: "firstButton"
-        },
-        secondButton: {
-            action: "secondButton"
-        },
-        closed: {
-            action: "closed"
-        },
-        status: {
-            options: ['positive', 'negative', 'tentative'],
-            control: { type: 'radio' }
-        },
-        finishPercentage: {
-            control: {
-                type: 'range',
-                min: -10,
-                max: 100,
-                step: 1,
-            }
-        }
-    },
-    render: (args) => ({
-        props: {
-            ...args,
-        },
-        template: `<sa-toast ${argsToTemplate(args)}></sa-toast>`
-    }),
-};
-
-export default meta;
-type Story = StoryObj<ToastComponent>;
-
-export const toast: Story = {
-    args: {
-        heading: 'Heading',
-        subHeading: 'Subheading text',
-        status: 'positive',
-        statusIcon: "../assets/warningmark.svg",
-        finishPercentage: 30,
-        firstButtonName: "Button",
-        secondButtonName: "Button",
-    }
-};

package/src/stories/tool-tip.stories.ts

@@ -1,45 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/angular';
-import { argsToTemplate } from '@storybook/angular';
-import { ToolTipComponent } from '../../projects/component-library/src/public-api';
-
-
-const meta: Meta<ToolTipComponent> = {
-    title: 'ToolTip',
-    component: ToolTipComponent,
-    tags: ['autodocs'],
-    argTypes: {
-        pointerPosition: {
-            options: ['left', 'right', 'top', 'bottom'],
-            control: { type: 'radio' }
-        },
-        toolTipSeen: {
-            action: "toolTipSeen"
-        },
-        toolTipSkipped: {
-            action: "toolTipSkipped"
-        }
-    },
-    render: (args) => ({
-        props: {
-            ...args,
-        },
-        template: `<sa-tool-tip ${argsToTemplate(args)}></sa-tool-tip>`
-    }),
-};
-
-export default meta;
-type Story = StoryObj<ToolTipComponent>;
-
-const messages: string[] = [
-    "This first line can act as the subheading of this onboarding tooltip",
-    "This second line can act as the subheading of this onboarding tooltip",
-    "This third line can act as the subheading of this onboarding tooltip",
-    "This fourth line can act as the subheading of this onboarding tooltip",
-]
-
-export const toolTip: Story = {
-    args: {
-        pointerPosition: 'left',
-        messages: messages,
-    }
-};

package/src/styles.css

@@ -1,204 +0,0 @@
-@import 'ag-grid-community/styles/ag-grid.css';
-@import 'ag-grid-community/styles/ag-theme-quartz.css';
-@import "@ng-select/ng-select/themes/default.theme.css";
-
-html,
-body {
-  height: 100%;
-}
-
-body {
-  margin: 0;
-  font-family: Roboto, "Helvetica Neue", sans-serif;
-}
-
-:root {
-  --font: 'Roboto';
-  --small-4px: 4px;
-  --small-6px: 6px;
-  --small-8px: 8px;
-  --small-12px: 12px;
-  --small-14px: 14px;
-  --small-16px: 16px;
-  --small-18px: 18px;
-  --medium-20px: 20px;
-  --medium-24px: 24px;
-}
-
-.insights-theme {
-  --primary-50: #EAFFFD;
-  --primary-100: #CAFFFB;
-  --primary-200: #9CFFFA;
-  --primary-300: #00DDEA;
-  --primary-400: #00AFC4;
-  --primary-500: #008597;
-  --primary-600: #0B6E7F;
-  --primary-700: #0E5B6B;
-  --primary-800: #023D4A;
-  --primary-900: #01303A;
-  --secondary-50: #FFF3EB;
-  --secondary-100: #FFD8C0;
-  --secondary-200: #FFC6A2;
-  --secondary-300: #FEAB78;
-  --secondary-400: #FE9B5D;
-  --secondary-500: #FE8235;
-  --secondary-600: #E77630;
-  --secondary-700: #B45C26;
-  --secondary-800: #8C481D;
-  --secondary-900: #6B3716;
-  --grey-50: #E9EAEB;
-  --grey-100: #BAC0C1;
-  --grey-200: #98A1A3;
-  --grey-300: #697779;
-  --grey-400: #4C5C5F;
-  --grey-500: #1F3437;
-  --grey-600: #1C2F32;
-  --grey-700: #162527;
-  --grey-800: #111C1E;
-  --grey-900: #0D1517;
-  --semantic-success-50: #EBF5E9;
-  --semantic-success-100: #C0DEBA;
-  --semantic-success-200: #A1CF98;
-  --semantic-success-300: #76B969;
-  --semantic-success-400: #5CAB4C;
-  --semantic-success-500: #33961F;
-  --semantic-success-600: #2E891C;
-  --semantic-success-700: #246B16;
-  --semantic-success-800: #1C5311;
-  --semantic-success-900: #153F0D;
-  --semantic-error-50: #F8E9E9;
-  --semantic-error-100: #EBBCB9;
-  --semantic-error-200: #E19C98;
-  --semantic-error-300: #D36E68;
-  --semantic-error-400: #CA524B;
-  --semantic-error-500: #BD271E;
-  --semantic-error-600: #AC231B;
-  --semantic-error-700: #861C15;
-  --semantic-error-800: #681511;
-  --semantic-error-900: #4F100D;
-  --semantic-purple-50: #F3EFFD;
-  --semantic-purple-100: #D8CCFA;
-  --semantic-purple-200: #C6B4F7;
-  --semantic-purple-300: #AB92F4;
-  --semantic-purple-400: #9B7DF1;
-  --semantic-purple-500: #815BED;
-  --semantic-purple-600: #7654D9;
-  --semantic-purple-700: #5C41A9;
-  --semantic-purple-800: #483383;
-  --semantic-purple-900: #372764;
-  --semantic-yellow-50: #FEF6E6;
-  --semantic-yellow-100: #FBE2B3;
-  --semantic-yellow-200: #F9D58E;
-  --semantic-yellow-300: #F6C15A;
-  --semantic-yellow-400: #F5B53A;
-  --text-highemphasis: #1B1F20;
-  --text-mediumemphasis: #697779;
-  --text-lowemphasis: #98A2A3;
-  --text-white: #FFFFFF;
-  --semantic-yellow-500: #F2A209;
-  --semantic-yellow-600: #DC9408;
-  --semantic-yellow-700: #AC7406;
-  --semantic-yellow-800: #855A05;
-  --structural-white: #FFFFFF;
-  --icon-grey1: #757575;
-  --structural-neutral1: #F9F9F9;
-}
-
-.saras-theme {
-  --primary-50: #E8F1FC;
-  --primary-100: #B8D4F7;
-  --primary-200: #96C0F3;
-  --primary-300: #66A2ED;
-  --primary-400: #4992E9;
-  --primary-500: #1B77E4;
-  --primary-600: #196CCF;
-  --primary-700: #1354A2;
-  --primary-800: #0F417D;
-  --primary-900: #0B3160;
-  --secondary-50: #FFF3EB;
-  --secondary-100: #FFD8C0;
-  --secondary-200: #FFC6A2;
-  --secondary-300: #FEAB78;
-  --secondary-400: #FE9B5D;
-  --secondary-500: #FE8235;
-  --secondary-600: #E77630;
-  --secondary-700: #B45C26;
-  --secondary-800: #8C481D;
-  --secondary-900: #6B3716;
-  --grey-50: #E9E9EB;
-  --grey-100: #BABDC1;
-  --grey-200: #989CA3;
-  --grey-300: #697079;
-  --grey-400: #4C545F;
-  --grey-500: #1F2937;
-  --grey-600: #1C2532;
-  --grey-700: #161D27;
-  --grey-800: #11161E;
-  --grey-900: #0D1117;
-  --semantic-success-50: #EBF5E9;
-  --semantic-success-100: #C0DEBA;
-  --semantic-success-200: #A1CF98;
-  --semantic-success-300: #76B969;
-  --semantic-success-400: #5CAB4C;
-  --semantic-success-500: #33961F;
-  --semantic-success-600: #2E891C;
-  --semantic-success-700: #246B16;
-  --semantic-success-800: #1C5311;
-  --semantic-success-900: #153F0D;
-  --semantic-error-50: #F8E9E9;
-  --semantic-error-100: #EBBCB9;
-  --semantic-error-200: #E19C98;
-  --semantic-error-300: #D36E68;
-  --semantic-error-400: #CA524B;
-  --semantic-error-500: #BD271E;
-  --semantic-error-600: #AC231B;
-  --semantic-error-700: #861C15;
-  --semantic-error-800: #681511;
-  --semantic-error-900: #4F100D;
-  --semantic-purple-50: #F3EFFD;
-  --semantic-purple-100: #D8CCFA;
-  --semantic-purple-200: #C6B4F7;
-  --semantic-purple-300: #AB92F4;
-  --semantic-purple-400: #9B7DF1;
-  --semantic-purple-500: #815BED;
-  --semantic-purple-600: #7654D9;
-  --semantic-purple-700: #5C41A9;
-  --semantic-purple-800: #483383;
-  --semantic-purple-900: #372764;
-  --semantic-yellow-50: #FEF6E6;
-  --semantic-yellow-100: #FBE2B3;
-  --semantic-yellow-200: #F9D58E;
-  --semantic-yellow-300: #F6C15A;
-  --semantic-yellow-400: #F5B53A;
-  --text-highemphasis: #1B1D20;
-  --text-mediumemphasis: #697079;
-  --text-lowemphasis: #989CA3;
-  --text-white: #FFFFFF;
-  --semantic-yellow-500: #F2A209;
-  --semantic-yellow-600: #DC9408;
-  --semantic-yellow-700: #AC7406;
-  --semantic-yellow-800: #855A05;
-  --structural-white: #FFFFFF;
-  --icon-grey1: #757575;
-  --structural-neutral1: #F9F9F9;
-}
-
-.ag-header {
-  font-family: var(--font);
-  font-size: 14px;
-  font-weight: 400;
-  height: 20px;
-  line-height: 20px;
-}
-
-.ag-header-cell lib-grid-cell {
-  width: 100%;
-}
-
-.ag-header-cell-label {
-  font-family: var(--font);
-  font-size: 14px;
-  font-weight: 400;
-  line-height: 20px;
-  margin-left: 10px;
-}

package/src/svg.d.ts

@@ -1 +0,0 @@
-declare module '*.svg';

package/tsconfig.app.json

@@ -1,14 +0,0 @@
-/* To learn more about this file see: https://angular.io/config/tsconfig. */
-{
-  "extends": "./tsconfig.json",
-  "compilerOptions": {
-    "outDir": "./out-tsc/app",
-    "types": []
-  },
-  "files": [
-    "src/main.ts"
-  ],
-  "include": [
-    "src/**/*.d.ts"
-  ]
-}