@lark-apaas/coding-presets-react 0.1.0

package/LICENSE

@@ -0,0 +1,13 @@
+MIT License
+
+Copyright (c) 2024 Lark Technologies Pte. Ltd. and/or its affiliates
+
+Permission to use, copy, modify, and/or distribute this software for any purpose with or without fee is hereby granted,provided that the above copyright notice and this permission notice appear in all copies.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS
+IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH REGARD TO THIS SOFTWARE
+INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS. IN NO
+EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, INDIRECT, OR
+CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS OF USE,
+DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS
+ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.

package/README.md

@@ -0,0 +1,91 @@
+# @lark-apaas/coding-presets-react
+
+Shared ESLint, Stylelint, Tailwind, and TypeScript presets for OpenClaw coding templates.
+
+## Install
+
+```bash
+pnpm add -D @lark-apaas/coding-presets-react
+```
+
+## ESLint
+
+Provides a client preset with `eslint/recommended` + `typescript-eslint/recommended` base configs.
+
+```js
+// eslint.config.js
+import { eslintPresets } from '@lark-apaas/coding-presets-react'
+
+export default [
+  // Client: React + TypeScript
+  ...eslintPresets.client.map(config => config.ignores ? config : {
+    ...config,
+    files: ['src/**/*.{ts,tsx}'],
+  }),
+]
+```
+
+### Client rules include
+
+- React Hooks recommended rules (exhaustive-deps off)
+- TypeScript loose mode (no-unused-vars, no-explicit-any, no-empty-object-type off)
+- Restricted syntax: `location.href` assignment, relative `<a>` href, Tailwind 4 hsl/rgb space check
+- Restricted imports: `next/link` prohibited
+
+## TypeScript
+
+Provides `tsconfig.app.json` and `tsconfig.node.json` presets aligned with Vite 8 standards.
+
+```jsonc
+// tsconfig.app.json — Client (React)
+{
+  "extends": "@lark-apaas/coding-presets-react/lib/tsconfig/tsconfig.app.json",
+  "compilerOptions": {
+    "types": ["vite/client"],
+    "paths": { "@/*": ["./client/src/*"] }
+  },
+  "include": ["client/src"]
+}
+```
+
+```jsonc
+// tsconfig.node.json — Tooling (vite.config.ts, etc.)
+{
+  "extends": "@lark-apaas/coding-presets-react/lib/tsconfig/tsconfig.node.json",
+  "include": ["vite.config.ts"]
+}
+```
+
+### TSConfig presets settings
+
+| Option | app | node |
+|--------|-----|------|
+| target | ES2023 | ES2023 |
+| module | ESNext | ESNext |
+| moduleResolution | bundler | bundler |
+| strict | true | true |
+| jsx | react-jsx | — |
+| verbatimModuleSyntax | true | true |
+| noEmit | true | true |
+
+## Stylelint
+
+```js
+import { stylelintPresets } from '@lark-apaas/coding-presets-react'
+// Use stylelintPresets as your stylelint config
+```
+
+Includes custom HSL validation rule and duplicate custom properties check.
+
+## Tailwind
+
+```js
+import { createTailwindPreset } from '@lark-apaas/coding-presets-react'
+const preset = createTailwindPreset({ content: ['./src/**/*.tsx'] })
+```
+
+Includes `tailwindcss-animate` plugin with class-based dark mode.
+
+## License
+
+MIT

package/lib/custom-eslint-rules/index.d.ts

@@ -0,0 +1,5 @@
+export declare const customRules: {
+    'no-welcome-index-route': import("eslint").Rule.RuleModule;
+    'require-index-route': import("eslint").Rule.RuleModule;
+    'no-duplicate-route-component': import("eslint").Rule.RuleModule;
+};

package/lib/custom-eslint-rules/index.js

@@ -0,0 +1,14 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.customRules = void 0;
+const no_welcome_index_route_1 = __importDefault(require("./no-welcome-index-route"));
+const require_index_route_1 = __importDefault(require("./require-index-route"));
+const no_duplicate_route_component_1 = __importDefault(require("./no-duplicate-route-component"));
+exports.customRules = {
+    'no-welcome-index-route': no_welcome_index_route_1.default,
+    'require-index-route': require_index_route_1.default,
+    'no-duplicate-route-component': no_duplicate_route_component_1.default,
+};

package/lib/custom-eslint-rules/no-duplicate-route-component.d.ts

@@ -0,0 +1,14 @@
+/**
+ * ESLint rule to disallow duplicate component usage across Route elements within a <Routes>.
+ *
+ * This rule enforces that within any <Routes> element, each JSX component used as the
+ * `element` prop of a <Route> must be unique. Reusing the same component across
+ * multiple routes leads to confusing routing logic.
+ *
+ * Skips:
+ * - Routes without an `element` attribute
+ * - element values that are not JSX elements (e.g., variables, null, false)
+ */
+import type { Rule } from 'eslint';
+declare const rule: Rule.RuleModule;
+export default rule;

package/lib/custom-eslint-rules/no-duplicate-route-component.js

@@ -0,0 +1,87 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+// Serialize a JSXIdentifier or JSXMemberExpression to a stable string key.
+// e.g. JSXIdentifier "Home" → "Home"
+//      JSXMemberExpression "Pages.Home" → "Pages.Home"
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function getJSXName(node) {
+    if (!node)
+        return null;
+    if (node.type === 'JSXIdentifier')
+        return node.name;
+    if (node.type === 'JSXMemberExpression') {
+        const obj = getJSXName(node.object);
+        const prop = node.property?.name;
+        if (obj && prop)
+            return `${obj}.${prop}`;
+    }
+    return null;
+}
+const rule = {
+    meta: {
+        type: 'problem',
+        docs: {
+            description: 'Disallow the same component being used as the element of multiple Routes within a <Routes>',
+            category: 'Best Practices',
+            recommended: true,
+        },
+        messages: {
+            duplicateRouteComponent: "Component <{{componentName}} /> is already used in another Route's element. Remove the duplicate—keep the index Route if present.",
+        },
+        schema: [],
+    },
+    create(context) {
+        // Stack of seen-component maps, one entry per nested <Routes>
+        const routesStack = [];
+        return {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            JSXElement(node) {
+                const tagName = node.openingElement?.name?.name;
+                if (tagName === 'Routes') {
+                    routesStack.push(new Map());
+                    return;
+                }
+                if (tagName !== 'Route')
+                    return;
+                if (routesStack.length === 0)
+                    return;
+                const seenComponents = routesStack[routesStack.length - 1];
+                const attributes = node.openingElement?.attributes || [];
+                // Find the `element` attribute
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                const elementAttr = attributes.find(
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                (attr) => attr.type === 'JSXAttribute' && attr.name?.name === 'element');
+                if (!elementAttr)
+                    return;
+                // element value must be a JSXExpressionContainer containing a JSXElement
+                const attrValue = elementAttr.value;
+                if (attrValue?.type !== 'JSXExpressionContainer')
+                    return;
+                const expression = attrValue.expression;
+                if (!expression || expression.type !== 'JSXElement')
+                    return;
+                const componentName = getJSXName(expression.openingElement?.name);
+                if (!componentName)
+                    return;
+                if (seenComponents.has(componentName)) {
+                    context.report({
+                        node: elementAttr,
+                        messageId: 'duplicateRouteComponent',
+                        data: { componentName },
+                    });
+                }
+                else {
+                    seenComponents.set(componentName, elementAttr);
+                }
+            },
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            'JSXElement:exit'(node) {
+                if (node.openingElement?.name?.name === 'Routes') {
+                    routesStack.pop();
+                }
+            },
+        };
+    },
+};
+exports.default = rule;

package/lib/custom-eslint-rules/no-welcome-index-route.d.ts

@@ -0,0 +1,12 @@
+/**
+ * ESLint rule to disallow Welcome or PagePlaceholder components as the default home page route.
+ *
+ * This rule enforces that the first-level index route (the actual home page at "/")
+ * should use an actual page component rather than placeholder components from the framework.
+ *
+ * Only checks the first-level index route nested directly under a parent Route (typically Layout).
+ * Only flags Welcome/PagePlaceholder if they are imported from @lark-apaas/client-toolkit-lite.
+ */
+import type { Rule } from 'eslint';
+declare const rule: Rule.RuleModule;
+export default rule;

package/lib/custom-eslint-rules/no-welcome-index-route.js

@@ -0,0 +1,123 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const rule = {
+    meta: {
+        type: 'problem',
+        docs: {
+            description: 'Disallow Welcome or PagePlaceholder from @lark-apaas/client-toolkit-lite as the default home page route element',
+            category: 'Best Practices',
+            recommended: true,
+        },
+        messages: {
+            noWelcomeIndex: 'Index route should not use {{componentName}} from @lark-apaas/client-toolkit-lite as the element. Please create and use your own home page component (e.g., HomePage, Dashboard).',
+        },
+        schema: [],
+    },
+    create(context) {
+        // Track imports from @lark-apaas/client-toolkit-lite
+        const toolkitImports = new Set();
+        return {
+            ImportDeclaration(node) {
+                const importNode = node;
+                const source = importNode.source?.value;
+                // Check if importing from @lark-apaas/client-toolkit-lite (any subpath)
+                if (typeof source === 'string' &&
+                    source.startsWith('@lark-apaas/client-toolkit-lite')) {
+                    // Collect all imported names
+                    importNode.specifiers?.forEach(specifier => {
+                        if (specifier.type === 'ImportSpecifier' &&
+                            specifier.imported?.name) {
+                            toolkitImports.add(specifier.imported.name);
+                        }
+                    });
+                }
+            },
+            JSXElement(node) {
+                const element = node;
+                const openingElement = element.openingElement;
+                if (!openingElement)
+                    return;
+                const elementName = openingElement.name;
+                // Check if this is a <Route> element
+                if (elementName.type !== 'JSXIdentifier' ||
+                    elementName.name !== 'Route') {
+                    return;
+                }
+                // Check if it has an index prop that is truthy
+                const indexAttr = openingElement.attributes.find(attr => attr.type === 'JSXAttribute' &&
+                    attr.name?.type === 'JSXIdentifier' &&
+                    attr.name?.name === 'index');
+                // If no index attribute, skip this route
+                if (!indexAttr) {
+                    return;
+                }
+                // Check if index={false} explicitly
+                const indexValue = indexAttr.value;
+                if (indexValue?.type === 'JSXExpressionContainer' &&
+                    indexValue.expression?.type === 'Literal' &&
+                    indexValue.expression.value === false) {
+                    return;
+                }
+                // Check if this is a first-level index route (nested under exactly one parent Route)
+                // The structure should be: <Routes> -> <Route element={<Layout />}> -> <Route index>
+                let routeParentCount = 0;
+                let current = element.parent;
+                while (current) {
+                    if (current.type === 'JSXElement') {
+                        const currentElement = current;
+                        const currentOpeningElement = currentElement.openingElement;
+                        const currentElementName = currentOpeningElement?.name;
+                        if (currentElementName?.type === 'JSXIdentifier' &&
+                            currentElementName.name === 'Route') {
+                            routeParentCount++;
+                        }
+                        else if (currentElementName?.type === 'JSXIdentifier' &&
+                            currentElementName.name === 'Routes') {
+                            // Stop when we reach Routes
+                            break;
+                        }
+                    }
+                    current = current.parent;
+                }
+                // Only check if this is a first-level route (exactly 1 parent Route)
+                // This corresponds to the default home page pattern:
+                // <Routes><Route element={<Layout />}><Route index /></Route></Routes>
+                if (routeParentCount !== 1) {
+                    return;
+                }
+                // Find the element prop
+                const elementProp = openingElement.attributes.find(attr => attr.type === 'JSXAttribute' &&
+                    attr.name?.type === 'JSXIdentifier' &&
+                    attr.name?.name === 'element');
+                if (!elementProp) {
+                    return;
+                }
+                // Check if the element prop value is a JSXExpressionContainer with a JSXElement
+                const propValue = elementProp.value;
+                if (propValue?.type === 'JSXExpressionContainer' &&
+                    propValue.expression?.type === 'JSXElement') {
+                    const jsxElement = propValue.expression;
+                    const jsxOpeningElement = jsxElement.openingElement;
+                    const jsxElementName = jsxOpeningElement?.name;
+                    // Check if the component name is Welcome or PagePlaceholder
+                    if (jsxElementName?.type === 'JSXIdentifier' &&
+                        (jsxElementName.name === 'Welcome' ||
+                            jsxElementName.name === 'PagePlaceholder')) {
+                        const componentName = jsxElementName.name;
+                        // Only report if this component was imported from @lark-apaas/client-toolkit-lite
+                        if (toolkitImports.has(componentName)) {
+                            context.report({
+                                node: elementProp,
+                                messageId: 'noWelcomeIndex',
+                                data: {
+                                    componentName,
+                                },
+                            });
+                        }
+                    }
+                }
+            },
+        };
+    },
+};
+exports.default = rule;

package/lib/custom-eslint-rules/require-index-route.d.ts

@@ -0,0 +1,14 @@
+/**
+ * ESLint rule to require a default index route in RoutesComponent.
+ *
+ * This rule enforces that the RoutesComponent must have a first-level index route
+ * to handle the default "/" path. This ensures users don't see a 404 when visiting
+ * the application root.
+ *
+ * Valid configurations:
+ * 1. <Route index element={...} /> (first-level, nested under one parent Route)
+ * 2. <Route path="/" element={...} /> (first-level or top-level)
+ */
+import type { Rule } from 'eslint';
+declare const rule: Rule.RuleModule;
+export default rule;

package/lib/custom-eslint-rules/require-index-route.js

@@ -0,0 +1,98 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const rule = {
+    meta: {
+        type: 'problem',
+        docs: {
+            description: 'Require a default index route in RoutesComponent to handle the root path',
+            category: 'Best Practices',
+            recommended: true,
+        },
+        messages: {
+            missingIndexRoute: 'RoutesComponent is missing a default home page route. Add either:\n  - <Route index element={<HomePage />} /> (nested under Layout)\n  - <Route path="/" element={<HomePage />} /> (at any level)',
+        },
+        schema: [],
+    },
+    create(context) {
+        let inRoutesComponent = false;
+        let hasDefaultRoute = false;
+        let routeDepth = 0;
+        return {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            VariableDeclarator(node) {
+                // Check if this is RoutesComponent
+                if (node.id?.name === 'RoutesComponent') {
+                    inRoutesComponent = true;
+                    hasDefaultRoute = false;
+                    routeDepth = 0;
+                }
+            },
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            'VariableDeclarator:exit'(node) {
+                if (node.id?.name === 'RoutesComponent') {
+                    if (!hasDefaultRoute) {
+                        context.report({
+                            node,
+                            messageId: 'missingIndexRoute',
+                        });
+                    }
+                    inRoutesComponent = false;
+                }
+            },
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            JSXElement(node) {
+                if (!inRoutesComponent)
+                    return;
+                const elementName = node.openingElement?.name?.name;
+                // Track Route depth
+                if (elementName === 'Route') {
+                    routeDepth++;
+                    // Only check first-level routes (depth 1 or 2)
+                    // depth 1: <Routes><Route index /></Routes>
+                    // depth 2: <Routes><Route><Route index /></Route></Routes>
+                    if (routeDepth <= 2) {
+                        const attributes = node.openingElement?.attributes || [];
+                        // Check for index attribute
+                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                        const indexAttr = attributes.find((attr) => attr.type === 'JSXAttribute' && attr.name?.name === 'index');
+                        if (indexAttr) {
+                            // Make sure it's not index={false}
+                            const isIndexFalse = indexAttr.value?.type === 'JSXExpressionContainer' &&
+                                indexAttr.value.expression?.type === 'Literal' &&
+                                indexAttr.value.expression.value === false;
+                            if (!isIndexFalse) {
+                                hasDefaultRoute = true;
+                            }
+                        }
+                        // Check for path="/"
+                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                        const pathAttr = attributes.find((attr) => attr.type === 'JSXAttribute' && attr.name?.name === 'path');
+                        if (pathAttr) {
+                            const value = pathAttr.value;
+                            // Handle path="/"
+                            if (value?.type === 'Literal' && value.value === '/') {
+                                hasDefaultRoute = true;
+                            }
+                            // Handle path={"/"}
+                            if (value?.type === 'JSXExpressionContainer' &&
+                                value.expression?.type === 'Literal' &&
+                                value.expression.value === '/') {
+                                hasDefaultRoute = true;
+                            }
+                        }
+                    }
+                }
+            },
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            'JSXElement:exit'(node) {
+                if (!inRoutesComponent)
+                    return;
+                const elementName = node.openingElement?.name?.name;
+                if (elementName === 'Route') {
+                    routeDepth--;
+                }
+            },
+        };
+    },
+};
+exports.default = rule;

package/lib/custom-stylelint-rules/hsl-variable.d.ts

@@ -0,0 +1,7 @@
+export declare const ruleName = "custom/hsl-valid-value";
+export declare const messages: any;
+export declare const meta: {
+    url: string;
+};
+declare const _default: any;
+export default _default;

package/lib/custom-stylelint-rules/hsl-variable.js

@@ -0,0 +1,207 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.meta = exports.messages = exports.ruleName = void 0;
+/* eslint-disable */
+// @ts-nocheck
+/**
+ * 自定义 Stylelint 规则：校验 CSS 声明中非法的 hsl() 写法
+ *
+ * 遍历所有 CSS 声明（包括自定义属性 --*），当值以 hsl()/hsla() 开头时，
+ * 使用 css-tree 的词法器验证其是否符合 CSS color 规范。
+ *
+ * 注意：只处理纯颜色值声明，不处理复合值（如 box-shadow、background 等）中的 hsl()。
+ *
+ * 非法示例：
+ *   --color: hsl(100%, 50%, 26%);      // hue 不能是百分比
+ *   --color: hsl(200 50% 26% 0.5);     // alpha 缺少斜杠
+ *   --color: hsl(200 50%);             // 缺少 lightness
+ *   color: hsl();                      // 空参数
+ *
+ * 合法示例：
+ *   --color: hsl(200, 50%, 26%);       // CSS3 逗号写法
+ *   --color: hsl(200 50% 26%);         // CSS4 空格写法
+ *   --color: hsl(200deg 50% 26%);      // 带单位的 hue
+ *   --color: hsl(200 50% 26% / 0.5);   // CSS4 带 alpha
+ *
+ * 跳过（不检查）的示例：
+ *   --shadow: 0px 2px 12px hsl(0 0% 0% / 0.01);  // 复合值中的 hsl
+ *   background: linear-gradient(hsl(...), ...);  // 复合值中的 hsl
+ *   --border: hsl(from hsl(217 80% 55%) h s calc(l + var(--x)));  // CSS Color Level 5 相对颜色语法
+ *   --color: hsl(none 50% 26%);                  // none 关键字（CSS Color Level 4）
+ *
+ * var() 通道的处理：
+ *   对每个 var() 独立尝试占位符 0 和 0%（hue 位置需要数字，sat/light 位置需要百分比），
+ *   穷举所有 2^n 组合，只要存在一种合法结构就认为该写法合法。
+ *   这样可以在不误报合法写法的前提下，仍然捕获结构性错误（如缺少参数）。
+ */
+const stylelint_1 = __importDefault(require("stylelint"));
+const csstree = __importStar(require("css-tree"));
+exports.ruleName = 'custom/hsl-valid-value';
+const { report, ruleMessages, validateOptions } = stylelint_1.default.utils;
+exports.messages = ruleMessages(exports.ruleName, {
+    invalidHsl: (value) => `Invalid hsl() value: "${value}". Refer to https://developer.mozilla.org/docs/Web/CSS/color_value/hsl`,
+});
+exports.meta = {
+    url: 'https://github.com/csstree/stylelint-validator',
+};
+/**
+ * 提取字符串中所有顶层 var() 的位置和长度，使用括号计数支持任意深度嵌套。
+ * 例如 var(--a, var(--b, var(--c, 0))) 会被作为一个整体提取。
+ */
+function extractVarRanges(value) {
+    const ranges = [];
+    const varStart = /var\s*\(/gi;
+    let m;
+    while ((m = varStart.exec(value)) !== null) {
+        let depth = 1;
+        let j = m.index + m[0].length;
+        while (j < value.length && depth > 0) {
+            if (value[j] === '(')
+                depth++;
+            else if (value[j] === ')')
+                depth--;
+            j++;
+        }
+        ranges.push({ index: m.index, length: j - m.index });
+        varStart.lastIndex = j; // 跳过已处理的 var()，避免重复匹配内层
+    }
+    return ranges;
+}
+/**
+ * 对 hsl() 值中的每个 var() 分别尝试占位符 "0" 和 "0%"，
+ * 穷举 2^n 种组合，只要任意一种通过 css-tree 词法验证就返回 true。
+ *
+ * 背景：css-tree 不能解析 var()，但不同通道对占位符类型要求不同：
+ *   - hue 位置需要数字（0），saturation/lightness 位置需要百分比（0%）。
+ * 穷举组合避免了需要感知通道位置的复杂解析。
+ */
+function isHslValidWithVarPlaceholders(value, ranges) {
+    const isValidCssColor = (v) => {
+        try {
+            const ast = csstree.parse(v, { context: 'value' });
+            return !csstree.lexer.matchType('color', ast).error;
+        }
+        catch {
+            return false;
+        }
+    };
+    const n = ranges.length;
+    const total = 1 << n; // 2^n 种组合
+    for (let mask = 0; mask < total; mask++) {
+        let replaced = value;
+        let offset = 0;
+        for (let i = 0; i < n; i++) {
+            const placeholder = (mask >> i) & 1 ? '0%' : '0';
+            const m = ranges[i];
+            const start = m.index + offset;
+            const end = start + m.length;
+            replaced = replaced.slice(0, start) + placeholder + replaced.slice(end);
+            offset += placeholder.length - m.length;
+        }
+        if (isValidCssColor(replaced))
+            return true;
+    }
+    return false; // 所有组合均非法，视为结构性错误
+}
+const rule = primary => {
+    return (root, result) => {
+        const validOptions = validateOptions(result, exports.ruleName, {
+            actual: primary,
+            possible: [true],
+        });
+        if (!validOptions || !primary)
+            return;
+        root.walkDecls(decl => {
+            const value = decl.value.trim();
+            // 只处理纯 hsl/hsla 颜色值，跳过复合值（如 box-shadow）
+            if (!/^hsla?\(/i.test(value))
+                return;
+            // 跳过 CSS Color Level 5 相对颜色语法：hsl(from <color> h s l)
+            // css-tree 词法器尚不支持该语法，直接跳过避免误报
+            if (/^hsla?\(\s*from\s+/i.test(value))
+                return;
+            // none 关键字只在现代空格语法中合法（CSS Color Level 4），逗号语法不支持
+            // 通过是否含逗号区分语法：现代语法跳过，逗号语法交由 css-tree 验证
+            const isLegacySyntax = /^hsla?\s*\([^)]*,/i.test(value);
+            if (!isLegacySyntax && /\bnone\b/i.test(value))
+                return;
+            // 包含 var() 时，穷举占位符组合进行结构性校验
+            const varRanges = extractVarRanges(value);
+            if (varRanges.length > 0) {
+                if (!isHslValidWithVarPlaceholders(value, varRanges)) {
+                    report({
+                        message: exports.messages.invalidHsl(value),
+                        node: decl,
+                        result,
+                        ruleName: exports.ruleName,
+                        word: value,
+                    });
+                }
+                return;
+            }
+            try {
+                const ast = csstree.parse(value, { context: 'value' });
+                const matchResult = csstree.lexer.matchType('color', ast);
+                if (matchResult.error) {
+                    report({
+                        message: exports.messages.invalidHsl(value),
+                        node: decl,
+                        result,
+                        ruleName: exports.ruleName,
+                        word: value,
+                    });
+                }
+            }
+            catch {
+                // css-tree parse 失败也视为非法值
+                report({
+                    message: exports.messages.invalidHsl(value),
+                    node: decl,
+                    result,
+                    ruleName: exports.ruleName,
+                    word: value,
+                });
+            }
+        });
+    };
+};
+rule.ruleName = exports.ruleName;
+rule.messages = exports.messages;
+rule.meta = exports.meta;
+exports.default = stylelint_1.default.createPlugin(exports.ruleName, rule);

package/lib/eslint/eslint-client.d.ts

@@ -0,0 +1,3 @@
+import type { Linter } from 'eslint';
+declare const configs: Linter.Config[];
+export default configs;

package/lib/eslint/eslint-client.js

@@ -0,0 +1,119 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+/* eslint-disable */
+const globals_1 = __importDefault(require("globals"));
+const custom_eslint_rules_1 = require("../custom-eslint-rules");
+const tsEslint = require('typescript-eslint');
+const reactHooks = require('eslint-plugin-react-hooks');
+const importPlugin = require('eslint-plugin-import');
+// 基础语法限制规则
+const restrictedSyntaxRules = [
+    // 禁止 window.location.href 赋值
+    {
+        selector: 'AssignmentExpression[left.object.object.name="window"][left.object.property.name="location"][left.property.name="href"]',
+        message: "Don't use `window.location.href` to navigate. Use `useNavigate` from 'react-router-dom' instead.",
+    },
+    // 禁止 location.href 赋值
+    {
+        selector: 'AssignmentExpression[left.object.name="location"][left.property.name="href"]',
+        message: "Don't use `location.href` to navigate. Use `useNavigate` from 'react-router-dom' instead.",
+    },
+    // 禁止 a 标签 href 使用相对路径
+    {
+        selector: "JSXOpeningElement[name.name='a']:has(JSXAttribute[name.name='href'][value.value=/^(?!https?:|\\u002F\\u002F|mailto:|tel:|#).+/])",
+        message: "Don't use relative paths in <a> tags. Use NavLink from 'react-router-dom' instead.",
+    },
+    // Tailwind 4 arbitrary values 不能包含空格的 hsl/rgb
+    {
+        selector: 'JSXAttribute[name.name="className"][value.value=/\\[hsl\\([^\\]]*\\s[^\\]]*\\)/]',
+        message: 'Tailwind 4 arbitrary values cannot contain spaces. Replace spaces with underscores in hsl() values.',
+    },
+    {
+        selector: 'JSXAttribute[name.name="className"][value.value=/\\[rgb\\([^\\]]*\\s[^\\]]*\\)/]',
+        message: 'Tailwind 4 arbitrary values cannot contain spaces. Replace spaces with underscores in rgb() values.',
+    },
+];
+/** 客户端 ESLint 配置 */
+const clientConfig = {
+    name: 'coding-presets/client',
+    languageOptions: {
+        ecmaVersion: 2020,
+        parser: tsEslint.parser,
+        parserOptions: {
+            ecmaFeatures: { jsx: true },
+        },
+        globals: {
+            ...globals_1.default.browser,
+            ...globals_1.default.node,
+        },
+    },
+    plugins: {
+        'react-hooks': reactHooks,
+        import: importPlugin,
+        '@lark-apaas': { rules: custom_eslint_rules_1.customRules },
+    },
+    settings: {
+        'import/resolver': {
+            node: { extensions: ['.js', '.jsx', '.ts', '.tsx'] },
+        },
+        'import/parsers': {
+            '@typescript-eslint/parser': ['.ts', '.tsx'],
+        },
+    },
+    rules: {
+        // React Hooks
+        ...reactHooks.configs.recommended.rules,
+        'react-hooks/exhaustive-deps': 'off',
+        // TypeScript（宽松模式）
+        '@typescript-eslint/no-unused-vars': 'off',
+        '@typescript-eslint/no-explicit-any': 'off',
+        '@typescript-eslint/no-empty-interface': 'off',
+        '@typescript-eslint/no-empty-object-type': 'off',
+        '@typescript-eslint/no-redeclare': 'error',
+        '@typescript-eslint/no-unsafe-function-type': 'off',
+        '@typescript-eslint/no-unused-expressions': 'off',
+        '@typescript-eslint/no-require-imports': 'off',
+        // JavaScript 基础
+        'no-undef': 'off',
+        'no-empty': 'off',
+        'no-unused-labels': 'off',
+        'no-console': 'off',
+        'prefer-const': 'off',
+        'no-control-regex': 'off',
+        'no-useless-escape': 'off',
+        'no-case-declarations': 'off',
+        'no-constant-binary-expression': 'off',
+        // 禁止导入 next/link
+        'no-restricted-imports': [
+            'error',
+            {
+                paths: [
+                    {
+                        name: 'next/link',
+                        message: "Importing from 'next/link' is prohibited. Use `Link` from 'react-router-dom' instead.",
+                    },
+                ],
+            },
+        ],
+        // 语法限制
+        'no-restricted-syntax': ['error', ...restrictedSyntaxRules],
+    },
+};
+/** app.tsx 专用配置：启用路由相关 lint 规则
+ *  files 同时匹配老全栈模板(client/src/app.tsx)和新 jsPage 扁平模板(src/app.tsx)
+ */
+const appTsxConfig = {
+    name: 'coding-presets/client/app-tsx',
+    files: ['client/src/app.tsx', 'src/app.tsx'],
+    rules: {
+        '@lark-apaas/no-welcome-index-route': 'error',
+        '@lark-apaas/require-index-route': 'error',
+        '@lark-apaas/no-duplicate-route-component': 'error',
+    },
+};
+// 显式注解 portable type，避免 declaration emit 时引用到 .pnpm hoisted 路径（TS2742）
+const configs = [clientConfig, appTsxConfig];
+exports.default = configs;

package/lib/eslint/index.d.ts

@@ -0,0 +1,6 @@
+import type { Linter } from 'eslint';
+/** ESLint 预设 */
+export declare const eslintPresets: {
+    /** 客户端 ESLint 配置（含 eslint/recommended + typescript-eslint/recommended） */
+    client: Linter.Config[];
+};

package/lib/eslint/index.js

@@ -0,0 +1,29 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.eslintPresets = void 0;
+const js_1 = __importDefault(require("@eslint/js"));
+const typescript_eslint_1 = __importDefault(require("typescript-eslint"));
+const eslint_client_1 = __importDefault(require("./eslint-client"));
+const testFileIgnorePatterns = [
+    '**/__tests__/**',
+    '**/*.test.{js,jsx,ts,tsx}',
+    '**/*.spec.{js,jsx,ts,tsx}',
+];
+const globalIgnorePatterns = [
+    'dist',
+    'node_modules',
+    ...testFileIgnorePatterns,
+];
+/** ESLint 预设 */
+exports.eslintPresets = {
+    /** 客户端 ESLint 配置（含 eslint/recommended + typescript-eslint/recommended） */
+    client: [
+        { ignores: globalIgnorePatterns },
+        js_1.default.configs.recommended,
+        ...typescript_eslint_1.default.configs.recommended,
+        ...eslint_client_1.default,
+    ],
+};

package/lib/index.d.ts

@@ -0,0 +1,10 @@
+export { eslintPresets } from './eslint';
+export { stylelintPresets } from './stylelint';
+export { createTailwindPreset } from './tailwind';
+export type { TailwindPresetOptions } from './tailwind';
+export declare const tsconfigPresets: {
+    /** 客户端 tsconfig（Vite + React） */
+    readonly app: "@lark-apaas/coding-presets-react/lib/tsconfig/tsconfig.app.json";
+    /** Node 端 tsconfig（vite.config 等工具链） */
+    readonly node: "@lark-apaas/coding-presets-react/lib/tsconfig/tsconfig.node.json";
+};

package/lib/index.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.tsconfigPresets = exports.createTailwindPreset = exports.stylelintPresets = exports.eslintPresets = void 0;
+// ESLint 配置
+var eslint_1 = require("./eslint");
+Object.defineProperty(exports, "eslintPresets", { enumerable: true, get: function () { return eslint_1.eslintPresets; } });
+// Stylelint 配置
+var stylelint_1 = require("./stylelint");
+Object.defineProperty(exports, "stylelintPresets", { enumerable: true, get: function () { return stylelint_1.stylelintPresets; } });
+// Tailwind 配置
+var tailwind_1 = require("./tailwind");
+Object.defineProperty(exports, "createTailwindPreset", { enumerable: true, get: function () { return tailwind_1.createTailwindPreset; } });
+// TSConfig 预设路径（用于 tsconfig.json 的 extends 字段）
+// 示例: { "extends": "@lark-apaas/coding-presets-react/lib/tsconfig/tsconfig.app.json" }
+exports.tsconfigPresets = {
+    /** 客户端 tsconfig（Vite + React） */
+    app: '@lark-apaas/coding-presets-react/lib/tsconfig/tsconfig.app.json',
+    /** Node 端 tsconfig（vite.config 等工具链） */
+    node: '@lark-apaas/coding-presets-react/lib/tsconfig/tsconfig.node.json',
+};

package/lib/stylelint/index.d.ts

@@ -0,0 +1,8 @@
+/** OpenClaw Stylelint 预设 */
+export declare const stylelintPresets: {
+    plugins: any[];
+    rules: {
+        'declaration-block-no-duplicate-custom-properties': boolean;
+        "custom/hsl-valid-value": boolean;
+    };
+};

package/lib/stylelint/index.js

@@ -0,0 +1,45 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.stylelintPresets = void 0;
+const hsl_variable_1 = __importStar(require("../custom-stylelint-rules/hsl-variable"));
+/** OpenClaw Stylelint 预设 */
+exports.stylelintPresets = {
+    plugins: [hsl_variable_1.default],
+    rules: {
+        'declaration-block-no-duplicate-custom-properties': true,
+        [hsl_variable_1.ruleName]: true,
+    },
+};

package/lib/tailwind/index.d.ts

@@ -0,0 +1,12 @@
+export interface TailwindPresetOptions {
+    /** 额外的 content 扫描路径 */
+    content?: string[];
+}
+/** 创建 OpenClaw Tailwind 预设 */
+export declare function createTailwindPreset(options?: TailwindPresetOptions): {
+    darkMode: "class";
+    content: string[];
+    plugins: {
+        handler: () => void;
+    }[];
+};

package/lib/tailwind/index.js

@@ -0,0 +1,15 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createTailwindPreset = createTailwindPreset;
+const tailwindcss_animate_1 = __importDefault(require("tailwindcss-animate"));
+/** 创建 OpenClaw Tailwind 预设 */
+function createTailwindPreset(options = {}) {
+    return {
+        darkMode: 'class',
+        content: options.content ?? [],
+        plugins: [tailwindcss_animate_1.default],
+    };
+}

package/lib/tsconfig/tsconfig.app.json

@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "target": "ES2023",
+    "useDefineForClassFields": true,
+    "lib": ["ES2023", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": false,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": false,
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "noImplicitAny": false,
+    "noFallthroughCasesInSwitch": false
+  }
+}

package/lib/tsconfig/tsconfig.node.json

@@ -0,0 +1,22 @@
+{
+  "compilerOptions": {
+    "target": "ES2023",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": false,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": false,
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+
+    "types": ["node"]
+  }
+}

package/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "@lark-apaas/coding-presets-react",
+  "version": "0.1.0",
+  "description": "ESLint, Stylelint, and Tailwind presets for React front-end projects",
+  "main": "./lib/index.js",
+  "types": "./lib/index.d.ts",
+  "files": [
+    "lib"
+  ],
+  "license": "MIT",
+  "keywords": [
+    "openclaw",
+    "presets",
+    "eslint",
+    "stylelint",
+    "tailwind"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsc && node scripts/copy-json.js",
+    "watch": "tsc --watch",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "prepublishOnly": "npm run build"
+  },
+  "dependencies": {
+    "@eslint/js": "^9.35.0",
+    "css-tree": "^3.1.0",
+    "eslint-plugin-import": "^2.32.0",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "globals": "^16.4.0",
+    "stylelint": "^17.3.0",
+    "tailwindcss-animate": "^1.0.7",
+    "typescript-eslint": "^8.44.0"
+  },
+  "devDependencies": {
+    "@types/eslint": "^9.6.0",
+    "@types/node": "^22.0.0",
+    "eslint": "^9.35.0",
+    "typescript": "^5.9.2",
+    "vitest": "^3.2.4"
+  },
+  "peerDependencies": {
+    "eslint": "^9.0.0"
+  }
+}