feat: Disable inline style prop for components

Added a custom ESLint rule `gamut/no-inline-style` to `eslint-plugin-gamut` to disallow inline `style` props on JSX elements. This rule encourages the use of styled components, CSS classes, or design system utilities instead of inline styles.

**Changes:**
- Created `no-inline-style` rule with full test coverage in `eslint-plugin-gamut`
- Updated `.eslintrc.js` to use the custom rule (set to 'error' level)
- Added rule to `recommended` configuration
- Disabled rule for `gamut-illustrations` package where inline styles are acceptable
- Added ESLint disable comments to existing components that require inline styles (Card, Rotation, ExpandInCollapseOut, FocusTrap, Popover, VidstackPlayer, SelectDropdown components)
- Created comprehensive ESLint rules documentation page in Storybook (`Meta/ESLint Rules`)
- Added ESLint rules link to Meta section table of contents

Author: LinKCoding

.eslintrc.js

@@ -11,6 +11,7 @@ module.exports = {
   rules: {
     'gamut/prefer-themed': 'error',
     'gamut/no-css-standalone': 'error',
+    'gamut/no-inline-style': 'error',
     'gamut/import-paths': 'error',
     'import/no-extraneous-dependencies': 'off',
   },
@@ -66,5 +67,11 @@ module.exports = {
         'lodash/import-scope': ['error', 'method'],
       },
     },
+    {
+      files: ['packages/gamut-illustrations/**'],
+      rules: {
+        'gamut/no-inline-style': 'off',
+      },
+    },
   ],
 };

packages/eslint-plugin-gamut/README.md

@@ -16,6 +16,7 @@ module.exports = {
     'gamut/prefer-themed': 'error',
     'gamut/no-css-standalone': 'error',
     'gamut/import-paths': 'error',
+    'gamut/no-inline-style': 'error',
   },
 };
 ```

packages/eslint-plugin-gamut/src/index.tsx

@@ -1,11 +1,13 @@
 import gamutImportPaths from './gamut-import-paths';
 import noCssStandalone from './no-css-standalone';
+import noInlineStyle from './no-inline-style';
 import preferThemed from './prefer-themed';
 import recommended from './recommended';
 
 const rules = {
   'import-paths': gamutImportPaths,
   'no-css-standalone': noCssStandalone,
+  'no-inline-style': noInlineStyle,
   'prefer-themed': preferThemed,
 };
 

packages/eslint-plugin-gamut/src/no-css-standalone.ts

@@ -19,7 +19,7 @@ export default createRule({
     },
     messages: {
       noCssStandalone:
-        "Do not create anymore stylesheets, please see Gamut's Notion page for current best practices.",
+        "Do not create anymore stylesheets, please see Gamut's Storybook documentation for current best practices.",
     },
     type: 'suggestion',
     schema: [],

packages/eslint-plugin-gamut/src/no-inline-style.test.ts

@@ -0,0 +1,72 @@
+import { ESLintUtils } from '@typescript-eslint/utils';
+
+import rule from './no-inline-style';
+
+const ruleTester = new ESLintUtils.RuleTester({
+  parser: '@typescript-eslint/parser',
+  parserOptions: {
+    ecmaFeatures: {
+      jsx: true,
+    },
+  },
+});
+
+ruleTester.run('no-inline-style', rule, {
+  valid: [
+    `<div />`,
+    `<div className="foo" />`,
+    `<Component className="bar" />`,
+    `<div styles={styles} />`,
+    `<Component styleSheet={sheet} />`,
+    `const style = { padding: 0 };`,
+  ],
+  invalid: [
+    {
+      code: `<div style={{ padding: 0 }} />`,
+      errors: [
+        {
+          messageId: 'noInlineStyle',
+        },
+      ],
+    },
+    {
+      code: `<Component style={{ margin: '10px' }} />`,
+      errors: [
+        {
+          messageId: 'noInlineStyle',
+        },
+      ],
+    },
+    {
+      code: `<button style={styles.button} />`,
+      errors: [
+        {
+          messageId: 'noInlineStyle',
+        },
+      ],
+    },
+    {
+      code: `<div className="foo" style={{ color: 'red' }} />`,
+      errors: [
+        {
+          messageId: 'noInlineStyle',
+        },
+      ],
+    },
+    {
+      code: `
+        <Component
+          style={{
+            padding: 0,
+            margin: 0,
+          }}
+        />
+      `,
+      errors: [
+        {
+          messageId: 'noInlineStyle',
+        },
+      ],
+    },
+  ],
+});

packages/eslint-plugin-gamut/src/no-inline-style.ts

@@ -0,0 +1,30 @@
+import { createRule } from './createRule';
+
+export default createRule({
+  create(context) {
+    return {
+      JSXAttribute(node) {
+        if (node.name.type === 'JSXIdentifier' && node.name.name === 'style') {
+          context.report({
+            messageId: 'noInlineStyle',
+            node,
+          });
+        }
+      },
+    };
+  },
+  defaultOptions: [],
+  meta: {
+    docs: {
+      description: 'Disallow inline style props on JSX elements.',
+      recommended: 'error',
+    },
+    messages: {
+      noInlineStyle:
+        'The use of inline styles is discouraged — consider using styled components, design system utilities, or CSS classes instead.',
+    },
+    type: 'suggestion',
+    schema: [],
+  },
+  name: 'no-inline-style',
+});

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

@@ -1,6 +1,7 @@
 export default {
   rules: {
     'gamut/no-css-standalone': 'error',
+    'gamut/no-inline-style': 'error',
     'gamut/prefer-themed': 'off',
     'gamut/gamut-import-paths': 'error',
   },

packages/gamut/src/Animation/ExpandInCollapseOut.tsx

@@ -11,6 +11,7 @@ export const ExpandInCollapseOut: React.FC<WithChildrenProp> = ({
       animate="expanded"
       exit="collapsed"
       initial="collapsed"
+      // eslint-disable-next-line gamut/no-inline-style
       style={{ overflow: 'hidden' }}
       transition={{ duration: timingValues.medium / 1000, ease: 'easeInOut' }}
       variants={{

packages/gamut/src/Animation/Rotation.tsx

@@ -35,6 +35,7 @@ export const Rotation: React.FC<RotationProps> = ({
   children,
   ...rest
 }) => (
+  /* eslint-disable gamut/no-inline-style */
   <motion.div
     animate={rotated ? 'rotated' : 'normal'}
     style={{
@@ -52,4 +53,5 @@ export const Rotation: React.FC<RotationProps> = ({
   >
     {children}
   </motion.div>
+  /* eslint-enable gamut/no-inline-style */
 );

packages/gamut/src/Card/index.tsx

@@ -45,6 +45,7 @@ export const Card: React.FC<CardProps> = ({
             left={shadow === 'patternLeft' ? '-0.5rem' : undefined}
             position="absolute"
             right={shadow === 'patternRight' ? '-0.5rem' : undefined}
+            // eslint-disable-next-line gamut/no-inline-style
             style={{ borderRadius: 'inherit', color: 'currentcolor' }}
             top=".5rem"
           />