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

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,307 @@
+{
+  "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",
+          {
+            "selector": "default",
+            "format": [
+              "camelCase"
+            ],
+            "leadingUnderscore": "allow",
+            "trailingUnderscore": "allow"
+          },
+          {
+            "selector": "variable",
+            "format": [
+              "camelCase",
+              "UPPER_CASE"
+            ],
+            "leadingUnderscore": "allow",
+            "trailingUnderscore": "allow"
+          },
+          {
+            "selector": "typeLike",
+            "format": [
+              "PascalCase"
+            ]
+          },
+          {
+            "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
+        ],
+        "@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"
+        ],
+        "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:
+  - lint
+  - 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: lint
+  image: node:20
+  script:
+    - npm run lint
+
+stylelint:
+  <<: *npm-cached-install
+  stage: lint
+  image: node:20
+  script:
+    - npm run stylelint
+
+test:
+  <<: *npm-cached-install
+  needs: []
+  stage: test
+  image: registry.gitlab.com/flywheel-io/docker/node:latest
+  script:
+    - npm run test
+  coverage: '/^Statements\s*:\s*([^%]+)/'
+  artifacts:
+    when: always
+    expire_in: 1 week
+    paths:
+      - coverage
+
+build:vision:
+  <<: *npm-cached-install
+  stage: build
+  image: node:20
+  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
+        npm version prerelease --no-git-tag-version --preid "${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:20
+  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:20
+  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:20
+  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 @@
+v20

package/.storybook/DocsContainer.tsx

@@ -0,0 +1,103 @@
+import { DocsContainer } from '@storybook/addon-docs/blocks'
+import { useEffect, useState } from 'react'
+import { addons } from 'storybook/internal/preview-api'
+import { themes } from 'storybook/internal/theming'
+
+const DARK_MODE_EVENT_NAME = 'DARK_MODE'
+
+function useDocumentClassListObserver(
+  callback: (classList: DOMTokenList) => void,
+) {
+  useEffect(() => {
+    // Define a MutationObserver that listens to changes in classList
+    const observer = new MutationObserver((mutationsList) => {
+      for (const mutation of mutationsList) {
+        if (mutation.attributeName === 'class') {
+          callback(document.documentElement.classList)
+        }
+      }
+    })
+
+    // Start observing the documentElement for attribute changes
+    observer.observe(document.documentElement, { attributes: true })
+
+    // Clean up on component unmount
+    return () => observer.disconnect()
+  }, [callback])
+}
+
+
+const CustomDocsContainer = ({ children, ...props }) => {
+  const [isDark, setIsDark] = useState(document.documentElement.classList.contains('vision-dark-theme'))
+
+  useDocumentClassListObserver((classList) => {
+    console.log('dark mode docs container trigger!');
+    setIsDark(classList.contains('vision-dark-theme'))
+  })
+
+  useEffect(() => {
+    const chan = addons.getChannel()
+    chan.on(DARK_MODE_EVENT_NAME, setIsDark)
+    return () => chan.off(DARK_MODE_EVENT_NAME, setIsDark)
+  }, [])
+
+  const css = `
+
+    html, body {
+      background-color: var(--page-light);
+    }
+    .docs-story, .sbdocs-preview {
+      background-color: var(--page-light) !important;
+      border-color: var(--separations-border) !important;
+    }
+    /*preview-head*/
+    .sbdocs-wrapper{
+      background-color: inherit !important;
+    }
+    /*manager-head*/
+    svg[type="component"] {
+      color: var(--primary-base);
+    }
+    svg[type="story"] {
+      color: var(--secondary-base);
+    }
+    svg[type="document"] {
+      color: var(--orange-base);
+    }
+    .sbdocs-content a {
+        text-decoration: underline;
+        color: var(--primary-base) !important;
+        cursor: pointer;
+      }
+    .sbdocs-content a:hover {
+        text-decoration: none;
+      }
+    .sbdocs-content a:active {
+        text-decoration: none;
+        outline: 2px solid var(--primary-dark);
+        border-radius: 4px;
+      }
+    .sbdocs-content a:visited {
+        color: var(--secondary-base);
+      }
+
+      @media (max-width: 1200px) {
+
+        .sbdocs-wrapper > div:nth-child(2) {
+          display: none;
+        }
+      }
+
+  `;
+
+  return (
+    <DocsContainer
+      context={props.context} {...props}
+      theme={isDark ? themes.dark : themes.light}>
+      <style>{css}</style>
+      {children}
+    </DocsContainer>
+  )
+}
+
+export default CustomDocsContainer;

package/.storybook/main.ts

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

package/.storybook/manager-head.html

@@ -0,0 +1,29 @@
+<!-- manager-head.html -->
+<style>
+  :root {
+    --primary-base: #1b68faff;
+    --secondary-base: #b080fcff;
+    --orange-base: #c47e09ff;
+  }
+
+  :root[data-mode="dark"], html[class="vision-dark-theme"] {
+    --primary-base: #76a4fcff;
+    --secondary-base: #d0b3fdff;
+    --orange-base: #f9c56dff;
+  }
+
+
+  svg[type="component"] {
+    color: var(--primary-base);
+  }
+
+  svg[type="story"] {
+    color: var(--secondary-base);
+  }
+
+  svg[type="document"] {
+    color: var(--orange-base);
+  }
+
+</style>
+<link rel="icon" type="image/png" href="images/favicon.png">

package/.storybook/manager.ts

@@ -0,0 +1,7 @@
+import { addons } from 'storybook/internal/manager-api';
+import { lightStorybookTheme } from './sb-theme';
+
+addons.setConfig({
+  theme: lightStorybookTheme,
+});
+