@codeleap/eslint-plugin 6.8.0

package/index.js

@@ -0,0 +1,6 @@
+module.exports = {
+  rules: {
+    'rules-of-hooks': require('./rules/rules-of-hooks'),
+    'text-requires-color': require('./rules/text-requires-color'),
+  },
+}

package/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "@codeleap/eslint-plugin",
+  "version": "6.8.0",
+  "main": "index.js",
+  "license": "UNLICENSED",
+  "repository": {
+    "url": "https://github.com/codeleap-uk/internal-libs-monorepo.git",
+    "type": "git",
+    "directory": "packages/eslint-plugin-codeleap"
+  },
+  "peerDependencies": {
+    "eslint": ">=8.0.0",
+    "eslint-plugin-react-hooks": ">=7.0.0"
+  }
+}

package/rules/rules-of-hooks.js

@@ -0,0 +1,94 @@
+const reactHooksPlugin = require('eslint-plugin-react-hooks')
+
+const originalRule = reactHooksPlugin.rules['rules-of-hooks']
+
+const DEFAULT_PORTAL_METHODS = ['content']
+
+function isFunction(node) {
+  return (
+    node.type === 'ArrowFunctionExpression' ||
+    node.type === 'FunctionExpression' ||
+    node.type === 'FunctionDeclaration'
+  )
+}
+
+function getEnclosingFunction(node) {
+  let current = node.parent
+  while (current) {
+    if (isFunction(current)) return current
+    current = current.parent
+  }
+  return null
+}
+
+// Returns true when `fn` is the first argument of a `.method(fn)` call
+// where method name is in the configured portal render methods set.
+function isPortalRenderCallback(fn, portalMethods) {
+  const parent = fn.parent
+  if (!parent || parent.type !== 'CallExpression') return false
+  const callee = parent.callee
+  if (!callee || callee.type !== 'MemberExpression') return false
+  const methodName = callee.property?.name
+  if (!portalMethods.has(methodName)) return false
+  return parent.arguments[0] === fn
+}
+
+/**
+ * Extends `eslint-plugin-react-hooks/rules-of-hooks` to allow hooks inside
+ * portal render callbacks (e.g. `somePortal.content(() => { useMyHook() })`).
+ *
+ * The upstream rule has no awareness of portal patterns: it sees an anonymous
+ * function passed as a method argument and flags any hook call inside as a
+ * Rules-of-Hooks violation, even though that callback is always invoked as a
+ * React component subtree. This wrapper suppresses those false positives by
+ * checking whether the enclosing function is the first argument of a
+ * configured portal method call (default: `content`), then delegating
+ * everything else to the original rule unchanged.
+ *
+ * Configure additional method names via the `portalMethods` option when portal
+ * APIs in your project use a different render method name.
+ */
+module.exports = {
+  meta: {
+    type: 'problem',
+    docs: originalRule.meta?.docs,
+    schema: [
+      {
+        type: 'object',
+        properties: {
+          portalMethods: {
+            type: 'array',
+            items: { type: 'string' },
+            description:
+              'Method names whose first function argument is treated as a React component context',
+          },
+        },
+        additionalProperties: false,
+      },
+    ],
+  },
+  create(context) {
+    const options = context.options[0] || {}
+    const portalMethods = new Set(options.portalMethods ?? DEFAULT_PORTAL_METHODS)
+
+    const originalReport = context.report.bind(context)
+    const wrappedContext = Object.create(context)
+    // context.report is non-writable on FileContext — use defineProperty to
+    // force an own property that shadows the prototype.
+    Object.defineProperty(wrappedContext, 'report', {
+      value: function (descriptor) {
+        const reportNode = descriptor.node
+        if (reportNode) {
+          const fn = getEnclosingFunction(reportNode)
+          if (fn && isPortalRenderCallback(fn, portalMethods)) return
+        }
+        originalReport(descriptor)
+      },
+      writable: true,
+      configurable: true,
+      enumerable: true,
+    })
+
+    return originalRule.create(wrappedContext)
+  },
+}

package/rules/text-requires-color.js

@@ -0,0 +1,75 @@
+/**
+ * Enforces that every `<Text>` JSX element carries a `color:*` design-token
+ * variant in its `style` prop.
+ *
+ * Without this constraint it is easy to render text that inherits or defaults
+ * to an implicit colour, making dark-mode and theme-switching bugs hard to
+ * catch at review time. The rule catches the most common static forms
+ * (string literal, expression string, and all-literal arrays) and deliberately
+ * skips dynamic expressions (identifiers, ternaries, calls) that cannot be
+ * resolved statically, so it will not produce false positives on computed
+ * style values.
+ */
+module.exports = {
+  meta: {
+    type: 'problem',
+    docs: {
+      description: 'Text components must include a color variant (color:*) in their style prop',
+    },
+    schema: [],
+    messages: {
+      missingColorVariant: 'Text component is missing a color variant. Add a color:* variant to the style prop (e.g. "color:foreground0Default").',
+    },
+  },
+  create(context) {
+    return {
+      JSXOpeningElement(node) {
+        if (node.name.type !== 'JSXIdentifier' || node.name.name !== 'Text') return
+
+        const styleProp = node.attributes.find(
+          attr => attr.type === 'JSXAttribute' && attr.name?.name === 'style'
+        )
+
+        if (!styleProp) {
+          context.report({ node, messageId: 'missingColorVariant' })
+          return
+        }
+
+        const value = styleProp.value
+
+        // style='some string' (bare JSX attribute string)
+        if (value?.type === 'Literal') {
+          if (typeof value.value === 'string' && value.value.startsWith('color:')) return
+          context.report({ node, messageId: 'missingColorVariant' })
+          return
+        }
+
+        if (value?.type !== 'JSXExpressionContainer') return
+
+        const expr = value.expression
+
+        // style={'some string'}
+        if (expr.type === 'Literal') {
+          if (typeof expr.value === 'string' && expr.value.startsWith('color:')) return
+          context.report({ node, messageId: 'missingColorVariant' })
+          return
+        }
+
+        // style={['a', 'b', ...]}
+        if (expr.type === 'ArrayExpression') {
+          // Any dynamic element — skip, can't determine statically
+          const hasDynamic = expr.elements.some(el => el && el.type !== 'Literal')
+          if (hasDynamic) return
+
+          const hasColor = expr.elements.some(
+            el => el?.type === 'Literal' && typeof el.value === 'string' && el.value.startsWith('color:')
+          )
+          if (!hasColor) context.report({ node, messageId: 'missingColorVariant' })
+          return
+        }
+
+        // Any other expression (identifier, member, call, ternary, …) — skip
+      },
+    }
+  },
+}