Component consolidation

.env.yarn.example

@@ -0,0 +1 @@
+GITHUB_AUTH_TOKEN=YOUR_AUTH_TOKEN_HERE

.eslintrc.base.js

@@ -57,4 +57,45 @@ module.exports = {
       },
     ],
   },
+  overrides: [
+    {
+      settings: {
+    "import/extensions": [".js", ".jsx", ".ts", ".tsx"],
+    "import/parsers": {
+      "@typescript-eslint/parser": [".ts", ".tsx"]
+    },
+    "import/resolver": {
+      "node": {
+        "extensions": [".js", ".jsx", ".ts", ".tsx"]
+      }
+    }
+  },
+      files: ["*.ts", "*.tsx"],
+      parser: "@typescript-eslint/parser",
+      extends: [
+        "plugin:@typescript-eslint/eslint-recommended",
+        "plugin:@typescript-eslint/recommended"
+      ],
+      plugins: ["eslint-plugin-import-helpers", "@typescript-eslint"],
+      rules: {
+        "import/extensions": [
+          "error",
+          "ignorePackages",
+          {
+            "js": "never",
+            "jsx": "never",
+            "ts": "never",
+            "tsx": "never"
+          }
+        ],
+        "import/prefer-default-export": "off",
+        "react/jsx-filename-extension": ["error", { extensions: [".js", ".jsx", ".ts", ".tsx"] }],
+        "@typescript-eslint/ban-ts-comment": ["warn"],
+        "no-unused-vars": "off",
+        "react/require-default-props": "off",
+        "@typescript-eslint/no-unused-vars": ["error", { argsIgnorePattern: "^_", varsIgnorePattern: "^_" }],
+        "@typescript-eslint/no-empty-function": "off"
+      }
+    },
+  ],
 };

.github/pull_request_template.md

@@ -10,7 +10,4 @@
 - [Unity reference site](https://asu.github.io/asu-unity-stack/)
 - [Unity Design Kit](https://shared-assets.adobe.com/link/fb14b288-bf63-47e0-5d30-384de5560455)
 
-### FOR APPROVERS
-
-- [Percy build approval](https://percy.io/5eae92d9/-all-UDS-packages)
 

.husky/prepare-commit-msg

@@ -3,4 +3,9 @@
 # don't execute if in CI context
 [ -n "$CI" ] && exit 0
 
+# Exit if the commit message is being created by a rebase, merge, or another Git operation
+if [ -n "$2" ]; then
+  exit 0
+fi
+
 exec < /dev/tty && git cz --hook || true

.storybook-config/dataLayerListener/Panel.js

@@ -1,7 +1,7 @@
 import React from "react";
 import { useAddonState, useChannel } from "@storybook/api";
 import { styled } from "@storybook/theming";
-import { AddonPanel, Button } from "@storybook/components";
+import { AddonPanel, Button, Form } from "@storybook/components";
 import { Source } from '@storybook/blocks';
 import { ADDON_ID, EVENTS } from "./constants.js";
 
@@ -12,8 +12,9 @@ const SourceWrapper = styled(Source)({
 })
 
 export const Panel = (props) => {
-  const [{dataLayer}, setState] = useAddonState(ADDON_ID, {
-    dataLayer: []
+  const [{dataLayer, filter}, setState] = useAddonState(ADDON_ID, {
+    dataLayer: [],
+    filter: "!gtm.",
   });
 
   // useChannel({
@@ -30,8 +31,31 @@ export const Panel = (props) => {
     setState((state) => ({ ...state, dataLayer: [] }));
   }
 
+  const handleChange= (e) => {
+    const {target: {value = ""}} = e;
+    setState((state) => ({ ...state, filter: value }));
+  }
+
+  const filteredData = dataLayer.filter(({event}) => {
+    /**
+     * A lot of events are logged with prefix "gtm." and creates a lot of noise,
+     * most of the time we just want to see the events we are triggering.
+     * Leaving the option to not filter out gtm events.
+     */
+    if (filter.slice(0,1) === "") {
+      return true;
+    } else if (filter.slice(0,1) === "!" && filter.slice(1).length > 0) {
+      return event.indexOf(filter.slice(1)) === -1;
+    } else if (filter.length > 0) {
+      return event.indexOf(filter) > -1;
+    }
+  });
+
   return (
     <AddonPanel {...props}>
+      <Form.Field label="Event filter">
+        <Form.Input id="filter" placeholder="filter" value={filter} onChange={handleChange}/>
+      </Form.Field>
       <Button
         small
         primary
@@ -46,7 +70,7 @@ export const Panel = (props) => {
       >
         Clear
       </Button>
-      <SourceWrapper code={`${JSON.stringify(dataLayer, " ", 2)}`} language='json' format={true} />
+      <SourceWrapper code={`${JSON.stringify(filteredData, " ", 2)}`} language='json' format={true} />
     </AddonPanel>
   );
 };

.storybook-config/dataLayerListener/preset/manager.js

@@ -9,7 +9,8 @@ addons.register(ADDON_ID, () => {
     type: types.PANEL,
     title: function title(){
       const [{ dataLayer }] = useAddonState(ADDON_ID, {
-        dataLayer: []
+        dataLayer: [],
+        filter: "!gtm.",
       });
       return `Data Layer${dataLayer.length ? ` (${dataLayer.length})`: ``}`;
     },

.storybook-config/withColumns.js

@@ -1,6 +1,4 @@
-
-import React from "react";
-import { useMemo, useEffect } from '@storybook/addons';
+import React, { useMemo, useEffect } from "react";
 import { clearStyles, addStyle } from './helpers/styleInjection';
 
 export const withColumns = (StoryFn, context) => {
@@ -29,6 +27,8 @@ export const withColumns = (StoryFn, context) => {
             linear-gradient(90deg,var(--gridbg) var(--gridcol), var(--gridbg2) -1px),
             linear-gradient(90deg,var(--gridbg) var(--gridcol), var(--gridbg2) -1px),
             linear-gradient(90deg,var(--gridbg) var(--gridcol), var(--gridbg2) -1px),
+/*...*/
+/*...*/
             linear-gradient(90deg,var(--gridbg) var(--gridcol), var(--gridbg2) -1px),
             linear-gradient(-90deg,var(--gridbg) var(--gridcol), var(--gridbg2) -1px),
             linear-gradient(-90deg,var(--gridbg) var(--gridcol), var(--gridbg2) -1px),
@@ -70,7 +70,7 @@ export const withColumns = (StoryFn, context) => {
         }
     }
     `;
-  });
+  }, [context.viewMode, context.id]);
 
   useEffect(() => {
     const selectorId =
@@ -85,7 +85,5 @@ export const withColumns = (StoryFn, context) => {
     addStyle(selectorId, columnsStyles);
   }, [isActive, columnsStyles, globals]);
 
-  return <>
-    <StoryFn />
-  </>
+  return StoryFn();
 };

.yarnrc.yml

@@ -0,0 +1,9 @@
+nodeLinker: node-modules
+
+npmScopes:
+  asu:
+    npmAuthToken: "${GITHUB_AUTH_TOKEN-fallback}"
+    npmPublishRegistry: "https://npm.pkg.github.com"
+    npmRegistryServer: "https://npm.pkg.github.com"
+
+yarnPath: .yarn/releases/yarn-4.4.0.cjs

Jenkinsfile

@@ -15,6 +15,12 @@ spec:
     command:
     - cat
     tty: true
+  - name: playwright
+    image: 'mcr.microsoft.com/playwright:v1.48.0-noble'
+    imagePullPolicy: Always
+    command:
+    - cat
+    tty: true
   - name: puppeteer
     image: 'ghcr.io/puppeteer/puppeteer:22'
     imagePullPolicy: Always
@@ -31,7 +37,6 @@ spec:
         RAW_GH_TOKEN = credentials('github-org-asu-pac')
         NPM_TOKEN = credentials('NPM_TOKEN')
         NODE_AUTH_TOKEN = credentials('github-org-asu-pac')
-        PERCY_TOKEN = credentials('PERCY_TOKEN')
     }
     options {
       buildDiscarder(logRotator(numToKeepStr: '5', artifactNumToKeepStr: '5'))
@@ -45,11 +50,9 @@ spec:
             steps {
                 container('node20') {
                   script {
-                    echo '## Configure .npmrc file for @asu registry...'
-                    writeFile file: '.npmrc', text: '@asu:registry=https://npm.pkg.github.com/ \n' +
-                      '//npm.pkg.github.com/:_authToken=' + env.RAW_GH_TOKEN_PSW
+                    echo '## Configure env file for @asu registry...'
                     echo '## Install and build Unity monorepo...'
-                    sh 'yarn install --frozen-lockfile'
+                    sh 'yarn install --immutable'
                     sh 'yarn build'
 
                     withEnv(["GH_TOKEN=${RAW_GH_TOKEN_PSW}"]) {
@@ -63,41 +66,47 @@ spec:
         stage('Build') {
             steps {
                 container('node20') {
-                    echo '## Configure .npmrc file for Github Package registry...'
-                    writeFile file: '.npmrc', text: '@asu:registry=https://npm.pkg.github.com/ \n' +
-                      '//npm.pkg.github.com/:_authToken=' + env.RAW_GH_TOKEN_PSW
+                  withEnv(["GITHUB_AUTH_TOKEN=${RAW_GH_TOKEN_PSW}"]) {
                     echo '## Install and build Unity monorepo...'
-                    sh 'yarn install --frozen-lockfile'
+                    sh 'yarn install'
                     sh 'yarn build'
+                  }
                 }
             }
         }
         stage('Test') {
             steps {
-                container('node20') {
+                container('playwright') {
                     echo '## Running jests tests...'
                     sh 'yarn test'
                 }
             }
         }
-        stage('Visual Regression Testing') {
+        stage('Security Check') {
           when {
-            allOf {
-              expression { env.CHANGE_TARGET == 'dev' }
-              expression { // Only run if there are changes in packages directory
-                sh(returnStatus: true, script: 'git diff origin/dev... --name-only | grep --quiet "^packages/.*"') == 0
-              }
-            }
+            expression { env.CHANGE_TARGET == 'dev' }
           }
           steps {
               container('node20') {
-                echo 'building storybook...'
-                sh 'yarn build-storybook'
-              }
-              container('puppeteer') {
-                  echo 'running percy tests...'
-                  sh 'yarn percy-test'
-              }
+                withEnv(["GITHUB_AUTH_TOKEN=${RAW_GH_TOKEN_PSW}"]) {
+                  echo '## Running security checks...'
+                  sh 'yarn install --immutable'
+                  sh 'yarn npm audit --all --severity critical'
+                  script {
+                  def result = sh(
+                      script: 'yarn npm audit --all --severity high',
+                      returnStatus: true
+                  )
+                  if (result != 0) {
+                    slackSend(
+                        channel: '#prd-uds',
+                        color: 'warning',
+                        message: "@uds-developers Action might be needed: ${env.RUN_DISPLAY_URL}"
+                    )
+                  }
+                  }
+                }
+            }
           }
         }
         stage('Publish') {
@@ -123,7 +132,7 @@ spec:
                 container('node20') {
                     script {
                         echo '# Final, post-publish install and build to include just published pkgs...'
-                        sh 'yarn install --frozen-lockfile'
+                        sh 'yarn install --immutable'
                         sh 'yarn build-storybook'
 
                         withEnv(["GH_TOKEN=${RAW_GH_TOKEN_PSW}"]) {