eslint-plugin-smarthr 0.5.2 → 0.5.4

package/CHANGELOG.md

@@ -2,6 +2,27 @@
 
 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.
 
+### [0.5.4](https://github.com/kufu/eslint-plugin-smarthr/compare/v0.5.3...v0.5.4) (2024-03-29)
+
+
+### Features
+
+* a11y-heading-in-sectioning-contentで title, もしくはheading属性がSectioningContent系コンポーネントに設定されている場合、headingがあると判定するように修正 ([#129](https://github.com/kufu/eslint-plugin-smarthr/issues/129)) ([93bbd19](https://github.com/kufu/eslint-plugin-smarthr/commit/93bbd1907cd7f28510dde1ddc93a16d0c92a2c9b))
+
+### [0.5.3](https://github.com/kufu/eslint-plugin-smarthr/compare/v0.5.2...v0.5.3) (2024-03-26)
+
+
+### Features
+
+* a11y-heading-in-sectioning-contentでHeadingを持たないSectioning Contentを検知するように修正 ([#124](https://github.com/kufu/eslint-plugin-smarthr/issues/124)) ([8b96de0](https://github.com/kufu/eslint-plugin-smarthr/commit/8b96de0c9a474b0c8d72a4b9c3b3b351d2cfb4e5))
+* smarthr-ui/Layouts系コンポーネントの利用方法をチェックする best-practice-for-layouts ルールを追加する ([#126](https://github.com/kufu/eslint-plugin-smarthr/issues/126)) ([e0324e4](https://github.com/kufu/eslint-plugin-smarthr/commit/e0324e4ffab0413e61811cf7cf7f129c0602e0f0))
+
+
+### Bug Fixes
+
+* a11y-input-in-form-control で Clusterを拡張する際のチェックを追加 ([#125](https://github.com/kufu/eslint-plugin-smarthr/issues/125)) ([f723e24](https://github.com/kufu/eslint-plugin-smarthr/commit/f723e24db86c1095178bb1f28636147e7b619bf2))
+* a11y-numbered-text-within-olのチェックで、属性の値でstyleに数値を指定しているような値の場合、無視する ([#123](https://github.com/kufu/eslint-plugin-smarthr/issues/123)) ([77a6278](https://github.com/kufu/eslint-plugin-smarthr/commit/77a6278ff8ec58c99843746442e1f3c0e54574c5))
+
 ### [0.5.2](https://github.com/kufu/eslint-plugin-smarthr/compare/v0.5.1...v0.5.2) (2024-03-17)
 
 ### [0.5.1](https://github.com/kufu/eslint-plugin-smarthr/compare/v0.5.0...v0.5.1) (2024-03-17)

package/README.md

@@ -12,7 +12,9 @@
 - [a11y-prohibit-input-placeholder](https://github.com/kufu/eslint-plugin-smarthr/tree/main/rules/a11y-prohibit-input-placeholder)
 - [a11y-prohibit-useless-sectioning-fragment](https://github.com/kufu/eslint-plugin-smarthr/tree/main/rules/a11y-prohibit-useless-sectioning-fragment)
 - [a11y-trigger-has-button](https://github.com/kufu/eslint-plugin-smarthr/tree/main/rules/a11y-trigger-has-button)
+- [best-practice-for-button-element](https://github.com/kufu/eslint-plugin-smarthr/tree/main/rules/best-practice-for-button-element)
 - [best-practice-for-date](https://github.com/kufu/eslint-plugin-smarthr/tree/main/rules/best-practice-for-date)
+- [best-practice-for-layouts](https://github.com/kufu/eslint-plugin-smarthr/tree/main/rules/best-practice-for-layouts)
 - [best-practice-for-remote-trigger-dialog](https://github.com/kufu/eslint-plugin-smarthr/tree/main/rules/best-practice-for-remote-trigger-dialog)
 - [format-import-path](https://github.com/kufu/eslint-plugin-smarthr/tree/main/rules/format-import-path)
 - [format-translate-component](https://github.com/kufu/eslint-plugin-smarthr/tree/main/rules/format-translate-component)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eslint-plugin-smarthr",
-  "version": "0.5.2",
+  "version": "0.5.4",
   "author": "SmartHR",
   "license": "MIT",
   "description": "A sharable ESLint plugin for SmartHR",

package/rules/a11y-heading-in-sectioning-content/index.js

@@ -52,11 +52,13 @@ const bareTagRegex = /^(article|aside|nav|section)$/
 const modelessDialogRegex = /ModelessDialog$/
 const layoutComponentRegex = /((C(ent|lust)er)|Reel|Sidebar|Stack)$/
 const asRegex = /^(as|forwardedAs)$/
+const ignoreCheckParentTypeRegex = /^(Program|ExportNamedDeclaration)$/
+const noHeadingTagNamesRegex = /^(span|legend)$/
+const ignoreHeadingCheckParentTypeRegex = /^(Program|ExportNamedDeclaration)$/
+const headingAttributeRegex = /^(heading|title)$/
 
-const includeSectioningAsAttr = (a) => a.name?.name.match(asRegex) && a.value.value.match(bareTagRegex)
-
-const noHeadingTagNames = ['span', 'legend']
-const ignoreHeadingCheckParentType = ['Program', 'ExportNamedDeclaration']
+const includeSectioningAsAttr = (a) => a.name?.name.match(asRegex) && bareTagRegex.test(a.value.value)
+const findHeadingAttribute = (a) => headingAttributeRegex.test(a.name?.name || '')
 
 const headingMessage = `smarthr-ui/Headingと紐づく内容の範囲（アウトライン）が曖昧になっています。
  - smarthr-uiのArticle, Aside, Nav, SectionのいずれかでHeadingコンポーネントと内容をラップしてHeadingに対応する範囲を明確に指定してください。
@@ -102,8 +104,8 @@ const searchBubbleUp = (node) => {
   if (
     node.type === 'Program' ||
     node.type === 'JSXElement' && node.openingElement.name.name && (
-      node.openingElement.name.name.match(sectioningRegex) ||
-      node.openingElement.name.name.match(layoutComponentRegex) && node.openingElement.attributes.some(includeSectioningAsAttr)
+      sectioningRegex.test(node.openingElement.name.name) ||
+      layoutComponentRegex.test(node.openingElement.name.name) && node.openingElement.attributes.some(includeSectioningAsAttr)
     )
   ) {
     return node
@@ -111,16 +113,113 @@ const searchBubbleUp = (node) => {
 
   if (
     // Headingコンポーネントの拡張なので対象外
-    node.type === 'VariableDeclarator' && ignoreHeadingCheckParentType.includes(node.parent.parent?.type) && node.id.name.match(declaratorHeadingRegex) ||
-    node.type === 'FunctionDeclaration' && ignoreHeadingCheckParentType.includes(node.parent.type) && node.id.name.match(declaratorHeadingRegex) ||
+    node.type === 'VariableDeclarator' && node.parent.parent?.type.match(ignoreHeadingCheckParentTypeRegex) && declaratorHeadingRegex.test(node.id.name) ||
+    node.type === 'FunctionDeclaration' && ignoreHeadingCheckParentTypeRegex.test(node.parent.type) && declaratorHeadingRegex.test(node.id.name) ||
     // ModelessDialogのheaderにHeadingを設定している場合も対象外
-    node.type === 'JSXAttribute' && node.name.name === 'header' && node.parent.name.name.match(modelessDialogRegex)
+    node.type === 'JSXAttribute' && node.name.name === 'header' && modelessDialogRegex.test(node.parent.name.name)
   ) {
     return null
   }
 
   return searchBubbleUp(node.parent)
 }
+const searchBubbleUpSections = (node) => {
+  switch (node.type) {
+    case 'Program':
+      // rootまで検索した場合は確定でエラーにする
+      return null
+    case 'VariableDeclarator':
+      // SectioningContent系コンポーネントの拡張の場合は対象外
+      if (ignoreCheckParentTypeRegex.test(node.parent.parent?.type) && sectioningRegex.test(node.id.name)) {
+        return node
+      }
+
+      break
+    case 'FunctionDeclaration':
+    case 'ClassDeclaration':
+      // SectioningContent系コンポーネントの拡張の場合は対象外
+      if (ignoreCheckParentTypeRegex.test(node.parent.type) && sectioningRegex.test(node.id.name)) {
+        return node
+      }
+
+      break
+  }
+
+  return searchBubbleUpSections(node.parent)
+}
+const searchChildren = (n) => {
+  switch (n.type) {
+    case 'BinaryExpression':
+    case 'Identifier':
+    case 'JSXEmptyExpression':
+    case 'JSXText':
+    case 'Literal':
+    case 'VariableDeclaration':
+      // これ以上childrenが存在しないため終了
+      return false
+    case 'JSXAttribute':
+      return n.value ? searchChildren(n.value) : false
+    case 'LogicalExpression':
+      return searchChildren(n.right)
+    case 'ArrowFunctionExpression':
+      return searchChildren(n.body)
+    case 'MemberExpression':
+      return searchChildren(n.property)
+    case 'ReturnStatement':
+    case 'UnaryExpression':
+      return searchChildren(n.argument)
+    case 'ChainExpression':
+    case 'JSXExpressionContainer':
+      return searchChildren(n.expression)
+    case 'BlockStatement': {
+      return forInSearchChildren(n.body)
+    }
+    case 'ConditionalExpression': {
+      return searchChildren(n.consequent) || searchChildren(n.alternate)
+    }
+    case 'CallExpression': {
+      return forInSearchChildren(n.arguments)
+    }
+    case 'JSXFragment':
+      break
+    case 'JSXElement': {
+      const name = n.openingElement.name.name || ''
+
+      if (
+        sectioningRegex.test(name) ||
+        layoutComponentRegex.test(name) && n.openingElement.attributes.some(includeSectioningAsAttr)
+      ) {
+        return false
+      } else if (
+        (
+          headingRegex.test(name) &&
+          !n.openingElement.attributes.find(findTagAttr)?.value.value.match(noHeadingTagNamesRegex)
+        ) ||
+        forInSearchChildren(n.openingElement.attributes)
+      ) {
+        return true
+      }
+
+      break
+    }
+  }
+
+  return n.children ? forInSearchChildren(n.children) : false
+}
+
+const forInSearchChildren = (ary) => {
+  let r = false
+
+  for (const i in ary) {
+    r = searchChildren(ary[i])
+
+    if (r) {
+      break
+    }
+  }
+
+  return r
+}
 
 const findTagAttr = (a) => a.name?.name == 'tag'
 
@@ -151,15 +250,15 @@ module.exports = {
             message,
           })
         // Headingに明示的にtag属性が設定されており、それらが span or legend の場合はHeading扱いしない
-        } else if (elementName.match(headingRegex)) {
+        } else if (headingRegex.test(elementName)) {
           const tagAttr = node.attributes.find(findTagAttr)
 
-          if (!noHeadingTagNames.includes(tagAttr?.value.value)) {
+          if (!tagAttr?.value.value.match(noHeadingTagNamesRegex)) {
             const result = searchBubbleUp(node.parent)
             let hit = false
 
             if (result) {
-              if (elementName.match(pageHeadingRegex)) {
+              if (pageHeadingRegex.test(elementName)) {
                 h1s.push(node)
 
                 if (h1s.length > 1) {
@@ -181,7 +280,7 @@ module.exports = {
                   node,
                   message: rootHeadingMessage,
                 })
-              } else if (sections.find((s) => s === result)) {
+              } else if (sections.includes(result)) {
                 hit = true
                 context.report({
                   node,
@@ -199,6 +298,26 @@ module.exports = {
               })
             }
           }
+        } else if (!node.selfClosing) {
+          const isSection = sectioningRegex.test(elementName)
+
+          // HINT: SectioningContent系コンポーネントの拡張の場合、title, heading属性などにHeadingのテキストが仕込まれている場合がある
+          // 対象属性を持っている場合はcorrectとして扱う
+          if (isSection && node.attributes.some(findHeadingAttribute)) {
+            return
+          }
+
+          const layoutSectionAsAttr = !isSection && layoutComponentRegex.test(elementName) ? node.attributes.find(includeSectioningAsAttr) : null
+
+          if ((isSection || layoutSectionAsAttr) && !searchBubbleUpSections(node.parent.parent) && !forInSearchChildren(node.parent.children)) {
+            context.report({
+              node,
+              message: `${isSection ? elementName : `<${elementName} ${layoutSectionAsAttr.name.name}="${layoutSectionAsAttr.value.value}">`} はHeading要素を含んでいません。
+ - SectioningContentはHeadingを含むようにマークアップする必要があります
+ - ${elementName}に設定しているいずれかの属性がHeading，もしくはHeadingのテキストに該当する場合、その属性の名称を ${headingAttributeRegex.toString()} にマッチする名称に変更してください
+ - Headingにするべき適切な文字列が存在しない場合、 ${isSection ? `${elementName} は削除するか、SectioningContentではない要素に差し替えてください` : `${layoutSectionAsAttr.name.name}="${layoutSectionAsAttr.value.value}"を削除、もしくは別の要素に変更してください`}`,
+            })
+          }
         }
       },
     }

package/rules/a11y-input-in-form-control/index.js

@@ -32,6 +32,7 @@ const EXPECTED_NAMES = {
   '(A|^a)side$': '(Aside)$',
   '(N|^n)av$': '(Nav)$',
   '(S|^s)ection$': '(Section)$',
+  'Cluster$': '(Cluster)$',
   'Center$': '(Center)$',
   'Reel$': '(Reel)$',
   'Sidebar$': '(Sidebar)$',

package/rules/a11y-numbered-text-within-ol/index.js

@@ -9,7 +9,7 @@ const UNEXPECTED_NAMES = EXPECTED_NAMES
 const NUMBERED_TEXT_REGEX = /^[\s\n]*(([0-9])([^0-9]{2})[^\s\n]*)/
 const ORDERED_LIST_REGEX = /(Ordered(.*)List|^ol)$/
 const SELECT_REGEX = /(S|s)elect$/
-const IGNORE_ATTRIBUTE_REGEX = /((w|W)idth|(h|H)eight)$/
+const IGNORE_ATTRIBUTE_VALUE_REGEX = /^[0-9]+(px|em|ex|ch|rem|lh|rlh|vw|vh|vmin|vmax|vb|vi|svw|svh|lvw|lvh|dvw|dvh|%)?$/
 const AS_ATTRIBUTE_REGEX = /^(as|forwardedAs)$/
 
 const findAsOlAttr = (a) => a.type === 'JSXAttribute' && AS_ATTRIBUTE_REGEX.test(a.name?.name) && a.value?.value === 'ol'
@@ -128,7 +128,7 @@ module.exports = {
     return {
       ...generateTagFormatter({ context, EXPECTED_NAMES, UNEXPECTED_NAMES }),
       JSXAttribute: (node) => {
-        if (node.value?.value && !IGNORE_ATTRIBUTE_REGEX.test(node.name?.name)) {
+        if (node.value?.value && !IGNORE_ATTRIBUTE_VALUE_REGEX.test(node.value.value)) {
           checker(node, node.value.value.match(NUMBERED_TEXT_REGEX))
         }
       },

package/rules/best-practice-for-layouts/README.md

@@ -0,0 +1,53 @@
+# smarthr/best-practice-for-layouts
+
+- smarthr-ui/Layoutsに属するコンポーネントの利用方法をチェックするルールです
+
+## rules
+
+```js
+{
+  rules: {
+    'smarthr/best-practice-for-layouts': 'error', // 'warn', 'off',
+  },
+}
+```
+
+## ❌ Incorrect
+
+```jsx
+// 子が複数無いためエラー
+<Cluster>
+  <Any />
+</Cluster>
+<StyledStack>
+  {flg ? 'a' : 'b'}
+</StyledStack>
+```
+
+## ✅ Correct
+
+```jsx
+// 子が複数あるのでOK
+<Cluster>
+  <Any />
+  <Any />
+</Cluster>
+
+<StyledStack>
+  {flg ? 'a' : (
+    <>
+      <Any />
+      <Any />
+    </>
+  )}
+</StyledStack>
+
+// Cluster、かつ右寄せをしている場合は子一つでもOK
+<Cluster justify="end">
+  <Any />
+</Cluster>
+<Cluster justify="flex-end">
+  <Any />
+  <Any />
+</Cluster>
+```

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

@@ -0,0 +1,100 @@
+const { generateTagFormatter } = require('../../libs/format_styled_components')
+
+const MULTI_CHILDREN_EXPECTED_NAMES = {
+  'Cluster$': '(Cluster)$',
+  'Stack$': '(Stack)$',
+}
+const EXPECTED_NAMES = {
+  ...MULTI_CHILDREN_EXPECTED_NAMES,
+  'Center$': '(Center)$',
+
+}
+
+const UNEXPECTED_NAMES = EXPECTED_NAMES
+
+const MULTI_CHILDREN_REGEX = new RegExp(`(${Object.keys(MULTI_CHILDREN_EXPECTED_NAMES).join('|')})`)
+const REGEX_NLSP = /^\s*\n+\s*$/
+const FLEX_END_REGEX = /^(flex-)?end$/
+
+const filterFalsyJSXText = (cs) => cs.filter(checkFalsyJSXText)
+const checkFalsyJSXText = (c) => (
+  !(
+    c.type === 'JSXText' && c.value.match(REGEX_NLSP) ||
+    c.type === 'JSXEmptyExpression'
+  )
+)
+
+const findJustifyAttr = (a) => a.name?.name === 'justify'
+
+const searchChildren = (node) => {
+  if (
+    node.type === 'JSXFragment' ||
+    node.type === 'JSXElement' && node.openingElement.name?.name === 'SectioningFragment'
+  ) {
+    const children = node.children.filter(checkFalsyJSXText)
+
+    if (children.length > 1) {
+      return false
+    }
+  }
+
+  switch(node.type) {
+    case 'JSXExpressionContainer':
+      return searchChildren(node.expression)
+    case 'CallExpression':
+      return node.callee.property?.name !== 'map'
+    case 'ConditionalExpression':
+      return searchChildren(node.consequent) && searchChildren(node.alternate)
+    case 'LogicalExpression':
+      return searchChildren(node.right)
+  }
+
+  return true
+}
+
+const SCHEMA = []
+
+module.exports = {
+  meta: {
+    type: 'problem',
+    schema: SCHEMA,
+  },
+  create(context) {
+    return {
+      ...generateTagFormatter({ context, EXPECTED_NAMES, UNEXPECTED_NAMES }),
+      JSXOpeningElement: (node) => {
+        const nodeName = node.name.name;
+
+        if (nodeName && !node.selfClosing) {
+          const matcher = nodeName.match(MULTI_CHILDREN_REGEX)
+
+          if (matcher) {
+            const children = node.parent.children.filter(checkFalsyJSXText)
+
+            if (children.length === 1) {
+              const layoutType = matcher[1]
+              const justifyAttr = layoutType === 'Cluster' ? node.attributes.find(findJustifyAttr) : null
+
+              if (justifyAttr && FLEX_END_REGEX.test(justifyAttr.value.value)) {
+                return
+              }
+
+              if (searchChildren(children[0])) {
+                context.report({
+                  node,
+                  message:
+                    justifyAttr && justifyAttr.value.value === 'center'
+                      ? `${nodeName} は smarthr-ui/${layoutType} ではなく smarthr-ui/Center でマークアップしてください`
+                      : `${nodeName}には子要素が一つしか無いため、${layoutType}でマークアップする意味がありません。
+ - styleを確認し、div・spanなど、別要素でマークアップし直すか、${nodeName}を削除してください
+ - as, forwardedAsなどでSectioningContent系要素に変更している場合、対応するsmarthr-ui/Section, Aside, Nav, Article のいずれかに差し替えてください`
+                })
+              }
+            }
+          }
+        }
+      },
+    }
+  },
+}
+module.exports.schema = SCHEMA

package/test/a11y-heading-in-sectioning-content.js

@@ -22,6 +22,10 @@ const pageMessage = 'smarthr-ui/PageHeading が同一ファイル内に複数存
 const pageInSectionMessage = 'smarthr-ui/PageHeadingはsmarthr-uiのArticle, Aside, Nav, Sectionで囲まないでください。囲んでしまうとページ全体の見出しではなくなってしまいます。'
 const noTagAttrMessage = `tag属性を指定せず、smarthr-uiのArticle, Aside, Nav, Section, SectioningFragmentのいずれかの自動レベル計算に任せるよう、tag属性を削除してください。
  - tag属性を指定することで意図しないレベルに固定されてしまう可能性があります。`
+const notHaveHeadingMessage = (elementName) => `${elementName} はHeading要素を含んでいません。
+ - SectioningContentはHeadingを含むようにマークアップする必要があります
+ - ${elementName}に設定しているいずれかの属性がHeading，もしくはHeadingのテキストに該当する場合、その属性の名称を /^(heading|title)$/ にマッチする名称に変更してください
+ - Headingにするべき適切な文字列が存在しない場合、 ${elementName} は削除するか、SectioningContentではない要素に差し替えてください`
 
 ruleTester.run('a11y-heading-in-sectioning-content', rule, {
   valid: [
@@ -52,6 +56,9 @@ ruleTester.run('a11y-heading-in-sectioning-content', rule, {
     { code: 'const FugaStack = styled(HogeStack)``' },
     { code: '<PageHeading>hoge</PageHeading>' },
     { code: '<Section><Heading>hoge</Heading></Section>' },
+    { code: '<FugaSection heading={<Heading>hoge</Heading>}>abc</FugaSection>' },
+    { code: '<FugaSection heading="hoge">abc</FugaSection>' },
+    { code: '<FugaSection title="hoge">abc</FugaSection>' },
     { code: '<><Section><Heading>hoge</Heading></Section><Section><Heading>fuga</Heading></Section></>' },
     { code: 'const HogeHeading = () => <FugaHeading anyArg={abc}>hoge</FugaHeading>' },
     { code: 'export const HogeHeading = () => <FugaHeading anyArg={abc}>hoge</FugaHeading>' },
@@ -137,5 +144,8 @@ ruleTester.run('a11y-heading-in-sectioning-content', rule, {
     { code: '<Section><Heading>hoge</Heading><Heading>fuga</Heading></Section>', errors: [ { message: lowerMessage } ] },
     { code: '<Section><PageHeading>hoge</PageHeading></Section>', errors: [ { message: pageInSectionMessage } ] },
     { code: '<Section><Heading tag="h2">hoge</Heading></Section>', errors: [ { message: noTagAttrMessage } ] },
+    { code: '<Section></Section>', errors: [ { message: notHaveHeadingMessage('Section') } ] },
+    { code: '<Aside><HogeSection></HogeSection></Aside>', errors: [ { message: notHaveHeadingMessage('Aside') }, { message: notHaveHeadingMessage('HogeSection') } ] },
+    { code: '<Aside any="hoge"><HogeSection><Heading /></HogeSection></Aside>', errors: [ { message: notHaveHeadingMessage('Aside') } ] },
   ],
 });

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

@@ -0,0 +1,84 @@
+const rule = require('../rules/best-practice-for-layouts')
+const RuleTester = require('eslint').RuleTester
+
+const ruleTester = new RuleTester({
+  parserOptions: {
+    ecmaVersion: 2018,
+    ecmaFeatures: {
+      experimentalObjectRestSpread: true,
+      jsx: true,
+    },
+    sourceType: 'module',
+  },
+})
+
+const errorMessage = (type, name) => `${name}には子要素が一つしか無いため、${type}でマークアップする意味がありません。
+ - styleを確認し、div・spanなど、別要素でマークアップし直すか、${name}を削除してください
+ - as, forwardedAsなどでSectioningContent系要素に変更している場合、対応するsmarthr-ui/Section, Aside, Nav, Article のいずれかに差し替えてください`
+
+ruleTester.run('best-practice-for-button-element', rule, {
+  valid: [
+    { code: `<Center />` },
+    { code: `<Cluster />` },
+    { code: `<Stack />` },
+    { code: `<HogeCenter />` },
+    { code: `<HogeCluster />` },
+    { code: `<HogeStack />` },
+    { code: `<Center><Hoge /></Center>` },
+    { code: `<Center><Hoge /><Hoge /></Center>` },
+    { code: `<Stack><Hoge /><Hoge /></Stack>` },
+    { code: `<Stack>{a}<Hoge /></Stack>` },
+    { code: `<AnyStack>{a.map(action)}</AnyStack>` },
+    { code: `<AnyStack>{a && <><Hoge /><Hoge /></>}</AnyStack>` },
+    { code: `<AnyStack>{a && a.map(action)}</AnyStack>` },
+    { code: `<AnyStack>{a && a.b.map(action)}</AnyStack>` },
+    { code: `<AnyStack>{a || <><Hoge /><Hoge /></>}</AnyStack>` },
+    { code: `<AnyStack>{a || a.map(action)}</AnyStack>` },
+    { code: `<AnyStack>{a || a.b.map(action)}</AnyStack>` },
+    { code: `<AnyStack>{a ? a.b.map(action) : <Hoge />}</AnyStack>` },
+    { code: `<AnyStack>{a ? <Hoge /> : a.b.map(action)}</AnyStack>` },
+    { code: `<AnyStack>{a ? <Hoge /> : a ? <Hoge /> : a.b.map(action)}</AnyStack>` },
+    { code: `<Cluster><Hoge /><Hoge /></Cluster>` },
+    { code: `<Cluster>{a}<Hoge /></Cluster>` },
+    { code: `<AnyCluster>{a.map(action)}</AnyCluster>` },
+    { code: `<AnyCluster>{a && <><Hoge /><Hoge /></>}</AnyCluster>` },
+    { code: `<AnyCluster>{a && a.map(action)}</AnyCluster>` },
+    { code: `<AnyCluster>{a && a.b.map(action)}</AnyCluster>` },
+    { code: `<AnyCluster>{a || <><Hoge /><Hoge /></>}</AnyCluster>` },
+    { code: `<AnyCluster>{a || a.map(action)}</AnyCluster>` },
+    { code: `<AnyCluster>{a || a.b.map(action)}</AnyCluster>` },
+    { code: `<AnyCluster>{a ? a.b.map(action) : <Hoge />}</AnyCluster>` },
+    { code: `<AnyCluster>{a ? <Hoge /> : a.b.map(action)}</AnyCluster>` },
+    { code: `<AnyCluster>{a ? <Hoge /> : a ? <Hoge /> : a.b.map(action)}</AnyCluster>` },
+    { code: `<Cluster justify="flex-end">{a}</Cluster>` },
+    { code: `<HogeCluster justify="end">{a}</HogeCluster>` },
+  ],
+  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') } ] },
+    { code: `<AnyStack>{a && a.b.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') } ] },
+    { code: `<AnyStack>{a || a.b.hoge(action)}</AnyStack>`, errors: [ { message: errorMessage('Stack', 'AnyStack') } ] },
+    { code: `<AnyStack>{a ? a.b.hoge(action) : <Hoge />}</AnyStack>`, errors: [ { message: errorMessage('Stack', 'AnyStack') } ] },
+    { 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') } ] },
+    { code: `<AnyCluster>{a && a.b.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') } ] },
+    { code: `<AnyCluster>{a || a.b.hoge(action)}</AnyCluster>`, errors: [ { message: errorMessage('Cluster', 'AnyCluster') } ] },
+    { 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 でマークアップしてください' } ] },
+  ]
+})
+