Merge pull request #1346 from ASU/component-consolidation

Component consolidation

Author: davidornelas11

.env.yarn.example

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

.eslintrc.base.js

@@ -9,6 +9,11 @@ module.exports = {
       // Automatically detect the react version
       version: "detect",
     },
+    "import/resolver": {
+      "node": {
+        "extensions": [".js", ".jsx", ".ts", ".tsx"]
+      }
+    }
   },
   env: {
     browser: true,
@@ -22,6 +27,7 @@ module.exports = {
     // Make this the last element so prettier config overrides other formatting rules
     "plugin:prettier/recommended",
     "plugin:jest/recommended",
+    // "plugin:import/typescript",
   ],
   parserOptions: {
     ecmaFeatures: {
@@ -57,4 +63,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

@@ -14,6 +14,3 @@
 - [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();
 };

.yarn/releases/yarn-4.4.0.cjs

@@ -0,0 +1,11 @@
+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
+
+tsEnableAutoTypes: true