@nordcraft/search 1.0.53 → 1.0.55

package/src/rules/dom/elementWithoutInteractiveContentRule.test.ts

@@ -1,401 +0,0 @@
-import { valueFormula } from '@nordcraft/core/dist/formula/formulaUtils'
-import { describe, expect, test } from 'bun:test'
-import { searchProject } from '../../searchProject'
-import { elementWithoutInteractiveContentRule } from './elementWithoutInteractiveContentRule'
-
-describe('elementWithoutInteractiveContentRule', () => {
-  test('should detect invalid button in button element', () => {
-    const problems = Array.from(
-      searchProject({
-        files: {
-          formulas: {},
-          components: {
-            test: {
-              name: 'test',
-              nodes: {
-                root: {
-                  type: 'element',
-                  attrs: {},
-                  classes: {},
-                  events: {},
-                  tag: 'button',
-                  children: ['child1'],
-                  style: {},
-                },
-                child1: {
-                  type: 'element',
-                  attrs: {},
-                  classes: {},
-                  events: {},
-                  tag: 'div',
-                  children: ['child2'],
-                  style: {},
-                },
-                child2: {
-                  type: 'element',
-                  attrs: {},
-                  classes: {},
-                  events: {},
-                  tag: 'button',
-                  children: [],
-                  style: {},
-                },
-              },
-              formulas: {},
-              apis: {},
-              attributes: {},
-              variables: {},
-            },
-          },
-        },
-        rules: [elementWithoutInteractiveContentRule],
-      }),
-    )
-    expect(problems).toHaveLength(1)
-    expect(problems[0].code).toBe('invalid element child')
-    expect(problems[0].path).toEqual(['components', 'test', 'nodes', 'root'])
-    expect(problems[0].details).toEqual({
-      parentTag: 'button',
-      invalidChild: { tag: 'button' },
-    })
-  })
-  test('should detect invalid label in button element', () => {
-    const problems = Array.from(
-      searchProject({
-        files: {
-          formulas: {},
-          components: {
-            test: {
-              name: 'test',
-              nodes: {
-                root: {
-                  type: 'element',
-                  attrs: {},
-                  classes: {},
-                  events: {},
-                  tag: 'button',
-                  children: ['child1'],
-                  style: {},
-                },
-                child1: {
-                  type: 'element',
-                  attrs: {},
-                  classes: {},
-                  events: {},
-                  tag: 'div',
-                  children: ['child2'],
-                  style: {},
-                },
-                child2: {
-                  type: 'element',
-                  attrs: {},
-                  classes: {},
-                  events: {},
-                  tag: 'label',
-                  children: [],
-                  style: {},
-                },
-              },
-              formulas: {},
-              apis: {},
-              attributes: {},
-              variables: {},
-            },
-          },
-        },
-        rules: [elementWithoutInteractiveContentRule],
-      }),
-    )
-    expect(problems).toHaveLength(1)
-    expect(problems[0].code).toBe('invalid element child')
-    expect(problems[0].path).toEqual(['components', 'test', 'nodes', 'root'])
-    expect(problems[0].details).toEqual({
-      parentTag: 'button',
-      invalidChild: { tag: 'label' },
-    })
-  })
-  test('should detect invalid element with attribute requirement', () => {
-    const problems = Array.from(
-      searchProject({
-        files: {
-          formulas: {},
-          components: {
-            test: {
-              name: 'test',
-              nodes: {
-                root: {
-                  type: 'element',
-                  attrs: {},
-                  classes: {},
-                  events: {},
-                  tag: 'button',
-                  children: ['child1'],
-                  style: {},
-                },
-                child1: {
-                  type: 'element',
-                  attrs: {},
-                  classes: {},
-                  events: {},
-                  tag: 'div',
-                  children: ['child2'],
-                  style: {},
-                },
-                child2: {
-                  type: 'element',
-                  attrs: { href: valueFormula('https://example.com') },
-                  classes: {},
-                  events: {},
-                  tag: 'a',
-                  children: [],
-                  style: {},
-                },
-              },
-              formulas: {},
-              apis: {},
-              attributes: {},
-              variables: {},
-            },
-          },
-        },
-        rules: [elementWithoutInteractiveContentRule],
-      }),
-    )
-    expect(problems).toHaveLength(1)
-    expect(problems[0].code).toBe('invalid element child')
-    expect(problems[0].path).toEqual(['components', 'test', 'nodes', 'root'])
-    expect(problems[0].details).toEqual({
-      parentTag: 'button',
-      invalidChild: { tag: 'a', whenAttributeIsPresent: 'href' },
-    })
-  })
-  test('should allow element children when attribute requirement is not met', () => {
-    const problems = Array.from(
-      searchProject({
-        files: {
-          formulas: {},
-          components: {
-            test: {
-              name: 'test',
-              nodes: {
-                root: {
-                  type: 'element',
-                  attrs: {},
-                  classes: {},
-                  events: {},
-                  tag: 'button',
-                  children: ['child1'],
-                  style: {},
-                },
-                child1: {
-                  type: 'element',
-                  attrs: {},
-                  classes: {},
-                  events: {},
-                  tag: 'div',
-                  children: ['child2'],
-                  style: {},
-                },
-                child2: {
-                  type: 'element',
-                  attrs: {},
-                  classes: {},
-                  events: {},
-                  tag: 'a',
-                  children: [],
-                  style: {},
-                },
-              },
-              formulas: {},
-              apis: {},
-              attributes: {},
-              variables: {},
-            },
-          },
-        },
-        rules: [elementWithoutInteractiveContentRule],
-      }),
-    )
-    expect(problems).toHaveLength(0)
-  })
-  test('should detect invalid children when negative attribute requirement is met', () => {
-    const problems = Array.from(
-      searchProject({
-        files: {
-          formulas: {},
-          components: {
-            test: {
-              name: 'test',
-              nodes: {
-                root: {
-                  type: 'element',
-                  attrs: {},
-                  classes: {},
-                  events: {},
-                  tag: 'button',
-                  children: ['child1'],
-                  style: {},
-                },
-                child1: {
-                  type: 'element',
-                  attrs: {},
-                  classes: {},
-                  events: {},
-                  tag: 'div',
-                  children: ['child2'],
-                  style: {},
-                },
-                child2: {
-                  type: 'element',
-                  attrs: { type: valueFormula('text') },
-                  classes: {},
-                  events: {},
-                  tag: 'input',
-                  children: [],
-                  style: {},
-                },
-              },
-              formulas: {},
-              apis: {},
-              attributes: {},
-              variables: {},
-            },
-          },
-        },
-        rules: [elementWithoutInteractiveContentRule],
-      }),
-    )
-    expect(problems).toHaveLength(0)
-  })
-  test('should detect invalid label in button element in nested component', () => {
-    const problems = Array.from(
-      searchProject({
-        files: {
-          formulas: {},
-          components: {
-            test: {
-              name: 'test',
-              nodes: {
-                root: {
-                  type: 'element',
-                  attrs: {},
-                  classes: {},
-                  events: {},
-                  tag: 'button',
-                  children: ['child1'],
-                  style: {},
-                },
-                child1: {
-                  type: 'component',
-                  attrs: {},
-                  name: 'buttonComponent',
-                  events: {},
-                  children: [],
-                  style: {},
-                },
-              },
-              formulas: {},
-              apis: {},
-              attributes: {},
-              variables: {},
-            },
-            buttonComponent: {
-              name: 'buttonComponent',
-              nodes: {
-                root: {
-                  type: 'element',
-                  attrs: {},
-                  classes: {},
-                  events: {},
-                  tag: 'div',
-                  children: ['child1'],
-                  style: {},
-                },
-                child1: {
-                  type: 'element',
-                  attrs: {},
-                  classes: {},
-                  events: {},
-                  tag: 'div',
-                  children: ['child2'],
-                  style: {},
-                },
-                child2: {
-                  type: 'element',
-                  attrs: {},
-                  classes: {},
-                  events: {},
-                  tag: 'label',
-                  children: [],
-                  style: {},
-                },
-              },
-              formulas: {},
-              apis: {},
-              attributes: {},
-              variables: {},
-            },
-          },
-        },
-        rules: [elementWithoutInteractiveContentRule],
-      }),
-    )
-    expect(problems).toHaveLength(1)
-    expect(problems[0].code).toBe('invalid element child')
-    expect(problems[0].path).toEqual(['components', 'test', 'nodes', 'root'])
-    expect(problems[0].details).toEqual({
-      parentTag: 'button',
-      invalidChild: { tag: 'label' },
-    })
-  })
-  test('should not detect valid element children', () => {
-    const problems = Array.from(
-      searchProject({
-        files: {
-          formulas: {},
-          components: {
-            test: {
-              name: 'test',
-              nodes: {
-                root: {
-                  type: 'element',
-                  attrs: {},
-                  classes: {},
-                  events: {},
-                  tag: 'button',
-                  children: ['child1', 'child2'],
-                  style: {},
-                },
-                child1: {
-                  type: 'element',
-                  attrs: {},
-                  classes: {},
-                  events: {},
-                  tag: 'p',
-                  children: [],
-                  style: {},
-                },
-                child2: {
-                  type: 'element',
-                  attrs: {},
-                  classes: {},
-                  events: {},
-                  tag: 'p',
-                  children: [],
-                  style: {},
-                },
-              },
-              formulas: {},
-              apis: {},
-              attributes: {},
-              variables: {},
-            },
-          },
-        },
-        rules: [elementWithoutInteractiveContentRule],
-      }),
-    )
-
-    expect(problems).toHaveLength(0)
-  })
-})

package/src/rules/dom/elementWithoutInteractiveContentRule.ts

@@ -1,80 +0,0 @@
-import type { Component } from '@nordcraft/core/dist/component/component.types'
-import type { ToddleComponent } from '@nordcraft/core/dist/component/ToddleComponent'
-import { isDefined } from '@nordcraft/core/dist/utils/util'
-import type { Rule } from '../../types'
-import {
-  interactiveContentElementDefinition,
-  type InteractiveContent,
-} from '../../util/helpers'
-
-const ELEMENTS_WITHOUT_INTERACTIVE_CONTENT = ['button', 'a']
-
-export const elementWithoutInteractiveContentRule: Rule<{
-  parentTag: string
-  invalidChild: InteractiveContent
-}> = {
-  code: 'invalid element child',
-  level: 'warning',
-  category: 'Accessibility',
-  visit: (report, args) => {
-    if (args.nodeType !== 'component-node') {
-      return
-    }
-    const { value, component, path, files } = args
-    if (
-      value.type !== 'element' ||
-      !ELEMENTS_WITHOUT_INTERACTIVE_CONTENT.includes(value.tag)
-    ) {
-      return
-    }
-    // TODO: Consider memoizing this function to avoid repeated searches
-    const searchChildren = (
-      container: ToddleComponent<Function> | Component,
-      children: string[],
-      results: Array<InteractiveContent> = [],
-    ): Array<InteractiveContent> => {
-      return children.reduce((acc, childId) => {
-        const child = container.nodes[childId]
-        if (!isDefined(child) || child.type === 'text') {
-          return acc
-        }
-        if (child.type === 'element') {
-          // Check if the child element is an interactive content element
-          const interactiveElement = interactiveContentElementDefinition(child)
-          if (interactiveElement) {
-            // TODO: consider visiting this element's children instead of returning early
-            return [...acc, interactiveElement]
-          }
-        }
-        const allResults = [...acc]
-        if (child.type === 'component') {
-          const component = child.package
-            ? files.packages?.[child.package]?.components?.[child.name]
-            : files.components?.[child.name]
-          if (!component) {
-            return results
-          }
-          // Search children in the component's own nodes
-          allResults.push(
-            ...searchChildren(
-              component,
-              component.nodes['root']?.children ?? [],
-              acc,
-            ),
-          )
-        }
-        // Search children in slot/component/element:
-        return searchChildren(container, child.children, allResults)
-      }, results)
-    }
-    const childTags = searchChildren(component, value.children)
-    if (childTags.length > 0) {
-      childTags.forEach((ic) =>
-        report(path, {
-          parentTag: value.tag,
-          invalidChild: ic,
-        }),
-      )
-    }
-  },
-}

package/src/rules/dom/imageWithoutDimensionRule.test.ts

@@ -1,162 +0,0 @@
-import { describe, expect, test } from 'bun:test'
-import { searchProject } from '../../searchProject'
-import { imageWithoutDimensionRule } from './imageWithoutDimensionRule'
-
-describe('imageWithoutDimensionRule', () => {
-  test('should detect missing image dimensions', () => {
-    const problems = Array.from(
-      searchProject({
-        files: {
-          formulas: {},
-          components: {
-            test: {
-              name: 'test',
-              nodes: {
-                root: {
-                  type: 'element',
-                  attrs: {},
-                  classes: {},
-                  events: {},
-                  tag: 'img',
-                  children: [],
-                  style: {},
-                },
-              },
-              formulas: {},
-              apis: {},
-              attributes: {},
-              variables: {},
-            },
-          },
-        },
-        rules: [imageWithoutDimensionRule],
-      }),
-    )
-
-    expect(problems).toHaveLength(1)
-    expect(problems[0].code).toBe('image without dimension')
-    expect(problems[0].path).toEqual(['components', 'test', 'nodes', 'root'])
-  })
-
-  test('should not detect image with explicit dimensions set', () => {
-    const problems = Array.from(
-      searchProject({
-        files: {
-          formulas: {},
-          components: {
-            test: {
-              name: 'test',
-              nodes: {
-                root: {
-                  type: 'element',
-                  attrs: {
-                    width: {
-                      type: 'value',
-                      value: '100',
-                    },
-                    height: {
-                      type: 'value',
-                      value: '100',
-                    },
-                  },
-                  classes: {},
-                  events: {},
-                  tag: 'img',
-                  children: [],
-                  style: {},
-                },
-              },
-              formulas: {},
-              apis: {},
-              attributes: {},
-              variables: {},
-            },
-          },
-        },
-        rules: [imageWithoutDimensionRule],
-      }),
-    )
-
-    expect(problems).toHaveLength(0)
-  })
-
-  test('should report if image has width but no height', () => {
-    const problems = Array.from(
-      searchProject({
-        files: {
-          formulas: {},
-          components: {
-            test: {
-              name: 'test',
-              nodes: {
-                root: {
-                  type: 'element',
-                  attrs: {
-                    width: {
-                      type: 'value',
-                      value: '100',
-                    },
-                  },
-                  classes: {},
-                  events: {},
-                  tag: 'source',
-                  children: [],
-                  style: {},
-                },
-              },
-              formulas: {},
-              apis: {},
-              attributes: {},
-              variables: {},
-            },
-          },
-        },
-        rules: [imageWithoutDimensionRule],
-      }),
-    )
-
-    expect(problems).toHaveLength(1)
-    expect(problems[0].code).toBe('image without dimension')
-    expect(problems[0].path).toEqual(['components', 'test', 'nodes', 'root'])
-  })
-
-  test('should report if image has height but no width', () => {
-    const problems = Array.from(
-      searchProject({
-        files: {
-          formulas: {},
-          components: {
-            test: {
-              name: 'test',
-              nodes: {
-                root: {
-                  type: 'element',
-                  attrs: {
-                    height: {
-                      type: 'value',
-                      value: '100',
-                    },
-                  },
-                  classes: {},
-                  events: {},
-                  tag: 'source',
-                  children: [],
-                  style: {},
-                },
-              },
-              formulas: {},
-              apis: {},
-              attributes: {},
-              variables: {},
-            },
-          },
-        },
-        rules: [imageWithoutDimensionRule],
-      }),
-    )
-
-    expect(problems).toHaveLength(1)
-    expect(problems[0].code).toBe('image without dimension')
-    expect(problems[0].path).toEqual(['components', 'test', 'nodes', 'root'])
-  })
-})

package/src/rules/dom/imageWithoutDimensionRule.ts

@@ -1,50 +0,0 @@
-import { isDefined } from '@nordcraft/core/dist/utils/util'
-import type { Rule } from '../../types'
-
-/**
- * Lighthouse reports a similar issue:
- * https://web.dev/articles/optimize-cls?utm_source=lighthouse&utm_medium=devtools#images_without_dimensions
- */
-export const imageWithoutDimensionRule: Rule = {
-  code: 'image without dimension',
-  level: 'warning',
-  category: 'Performance',
-  visit: (report, { path, nodeType, value }) => {
-    if (
-      nodeType !== 'component-node' ||
-      value.type !== 'element' ||
-      !['img', 'source'].includes(value.tag)
-    ) {
-      return
-    }
-
-    // Aspect ratio can be calculated from width and height attributes
-    if (isDefined(value.attrs.width) && isDefined(value.attrs.height)) {
-      return
-    }
-
-    if (
-      [
-        value.style,
-        // We don't know the circumstances under which the style is applied, so we assume it is Okay if just one of the variants has correct style
-        ...(value.variants?.map((variant) => variant.style) ?? []),
-      ].some((style) => {
-        // Aspect ratio is not required if width and height are fixed
-        if (isDefined(style.width) && isDefined(style.height)) {
-          return true
-        }
-
-        // Aspect ratio is set explicitly
-        if (isDefined(style['aspect-ratio'])) {
-          return true
-        }
-
-        return false
-      })
-    ) {
-      return
-    }
-
-    report(path)
-  },
-}