@nordcraft/search 1.0.53 → 1.0.54

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

@@ -0,0 +1,303 @@
+import type { ElementNodeModel } from '@nordcraft/core/dist/component/component.types'
+import type { ProjectFiles } from '@nordcraft/ssr/dist/ssr.types'
+import { describe, expect, test } from 'bun:test'
+import { fixProject } from '../../../fixProject'
+import { searchProject } from '../../../searchProject'
+import { invalidStyleSyntaxRule } from './invalidStyleSyntaxRule'
+
+describe('find invalidStyleSyntaxRule', () => {
+  test('should find invalid style syntax', () => {
+    const problems = Array.from(
+      searchProject({
+        files: {
+          formulas: {},
+          components: {
+            test: {
+              name: 'test',
+              nodes: {
+                root: {
+                  tag: 'ul',
+                  type: 'element',
+                  attrs: {},
+                  style: {
+                    gap: '8px',
+                    width: '100%',
+                    'max-width': 'calc(NOT VALID',
+                    height: '/* 100px */ 22px',
+                    '{': '100px',
+                    'border-width': '--my-var',
+                  },
+                  events: {},
+                  classes: {},
+                  children: [],
+                },
+              },
+              formulas: {},
+              apis: {},
+              attributes: {},
+              variables: {},
+            },
+          },
+        },
+        rules: [invalidStyleSyntaxRule],
+      }),
+    )
+
+    expect(problems).toHaveLength(2)
+    expect(problems[0].code).toBe('invalid style syntax')
+    expect(problems[0].path).toEqual([
+      'components',
+      'test',
+      'nodes',
+      'root',
+      'style',
+      'max-width',
+    ])
+    expect(problems[0].details.property).toBe('max-width')
+    expect(problems[1].details.property).toBe('{')
+  })
+  test.only('should find class based invalid style syntax', () => {
+    const problems = Array.from(
+      searchProject({
+        files: {
+          formulas: {},
+          components: {
+            test: {
+              apis: {},
+              name: 'test',
+              nodes: {
+                root: {
+                  tag: 'div',
+                  type: 'element',
+                  attrs: {},
+                  style: {
+                    flex: '0',
+                    width: 'fit-content',
+                    background:
+                      'linear-gradient(to bottom right, var(--Lighter-Navy) 0%, var(--Dark-Navy) 100%) scroll padding-box border-box repeat repeat 0% 0% / auto',
+                    'box-shadow': '0px 2px 40px 10px var(--Dark-Navy)',
+                    'border-color': 'var(--Lighter-Navy)',
+                    'border-style': 'solid',
+                    'border-width': '2px',
+                    'border-top-left-radius': '6px',
+                    'border-top-right-radius': '6px',
+                    'border-bottom-left-radius': '6px',
+                    'border-bottom-right-radius': '6px',
+                  },
+                  events: {},
+                  classes: {},
+                  children: ['9HN6AOP6F6ofzHhVh089X'],
+                  'style-variables': [],
+                },
+                '6pb4ELucFmm1GwGbVfLc7': {
+                  type: 'text',
+                  value: {
+                    type: 'value',
+                    value: '',
+                  },
+                },
+                '8vrF3RhVEhajiB-f-sJ7S': {
+                  type: 'text',
+                  value: {
+                    type: 'value',
+                    value: '#00a7e1',
+                  },
+                },
+                '9HN6AOP6F6ofzHhVh089X': {
+                  name: 'calendar',
+                  type: 'component',
+                  attrs: {},
+                  style: {
+                    '': '',
+                    '}': '',
+                    flex: '0',
+                    color: '#ffffff',
+                    '/* Red background */    color': '#ffffff !important',
+                    '/* Blue background */    color': '#ffffff',
+                    '/* Muted gray */    font-family': '#00a7e1',
+                    '/* White text */\n    font-family': 'inherit',
+                    '/* Slightly darker header */    color': '#00a7e1',
+                    '/* Dark blue-gray background */    font-family':
+                      "'Red Hat Display'",
+                    '/* Light gray for regular days */\n    font-family':
+                      'inherit',
+                    '}\n\n/* Arrow navigation buttons */\n.my-class .my-other-class {\n    color':
+                      '#ecf0f1',
+                    '/* White text */\n}\n\n/* Hover state for my buttons */\n.my-class .my-other-class-my__btn':
+                      'hover {\nbackground-color: #08365b',
+                  },
+                  events: {},
+                  package: 'vanilla',
+                  children: [
+                    '6pb4ELucFmm1GwGbVfLc7',
+                    '8vrF3RhVEhajiB-f-sJ7S',
+                    'R-hFhzdREjkUXdlFGbpT9',
+                  ],
+                  variants: [
+                    {
+                      style: {
+                        '': '',
+                        '/* Dimmed gray */\n}\n\n/* My special coloring */\n.my-class .my-class-my__btn_special {\nbackground-color':
+                          '#ffffff',
+                      },
+                      hover: true,
+                      breakpoint: 'small',
+                    },
+                  ],
+                },
+                'R-hFhzdREjkUXdlFGbpT9': {
+                  type: 'text',
+                  value: {
+                    type: 'value',
+                    value: '#ffffff00',
+                  },
+                },
+              },
+              events: [],
+              formulas: {},
+              variables: {},
+              attributes: {},
+            },
+          },
+        },
+        rules: [invalidStyleSyntaxRule],
+      }),
+    )
+
+    expect(problems).toHaveLength(6)
+    expect(problems[0].code).toBe('invalid style syntax')
+    expect(problems[0].path).toEqual([
+      'components',
+      'test',
+      'nodes',
+      '9HN6AOP6F6ofzHhVh089X',
+      'style',
+      '',
+    ])
+    expect(problems[4].path).toEqual([
+      'components',
+      'test',
+      'nodes',
+      '9HN6AOP6F6ofzHhVh089X',
+      'variants',
+      0,
+      'style',
+      '',
+    ])
+    const invalidStyleProperties = problems
+      .filter((p) => !p.path.includes('variants'))
+      .map((p) => p.details.property)
+    expect(invalidStyleProperties).toEqual([
+      '',
+      '}',
+      '}\n\n/* Arrow navigation buttons */\n.my-class .my-other-class {\n    color',
+      '/* White text */\n}\n\n/* Hover state for my buttons */\n.my-class .my-other-class-my__btn',
+    ])
+    const invalidVariantProperties = problems
+      .filter((p) => p.path.includes('variants'))
+      .map((p) => p.details.property)
+    expect(invalidVariantProperties).toEqual([
+      '',
+      '/* Dimmed gray */\n}\n\n/* My special coloring */\n.my-class .my-class-my__btn_special {\nbackground-color',
+    ])
+  })
+})
+
+describe('fix invalidStyleSyntaxRule', () => {
+  test('should remove an invalid style property', () => {
+    const files: ProjectFiles = {
+      formulas: {},
+      components: {
+        test: {
+          name: 'test',
+          nodes: {
+            root: {
+              tag: 'ul',
+              type: 'element',
+              attrs: {},
+              style: {
+                gap: '8px',
+                width: '100%',
+                'max-width': 'calc(NOT VALID',
+                height: '/* 100px */ 22px',
+                '{': '100px',
+              },
+              events: {},
+              classes: {},
+              children: [],
+            },
+          },
+          formulas: {},
+          apis: {},
+          attributes: {},
+          variables: {},
+        },
+      },
+    }
+    const fixedFiles = fixProject({
+      files,
+      rule: invalidStyleSyntaxRule,
+      fixType: 'delete-style-property',
+    })
+    expect((fixedFiles.components.test!.nodes.root as ElementNodeModel).style)
+      .toMatchInlineSnapshot(`
+      {
+        "gap": "8px",
+        "height": "/* 100px */ 22px",
+        "width": "100%",
+      }
+    `)
+  })
+  test('should remove an invalid style variant style property', () => {
+    const files: ProjectFiles = {
+      formulas: {},
+      components: {
+        test: {
+          name: 'test',
+          nodes: {
+            root: {
+              tag: 'ul',
+              type: 'element',
+              attrs: {},
+              style: {},
+              events: {},
+              classes: {},
+              children: [],
+              variants: [
+                {
+                  style: {
+                    gap: '8px',
+                    width: '100%',
+                    'max-width': 'calc(NOT VALID',
+                    height: '/* 100px */ 22px',
+                    '{': '100px',
+                  },
+                  breakpoint: 'small',
+                },
+              ],
+            },
+          },
+          formulas: {},
+          apis: {},
+          attributes: {},
+          variables: {},
+        },
+      },
+    }
+    const fixedFiles = fixProject({
+      files,
+      rule: invalidStyleSyntaxRule,
+      fixType: 'delete-style-property',
+    })
+    expect(
+      (fixedFiles.components.test!.nodes.root as ElementNodeModel).variants?.[0]
+        .style,
+    ).toMatchInlineSnapshot(`
+      {
+        "gap": "8px",
+        "height": "/* 100px */ 22px",
+        "width": "100%",
+      }
+    `)
+  })
+})

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

@@ -0,0 +1,35 @@
+import { parse } from 'postcss'
+import type { Rule } from '../../../types'
+import { removeFromPathFix } from '../../../util/removeUnused.fix'
+
+export const invalidStyleSyntaxRule: Rule<{
+  property: string
+}> = {
+  code: 'invalid style syntax',
+  level: 'error',
+  category: 'Quality',
+  visit: (report, { nodeType, value, path, memo }) => {
+    if (nodeType !== 'style-declaration') {
+      return
+    }
+    const valid = memo(
+      `valid-style-${value.styleProperty}:${value.styleValue}`,
+      () => {
+        try {
+          parse(`${value.styleProperty}: ${value.styleValue}`)
+          return true
+        } catch {
+          return false
+        }
+      },
+    )
+    if (!valid) {
+      report(path, { property: value.styleProperty }, ['delete-style-property'])
+    }
+  },
+  fixes: {
+    'delete-style-property': removeFromPathFix,
+  },
+}
+
+export type InvalidStyleSyntaxRuleFix = 'delete-style-property'

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

@@ -0,0 +1,3 @@
+import { invalidStyleSyntaxRule } from './invalidStyleSyntaxRule'
+
+export default [invalidStyleSyntaxRule]

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

@@ -0,0 +1,175 @@
+import type { ProjectFiles } from '@nordcraft/ssr/dist/ssr.types'
+import { describe, expect, test } from 'bun:test'
+import { fixProject } from '../../../fixProject'
+import { searchProject } from '../../../searchProject'
+import { noReferenceVariableRule } from './noReferenceVariableRule'
+
+describe('find noReferenceVariableRule', () => {
+  test('should detect variables with no references', () => {
+    const problems = Array.from(
+      searchProject({
+        files: {
+          formulas: {},
+          components: {
+            test: {
+              name: 'test',
+              nodes: {},
+              formulas: {},
+              apis: {},
+              attributes: {},
+              variables: {
+                'my-variable': {
+                  initialValue: { type: 'value', value: null },
+                  '@nordcraft/metadata': {
+                    comments: null,
+                  },
+                },
+              },
+            },
+          },
+        },
+        rules: [noReferenceVariableRule],
+      }),
+    )
+
+    expect(problems).toHaveLength(1)
+    expect(problems[0].code).toBe('no-reference variable')
+    expect(problems[0].path).toEqual([
+      'components',
+      'test',
+      'variables',
+      'my-variable',
+    ])
+  })
+
+  test('should not detect variables with references', () => {
+    const problems = Array.from(
+      searchProject({
+        files: {
+          components: {
+            test: {
+              name: 'test',
+              nodes: {},
+              formulas: {
+                'my-formula': {
+                  name: 'my-formula',
+                  arguments: [],
+                  formula: {
+                    type: 'apply',
+                    name: 'test',
+                    arguments: [
+                      {
+                        formula: {
+                          type: 'path',
+                          path: [
+                            'Variables',
+                            'my-variable',
+                            'some-nested-value',
+                          ],
+                        },
+                      },
+                    ],
+                  },
+                  '@nordcraft/metadata': {
+                    comments: null,
+                  },
+                },
+              },
+              apis: {},
+              attributes: {},
+              variables: {
+                'my-variable': {
+                  initialValue: { type: 'value', value: null },
+                  '@nordcraft/metadata': {
+                    comments: null,
+                  },
+                },
+              },
+            },
+          },
+        },
+        rules: [noReferenceVariableRule],
+      }),
+    )
+
+    expect(problems).toEqual([])
+  })
+})
+
+describe('fix noReferenceVariableRule', () => {
+  test('should remove variables with no references', () => {
+    const projectFiles: ProjectFiles = {
+      formulas: {},
+      components: {
+        test: {
+          name: 'test',
+          nodes: {},
+          formulas: {},
+          apis: {},
+          attributes: {},
+          variables: {
+            'my-variable': {
+              initialValue: { type: 'value', value: null },
+              '@nordcraft/metadata': {
+                comments: null,
+              },
+            },
+          },
+        },
+      },
+    }
+    const fixedFiles = fixProject({
+      files: projectFiles,
+      rule: noReferenceVariableRule,
+      fixType: 'delete-variable',
+    })
+    expect(fixedFiles.components['test']?.variables).toEqual({})
+  })
+  test('should not remove variables with references', () => {
+    const files: ProjectFiles = {
+      components: {
+        test: {
+          name: 'test',
+          nodes: {},
+          formulas: {
+            'my-formula': {
+              name: 'my-formula',
+              arguments: [],
+              formula: {
+                type: 'apply',
+                name: 'test',
+                arguments: [
+                  {
+                    formula: {
+                      type: 'path',
+                      path: ['Variables', 'my-variable', 'some-nested-value'],
+                    },
+                  },
+                ],
+              },
+              '@nordcraft/metadata': {
+                comments: null,
+              },
+            },
+          },
+          apis: {},
+          attributes: {},
+          variables: {
+            'my-variable': {
+              initialValue: { type: 'value', value: null },
+              '@nordcraft/metadata': {
+                comments: null,
+              },
+            },
+          },
+        },
+      },
+    }
+    const fixedFiles = fixProject({
+      files,
+      rule: noReferenceVariableRule,
+      fixType: 'delete-variable',
+    })
+    expect(fixedFiles).toEqual(files)
+  })
+})

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

@@ -0,0 +1,42 @@
+import type { Rule } from '../../../types'
+import { removeFromPathFix } from '../../../util/removeUnused.fix'
+
+export const noReferenceVariableRule: Rule<void> = {
+  code: 'no-reference variable',
+  level: 'warning',
+  category: 'No References',
+  visit: (report, args) => {
+    if (args.nodeType !== 'component-variable') {
+      return
+    }
+    const { path, memo, component } = args
+
+    const [, , , variableKey] = path
+
+    const variableInComponent = memo(
+      `variableInComponent/${component.name}`,
+      () =>
+        new Set(
+          Array.from(component.formulasInComponent())
+            .filter(
+              ({ formula }) =>
+                formula.type === 'path' &&
+                formula.path[0] === 'Variables' &&
+                formula.path[1],
+            )
+            .map<string | number>(({ formula }) => (formula as any).path[1]),
+        ),
+    )
+
+    if (variableInComponent.has(variableKey)) {
+      return
+    }
+
+    report(path, undefined, ['delete-variable'])
+  },
+  fixes: {
+    'delete-variable': removeFromPathFix,
+  },
+}
+
+export type NoReferenceVariableRuleFix = 'delete-variable'

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

@@ -0,0 +1,92 @@
+import { describe, expect, test } from 'bun:test'
+import { searchProject } from '../../../searchProject'
+import { unknownVariableRule } from './unknownVariableRule'
+
+describe('unknownVariable', () => {
+  test('should report reading unknown variables', () => {
+    const problems = Array.from(
+      searchProject({
+        files: {
+          components: {
+            test: {
+              name: 'test',
+              nodes: {
+                root: {
+                  type: 'element',
+                  attrs: {},
+                  classes: {
+                    'my-class': {
+                      formula: {
+                        type: 'path',
+                        path: ['Variables', 'unknown'],
+                      },
+                    },
+                  },
+                  events: {},
+                  tag: 'div',
+                  children: [],
+                  style: {},
+                },
+              },
+              formulas: {},
+              apis: {},
+              attributes: {},
+              variables: {},
+            },
+          },
+        },
+        rules: [unknownVariableRule],
+      }),
+    )
+
+    expect(problems).toHaveLength(1)
+    expect(problems[0].code).toBe('unknown variable')
+    expect(problems[0].details).toEqual({ name: 'unknown' })
+  })
+
+  test('should not report variables that exist', () => {
+    const problems = Array.from(
+      searchProject({
+        files: {
+          components: {
+            test: {
+              name: 'test',
+              nodes: {
+                root: {
+                  type: 'element',
+                  attrs: {},
+                  classes: {
+                    'my-class': {
+                      formula: {
+                        type: 'path',
+                        path: ['Variables', 'known'],
+                      },
+                    },
+                  },
+                  events: {},
+                  tag: 'div',
+                  children: [],
+                  style: {},
+                },
+              },
+              formulas: {},
+              apis: {},
+              attributes: {},
+              variables: {
+                known: {
+                  initialValue: { type: 'value', value: null },
+                  '@nordcraft/metadata': {
+                    comments: null,
+                  },
+                },
+              },
+            },
+          },
+        },
+        rules: [unknownVariableRule],
+      }),
+    )
+
+    expect(problems).toEqual([])
+  })
+})

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

@@ -0,0 +1,25 @@
+import type { Rule } from '../../../types'
+
+export const unknownVariableRule: Rule<{
+  name: string
+}> = {
+  code: 'unknown variable',
+  level: 'error',
+  category: 'Unknown Reference',
+  visit: (report, { path, files, value, nodeType }) => {
+    if (
+      nodeType !== 'formula' ||
+      value.type !== 'path' ||
+      value.path[0] !== 'Variables'
+    ) {
+      return
+    }
+
+    const [, componentName] = path
+    const [, variableKey] = value.path
+    const component = files.components[componentName]
+    if (!component?.variables?.[variableKey]) {
+      report(path, { name: variableKey })
+    }
+  },
+}