@nordcraft/search 1.0.66 → 1.0.68

package/src/rules/issues/actions/unknownActionEventRule.test.ts

@@ -0,0 +1,295 @@
+/* eslint-disable inclusive-language/use-inclusive-words */
+import type { CustomActionModel } from '@nordcraft/core/dist/component/component.types'
+import { describe, expect, test } from 'bun:test'
+import { fixProject } from '../../../fixProject'
+import { searchProject } from '../../../searchProject'
+import { unknownActionEventRule } from './unknownActionEventRule'
+
+describe('finds unknownActionEventRule', () => {
+  test('should find invalid action events', () => {
+    const problems = Array.from(
+      searchProject({
+        files: {
+          actions: {
+            'legacy-action': {
+              name: 'legacy-action',
+              handler: '',
+              arguments: [],
+              events: {
+                success: { dummyEvent: 'hello' },
+              },
+              variableArguments: false,
+            },
+            'modern-action': {
+              name: 'modern-action',
+              handler: '',
+              version: 2,
+              arguments: [],
+              events: {
+                success: { dummyEvent: 'hello' },
+              },
+              variableArguments: false,
+            },
+          },
+          components: {
+            test: {
+              name: 'test',
+              nodes: {},
+              formulas: {},
+              apis: {},
+              attributes: {},
+              variables: {},
+              onLoad: {
+                trigger: 'onLoad',
+                actions: [
+                  {
+                    name: 'legacy-action',
+                    arguments: [],
+                    events: {
+                      nonExistingEvent: { actions: [] },
+                    },
+                  },
+                  {
+                    name: 'modern-action',
+                    arguments: [],
+                    events: {
+                      nonExistingEvent: { actions: [] },
+                    },
+                  },
+                ],
+              },
+            },
+          },
+        },
+        rules: [unknownActionEventRule],
+      }),
+    )
+
+    expect(problems).toHaveLength(2)
+    expect(problems[0].code).toBe('unknown action event')
+    expect(problems[0].details).toEqual({ name: 'nonExistingEvent' })
+    expect(problems[0].path).toEqual([
+      'components',
+      'test',
+      'onLoad',
+      'actions',
+      '0',
+      'events',
+      'nonExistingEvent',
+    ])
+    expect(problems[1].code).toBe('unknown action event')
+    expect(problems[1].details).toEqual({ name: 'nonExistingEvent' })
+    expect(problems[1].path).toEqual([
+      'components',
+      'test',
+      'onLoad',
+      'actions',
+      '1',
+      'events',
+      'nonExistingEvent',
+    ])
+  })
+  test('should not find valid action events', () => {
+    const problems = Array.from(
+      searchProject({
+        files: {
+          actions: {
+            'legacy-action': {
+              name: 'legacy-action',
+              handler: '',
+              arguments: [],
+              events: {
+                success: { dummyEvent: 'hello' },
+              },
+              variableArguments: false,
+            },
+            'modern-action': {
+              name: 'modern-action',
+              handler: '',
+              version: 2,
+              arguments: [],
+              events: {
+                success: { dummyEvent: 'hello' },
+              },
+              variableArguments: false,
+            },
+          },
+          components: {
+            test: {
+              name: 'test',
+              nodes: {},
+              formulas: {},
+              apis: {},
+              attributes: {},
+              variables: {},
+              onLoad: {
+                trigger: 'onLoad',
+                actions: [
+                  {
+                    name: 'legacy-action',
+                    arguments: [],
+                    events: {
+                      success: { actions: [] },
+                    },
+                  },
+                  {
+                    name: 'modern-action',
+                    arguments: [],
+                    events: {
+                      success: { actions: [] },
+                    },
+                  },
+                ],
+              },
+            },
+          },
+        },
+        rules: [unknownActionEventRule],
+      }),
+    )
+
+    expect(problems).toHaveLength(0)
+  })
+})
+
+describe('fix unknownActionEventRule', () => {
+  test('should fix invalid action events', () => {
+    const fixedProject = fixProject({
+      files: {
+        actions: {
+          'legacy-action': {
+            name: 'legacy-action',
+            handler: '',
+            arguments: [],
+            events: {
+              success: { dummyEvent: 'hello' },
+            },
+            variableArguments: false,
+          },
+          'modern-action': {
+            name: 'modern-action',
+            handler: '',
+            version: 2,
+            arguments: [],
+            events: {
+              success: { dummyEvent: 'hello' },
+            },
+            variableArguments: false,
+          },
+        },
+        components: {
+          test: {
+            name: 'test',
+            nodes: {},
+            formulas: {},
+            apis: {},
+            attributes: {},
+            variables: {},
+            onLoad: {
+              trigger: 'onLoad',
+              actions: [
+                {
+                  name: 'legacy-action',
+                  arguments: [],
+                  events: {
+                    success: { actions: [] },
+                    nonExistingEvent: { actions: [] },
+                  },
+                },
+                {
+                  name: 'modern-action',
+                  arguments: [],
+                  events: {
+                    success: { actions: [] },
+                    nonExistingEvent: { actions: [] },
+                  },
+                },
+              ],
+            },
+          },
+        },
+      },
+      rule: unknownActionEventRule,
+      fixType: 'delete-unknown-action-event',
+      state: {},
+    })
+
+    expect(
+      (fixedProject.components['test']?.onLoad?.actions[0] as CustomActionModel)
+        .events,
+    ).toEqual({
+      success: {
+        actions: [],
+      },
+    })
+    expect(
+      (fixedProject.components['test']?.onLoad?.actions[1] as CustomActionModel)
+        .events,
+    ).toEqual({
+      success: {
+        actions: [],
+      },
+    })
+  })
+  test('should not remove valid action arguments', () => {
+    const files = {
+      actions: {
+        'legacy-action': {
+          name: 'legacy-action',
+          handler: '',
+          arguments: [],
+          events: {
+            success: { dummyEvent: 'hello' },
+          },
+          variableArguments: false,
+        },
+        'modern-action': {
+          name: 'modern-action',
+          handler: '',
+          version: 2,
+          arguments: [],
+          events: {
+            success: { dummyEvent: 'hello' },
+          },
+          variableArguments: false,
+        },
+      },
+      components: {
+        test: {
+          name: 'test',
+          nodes: {},
+          formulas: {},
+          apis: {},
+          attributes: {},
+          variables: {},
+          onLoad: {
+            trigger: 'onLoad',
+            actions: [
+              {
+                name: 'legacy-action',
+                arguments: [],
+                events: {
+                  success: { actions: [] },
+                },
+              },
+              {
+                name: 'modern-action',
+                arguments: [],
+                events: {
+                  success: { actions: [] },
+                },
+              },
+            ],
+          },
+        },
+      },
+    }
+    const fixedProject = fixProject({
+      files,
+      rule: unknownActionEventRule,
+      fixType: 'delete-unknown-action-argument',
+      state: {},
+    })
+    expect(fixedProject).toEqual(files)
+  })
+})

package/src/rules/issues/actions/unknownActionEventRule.ts

@@ -0,0 +1,35 @@
+import { isDefined } from '@nordcraft/core/dist/utils/util'
+import type { Rule } from '../../../types'
+import { removeFromPathFix } from '../../../util/removeUnused.fix'
+
+export const unknownActionEventRule: Rule<{ name: string }> = {
+  code: 'unknown action event',
+  level: 'warning',
+  category: 'Unknown Reference',
+  visit: (report, { path, files, value, nodeType }) => {
+    if (nodeType !== 'action-custom-model-event') {
+      return
+    }
+    const { action, eventName } = value
+    const referencedAction = (
+      action.package ? files.packages?.[action.package]?.actions : files.actions
+    )?.[action.name]
+    if (!referencedAction) {
+      return
+    }
+    if (!isDefined(referencedAction.events?.[eventName])) {
+      report(
+        path,
+        {
+          name: eventName,
+        },
+        ['delete-unknown-action-event'],
+      )
+    }
+  },
+  fixes: {
+    'delete-unknown-action-event': removeFromPathFix,
+  },
+}
+
+export type UnknownActionEventRuleFix = 'delete-unknown-action-event'

package/src/rules/issues/style/noReferenceGlobalCSSVariable.test.ts

@@ -0,0 +1,246 @@
+import { describe, expect, test } from 'bun:test'
+import { searchProject } from '../../../searchProject'
+import { noReferenceGlobalCSSVariableRule } from './noReferenceGlobalCSSVariable'
+
+describe('noReferenceGlobalCSSVariableRule', () => {
+  test('should not report global CSS variables that are used', () => {
+    const problems = Array.from(
+      searchProject({
+        files: {
+          themes: {
+            Default: {
+              fonts: [],
+              propertyDefinitions: {
+                '--global-color': {
+                  syntax: { type: 'primitive', name: 'color' },
+                  description: 'A global color',
+                  inherits: true,
+                  initialValue: 'blue',
+                  values: {},
+                },
+                '--local-margin': {
+                  syntax: { type: 'primitive', name: 'length-percentage' },
+                  description: 'A local margin',
+                  inherits: true,
+                  initialValue: '10px',
+                  values: {},
+                },
+              },
+            },
+          },
+          formulas: {},
+          components: {
+            test: {
+              name: 'test',
+              nodes: {
+                root: {
+                  tag: 'div',
+                  type: 'element',
+                  attrs: {},
+                  style: {
+                    color: 'var(--global-color)',
+                    margin: 'var(--local-margin)',
+                  },
+                  events: {},
+                  classes: {},
+                  children: [],
+                },
+              },
+              formulas: {},
+              apis: {},
+              attributes: {},
+              variables: {},
+            },
+          },
+        },
+        rules: [noReferenceGlobalCSSVariableRule],
+      }),
+    )
+
+    expect(problems).toHaveLength(0)
+  })
+
+  test('should report global CSS variables that are never used', () => {
+    const problems = Array.from(
+      searchProject({
+        files: {
+          themes: {
+            Default: {
+              fonts: [],
+              propertyDefinitions: {
+                '--global-color': {
+                  syntax: { type: 'primitive', name: 'color' },
+                  description: 'A global color',
+                  inherits: true,
+                  initialValue: 'blue',
+                  values: {},
+                },
+              },
+            },
+          },
+          formulas: {},
+          components: {
+            test: {
+              name: 'test',
+              nodes: {
+                root: {
+                  tag: 'div',
+                  type: 'element',
+                  attrs: {},
+                  style: {
+                    color: 'red',
+                  },
+                  events: {},
+                  classes: {},
+                  children: [],
+                },
+              },
+              formulas: {},
+              apis: {},
+              attributes: {},
+              variables: {},
+            },
+          },
+        },
+        rules: [noReferenceGlobalCSSVariableRule],
+      }),
+    )
+
+    expect(problems).toHaveLength(1)
+    expect(problems[0].level).toBe('warning')
+    expect(problems[0].code).toBe('no-reference global css variable')
+    expect(problems[0].path).toEqual([
+      'themes',
+      'Default',
+      'propertyDefinitions',
+      '--global-color',
+    ])
+    expect(problems[0].details).toEqual({ name: '--global-color' })
+  })
+
+  test('should handle complex use syntax: calc, with fallback value etc.', () => {
+    const problems = Array.from(
+      searchProject({
+        files: {
+          themes: {
+            Default: {
+              fonts: [],
+              propertyDefinitions: {
+                '--global-color': {
+                  syntax: { type: 'primitive', name: 'color' },
+                  description: 'A global color',
+                  inherits: true,
+                  initialValue: 'blue',
+                  values: {},
+                },
+                '--another-global-color': {
+                  syntax: { type: 'primitive', name: 'color' },
+                  description: 'Another global color',
+                  inherits: true,
+                  initialValue: 'green',
+                  values: {},
+                },
+                '--a-third-global-color': {
+                  syntax: { type: 'primitive', name: 'color' },
+                  description: 'A third global color',
+                  inherits: true,
+                  initialValue: 'yellow',
+                  values: {},
+                },
+              },
+            },
+          },
+          formulas: {},
+          components: {
+            test: {
+              name: 'test',
+              nodes: {
+                root: {
+                  tag: 'div',
+                  type: 'element',
+                  attrs: {},
+                  style: {
+                    color: 'calc(var(--global-color, red) + 10%)',
+                  },
+                  events: {},
+                  classes: {},
+                  children: [],
+                  variants: [
+                    {
+                      breakpoint: 'medium',
+                      style: {
+                        backgroundColor:
+                          'color-mix(in srgb, plum, var(--a-third-global-color))',
+                      },
+                    },
+                  ],
+                },
+              },
+              formulas: {},
+              apis: {},
+              attributes: {},
+              variables: {},
+            },
+          },
+        },
+        rules: [noReferenceGlobalCSSVariableRule],
+      }),
+    )
+
+    expect(problems).toHaveLength(1)
+    expect(problems[0].details).toEqual({ name: '--another-global-color' })
+  })
+
+  test('should not report when variable is used in other theme property definitions', () => {
+    const problems = Array.from(
+      searchProject({
+        files: {
+          themes: {
+            Default: {
+              fonts: [],
+              propertyDefinitions: {
+                '--global-color': {
+                  syntax: { type: 'primitive', name: 'color' },
+                  description: 'A global color',
+                  inherits: true,
+                  initialValue: 'blue',
+                  values: {},
+                },
+                '--local-color': {
+                  syntax: { type: 'primitive', name: 'color' },
+                  description: 'A local color',
+                  inherits: true,
+                  initialValue: 'var(--global-color)',
+                  values: {},
+                },
+                '--another-local-color': {
+                  syntax: { type: 'primitive', name: 'color' },
+                  description: 'Another local color',
+                  inherits: true,
+                  initialValue: 'green',
+                  values: {},
+                },
+                '--a-third-local-color': {
+                  syntax: { type: 'primitive', name: 'color' },
+                  description: 'A third local color',
+                  inherits: true,
+                  initialValue: 'yellow',
+                  values: {
+                    Default: 'calc(var(--another-local-color, red) + 10%)',
+                  },
+                },
+              },
+            },
+          },
+          formulas: {},
+          components: {},
+        },
+        rules: [noReferenceGlobalCSSVariableRule],
+      }),
+    )
+
+    expect(problems).toHaveLength(2)
+    expect(problems[0].details).toEqual({ name: '--local-color' })
+    expect(problems[1].details).toEqual({ name: '--a-third-local-color' })
+  })
+})

package/src/rules/issues/style/noReferenceGlobalCSSVariable.ts

@@ -0,0 +1,78 @@
+import type { Rule } from '../../../types'
+
+const REGEX = /var\(\s*(--[\w-]+)/g
+
+export const noReferenceGlobalCSSVariableRule: Rule<{
+  name: string
+}> = {
+  code: 'no-reference global css variable',
+  level: 'warning',
+  category: 'No References',
+  visit: (report, { path, value, nodeType, files, memo }) => {
+    if (nodeType !== 'project-theme-property') {
+      return
+    }
+
+    const theme = files.themes?.Default
+    if (!theme) {
+      return
+    }
+
+    const usedCSSVariablesInComponents = memo(
+      'css-variables-used-in-components',
+      () => {
+        const vars = new Set<string>()
+        Object.entries(files.components).forEach(([_, component]) => {
+          Object.values(component?.nodes ?? {}).forEach((node) => {
+            if (node.type === 'element' || node.type === 'component') {
+              ;[{ style: node.style }, ...(node.variants ?? [])].forEach(
+                ({ style }) => {
+                  Object.values(style ?? {}).forEach((styleValue) => {
+                    if (typeof styleValue !== 'string') {
+                      return
+                    }
+                    styleValue.matchAll(REGEX).forEach(([_, varName]) => {
+                      vars.add(varName)
+                    })
+                  })
+                },
+              )
+            }
+          })
+        })
+
+        return vars
+      },
+    )
+
+    const usedCSSVariablesInCSSVariables = memo(
+      'css-variables-used-in-css-variables',
+      () => {
+        const vars = new Set<string>()
+        Object.values(theme.propertyDefinitions ?? {}).forEach((propDef) => {
+          ;[...Object.values(propDef.values), propDef.initialValue].forEach(
+            (val) => {
+              if (typeof val !== 'string') {
+                return
+              }
+
+              val.matchAll(REGEX).forEach(([_, varName]) => {
+                vars.add(varName)
+              })
+            },
+          )
+        })
+
+        return vars
+      },
+    )
+
+    if (
+      usedCSSVariablesInCSSVariables.has(value.key) ||
+      usedCSSVariablesInComponents.has(value.key)
+    ) {
+      return
+    }
+    report(path, { name: value.key })
+  },
+}

package/src/rules/issues/style/styleRules.index.ts

@@ -1,4 +1,9 @@
 import { invalidStyleSyntaxRule } from './invalidStyleSyntaxRule'
+import { noReferenceGlobalCSSVariableRule } from './noReferenceGlobalCSSVariable'
 import { unknownClassnameRule } from './unknownClassnameRule'
 
-export default [invalidStyleSyntaxRule, unknownClassnameRule]
+export default [
+  invalidStyleSyntaxRule,
+  unknownClassnameRule,
+  noReferenceGlobalCSSVariableRule,
+]