@nordcraft/search 1.0.85 → 1.0.87

package/src/rules/issues/routing/unknownUrlParameterRule.ts

@@ -22,7 +22,14 @@ export const unknownUrlParameterRule: Rule<{
       !component?.route?.query?.[parameterKey] &&
       !component?.route?.path?.some((p) => p.name === parameterKey)
     ) {
-      report(path, { name: parameterKey })
+      report({
+        path,
+        info: {
+          title: 'Unknown URL parameter',
+          description: `**${parameterKey}** does not exist as a path- or query-parameter. Using an unknown URL parameter will always return *Null*.`,
+        },
+        details: { name: parameterKey },
+      })
     }
   },
 }

package/src/rules/issues/slots/unknownComponentSlotRule.ts

@@ -12,7 +12,7 @@ export const unknownComponentSlotRule: Rule<{ slotName: string }> = {
     }
 
     // We only want to check the immediate children of a "sub component"
-    if (value.type !== 'component' || value.children.length === 0) {
+    if (value.type !== 'component' || (value?.children ?? []).length === 0) {
       return
     }
 
@@ -43,7 +43,14 @@ export const unknownComponentSlotRule: Rule<{ slotName: string }> = {
       const usedSlot = childNode?.slot ?? 'default'
 
       if (!usableSlots.includes(usedSlot)) {
-        report([path[0], path[1], path[2], child], { slotName: usedSlot })
+        report({
+          path: [path[0], path[1], path[2], child],
+          info: {
+            title: 'Unknown component slot',
+            description: `**${usedSlot}** slot name does not exist as a slot on the parent component.`,
+          },
+          details: { slotName: usedSlot },
+        })
       }
     })
   },

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

@@ -24,7 +24,15 @@ export const invalidStyleSyntaxRule: Rule<{
       },
     )
     if (!valid) {
-      report(path, { property: value.styleProperty }, ['delete-style-property'])
+      report({
+        path,
+        info: {
+          title: `Invalid style declaration`,
+          description: `The style declaration for the property "${value.styleProperty}" is invalid. This can lead to unforeseen styling behavior across other elements. Please fix the style declaration or remove it.`,
+        },
+        details: { property: value.styleProperty },
+        fixes: ['delete-style-property'],
+      })
     }
   },
   fixes: {

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

@@ -29,9 +29,15 @@ export const legacyStyleVariableRule: Rule<
       return
     }
 
-    report(data.path, { name: data.value.styleVariable.name }, [
-      'replace-legacy-style-variable',
-    ])
+    report({
+      path: data.path,
+      info: {
+        title: `Legacy style variable`,
+        description: `Style variable **--${data.value.styleVariable.name}** can be replaced with the newer CSS variable system. Consider removing the style variable and create a new CSS variable with the same name.`,
+      },
+      details: { name: data.value.styleVariable.name },
+      fixes: ['replace-legacy-style-variable'],
+    })
   },
   fixes: {
     'replace-legacy-style-variable': replaceLegacyStyleVariable,

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

@@ -14,6 +14,12 @@ export const legacyThemeRule: Rule = {
       return
     }
 
-    report(data.path, undefined, [])
+    report({
+      path: data.path,
+      info: {
+        title: `Legacy theme`,
+        description: `You are using an older Nordcraft theme system. Migrate your theme to the newest version to enable multi-theme support and more.`,
+      },
+    })
   },
 }

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

@@ -99,6 +99,13 @@ export const noReferenceGlobalCSSVariableRule: Rule<{
     ) {
       return
     }
-    report(path, { name: value.key })
+    report({
+      path,
+      info: {
+        title: `Unused CSS variable`,
+        description: `**${value.key}** is never used in any style or other CSS variable. Consider removing it.`,
+      },
+      details: { name: value.key },
+    })
   },
 }

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

@@ -171,7 +171,7 @@ describe('unknownCSSVariableRule', () => {
     expect(problems[1].details).toEqual({ name: '--undefined-local' })
   })
 
-  test('should report problem if local variable is used in parent but only defined in child', () => {
+  test('should not report when legacy style variables are used', () => {
     const problems = Array.from(
       searchProject({
         files: {
@@ -190,26 +190,19 @@ describe('unknownCSSVariableRule', () => {
                   tag: 'div',
                   type: 'element',
                   attrs: {},
-                  style: {
-                    color: 'var(--child-only-variable)',
-                  },
-                  events: {},
-                  classes: {},
-                  children: ['child'],
-                },
-                child: {
-                  tag: 'div',
-                  type: 'element',
-                  attrs: {},
-                  customProperties: {
-                    '--child-only-variable': {
+                  'style-variables': [
+                    {
+                      name: 'legacy-variable',
                       formula: {
                         type: 'value',
-                        value: 'red',
+                        value: '10px',
                       },
+                      category: 'spacing',
                     },
+                  ],
+                  style: {
+                    margin: 'var(--legacy-variable)',
                   },
-                  style: {},
                   events: {},
                   classes: {},
                   children: [],
@@ -226,10 +219,10 @@ describe('unknownCSSVariableRule', () => {
       }),
     )
 
-    expect(problems).toHaveLength(1)
+    expect(problems).toBeEmpty()
   })
 
-  test('should not report when legacy style variables are used', () => {
+  test('should not report when declared in a style', () => {
     const problems = Array.from(
       searchProject({
         files: {
@@ -248,18 +241,9 @@ describe('unknownCSSVariableRule', () => {
                   tag: 'div',
                   type: 'element',
                   attrs: {},
-                  'style-variables': [
-                    {
-                      name: 'legacy-variable',
-                      formula: {
-                        type: 'value',
-                        value: '10px',
-                      },
-                      category: 'spacing',
-                    },
-                  ],
                   style: {
-                    margin: 'var(--legacy-variable)',
+                    '--declared-in-style': '10px',
+                    margin: 'var(--declared-in-style)',
                   },
                   events: {},
                   classes: {},
@@ -280,14 +264,13 @@ describe('unknownCSSVariableRule', () => {
     expect(problems).toBeEmpty()
   })
 
-  test('should not report when declared in a style', () => {
+  test('should not report when a legacy theme exists (no propertyDefinitions)', () => {
     const problems = Array.from(
       searchProject({
         files: {
           themes: {
             Default: {
               fonts: [],
-              propertyDefinitions: {},
             },
           },
           formulas: {},
@@ -300,8 +283,7 @@ describe('unknownCSSVariableRule', () => {
                   type: 'element',
                   attrs: {},
                   style: {
-                    '--declared-in-style': '10px',
-                    margin: 'var(--declared-in-style)',
+                    color: 'var(--legacy-theme-variable)',
                   },
                   events: {},
                   classes: {},
@@ -322,26 +304,52 @@ describe('unknownCSSVariableRule', () => {
     expect(problems).toBeEmpty()
   })
 
-  test('should not report when a legacy theme exists (no propertyDefinitions)', () => {
+  test('should not report if CSS variable is defined in any other component or self', () => {
     const problems = Array.from(
       searchProject({
         files: {
           themes: {
             Default: {
               fonts: [],
+              propertyDefinitions: {},
             },
           },
           formulas: {},
           components: {
-            test: {
-              name: 'test',
+            componentA: {
+              name: 'componentA',
               nodes: {
                 root: {
                   tag: 'div',
                   type: 'element',
+                  customProperties: {
+                    '--variable-in-a': {
+                      formula: { type: 'value', value: 'red' },
+                    },
+                  },
                   attrs: {},
                   style: {
-                    color: 'var(--legacy-theme-variable)',
+                    color: 'var(--variable-in-a)',
+                  },
+                  events: {},
+                  classes: {},
+                  children: [],
+                },
+              },
+              formulas: {},
+              apis: {},
+              attributes: {},
+              variables: {},
+            },
+            componentB: {
+              name: 'componentB',
+              nodes: {
+                root: {
+                  tag: 'div',
+                  type: 'element',
+                  attrs: {},
+                  style: {
+                    color: 'var(--variable-in-a)',
                   },
                   events: {},
                   classes: {},

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

@@ -30,71 +30,68 @@ export const unknownCSSVariableRule: Rule<{
       return
     }
 
-    const themeCssVariables = theme.propertyDefinitions
-    const [_fileType, componentName, _nodes, nodeName] = path
-    const localCssVariables = memo(
-      `component-css-variables-${componentName}-${nodeName}`,
+    const allCssVariableDeclarations = memo(
+      `all-css-variables-declarations`,
       () => {
-        const vars = new Set<string>()
-        const component = files.components[componentName]
-        if (!component) {
-          return vars
-        }
-
-        const visitVars = (nodeName: string) => {
-          const node = component?.nodes?.[nodeName]
-          if (!node) {
-            return
-          }
+        const cssVariableKeys = new Set(
+          Object.keys(theme.propertyDefinitions ?? {}),
+        )
+        Object.values(files.components ?? {}).forEach((component) => {
+          Object.keys(component?.nodes ?? {}).forEach((nodeKey) => {
+            const node = component?.nodes?.[nodeKey]
+            if (!node) {
+              return
+            }
 
-          if (node.type === 'component' || node.type === 'element') {
-            Object.keys(node.customProperties ?? {}).forEach((varName) => {
-              vars.add(varName)
-            })
-            Object.values(node.variants ?? {}).forEach((variant) => {
-              Object.keys(variant.customProperties ?? {}).forEach((varName) => {
-                vars.add(varName)
+            if (node.type === 'component' || node.type === 'element') {
+              Object.keys(node.customProperties ?? {}).forEach((varName) => {
+                cssVariableKeys.add(varName)
               })
-            })
-
-            // Also add legacy style variables
-            if (node.type === 'element' && node['style-variables']) {
-              node['style-variables'].forEach((styleVar) => {
-                vars.add(`--${styleVar.name}`)
+              Object.values(node.variants ?? {}).forEach((variant) => {
+                Object.keys(variant.customProperties ?? {}).forEach(
+                  (varName) => {
+                    cssVariableKeys.add(varName)
+                  },
+                )
               })
-            }
 
-            // Add if declared in any parent styles object
-            Object.keys(node.style ?? {}).forEach((styleKey) => {
-              if (styleKey.startsWith('--')) {
-                vars.add(styleKey)
+              // Also add legacy style variables
+              if (node.type === 'element' && node['style-variables']) {
+                node['style-variables'].forEach((styleVar) => {
+                  cssVariableKeys.add(`--${styleVar.name}`)
+                })
               }
-            })
-            Object.values(node.variants ?? {}).forEach((variant) => {
-              Object.keys(variant.style ?? {}).forEach((styleKey) => {
+
+              // Add if declared in any parent styles object
+              Object.keys(node.style ?? {}).forEach((styleKey) => {
                 if (styleKey.startsWith('--')) {
-                  vars.add(styleKey)
+                  cssVariableKeys.add(styleKey)
                 }
               })
-            })
-          }
-
-          const parent = Object.entries(component.nodes ?? {}).find(([_, n]) =>
-            n.children?.includes(nodeName),
-          )
-          if (parent) {
-            visitVars(parent[0])
-          }
-        }
-
-        visitVars(nodeName.toString())
-        return vars
+              Object.values(node.variants ?? {}).forEach((variant) => {
+                Object.keys(variant.style ?? {}).forEach((styleKey) => {
+                  if (styleKey.startsWith('--')) {
+                    cssVariableKeys.add(styleKey)
+                  }
+                })
+              })
+            }
+          })
+        })
+        return cssVariableKeys
       },
     )
 
     for (const varName of vars) {
-      if (!(varName in themeCssVariables) && !localCssVariables.has(varName)) {
-        report(path, { name: varName })
+      if (allCssVariableDeclarations.has(varName) === false) {
+        report({
+          path,
+          info: {
+            title: `Unknown CSS variable`,
+            description: `The CSS variable **${varName}** is not declared in any parent element or in your theme. The CSS variable must be declared in an ancestor element in its component or in your global theme.`,
+          },
+          details: { name: varName },
+        })
       }
     }
   },

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

@@ -16,6 +16,13 @@ export const unknownClassnameRule: Rule<{
     ) {
       return
     }
-    report(path, { name: value.variant.className })
+    report({
+      path,
+      info: {
+        title: 'Unknown classname',
+        description: `**${value.variant.className}** is not defined. Using an unknown classname will have no effect.`,
+      },
+      details: { name: value.variant.className },
+    })
   },
 }

package/src/rules/issues/variables/noReferenceVariableRule.ts

@@ -32,7 +32,14 @@ export const noReferenceVariableRule: Rule<void> = {
       return
     }
 
-    report(path, undefined, ['delete-variable'])
+    report({
+      path,
+      info: {
+        title: 'Unused variable',
+        description: `**${variableKey}** is set but never used by any formula. Consider removing it.`,
+      },
+      fixes: ['delete-variable'],
+    })
   },
   fixes: {
     'delete-variable': removeFromPathFix,

package/src/rules/issues/variables/unknownVariableRule.ts

@@ -19,7 +19,14 @@ export const unknownVariableRule: Rule<{
     const [, variableKey] = value.path
     const component = files.components[componentName]
     if (!component?.variables?.[variableKey]) {
-      report(path, { name: variableKey })
+      report({
+        path,
+        info: {
+          title: 'Unknown variable',
+          description: `**${variableKey}** does not exist. Make sure to define it before usage.`,
+        },
+        details: { name: variableKey },
+      })
     }
   },
 }

package/src/rules/issues/variables/unknownVariableSetterRule.ts

@@ -14,7 +14,14 @@ export const unknownVariableSetterRule: Rule<{
     const [, componentName] = path
     const component = files.components[componentName]
     if (!component?.variables?.[value.variable]) {
-      report(path, { name: value.variable })
+      report({
+        path,
+        info: {
+          title: 'Unknown variable setter',
+          description: `**${value.variable}** does not exist. Make sure to define it before setting.`,
+        },
+        details: { name: value.variable },
+      })
     }
   },
 }

package/src/rules/issues/workflows/duplicateWorkflowParameterRule.ts

@@ -15,7 +15,14 @@ export const duplicateWorkflowParameterRule: Rule<{ parameter: string }> = {
     const parameterNames = new Set<string>()
     value.parameters.forEach((p, i) => {
       if (parameterNames.has(p.name)) {
-        report([...path, 'parameters', i], { parameter: p.name })
+        report({
+          path: [...path, 'parameters', i],
+          info: {
+            title: 'Duplicate workflow parameter',
+            description: `Multiple parameters with the name **${p.name}** exist. Ensure parameter names are unique.`,
+          },
+          details: { parameter: p.name },
+        })
       }
       parameterNames.add(p.name)
     })

package/src/rules/issues/workflows/noPostNavigateAction.ts

@@ -34,7 +34,14 @@ export const noPostNavigateAction: Rule<
     const actionIndex = Number(_actionIndex)
     if (actionIndex < actions.length - 1) {
       // If the action is not the last one in the array, report it
-      report(path, undefined, ['delete-following-actions'])
+      report({
+        path,
+        info: {
+          title: 'Avoid actions after "Go to URL" action',
+          description: `The "Go to URL" action should be the last action in a workflow, as subsequent actions might not be evaluated before the browser navigates to the new URL.`,
+        },
+        fixes: ['delete-following-actions'],
+      })
     }
   },
   fixes: {

package/src/rules/issues/workflows/noReferenceComponentWorkflowRule.ts

@@ -77,6 +77,13 @@ export const noReferenceComponentWorkflowRule: Rule<{
       }
     }
 
-    report(path, { contextSubscribers, name: value.name })
+    report({
+      path,
+      info: {
+        title: 'Unused component workflow',
+        description: `**${value.name}** is never used by any workflow. Consider removing it.`,
+      },
+      details: { contextSubscribers, name: value.name },
+    })
   },
 }

package/src/rules/issues/workflows/unknownContextProviderWorkflowRule.ts

@@ -25,9 +25,16 @@ export const unknownContextProviderWorkflowRule: Rule<{
     }
     for (const workflowName of value.workflows) {
       if (component.workflows?.[workflowName]?.exposeInContext !== true) {
-        report(path, {
-          providerName: value.componentName,
-          workflowName,
+        report({
+          path,
+          info: {
+            title: 'Unknown context provider workflow',
+            description: `**${workflowName}** does not exist on the context provider **${value.componentName}**. Calling an unknown workflow will have no effect. Make sure to define it before using it.`,
+          },
+          details: {
+            providerName: value.componentName,
+            workflowName,
+          },
         })
       }
     }

package/src/rules/issues/workflows/unknownContextWorkflowRule.ts

@@ -22,9 +22,16 @@ export const unknownContextWorkflowRule: Rule<{
       return
     }
 
-    report(path, {
-      providerName: value.contextProvider,
-      workflowName: value.workflow,
+    report({
+      path,
+      info: {
+        title: 'Unknown context workflow',
+        description: `**${value.workflow}** is not subscribed. Make sure to subscribe to it in the component context section before using it.`,
+      },
+      details: {
+        providerName: value.contextProvider,
+        workflowName: value.workflow,
+      },
     })
   },
 }

package/src/rules/issues/workflows/unknownTriggerWorkflowParameterRule.ts

@@ -45,8 +45,15 @@ export const unknownTriggerWorkflowParameterRule: Rule<{ parameter: string }> =
       )
       Object.keys(value.parameters ?? {}).forEach((parameterKey) => {
         if (!workflowParameters.has(parameterKey)) {
-          report([...path, 'parameters', parameterKey], {
-            parameter: parameterKey,
+          report({
+            path: [...path, 'parameters', parameterKey],
+            info: {
+              title: `Unknown parameter in workflow`,
+              description: `The workflow parameter "${parameterKey}" is not a valid. It may have been removed from the workflow after it was set. This parameter can safely be removed.`,
+            },
+            details: {
+              parameter: parameterKey,
+            },
           })
         }
       })

package/src/rules/issues/workflows/unknownTriggerWorkflowRule.ts

@@ -16,7 +16,13 @@ export const unknownTriggerWorkflowRule: Rule<void> = {
 
     const workflow = args.component.workflows?.[value.workflow]
     if (!workflow) {
-      report(path)
+      report({
+        path,
+        info: {
+          title: 'Unknown workflow trigger',
+          description: `This workflow does not exist and cannot be triggered.`,
+        },
+      })
     }
   },
 }

package/src/rules/issues/workflows/unknownWorkflowParameterRule.ts

@@ -30,8 +30,15 @@ export const unknownWorkflowParameterRule: Rule<{ parameter: string }> = {
       ),
     )
     if (!workflowParameters.has(parameterName)) {
-      report(path, {
-        parameter: parameterName,
+      report({
+        path,
+        info: {
+          title: 'Unknown workflow parameter',
+          description: `**${parameterName}** does not exist in this workflow.`,
+        },
+        details: {
+          parameter: parameterName,
+        },
       })
     }
   },

package/src/searchProject.ts

@@ -272,7 +272,7 @@ function* visitNode({
       console.timeStamp(`Visiting rule ${rule.code}`)
       rule.visit(
         // Report callback used to report issues
-        (path, details, fixes) => {
+        ({ path, details, fixes, info }) => {
           if (fixOptions) {
             // We're in "fix mode"
             if (
@@ -301,6 +301,7 @@ function* visitNode({
               path,
               details,
               fixes,
+              info,
             })
           }
         },