@sarasanalytics-com/design-system 0.0.3

package/src/stories/selectInput.stories.ts

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

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

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

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

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

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

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

package/tsconfig.app.json

@@ -0,0 +1,14 @@
+/* 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"
+  ]
+}