@hubspot/eslint-config-ui-extensions 0.12.0 → 1.1.0

package/dist/__tests__/rules/no-html-elements.spec.js

@@ -0,0 +1,142 @@
+import { RuleTester } from 'eslint';
+import { unsupportedHtmlElements } from "../../rules/no-html-elements.js";
+import { languageOptions } from "../../runtime.js";
+const ruleTester = new RuleTester({
+    languageOptions: {
+        ...languageOptions,
+        parserOptions: {
+            ecmaFeatures: {
+                jsx: true,
+            },
+        },
+    },
+});
+const simpleValidElement = `
+function App() {
+  return <Button>Click Me</Button>
+};
+`;
+const nestedValidElements = `
+function App() {
+  return (
+    <Box>
+      <Text>A Headline</Text>
+      <Button>Click Me</Button>
+    </Box>
+  );
+};
+`;
+const reactFragmentValidElements = `
+function App() {
+  return (
+    <>
+      <Text>Fragment Text</Text>
+      <Button>Click Me</Button>
+    </>
+  );
+};
+`;
+const customDivValidElement = `
+function Div() {
+  return <Box>Custom Div</Box>
+};
+
+function App() {
+  return <Div />;
+};
+`;
+const simpleInvalidElement = `
+function App() {
+  return <div>Invalid Element</div>;
+};
+`;
+const nestedInvalidElements = `
+function App() {
+  return (
+    <div>
+      <h1>Invalid Header</h1>
+      <p>Invalid paragraph content <a href="#">with a link</a> and a <span style="font-weight: bold;">span tag for extra styling.</span></p>
+      <button>Click Me</button>
+    </div>
+  );
+};
+`;
+const selfClosingInvalidElement = `
+function App() {
+  return <img src="image.png" alt="Invalid Image" />;
+};
+`;
+describe('no-html-elements', () => {
+    ruleTester.run('no-html-elements', unsupportedHtmlElements, {
+        valid: [
+            {
+                name: 'allows simple valid UI Extension components',
+                code: simpleValidElement,
+            },
+            {
+                name: 'allows nested valid UI Extension components',
+                code: nestedValidElements,
+            },
+            {
+                name: 'allows React Fragment syntax',
+                code: reactFragmentValidElements,
+            },
+            {
+                name: 'allows PascalCase component names that match HTML element names',
+                code: customDivValidElement,
+            },
+        ],
+        invalid: [
+            {
+                name: 'reports error for simple HTML element',
+                code: simpleInvalidElement,
+                errors: [
+                    {
+                        messageId: 'htmlNotSupported',
+                        data: { elementName: 'div' },
+                    },
+                ],
+            },
+            {
+                name: 'reports errors for multiple nested HTML elements',
+                code: nestedInvalidElements,
+                errors: [
+                    {
+                        messageId: 'htmlNotSupported',
+                        data: { elementName: 'div' },
+                    },
+                    {
+                        messageId: 'htmlNotSupported',
+                        data: { elementName: 'h1' },
+                    },
+                    {
+                        messageId: 'htmlNotSupported',
+                        data: { elementName: 'p' },
+                    },
+                    {
+                        messageId: 'htmlNotSupported',
+                        data: { elementName: 'a' },
+                    },
+                    {
+                        messageId: 'htmlNotSupported',
+                        data: { elementName: 'span' },
+                    },
+                    {
+                        messageId: 'htmlNotSupported',
+                        data: { elementName: 'button' },
+                    },
+                ],
+            },
+            {
+                name: 'reports error for self-closing HTML elements',
+                code: selfClosingInvalidElement,
+                errors: [
+                    {
+                        messageId: 'htmlNotSupported',
+                        data: { elementName: 'img' },
+                    },
+                ],
+            },
+        ],
+    });
+});

package/dist/__tests__/rules/no-invalid-extension-point-imports.spec.d.ts

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

package/dist/__tests__/rules/no-invalid-extension-point-imports.spec.js

@@ -0,0 +1,269 @@
+import { RuleTester } from 'eslint';
+import { noInvalidExtensionPointImports } from "../../rules/no-invalid-extension-point-imports.js";
+import { languageOptions } from "../../runtime.js";
+const ruleTesterOptions = {
+    languageOptions: {
+        ...languageOptions,
+        parserOptions: {
+            ecmaFeatures: {
+                jsx: true,
+            },
+        },
+    },
+};
+const basicImport = `
+  import { hubspot } from '@hubspot/ui-extensions';
+`;
+const crmImport = `
+  import { useCrmProperties } from '@hubspot/ui-extensions/crm/hooks';
+`;
+const settingsImport = `
+  import { SettingsComponent } from '@hubspot/ui-extensions/settings';
+`;
+const pagesImport = `
+  import { PageComponent } from '@hubspot/ui-extensions/pages';
+`;
+const hookImport = `
+  import { useExtensionContext } from '@hubspot/ui-extensions/hooks';
+`;
+const externalImport = `
+  import { useEffect } from 'react';
+  import { FakeComponent } from 'apackage/extensions/pages';
+`;
+describe('no-invalid-extension-point-imports', () => {
+    describe('in cards directory', () => {
+        const ruleTester = new RuleTester(ruleTesterOptions);
+        ruleTester.run('no-invalid-extension-point-imports', noInvalidExtensionPointImports, {
+            valid: [
+                {
+                    name: 'basic UI Extensions import',
+                    code: basicImport,
+                    filename: '/path/to/project/src/app/cards/Component.tsx',
+                },
+                {
+                    name: 'CRM import',
+                    code: crmImport,
+                    filename: '/path/to/project/src/app/cards/Component.tsx',
+                },
+                {
+                    name: 'hooks import',
+                    code: hookImport,
+                    filename: '/path/to/project/src/app/cards/Component.tsx',
+                },
+                {
+                    name: 'external library import',
+                    code: externalImport,
+                    filename: '/path/to/project/src/app/cards/Component.tsx',
+                },
+            ],
+            invalid: [
+                {
+                    name: 'settings import',
+                    code: settingsImport,
+                    filename: '/path/to/project/src/app/cards/Component.tsx',
+                    errors: [
+                        {
+                            message: 'Imports from "settings" are not allowed in cards.',
+                        },
+                    ],
+                },
+                {
+                    name: 'pages import',
+                    code: pagesImport,
+                    filename: '/path/to/project/src/app/cards/Component.tsx',
+                    errors: [
+                        {
+                            message: 'Imports from "pages" are not allowed in cards.',
+                        },
+                    ],
+                },
+            ],
+        });
+    });
+    describe('in extensions directory', () => {
+        const ruleTester = new RuleTester(ruleTesterOptions);
+        ruleTester.run('no-invalid-extension-point-imports', noInvalidExtensionPointImports, {
+            valid: [
+                {
+                    name: 'basic UI Extensions import',
+                    code: basicImport,
+                    filename: '/path/to/project/src/app/extensions/Component.tsx',
+                },
+                {
+                    name: 'CRM import',
+                    code: crmImport,
+                    filename: '/path/to/project/src/app/extensions/Component.tsx',
+                },
+                {
+                    name: 'hooks import',
+                    code: hookImport,
+                    filename: '/path/to/project/src/app/extensions/Component.tsx',
+                },
+                {
+                    name: 'external library import',
+                    code: externalImport,
+                    filename: '/path/to/project/src/app/extensions/Component.tsx',
+                },
+            ],
+            invalid: [
+                {
+                    name: 'settings import',
+                    code: settingsImport,
+                    filename: '/path/to/project/src/app/extensions/Component.tsx',
+                    errors: [
+                        {
+                            message: 'Imports from "settings" are not allowed in extensions.',
+                        },
+                    ],
+                },
+                {
+                    name: 'pages import',
+                    code: pagesImport,
+                    filename: '/path/to/project/src/app/extensions/Component.tsx',
+                    errors: [
+                        {
+                            message: 'Imports from "pages" are not allowed in extensions.',
+                        },
+                    ],
+                },
+            ],
+        });
+    });
+    describe('in settings directory', () => {
+        const ruleTester = new RuleTester(ruleTesterOptions);
+        ruleTester.run('no-invalid-extension-point-imports', noInvalidExtensionPointImports, {
+            valid: [
+                {
+                    name: 'basic UI Extensions import',
+                    code: basicImport,
+                    filename: '/path/to/project/src/app/settings/Component.tsx',
+                },
+                {
+                    name: 'settings import',
+                    code: settingsImport,
+                    filename: '/path/to/project/src/app/settings/Component.tsx',
+                },
+                {
+                    name: 'hooks import',
+                    code: hookImport,
+                    filename: '/path/to/project/src/app/settings/Component.tsx',
+                },
+                {
+                    name: 'external library import',
+                    code: externalImport,
+                    filename: '/path/to/project/src/app/settings/Component.tsx',
+                },
+            ],
+            invalid: [
+                {
+                    name: 'CRM import',
+                    code: crmImport,
+                    filename: '/path/to/project/src/app/settings/Component.tsx',
+                    errors: [
+                        {
+                            message: 'Imports from "crm" are not allowed in settings.',
+                        },
+                    ],
+                },
+                {
+                    name: 'pages import',
+                    code: pagesImport,
+                    filename: '/path/to/project/src/app/settings/Component.tsx',
+                    errors: [
+                        {
+                            message: 'Imports from "pages" are not allowed in settings.',
+                        },
+                    ],
+                },
+            ],
+        });
+    });
+    describe('in pages directory', () => {
+        const ruleTester = new RuleTester(ruleTesterOptions);
+        ruleTester.run('no-invalid-extension-point-imports', noInvalidExtensionPointImports, {
+            valid: [
+                {
+                    name: 'basic UI Extensions import',
+                    code: basicImport,
+                    filename: '/path/to/project/src/app/pages/Component.tsx',
+                },
+                {
+                    name: 'pages import',
+                    code: pagesImport,
+                    filename: '/path/to/project/src/app/pages/Component.tsx',
+                },
+                {
+                    name: 'hooks import',
+                    code: hookImport,
+                    filename: '/path/to/project/src/app/pages/Component.tsx',
+                },
+                {
+                    name: 'external library import',
+                    code: externalImport,
+                    filename: '/path/to/project/src/app/pages/Component.tsx',
+                },
+            ],
+            invalid: [
+                {
+                    name: 'CRM import',
+                    code: crmImport,
+                    filename: '/path/to/project/src/app/pages/Component.tsx',
+                    errors: [
+                        {
+                            message: 'Imports from "crm" are not allowed in pages.',
+                        },
+                    ],
+                },
+                {
+                    name: 'settings import',
+                    code: settingsImport,
+                    filename: '/path/to/project/src/app/pages/Component.tsx',
+                    errors: [
+                        {
+                            message: 'Imports from "settings" are not allowed in pages.',
+                        },
+                    ],
+                },
+            ],
+        });
+    });
+    describe('in nested folders', () => {
+        const ruleTester = new RuleTester(ruleTesterOptions);
+        ruleTester.run('no-invalid-extension-point-imports', noInvalidExtensionPointImports, {
+            valid: [
+                {
+                    name: 'pages import',
+                    code: pagesImport,
+                    filename: '/path/to/project/src/app/pages/nested/Component.tsx',
+                },
+                {
+                    name: 'CRM import in nested pages directory',
+                    code: crmImport,
+                    filename: '/path/to/project/src/app/cards/pages/Component.tsx',
+                },
+            ],
+            invalid: [
+                {
+                    name: 'CRM import',
+                    code: crmImport,
+                    filename: '/path/to/project/src/app/pages/nested/Component.tsx',
+                    errors: [
+                        {
+                            message: 'Imports from "crm" are not allowed in pages.',
+                        },
+                    ],
+                },
+                {
+                    name: 'Pages import in nested pages directory',
+                    code: pagesImport,
+                    filename: '/path/to/project/src/app/cards/pages/Component.tsx',
+                    errors: [
+                        {
+                            message: 'Imports from "pages" are not allowed in cards.',
+                        },
+                    ],
+                },
+            ],
+        });
+    });
+});

package/dist/__tests__/rules/no-invalid-image-src.spec.d.ts

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

package/dist/__tests__/rules/no-invalid-image-src.spec.js

@@ -0,0 +1,227 @@
+import { RuleTester } from 'eslint';
+import { noInvalidImageSrc } from "../../rules/no-invalid-image-src.js";
+import { languageOptions } from "../../runtime.js";
+const ruleTester = new RuleTester({
+    languageOptions: {
+        ...languageOptions,
+        parserOptions: {
+            ecmaFeatures: {
+                jsx: true,
+            },
+        },
+    },
+});
+describe('no-invalid-image-src', () => {
+    ruleTester.run('no-invalid-image-src', noInvalidImageSrc, {
+        valid: [
+            {
+                name: 'allows valid https URL',
+                code: `
+          import { Image } from '@hubspot/ui-extensions';
+          function App() {
+            return <Image src="https://example.com/image.png" />;
+          }
+        `,
+            },
+            {
+                name: 'allows valid http URL',
+                code: `
+          import { Image } from '@hubspot/ui-extensions';
+          function App() {
+            return <Image src="http://localhost:3000/image.jpg" />;
+          }
+        `,
+            },
+            {
+                name: 'allows data URL with base64 PNG',
+                code: `
+          import { Image } from '@hubspot/ui-extensions';
+          function App() {
+            return <Image src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==" />;
+          }
+        `,
+            },
+            {
+                name: 'allows data URL with SVG',
+                code: `
+          import { Image } from '@hubspot/ui-extensions';
+          function App() {
+            return <Image src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Ccircle cx='50' cy='50' r='40' fill='%23007bff'/%3E%3C/svg%3E" />;
+          }
+        `,
+            },
+            {
+                name: 'allows URL with query string and fragment',
+                code: `
+          import { Image } from '@hubspot/ui-extensions';
+          function App() {
+            return <Image src="https://example.com/image.webp?v=2#top" />;
+          }
+        `,
+            },
+            {
+                name: 'allows imported image module as src',
+                code: `
+          import { Image } from '@hubspot/ui-extensions';
+          import testImage from './testImage.png';
+          function App() {
+            return <Image src={testImage} />;
+          }
+        `,
+            },
+            {
+                name: 'allows all image types',
+                code: `
+          import { Image } from '@hubspot/ui-extensions';
+          function App() {
+            return (
+              <>
+                <Image src="https://example.com/photo.jpg" />
+                <Image src="https://example.com/photo.jpeg" />
+                <Image src="https://example.com/photo.png" />
+                <Image src="https://example.com/photo.gif" />
+                <Image src="https://example.com/photo.svg" />
+                <Image src="https://example.com/photo.webp" />
+              </>
+            );
+          }
+        `,
+            },
+            {
+                name: 'allows aliased Image import',
+                code: `
+          import { Image as HubImage } from '@hubspot/ui-extensions';
+          function App() {
+            return <HubImage src="https://example.com/image.png" />;
+          }
+        `,
+            },
+            {
+                name: 'ignores Image component when not imported from @hubspot/ui-extensions',
+                code: `
+          import { Text } from '@hubspot/ui-extensions';
+          function App() {
+            return <Image src="./relative.png" />;
+          }
+        `,
+            },
+            {
+                name: 'ignores src attributes on other components',
+                code: `
+          import { Iframe } from '@hubspot/ui-extensions';
+          function App() {
+            return <Iframe src="https://somesite.com" />;
+          }
+        `,
+            },
+        ],
+        invalid: [
+            {
+                name: 'reports error for relative path with ./',
+                code: `
+          import { Image } from '@hubspot/ui-extensions';
+          function App() {
+            return <Image src="./image.png" />;
+          }
+        `,
+                errors: [{ messageId: 'invalidRelativeUrl' }],
+            },
+            {
+                name: 'reports error for relative path with ../',
+                code: `
+          import { Image } from '@hubspot/ui-extensions';
+          function App() {
+            return <Image src="../images/logo.svg" />;
+          }
+        `,
+                errors: [{ messageId: 'invalidRelativeUrl' }],
+            },
+            {
+                name: 'reports error for absolute path',
+                code: `
+          import { Image } from '@hubspot/ui-extensions';
+          function App() {
+            return <Image src="/assets/image.png" />;
+          }
+        `,
+                errors: [{ messageId: 'invalidRelativeUrl' }],
+            },
+            {
+                name: 'reports error and fixes whitespace',
+                code: `
+          import { Image } from '@hubspot/ui-extensions';
+          function App() {
+            return <Image src="  https://example.com/image.png  " />;
+          }
+        `,
+                output: `
+          import { Image } from '@hubspot/ui-extensions';
+          function App() {
+            return <Image src="https://example.com/image.png" />;
+          }
+        `,
+                errors: [{ messageId: 'whitespaceInUrl' }],
+            },
+            {
+                name: 'reports error for empty string',
+                code: `
+          import { Image } from '@hubspot/ui-extensions';
+          function App() {
+            return <Image src="" />;
+          }
+        `,
+                errors: [{ messageId: 'invalidRelativeUrl' }],
+            },
+            {
+                name: 'reports error for ftp:// protocol',
+                code: `
+          import { Image } from '@hubspot/ui-extensions';
+          function App() {
+            return <Image src="ftp://example.com/image.png" />;
+          }
+        `,
+                errors: [{ messageId: 'invalidProtocol' }],
+            },
+            {
+                name: 'reports error for file:// protocol',
+                code: `
+          import { Image } from '@hubspot/ui-extensions';
+          function App() {
+            return <Image src="file:///Users/me/image.png" />;
+          }
+        `,
+                errors: [{ messageId: 'invalidProtocol' }],
+            },
+            {
+                name: 'reports error for .pdf extension',
+                code: `
+          import { Image } from '@hubspot/ui-extensions';
+          function App() {
+            return <Image src="https://example.com/document.pdf" />;
+          }
+        `,
+                errors: [{ messageId: 'invalidImageType' }],
+            },
+            {
+                name: 'reports error for missing file extension',
+                code: `
+          import { Image } from '@hubspot/ui-extensions';
+          function App() {
+            return <Image src="https://example.com/image" />;
+          }
+        `,
+                errors: [{ messageId: 'invalidImageType' }],
+            },
+            {
+                name: 'reports error for aliased Image import with invalid src',
+                code: `
+          import { Image as HubImage } from '@hubspot/ui-extensions';
+          function App() {
+            return <HubImage src="/local/image.jpg" />;
+          }
+        `,
+                errors: [{ messageId: 'invalidRelativeUrl' }],
+            },
+        ],
+    });
+});

package/dist/__tests__/rules/no-native-http.spec.d.ts

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