@brighterly/lib-fe-codestyle 0.1.0

package/dist/validate/index.js

@@ -0,0 +1,41 @@
+/**
+ * The aggregating runner behind `pnpm validate`.
+ *
+ * Why this exists rather than `a && b && c`: pnpm offers exactly one of the two properties
+ * a gate needs, never both. Default bail stops at the first failure and exits 1 — correct
+ * exit code, incomplete feedback, so you fix lint, push, and only then discover typecheck.
+ * `--no-bail` runs everything but **exits 0**, which is unusable as a gate (the same
+ * footgun the invariants CLI records as "dropped 2026-08-19: --warn-only, always exits 0").
+ *
+ * So: run every step, report all of them, and fail if any failed. One push, one run, every
+ * problem visible — locally as much as in CI.
+ */
+import { spawnSync } from 'node:child_process';
+const defaultExec = (cmd) => ({ ok: spawnSync(cmd, { shell: true, stdio: 'inherit' }).status === 0 });
+const NAME_WIDTH = 12;
+export const validate = async (steps, options = {}) => {
+    const exec = options.exec ?? defaultExec;
+    const write = options.write ?? ((s) => { process.stdout.write(s); });
+    const exit = options.exit ?? process.exit;
+    const ci = options.ci ?? Boolean(process.env.GITHUB_ACTIONS);
+    const results = [];
+    for (const step of steps) {
+        if (ci)
+            write(`::group::${step.name}\n`);
+        const started = Date.now();
+        const { ok } = exec(step.run);
+        results.push({ name: step.name, ok, ms: Date.now() - started });
+        if (ci)
+            write('::endgroup::\n');
+    }
+    const failed = results.filter(r => !r.ok);
+    write('\n');
+    for (const r of results) {
+        write(`  ${r.ok ? '✓' : '✗'} ${r.name.padEnd(NAME_WIDTH)}${(r.ms / 1000).toFixed(1)}s\n`);
+    }
+    write(failed.length
+        ? `\n  ${failed.length} of ${results.length} failed — ${failed.map(f => f.name).join(', ')}\n\n`
+        : `\n  all ${results.length} passed\n\n`);
+    exit(failed.length ? 1 : 0);
+    return results;
+};

package/eslint/index.mjs

@@ -0,0 +1,187 @@
+/**
+ * The shared flat config for the Brighterly Nuxt apps.
+ *
+ * Exports DATA and a plain ARRAY, never a factory. ESLint *replaces* rule options rather
+ * than merging them, so an app appending `check-file/folder-naming-convention` without
+ * spreading `checkFileFolders` would silently discard every shared entry. That is why the
+ * maps below are exported on their own.
+ *
+ * The default array composes both ways:
+ *   land-app  export default withNuxt(...brighterly, ...overrides)
+ *   cs-app    export default [...brighterly, ...overrides]
+ *
+ * WHAT IS DELIBERATELY NOT HERE: import ordering. land-app configures `import/order`
+ * (eslint-plugin-import, via Nuxt) while cs-app, app-tutor and app-admin configure
+ * `import-x/order`, and the `pathGroups` name each app's own aliases. Sharing it would
+ * newly impose a plugin on land-app and cs-app's alias list on everyone. It is exported as
+ * `importOrderPathGroups` for an app that wants the baseline, and nothing more.
+ */
+
+import checkFile from 'eslint-plugin-check-file'
+
+import asyncComponentsAfterMacros from './rules/async-components-after-macros.mjs'
+import noImportGroupLabels from './rules/no-import-group-labels.mjs'
+import onPrefixedCallbacks from './rules/on-prefixed-callbacks.mjs'
+import optionalCallbackChaining from './rules/optional-callback-chaining.mjs'
+import paddingAfterMacros from './rules/padding-after-macros.mjs'
+import refPrefixPropMirrors from './rules/ref-prefix-prop-mirrors.mjs'
+import requireComponentName from './rules/require-component-name.mjs'
+
+export const localRules = {
+  'async-components-after-macros': asyncComponentsAfterMacros,
+  'no-import-group-labels': noImportGroupLabels,
+  'on-prefixed-callbacks': onPrefixedCallbacks,
+  'optional-callback-chaining': optionalCallbackChaining,
+  'padding-after-macros': paddingAfterMacros,
+  'ref-prefix-prop-mirrors': refPrefixPropMirrors,
+  'require-component-name': requireComponentName,
+}
+
+const noDoubleCast = {
+  selector: 'TSAsExpression > TSAsExpression[typeAnnotation.type="TSUnknownKeyword"]',
+  message: 'Do not use "as unknown as X" — use a single assertion or fix the underlying type.',
+}
+
+const noEmitIntoComposable = {
+  selector: 'CallExpression[callee.name=/^use[A-Z]/] > Identifier[name="emit"]',
+  message: 'Do not pass emit into a composable — pass on-prefixed callbacks and wire them to emit in the component.',
+}
+
+const vMotionInlineObject = {
+  selector: 'VAttribute[directive=true][key.name.name="motion"] > VExpressionContainer > ObjectExpression',
+  message: 'Declare the v-motion preset as a named object in script, not inline in the template.',
+}
+
+const dataQaKebabCase = {
+  selector: 'VAttribute[directive=false][key.name="data-qa"] > VLiteral[value=/[^a-z0-9-]/]',
+  message: 'Static data-qa attributes must be kebab-case.',
+}
+
+const iconInsideContainer = {
+  selector: 'VElement:not([name=/^(iconcontainer|icon-container)$/]) > VElement[name=/^(fontawesomeicon|font-awesome-icon)$/]',
+  message: 'Wrap FontAwesomeIcon in IconContainer.',
+}
+
+export const restrictedSyntax = [noDoubleCast, noEmitIntoComposable]
+export const vueRestrictedSyntax = [vMotionInlineObject, dataQaKebabCase, iconInsideContainer]
+
+/** enums.ts / interfaces.ts / types.ts hold only their own kind. */
+export const typeFileSelectors = {
+  'enums.ts': [
+    { selector: 'Program > TSInterfaceDeclaration, Program > ExportNamedDeclaration > TSInterfaceDeclaration', message: 'Interfaces belong in interfaces.ts, not enums.ts.' },
+    { selector: 'Program > TSTypeAliasDeclaration, Program > ExportNamedDeclaration > TSTypeAliasDeclaration', message: 'Type aliases belong in types.ts, not enums.ts.' },
+  ],
+  'interfaces.ts': [
+    { selector: 'Program > TSEnumDeclaration, Program > ExportNamedDeclaration > TSEnumDeclaration', message: 'Enums belong in enums.ts, not interfaces.ts.' },
+    { selector: 'Program > TSTypeAliasDeclaration, Program > ExportNamedDeclaration > TSTypeAliasDeclaration', message: 'Type aliases belong in types.ts, not interfaces.ts.' },
+  ],
+  'types.ts': [
+    { selector: 'Program > TSEnumDeclaration, Program > ExportNamedDeclaration > TSEnumDeclaration', message: 'Enums belong in enums.ts, not types.ts.' },
+    { selector: 'Program > TSInterfaceDeclaration, Program > ExportNamedDeclaration > TSInterfaceDeclaration', message: 'Interfaces belong in interfaces.ts, not types.ts.' },
+  ],
+}
+
+export const checkFileFilenames = {
+  'app/components/**/*.vue': 'PASCAL_CASE',
+  // Nuxt route files: kebab-case, with dynamic segments like [booking].vue allowed.
+  'app/pages/**/*.vue': '@(+([a-z0-9-])|[[]+([a-zA-Z0-9-])[]])',
+  'app/composables/**/*.ts': 'KEBAB_CASE',
+  'app/components/**/*.ts': 'KEBAB_CASE',
+  'app/{stores,types,utils,plugins,middleware}/**/*.ts': 'KEBAB_CASE',
+}
+
+export const checkFileFolders = {
+  // PascalCase component folders plus the fixed set of package-infrastructure folders.
+  'app/components/!(pages)/**/': '@([A-Z]*([a-zA-Z0-9])|components|composables|types|styles|figma|images|config)',
+  'app/components/pages/**/': 'KEBAB_CASE',
+  'app/{composables,stores,types,utils}/**/': 'KEBAB_CASE',
+}
+
+export const restrictedImports = {
+  patterns: [
+    { regex: '^\\.\\.', message: 'Use project path aliases (@hooks, @UI, @ts-*, ...) instead of parent-relative imports.' },
+    { regex: '^(~|~~|@)/', message: 'Default Nuxt aliases are banned — use the project aliases from nuxt.config.' },
+  ],
+}
+
+/** Baseline for `import(-x)/order`. Opt-in — see the note at the top of this file. */
+export const importOrderPathGroups = [
+  { pattern: '{@ts-*/**,@brighterly/lib-core-types/**,@stores/**/enums,@hooks/**/enums,@composables/**/enums,@utils/**/enums,@helpers/**/enums,@tools/**/enums}', group: 'internal', position: 'before' },
+  { pattern: '@stores/**', group: 'internal', position: 'before' },
+  { pattern: '{@hooks,@composables,@api,@ws}/**', group: 'internal', position: 'before' },
+  { pattern: '{axios,dayjs,dayjs/**,@helpers/**,@utils/**,@auth/**,@config/**}', group: 'internal', position: 'before' },
+  { pattern: '@tools/**', group: 'internal', position: 'before' },
+  { pattern: '{@fortawesome/**,@assets/**,@scss/**,@images/**,@lottie/**}', group: 'internal', position: 'before' },
+]
+
+export default [
+  {
+    name: 'codestyle/base',
+    plugins: { local: { rules: localRules } },
+    rules: {
+      // SFC block order and compiler macros at the top of script setup.
+      'vue/block-order': ['error', { order: ['script', 'template', 'style'] }],
+      'vue/define-macros-order': ['error', {
+        order: ['defineOptions', 'defineProps', 'defineEmits'],
+        defineExposeLast: true,
+      }],
+      'vue/match-component-file-name': ['error', { extensions: ['vue'], shouldMatchCase: true }],
+      // Event naming: kebab-case, `click:close`-style segments, Vue's own `update:modelValue`.
+      'vue/custom-event-name-casing': ['error', 'kebab-case', {
+        ignores: ['/^[a-z][a-z-]*(:[a-z][a-z-]*)+$/', '/^update:[a-zA-Z]+$/'],
+      }],
+      'vue/no-restricted-syntax': ['error', ...vueRestrictedSyntax],
+      'no-restricted-syntax': ['error', ...restrictedSyntax],
+      'no-restricted-imports': ['error', restrictedImports],
+      '@typescript-eslint/no-explicit-any': 'error',
+      'local/padding-after-macros': 'error',
+      'local/async-components-after-macros': 'error',
+      'local/no-import-group-labels': 'error',
+      'local/ref-prefix-prop-mirrors': 'error',
+    },
+  },
+  {
+    name: 'codestyle/composable-callbacks',
+    files: ['app/composables/**/*.ts'],
+    rules: {
+      'local/on-prefixed-callbacks': 'error',
+      // New rule — ships at warn until each app has measured it. See the package README.
+      'local/optional-callback-chaining': 'warn',
+    },
+  },
+  {
+    name: 'codestyle/require-component-name',
+    files: ['app/components/**/*.vue'],
+    rules: { 'local/require-component-name': 'error' },
+  },
+  {
+    name: 'codestyle/route-files',
+    // Nuxt page/layout files are kebab-case routes; their component names stay PascalCase by design.
+    files: ['app/pages/**/*.vue', 'app/layouts/**/*.vue', 'app/error.vue', 'app/app.vue'],
+    rules: { 'vue/match-component-file-name': 'off' },
+  },
+  {
+    name: 'codestyle/types-organization-enums',
+    files: ['app/types/**/enums.ts'],
+    rules: { 'no-restricted-syntax': ['error', ...restrictedSyntax, ...typeFileSelectors['enums.ts']] },
+  },
+  {
+    name: 'codestyle/types-organization-interfaces',
+    files: ['app/types/**/interfaces.ts'],
+    rules: { 'no-restricted-syntax': ['error', ...restrictedSyntax, ...typeFileSelectors['interfaces.ts']] },
+  },
+  {
+    name: 'codestyle/types-organization-types',
+    files: ['app/types/**/types.ts'],
+    rules: { 'no-restricted-syntax': ['error', ...restrictedSyntax, ...typeFileSelectors['types.ts']] },
+  },
+  {
+    name: 'codestyle/file-naming',
+    files: ['app/**'],
+    plugins: { 'check-file': checkFile },
+    rules: {
+      'check-file/filename-naming-convention': ['error', checkFileFilenames, { ignoreMiddleExtensions: true }],
+      'check-file/folder-naming-convention': ['error', checkFileFolders],
+    },
+  },
+]

package/eslint/rules/async-components-after-macros.mjs

@@ -0,0 +1,63 @@
+const MACROS = new Set([
+  'defineOptions',
+  'defineProps',
+  'defineEmits',
+  'defineSlots',
+  'defineModel',
+  'defineExpose',
+  'withDefaults',
+])
+
+function isMacroCall (node) {
+  return Boolean(node)
+        && node.type === 'CallExpression'
+        && node.callee.type === 'Identifier'
+        && MACROS.has(node.callee.name)
+}
+
+function isAsyncComponentConst (stmt) {
+  return stmt.type === 'VariableDeclaration'
+        && stmt.declarations.some(d =>
+          d.init
+            && d.init.type === 'CallExpression'
+            && d.init.callee.type === 'Identifier'
+            && d.init.callee.name === 'defineAsyncComponent')
+}
+
+function isHeadStatement (stmt) {
+  if (stmt.type === 'ImportDeclaration') return true
+  if (stmt.type === 'TSTypeAliasDeclaration' || stmt.type === 'TSInterfaceDeclaration') return true
+  if (stmt.type === 'ExpressionStatement') return isMacroCall(stmt.expression)
+  if (stmt.type === 'VariableDeclaration') return stmt.declarations.some(d => isMacroCall(d.init))
+
+  return false
+}
+
+export default {
+  meta: {
+    type: 'suggestion',
+    docs: {
+      description: 'require defineAsyncComponent constants to sit directly after the compiler macros, before other logic',
+    },
+    schema: [],
+    messages: {
+      tooLate: 'Declare async components right after the compiler macros, before other logic.',
+    },
+  },
+  create (context) {
+    return {
+      Program (program) {
+        let codeZone = false
+        for (const stmt of program.body) {
+          if (isAsyncComponentConst(stmt)) {
+            if (codeZone) {
+              context.report({ node: stmt, messageId: 'tooLate' })
+            }
+            continue
+          }
+          if (!isHeadStatement(stmt)) codeZone = true
+        }
+      },
+    }
+  },
+}

package/eslint/rules/no-import-group-labels.mjs

@@ -0,0 +1,72 @@
+const LABELS = new Set([
+  'types', 'type', 'interfaces', 'enums',
+  'stores', 'store', 'hooks', 'hook', 'helpers', 'helper', 'tools', 'tool',
+  'components', 'component', 'async components', 'assets', 'images', 'icons',
+  'config', 'configs', 'constants', 'utils', 'ws', 'api', 'auth',
+  'composables', 'libs', 'layouts', 'widgets', 'middleware', 'plugins', 'routes', 'typed',
+  'actions', 'getters', 'storage actions',
+])
+
+// Bare re-exports sit in the header zone with imports; `export const foo` is code.
+function isHeaderStatement (node) {
+  switch (node.type) {
+    case 'ImportDeclaration':
+    case 'ExportAllDeclaration':
+    case 'TSTypeAliasDeclaration':
+    case 'TSInterfaceDeclaration':
+      return true
+    case 'ExportNamedDeclaration':
+      return Boolean(node.source) || !node.declaration
+    default:
+      return false
+  }
+}
+
+export default {
+  meta: {
+    type: 'suggestion',
+    fixable: 'code',
+    docs: {
+      description: 'ban import/export group label comments — grouping is enforced by import/order and blank lines',
+    },
+    schema: [],
+    messages: {
+      banned: 'Remove the "{{ label }}" group label — import/order enforces grouping, and fixers leave stale labels behind.',
+    },
+  },
+  create (context) {
+    const sourceCode = context.sourceCode
+
+    return {
+      Program (program) {
+        const firstCode = program.body.find(node => !isHeaderStatement(node))
+        const boundary = firstCode ? firstCode.loc.start.line : Number.POSITIVE_INFINITY
+
+        for (const comment of sourceCode.getAllComments()) {
+          if (comment.type !== 'Line') continue
+          if (comment.loc.start.line > boundary) continue
+
+          const label = comment.value.trim().toLowerCase()
+          if (!LABELS.has(label)) continue
+
+          // Only whole-line comments are labels; trailing ones annotate code.
+          const before = sourceCode.getTokenBefore(comment, { includeComments: true })
+          if (before && before.loc.end.line === comment.loc.start.line) continue
+
+          const start = sourceCode.getIndexFromLoc({ line: comment.loc.start.line, column: 0 })
+          const nextLine = comment.loc.end.line + 1
+          const end = nextLine <= sourceCode.lines.length
+            ? sourceCode.getIndexFromLoc({ line: nextLine, column: 0 })
+            : comment.range[1]
+
+          context.report({
+            node: comment,
+            messageId: 'banned',
+            data: { label },
+            fix: fixer => fixer.removeRange([start, end]),
+          })
+        }
+      },
+    }
+  },
+}

package/eslint/rules/on-prefixed-callbacks.mjs

@@ -0,0 +1,53 @@
+// Composable option types are named `<Hook>Options` (legacy files still use `Use<Hook>Options`).
+const OPTIONS_NAME = /^[A-Z]\w*Options$/
+const ON_PREFIX = /^on[A-Z]/
+
+export default {
+  meta: {
+    type: 'suggestion',
+    docs: {
+      description: 'require on-prefixed PascalCase names for void callbacks in composable *Options types',
+    },
+    schema: [],
+    messages: {
+      useOnPrefix: 'Callback "{{ name }}" in {{ type }} must be named "on" + PascalCase action (e.g. onSelect).',
+    },
+  },
+  create (context) {
+    function checkMembers (typeName, members) {
+      for (const member of members) {
+        if (member.type !== 'TSPropertySignature' || member.computed) continue
+        const key = member.key
+        const name = key.type === 'Identifier' ? key.name : key.value
+        if (typeof name !== 'string') continue
+
+        // Only void callbacks replace emits; getters/providers (`() => number`, `() => Promise<T>`) are data.
+
+        const annotation = member.typeAnnotation?.typeAnnotation
+
+        const isVoidCallback = annotation?.type === 'TSFunctionType'
+
+            && annotation.returnType?.typeAnnotation?.type === 'TSVoidKeyword'
+
+        if (isVoidCallback && !ON_PREFIX.test(name)) {
+          context.report({
+            node: key,
+            messageId: 'useOnPrefix',
+            data: { name, type: typeName },
+          })
+        }
+      }
+    }
+
+    return {
+      TSInterfaceDeclaration (node) {
+        if (OPTIONS_NAME.test(node.id.name)) checkMembers(node.id.name, node.body.body)
+      },
+      TSTypeAliasDeclaration (node) {
+        if (OPTIONS_NAME.test(node.id.name) && node.typeAnnotation.type === 'TSTypeLiteral') {
+          checkMembers(node.id.name, node.typeAnnotation.members)
+        }
+      },
+    }
+  },
+}

package/eslint/rules/optional-callback-chaining.mjs

@@ -0,0 +1,78 @@
+// The half of the composable-callback convention that nothing enforced.
+//
+// An optional callback (`onFoo?: () => void`) that the composable invokes as `onFoo()`
+// throws a TypeError for the first consumer that omits it. The convention says to call it
+// with optional chaining — `onFoo?.()` — and until now only a reviewer could catch a miss.
+//
+// Scope: callbacks declared optional in a `*Options` type IN THE SAME FILE. Cross-file
+// inference would need type information; this catches the case the convention describes,
+// where the options type and the composable live together.
+const OPTIONS_NAME = /^[A-Z]\w*Options$/
+
+export default {
+  meta: {
+    type: 'problem',
+    docs: {
+      description: 'require optional chaining when invoking an optional callback from a composable *Options type',
+    },
+    schema: [],
+    messages: {
+      useOptionalChaining: 'Callback "{{ name }}" is optional in {{ type }} — call it as {{ name }}?.() or it throws when a caller omits it.',
+    },
+  },
+  create (context) {
+    /** name -> the *Options type that declared it optional */
+    const optionalCallbacks = new Map()
+
+    function collect (typeName, members) {
+      for (const member of members) {
+        if (member.type !== 'TSPropertySignature' || member.computed || !member.optional) continue
+        const key = member.key
+        const name = key.type === 'Identifier' ? key.name : key.value
+        if (typeof name !== 'string') continue
+        const annotation = member.typeAnnotation?.typeAnnotation
+        if (annotation?.type !== 'TSFunctionType') continue
+        optionalCallbacks.set(name, typeName)
+      }
+    }
+
+    return {
+      TSInterfaceDeclaration (node) {
+        if (OPTIONS_NAME.test(node.id.name)) collect(node.id.name, node.body.body)
+      },
+      TSTypeAliasDeclaration (node) {
+        if (OPTIONS_NAME.test(node.id.name) && node.typeAnnotation.type === 'TSTypeLiteral') {
+          collect(node.id.name, node.typeAnnotation.members)
+        }
+      },
+      'Program:exit' (program) {
+        if (optionalCallbacks.size === 0) return
+
+        const source = context.sourceCode ?? context.getSourceCode()
+
+        // Walk every call; report the ones that name an optional callback without `?.`
+        const visit = (node) => {
+          if (!node || typeof node.type !== 'string') return
+          if (node.type === 'CallExpression'
+            && node.callee?.type === 'Identifier'
+            && optionalCallbacks.has(node.callee.name)
+            && node.optional !== true) {
+            context.report({
+              node: node.callee,
+              messageId: 'useOptionalChaining',
+              data: { name: node.callee.name, type: optionalCallbacks.get(node.callee.name) },
+            })
+          }
+          for (const key of Object.keys(node)) {
+            if (key === 'parent') continue
+            const child = node[key]
+            if (Array.isArray(child)) child.forEach(visit)
+            else if (child && typeof child.type === 'string') visit(child)
+          }
+        }
+        visit(program)
+        void source
+      },
+    }
+  },
+}

package/eslint/rules/padding-after-macros.mjs

@@ -0,0 +1,70 @@
+const MACROS = new Set([
+  'defineOptions',
+  'defineProps',
+  'defineEmits',
+  'defineSlots',
+  'defineModel',
+  'defineExpose',
+  'withDefaults',
+])
+
+function isMacroCall (node) {
+  return Boolean(node)
+        && node.type === 'CallExpression'
+        && node.callee.type === 'Identifier'
+        && MACROS.has(node.callee.name)
+}
+
+function macroName (stmt) {
+  const call = stmt.type === 'ExpressionStatement'
+    ? stmt.expression
+    : stmt.declarations.find(d => isMacroCall(d.init))?.init
+
+  return call?.callee?.name ?? 'macro'
+}
+
+function isMacroStatement (stmt) {
+  if (stmt.type === 'ExpressionStatement') return isMacroCall(stmt.expression)
+  if (stmt.type === 'VariableDeclaration') return stmt.declarations.some(d => isMacroCall(d.init))
+
+  return false
+}
+
+export default {
+  meta: {
+    type: 'layout',
+    fixable: 'whitespace',
+    docs: {
+      description: 'require an empty line after each compiler macro statement in <script setup>',
+    },
+    schema: [],
+    messages: {
+      expected: 'Expected an empty line after {{ name }}.',
+    },
+  },
+  create (context) {
+    const sourceCode = context.sourceCode
+
+    return {
+      Program (program) {
+        const body = program.body
+        for (let i = 0; i < body.length - 1; i++) {
+          const stmt = body[i]
+          if (!isMacroStatement(stmt)) continue
+
+          const nextToken = sourceCode.getTokenAfter(stmt, { includeComments: true })
+          if (!nextToken) continue
+
+          if (nextToken.loc.start.line - stmt.loc.end.line < 2) {
+            context.report({
+              node: stmt,
+              messageId: 'expected',
+              data: { name: macroName(stmt) },
+              fix: fixer => fixer.insertTextAfter(stmt, '\n'),
+            })
+          }
+        }
+      },
+    }
+  },
+}

package/eslint/rules/ref-prefix-prop-mirrors.mjs

@@ -0,0 +1,58 @@
+function mirroredPropName (init) {
+  if (!init || init.type !== 'CallExpression' || init.callee.type !== 'Identifier') return null
+
+  if (init.callee.name === 'computed') {
+    const arg = init.arguments[0]
+    if (
+      arg
+            && arg.type === 'ArrowFunctionExpression'
+            && arg.body.type === 'MemberExpression'
+            && arg.body.object.type === 'Identifier'
+            && arg.body.object.name === 'props'
+            && !arg.body.computed
+    ) return arg.body.property.name
+  }
+
+  if (init.callee.name === 'ref') {
+    const arg = init.arguments[0]
+    if (
+      arg
+            && arg.type === 'MemberExpression'
+            && arg.object.type === 'Identifier'
+            && arg.object.name === 'props'
+            && !arg.computed
+    ) return arg.property.name
+  }
+
+  return null
+}
+
+export default {
+  meta: {
+    type: 'suggestion',
+    docs: {
+      description: 'require the ref prefix on computed/ref constants that mirror a prop of the same name',
+    },
+    schema: [],
+    messages: {
+      useRefPrefix: 'Constant "{{ name }}" shadows the prop it mirrors — name it "{{ suggested }}".',
+    },
+  },
+  create (context) {
+    return {
+      VariableDeclarator (node) {
+        if (node.id.type !== 'Identifier') return
+
+        const prop = mirroredPropName(node.init)
+        if (prop && node.id.name === prop) {
+          const suggested = `ref${prop.charAt(0).toUpperCase()}${prop.slice(1)}`
+          context.report({
+            node: node.id,
+            messageId: 'useRefPrefix',
+            data: { name: node.id.name, suggested },
+          })
+        }
+      },
+    }
+  },
+}