@gem-sdk/eslint-plugin 0.0.1

package/README.md

@@ -0,0 +1,298 @@
+# eslint-plugin-gem-fe
+
+Shared ESLint rules for all GemPages frontend repositories.
+
+Consolidates every custom rule from `web-builder-shopify-app`, `web-builder`, and `web-builder-elements` into a single publishable npm package. The architecture rules support both React (`.tsx`) and Vue (`.vue`) files.
+
+## Installation
+
+```bash
+yarn add -D eslint-plugin-gem-fe
+```
+
+## Usage
+
+Choose the config that matches your tech stack:
+
+### React projects
+
+```json
+{
+  "extends": ["plugin:gem-fe/react"]
+}
+```
+
+### Vue projects
+
+```json
+{
+  "extends": ["plugin:gem-fe/vue"]
+}
+```
+
+### All repos (architecture + i18n only)
+
+```json
+{
+  "extends": ["plugin:gem-fe/recommended"]
+}
+```
+
+### Manual rule selection
+
+```json
+{
+  "plugins": ["gem-fe"],
+  "rules": {
+    "gem-fe/module-structure": "error",
+    "gem-fe/no-module-barrel": "error",
+    "gem-fe/module-import-boundary": "error",
+    "gem-fe/pure-ui-layer": "error",
+    "gem-fe/module-index-required": "error",
+    "gem-fe/no-t-for-variable": "error",
+    "gem-fe/not-use-store-to-refs": "error",
+    "gem-fe/not-use-custom-color-class": "warn",
+    "gem-fe/no-export-type-from-tsx": "error",
+    "gem-fe/no-import-from-package-path": "error"
+  }
+}
+```
+
+---
+
+## Rules
+
+### Architecture (React + Vue)
+
+These rules apply to both `.tsx` and `.vue` files and enforce the v2 module structure used across all GemPages repos.
+
+Module detection handles both project layouts:
+- `v2/modules/<name>/` — business modules (code lives under `app/` subdir)
+- `v2/core/<name>/` — core modules (code lives at the module root)
+
+---
+
+#### `module-structure`
+
+Enforces the allowed file/folder layout inside v2 modules.
+
+**Allowed paths (business modules):**
+
+```
+app/contexts/*.(ts|tsx)
+app/constants/*.ts
+app/hooks/*.ts
+app/stores/*.ts
+app/types/*.ts
+app/utils/*.ts
+app/graphql/{fragments,queries,mutations}/*.(gql|ts)
+app/ui/{atoms,molecules,organisms,templates}/*.(vue|tsx)
+app/ui/assets/fonts/*.(woff|woff2|ttf|eot)
+app/ui/assets/icons/*.(vue|tsx)
+app/ui/assets/images/*.(png|jpg|jpeg|gif|svg|webp|ico|bmp|tiff)
+app/ui/assets/styles/*.(css|scss)
+app/ui/assets/videos/*.(mp4|mp3)
+*.test.[tj]sx?        (anywhere in the module)
+external.ts           (module root only)
+index.ts              (module root only)
+```
+
+Core modules use the same layout without the `app/` prefix.
+
+---
+
+#### `no-module-barrel`
+
+Bans `index.ts` barrel files inside module subdirectories. Only the module-root `index.ts` is allowed.
+
+```ts
+// ❌ Error — app/hooks/index.ts
+export { useFoo } from './useFoo';
+
+// ✅ OK — module-root index.ts
+export { useFoo } from './app/hooks/useFoo';
+```
+
+---
+
+#### `module-import-boundary`
+
+Prevents files inside a module from importing across the module boundary. Cross-module dependencies must go through `external.ts`.
+
+Banned imports:
+- Alias imports (`~/...`, `@/...`) — always escape the module
+- Relative imports (`../`) resolving outside the module root
+
+Scoped npm packages (e.g. `@shopify/react-form`) are unaffected — the alias check only matches the literal `@/` prefix.
+
+```ts
+// ❌ Error
+import { useShop } from '~/modules/shop-info/app/hooks/useShop';
+
+// ✅ OK — through the public API
+import { useShop } from '~/modules/shop-info';
+```
+
+---
+
+#### `pure-ui-layer`
+
+Bans hook imports and `use*` calls inside `ui/atoms/` and `ui/molecules/`. These layers must be stateless.
+
+Exempt hooks: anything matching `use.*i18n`, `use.*translat`, or `use.*const` (case-insensitive) — e.g. `useI18n`, `useTranslation`, `useConstants`.
+
+Files under `v2/modules/<name>/core/` are fully exempt from this rule.
+
+```tsx
+// ❌ Error — atoms/ProductCard.tsx
+import { useProduct } from '../../hooks/useProduct';
+
+// ✅ OK
+import { useTranslation } from '../../hooks/useTranslation';
+```
+
+---
+
+#### `module-index-required`
+
+Verifies that every v2 module has an `index.ts` at its root. Fires on every file linted inside the module.
+
+---
+
+### i18n (React + Vue)
+
+#### `no-t-for-variable`
+
+Only plain string literals are allowed as the first argument to `t()`. Template literals with interpolations are banned.
+
+```ts
+// ✅ OK
+t("Save")
+t(`Hello`)
+
+// ❌ Error
+t(key)
+t(`Hello ${name}`)
+t(props.label)
+```
+
+---
+
+### Vue-specific
+
+#### `not-use-store-to-refs`
+
+Bans Pinia's `storeToRefs()`. Use `computed()` instead for explicit reactivity.
+
+```ts
+// ❌ Error
+const { count } = storeToRefs(useCounterStore())
+
+// ✅ OK
+const count = computed(() => useCounterStore().count)
+```
+
+#### `not-use-custom-color-class`
+
+Warns when raw color values (hex, `rgb()`, `hsl()`) are used in Vue template class bindings. Use design-system tokens instead.
+
+```html
+<!-- ❌ Warning -->
+<div :class="['[#ff0000]']" />
+
+<!-- ✅ OK -->
+<div class="text-primary" />
+```
+
+Requires `vue-eslint-parser` as the parser.
+
+---
+
+### React / TypeScript-specific
+
+#### `no-export-type-from-tsx`
+
+Disallows type/interface exports from `.tsx` files. Move types to a dedicated `.ts` file.
+
+```ts
+// ❌ Error — MyComponent.tsx
+export type MyProps = { name: string };
+
+// ✅ OK — MyComponent.ts
+export type MyProps = { name: string };
+```
+
+#### `no-import-from-package-path`
+
+Prevents value imports from `@gem-sdk` packages using deep path syntax. Type-only imports are allowed.
+
+```ts
+// ❌ Error
+import { fn } from '@gem-sdk/core/internal/utils';
+
+// ✅ OK
+import { fn } from '@gem-sdk/core';
+import type { T } from '@gem-sdk/core/internal/utils';
+```
+
+---
+
+## Development
+
+### Setup
+
+```bash
+yarn install
+```
+
+### Tests
+
+Each rule has a co-located `.test.ts` file. Run all tests with:
+
+```bash
+yarn test
+```
+
+### Build
+
+```bash
+yarn build   # outputs to dist/
+```
+
+### Adding a new rule
+
+1. Create `src/rules/myNewRule.ts` (camelCase filename)
+2. Export the rule as `default`
+3. Add a co-located `src/rules/myNewRule.test.ts`
+4. Register in `src/index.ts`:
+
+```ts
+import myNewRule from './rules/myNewRule';
+
+export const rules = {
+  // ...existing
+  'my-new-rule': myNewRule,
+};
+```
+
+---
+
+## Release
+
+This package uses [Changesets](https://github.com/changesets/changesets) with the same branching strategy as `web-builder-elements`:
+
+| Branch | NPM tag |
+|--------|---------|
+| `production` | `latest` |
+| `staging` | `staging` |
+| `dev` | `dev` |
+| `dev-sun` / `dev-moon` / `dev-earth` / `dev-new-feature` | `sun` / `moon` / `earth` / `new-feature` |
+
+To release a new version:
+
+```bash
+# 1. Create a changeset describing your changes
+yarn changeset
+
+# 2. The CI release workflow handles publishing automatically on merge
+```

package/dist/index.d.ts

@@ -0,0 +1,52 @@
+export declare const rules: {
+    'module-structure': import("eslint").Rule.RuleModule;
+    'no-module-barrel': import("eslint").Rule.RuleModule;
+    'module-import-boundary': import("eslint").Rule.RuleModule;
+    'pure-ui-layer': import("eslint").Rule.RuleModule;
+    'module-index-required': import("eslint").Rule.RuleModule;
+    'no-t-for-variable': import("eslint").Rule.RuleModule;
+    'not-use-store-to-refs': import("eslint").Rule.RuleModule;
+    'not-use-custom-color-class': import("eslint").Rule.RuleModule;
+    'no-export-type-from-tsx': import("eslint").Rule.RuleModule;
+    'no-import-from-package-path': import("eslint").Rule.RuleModule;
+};
+export declare const configs: {
+    recommended: {
+        readonly plugins: readonly ['gem-fe'];
+        readonly rules: {
+            readonly 'gem-fe/module-structure': 'error';
+            readonly 'gem-fe/no-module-barrel': 'error';
+            readonly 'gem-fe/module-import-boundary': 'error';
+            readonly 'gem-fe/pure-ui-layer': 'error';
+            readonly 'gem-fe/module-index-required': 'error';
+            readonly 'gem-fe/no-t-for-variable': 'error';
+        };
+    };
+    vue: {
+        readonly plugins: readonly ['gem-fe'];
+        readonly rules: {
+            readonly 'gem-fe/module-structure': 'error';
+            readonly 'gem-fe/no-module-barrel': 'error';
+            readonly 'gem-fe/module-import-boundary': 'error';
+            readonly 'gem-fe/pure-ui-layer': 'error';
+            readonly 'gem-fe/module-index-required': 'error';
+            readonly 'gem-fe/no-t-for-variable': 'error';
+            readonly 'gem-fe/not-use-store-to-refs': 'error';
+            readonly 'gem-fe/not-use-custom-color-class': 'warn';
+        };
+    };
+    react: {
+        readonly plugins: readonly ['gem-fe'];
+        readonly rules: {
+            readonly 'gem-fe/module-structure': 'error';
+            readonly 'gem-fe/no-module-barrel': 'error';
+            readonly 'gem-fe/module-import-boundary': 'error';
+            readonly 'gem-fe/pure-ui-layer': 'error';
+            readonly 'gem-fe/module-index-required': 'error';
+            readonly 'gem-fe/no-t-for-variable': 'error';
+            readonly 'gem-fe/no-export-type-from-tsx': 'error';
+            readonly 'gem-fe/no-import-from-package-path': 'error';
+        };
+    };
+};
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAYA,eAAO,MAAM,KAAK;;;;;;;;;;;CAegB,CAAC;AAyCnC,eAAO,MAAM,OAAO;;oCAnCR,QAAQ;;qBAEhB,yBAAyB,EAAE,OAAO;qBAClC,yBAAyB,EAAE,OAAO;qBAClC,+BAA+B,EAAE,OAAO;qBACxC,sBAAsB,EAAE,OAAO;qBAC/B,8BAA8B,EAAE,OAAO;qBACvC,0BAA0B,EAAE,OAAO;;;;oCAQ3B,QAAQ;;gDAbW,OAAO;gDACP,OAAO;sDACD,OAAO;6CAChB,OAAO;qDACC,OAAO;iDACX,OAAO;qDAWH,OAAO;0DACF,MAAM;;;;oCAQnC,QAAQ;;gDAzBW,OAAO;gDACP,OAAO;sDACD,OAAO;6CAChB,OAAO;qDACC,OAAO;iDACX,OAAO;uDAuBD,OAAO;2DACH,OAAO;;;CAIC,CAAC"}

package/dist/index.js

@@ -0,0 +1,69 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.configs = exports.rules = void 0;
+const moduleImportBoundary_1 = __importDefault(require("./rules/moduleImportBoundary"));
+const moduleIndexRequired_1 = __importDefault(require("./rules/moduleIndexRequired"));
+const moduleStructure_1 = __importDefault(require("./rules/moduleStructure"));
+const noExportTypeFromTsx_1 = __importDefault(require("./rules/noExportTypeFromTsx"));
+const noImportFromPackagePath_1 = __importDefault(require("./rules/noImportFromPackagePath"));
+const noModuleBarrel_1 = __importDefault(require("./rules/noModuleBarrel"));
+const noTForVariable_1 = __importDefault(require("./rules/noTForVariable"));
+const notUseCustomColorClass_1 = __importDefault(require("./rules/notUseCustomColorClass"));
+const notUseStoreToRefs_1 = __importDefault(require("./rules/notUseStoreToRefs"));
+const pureUiLayer_1 = __importDefault(require("./rules/pureUiLayer"));
+exports.rules = {
+    // Architecture — shared between React and Vue (file extensions target both)
+    'module-structure': moduleStructure_1.default,
+    'no-module-barrel': noModuleBarrel_1.default,
+    'module-import-boundary': moduleImportBoundary_1.default,
+    'pure-ui-layer': pureUiLayer_1.default,
+    'module-index-required': moduleIndexRequired_1.default,
+    // i18n
+    'no-t-for-variable': noTForVariable_1.default,
+    // Vue-specific
+    'not-use-store-to-refs': notUseStoreToRefs_1.default,
+    'not-use-custom-color-class': notUseCustomColorClass_1.default,
+    // React/TypeScript-specific
+    'no-export-type-from-tsx': noExportTypeFromTsx_1.default,
+    'no-import-from-package-path': noImportFromPackagePath_1.default,
+};
+/**
+ * Shared architecture + i18n rules for both React and Vue repos.
+ */
+const recommended = {
+    plugins: ['gem-fe'],
+    rules: {
+        'gem-fe/module-structure': 'error',
+        'gem-fe/no-module-barrel': 'error',
+        'gem-fe/module-import-boundary': 'error',
+        'gem-fe/pure-ui-layer': 'error',
+        'gem-fe/module-index-required': 'error',
+        'gem-fe/no-t-for-variable': 'error',
+    },
+};
+/**
+ * `recommended` + Vue-specific rules. Use with vue-eslint-parser.
+ */
+const vue = {
+    plugins: ['gem-fe'],
+    rules: {
+        ...recommended.rules,
+        'gem-fe/not-use-store-to-refs': 'error',
+        'gem-fe/not-use-custom-color-class': 'warn',
+    },
+};
+/**
+ * `recommended` + React/TypeScript-specific rules.
+ */
+const react = {
+    plugins: ['gem-fe'],
+    rules: {
+        ...recommended.rules,
+        'gem-fe/no-export-type-from-tsx': 'error',
+        'gem-fe/no-import-from-package-path': 'error',
+    },
+};
+exports.configs = { recommended, vue, react };

package/dist/lib/moduleInfo.d.ts

@@ -0,0 +1,27 @@
+/**
+ * Detects whether a file lives inside a v2 module.
+ *
+ * Handles both directory shapes used across GemPages repos:
+ *   v2/modules/<name>/  — business modules, internal code under app/ subdir
+ *   v2/core/<name>/     — core modules, internal code at module root
+ *
+ * The regex matches both:
+ *   app/v2/modules/<name>/   (web-builder-shopify-app)
+ *   apps/gemx/src/v2/modules/<name>/  (web-builder)
+ *
+ * Returns null when the file is not inside a recognised module, including when
+ * the file lives under a core/ subfolder of a business module (v2/modules/<name>/core/).
+ * Such files are exempt from all module lint rules.
+ */
+export type ModuleInfo = {
+    moduleRoot: string;
+    type: 'app' | 'core';
+    moduleName: string;
+};
+/**
+ * Returns true for files under a core/ subdirectory of a business module,
+ * e.g. v2/modules/<name>/core/**. These files are exempt from module lint rules.
+ */
+export declare function isModuleCoreSubfolder(filePath: string): boolean;
+export declare function getModuleInfo(filePath: string): ModuleInfo | null;
+//# sourceMappingURL=moduleInfo.d.ts.map

package/dist/lib/moduleInfo.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"moduleInfo.d.ts","sourceRoot":"","sources":["../../src/lib/moduleInfo.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AACH,MAAM,MAAM,UAAU,GAAG;IACvB,UAAU,EAAE,MAAM,CAAC;IACnB,IAAI,EAAE,KAAK,GAAG,MAAM,CAAC;IACrB,UAAU,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF;;;GAGG;AACH,wBAAgB,qBAAqB,CAAC,QAAQ,EAAE,MAAM,GAAG,OAAO,CAE/D;AAED,wBAAgB,aAAa,CAAC,QAAQ,EAAE,MAAM,GAAG,UAAU,GAAG,IAAI,CAUjE"}

package/dist/lib/moduleInfo.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isModuleCoreSubfolder = isModuleCoreSubfolder;
+exports.getModuleInfo = getModuleInfo;
+/**
+ * Returns true for files under a core/ subdirectory of a business module,
+ * e.g. v2/modules/<name>/core/**. These files are exempt from module lint rules.
+ */
+function isModuleCoreSubfolder(filePath) {
+    return /\/v2\/modules\/[^/]+\/core(?:\/|$)/.test(filePath.replace(/\\/g, '/'));
+}
+function getModuleInfo(filePath) {
+    const normalized = filePath.replace(/\\/g, '/');
+    if (isModuleCoreSubfolder(normalized))
+        return null;
+    const match = normalized.match(/^(.*\/v2\/(modules|core)\/([^/]+))(\/.*)?$/);
+    if (!match)
+        return null;
+    return {
+        moduleRoot: match[1],
+        type: match[2] === 'modules' ? 'app' : 'core',
+        moduleName: match[3],
+    };
+}

package/dist/rules/moduleImportBoundary.d.ts

@@ -0,0 +1,4 @@
+import type { Rule } from 'eslint';
+declare const rule: Rule.RuleModule;
+export default rule;
+//# sourceMappingURL=moduleImportBoundary.d.ts.map

package/dist/rules/moduleImportBoundary.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"moduleImportBoundary.d.ts","sourceRoot":"","sources":["../../src/rules/moduleImportBoundary.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAoBnC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,UAiEhB,CAAC;eAEa,IAAI"}

package/dist/rules/moduleImportBoundary.js

@@ -0,0 +1,84 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const node_path_1 = __importDefault(require("node:path"));
+const moduleInfo_1 = require("../lib/moduleInfo");
+/**
+ * Only external.ts is allowed to reach outside the module boundary.
+ *
+ * Two kinds of cross-module specifiers are banned for all other files:
+ *   - alias imports (~/ and @/) — always point outside the module.
+ *     Note: @scope/pkg is unaffected because `@/` requires a literal slash
+ *     immediately after `@`, so `@shopify/form` does NOT match.
+ *   - relative imports (../) that resolve outside the module root.
+ *
+ * The check applies to every construct that can pull in a module specifier:
+ *   - import declarations:        import x from '~/other'
+ *   - re-exports:                 export { x } from '~/other' / export * from '@/o'
+ *   - dynamic imports:            import('~/other')
+ */
+const ALIAS_RE = /^(?:~|@)\//;
+const rule = {
+    meta: {
+        type: 'problem',
+        docs: {
+            description: 'Prevent cross-module imports (alias ~//@/ or relative escapes) — only external.ts may import from other modules',
+        },
+        messages: {
+            noOutsideImport: 'Import "{{source}}" resolves outside this module\'s boundary. ' +
+                'Route cross-module dependencies through external.ts instead.',
+            noAliasImport: 'Alias import "{{source}}" points outside this module. ' +
+                'Route cross-module dependencies through external.ts instead.',
+        },
+        schema: [],
+    },
+    create(context) {
+        const filePath = context.getFilename().replace(/\\/g, '/');
+        if (filePath.endsWith('/external.ts'))
+            return {};
+        const info = (0, moduleInfo_1.getModuleInfo)(filePath);
+        if (!info)
+            return {};
+        const moduleRoot = info.moduleRoot;
+        const fileDir = node_path_1.default.dirname(filePath);
+        function checkSource(node, source) {
+            if (typeof source !== 'string')
+                return;
+            // Alias imports (~/, @/) always escape the module — ban them.
+            if (ALIAS_RE.test(source)) {
+                context.report({ node, messageId: 'noAliasImport', data: { source } });
+                return;
+            }
+            // Only relative specifiers remain to be checked — npm packages are fine.
+            if (!source.startsWith('.'))
+                return;
+            const resolved = node_path_1.default.resolve(fileDir, source).replace(/\\/g, '/');
+            if (!resolved.startsWith(`${moduleRoot}/`) && resolved !== moduleRoot) {
+                context.report({ node, messageId: 'noOutsideImport', data: { source } });
+            }
+        }
+        return {
+            // import x from '...'
+            ImportDeclaration(node) {
+                checkSource(node, node.source.value);
+            },
+            // export { x } from '...'  (source is null for local `export { x }`)
+            ExportNamedDeclaration(node) {
+                if (node.source)
+                    checkSource(node, node.source.value);
+            },
+            // export * from '...'
+            ExportAllDeclaration(node) {
+                checkSource(node, node.source.value);
+            },
+            // import('...') — only when the specifier is a string literal
+            ImportExpression(node) {
+                if (node.source.type === 'Literal')
+                    checkSource(node, node.source.value);
+            },
+        };
+    },
+};
+exports.default = rule;

package/dist/rules/moduleIndexRequired.d.ts

@@ -0,0 +1,10 @@
+import type { Rule } from 'eslint';
+/**
+ * When linting any file inside a module, verify that the module root contains
+ * an index.ts. ESLint lints files rather than directories, so this rule fires
+ * per-file — if no file inside a missing-index module is ever linted the gap
+ * won't be caught, but in practice CI lints all files.
+ */
+declare const rule: Rule.RuleModule;
+export default rule;
+//# sourceMappingURL=moduleIndexRequired.d.ts.map

package/dist/rules/moduleIndexRequired.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"moduleIndexRequired.d.ts","sourceRoot":"","sources":["../../src/rules/moduleIndexRequired.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAKnC;;;;;GAKG;AACH,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,UAkChB,CAAC;eAEa,IAAI"}

package/dist/rules/moduleIndexRequired.js

@@ -0,0 +1,49 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const node_path_1 = __importDefault(require("node:path"));
+const node_fs_1 = __importDefault(require("node:fs"));
+const moduleInfo_1 = require("../lib/moduleInfo");
+/**
+ * When linting any file inside a module, verify that the module root contains
+ * an index.ts. ESLint lints files rather than directories, so this rule fires
+ * per-file — if no file inside a missing-index module is ever linted the gap
+ * won't be caught, but in practice CI lints all files.
+ */
+const rule = {
+    meta: {
+        type: 'problem',
+        docs: {
+            description: 'Every module must expose a public API via index.ts at its root',
+        },
+        messages: {
+            missingIndex: 'Module "{{moduleName}}" has no index.ts at its root ({{moduleRoot}}/). ' +
+                'Every module must expose a public API through index.ts.',
+        },
+        schema: [],
+    },
+    create(context) {
+        return {
+            Program(node) {
+                const filePath = context.getFilename().replace(/\\/g, '/');
+                const info = (0, moduleInfo_1.getModuleInfo)(filePath);
+                if (!info)
+                    return;
+                // Don't double-report when linting index.ts itself
+                if (filePath === `${info.moduleRoot}/index.ts`)
+                    return;
+                const indexPath = node_path_1.default.join(info.moduleRoot, 'index.ts');
+                if (!node_fs_1.default.existsSync(indexPath)) {
+                    context.report({
+                        node,
+                        messageId: 'missingIndex',
+                        data: { moduleName: info.moduleName, moduleRoot: info.moduleRoot },
+                    });
+                }
+            },
+        };
+    },
+};
+exports.default = rule;

package/dist/rules/moduleStructure.d.ts

@@ -0,0 +1,4 @@
+import type { Rule } from 'eslint';
+declare const rule: Rule.RuleModule;
+export default rule;
+//# sourceMappingURL=moduleStructure.d.ts.map

package/dist/rules/moduleStructure.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"moduleStructure.d.ts","sourceRoot":"","sources":["../../src/rules/moduleStructure.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAkDnC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,UA4BhB,CAAC;eAEa,IAAI"}

package/dist/rules/moduleStructure.js

@@ -0,0 +1,74 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const moduleInfo_1 = require("../lib/moduleInfo");
+/**
+ * Builds the list of allowed path patterns relative to the module root.
+ * Assets are organised into typed subdirectories.
+ * Both .tsx (React) and .vue (Vue) are accepted for UI components and icons.
+ *
+ * @param prefix 'app' for business modules, '' for core modules
+ */
+function buildPatterns(prefix) {
+    const p = prefix ? `${prefix}/` : '';
+    return [
+        /\.test\.[tj]sx?$/,
+        new RegExp(`^${p}contexts/[^/]+\\.(ts|tsx)$`),
+        new RegExp(`^${p}constants/[^/]+\\.ts$`),
+        new RegExp(`^${p}hooks/[^/]+\\.ts$`),
+        new RegExp(`^${p}stores/[^/]+\\.ts$`),
+        new RegExp(`^${p}types/[^/]+\\.ts$`),
+        new RegExp(`^${p}utils/[^/]+\\.ts$`),
+        new RegExp(`^${p}graphql/(fragments|queries|mutations)/[^/]+\\.(gql|ts)$`),
+        // Assets — categorised subdirectories
+        new RegExp(`^${p}ui/assets/fonts/[^/]+\\.(woff|woff2|ttf|eot)$`),
+        new RegExp(`^${p}ui/assets/icons/[^/]+\\.(vue|tsx)$`),
+        new RegExp(`^${p}ui/assets/images/[^/]+\\.(png|jpg|jpeg|gif|svg|webp|ico|bmp|tiff)$`),
+        new RegExp(`^${p}ui/assets/styles/[^/]+\\.(css|scss)$`),
+        new RegExp(`^${p}ui/assets/videos/[^/]+\\.(mp4|mp3)$`),
+        // UI layer components
+        new RegExp(`^${p}ui/atoms/[^/]+\\.(vue|tsx)$`),
+        new RegExp(`^${p}ui/molecules/[^/]+\\.(vue|tsx)$`),
+        new RegExp(`^${p}ui/organisms/[^/]+\\.(vue|tsx)$`),
+        new RegExp(`^${p}ui/templates/[^/]+\\.(vue|tsx)$`),
+        // Module boundary files (no prefix — always at module root)
+        /^external\.ts$/,
+        /^index\.ts$/,
+    ];
+}
+const PATTERNS = {
+    app: buildPatterns('app'),
+    core: buildPatterns(''),
+};
+const ALLOWED_PATHS_HINT = 'contexts/*.(ts|tsx), constants/*.ts, graphql/{fragments,queries,mutations}/*.(gql|ts), ' +
+    'hooks/*.ts, stores/*.ts, types/*.ts, utils/*.ts, ' +
+    'ui/{atoms,molecules,organisms,templates}/*.(vue|tsx), ' +
+    'ui/assets/{fonts,icons,images,styles,videos}/*, ' +
+    'external.ts, index.ts';
+const rule = {
+    meta: {
+        type: 'problem',
+        docs: {
+            description: 'Enforce allowed file/folder structure within modules — no arbitrary nesting',
+        },
+        messages: {
+            invalidPath: '"{{relPath}}" is not an allowed location inside this module.\n' + `Allowed paths: ${ALLOWED_PATHS_HINT}`,
+        },
+        schema: [],
+    },
+    create(context) {
+        return {
+            Program(node) {
+                const filePath = context.getFilename().replace(/\\/g, '/');
+                const info = (0, moduleInfo_1.getModuleInfo)(filePath);
+                if (!info)
+                    return;
+                const relPath = filePath.slice(info.moduleRoot.length + 1);
+                const patterns = PATTERNS[info.type] ?? PATTERNS.core;
+                if (!patterns.some((p) => p.test(relPath))) {
+                    context.report({ node, messageId: 'invalidPath', data: { relPath } });
+                }
+            },
+        };
+    },
+};
+exports.default = rule;

package/dist/rules/noExportTypeFromTsx.d.ts

@@ -0,0 +1,8 @@
+import type { Rule } from 'eslint';
+/**
+ * Disallows exporting types and interfaces from .tsx files.
+ * Types should live in a dedicated .ts file.
+ */
+declare const rule: Rule.RuleModule;
+export default rule;
+//# sourceMappingURL=noExportTypeFromTsx.d.ts.map

package/dist/rules/noExportTypeFromTsx.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"noExportTypeFromTsx.d.ts","sourceRoot":"","sources":["../../src/rules/noExportTypeFromTsx.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAEnC;;;GAGG;AACH,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,UAqBhB,CAAC;eAEa,IAAI"}

package/dist/rules/noExportTypeFromTsx.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+/**
+ * Disallows exporting types and interfaces from .tsx files.
+ * Types should live in a dedicated .ts file.
+ */
+const rule = {
+    meta: {
+        type: 'problem',
+        docs: {
+            description: 'Disallow export type and interface declarations from .tsx files',
+        },
+        messages: {
+            noTypeExport: 'Exporting types and interfaces from .tsx files is not allowed. Move them to a .ts file.',
+        },
+        schema: [],
+    },
+    create(context) {
+        return {
+            ExportNamedDeclaration(node) {
+                const fileName = context.getFilename();
+                if (fileName.endsWith('.tsx') && node.exportKind === 'type') {
+                    context.report({ node, messageId: 'noTypeExport' });
+                }
+            },
+        };
+    },
+};
+exports.default = rule;

package/dist/rules/noImportFromPackagePath.d.ts

@@ -0,0 +1,4 @@
+import type { Rule } from 'eslint';
+declare const rule: Rule.RuleModule;
+export default rule;
+//# sourceMappingURL=noImportFromPackagePath.d.ts.map

package/dist/rules/noImportFromPackagePath.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"noImportFromPackagePath.d.ts","sourceRoot":"","sources":["../../src/rules/noImportFromPackagePath.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAYnC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,UA2BhB,CAAC;eAEa,IAAI"}

package/dist/rules/noImportFromPackagePath.js

@@ -0,0 +1,41 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+/**
+ * Disallows value imports from @gem-sdk packages using deep path syntax.
+ * Type-only imports are allowed since they are erased at runtime.
+ *
+ * Bad:  import { fn } from '@gem-sdk/core/some/path'
+ * OK:   import { fn } from '@gem-sdk/core'
+ * OK:   import type { T } from '@gem-sdk/core/some/path'
+ */
+const GEM_SDK_PATH_RE = /@gem-sdk\/[a-z-]+\/.+/;
+const rule = {
+    meta: {
+        type: 'problem',
+        docs: {
+            description: 'Disallow value imports from @gem-sdk packages using deep path syntax',
+        },
+        messages: {
+            noPathImport: 'Import from packages with a deep path is not allowed. ' +
+                'Import from the package root instead: "{{root}}".',
+        },
+        schema: [],
+    },
+    create(context) {
+        return {
+            ImportDeclaration(node) {
+                const { importKind } = node;
+                const source = node.source.value;
+                if (typeof source !== 'string')
+                    return;
+                if (importKind === 'type')
+                    return;
+                if (!GEM_SDK_PATH_RE.test(source))
+                    return;
+                const root = source.split('/').slice(0, 2).join('/');
+                context.report({ node, messageId: 'noPathImport', data: { root } });
+            },
+        };
+    },
+};
+exports.default = rule;

package/dist/rules/noModuleBarrel.d.ts

@@ -0,0 +1,4 @@
+import type { Rule } from 'eslint';
+declare const rule: Rule.RuleModule;
+export default rule;
+//# sourceMappingURL=noModuleBarrel.d.ts.map

package/dist/rules/noModuleBarrel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"noModuleBarrel.d.ts","sourceRoot":"","sources":["../../src/rules/noModuleBarrel.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAGnC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,UA6BhB,CAAC;eAEa,IAAI"}

package/dist/rules/noModuleBarrel.js

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const moduleInfo_1 = require("../lib/moduleInfo");
+const rule = {
+    meta: {
+        type: 'problem',
+        docs: {
+            description: 'Prevent barrel index.ts files inside module subdirectories — only the module root index.ts is allowed',
+        },
+        messages: {
+            noBarrel: 'Barrel index.ts is not allowed inside module subdirectories. ' +
+                'Only the module root index.ts is permitted. Export directly from the source file.',
+        },
+        schema: [],
+    },
+    create(context) {
+        return {
+            Program(node) {
+                const filePath = context.getFilename().replace(/\\/g, '/');
+                if (!filePath.endsWith('/index.ts'))
+                    return;
+                const info = (0, moduleInfo_1.getModuleInfo)(filePath);
+                if (!info)
+                    return;
+                if (filePath !== `${info.moduleRoot}/index.ts`) {
+                    context.report({ node, messageId: 'noBarrel' });
+                }
+            },
+        };
+    },
+};
+exports.default = rule;

package/dist/rules/noTForVariable.d.ts

@@ -0,0 +1,4 @@
+import type { Rule } from 'eslint';
+declare const rule: Rule.RuleModule;
+export default rule;
+//# sourceMappingURL=noTForVariable.d.ts.map

package/dist/rules/noTForVariable.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"noTForVariable.d.ts","sourceRoot":"","sources":["../../src/rules/noTForVariable.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AA+BnC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,UA+BhB,CAAC;eAEa,IAAI"}

package/dist/rules/noTForVariable.js

@@ -0,0 +1,57 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+/**
+ * Only plain string literals are allowed as the first argument to t().
+ * TemplateLiterals with expressions (e.g. `Hello ${name}`) are NOT allowed.
+ */
+function isPlainStringLiteral(node) {
+    if (node.type === 'Literal')
+        return true;
+    if (node.type === 'TemplateLiteral') {
+        const expressions = Array.isArray(node.expressions) ? node.expressions : [];
+        return expressions.length === 0;
+    }
+    return false;
+}
+function createCallExpressionHandler(context) {
+    return function (node) {
+        const callNode = node;
+        if (callNode.callee?.type !== 'Identifier' || callNode.callee?.name !== 't')
+            return;
+        const firstArg = callNode.arguments?.[0];
+        if (!firstArg || isPlainStringLiteral(firstArg))
+            return;
+        context.report({
+            node: callNode.callee,
+            messageId: 'noVariable',
+        });
+    };
+}
+const rule = {
+    meta: {
+        type: 'problem',
+        docs: {
+            description: 'Do not call t(variable) — only plain string literals are allowed as the first argument',
+        },
+        messages: {
+            noVariable: 'Do not use t() with a variable or interpolated template as first argument. ' +
+                'Use a plain string literal key, e.g. t("Text") or t("Text {{name}}", { name }).',
+        },
+        schema: [],
+    },
+    create(context) {
+        const scriptVisitor = { CallExpression: createCallExpressionHandler(context) };
+        const templateBodyVisitor = { CallExpression: createCallExpressionHandler(context) };
+        const sourceCode = context.sourceCode ??
+            context.getSourceCode?.();
+        const parserServices = sourceCode && typeof sourceCode === 'object' && 'parserServices' in sourceCode
+            ? sourceCode
+                .parserServices
+            : undefined;
+        if (parserServices?.defineTemplateBodyVisitor) {
+            return parserServices.defineTemplateBodyVisitor(templateBodyVisitor, scriptVisitor);
+        }
+        return scriptVisitor;
+    },
+};
+exports.default = rule;

package/dist/rules/notUseCustomColorClass.d.ts

@@ -0,0 +1,4 @@
+import type { Rule } from "eslint";
+declare const rule: Rule.RuleModule;
+export default rule;
+//# sourceMappingURL=notUseCustomColorClass.d.ts.map

package/dist/rules/notUseCustomColorClass.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"notUseCustomColorClass.d.ts","sourceRoot":"","sources":["../../src/rules/notUseCustomColorClass.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AA0EnC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,UAmDhB,CAAC;eAEa,IAAI"}

package/dist/rules/notUseCustomColorClass.js

@@ -0,0 +1,82 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+/**
+ * Warns when raw color values (hex, rgb, hsl) are used in Vue template class bindings.
+ * Design-system tokens should be used instead.
+ */
+// Matches Tailwind arbitrary-value syntax with raw colors: [#fff], [rgb(...)], [hsl(...)]
+const COLOR_VALUE_RE = /\[(#[^[\]]*?|rgb[^[\]]*?|hsl[^[\]]*?)\]/g;
+function checkClassValue(context, node, value) {
+    let match;
+    COLOR_VALUE_RE.lastIndex = 0;
+    while ((match = COLOR_VALUE_RE.exec(value)) !== null) {
+        context.report({
+            node,
+            messageId: "noCustomColor",
+            data: { value: match[1] },
+        });
+    }
+}
+function walkNode(context, node) {
+    const n = node;
+    if (n.type !== "VAttribute")
+        return;
+    const isClassBinding = n.name === "class" ||
+        n.name === "className" ||
+        (n.name === "bind" &&
+            n.argument?.name ===
+                "class");
+    if (!isClassBinding)
+        return;
+    if (typeof n.value === "string") {
+        checkClassValue(context, node, n.value);
+    }
+    else if (n.value && typeof n.value === "object") {
+        const val = n.value;
+        if (typeof val.value === "string") {
+            checkClassValue(context, node, val.value);
+        }
+        if (val.expression?.type === "ArrayExpression") {
+            for (const el of val.expression.elements ?? []) {
+                if (el &&
+                    typeof el === "object" &&
+                    typeof el.value === "string") {
+                    checkClassValue(context, node, el.value);
+                }
+            }
+        }
+    }
+}
+const rule = {
+    meta: {
+        type: "suggestion",
+        docs: {
+            description: "Disallow raw color values in Vue template class bindings — use design-system tokens instead",
+        },
+        messages: {
+            noCustomColor: 'Raw color "{{value}}" detected in class binding. Use a design-system token instead (e.g. text-primary).',
+        },
+        schema: [],
+    },
+    create(context) {
+        const sourceCode = context
+            .sourceCode ??
+            context.getSourceCode?.();
+        const parserServices = sourceCode &&
+            typeof sourceCode === "object" &&
+            "parserServices" in sourceCode
+            ? sourceCode.parserServices
+            : undefined;
+        if (!parserServices?.defineTemplateBodyVisitor)
+            return {};
+        return parserServices.defineTemplateBodyVisitor({
+            VElement(node) {
+                const el = node;
+                for (const attr of el.attributes ?? []) {
+                    walkNode(context, attr);
+                }
+            },
+        });
+    },
+};
+exports.default = rule;

package/dist/rules/notUseStoreToRefs.d.ts

@@ -0,0 +1,7 @@
+import type { Rule } from 'eslint';
+/**
+ * Bans Pinia's storeToRefs() — use computed() instead to keep reactivity explicit.
+ */
+declare const rule: Rule.RuleModule;
+export default rule;
+//# sourceMappingURL=notUseStoreToRefs.d.ts.map

package/dist/rules/notUseStoreToRefs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"notUseStoreToRefs.d.ts","sourceRoot":"","sources":["../../src/rules/notUseStoreToRefs.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAEnC;;GAEG;AACH,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,UAuBhB,CAAC;eAEa,IAAI"}

package/dist/rules/notUseStoreToRefs.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+/**
+ * Bans Pinia's storeToRefs() — use computed() instead to keep reactivity explicit.
+ */
+const rule = {
+    meta: {
+        type: 'problem',
+        docs: {
+            description: 'Disallow storeToRefs() from Pinia — use computed() for explicit reactivity',
+        },
+        messages: {
+            noStoreToRefs: 'Do not use storeToRefs(). Use computed() instead: ' +
+                'const count = computed(() => useCounterStore().count)',
+        },
+        schema: [],
+    },
+    create(context) {
+        return {
+            CallExpression(node) {
+                const callee = node.callee;
+                if (callee.type === 'Identifier' && callee.name === 'storeToRefs') {
+                    context.report({ node, messageId: 'noStoreToRefs' });
+                }
+            },
+        };
+    },
+};
+exports.default = rule;

package/dist/rules/pureUiLayer.d.ts

@@ -0,0 +1,4 @@
+import type { Rule } from 'eslint';
+declare const rule: Rule.RuleModule;
+export default rule;
+//# sourceMappingURL=pureUiLayer.d.ts.map

package/dist/rules/pureUiLayer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pureUiLayer.d.ts","sourceRoot":"","sources":["../../src/rules/pureUiLayer.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAcnC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,UAyDhB,CAAC;eAEa,IAAI"}

package/dist/rules/pureUiLayer.js

@@ -0,0 +1,66 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const moduleInfo_1 = require("../lib/moduleInfo");
+const PURE_LAYER_DIRS = ['/ui/atoms/', '/ui/molecules/'];
+const HOOK_NAME_RE = /^use[A-Z]/;
+// i18n, translation, and constant hooks are read-only utilities allowed in pure layers.
+const ALLOWED_HOOK_RE = /^use.*(?:i18n|translat|const)/i;
+function isAllowedHook(name) {
+    return ALLOWED_HOOK_RE.test(name);
+}
+const rule = {
+    meta: {
+        type: 'problem',
+        docs: {
+            description: 'Prevent hook imports and use* calls inside ui/atoms and ui/molecules — these layers must be pure',
+        },
+        messages: {
+            noHookImport: 'Importing from a hooks directory ("{{source}}") is not allowed in atoms or molecules. ' +
+                'Move stateful logic to an organism.',
+            noHookCall: '"{{name}}" looks like a hook (use* prefix) and is not allowed in atoms or molecules. ' +
+                'Move hook usage to an organism (only i18n/translation/const/constant hooks are exempt).',
+        },
+        schema: [],
+    },
+    create(context) {
+        const filePath = context.getFilename().replace(/\\/g, '/');
+        if ((0, moduleInfo_1.isModuleCoreSubfolder)(filePath))
+            return {};
+        if (!PURE_LAYER_DIRS.some((dir) => filePath.includes(dir)))
+            return {};
+        return {
+            ImportDeclaration(node) {
+                const source = node.source.value;
+                if (typeof source !== 'string')
+                    return;
+                if (!/\/hooks(?:\/|$)/.test(source))
+                    return;
+                const specifiers = node.specifiers;
+                const allAllowedHooks = specifiers.length > 0 &&
+                    specifiers.every((s) => {
+                        const name = s.type === 'ImportSpecifier'
+                            ? (s.imported.type === 'Identifier' ? s.imported.name : String(s.imported.value))
+                            : s.local.name;
+                        return isAllowedHook(name);
+                    });
+                if (allAllowedHooks)
+                    return;
+                context.report({ node, messageId: 'noHookImport', data: { source } });
+            },
+            CallExpression(node) {
+                const callee = node.callee;
+                let hookName = null;
+                if (callee.type === 'Identifier') {
+                    hookName = callee.name;
+                }
+                else if (callee.type === 'MemberExpression' && callee.property.type === 'Identifier') {
+                    hookName = callee.property.name;
+                }
+                if (hookName && HOOK_NAME_RE.test(hookName) && !isAllowedHook(hookName)) {
+                    context.report({ node: callee, messageId: 'noHookCall', data: { name: hookName } });
+                }
+            },
+        };
+    },
+};
+exports.default = rule;

package/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "@gem-sdk/eslint-plugin",
+  "version": "0.0.1",
+  "description": "Shared ESLint rules for GemPages frontend repos (React + Vue)",
+  "license": "MIT",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "rm -rf dist && tsc",
+    "test": "vitest run",
+    "type-check": "tsc --noEmit",
+    "lint": "eslint src --ext .ts",
+    "release": "changeset publish",
+    "release-packages": "yarn build && changeset publish"
+  },
+  "peerDependencies": {
+    "eslint": ">=8.0.0"
+  },
+  "devDependencies": {
+    "@changesets/changelog-github": "^0.5.2",
+    "@changesets/cli": "^2.31.0",
+    "@types/eslint": "^8.56.12",
+    "@types/node": "^26.0.0",
+    "@typescript-eslint/parser": "^8.62.0",
+    "eslint": "8.57.0",
+    "typescript": "7.0.1-rc",
+    "vitest": "^3.2.6",
+    "vue-eslint-parser": "^9.4.3"
+  },
+  "engines": {
+    "node": ">=22"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}