@testgorilla/tgo-ui 2.10.999 → 2.11.1

package/.circleci/config.yml

@@ -0,0 +1,112 @@
+version: 2.1
+
+orbs:
+  node: circleci/node@5.0.2
+  aws-cli: circleci/aws-cli@3.1.1
+  slack: circleci/slack@4.1
+
+aliases:
+  - &only-main-and-hotfix
+    branches:
+      only:
+        - master
+        - /hotfix.*/
+  - &slack-notify-only-main-and-hotfix
+    event: fail
+    branch_pattern: 'master, hotfix.*'
+    template: basic_fail_1
+  - &slack-notify-all
+    event: fail
+    template: basic_fail_1
+
+jobs:
+  playwright-visual-tests:
+    docker:
+      - image: mcr.microsoft.com/playwright:latest
+    resource_class: large
+    working_directory: ~/project
+    environment:
+      NODE_OPTIONS: "--max-old-space-size=4096"
+    steps:
+      - checkout
+      - restore_cache:
+          keys:
+            - node_modules-{{ checksum "package.json" }}
+            - node_modules- # fallback to using the latest cache if no exact match is found
+      - run:
+            name: Install dependencies
+            command: |
+              rm -rf node_modules yarn.lock package-lock.json
+              npm install --force
+              npx playwright install --with-deps
+              npm install -g wait-on
+      - save_cache:
+          paths:
+            - node_modules
+          key: node_modules-{{ checksum "package.json" }}
+      - run:
+          name: Running tests
+          command: |
+            npx ng build tgo-ui
+            npx playwright test visual-tests --config 'visual-tests/playwright.config.ts'
+      - store_test_results:
+          path: ./visual-tests/test-results/results.xml
+      - store_artifacts:
+          path: ./visual-tests/test-results
+          event: fail
+      - slack/notify: *slack-notify-all
+  build:
+    executor:
+      name: node/default
+      tag: '18.12'
+    steps:
+      - checkout
+      - node/install-packages
+      - run: npx npm-install-peers
+      - run: npm run build-storybook
+      - persist_to_workspace:
+          root: storybook-static
+          paths:
+            - .
+      - slack/notify: *slack-notify-only-main-and-hotfix
+  deploy:
+    executor: aws-cli/default
+    steps:
+      - attach_workspace:
+          at: /tmp/workspace
+      - aws-cli/install
+      - run: aws s3 sync --delete /tmp/workspace/. s3://tgo-ui-frontend-bucket-dev-eu
+      - run: aws cloudfront create-invalidation --distribution-id $UI_CLOUDFRONT_DISTRIBUTION_ID --paths "/*"
+      - slack/notify: *slack-notify-only-main-and-hotfix
+  fossa-check:
+    docker:
+      - image: cimg/base:stable
+    resource_class: small
+    steps:
+      - run: |
+          curl -H 'Cache-Control: no-cache' https://raw.githubusercontent.com/fossas/fossa-cli/master/install-latest.sh | bash
+      - checkout
+      - run:
+          command: fossa analyze
+
+workflows:
+  version: 2
+  tgo-ui:
+    jobs:
+      - playwright-visual-tests:
+          context:
+            - slack
+      - build:
+          filters: *only-main-and-hotfix
+          context:
+            - slack
+      - fossa-check:
+          requires:
+            - playwright-visual-tests
+      - deploy:
+          context:
+            - dev
+            - slack
+          requires:
+            - build
+          filters: *only-main-and-hotfix

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/.eslintignore

@@ -0,0 +1,5 @@
+node_modules
+dist
+package.json
+package-lock.json
+karma.conf.js

package/.eslintrc.js

@@ -0,0 +1,301 @@
+module.exports = {
+  env: {
+    browser: true,
+    es6: true,
+    node: true,
+  },
+  extends: [
+    'plugin:@typescript-eslint/recommended',
+    'plugin:@typescript-eslint/recommended-requiring-type-checking',
+    'prettier',
+    'plugin:storybook/recommended',
+  ],
+  parser: '@typescript-eslint/parser',
+  parserOptions: {
+    project: 'tsconfig.json',
+    tsconfigRootDir: __dirname,
+    sourceType: 'module',
+  },
+  plugins: [
+    'eslint-plugin-import',
+    '@angular-eslint/eslint-plugin',
+    'eslint-plugin-jsdoc',
+    '@angular-eslint/eslint-plugin-template',
+    'eslint-plugin-prefer-arrow',
+    '@typescript-eslint',
+    'prettier',
+  ],
+  rules: {
+    '@angular-eslint/component-class-suffix': 'warn',
+    // TODO: Valid rule, needs retroactive work
+    '@angular-eslint/component-selector': [
+      'warn', //TODO: Valid rule, needs retroactive work
+      {
+        type: 'element',
+        prefix: 'ui',
+        style: 'kebab-case',
+      },
+    ],
+    '@angular-eslint/contextual-lifecycle': 'error',
+    '@angular-eslint/directive-class-suffix': 'error',
+    '@angular-eslint/directive-selector': [
+      'warn',
+      {
+        type: 'attribute',
+        prefix: 'ui',
+        style: 'camelCase',
+      },
+    ],
+    // TODO: Valid rule, needs retroactive work
+    '@angular-eslint/no-conflicting-lifecycle': 'error',
+    '@angular-eslint/no-host-metadata-property': 'warn',
+    // TODO: Valid rule, needs retroactive work
+    '@angular-eslint/no-input-rename': 'error',
+    '@angular-eslint/no-inputs-metadata-property': 'error',
+    '@angular-eslint/no-output-native': 'warn',
+    // TODO: Valid rule, needs retroactive work
+    '@angular-eslint/no-output-on-prefix': 'warn',
+    // TODO: Valid rule, needs retroactive work
+    '@angular-eslint/no-output-rename': 'error',
+    '@angular-eslint/no-outputs-metadata-property': 'error',
+    '@angular-eslint/use-lifecycle-interface': 'warn',
+    // TODO: Valid rule, needs retroactive work
+    '@angular-eslint/use-pipe-transform-interface': 'error',
+    '@typescript-eslint/adjacent-overload-signatures': 'warn',
+    // TODO: Valid rule, needs retroactive work
+    '@typescript-eslint/array-type': 'off',
+    '@typescript-eslint/ban-types': [
+      'warn',
+      {
+        types: {
+          Object: {
+            message: 'Avoid using the `Object` type. Did you mean `object`?',
+          },
+          Function: {
+            message: 'Avoid using the `Function` type. Prefer a specific function type, like `() => void`.',
+          },
+          Boolean: {
+            message: 'Avoid using the `Boolean` type. Did you mean `boolean`?',
+          },
+          Number: {
+            message: 'Avoid using the `Number` type. Did you mean `number`?',
+          },
+          String: {
+            message: 'Avoid using the `String` type. Did you mean `string`?',
+          },
+          Symbol: {
+            message: 'Avoid using the `Symbol` type. Did you mean `symbol`?',
+          },
+        },
+      },
+    ],
+    // TODO: Valid rule, needs retroactive work
+    '@typescript-eslint/consistent-type-assertions': 'warn',
+    // TODO: Valid rule, needs retroactive work
+    '@typescript-eslint/explicit-member-accessibility': [
+      'off',
+      {
+        accessibility: 'explicit',
+      },
+    ],
+    '@typescript-eslint/member-delimiter-style': [
+      'error',
+      {
+        multiline: {
+          delimiter: 'semi',
+          requireLast: true,
+        },
+        singleline: {
+          delimiter: 'semi',
+          requireLast: false,
+        },
+      },
+    ],
+    '@typescript-eslint/naming-convention': 'off',
+    '@typescript-eslint/no-empty-function': 'off',
+    '@typescript-eslint/no-empty-interface': 'error',
+    '@typescript-eslint/no-explicit-any': 'off',
+    '@typescript-eslint/no-inferrable-types': [
+      'error',
+      {
+        ignoreParameters: true,
+      },
+    ],
+    '@typescript-eslint/no-misused-new': 'error',
+    '@typescript-eslint/no-namespace': 'error',
+    '@typescript-eslint/no-non-null-assertion': 'error',
+    '@typescript-eslint/no-parameter-properties': 'off',
+    '@typescript-eslint/no-shadow': [
+      'warn',
+      {
+        hoist: 'all',
+      },
+    ],
+    // TODO: Valid rule, needs retroactive work
+    '@typescript-eslint/no-unused-expressions': 'warn',
+    // TODO: Valid rule, needs retroactive work
+    '@typescript-eslint/no-use-before-define': 'off',
+    '@typescript-eslint/no-var-requires': 'off',
+    '@typescript-eslint/prefer-for-of': 'warn',
+    // TODO: Valid rule, needs retroactive work
+    '@typescript-eslint/prefer-function-type': 'error',
+    '@typescript-eslint/prefer-namespace-keyword': 'error',
+    '@typescript-eslint/semi': ['error', 'always'],
+    '@typescript-eslint/triple-slash-reference': [
+      'error',
+      {
+        path: 'always',
+        types: 'prefer-import',
+        lib: 'always',
+      },
+    ],
+    '@typescript-eslint/type-annotation-spacing': 'error',
+    '@typescript-eslint/unified-signatures': 'error',
+    'arrow-body-style': 'error',
+    'arrow-parens': ['off', 'always'],
+    'brace-style': ['off', 'off'],
+    'comma-dangle': 'off',
+    complexity: 'off',
+    'constructor-super': 'error',
+    curly: 'error',
+    'dot-notation': 'warn',
+    // TODO: Valid rule, needs retroactive work
+    'eol-last': 'error',
+    eqeqeq: ['warn', 'smart'],
+    // TODO: Valid rule, needs retroactive work
+    'guard-for-in': 'error',
+    'id-denylist': [
+      'warn',
+      'any',
+      'Number',
+      'number',
+      'String',
+      'string',
+      'Boolean',
+      'boolean',
+      'Undefined',
+      'undefined',
+    ],
+    // TODO: Valid rule, needs retroactive work
+    'id-match': 'error',
+    'import/no-deprecated': 'warn',
+    'import/order': 'off',
+    'jsdoc/check-alignment': 'error',
+    'linebreak-style': 'off',
+    'max-classes-per-file': 'off',
+    'max-len': [
+      'warn', //TODO: Valid rule, needs retroactive work
+      {
+        ignorePattern: '^import |^export | implements',
+        code: 180,
+      },
+    ],
+    'new-parens': 'off',
+    'newline-per-chained-call': 'off',
+    'no-bitwise': 'warn',
+    // TODO: Valid rule, needs retroactive work
+    'no-caller': 'error',
+    'no-cond-assign': 'error',
+    'no-console': [
+      'error',
+      {
+        allow: [
+          'warn',
+          'dir',
+          'timeLog',
+          'assert',
+          'clear',
+          'count',
+          'countReset',
+          'group',
+          'groupEnd',
+          'table',
+          'dirxml',
+          'error',
+          'groupCollapsed',
+          'Console',
+          'profile',
+          'profileEnd',
+          'timeStamp',
+          'context',
+        ],
+      },
+    ],
+    'no-debugger': 'error',
+    'no-empty': 'off',
+    'no-empty-function': 'off',
+    'no-eval': 'error',
+    'no-extra-semi': 'off',
+    'no-fallthrough': 'error',
+    'no-invalid-this': 'off',
+    'no-irregular-whitespace': 'off',
+    'no-multiple-empty-lines': 'off',
+    'no-new-wrappers': 'error',
+    'no-restricted-imports': ['error', 'rxjs/Rx'],
+    'no-throw-literal': 'warn',
+    // TODO: Valid rule, needs retroactive work
+    'no-trailing-spaces': 'off',
+    'no-undef-init': 'error',
+    'no-underscore-dangle': 'warn',
+    // TODO: Valid rule, needs retroactive work
+    'no-unsafe-finally': 'error',
+    'no-unused-labels': 'error',
+    'no-use-before-define': 'off',
+    'no-var': 'error',
+    'object-shorthand': 'error',
+    'one-var': ['error', 'never'],
+    'padded-blocks': [
+      'off',
+      {
+        blocks: 'never',
+      },
+      {
+        allowSingleLineBlocks: true,
+      },
+    ],
+    'prefer-arrow/prefer-arrow-functions': 'warn',
+    // TODO: Valid rule, needs retroactive work
+    'prefer-const': 'warn',
+    'quote-props': ['error', 'as-needed'],
+    quotes: ['warn', 'single'],
+    // TODO: Valid rule, needs retroactive work
+    radix: 'warn',
+    // TODO: Valid rule, needs retroactive work
+    semi: 'error',
+    'space-in-parens': ['off', 'never'],
+    'use-isnan': 'error',
+    'valid-typeof': 'off',
+    '@typescript-eslint/no-unsafe-assignment': 'warn',
+    // TODO: Valid rule, needs retroactive work
+    '@typescript-eslint/no-unsafe-call': 'warn',
+    // TODO: Valid rule, needs retroactive work
+    '@typescript-eslint/no-unsafe-member-access': 'warn',
+    // TODO: Valid rule, needs retroactive work
+    '@typescript-eslint/no-floating-promises': 'warn',
+    // TODO: Valid rule, needs retroactive work
+    '@typescript-eslint/no-unsafe-return': 'warn',
+    // TODO: Valid rule, needs retroactive work
+    '@typescript-eslint/no-unsafe-argument': 'warn',
+    // TODO: Valid rule, needs retroactive work
+    '@typescript-eslint/restrict-template-expressions': 'warn',
+    // TODO: Valid rule, needs retroactive work
+    '@typescript-eslint/ban-ts-comment': 'warn',
+    // TODO: Valid rule, needs retroactive work
+    '@typescript-eslint/restrict-plus-operands': 'warn',
+    // TODO: Valid rule, needs retroactive work
+    '@typescript-eslint/unbound-method': 'warn',
+    // TODO: Valid rule, needs retroactive work
+    '@typescript-eslint/no-this-alias': 'warn',
+    // TODO: Valid rule, needs retroactive work
+    '@typescript-eslint/no-for-in-array': 'warn',
+    // TODO: Valid rule, needs retroactive work
+    'prettier/prettier': [
+      'warn',
+      {
+        singleQuote: true,
+      },
+    ],
+    // TODO: Valid rule, needs work
+    'prefer-template': 'warn', // TODO: Valid rule, needs retroactive work
+  },
+};

package/.github/README.md

@@ -0,0 +1,81 @@
+[![FOSSA Status](https://app.fossa.com/api/projects/git%2Bgithub.com%2FTestGorilla-BV%2Ftgo-ui.svg?type=shield)](https://app.fossa.com/projects/git%2Bgithub.com%2FTestGorilla-BV%2Ftgo-ui?ref=badge_shield)
+
+# TestGorilla UI Library
+
+# Components
+* Banner
+* Banner Action
+* Button
+* Card
+* Create Password
+* Field
+* Forgot Password
+* Login
+* Logo
+* NavBar
+* Navigation
+* Paginator
+* Create Account
+* Status
+* Table
+
+## Storybook Development Server
+
+Run `npm run storybook`
+
+## Build Storybook
+
+Run `npm run build-storybook`
+
+## Build UI Library
+
+Run `ng build` to build the ui library. 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.
+
+## Visual regression
+
+We are using playwright on top of storybook to capture the visual differences. Code for the same can be found in `common.spec.ts` file. 
+
+In order to update the existing snapshots, we need to use DOCKER to update, since updating from mac or windows has its own effect on the rendering, we might want to use the following way to update the snapshots to be consistant with CI.
+
+```
+docker run --rm --network host -v $(pwd):/work/ -w /work/ -it mcr.microsoft.com/playwright:latest /bin/bash
+npx playwright install
+npm run storybook &
+npx playwright test e2e/<file_name>.spec.ts  --update-snapshots
+```
+
+if you see the following error, you can skip them conviniently. This will not affect the tests, just that we will have the reports in same directory. We need the reports to be in a single directory to store artifacts in CI. So we can ignore them. 
+```
+root@docker-desktop:/work# npx playwright test e2e/common.spec.ts  --update-snapshots
+Configuration Error: HTML reporter output folder clashes with the tests output folder:
+
+    html reporter folder: /work/test-results/html-report
+    test results folder: /work/test-results
+
+HTML reporter will clear its output directory prior to being generated, which will lead to the artifact loss.
+```
+
+In order to execute the visual tests, we need to use same docker so that the screenshots are aligned with the same OS.
+
+```
+docker run --rm --network host -v $(pwd):/work/ -w /work/ -it mcr.microsoft.com/playwright:latest /bin/bash
+npx playwright install
+npm run storybook &
+npx playwright test e2e/<file_name>.spec.ts
+```
+
+Currently we are using `toMatchSnapshot` instead of the latest `toHaveScreenshot` from playwright. Since `toHaveScreenshot` doesn't support firefox now, we are going ahead with `toMatchSnapshot`. In (near) future once it supports firefox, we will be using the latest `toHaveScreenshot` method.
+
+### Visual Regression Important to note !!!
+
+* To add a new component to visual regression one has to provide the `/iframe.html?id=<element_id>` in the file `common.spec.ts` which will take care of taking snapshot whenever we initiate visual tests. 
+* We need to have the elements in such a way that `element_id` in `/iframe.html?id=<element_id>` should be present in the DOM. i.e., we should have a dom element `<element_id> ... </element_id>`. 
+* We are using that element_id to wait until its fully loaded and then we are taking the snapshot.

package/.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+npm run pre-commit

package/.prettierignore

@@ -0,0 +1,2 @@
+node_modules
+src/test.ts

package/.prettierrc

@@ -0,0 +1,13 @@
+{
+  "printWidth": 120,
+  "tabWidth": 2,
+  "useTabs": false,
+  "semi": true,
+  "singleQuote": true,
+  "trailingComma": "es5",
+  "bracketSpacing": true,
+  "arrowParens": "avoid",
+  "requirePragma": false,
+  "insertPragma": false,
+  "proseWrap": "preserve"
+}

package/.storybook/main.js

@@ -0,0 +1,25 @@
+/** @type { import('@storybook/angular').StorybookConfig } */
+const config = {
+  stories: ['../projects/tgo-canopy-ui/**/*.stories.@(js|jsx|ts|tsx|mdx)'],
+
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-interactions',
+    '@storybook/addon-a11y',
+    '@storybook/addon-designs',
+  ],
+
+  framework: {
+    name: '@storybook/angular',
+    options: {},
+  },
+
+  staticDirs: ['../projects/tgo-canopy-ui/assets', '../projects/tgo-canopy-ui/mocked-assets'],
+
+  docs: {
+    autodocs: true,
+  },
+};
+
+export default config;

package/.storybook/preview-head.html

@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <link
+      href="https://fonts.googleapis.com/css?family=Open+Sans:400,600,700&display=swap&subset=greek,latin-ext"
+      rel="stylesheet"
+    />
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
+  </head>
+</html>

package/.storybook/preview.js

@@ -0,0 +1,107 @@
+import { setCompodocJson } from '@storybook/addon-docs/angular';
+import { HttpClientModule } from '@angular/common/http';
+import {applicationConfig, componentWrapperDecorator} from '@storybook/angular';
+import { importProvidersFrom } from '@angular/core';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import docJson from '../documentation.json';
+setCompodocJson(docJson);
+
+const customViewports = {
+  mobileSmall: {
+    name: 'Mobile Small',
+    styles: {
+      width: '360px',
+      height: '800px',
+    },
+  },
+  mobileLarge: {
+    name: 'Mobile Large',
+    styles: {
+      width: '414px',
+      height: '896px',
+    },
+  },
+  tabletSmall: {
+    name: 'Tablet Small',
+    styles: {
+      width: '600px',
+      height: '962px',
+    },
+  },
+  tabletLarge: {
+    name: 'Tablet Large',
+    styles: {
+      width: '1280px',
+      height: '800px',
+    },
+  },
+  desktopSmall: {
+    name: 'Desktop Small',
+    styles: {
+      width: '1024px',
+      height: '768px',
+    },
+  },
+  desktopWide: {
+    name: 'Desktop Wide',
+    styles: {
+      width: '1920px',
+      height: '1080px',
+    },
+  },
+};
+
+
+const decorators = [
+  applicationConfig({
+    providers: [importProvidersFrom(HttpClientModule), importProvidersFrom(BrowserAnimationsModule)]
+  }),
+  componentWrapperDecorator(
+    (story) => `<div [class]="myTheme">${story}</div>`,
+    ({ globals }) => {
+      if (globals['theme'] === 'Rebrand - Light BG') {
+        document.body.setAttribute('theme', 'light');
+        return { myTheme: 'light' }
+      } else if (globals['theme'] === 'Rebrand - Dark BG') {
+        document.body.setAttribute('theme', 'dark');
+        return { myTheme: 'dark' }
+      } else  {
+        document.body.setAttribute('theme', 'classic');
+        return { myTheme: 'classic' };
+      }
+    }
+  ),
+];
+
+/** @type { import('@storybook/angular').Preview } */
+const preview = {
+
+  actions: { argTypesRegex: '^on[A-Z].*' },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+  docs: { inlineStories: true },
+  viewport: {
+    viewports: {
+      ...customViewports,
+    },
+  },
+  globalTypes: {
+    theme: {
+      description: 'Global theme for components',
+      defaultValue: 'Rebrand - Light BG',
+      toolbar: {
+        title: 'Theme',
+        icon: 'circlehollow',
+        items: ['Rebrand - Light BG', 'Rebrand - Dark BG', 'Classic'],
+        dynamicTitle: true,
+      },
+    },
+  },
+  decorators: decorators
+};
+
+export default preview;