@hubspot/eslint-config-ui-extensions 1.0.0 → 1.1.1

package/README.md

@@ -180,6 +180,7 @@ export default defineConfig([
 | [no-browser-storage](docs/rules/no-browser-storage.md)                                 | Prevent usage of browser storage APIs (localStorage and sessionStorage) in UI Extensions, which run in a sandboxed web worker environment where these APIs are not available. |    |
 | [no-console](docs/rules/no-console.md)                                                 | Prevent usage of console methods in UI Extensions in favor of the SDK logger utility.                                                                                         |    |
 | [no-dom-access](docs/rules/no-dom-access.md)                                           | Prevent access to the DOM (document object) in UI Extensions, which run in a sandboxed web worker without DOM access.                                                         |    |
+| [no-experimental-imports](docs/rules/no-experimental-imports.md)                       | Warn when importing from the experimental path of @hubspot/ui-extensions.                                                                                                     |    |
 | [no-html-elements](docs/rules/no-html-elements.md)                                     | Disallow usage of unsupported HTML elements in UI Extensions.                                                                                                                 |    |
 | [no-invalid-extension-point-imports](docs/rules/no-invalid-extension-point-imports.md) | Prevent importing components from unsupported extension points.                                                                                                               |    |
 | [no-invalid-image-src](docs/rules/no-invalid-image-src.md)                             | Only allow valid image URLs in the src attribute of Image components from @hubspot/ui-extensions.                                                                             | 🔧 |

package/dist/__tests__/index.spec.js

@@ -151,6 +151,26 @@ describe('config', () => {
             expect(customRuleError).toBeUndefined();
         });
     });
+    describe('custom no-experimental-imports rule', () => {
+        it('should warn when importing from experimental path', async () => {
+            const code = `
+        import { Grid } from '@hubspot/ui-extensions/experimental';
+      `;
+            const messages = await lintCode(code, 'src/app/cards/Component.tsx', '/path/to/project');
+            const customRuleWarning = messages.find((m) => m.ruleId === '@hubspot/ui-extensions/no-experimental-imports');
+            expect(customRuleWarning).toBeDefined();
+            expect(customRuleWarning?.severity).toBe(1);
+            expect(customRuleWarning?.message).toContain('experimental');
+        });
+        it('should allow stable @hubspot/ui-extensions imports', async () => {
+            const code = `
+        import { Text, Button } from '@hubspot/ui-extensions';
+      `;
+            const messages = await lintCode(code, 'src/app/cards/Component.tsx', '/path/to/project');
+            const customRuleWarning = messages.find((m) => m.ruleId === '@hubspot/ui-extensions/no-experimental-imports');
+            expect(customRuleWarning).toBeUndefined();
+        });
+    });
     describe('custom no-console rule', () => {
         it('should warn when using console.log()', async () => {
             const code = `

package/dist/__tests__/rules/no-experimental-imports.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/__tests__/rules/no-experimental-imports.spec.js

@@ -0,0 +1,67 @@
+import { RuleTester } from 'eslint';
+import { noExperimentalImports } from "../../rules/no-experimental-imports.js";
+import { languageOptions } from "../../runtime.js";
+const ruleTesterOptions = {
+    languageOptions: {
+        ...languageOptions,
+        parserOptions: {
+            ecmaFeatures: {
+                jsx: true,
+            },
+        },
+    },
+};
+const experimentalImport = `
+  import { Grid } from '@hubspot/ui-extensions/experimental';
+`;
+const experimentalSubpathImport = `
+  import { getDistanceFromTshirtSize } from '@hubspot/ui-extensions/experimental/Layout/constants';
+`;
+const stableImport = `
+  import { Text, Button } from '@hubspot/ui-extensions';
+`;
+const otherPackageImport = `
+  import { useState } from 'react';
+`;
+describe('no-experimental-imports', () => {
+    const ruleTester = new RuleTester(ruleTesterOptions);
+    ruleTester.run('no-experimental-imports', noExperimentalImports, {
+        valid: [
+            {
+                name: 'stable @hubspot/ui-extensions import',
+                code: stableImport,
+                filename: '/path/to/project/src/app/cards/Component.tsx',
+            },
+            {
+                name: 'other package import',
+                code: otherPackageImport,
+                filename: '/path/to/project/src/app/cards/Component.tsx',
+            },
+            {
+                name: 'crm extension point import',
+                code: `import { useCrmProperties } from '@hubspot/ui-extensions/crm/hooks';`,
+                filename: '/path/to/project/src/app/cards/Component.tsx',
+            },
+        ],
+        invalid: [
+            {
+                name: 'import from experimental path',
+                code: experimentalImport,
+                filename: '/path/to/project/src/app/cards/Component.tsx',
+                errors: [{ messageId: 'noExperimentalImports' }],
+            },
+            {
+                name: 'import from experimental subpath',
+                code: experimentalSubpathImport,
+                filename: '/path/to/project/src/app/extensions/Component.tsx',
+                errors: [{ messageId: 'noExperimentalImports' }],
+            },
+            {
+                name: 'default import from experimental',
+                code: `import ExperimentalComponent from '@hubspot/ui-extensions/experimental';`,
+                filename: '/path/to/project/src/app/settings/Component.tsx',
+                errors: [{ messageId: 'noExperimentalImports' }],
+            },
+        ],
+    });
+});

package/dist/__tests__/rules/no-restricted-globals.spec.js

@@ -68,6 +68,21 @@ describe('no-restricted-globals', () => {
           function navigate(location) {
             return location.href;
           }
+        `,
+            },
+            {
+                name: 'allows navigator as a local variable',
+                code: `
+          const navigator = { language: 'en' };
+          console.log(navigator.language);
+        `,
+            },
+            {
+                name: 'allows navigator as a function parameter',
+                code: `
+          function getLocale(navigator) {
+            return navigator.language;
+          }
         `,
             },
             {
@@ -75,6 +90,13 @@ describe('no-restricted-globals', () => {
                 code: `
           const { history } = router;
           history.push('/test');
+        `,
+            },
+            {
+                name: 'allows navigator as an object property key',
+                code: `
+          const obj = { navigator: { language: 'en' } };
+          obj.navigator.language;
         `,
             },
             {
@@ -179,6 +201,20 @@ describe('no-restricted-globals', () => {
         `,
                 errors: [{ messageId: 'history' }],
             },
+            {
+                name: 'reports error for navigator.language access',
+                code: `
+          const lang = navigator.language;
+        `,
+                errors: [{ messageId: 'navigator' }],
+            },
+            {
+                name: 'reports error for navigator.clipboard access',
+                code: `
+          navigator.clipboard.writeText('hello');
+        `,
+                errors: [{ messageId: 'navigator' }],
+            },
             {
                 name: 'reports error for window.importScripts',
                 code: `
@@ -207,6 +243,13 @@ describe('no-restricted-globals', () => {
         `,
                 errors: [{ messageId: 'location' }],
             },
+            {
+                name: 'reports error for window.navigator',
+                code: `
+          const ua = window.navigator.userAgent;
+        `,
+                errors: [{ messageId: 'navigator' }],
+            },
             {
                 name: 'reports error for window.history',
                 code: `
@@ -228,6 +271,13 @@ describe('no-restricted-globals', () => {
         `,
                 errors: [{ messageId: 'addEventListener' }],
             },
+            {
+                name: 'reports error for self.navigator',
+                code: `
+          const online = self.navigator.onLine;
+        `,
+                errors: [{ messageId: 'navigator' }],
+            },
             {
                 name: 'reports error for self.location',
                 code: `
@@ -256,6 +306,13 @@ describe('no-restricted-globals', () => {
         `,
                 errors: [{ messageId: 'location' }],
             },
+            {
+                name: 'reports error for globalThis.navigator',
+                code: `
+          globalThis.navigator.geolocation.getCurrentPosition(cb);
+        `,
+                errors: [{ messageId: 'navigator' }],
+            },
             {
                 name: 'reports error for globalThis.history',
                 code: `
@@ -263,6 +320,13 @@ describe('no-restricted-globals', () => {
         `,
                 errors: [{ messageId: 'history' }],
             },
+            {
+                name: 'reports error for bracket notation window["navigator"]',
+                code: `
+          const devices = window['navigator'].mediaDevices;
+        `,
+                errors: [{ messageId: 'navigator' }],
+            },
             {
                 name: 'reports error for bracket notation window["location"]',
                 code: `
@@ -284,6 +348,24 @@ describe('no-restricted-globals', () => {
         `,
                 errors: [{ messageId: 'location' }],
             },
+            {
+                name: 'reports error for navigator in React component',
+                code: `
+          import { Text } from '@hubspot/ui-extensions';
+          function Component() {
+            const ua = navigator.userAgent;
+            return <Text>{ua}</Text>;
+          }
+        `,
+                errors: [{ messageId: 'navigator' }],
+            },
+            {
+                name: 'reports error for navigator in arrow function',
+                code: `
+          const getLangs = () => navigator.languages;
+        `,
+                errors: [{ messageId: 'navigator' }],
+            },
             {
                 name: 'reports error in React component',
                 code: `
@@ -382,6 +464,12 @@ describe('no-restricted-globals', () => {
           interface Router {
             history: typeof history;
           }
+        `,
+            },
+            {
+                name: 'allows navigator type in type alias',
+                code: `
+          type NavigatorType = typeof navigator;
         `,
             },
             {
@@ -421,6 +509,17 @@ describe('no-restricted-globals', () => {
         `,
                 errors: [{ messageId: 'history' }],
             },
+            {
+                name: 'reports error for navigator usage after type declarations',
+                code: `
+          type NavigatorType = typeof navigator;
+
+          function getLocale() {
+            return navigator.language;
+          }
+        `,
+                errors: [{ messageId: 'navigator' }],
+            },
             {
                 name: 'reports error for addEventListener with typed handler',
                 code: `

package/dist/__tests__/utils/import-utils.spec.js

@@ -1,4 +1,4 @@
-import { getImportedComponentName, isHubspotExtensibilityImport, isRelativeImport, } from "../../utils/import-utils.js";
+import { getImportedComponentName, isExperimentalImport, isHubspotExtensibilityImport, isRelativeImport, } from "../../utils/import-utils.js";
 describe('import-utils', () => {
     describe('isHubspotExtensibilityImport', () => {
         it('should return true for @hubspot/ui-extensions imports', () => {
@@ -151,4 +151,26 @@ describe('import-utils', () => {
             expect(isRelativeImport('')).toBe(false);
         });
     });
+    describe('isExperimentalImport', () => {
+        it('should return true for @hubspot/ui-extensions/experimental', () => {
+            expect(isExperimentalImport('@hubspot/ui-extensions/experimental')).toBe(true);
+        });
+        it('should return true for experimental subpaths', () => {
+            expect(isExperimentalImport('@hubspot/ui-extensions/experimental/Layout')).toBe(true);
+            expect(isExperimentalImport('@hubspot/ui-extensions/experimental/Layout/Grid')).toBe(true);
+        });
+        it('should return false for stable @hubspot/ui-extensions imports', () => {
+            expect(isExperimentalImport('@hubspot/ui-extensions')).toBe(false);
+            expect(isExperimentalImport('@hubspot/ui-extensions/crm')).toBe(false);
+            expect(isExperimentalImport('@hubspot/ui-extensions/hooks')).toBe(false);
+        });
+        it('should return false for non-hubspot packages', () => {
+            expect(isExperimentalImport('react')).toBe(false);
+            expect(isExperimentalImport('some-package/experimental')).toBe(false);
+        });
+        it('should return false for non-string values', () => {
+            expect(isExperimentalImport(null)).toBe(false);
+            expect(isExperimentalImport(undefined)).toBe(false);
+        });
+    });
 });

package/dist/index.js

@@ -3,6 +3,7 @@ import { noBrowserDialogs } from "./rules/no-browser-dialogs.js";
 import { noBrowserStorage } from "./rules/no-browser-storage.js";
 import { noConsole } from "./rules/no-console.js";
 import { noDomAccess } from "./rules/no-dom-access.js";
+import { noExperimentalImports } from "./rules/no-experimental-imports.js";
 import { unsupportedHtmlElements } from "./rules/no-html-elements.js";
 import { noInvalidExtensionPointImports } from "./rules/no-invalid-extension-point-imports.js";
 import { noInvalidImageSrc } from "./rules/no-invalid-image-src.js";
@@ -18,6 +19,7 @@ const rules = {
     'no-browser-dialogs': noBrowserDialogs,
     'no-console': noConsole,
     'no-dom-access': noDomAccess,
+    'no-experimental-imports': noExperimentalImports,
     'no-browser-storage': noBrowserStorage,
     'no-parent-imports': noParentImports,
     'no-restricted-globals': noRestrictedGlobals,
@@ -55,6 +57,7 @@ export const config = [
             '@hubspot/ui-extensions/no-native-http': 'error',
             '@hubspot/ui-extensions/no-browser-dialogs': 'error',
             '@hubspot/ui-extensions/no-console': 'warn',
+            '@hubspot/ui-extensions/no-experimental-imports': 'warn',
             '@hubspot/ui-extensions/no-dom-access': 'error',
             '@hubspot/ui-extensions/no-browser-storage': 'error',
             '@hubspot/ui-extensions/no-parent-imports': 'error',

package/dist/rules/no-experimental-imports.d.ts

@@ -0,0 +1,2 @@
+import type { Rule } from 'eslint';
+export declare const noExperimentalImports: Rule.RuleModule;

package/dist/rules/no-experimental-imports.js

@@ -0,0 +1,29 @@
+import { isExperimentalImport } from "../utils/import-utils.js";
+export const noExperimentalImports = {
+    meta: {
+        type: 'suggestion',
+        docs: {
+            description: 'Warn when importing from the experimental path of @hubspot/ui-extensions.',
+            url: 'https://developers.hubspot.com/docs/apps/developer-platform/add-features/ui-extensibility/linting/rules/no-experimental-imports',
+        },
+        messages: {
+            noExperimentalImports: 'Imports from "{{importSource}}" use experimental APIs. Experimental components are not stable and are not recommended for production.',
+        },
+        schema: [],
+    },
+    create(context) {
+        return {
+            ImportDeclaration(node) {
+                const importSource = node.source.value;
+                if (!isExperimentalImport(importSource)) {
+                    return;
+                }
+                context.report({
+                    node,
+                    messageId: 'noExperimentalImports',
+                    data: { importSource },
+                });
+            },
+        };
+    },
+};

package/dist/rules/no-restricted-globals.js

@@ -10,6 +10,7 @@ const RESTRICTED_FUNCTION_GLOBALS = new Set([
 const RESTRICTED_VALUE_GLOBALS = new Set([
     'location',
     'history',
+    'navigator',
 ]);
 // All restricted globals (for Identifier checking)
 const ALL_RESTRICTED_GLOBALS = new Set([
@@ -29,6 +30,7 @@ export const noRestrictedGlobals = {
             removeEventListener: 'removeEventListener() is not supported. Use React event props instead.',
             location: 'location is not available. Use context.location instead.',
             history: 'history is not available. Use <Link> or actions.openIframeModal() instead.',
+            navigator: 'navigator is not available as expected. Use provided context and actions instead.',
         },
         schema: [],
     },

package/dist/runtime.js

@@ -1,6 +1,6 @@
 import globals from 'globals';
 export const languageOptions = {
-    ecmaVersion: 6,
+    ecmaVersion: 2020,
     sourceType: 'module',
     globals: {
         ...globals.worker,

package/dist/utils/import-utils.d.ts

@@ -31,3 +31,4 @@ export declare const getImportedComponentName: (node: ImportDeclaration, compone
  * @returns True if the import source is a relative import
  */
 export declare const isRelativeImport: (importSource: unknown) => importSource is string;
+export declare const isExperimentalImport: (importSource: unknown) => boolean;

package/dist/utils/import-utils.js

@@ -45,3 +45,8 @@ export const isRelativeImport = (importSource) => {
     return (typeof importSource === 'string' &&
         (importSource.startsWith('./') || importSource.startsWith('../')));
 };
+export const isExperimentalImport = (importSource) => {
+    return (typeof importSource === 'string' &&
+        isHubspotExtensibilityImport(importSource) &&
+        importSource.includes('/experimental'));
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hubspot/eslint-config-ui-extensions",
-  "version": "1.0.0",
+  "version": "1.1.1",
   "type": "module",
   "description": "eslint plugins for HubSpot React-based UI Extensions",
   "keywords": [