@sarasanalytics-com/design-system 0.0.41 → 0.0.43

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,23 @@
+{
+    "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"],
+        "@typescript-eslint/no-explicit-any": "off"
+    }
+}

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,66 @@
+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', 'purple-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 all
+        document.body.classList.remove("purple-theme");     // Since we don't know which one already exists, we try all
+        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

@@ -1,24 +1,45 @@
-# TestLibrary
+**Welcome to the saras-design-system wiki!**
 
-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. 
+### Installation
 
-## Build
+`npm i @sarasanalytics-com/design-system`
+***
 
-Run `ng build component-library` to build the project. The build artifacts will be stored in the `dist/` directory.
+### Helpful Commands:
+Once you clone this repository, these commands might be helpful to get you started. 
+1. `ng serve` or `npm run start`
+This will run the demo application on localhost. This page has implementation examples for all components in the design system along with kitchen sinks for Chips, Buttons, and Avatars.
 
-## Publishing
+2. `ng run sadlc:storybook`
+To run storybook on localhost.
 
-After building your library with `ng build component-library`, go to the dist folder `cd dist/component-library` and run `npm publish`.
+3. `ng run sadlc:build-storybook` 
+To build storybook.
 
-## Running unit tests
+4. `npm run chromatic`
+To host a storybook with chromatic.
 
-Run `ng test component-library` to execute the unit tests via [Karma](https://karma-runner.github.io).
 
-## Further help
+To publish the NPM package.
 
-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.
+1. take a pull from dev branch
+
+2. do `npm login` in your terminal
+
+3. do `ng build component-library`
+Run this command from root before you publish to NPM. Make sure you add any new components to [public-api.ts](https://github.com/sarasanalytics-com/saras-design-system/blob/v1/projects/component-library/src/public-api.ts#L7).
+
+4. do `cd dist/component-library/`
+
+5. change the version to next value in the `package.json` inside `dist/component-library/package.json`
+
+6. do `npm publish --access public`
+
+Run this command from root before you publish to NPM. Make sure you add any new components to [public-api.ts](https://github.com/sarasanalytics-com/saras-design-system/blob/v1/projects/component-library/src/public-api.ts#L7).
+
+Make sure that theme classes are present in `styles.css` of your project and `index.html` has at-least one of these classes in it's body tag.
+
+***

package/angular.json

@@ -0,0 +1,195 @@
+{
+  "$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",
+              "@ng-select/ng-select/themes/default.theme.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", "ag-grid-community/styles/ag-grid.css",
+              "ag-grid-community/styles/ag-theme-alpine.css",
+              "@ng-select/ng-select/themes/default.theme.css"]
+          }
+        }
+      }
+    },
+    "component-library": {
+      "projectType": "library",
+      "root": "projects/component-library",
+      "sourceRoot": "projects/component-library/src",
+      "prefix": "sa",
+      "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"
+          }
+        }
+      }
+    }
+  },
+  "cli": {
+    "analytics": false
+  }
+}

package/build-storybook.log

@@ -0,0 +1,45 @@
+
+> @sarasanalytics-com/design-system@0.0.21 build-storybook
+> ng run sadlc:build-storybook --output-dir /var/folders/hl/59d4pv7s7xlg2jhswlln9tsh0000gn/T/chromatic--896-rCNCoDILVmst
+
+info => Cleaning outputDir: ../../../../../var/folders/hl/59d4pv7s7xlg2jhswlln9tsh0000gn/T/chromatic--896-rCNCoDILVmst
+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 (112 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:/Users/saras/Documents/workspace/saras-design-system/.storybook/tsconfig.json"
+info => Using default Webpack5 setup
+info => Copying static files: src at ../../../../../var/folders/hl/59d4pv7s7xlg2jhswlln9tsh0000gn/T/chromatic--896-rCNCoDILVmst
+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 Module Warning (from ./node_modules/postcss-loader/dist/cjs.js):
+WARN (3:5) from "autoprefixer" plugin: end value has mixed support, consider using flex-end instead
+WARN 
+WARN Code:
+WARN   justify-content: end
+WARN 
+WARN asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
+WARN This can impact web performance.
+WARN Assets: 
+WARN   1280.b1dee8b620464854ffea.css (290 KiB)
+WARN   56.2655bb94.iframe.bundle.js (1.32 MiB)
+WARN   6568.0b8f7d0f.iframe.bundle.js (478 KiB)
+WARN   1144.ac4580a6.iframe.bundle.js (897 KiB)
+WARN   1280.e0d1b79a.iframe.bundle.js (3.46 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.86 MiB)
+WARN       runtime~main.475591f7.iframe.bundle.js
+WARN       1280.b1dee8b620464854ffea.css
+WARN       1280.e0d1b79a.iframe.bundle.js
+WARN       main.e3879df2f74772d13833.css
+WARN       main.1dd44b25.iframe.bundle.js
+WARN 
+info => Preview built (17 s)
+info => Output directory: /var/folders/hl/59d4pv7s7xlg2jhswlln9tsh0000gn/T/chromatic--896-rCNCoDILVmst

package/generate-public-api.js

@@ -0,0 +1,59 @@
+const fs = require('fs');
+const path = require('path');
+
+const srcPath = path.join(__dirname, 'projects', 'component-library', 'src');
+const libPath = path.join(srcPath, 'lib');
+const interfacesPath = path.join(srcPath, 'interfaces');
+const publicApiPath = path.join(srcPath, 'public-api.ts');
+
+function getFiles(dir, extensions) {
+  const files = fs.readdirSync(dir, { withFileTypes: true });
+  let targetFiles = [];
+
+  for (const file of files) {
+    if (file.isDirectory()) {
+      targetFiles = targetFiles.concat(getFiles(path.join(dir, file.name), extensions));
+    } else if (extensions.some(ext => file.name.endsWith(ext))) {
+      targetFiles.push(path.relative(srcPath, path.join(dir, file.name)));
+    }
+  }
+
+  return targetFiles;
+}
+
+function generatePublicApi() {
+  const componentFiles = getFiles(libPath, ['.component.ts']);
+  const serviceFiles = getFiles(libPath, ['.service.ts']);
+  const interfaceFiles = getFiles(interfacesPath, ['.ts']);
+  
+  let content = `/*
+ * Public API Surface of component-library
+ */
+
+// ... existing code ...
+
+`;
+
+  content += '\n// Components\n';
+  componentFiles.forEach(file => {
+    const importPath = file.replace(/\.ts$/, '');
+    content += `export * from './${importPath}';\n`;
+  });
+
+  content += '\n// Services\n';
+  serviceFiles.forEach(file => {
+    const importPath = file.replace(/\.ts$/, '');
+    content += `export * from './${importPath}';\n`;
+  });
+
+  content += '\n// Interfaces\n';
+  interfaceFiles.forEach(file => {
+    const importPath = file.replace(/\.ts$/, '');
+    content += `export * from './${importPath}';\n`;
+  });
+
+  fs.writeFileSync(publicApiPath, content);
+  console.log('public-api.ts has been updated with all component, service, and interface exports.');
+}
+
+generatePublicApi();