@sarasanalytics-com/design-system 0.0.3

package/.editorconfig

@@ -0,0 +1,16 @@
+# Editor configuration, see https://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.ts]
+quote_type = single
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false

package/.eslintrc.json

@@ -0,0 +1,22 @@
+{
+    "env": {
+        "browser": true,
+        "es2021": true
+    },
+    "extends": [
+        "eslint:recommended",
+        "plugin:@typescript-eslint/recommended"
+    ],
+    "parser": "@typescript-eslint/parser",
+    "parserOptions": {
+        "ecmaVersion": "latest",
+        "sourceType": "module"
+    },
+    "plugins": [
+        "@typescript-eslint"
+    ],
+    "rules": {
+        "@angular-eslint/template/accessibility-valid-aria": ["error"],
+        "@angular-eslint/template/accessibility-role-has-required-aria": ["error"]
+    }
+}

package/.storybook/main.ts

@@ -0,0 +1,21 @@
+import type { StorybookConfig } from "@storybook/angular";
+
+const config: StorybookConfig = {
+  stories: ['../src/stories/*.stories.ts', '../src/stories/*.mdx'],
+  staticDirs: ['../src'],
+  addons: [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/addon-interactions",
+    '@storybook/addon-docs',
+    '@storybook/addon-actions'
+  ],
+  framework: {
+    name: "@storybook/angular",
+    options: {},
+  },
+  docs: {
+    autodocs: "tag",
+  },
+};
+export default config;

package/.storybook/manager.ts

@@ -0,0 +1,17 @@
+// .storybook/manager.js
+import { addons } from '@storybook/manager-api';
+import { create } from '@storybook/theming/create';
+
+addons.setConfig({
+    theme: create({
+        base: 'light', // or 'dark'
+        brandTitle: 'Saras',
+        brandUrl: 'https://sarasanalytics.com',
+        brandImage: '../Saras-logo.svg', // Path to your logo image
+        colorSecondary: '#1B77E4',
+
+        appBg: '#ffffff',
+        appContentBg: '#ffffff',
+        appPreviewBg: '#ffffff',
+    }),
+});

package/.storybook/preview-head.html

@@ -0,0 +1,5 @@
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link
+  href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
+  rel="stylesheet">
+<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

package/.storybook/preview.ts

@@ -0,0 +1,65 @@
+import type { Preview } from "@storybook/angular";
+import { componentWrapperDecorator } from "@storybook/angular";
+
+const preview: Preview = {
+  parameters: {
+    options: {
+      storySort: {
+        order: [
+          'Getting started',
+          '*',
+          'Kitchen Sink'
+        ]
+      }
+    },
+  },
+  globalTypes: {
+    theme: {
+      description: 'Global theme for components',
+      defaultValue: 'saras-theme',
+      toolbar: {
+        title: 'Theme',
+        icon: 'circlehollow',
+        items: ['saras-theme', 'insights-theme'],
+        dynamicTitle: true,
+      },
+    },
+  },
+  decorators: [
+    componentWrapperDecorator(
+      (story) => {
+        return `
+          ${story}
+        `
+      },
+      ({ globals }) => {
+        document.body.classList.remove("saras-theme");         // remove if this theme already exists in classlist
+        document.body.classList.remove("insights-theme");     // Since we don't know which one already exists, we try removing both.
+        document.body.classList.add(globals['theme']);        // append the most recent class selection here. 
+        return { myTheme: globals['theme'] };
+      },
+    ),
+  ],
+};
+
+export default preview;
+
+
+// storySort: {
+//   order: [
+//     'Avatar',
+//     'Button',
+//     'Chips',
+//     'Datepicker',
+//     'GridCell',
+//     'Header',
+//     'Select Input',
+//     'Stepper',
+//     'Tabs',
+//     'Toast',
+//     'ToolTip',
+//     'Avatar Sink',
+//     'Button Sink',
+//     'Chip Sink'
+//   ]
+// }

package/.storybook/tsconfig.doc.json

@@ -0,0 +1,10 @@
+// This tsconfig is used by Compodoc to generate the documentation for the project.
+// If Compodoc is not used, this file can be deleted.
+{
+  "extends": "./tsconfig.json",
+  // Exclude all files that are not needed for documentation generation.
+  "exclude": ["../src/test.ts", "../src/**/*.spec.ts", "../src/**/*.stories.ts"],
+  // Please make sure to include all files from which Compodoc should generate documentation.
+  "include": ["../src/**/*"],
+  "files": ["./typings.d.ts"]
+}

package/.storybook/tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "extends": "../tsconfig.app.json",
+  "compilerOptions": {
+    "types": ["node"],
+    "allowSyntheticDefaultImports": true,
+    "resolveJsonModule": true
+  },
+  "exclude": ["../src/test.ts", "../src/**/*.spec.ts"],
+  "include": ["../src/**/*.stories.*", "./preview.ts"],
+  "files": ["./typings.d.ts"]
+}

package/.storybook/typings.d.ts

@@ -0,0 +1,4 @@
+declare module '*.md' {
+  const content: string;
+  export default content;
+}

package/.vscode/extensions.json

@@ -0,0 +1,7 @@
+{
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=827846
+  "recommendations": [
+    "angular.ng-template",
+    "hookyqr.beautify"
+  ]
+}

package/.vscode/launch.json

@@ -0,0 +1,20 @@
+{
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "name": "ng serve",
+      "type": "chrome",
+      "request": "launch",
+      "preLaunchTask": "npm: start",
+      "url": "http://localhost:4200/"
+    },
+    {
+      "name": "ng test",
+      "type": "chrome",
+      "request": "launch",
+      "preLaunchTask": "npm: test",
+      "url": "http://localhost:9876/debug.html"
+    }
+  ]
+}

package/.vscode/settings.json

@@ -0,0 +1,13 @@
+{
+    "beautify.onSave": true,
+
+    "editor.formatOnSave": true,
+
+    "beautify.JSfiles": [
+        "js",
+        "json",
+        "jsbeautifyrc",
+        "jshintrc",
+        "ts",
+    ]
+}

package/.vscode/tasks.json

@@ -0,0 +1,42 @@
+{
+  // For more information, visit: https://go.microsoft.com/fwlink/?LinkId=733558
+  "version": "2.0.0",
+  "tasks": [
+    {
+      "type": "npm",
+      "script": "start",
+      "isBackground": true,
+      "problemMatcher": {
+        "owner": "typescript",
+        "pattern": "$tsc",
+        "background": {
+          "activeOnStart": true,
+          "beginsPattern": {
+            "regexp": "(.*?)"
+          },
+          "endsPattern": {
+            "regexp": "bundle generation complete"
+          }
+        }
+      }
+    },
+    {
+      "type": "npm",
+      "script": "test",
+      "isBackground": true,
+      "problemMatcher": {
+        "owner": "typescript",
+        "pattern": "$tsc",
+        "background": {
+          "activeOnStart": true,
+          "beginsPattern": {
+            "regexp": "(.*?)"
+          },
+          "endsPattern": {
+            "regexp": "bundle generation complete"
+          }
+        }
+      }
+    }
+  ]
+}

package/README.md

@@ -0,0 +1,27 @@
+# TestPackage
+
+This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 17.1.3.
+
+## Development server
+
+Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files.
+
+## Code scaffolding
+
+Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
+
+## Build
+
+Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory.
+
+## Running unit tests
+
+Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
+
+## Running end-to-end tests
+
+Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.
+
+## Further help
+
+To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.

package/angular.json

@@ -0,0 +1,189 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "sadlc": {
+      "projectType": "application",
+      "schematics": {},
+      "root": "",
+      "sourceRoot": "src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:application",
+          "options": {
+            "outputPath": "dist/sadlc",
+            "index": "src/index.html",
+            "browser": "src/main.ts",
+            "polyfills": [
+              "zone.js"
+            ],
+            "tsConfig": "tsconfig.app.json",
+            "assets": [
+              "src/favicon.ico",
+              "src/assets"
+            ],
+            "styles": [
+              "src/custom-theme.scss",
+              "src/styles.css",
+              "ag-grid-community/styles/ag-grid.css",
+              "ag-grid-community/styles/ag-theme-alpine.css"
+            ],
+            "scripts": []
+          },
+          "configurations": {
+            "production": {
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "2mb",
+                  "maximumError": "4mb"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "4kb",
+                  "maximumError": "6kb"
+                }
+              ],
+              "outputHashing": "all"
+            },
+            "development": {
+              "optimization": false,
+              "extractLicenses": false,
+              "sourceMap": true
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "configurations": {
+            "production": {
+              "buildTarget": "sadlc:build:production"
+            },
+            "development": {
+              "buildTarget": "sadlc:build:development"
+            }
+          },
+          "defaultConfiguration": "development"
+        },
+        "extract-i18n": {
+          "builder": "@angular-devkit/build-angular:extract-i18n",
+          "options": {
+            "buildTarget": "sadlc:build"
+          }
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "polyfills": [
+              "zone.js",
+              "zone.js/testing"
+            ],
+            "tsConfig": "tsconfig.spec.json",
+            "assets": [
+              "src/favicon.ico",
+              "src/assets"
+            ],
+            "styles": [
+              "src/styles.css"
+            ],
+            "scripts": []
+          }
+        },
+        "storybook": {
+          "builder": "@storybook/angular:start-storybook",
+          "options": {
+            "configDir": ".storybook",
+            "browserTarget": "sadlc:build",
+            "compodoc": false,
+            "port": 6006
+          }
+        },
+        "build-storybook": {
+          "builder": "@storybook/angular:build-storybook",
+          "options": {
+            "configDir": ".storybook",
+            "browserTarget": "sadlc:build",
+            "compodoc": false,
+            "outputDir": "dist/storybook/sadlc",
+            "styles": ["src/styles.css", "src/custom-theme.scss"]
+          }
+        }
+      }
+    },
+    "component-library": {
+      "projectType": "library",
+      "root": "projects/component-library",
+      "sourceRoot": "projects/component-library/src",
+      "prefix": "lib",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:ng-packagr",
+          "options": {
+            "project": "projects/component-library/ng-package.json"
+          },
+          "configurations": {
+            "production": {
+              "tsConfig": "projects/component-library/tsconfig.lib.prod.json"
+            },
+            "development": {
+              "tsConfig": "projects/component-library/tsconfig.lib.json"
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "tsConfig": "projects/component-library/tsconfig.spec.json",
+            "polyfills": [
+              "zone.js",
+              "zone.js/testing"
+            ]
+          }
+        },
+        "lint": {
+          "builder": "@angular-eslint/builder:lint",
+          "options": {
+            "lintFilePatterns":[
+              "src/**/*.ts",
+              "src/**/*/*.html"
+            ]
+          }
+        },
+        "storybook": {
+          "builder": "@storybook/angular:start-storybook",
+          "options": {
+            "configDir": "projects/component-library/.storybook",
+            "browserTarget": "component-library:build",
+            "compodoc": true,
+            "port": 6006,
+            "compodocArgs": [
+              "-e",
+              "json",
+              "-d",
+              "." 
+            ]
+          }
+        },
+        "build-storybook": {
+          "builder": "@storybook/angular:build-storybook",
+          "options": {
+            "configDir": "projects/component-library/.storybook",
+            "browserTarget": "component-library:build",
+            "compodoc": true,
+            "compodocArgs": [
+              "-e",
+              "json",
+              "-d",
+              "."
+            ],
+            "outputDir": "dist/storybook/component-library"
+          }
+        }
+      }
+    }
+  }
+}

package/build-storybook.log

@@ -0,0 +1,39 @@
+
+> sadlc@0.0.25 build-storybook
+> ng run sadlc:build-storybook --output-dir C:\Users\SARAS\AppData\Local\Temp\chromatic--4864-8RXA4OBPXIHg
+
+info => Cleaning outputDir: C:\Users\SARAS\AppData\Local\Temp\chromatic--4864-8RXA4OBPXIHg
+info => Loading presets
+info Found existing addon "@storybook/addon-docs", skipping.
+info Found existing addon "@storybook/addon-actions", skipping.
+info Found existing addon "@storybook/addon-docs", skipping.
+info Found existing addon "@storybook/addon-actions", skipping.
+info => Building manager..
+info => Manager built (469 ms)
+info => Building preview..
+info Addon-docs: using MDX3
+info => Using implicit CSS loaders
+info => Using angular browser target options from "sadlc:build"
+info => Using angular project with "tsConfig:D:\practice\sadlc\.storybook\tsconfig.json"
+info => Copying static files: src at C:\Users\SARAS\AppData\Local\Temp\chromatic--4864-8RXA4OBPXIHg
+info => Using default Webpack5 setup
+WARN export 'EmptyTabContent' (imported as 'EmptyTabContent') was not found in '@storybook/components' (possible exports: A, ActionBar, AddonPanel, Badge, Bar, Blockquote, Button, ClipboardCode, Code, DL, Div, DocumentWrapper, ErrorFormatter, FlexBar, Form, H1, H2, H3, H4, H5, H6, HR, IconButton, IconButtonSkeleton, Icons, Img, LI, Link, ListItem, Loader, OL, P, Placeholder, Pre, ResetWrapper, ScrollArea, Separator, Spaced, Span, StorybookIcon, StorybookLogo, Symbols, SyntaxHighlighter, TT, TabBar, TabButton, TabWrapper, Table, Tabs, TabsState, TooltipLinkList, TooltipMessage, TooltipNote, UL, WithTooltip, WithTooltipPure, Zoom, codeCommon, components, createCopyToClipboardFunction, getStoryHref, icons, interleaveSeparators, nameSpaceClassNames, resetComponents, withReset)
+WARN asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
+WARN This can impact web performance.
+WARN Assets: 
+WARN   805.4de14699a12f7c9f06f6.css (322 KiB)
+WARN   664.76e61017.iframe.bundle.js (721 KiB)
+WARN   56.1ad42925.iframe.bundle.js (1.32 MiB)
+WARN   144.f0fb8473.iframe.bundle.js (897 KiB)
+WARN   805.f421c610.iframe.bundle.js (3.45 MiB)
+WARN entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
+WARN Entrypoints:
+WARN   main (3.87 MiB)
+WARN       runtime~main.d5aa068e.iframe.bundle.js
+WARN       805.4de14699a12f7c9f06f6.css
+WARN       805.f421c610.iframe.bundle.js
+WARN       main.1bc0e8fe940aa9df3425.css
+WARN       main.2240cc33.iframe.bundle.js
+WARN 
+info => Preview built (57 s)
+info => Output directory: C:\Users\SARAS\AppData\Local\Temp\chromatic--4864-8RXA4OBPXIHg

package/package.json

@@ -0,0 +1,74 @@
+{
+  "name": "@sarasanalytics-com/design-system",
+  "version": "0.0.3",
+  "scripts": {
+    "ng": "ng",
+    "start": "ng serve",
+    "build": "ng build",
+    "watch": "ng build --watch --configuration development",
+    "test": "ng test",
+    "build-storybook": "ng run sadlc:build-storybook",
+    "chromatic": "npx chromatic --project-token chpt_c15abbd7dcf38ca",
+    "lint": "ng lint"
+  },
+  "private": false,
+  "dependencies": {
+    "@angular/animations": "^17.1.0",
+    "@angular/cdk": "^17.3.6",
+    "@angular/common": "^17.1.0",
+    "@angular/compiler": "^17.1.0",
+    "@angular/core": "^17.1.0",
+    "@angular/forms": "^17.1.0",
+    "@angular/material": "^17.3.6",
+    "@angular/platform-browser": "^17.1.0",
+    "@angular/platform-browser-dynamic": "^17.1.0",
+    "@angular/router": "^17.1.0",
+    "@fontsource/material-icons": "^5.0.18",
+    "@fontsource/roboto": "^5.0.13",
+    "@material-ui/core": "^4.12.4",
+    "@mui/icons-material": "^5.15.17",
+    "@mui/material": "^5.15.17",
+    "@ng-select/ng-select": "^12.0.7",
+    "@ngx-formly/core": "^6.3.0",
+    "ag-grid-angular": "^31.2.0",
+    "rxjs": "~7.8.0",
+    "tslib": "^2.3.0",
+    "zone.js": "~0.14.3"
+  },
+  "devDependencies": {
+    "@angular-devkit/build-angular": "^17.1.3",
+    "@angular-eslint/builder": "17.3.0",
+    "@angular-eslint/eslint-plugin": "17.3.0",
+    "@angular-eslint/eslint-plugin-template": "17.3.0",
+    "@angular-eslint/schematics": "17.3.0",
+    "@angular-eslint/template-parser": "17.3.0",
+    "@angular/cli": "^17.1.3",
+    "@angular/compiler-cli": "^17.1.0",
+    "@chromatic-com/storybook": "^1.2.18",
+    "@compodoc/compodoc": "^1.1.23",
+    "@mdx-js/react": "^3.0.1",
+    "@storybook/addon-actions": "^8.1.4",
+    "@storybook/addon-docs": "^8.1.3",
+    "@storybook/addon-essentials": "^8.0.0",
+    "@storybook/addon-interactions": "^8.0.0",
+    "@storybook/addon-links": "^8.0.0",
+    "@storybook/angular": "^8.0.0",
+    "@storybook/blocks": "^8.0.0",
+    "@storybook/test": "^8.0.0",
+    "@types/jasmine": "~5.1.0",
+    "@typescript-eslint/eslint-plugin": "^7.2.0",
+    "@typescript-eslint/parser": "^7.2.0",
+    "chromatic": "^11.0.8",
+    "eslint": "^8.57.0",
+    "eslint-plugin-angular": "^4.1.0",
+    "jasmine-core": "~5.1.0",
+    "karma": "~6.4.0",
+    "karma-chrome-launcher": "~3.2.0",
+    "karma-coverage": "~2.2.0",
+    "karma-jasmine": "~5.1.0",
+    "karma-jasmine-html-reporter": "~2.1.0",
+    "ng-packagr": "^17.2.0",
+    "storybook": "^8.0.0",
+    "typescript": "~5.3.2"
+  }
+}

package/projects/component-library/README.md

@@ -0,0 +1,24 @@
+# TestLibrary
+
+This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 17.2.0.
+
+## Code scaffolding
+
+Run `ng generate component component-name --project component-library` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project component-library`.
+> Note: Don't forget to add `--project component-library` or else it will be added to the default project in your `angular.json` file. 
+
+## Build
+
+Run `ng build component-library` to build the project. The build artifacts will be stored in the `dist/` directory.
+
+## Publishing
+
+After building your library with `ng build component-library`, go to the dist folder `cd dist/component-library` and run `npm publish`.
+
+## Running unit tests
+
+Run `ng test component-library` to execute the unit tests via [Karma](https://karma-runner.github.io).
+
+## Further help
+
+To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.

package/projects/component-library/ng-package.json

@@ -0,0 +1,8 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/component-library",
+  "assets": ["./assets"],
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  }
+}

package/projects/component-library/package.json

@@ -0,0 +1,12 @@
+{
+  "name": "@sarasanalytics-com/design-system",
+  "version": "0.0.2",
+  "peerDependencies": {
+    "@angular/common": "^17.2.0",
+    "@angular/core": "^17.2.0"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "sideEffects": false
+}

package/projects/component-library/src/interfaces/avatar-interface.ts

@@ -0,0 +1,6 @@
+export interface AvatarInterface {
+    id: string | number,
+    size: string,
+    imagePath: string,
+    altText: string
+}