eslint-plugin-smarthr 1.3.0 → 1.4.1

package/CHANGELOG.md

@@ -2,6 +2,20 @@
 
 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.4.1](https://github.com/kufu/tamatebako/compare/eslint-plugin-smarthr-v1.4.0...eslint-plugin-smarthr-v1.4.1) (2025-03-25)
+
+
+### Bug Fixes
+
+* tailwind-variantsでtv以外のimportを行った際、エラーになる問題を修正する ([#536](https://github.com/kufu/tamatebako/issues/536)) ([83efcf6](https://github.com/kufu/tamatebako/commit/83efcf671938ca471265af9c05bd47fbcce55fb9))
+
+## [1.4.0](https://github.com/kufu/tamatebako/compare/eslint-plugin-smarthr-v1.3.0...eslint-plugin-smarthr-v1.4.0) (2025-03-06)
+
+
+### Features
+
+* best-practice-for-tailwind-prohibit-root-margin ([#523](https://github.com/kufu/tamatebako/issues/523)) ([b14700a](https://github.com/kufu/tamatebako/commit/b14700a17b1c5496e50c6c920f0281bf3ec1d7da))
+
 ## [1.3.0](https://github.com/kufu/tamatebako/compare/eslint-plugin-smarthr-v1.2.0...eslint-plugin-smarthr-v1.3.0) (2025-02-21)
 
 

package/README.md

@@ -22,6 +22,7 @@
 - [best-practice-for-layouts](https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/best-practice-for-layouts)
 - [best-practice-for-remote-trigger-dialog](https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/best-practice-for-remote-trigger-dialog)
 - [best-practice-for-tailwind-variants](https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/best-practice-for-tailwind-variants)
+- [best-practice-for-tailwind-prohibit-root-margin](https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/best-practice-for-tailwind-prohibit-root-margin)
 - [design-system-guideline-prohibit-double-icons](https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/design-system-guideline-prohibit-double-icons)
 - [format-import-path](https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/format-import-path)
 - [format-translate-component](https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/format-translate-component)

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "eslint-plugin-smarthr",
-  "version": "1.3.0",
+  "version": "1.4.1",
   "author": "SmartHR",
   "license": "MIT",
   "description": "A sharable ESLint plugin for SmartHR",
   "main": "index.js",
   "engines": {
-    "node": ">=20.18.2"
+    "node": ">=20.18.3"
   },
   "scripts": {
     "test": "jest"
@@ -37,5 +37,5 @@
     "eslintplugin",
     "smarthr"
   ],
-  "gitHead": "3c7f6f40f11714a9dd6cb88dc243d1b6973c6a93"
+  "gitHead": "30434f9943f7dd03272ca3100497c4c3c6bb6fc0"
 }

package/rules/best-practice-for-tailwind-prohibit-root-margin/README.md

@@ -0,0 +1,73 @@
+# best-practice-for-tailwind-prohibit-root-margin
+
+tailwindcss を使用したコンポーネントのルート要素に外側の余白（margin）を設定することを禁止します。
+
+## ルールの目的
+
+コンポーネントは、それ自体が外側に余白を持つべきではありません。外側の余白の制御は、コンポーネントを使用する側の責任とすべきです。
+
+これにより、以下のメリットがあります。
+
+- コンポーネントの再利用性が向上します
+- レイアウトの一貫性が保たれます
+- コンポーネント間の余白の調整が容易になります
+
+## 対象となるクラス名
+
+以下のパターンのクラス名が検出対象となります。
+
+- `shr-m-`
+- `shr-mt-`
+- `shr-mr-`
+- `shr-mb-`
+- `shr-ml-`
+
+クラス名のプレフィックス(`shr-`) の通り、SmartHR UI と合わせて使用されることを前提としています。
+
+## NG例
+
+```jsx
+const Button = () => {
+  return <button className="shr-m-4">Click me</button>
+}
+
+const Card = () => {
+  return (
+    <div className="shr-mt-4">
+      <p>Content</p>
+    </div>
+  )
+}
+```
+
+## OK例
+
+```jsx
+const Button = ({ className }) => {
+  return <button className={className}>Click me</button>
+}
+
+const Card = () => {
+  return (
+    <div>
+      <p>Content</p>
+    </div>
+  )
+}
+
+// 使用する側で余白を制御
+const Page = () => {
+  return (
+    <div>
+      <Button className="shr-m-4" />
+      <div className="shr-mt-4">
+        <Card />
+      </div>
+    </div>
+  )
+}
+```
+
+## オプション
+
+このルールにはオプションはありません。

package/rules/best-practice-for-tailwind-prohibit-root-margin/index.js

@@ -0,0 +1,103 @@
+const { AST_NODE_TYPES } = require('@typescript-eslint/utils')
+
+const SCHEMA = []
+const MARGIN_CLASS_PATTERNS = /shr-m[trbl]?-/ // mt-, mr-, mb-, ml-, m-
+
+/**
+ * コンポーネントのルート要素を渡し、該当の余白クラスが存在すればそれを、なければNULLを返す
+ * @param {import('@typescript-eslint/utils').TSESTree.Node} node
+ * @returns {import('@typescript-eslint/utils').TSESTree.Literal | null}
+ */
+const findSpacingClassInRootElement = (node) => {
+  // JSX でなければ対象外
+  if (node.type !== AST_NODE_TYPES.JSXElement) return null
+
+  // className属性がなければ対象外
+  const classNameAttr = node.openingElement.attributes.find(
+    (attr) => attr.type === AST_NODE_TYPES.JSXAttribute && attr.name.name === 'className',
+  )
+  if (!classNameAttr) return null
+
+  // className属性の値がリテラルでなければ対象外
+  if (classNameAttr?.value?.type !== AST_NODE_TYPES.Literal || typeof classNameAttr.value.value !== 'string') return null
+
+  // className属性の値に余白クラスが含まれていればそれを返す
+  return MARGIN_CLASS_PATTERNS.test(classNameAttr.value.value) ? classNameAttr.value : null
+}
+
+/**
+ * ブロックステートメント内から、JSX要素を返す ReturnStatement を返す
+ * @param {import('@typescript-eslint/utils').TSESTree.BlockStatement} block
+ * @returns {import('@typescript-eslint/utils').TSESTree.ReturnStatement | null}
+ */
+const findJSXReturnStatement = (block) => {
+  for (const statement of block.body) {
+    if (statement.type === AST_NODE_TYPES.ReturnStatement && statement.argument?.type === AST_NODE_TYPES.JSXElement) {
+      return statement
+    }
+  }
+  return null
+}
+
+/**
+ * @type {import('@typescript-eslint/utils').TSESLint.RuleModule}
+ */
+module.exports = {
+  meta: {
+    type: 'problem',
+    schema: SCHEMA,
+    messages: {
+      noRootSpacing:
+        'コンポーネントのルート要素に外側への余白（margin）を設定しないでください。外側の余白は使用する側で制御するべきです。',
+    },
+  },
+  create(context) {
+    /**
+     * 関数本体をチェックし、ルート要素で余白クラスが設定されたJSXを返している場合、エラーを報告する
+     * @param {import('@typescript-eslint/utils').TSESTree.Node} body
+     */
+    const checkFunctionBody = (body) => {
+      // 関数がブロックを持たずに直接JSXを返すパターン
+      if (body.type === AST_NODE_TYPES.JSXElement) {
+        const spacingClass = findSpacingClassInRootElement(body)
+        if (spacingClass) {
+          context.report({
+            node: spacingClass,
+            messageId: 'noRootSpacing',
+          })
+        }
+        return
+      }
+
+      // 関数がブロック内で JSX を return するパターン
+      if (body.type === AST_NODE_TYPES.BlockStatement) {
+        const returnStatement = findJSXReturnStatement(body)
+        if (returnStatement?.argument) {
+          const spacingClass = findSpacingClassInRootElement(returnStatement.argument)
+          if (spacingClass) {
+            context.report({
+              node: spacingClass,
+              messageId: 'noRootSpacing',
+            })
+          }
+        }
+      }
+    }
+
+    return {
+      // アロー関数式のコンポーネントをチェック
+      ArrowFunctionExpression: (node) => {
+        if (node.parent?.type === AST_NODE_TYPES.VariableDeclarator) {
+          checkFunctionBody(node.body)
+        }
+      },
+
+      // function宣言のコンポーネントをチェック
+      FunctionDeclaration: (node) => {
+        checkFunctionBody(node.body)
+      },
+    }
+  },
+}
+
+module.exports.schema = SCHEMA

package/rules/best-practice-for-tailwind-variants/index.js

@@ -4,7 +4,7 @@ const TV_COMPONENTS_METHOD = 'tv'
 const TV_COMPONENTS = 'tailwind-variants'
 const TV_RESULT_CONST_NAME_REGEX = /(C|c)lassNameGenerator$/
 
-const findValidImportNameNode = (s) => s.type === 'ImportSpecifier' && s.local.name === TV_COMPONENTS_METHOD
+const findValidImportNameNode = (s) => s.type === 'ImportSpecifier' && s.imported.name === TV_COMPONENTS_METHOD && s.local.name !== TV_COMPONENTS_METHOD
 
 const checkImportTailwindVariants = (node, context) => {
 }
@@ -43,7 +43,7 @@ module.exports = {
     return {
       ImportDeclaration: (node) => {
         if (node.source.value === TV_COMPONENTS) {
-          if (!node.specifiers.some(findValidImportNameNode)) {
+          if (node.specifiers.some(findValidImportNameNode)) {
             context.report({
               node,
               message: `${TV_COMPONENTS} をimportする際は、名称が"${TV_COMPONENTS_METHOD}" となるようにしてください。例: "import { ${TV_COMPONENTS_METHOD} } from '${TV_COMPONENTS}'"`,

package/test/best-practice-for-tailwind-prohibit-root-margin.js

@@ -0,0 +1,111 @@
+const rule = require('../rules/best-practice-for-tailwind-prohibit-root-margin')
+const RuleTester = require('eslint').RuleTester
+
+const ruleTester = new RuleTester({
+  languageOptions: {
+    parserOptions: {
+      ecmaFeatures: {
+        jsx: true,
+      },
+    },
+  },
+})
+
+const errorMessage =
+  'コンポーネントのルート要素に外側への余白（margin）を設定しないでください。外側の余白は使用する側で制御するべきです。'
+
+ruleTester.run('best-practice-for-tailwind-prohibit-root-margin', rule, {
+  valid: [
+    // 余白のないコンポーネント
+    {
+      code: `
+        const Button = () => {
+          return <button className="shr-bg-blue-500">Click me</button>
+        }
+      `,
+    },
+    // コンポーネントのルート以外の要素での余白使用
+    {
+      code: `
+        const Card = () => {
+          return (
+            <div className="shr-bg-white">
+              <h2 className="shr-mt-4">Title</h2>
+              <p className="shr-mb-2 shr-pt-2">Content</p>
+            </div>
+          )
+        }
+      `,
+    },
+    // shr-min などの、shr-m から始まるほかのクラス
+    { code: `const Button = () => <button className="shr-min-w-100">Click me</button>` },
+    { code: `const Button = () => <button className="shr-min-h-100">Click me</button>` },
+    { code: `const Button = () => <button className="shr-max-w-100">Click me</button>` },
+    { code: `const Button = () => <button className="shr-max-h-100">Click me</button>` },
+    // padding は許可
+    { code: `const Button = () => <button className="shr-p-4">Click me</button>` },
+    { code: `const Button = () => <button className="shr-pt-4">Click me</button>` },
+    { code: `const Button = () => <button className="shr-pb-4">Click me</button>` },
+    { code: `const Button = () => <button className="shr-pl-4">Click me</button>` },
+    { code: `const Button = () => <button className="shr-pr-4">Click me</button>` },
+    // リテラルでないクラス名
+    { code: `const Button = () => <button className={shr-mt-2}>Click me</button>` },
+    { code: `const Button = () => <button className={shr-pb-4}>Click me</button>` },
+  ],
+  invalid: [
+    // マージンクラスを持つコンポーネント
+    {
+      code: `const Button = () => { return <button className="shr-m-4">Click me</button> }`,
+      errors: [{ message: errorMessage }],
+    },
+    {
+      code: `const Button = () => <button className="shr-mt-4">Click me</button>`,
+      errors: [{ message: errorMessage }],
+    },
+    {
+      code: `const Button = () => { return <button className="shr-mb-4">Click me</button> }`,
+      errors: [{ message: errorMessage }],
+    },
+    {
+      code: `const Button = () => <button className="shr-ml-4">Click me</button>`,
+      errors: [{ message: errorMessage }],
+    },
+    {
+      code: `const Button = () => { return <button className="shr-mr-4">Click me</button> }`,
+      errors: [{ message: errorMessage }],
+    },
+    // 複数の余白クラスを持つコンポーネント
+    {
+      code: `
+        const Card = () => {
+          return (
+            <div className="shr-mt-4 shr-mb-2 shr-ml-2 shr-mr-2">
+              <p>Content</p>
+            </div>
+          )
+        }
+      `,
+      errors: [{ message: errorMessage }],
+    },
+    // 他のクラスと組み合わせた余白
+    {
+      code: `
+        const Box = () => (
+            <div className="shr-bg-gray-100 shr-ml-2">
+              <p>Content</p>
+            </div>
+        )
+      `,
+      errors: [{ message: errorMessage }],
+    },
+    // function 宣言によるコンポーネント
+    {
+      code: `
+        function Button() {
+          return <button className="shr-m-4">Click me</button>
+        }
+      `,
+      errors: [{ message: errorMessage }],
+    },
+  ],
+})

package/test/best-practice-for-tailwind-variants.js

@@ -14,6 +14,7 @@ const ruleTester = new RuleTester({
 ruleTester.run('best-practice-for-button-element', rule, {
   valid: [
     { code: `import { tv } from 'tailwind-variants'` },
+    { code: `import { defaultConfig } from 'tailwind-variants'` },
     { code: `const classNameGenerator = tv()` },
     { code: `const xxxClassNameGenerator = tv()` },
     { code: `const hoge = useMemo(() => classNameGenerator(), [])` },