@flywheel-io/vision 1.17.0 → 2.0.0-beta-1

package/.editorconfig

@@ -0,0 +1,56 @@
+# Editor configuration, see https://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+indent_size = 2
+indent_style = space
+insert_final_newline = true
+max_line_length = 120
+tab_width = 2
+quote_type = single
+trim_trailing_whitespace = true
+spaces_around_operators = true
+spaces_around_brackets = inside
+indent_brace_style = K&R
+
+[*.scss]
+indent_size = 2
+ij_scss_hex_color_long_format = true
+ij_scss_hex_color_lower_case = true
+ij_scss_hex_color_short_format = false
+ij_scss_hex_color_upper_case = false
+
+[*.ts]
+quote_type = single
+max_line_length = 120
+indent_size = 2
+tab_width = 2
+ij_continuation_indent_size = 2
+ij_visual_guides = 120
+ij_typescript_force_semicolon_style = true
+ij_typescript_import_merge_members = global
+ij_typescript_import_prefer_absolute_path = global
+ij_typescript_import_sort_members = true
+ij_typescript_import_sort_module_name = false
+ij_typescript_import_use_node_resolution = true
+ij_typescript_imports_wrap = on_every_item
+ij_typescript_use_double_quotes = false
+ij_typescript_enforce_trailing_comma = whenmultiline
+
+[*.html]
+max_line_length = 120
+insert_final_newline = true
+indent_size = 2
+tab_width = 2
+ij_continuation_indent_size = 2
+ij_visual_guides = 120
+ij_html_new_line_after_last_attribute = never
+ij_html_new_line_before_first_attribute = when_multiline
+ij_html_enforce_quotes = true
+ij_html_quote_style = double
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false

package/.eslintrc.json

@@ -0,0 +1,312 @@
+{
+  "root": true,
+  "ignorePatterns": [
+    "projects/**/*"
+  ],
+  "overrides": [
+    {
+      "files": [
+        "*.ts"
+      ],
+      "plugins": [
+        "@typescript-eslint",
+        "@angular-eslint",
+        "@rx-angular",
+        "simple-import-sort",
+        "unused-imports"
+      ],
+      "extends": [
+        "plugin:@typescript-eslint/recommended",
+        "plugin:@angular-eslint/recommended",
+        "plugin:@angular-eslint/template/process-inline-templates",
+        "plugin:@rx-angular/recommended",
+        "plugin:storybook/recommended"
+      ],
+      "parserOptions": {
+        "project": [
+          "tsconfig.json"
+        ],
+        "createDefaultProgram": true
+      },
+      "rules": {
+        "@angular-eslint/component-selector": [
+          "error",
+          {
+            "prefix": "fw",
+            "style": "kebab-case",
+            "type": "element"
+          }
+        ],
+        "@angular-eslint/directive-selector": [
+          "error",
+          {
+            "prefix": "fw",
+            "style": "camelCase",
+            "type": "attribute"
+          }
+        ],
+        "simple-import-sort/imports": "error",
+        "simple-import-sort/exports": "error",
+        "@rx-angular/no-explicit-change-detection-apis": "warn",
+        "@rx-angular/prefer-no-layout-sensitive-apis": "warn",
+        "@typescript-eslint/naming-convention": [
+          "error",
+          // eslint defaults
+          {
+            "selector": "default",
+            "format": [
+              "camelCase"
+            ],
+            "leadingUnderscore": "allow",
+            "trailingUnderscore": "allow"
+          },
+          {
+            "selector": "variable",
+            "format": [
+              "camelCase",
+              "UPPER_CASE"
+            ],
+            "leadingUnderscore": "allow",
+            "trailingUnderscore": "allow"
+          },
+          {
+            "selector": "typeLike",
+            "format": [
+              "PascalCase"
+            ]
+          },
+          // end defaults
+          {
+            // ignore quoted properties
+            "selector": [
+              "classProperty",
+              "objectLiteralProperty",
+              "typeProperty",
+              "classMethod",
+              "objectLiteralMethod",
+              "typeMethod",
+              "accessor",
+              "enumMember"
+            ],
+            "format": null,
+            "modifiers": [
+              "requiresQuotes"
+            ]
+          },
+          {
+            "selector": "enumMember",
+            "format": [
+              "PascalCase"
+            ]
+          },
+          {
+            "selector": [
+              "property"
+            ],
+            "leadingUnderscore": "allow",
+            "format": [
+              "camelCase",
+              "snake_case",
+              "PascalCase"
+            ]
+          },
+          {
+            "selector": [
+              "variable",
+              "parameter"
+            ],
+            "format": null,
+            "modifiers": [
+              "destructured"
+            ]
+          }
+        ],
+        "@typescript-eslint/ban-types": "off",
+        "@typescript-eslint/explicit-function-return-type": [
+          "warn",
+          {
+            "allowExpressions": true
+          }
+        ],
+        "@typescript-eslint/explicit-member-accessibility": "off",
+        "@typescript-eslint/explicit-module-boundary-types": "off",
+        "@typescript-eslint/indent": [
+          "off",
+          2
+        ],
+        // hella broken https://github.com/typescript-eslint/typescript-eslint/issues/1824
+        "@typescript-eslint/keyword-spacing": [
+          "error",
+          {
+            "before": true,
+            "after": true
+          }
+        ],
+        "@typescript-eslint/member-delimiter-style": "off",
+        "@typescript-eslint/no-parameter-properties": "off",
+        "@typescript-eslint/no-use-before-define": [
+          "error",
+          {
+            "functions": false
+          }
+        ],
+        "array-bracket-newline": [
+          "error",
+          "consistent"
+        ],
+        "array-bracket-spacing": [
+          "error",
+          "never"
+        ],
+        "array-element-newline": [
+          "error",
+          "consistent"
+        ],
+        "comma-dangle": [
+          "warn",
+          "always-multiline"
+        ],
+        "eqeqeq": [
+          "error",
+          "always"
+        ],
+        "object-curly-spacing": [
+          "warn",
+          "always"
+        ],
+        "no-console": "error",
+        "no-implicit-coercion": "error",
+        "no-floating-decimal": "error",
+        "no-multi-spaces": "error",
+        "semi": [
+          "off"
+        ],
+        // need more options to fit our usage
+        "curly": [
+          "error",
+          "all"
+        ],
+        "quotes": [
+          2,
+          "single",
+          {
+            "avoidEscape": true
+          }
+        ]
+      }
+    },
+    {
+      "files": [
+        "**/app/**/*.ts",
+        "**/app/*.ts"
+      ],
+      "rules": {
+        "@angular-eslint/component-selector": [
+          "error",
+          {
+            "prefix": "app",
+            "style": "kebab-case",
+            "type": "element"
+          }
+        ],
+        "@angular-eslint/directive-selector": [
+          "error",
+          {
+            "prefix": "app",
+            "style": "camelCase",
+            "type": "attribute"
+          }
+        ]
+      }
+    },
+    {
+      "files": [
+        "*.stories.@(ts|tsx|js|jsx|mjs|cjs)"
+      ],
+      "rules": {
+        "@angular-eslint/no-output-native": "off",
+        "@angular-eslint/component-selector": [
+          "error",
+          {
+            "prefix": "stories",
+            "style": "kebab-case",
+            "type": "element"
+          }
+        ],
+        "@angular-eslint/directive-selector": [
+          "error",
+          {
+            "prefix": "stories",
+            "style": "camelCase",
+            "type": "attribute"
+          }
+        ],
+        "@typescript-eslint/naming-convention": [
+          "error",
+          {
+            "selector": "variable",
+            "format": [
+              "PascalCase",
+              "camelCase",
+              "UPPER_CASE"
+            ],
+            "leadingUnderscore": "allow",
+            "trailingUnderscore": "allow"
+          }
+        ]
+      }
+    },
+    {
+      "files": [
+        "*.{spec,mocks}.{ts,js}"
+      ],
+      "env": {
+        "mocha": true
+      },
+      "rules": {
+        "@typescript-eslint/consistent-type-assertions": "off",
+        "@typescript-eslint/no-angle-bracket-type-assertion": "off",
+        "@typescript-eslint/no-empty-function": "off",
+        "@typescript-eslint/no-explicit-any": "off",
+        "@typescript-eslint/no-object-literal-type-assertion": "off",
+        "quotes": "off",
+        "@rx-angular/no-explicit-change-detection-apis": "off",
+        "@rx-angular/prefer-no-layout-sensitive-apis": "off"
+      }
+    },
+    {
+      "files": [
+        "*.html"
+      ],
+      "extends": [
+        "plugin:@angular-eslint/template/recommended"
+      ],
+      "rules": {
+        "object-curly-newline": [
+          "warn",
+          {
+            "ObjectExpression": {
+              "multiline": true,
+              "minProperties": 2,
+              "consistent": true
+            },
+            "ObjectPattern": {
+              "multiline": true
+            },
+            "ImportDeclaration": {
+              "multiline": true,
+              "minProperties": 2,
+              "consistent": true
+            },
+            "ExportDeclaration": {
+              "multiline": true,
+              "minProperties": 2,
+              "consistent": true
+            }
+          }
+        ],
+        "brace-style": "warn"
+      }
+    }
+  ]
+}

package/.gitattributes

@@ -0,0 +1,2 @@
+/src/assets/fonts/*.svg binary
+/src/components/icon/selection.json binary

package/.gitlab-ci.yml

@@ -0,0 +1,157 @@
+variables:
+  # GCLOUD_SERVICE_ACCOUNT_FILE
+  GCLOUD_STORAGE_DOCS: 'gs://flywheel-extension-docs'
+  # official regex for semver from https://semver.org/#is-there-a-suggested-regular-expression-regex-to-check-a-semver-string
+  SEMVER_REGEX: '^(0|[1-9]\d*)\.(0|[1-9]\d*)\.(0|[1-9]\d*)(?:-((?:0|[1-9]\d*|\d*[a-zA-Z-][0-9a-zA-Z-]*)(?:\.(?:0|[1-9]\d*|\d*[a-zA-Z-][0-9a-zA-Z-]*))*))?(?:\+([0-9a-zA-Z-]+(?:\.[0-9a-zA-Z-]+)*))?$'
+
+stages:
+  - test
+  - build
+  - publish
+
+include:
+  - project: flywheel-io/infrastructure/ci-templates
+    ref: master
+    file: security-scans.yml
+
+.npm-cached-install: &npm-cached-install
+  cache:
+    key:
+      files:
+        - package-lock.json
+    paths:
+      - .npm/
+  before_script:
+    - npm ci --cache .npm --prefer-offline
+
+##################
+# WORKFLOW RULES #
+##################
+# https://docs.gitlab.com/ee/ci/yaml/#workflow
+# https://docs.gitlab.com/ee/ci/yaml/workflow.html#switch-between-branch-pipelines-and-merge-request-pipelines
+# https://docs.gitlab.com/ee/ci/jobs/job_control.html#common-if-clauses-for-rules
+
+workflow:
+  rules:
+    - if: $CI_PIPELINE_SOURCE == "merge_request_event"
+    - if: $CI_COMMIT_TAG
+    - if: $CI_COMMIT_REF_PROTECTED == "true"
+
+lint:
+  <<: *npm-cached-install
+  stage: test
+  image: node:18
+  script:
+    - npm run lint
+
+style-lint:
+  <<: *npm-cached-install
+  stage: test
+  image: node:18
+  allow_failure: true
+  script:
+    - npm run stylelint
+
+test:
+  <<: *npm-cached-install
+  stage: test
+  image: registry.gitlab.com/flywheel-io/docker/node:16
+  script:
+    - npm run test -- --no-watch --no-progress --code-coverage --browsers=ChromeHeadlessNoSandbox
+  coverage: '/^Statements\s*:\s*([^%]+)/'
+  artifacts:
+    when: always
+    expire_in: 1 week
+    paths:
+      - coverage
+
+build:vision:
+  <<: *npm-cached-install
+  stage: build
+  image: node:18
+  script:
+    - |
+      if [[ "$CI_COMMIT_TAG" =~ ^[0-9]+\.[0-9]+\.[0-9]+$ ]]; then
+        npm version --no-git-tag-version --allow-same-version "$CI_COMMIT_TAG"
+      else
+        latest_semver="$(git describe --tags --abbrev=0 --match='[0-9]*.[0-9]*.[0-9]*' --exclude='*[^0-9.]*')"
+        npm version --no-git-tag-version "${latest_semver}-${CI_COMMIT_REF_NAME}.${CI_COMMIT_SHORT_SHA}"
+      fi
+    - npm run build
+    - mv dist/vision-lib dist/vision
+  artifacts:
+    expire_in: 1 hour
+    paths:
+      - dist/vision
+
+build:storybook:
+  <<: *npm-cached-install
+  stage: build
+  image: node:18
+  script:
+    - npm run build-storybook
+    - mkdir dist
+    - mv storybook-static dist/storybook
+  artifacts:
+    expire_in: 1 hour
+    paths:
+      - dist/storybook
+
+publish:gitlab:
+  stage: publish
+  image: node:18
+  script:
+    - cd dist/vision
+    - |
+      echo "@flywheel-io:registry=https://gitlab.com/api/v4/projects/${CI_PROJECT_ID}/packages/npm/
+      //gitlab.com/api/v4/projects/${CI_PROJECT_ID}/packages/npm/:_authToken=${CI_JOB_TOKEN}" >.npmrc
+    - |
+      if [[ "$CI_COMMIT_TAG" =~ ^[0-9]+\.[0-9]+\.[0-9]+$ ]]; then
+        npm publish
+      else
+        npm publish --tag "$CI_COMMIT_REF_NAME"
+      fi
+
+publish:npm:
+  stage: publish
+  image: node:18
+  tags:
+    - npm-publish
+  only:
+    - /^\d+\./ # semver
+  before_script:
+    - '[ -n "$CI_COMMIT_TAG" ] || exit 0'
+  script:
+    - cd dist/vision
+    - echo '//registry.npmjs.org/:_authToken=${NPM_TOKEN}'>.npmrc
+    - npm publish --access=public
+
+publish:storybook:
+  stage: publish
+  image: google/cloud-sdk:latest
+  before_script:
+    - gcloud auth activate-service-account --key-file "$GCLOUD_SERVICE_ACCOUNT_FILE"
+  script:
+    - gsutil -m rsync -a public-read -d -r dist/storybook "${GCLOUD_STORAGE_DOCS}/docs/vision/${CI_COMMIT_REF_NAME}"
+    - gcloud --project flywheel-cdn compute url-maps invalidate-cdn-cache flywheel-cdn --path "/docs/vision/${CI_COMMIT_REF_NAME}/*" --async
+
+publish:latest-storybook:
+  stage: publish
+  image: google/cloud-sdk:latest
+  rules:
+    - if: $CI_COMMIT_TAG
+  before_script:
+    - gcloud auth activate-service-account --key-file "$GCLOUD_SERVICE_ACCOUNT_FILE"
+  script:
+    - gsutil -m rsync -a public-read -d -r dist/storybook "${GCLOUD_STORAGE_DOCS}/docs/vision/latest"
+    - gcloud --project flywheel-cdn compute url-maps invalidate-cdn-cache flywheel-cdn --path "/docs/vision/latest/*" --async
+
+publish:pages:
+  stage: publish
+  rules:
+    - if: '$CI_COMMIT_BRANCH == "master"'
+  script:
+    - mv dist/storybook public
+  artifacts:
+    paths:
+      - public

package/.nvmrc

@@ -0,0 +1 @@
+v18

package/.storybook/main.js

@@ -0,0 +1,23 @@
+module.exports = {
+  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)', '../src/**/*.mdx'],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-designs',
+    'storybook-addon-themes',
+  ],
+  staticDirs: ['./public'],
+
+  framework: {
+    name: '@storybook/angular',
+    options: {},
+  },
+
+  docs: {
+    autodocs: true,
+  },
+
+  features: {
+    postcss: false,
+  },
+};

package/.storybook/manager-head.html

@@ -0,0 +1,2 @@
+<link rel="icon" type="image/png" href="images/favicon.png">
+<title>Flywheel Vision</title>

package/.storybook/manager.js

@@ -0,0 +1,7 @@
+import { addons } from '@storybook/addons';
+
+import theme from './theme';
+
+addons.setConfig({
+  theme,
+});

package/.storybook/preview.js

@@ -0,0 +1,44 @@
+import {setCompodocJson} from "@storybook/addon-docs/angular";
+import docJson from "../documentation.json";
+
+setCompodocJson(docJson);
+
+export const parameters = {
+  actions: {argTypesRegex: "^on[A-Z].*"},
+  docs: {
+    inline: true,
+  },
+  options: {
+    storySort: {
+      order: ['Getting Started', 'Docs', 'Layout', 'Components', 'Form Controls', 'SCSS', 'Tokens', 'Legacy'],
+    },
+  },
+  backgrounds: {
+    values: [
+      {name: 'black', value: '#000000'},
+      {name: 'page-light', value: '#ffffff'},
+      {name: 'page-shaded', value: '#f1f3f4'},
+      {name: 'card-header', value: '#f9f9f9'},
+      {name: 'card-background', value: '#ffffff'},
+      {name: 'primary-base', value: '#1b68fa'},
+      {name: 'primary-hover', value: '#1b69fa19'},
+      {name: 'secondary-base', value: '#b080fc'},
+      {name: 'secondary-hover', value: '#b081fc19'},
+      {name: 'green-base', value: '#14ae5c'},
+      {name: 'green-hover', value: '#22c55e19'},
+      {name: 'orange-base', value: '#c47e09'},
+      {name: 'orange-hover', value: '#f59e0b19'},
+      {name: 'red-base', value: '#d73d3d'},
+      {name: 'red-hover', value: '#f0434319'},
+    ],
+  },
+  themes: {
+    default: 'light',
+    list: [
+      {name: 'light', class: 'vision-light-theme', color: '#ffffff'},
+      {name: 'dark', class: 'vision-dark-theme', color: '#000000'},
+    ],
+  },
+
+};
+

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>