eslint-plugin-smarthr 1.7.0 → 1.8.0

package/CHANGELOG.md

@@ -2,6 +2,14 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+## [1.8.0](https://github.com/kufu/tamatebako/compare/eslint-plugin-smarthr-v1.7.0...eslint-plugin-smarthr-v1.8.0) (2025-06-09)
+
+
+### Features
+
+* best-practice-for-layoutsで <any>{hoge}</any> など子要素が変数のみの場合を許容する ([#668](https://github.com/kufu/tamatebako/issues/668)) ([7d03ff1](https://github.com/kufu/tamatebako/commit/7d03ff150833f673b9c2afe8e86adfdaee150d72))
+* format-translate-component rule で RangeSeparator を許容する ([#667](https://github.com/kufu/tamatebako/issues/667)) ([951bee2](https://github.com/kufu/tamatebako/commit/951bee2f376ddf48c5e9a0b13eb50b2daeeec7f9))
+
 ## [1.7.0](https://github.com/kufu/tamatebako/compare/eslint-plugin-smarthr-v1.6.0...eslint-plugin-smarthr-v1.7.0) (2025-06-02)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eslint-plugin-smarthr",
-  "version": "1.7.0",
+  "version": "1.8.0",
   "author": "SmartHR",
   "license": "MIT",
   "description": "A sharable ESLint plugin for SmartHR",
@@ -26,7 +26,7 @@
     "json5": "^2.2.3"
   },
   "devDependencies": {
-    "typescript-eslint": "^8.33.0"
+    "typescript-eslint": "^8.33.1"
   },
   "peerDependencies": {
     "eslint": "^9"
@@ -37,5 +37,5 @@
     "eslintplugin",
     "smarthr"
   ],
-  "gitHead": "12babfba8f3ff1aa9bc9d159136ef15ffce24fe0"
+  "gitHead": "baf2b489f2397ac050c0c699e186b8356a8775cb"
 }

package/rules/best-practice-for-layouts/index.js

@@ -24,6 +24,11 @@ const searchChildren = (node) => {
   }
 
   switch(node.type) {
+    case 'MemberExpression':
+      return searchChildren(node.object)
+    // {hoge} や {hoge.fuga} の場合、許容する
+    case 'Identifier':
+      return false
     case 'JSXExpressionContainer':
     case 'ChainExpression':
       return searchChildren(node.expression)
@@ -101,7 +106,6 @@ module.exports = {
                 return
               }
 
-
               if (searchChildren(children[0])) {
                 context.report({
                   node,

package/rules/format-translate-component/index.js

@@ -14,6 +14,10 @@ const SCHEMA = [
 ]
 
 const NOOP = () => {}
+const findDangerouslySetInnerHTMLAttr = (a) => a.name.name === 'dangerouslySetInnerHTML'
+
+const WHITESPACE_REGEX = /(\s|\n)+/g
+const ALLOW_ELM_REGEX = /^(br|RangeSeparator)$/
 
 /**
  * @type {import('@typescript-eslint/utils').TSESLint.RuleModule<''>}
@@ -46,43 +50,39 @@ module.exports = {
         // HINT: 翻訳コンポーネントはテキストとbrのみ許容する
         if (node.name.name === componentName) {
           let existValidChild = false
-          let existNotBrElement = false
 
-          node.parent.children.forEach((c) => {
+          for (let i = 0; i < node.parent.children.length; i++) {
+            const c = node.parent.children[i]
+
             switch (c.type) {
               case 'JSXText':
                 // HINT: 空白と改行のみの場合はテキストが存在する扱いにはしない
-                if (c.value.replace(/(\s|\n)+/g, '')) {
-                  existValidChild = true
+                if (existValidChild || !c.value.replace(WHITESPACE_REGEX, '')) {
+                  break
                 }
 
-                break
+                existValidChild = true
               case 'JSXExpressionContainer':
                 // TODO 変数がstringのみか判定できるなら対応したい
                 existValidChild = true
 
                 break
               case 'JSXElement':
-                if (c.openingElement.name.name !== 'br') {
-                  existNotBrElement = true
+                if (ALLOW_ELM_REGEX.test(c.openingElement.name.name)) {
+                  break
                 }
 
-                break
-            }
-          })
-
-          const message = (() => {
-            if (existNotBrElement) {
-              return `${componentName} 内では <br /> 以外のタグは使えません`
-            } else if (!existValidChild && !node.attributes.some((a) => a.name.name === 'dangerouslySetInnerHTML')) {
-              return `${componentName} 内には必ずテキストを設置してください`
+                return context.report({
+                  node,
+                  message: `${componentName} 内では <br />, <RangeSeparator /> 以外のタグは使えません`,
+                });
             }
-          })()
+          }
 
-          if (message) {
+          if (!existValidChild && !node.attributes.some(findDangerouslySetInnerHTMLAttr)) {
             context.report({
               node,
-              message,
+              message: `${componentName} 内には必ずテキストを設置してください`,
             });
           }
         }

package/test/best-practice-for-layouts.js

@@ -55,10 +55,12 @@ ruleTester.run('best-practice-for-button-element', rule, {
     { code: `<HogeCluster justify="end" gap={0}>{a}</HogeCluster>` },
     { code: `<Stack align="flex-end">{a}</Stack>` },
     { code: `<HogeStack align="end">{a}</HogeStack>` },
+    { code: `<Cluster>{a}</Cluster>` },
+    { code: `<Cluster>{a.b}</Cluster>` },
+    { code: `<Cluster>{a ? b : c}</Cluster>` },
   ],
   invalid: [
     { code: `<Stack><Hoge /></Stack>`, errors: [ { message: errorMessage('Stack', 'Stack') } ] },
-    { code: `<Stack>{a}</Stack>`, errors: [ { message: errorMessage('Stack', 'Stack') } ] },
     { code: `<AnyStack>{a.hoge(action)}</AnyStack>`, errors: [ { message: errorMessage('Stack', 'AnyStack') } ] },
     { code: `<AnyStack>{a && <><Hoge /></>}</AnyStack>`, errors: [ { message: errorMessage('Stack', 'AnyStack') } ] },
     { code: `<AnyStack>{a && a.hoge(action)}</AnyStack>`, errors: [ { message: errorMessage('Stack', 'AnyStack') } ] },
@@ -70,7 +72,6 @@ ruleTester.run('best-practice-for-button-element', rule, {
     { code: `<AnyStack>{a ? <Hoge /> : a.b.hoge(action)}</AnyStack>`, errors: [ { message: errorMessage('Stack', 'AnyStack') } ] },
     { code: `<AnyStack>{a ? <Hoge /> : a ? <Hoge /> : a.b.hoge(action)}</AnyStack>`, errors: [ { message: errorMessage('Stack', 'AnyStack') } ] },
     { code: `<Cluster><Hoge /></Cluster>`, errors: [ { message: errorMessage('Cluster', 'Cluster') } ] },
-    { code: `<Cluster>{a}</Cluster>`, errors: [ { message: errorMessage('Cluster', 'Cluster') } ] },
     { code: `<AnyCluster>{a.hoge(action)}</AnyCluster>`, errors: [ { message: errorMessage('Cluster', 'AnyCluster') } ] },
     { code: `<AnyCluster>{a && <><Hoge /></>}</AnyCluster>`, errors: [ { message: errorMessage('Cluster', 'AnyCluster') } ] },
     { code: `<AnyCluster>{a && a.hoge(action)}</AnyCluster>`, errors: [ { message: errorMessage('Cluster', 'AnyCluster') } ] },
@@ -81,8 +82,6 @@ ruleTester.run('best-practice-for-button-element', rule, {
     { code: `<AnyCluster>{a ? a.b.hoge(action) : <Hoge />}</AnyCluster>`, errors: [ { message: errorMessage('Cluster', 'AnyCluster') } ] },
     { code: `<AnyCluster>{a ? <Hoge /> : a.b.hoge(action)}</AnyCluster>`, errors: [ { message: errorMessage('Cluster', 'AnyCluster') } ] },
     { code: `<AnyCluster>{a ? <Hoge /> : a ? <Hoge /> : a.b.hoge(action)}</AnyCluster>`, errors: [ { message: errorMessage('Cluster', 'AnyCluster') } ] },
-    { code: `<HogeCluster justify="center">{a}</HogeCluster>`, errors: [ { message: 'HogeCluster は smarthr-ui/Cluster ではなく smarthr-ui/Center でマークアップしてください' } ] },
-    { code: `<HogeStack align="center">{a}</HogeStack>`, errors: [ { message: 'HogeStack は smarthr-ui/Stack ではなく smarthr-ui/Center でマークアップしてください' } ] },
     { code: `<HogeStack gap={0}>{a}{b}</HogeStack>`, errors: [ { message: `HogeStack に "gap={0}" が指定されており、smarthr-ui/Stack の利用方法として誤っている可能性があります。以下の修正方法を検討してください。
  - 方法1: 子要素を一つにまとめられないか検討してください
    - 例: "<Stack gap={0}><p>hoge</p><p>fuga</p></Stack>" を "<p>hoge<br />fuga</p>" にするなど

package/test/format-translate-component.js

@@ -23,13 +23,14 @@ ruleTester.run('format-translate-component', rule, {
     { code: '<Any data-wovn-enable="true">ほげ</Any>', options },
     { code: '<Translate>ほげ</Translate>', options },
     { code: '<Translate>ほげ<br />ふが</Translate>', options },
+    { code: '<Translate>1<RangeSeparator />100</Translate>', options },
     { code: '<Translate>{any}</Translate>', options },
     { code: '<Translate dangerouslySetInnerHTML={{ __html: "ほげ" }} />', options },
   ],
   invalid: [
     { code: '<Any data-translate="true">ほげ</Any>', options, errors: [ { message: 'data-translate 属性は使用せず、 @/any/path/Translate コンポーネントを利用してください' } ] },
-    { code: '<Translate><Any>ほげ</Any></Translate>', options, errors: [ { message: 'Translate 内では <br /> 以外のタグは使えません' } ] },
-    { code: '<Translate><Any /></Translate>', options, errors: [ { message: 'Translate 内では <br /> 以外のタグは使えません' } ] },
+    { code: '<Translate><Any>ほげ</Any></Translate>', options, errors: [ { message: 'Translate 内では <br />, <RangeSeparator /> 以外のタグは使えません' } ] },
+    { code: '<Translate><Any /></Translate>', options, errors: [ { message: 'Translate 内では <br />, <RangeSeparator /> 以外のタグは使えません' } ] },
     { code: '<Translate></Translate>', options, errors: [ { message: 'Translate 内には必ずテキストを設置してください' } ] },
   ]
 })