@flywheel-io/vision 2.0.0-beta.9 → 2.1.0-beta.0

package/.storybook/preview.tsx

@@ -0,0 +1,45 @@
+import {setCompodocJson} from "@storybook/addon-docs/angular";
+import docJson from "../documentation.json";
+import { darkStorybookTheme, lightStorybookTheme } from "./sb-theme";
+import { themes } from 'storybook/internal/theming';
+import CustomDocsContainer from "./DocsContainer";
+
+// stops storybook from showing a bunch of implementation details in its controls
+// inspired by this: https://github.com/storybookjs/storybook/issues/15906#issuecomment-1966305679
+for (let component of docJson.components) {
+  delete component.methodsClass;
+  delete component.propertiesClass;
+}
+
+setCompodocJson(docJson);
+
+export const parameters = {
+  darkMode: {
+    // Override the default dark theme
+    dark: { ...darkStorybookTheme, theme: themes.dark },
+    darkClass: 'vision-dark-theme',
+    // Override the default light theme
+    light: { ...lightStorybookTheme, theme: themes.light },
+    lightClass: 'vision-light-theme',
+    current: 'light',
+    stylePreview: true,
+    classTarget: 'html',
+  },
+  backgrounds: {
+    disable: true,
+  },
+  options: {
+    storySort: {
+      order: ['Getting Started', 'Docs', 'Layout', 'Components', 'Form Controls', 'SCSS', 'Tokens'],
+    },
+  },
+  docs: {
+    codePanel: true,
+    toc: true,
+    container: CustomDocsContainer,
+  },
+};
+
+
+export const tags = ['autodocs'];
+

package/.storybook/public/images/core.svg

@@ -0,0 +1,22 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="2" y="2" width="44" height="44" rx="10" stroke="#E8F0FF" stroke-width="4"/>
+<g clip-path="url(#clip0_4230_10724)">
+<rect width="48" height="48" rx="12" fill="#1B68FA"/>
+<rect width="48" height="48" fill="url(#paint0_linear_4230_10724)"/>
+</g>
+<path d="M28.8509 29.879C28.6066 29.5794 28.1987 29.4662 27.8368 29.6017C26.2222 30.2052 24.3604 30.1106 22.7539 29.1834C21.372 28.3853 20.3835 27.0973 19.9704 25.5558C19.5666 24.0485 19.7603 22.4754 20.5153 21.1143C20.5264 21.0942 20.5387 21.0742 20.5509 21.0549C22.6437 17.8234 25.573 17.5773 27.7956 18.4448C28.1609 18.5873 28.5762 18.4767 28.8242 18.1727L32.4261 13.7553C32.7824 13.318 32.6573 12.6648 32.164 12.3916C31.8753 12.2316 31.5297 12.0545 31.1351 11.8779C28.5424 10.7046 25.691 10.3675 22.9729 10.9317C21.2506 11.2895 19.639 11.9952 18.1832 13.0296C16.6706 14.1042 15.3567 15.515 14.278 17.2228L14.239 17.2845L14.2027 17.3476C13.304 18.9039 12.7369 20.5917 12.5171 22.364C12.3048 24.0741 12.424 25.7878 12.8716 27.4577C13.3189 29.1277 14.0727 30.6714 15.1113 32.0463C16.1881 33.4712 17.5232 34.6493 19.0796 35.5476C20.6359 36.4462 22.3237 37.0134 24.0961 37.2331C24.6443 37.3014 25.1929 37.3352 25.7404 37.3352C26.9003 37.3352 28.0551 37.1826 29.1898 36.8787C30.2476 36.5954 31.255 36.189 32.2008 35.6653C32.6922 35.3928 32.814 34.7392 32.4587 34.3038L28.8509 29.879Z" fill="url(#paint1_linear_4230_10724)"/>
+<defs>
+<linearGradient id="paint0_linear_4230_10724" x1="48" y1="0" x2="0" y2="48" gradientUnits="userSpaceOnUse">
+<stop stop-color="#1B68FA"/>
+<stop offset="1" stop-color="#5E00F6"/>
+</linearGradient>
+<linearGradient id="paint1_linear_4230_10724" x1="13.4466" y1="37.0535" x2="53.8595" y2="-7.34404" gradientUnits="userSpaceOnUse">
+<stop stop-color="#76A4FC"/>
+<stop offset="0.47" stop-color="#D9E6FF"/>
+<stop offset="1" stop-color="white"/>
+</linearGradient>
+<clipPath id="clip0_4230_10724">
+<rect width="48" height="48" rx="12" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/.storybook/public/images/discovery.svg

@@ -0,0 +1,22 @@
+<svg width="49" height="48" viewBox="0 0 49 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="2.33301" y="2" width="44" height="44" rx="10" stroke="#E8F0FF" stroke-width="4"/>
+<g clip-path="url(#clip0_4230_10805)">
+<rect x="0.333008" width="48" height="48" rx="12" fill="#1B68FA"/>
+<rect width="48" height="48" transform="translate(0.333008)" fill="url(#paint0_linear_4230_10805)"/>
+</g>
+<path d="M35.165 25.064C34.9911 26.9068 34.4275 28.7448 33.4898 30.5276L33.456 30.5917L33.4201 30.6544C32.5239 32.2065 31.3488 33.538 29.9276 34.6118C28.556 35.6478 27.0165 36.3994 25.3509 36.8459C24.22 37.1492 23.0687 37.3012 21.9119 37.3012V37.2845H16.9944C16.5054 37.2845 16.1094 36.8881 16.1094 36.3994V30.8524C16.1094 30.3633 16.5057 29.9673 16.9944 29.9673H21.9489C23.9612 29.9518 25.9156 28.918 27.0199 27.0789C27.0314 27.0596 27.0421 27.04 27.0525 27.0203C29.0514 23.1122 27.1333 20.2041 24.8663 18.8952C24.0224 18.4076 23.0105 18.0732 21.9493 18.0357H16.9944C16.5054 18.0357 16.1094 17.6393 16.1094 17.1506V11.584C16.1094 11.0953 16.5057 10.6989 16.9944 10.6989H21.9489V10.7026C24.2159 10.736 26.4818 11.363 28.5316 12.5465C31.4285 14.2199 33.5799 16.8247 34.5888 19.8819C35.1383 21.5474 35.3322 23.2913 35.165 25.064Z" fill="url(#paint1_linear_4230_10805)"/>
+<defs>
+<linearGradient id="paint0_linear_4230_10805" x1="1.5" y1="48" x2="47.5" y2="1" gradientUnits="userSpaceOnUse">
+<stop stop-color="#761EC2"/>
+<stop offset="1" stop-color="#A95D4C"/>
+</linearGradient>
+<linearGradient id="paint1_linear_4230_10805" x1="13.8057" y1="34.0523" x2="46.7915" y2="-4.86055" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FFC6FD"/>
+<stop offset="0.389828" stop-color="#FFEBFF"/>
+<stop offset="1" stop-color="white"/>
+</linearGradient>
+<clipPath id="clip0_4230_10805">
+<rect x="0.333008" width="48" height="48" rx="12" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/.storybook/public/images/exchange.svg

@@ -0,0 +1,28 @@
+<svg width="49" height="48" viewBox="0 0 49 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="2.66699" y="2" width="44" height="44" rx="10" stroke="#E8F0FF" stroke-width="4"/>
+<g clip-path="url(#clip0_4230_10764)">
+<rect x="0.666992" width="48" height="48" rx="12" fill="#1B68FA"/>
+<rect width="48" height="48" transform="translate(0.666992)" fill="url(#paint0_linear_4230_10764)"/>
+</g>
+<path d="M36.6663 16.9857V11.7478C36.6663 11.1194 36.1306 10.622 35.5027 10.67C34.9566 10.7117 34.4123 10.7884 33.8736 10.8997C32.143 11.2586 30.5232 11.9664 29.0597 13.004C27.5395 14.0818 26.2189 15.4969 25.1352 17.2098L25.096 17.2716L25.0595 17.3349C24.1563 18.896 23.5863 20.5888 23.3651 22.3666C23.152 24.0817 23.2718 25.8006 23.7213 27.4756C24.1712 29.1506 24.9285 30.699 25.9727 32.078C27.0549 33.5072 28.3964 34.6889 29.9606 35.5899C31.5249 36.4912 33.2211 37.0601 35.0028 37.2805C35.1479 37.2984 35.2931 37.314 35.4382 37.3274C36.0921 37.387 36.6562 36.8721 36.6573 36.2168L36.6666 31.008C36.6666 30.4767 36.2805 30.0203 35.7542 29.941C35.0342 29.8326 34.322 29.5907 33.6542 29.2061C32.2654 28.4056 31.2715 27.1137 30.8567 25.5676C30.4512 24.0579 30.6452 22.4823 31.401 21.1186C31.4144 21.0944 31.429 21.0702 31.4443 21.0471C32.6895 19.1317 34.2287 18.2638 35.7404 18.055C36.2727 17.9816 36.6666 17.5222 36.6666 16.9857H36.6663Z" fill="url(#paint1_linear_4230_10764)"/>
+<path d="M26.0122 25.0768C25.8369 26.9294 25.2691 28.7778 24.3242 30.5708L24.2902 30.6356L24.2536 30.6985C23.3509 32.2596 22.1668 33.5987 20.7343 34.6784C19.3525 35.7205 17.8009 36.4762 16.1226 36.9249C15.3735 37.1252 14.6158 37.2599 13.8533 37.3288C13.2172 37.3861 12.667 36.8906 12.667 36.2529V31.002C12.667 30.4725 13.0509 30.0172 13.575 29.9357C15.2758 29.6714 16.8497 28.6848 17.8002 27.1085C17.8144 27.085 17.8278 27.0612 17.8401 27.0366C19.8494 23.1092 17.917 20.1874 15.6339 18.8713C15.0165 18.5154 14.3099 18.2407 13.5597 18.1022C13.0438 18.0069 12.667 17.562 12.667 17.0385V11.7779C12.667 11.1353 13.2255 10.6365 13.8656 10.7035C15.7536 10.9 17.6155 11.502 19.3275 12.4883C22.247 14.1707 24.4148 16.7902 25.4314 19.8646C25.9854 21.54 26.1808 23.2935 26.0122 25.0768Z" fill="url(#paint2_linear_4230_10764)"/>
+<defs>
+<linearGradient id="paint0_linear_4230_10764" x1="2.5" y1="48" x2="46.5" y2="2.98023e-07" gradientUnits="userSpaceOnUse">
+<stop stop-color="#5E00F6"/>
+<stop offset="1" stop-color="#771FBE"/>
+</linearGradient>
+<linearGradient id="paint1_linear_4230_10764" x1="24.3365" y1="35.6774" x2="54.6339" y2="-5.22586" gradientUnits="userSpaceOnUse">
+<stop stop-color="#D0B3FD"/>
+<stop offset="0.319825" stop-color="#E3D4FA"/>
+<stop offset="1" stop-color="white"/>
+</linearGradient>
+<linearGradient id="paint2_linear_4230_10764" x1="7.56661" y1="36.4055" x2="37.7463" y2="-6.11698" gradientUnits="userSpaceOnUse">
+<stop stop-color="#D0B3FD"/>
+<stop offset="0.359827" stop-color="#E3D4FA"/>
+<stop offset="1" stop-color="white"/>
+</linearGradient>
+<clipPath id="clip0_4230_10764">
+<rect x="0.666992" width="48" height="48" rx="12" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/.storybook/sb-theme.ts

@@ -0,0 +1,80 @@
+import { create } from 'storybook/internal/theming';
+
+const common = {
+  brandTitle: 'Vision Angular',
+  brandTarget: '_blank',
+
+  // Typography
+  fontBase: 'Inter, "Open Sans", sans-serif',
+  fontCode: 'monospace',
+};
+
+export const lightStorybookTheme = create({
+  ...common,
+
+  base: 'light',
+  brandImage: './images/brand-light.png',
+
+  //
+  colorPrimary: '#1b68faff',
+  colorSecondary: '#b080fcff',
+
+  // UI
+  appBg: '#ffffff',
+  appContentBg: '#ffffff',
+  appPreviewBg: '#ffffff',
+  appBorderColor: '#00000026',
+  appBorderRadius: 8,
+
+  // Text colors
+  textColor: '#5d6877ff',
+  textInverseColor: '#cad7e7ff',
+
+  // Toolbar default and active colors
+  barTextColor: '#748295ff',
+  barSelectedColor: '#6a4d97ff',
+  barHoverColor: '#b080fcff',
+  barBg: '#ffffff',
+
+  // Form colors
+  inputBg: '#ffffff',
+  inputBorder: '#00000040',
+  inputTextColor: '#000000ff',
+  inputBorderRadius: 4,
+});
+
+
+export const darkStorybookTheme = create({
+  ...common,
+
+  base: 'dark',
+  brandImage: './images/brand-dark.png',
+
+  //
+  colorPrimary: '#76a4fcff',
+  colorSecondary: '#b18ff5',
+
+  // UI
+  appBg: '#000102ff',
+  appContentBg: '#000102ff',
+  appPreviewBg: '#000102ff',
+  appBorderColor: '#ffffff33',
+  appBorderRadius: 8,
+
+  // Text colors
+  textColor: '#cad7e7ff',
+  textInverseColor: '#030a19ff',
+
+  // Toolbar default and active colors
+  barTextColor: '#cad7e7ff',
+  barSelectedColor: '#9e73e3ff',
+  barHoverColor: '#b18ff5',
+  barBg: '#000102ff',
+
+  // Form colors
+  inputBg: '#000102ff',
+  inputBorder: '#ffffff59',
+  inputTextColor: '#cad7e7ff',
+  inputBorderRadius: 4,
+
+});

package/.storybook/tsconfig.json

@@ -0,0 +1,19 @@
+{
+  "extends": "../tsconfig.lib.json",
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "types": [
+      "node"
+    ]
+  },
+  "exclude": [
+    "../src/test.ts",
+    "../src/**/*.spec.ts",
+    "../projects/**/*.spec.ts"
+  ],
+  "include": [
+    "./*",
+    "../src/**/*",
+    "../projects/**/*"
+  ]
+}

package/.stylelintignore

@@ -0,0 +1,2 @@
+../../scss/icons/_icon-glyphs.scss
+dist/*

package/.stylelintrc.json

@@ -0,0 +1,48 @@
+{
+  "extends": "stylelint-config-standard-scss",
+  "rules": {
+    "at-rule-empty-line-before": [
+      "always",
+      {
+        "except": [
+          "inside-block",
+          "blockless-after-same-name-blockless",
+          "first-nested"
+        ],
+        "ignore": [
+          "after-comment",
+          "blockless-after-blockless",
+          "blockless-after-same-name-blockless"
+        ]
+      }
+    ],
+    "scss/at-extend-no-missing-placeholder": null,
+    "scss/dollar-variable-empty-line-before": null,
+    "no-descending-specificity": null,
+    "no-invalid-position-at-import-rule": null,
+    "alpha-value-notation": null,
+    "color-function-notation": [
+      "legacy",
+      {
+        "ignore": [
+          "with-var-inside"
+        ]
+      }
+    ],
+    "color-hex-length": "long",
+    "custom-property-pattern": null,
+    "font-family-name-quotes": "always-where-recommended",
+    "selector-pseudo-element-no-unknown": [
+      true,
+      { "ignorePseudoElements": ["ng-deep"] }
+    ],
+    "font-family-no-missing-generic-family-keyword": [
+      true,
+      {
+        "ignoreFontFamilies": [
+          "Flywheel-Vision-Icons"
+        ]
+      }
+    ]
+  }
+}

package/.vscode/extensions.json

@@ -0,0 +1,18 @@
+{
+	// See https://go.microsoft.com/fwlink/?LinkId=827846 to learn about workspace recommendations.
+	// Extension identifier format: ${publisher}.${name}. Example: vscode.csharp
+
+	// List of extensions which should be recommended for users of this workspace.
+	"recommendations": [
+		"editorconfig.editorconfig",
+		"dbaeumer.vscode-eslint",
+		"stylelint.vscode-stylelint",
+		"angular.ng-template",
+    "yoavbls.pretty-ts-errors",
+    "ms-vscode.vscode-typescript-next"
+	],
+	// List of extensions recommended by VS Code that should not be recommended for users of this workspace.
+	"unwantedRecommendations": [
+
+	]
+}

package/.vscode/settings.json

@@ -0,0 +1,7 @@
+{
+  "angular.enable-strict-mode-prompt": false,
+  "editor.formatOnSave": false,
+  "eslint.validate": ["javascript"],
+  "eslint.workingDirectories": [{ "mode": "auto" }],
+  "typescript.preferences.importModuleSpecifier": "relative",
+}

package/CONTRIBUTING.md

@@ -0,0 +1,51 @@
+# Contributing
+
+When contributing to this repository work should be associated with a story in [the Vision Project in Jira](https://flywheelio.atlassian.net/jira/software/c/projects/VDS/boards/1219?issueParent=54286). Components are tracked as stories and associated with a release version through epics.
+
+## Repo Structure
+
+- `src/app` Demo application for testing out components in context
+- `src/components` Component Library itself
+
+## Code Style and linting
+
+This repo uses editorconfig, eslint, and stylelint. Some IDEs automatically support these linters, but some require extensions.
+
+Here are examples of how to get linting running automatically:
+[VS Code](https://www.digitalocean.com/community/tutorials/linting-and-formatting-with-eslint-in-vs-code#step-3-installing-the-eslint-extension)
+[WebStorm](https://www.jetbrains.com/help/webstorm/eslint.html)
+
+## Running locally
+
+`note: Node >=18 required, using [NVM](https://github.com/nvm-sh/nvm) is encouraged`
+
+1. `npm install`
+2. `npm run storybook` runs storybook
+3. `npm start` runs demo app
+
+## Naming conventions
+
+We have naming conventions for component properties within vision
+
+- Text Hierarchy
+  - Highest level is title, then description, and then content
+  - label is reserved for form elements
+- Type is not a good property name use variant instead
+
+## Merge Request Process
+
+1. Branch off of master (branch name based on ticket number is encouraged but not required).
+2. Use atomic commits, the commit list should meaningfully describe the work done.
+3. Make sure your branch passes linting by running `npm run lint` and `npm run stylelint`.
+4. Start MR in Gitlab, follow MR template checklist.
+5. MR titles should include ticket number such as `[FLYW-1234] Brief Description`.
+6. Review is required from the frontend group but looping in a designer is encouraged.
+   - You'll need to manually request reviews, no one is automatically notified.
+
+## Release Process
+
+`note: you'll need maintainer level access to do a release`
+
+1. Create new tag, it should follow [semantic versioning](https://docs.npmjs.com/about-semantic-versioning). (use lightweight tag)
+2. Create release in Gitlab. The title should be the same as the tag, and the release should be associated with the tag.
+3. In the release notes detail each commit in this release as well as associated work item and MR link. (hopefully this will be automated soon)

package/angular.json

@@ -0,0 +1,95 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "vision-lib": {
+      "projectType": "library",
+      "schematics": {
+        "@schematics/angular:component": {
+          "style": "scss"
+        }
+      },
+      "root": "",
+      "sourceRoot": "src",
+      "prefix": "fw",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:ng-packagr",
+          "options": {
+            "tsConfig": "tsconfig.lib.json",
+            "project": "ng-package.json"
+          }
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "polyfills": ["zone.js", "zone.js/testing"],
+            "main": "src/test.ts",
+            "tsConfig": "tsconfig.spec.json",
+            "karmaConfig": "karma.conf.js",
+            "assets": [
+              "src/favicon.ico",
+              "src/assets"
+            ],
+            "styles": [
+              "src/global.scss"
+            ],
+            "scripts": []
+          }
+        },
+        "lint": {
+          "builder": "@angular-eslint/builder:lint",
+          "options": {
+            "lintFilePatterns": [
+              "src/**/*.ts",
+              "src/**/*.html"
+            ]
+          }
+        },
+        "storybook": {
+          "builder": "@storybook/angular:start-storybook",
+          "options": {
+            "compodoc": true,
+            "compodocArgs": [
+              "-e",
+              "json",
+              "-d",
+              "."
+            ],
+            "configDir": ".storybook",
+            "browserTarget": "vision-lib:build",
+            "styles": [
+              "./src/global.scss"
+            ],
+            "port": 6006
+          }
+        },
+        "build-storybook": {
+          "builder": "@storybook/angular:build-storybook",
+          "options": {
+            "compodoc": true,
+            "compodocArgs": [
+              "-e",
+              "json",
+              "-d",
+              "."
+            ],
+            "configDir": ".storybook",
+            "browserTarget": "vision-lib:build",
+            "styles": [
+              "./src/global.scss"
+            ],
+            "enableProdMode": false
+          }
+        }
+      }
+    }
+  },
+  "cli": {
+    "analytics": false,
+    "schematicCollections": [
+      "@angular-eslint/schematics"
+    ]
+  }
+}

package/build.js

@@ -0,0 +1,66 @@
+const fs = require('fs/promises');
+const _glob = require('glob');
+const path = require('path');
+const sass = require('sass');
+const util = require('util');
+
+const glob = util.promisify(_glob);
+
+const SOURCE_BASE = path.resolve(__dirname, 'src');
+const TARGET_BASE = path.resolve(__dirname, 'dist/vision-lib');
+const SASS_ENTRYPOINT = path.join(SOURCE_BASE, 'global.scss');
+const EXPORTED_SASS = path.join(SOURCE_BASE, 'public-api.scss');
+const STYLES_OUTFILE = path.join(TARGET_BASE, 'styles.css');
+
+const FILE_COPY = {
+  [SASS_ENTRYPOINT]: path.join(TARGET_BASE),
+  [EXPORTED_SASS]: path.join(TARGET_BASE),
+  [path.join(SOURCE_BASE, 'assets/fonts/*')]: path.join(TARGET_BASE, 'assets/fonts'),
+  [path.join(SOURCE_BASE, 'assets/svg/*')]: path.join(TARGET_BASE, 'assets/svg'),
+  [path.join(SOURCE_BASE, 'scss/atoms/*.{css,scss}')]: path.join(TARGET_BASE, 'scss/atoms'),
+  [path.join(SOURCE_BASE, 'scss/config/*.{css,scss}')]: path.join(TARGET_BASE, 'scss/config'),
+  [path.join(SOURCE_BASE, 'scss/global/*.{css,scss}')]: path.join(TARGET_BASE, 'scss/global'),
+  [path.join(SOURCE_BASE, 'scss/icons/*.{css,scss}')]: path.join(TARGET_BASE, 'scss/icons'),
+  [path.join(SOURCE_BASE, 'scss/material/*.{css,scss}')]: path.join(TARGET_BASE, 'scss/material'),
+  [path.join(SOURCE_BASE, 'scss/vendor/*.{css,scss}')]: path.join(TARGET_BASE, 'scss/vendor'),
+};
+
+async function main() {
+  await copyFiles();
+  await compileSass();
+}
+
+function copyFiles() {
+  return Promise.all(
+    Object.entries(FILE_COPY).map(async ([ sourceGlob, targetDir ]) => {
+      const sourceBase = path.dirname(sourceGlob);
+      const sourcePaths = await glob(sourceGlob);
+      await fs.mkdir(targetDir, {recursive: true});
+      return Promise.all(
+        sourcePaths.map(sourcePath => {
+          const sourceFile = path.relative(sourceBase, sourcePath);
+          const destination = path.join(targetDir, sourceFile);
+          console.error(sourcePath, '=>', destination);
+          return fs.copyFile(sourcePath, destination);
+        })
+      );
+    })
+  );
+}
+
+async function compileSass() {
+  const result = sass.renderSync({
+    file: SASS_ENTRYPOINT,
+    outFile: STYLES_OUTFILE,
+    includePaths: [path.resolve(__dirname, 'node_modules')],
+  });
+  console.error(SASS_ENTRYPOINT, '=>', STYLES_OUTFILE);
+  await fs.writeFile(STYLES_OUTFILE, result.css);
+}
+
+if (require.main === module) {
+  main().catch(error => {
+    console.error(error);
+    process.exit(1);
+  });
+}

package/install-into-frontend.sh

@@ -0,0 +1,13 @@
+#!/bin/bash
+
+set -e
+
+frontend=$1 # take argument for where to install
+
+npm run build
+cd dist/vision-lib
+npm pack
+rm "$frontend"/flywheel-io-vision-*.tgz  || : # always suceed, we don't care if there's nothing to remove
+cp -f flywheel-io-vision-*.tgz "$frontend"
+cd "$frontend"
+npm i flywheel-io-vision-*.tgz --legacy-peer-deps

package/karma.conf.js

@@ -0,0 +1,49 @@
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/1.0/config/configuration-file.html
+
+module.exports = function (config) {
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine', '@angular-devkit/build-angular'],
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-jasmine-html-reporter'),
+      require('karma-coverage'),
+      require('@angular-devkit/build-angular/plugins/karma'),
+    ],
+    client: {
+      jasmine: {
+        // you can add configuration options for Jasmine here
+        // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html
+        // for example, you can disable the random execution with `random: false`
+        // or set a specific seed with `seed: 4321`
+      },
+      clearContext: false, // leave Jasmine Spec Runner output visible in browser
+    },
+    jasmineHtmlReporter: {
+      suppressAll: true, // removes the duplicated traces
+    },
+    coverageReporter: {
+      dir: require('path').join(__dirname, './coverage/vision'),
+      subdir: '.',
+      reporters: [
+        {type: 'html'},
+        {type: 'text-summary'},
+      ],
+    },
+    reporters: ['progress', 'kjhtml'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: false,
+    browsers: ['ChromeHeadlessNoSandbox'],
+    customLaunchers: {
+      ChromeHeadlessNoSandbox: {
+        base: 'ChromeHeadless',
+        flags: ['--no-sandbox'],
+      },
+    },
+    singleRun: true,
+  });
+}

package/ng-package.json

@@ -0,0 +1,26 @@
+{
+  "$schema": "./node_modules/ng-packagr/ng-package.schema.json",
+  "allowedNonPeerDependencies": [
+    "@angular/animations",
+    "@angular/cdk",
+    "@angular/common",
+    "@angular/compiler",
+    "@angular/core",
+    "@angular/elements",
+    "@angular/forms",
+    "@angular/platform-browser",
+    "@angular/platform-browser-dynamic",
+    "document-register-element",
+    "libphonenumber-js",
+    "rxjs",
+    "zone.js",
+    "date-fns"
+  ],
+  "dest": "dist/vision-lib",
+  "lib": {
+    "entryFile": "src/public-api.ts",
+    "styleIncludePaths": [
+      "node_modules"
+    ]
+  }
+}