Implement Style Order rule

.changeset/early-lies-sell.md

@@ -0,0 +1,5 @@
+---
+'@devup-ui/eslint-plugin': patch
+---
+
+Implement style order rule

packages/eslint-plugin/src/configs/__tests__/__snapshots__/recommended.test.ts.snap

@@ -73,6 +73,22 @@ exports[`recommended > export recommended config 1`] = `
             },
             "name": "no-useless-tailing-nulls",
           },
+          "style-order-range": {
+            "create": [Function],
+            "defaultOptions": [],
+            "meta": {
+              "docs": {
+                "description": "Ensures styleOrder prop is within valid range (0 < value < 255).",
+                "url": "https://github.com/dev-five-git/devup-ui/tree/main/packages/eslint-plugin/src/rules/style-order-range",
+              },
+              "messages": {
+                "styleOrderRange": "styleOrder prop must be a number greater than 0 and less than 255.",
+              },
+              "schema": [],
+              "type": "problem",
+            },
+            "name": "style-order-range",
+          },
         },
       },
     },
@@ -81,6 +97,7 @@ exports[`recommended > export recommended config 1`] = `
       "@devup-ui/no-duplicate-value": "error",
       "@devup-ui/no-useless-responsive": "error",
       "@devup-ui/no-useless-tailing-nulls": "error",
+      "@devup-ui/style-order-range": "error",
     },
   },
 ]

packages/eslint-plugin/src/configs/recommended.ts

@@ -3,6 +3,7 @@ import {
   noDuplicateValue,
   noUselessResponsive,
   noUselessTailingNulls,
+  styleOrderRange,
 } from '../rules'
 
 export default [
@@ -14,6 +15,7 @@ export default [
           'css-utils-literal-only': cssUtilsLiteralOnly,
           'no-duplicate-value': noDuplicateValue,
           'no-useless-responsive': noUselessResponsive,
+          'style-order-range': styleOrderRange,
         },
       },
     },
@@ -22,6 +24,7 @@ export default [
       '@devup-ui/css-utils-literal-only': 'error',
       '@devup-ui/no-duplicate-value': 'error',
       '@devup-ui/no-useless-responsive': 'error',
+      '@devup-ui/style-order-range': 'error',
     },
   },
 ]

packages/eslint-plugin/src/rules/__tests__/index.test.ts

@@ -6,6 +6,7 @@ describe('export index', () => {
       cssUtilsLiteralOnly: expect.any(Object),
       noDuplicateValue: expect.any(Object),
       noUselessResponsive: expect.any(Object),
+      styleOrderRange: expect.any(Object),
     })
   })
 })

packages/eslint-plugin/src/rules/index.ts

@@ -2,3 +2,4 @@ export * from './css-utils-literal-only'
 export * from './no-duplicate-value'
 export * from './no-useless-responsive'
 export * from './no-useless-tailing-nulls'
+export * from './style-order-range'

packages/eslint-plugin/src/rules/style-order-range/README.md

@@ -0,0 +1,41 @@
+# style-order-range
+
+Ensures `styleOrder` prop is within valid range (0 < value < 255).
+
+## Rule Details
+
+This rule enforces that the `styleOrder` prop must be a number greater than 0 and less than 255.
+
+### Examples of **incorrect** code for this rule:
+
+```jsx
+// Zero and negative values
+<div styleOrder={0} />
+<div styleOrder={-1} />
+<div styleOrder="-5" />
+
+// Values greater than or equal to 255
+<div styleOrder={255} />
+<div styleOrder={256} />
+<div styleOrder="300" />
+
+// Non-numeric values
+<div styleOrder="abc" />
+<div styleOrder={undefined} />
+```
+
+### Examples of **correct** code for this rule:
+
+```jsx
+// Valid range values (0 < value < 255)
+<div styleOrder={1} />
+<div styleOrder={254} />
+<div styleOrder={128} />
+<div styleOrder="100" />
+<div styleOrder="1" />
+<div styleOrder="254" />
+```
+
+## When Not To Use It
+
+If you don't use `styleOrder` props or want to allow any value range, you can disable this rule.