eslint-plugin-smarthr 1.4.2 → 1.5.0

package/test/a11y-input-in-form-control.js

@@ -12,14 +12,14 @@ const ruleTester = new RuleTester({
 })
 const noLabeledInput = (name) => `${name} を、smarthr-ui/FormControl もしくはそれを拡張したコンポーネントが囲むようマークアップを変更してください。
  - FormControlで入力要素を囲むことでラベルと入力要素が適切に紐づき、操作性が高まります
- - ${name}が入力要素とラベル・タイトル・説明など含む概念を表示するコンポーネントの場合、コンポーネント名を/((FormGroup)$|(FormControl)$|((F|^f)ieldset)$)/とマッチするように修正してください
- - ${name}が入力要素自体を表現するコンポーネントの一部である場合、ルートとなるコンポーネントの名称を/((I|^i)nput$|SearchInput$|(T|^t)extarea$|(S|^s)elect$|InputFile$|Combo(b|B)ox$|(Date|Wareki)Picker$|TimePicker$|RadioButton$|RadioButtons$|RadioButtonPanel$|RadioButtonPanels$|Check(b|B)ox$|Check(b|B)ox(e)?s$)/とマッチするように修正してください
+ - ${name}が入力要素とラベル・タイトル・説明など含む概念を表示するコンポーネントの場合、コンポーネント名を/(Form(Control|Group)|(F|^f)ieldset)$/とマッチするように修正してください
+ - ${name}が入力要素自体を表現するコンポーネントの一部である場合、ルートとなるコンポーネントの名称を/(RadioButton(Panel)?(s)?|Check(B|b)ox(es|s)?|(Search)?(I|^i)nput(File)?|(T|^t)extarea|(S|^s)elect|Combo(B|b)ox|(Date|Wareki|Time)Picker)$/とマッチするように修正してください
  - 上記のいずれの方法も適切ではない場合、${name}のtitle属性に "どんな値を入力すれば良いのか" の説明を設定してください
    - 例: <${name} title="姓を全角カタカナのみで入力してください" />`
 const noLabeledSelect = (name) => `${name} を、smarthr-ui/FormControl もしくはそれを拡張したコンポーネントが囲むようマークアップを変更してください。
  - FormControlで入力要素を囲むことでラベルと入力要素が適切に紐づき、操作性が高まります
- - ${name}が入力要素とラベル・タイトル・説明など含む概念を表示するコンポーネントの場合、コンポーネント名を/((FormGroup)$|(FormControl)$|((F|^f)ieldset)$)/とマッチするように修正してください
- - ${name}が入力要素自体を表現するコンポーネントの一部である場合、ルートとなるコンポーネントの名称を/((I|^i)nput$|SearchInput$|(T|^t)extarea$|(S|^s)elect$|InputFile$|Combo(b|B)ox$|(Date|Wareki)Picker$|TimePicker$|RadioButton$|RadioButtons$|RadioButtonPanel$|RadioButtonPanels$|Check(b|B)ox$|Check(b|B)ox(e)?s$)/とマッチするように修正してください
+ - ${name}が入力要素とラベル・タイトル・説明など含む概念を表示するコンポーネントの場合、コンポーネント名を/(Form(Control|Group)|(F|^f)ieldset)$/とマッチするように修正してください
+ - ${name}が入力要素自体を表現するコンポーネントの一部である場合、ルートとなるコンポーネントの名称を/(RadioButton(Panel)?(s)?|Check(B|b)ox(es|s)?|(Search)?(I|^i)nput(File)?|(T|^t)extarea|(S|^s)elect|Combo(B|b)ox|(Date|Wareki|Time)Picker)$/とマッチするように修正してください
  - 上記のいずれの方法も適切ではない場合、${name}のtitle属性に "どんな値を選択すれば良いのか" の説明を設定してください
    - 例: <${name} title="検索対象を選択してください" />`
 const invalidPureCheckboxInFormControl = (name) => `HogeFormControl が ${name} を含んでいます。smarthr-ui/FormControl を smarthr-ui/Fieldset に変更し、正しくグルーピングされるように修正してください。
@@ -34,13 +34,13 @@ const invalidMultiInputsInFormControl = () => `HogeFormControl が複数の入
  - 方法1: 入力要素ごとにラベルを設定できる場合、HogeFormControlをsmarthr-ui/Fieldset、もしくはそれを拡張したコンポーネントに変更した上で、入力要素を一つずつsmarthr-ui/FormControlで囲むようにマークアップを変更してください
  - 方法2: 郵便番号や電話番号など、本来一つの概念の入力要素を分割して複数の入力要素にしている場合、一つの入力要素にまとめることを検討してください
    - コピーアンドペーストがしやすくなる、ブラウザの自動補完などがより適切に反映されるなど多大なメリットがあります
- - 方法3: HogeFormControl が smarthr-ui/FormControl、もしくはそれを拡張しているコンポーネントではない場合、名称を /((FormGroup)$|(FormControl)$|((F|^f)ieldset)$)/ にマッチしないものに変更してください
+ - 方法3: HogeFormControl が smarthr-ui/FormControl、もしくはそれを拡張しているコンポーネントではない場合、名称を /(Form(Control|Group)|(F|^f)ieldset)$/ にマッチしないものに変更してください
  - 方法4: 上記方法のいずれも対応出来ない場合、HogeFormControl に 'role="group"' 属性を設定してください`
 const noLabeledInputInFieldset = (name) => `HogeFieldset が ラベルを持たない入力要素(${name})を含んでいます。入力要素が何であるかを正しく伝えるため、以下の方法のいずれかで修正してください。
  - 方法1: HogeFieldset を smarthr-ui/FormControl、もしくはそれを拡張したコンポーネントに変更してください
  - 方法2: ${name} がlabel要素を含むコンポーネントである場合、名称を/(Form(Control|Group))$/にマッチするものに変更してください
    - smarthr-ui/FormControl、smarthr-ui/FormGroup はlabel要素を内包しています
- - 方法3: ${name} がRadioButton、もしくはCheckboxを表すコンポーネントの場合、名称を/(RadioButton$|RadioButtons$|RadioButtonPanel$|RadioButtonPanels$|Check(b|B)ox$|Check(b|B)ox(e)?s$)/にマッチするものに変更してください
+ - 方法3: ${name} がRadioButton、もしくはCheckboxを表すコンポーネントの場合、名称を/(RadioButton(Panel)?(s)?|Check(B|b)ox(es|s)?)$/にマッチするものに変更してください
    - smarthr-ui/RadioButton、smarthr-ui/RadioButtonPanel、smarthr-ui/Checkbox はlabel要素を内包しています
  - 方法4: HogeFieldset が smarthr-ui/Fieldset、もしくはそれを拡張しているコンポーネントではない場合、名称を /Fieldset$/ にマッチしないものに変更してください
  - 方法5: 別途label要素が存在し、それらと紐づけたい場合はlabel要素のhtmlFor属性、${name}のid属性に同じ文字列を指定してください。この文字列はhtml内で一意である必要があります
@@ -50,7 +50,7 @@ const noLabeledInputInFieldsetWithSelect = (name) => `HogeFieldset が ラベル
  - 方法1: HogeFieldset を smarthr-ui/FormControl、もしくはそれを拡張したコンポーネントに変更してください
  - 方法2: ${name} がlabel要素を含むコンポーネントである場合、名称を/(Form(Control|Group))$/にマッチするものに変更してください
    - smarthr-ui/FormControl、smarthr-ui/FormGroup はlabel要素を内包しています
- - 方法3: ${name} がRadioButton、もしくはCheckboxを表すコンポーネントの場合、名称を/(RadioButton$|RadioButtons$|RadioButtonPanel$|RadioButtonPanels$|Check(b|B)ox$|Check(b|B)ox(e)?s$)/にマッチするものに変更してください
+ - 方法3: ${name} がRadioButton、もしくはCheckboxを表すコンポーネントの場合、名称を/(RadioButton(Panel)?(s)?|Check(B|b)ox(es|s)?)$/にマッチするものに変更してください
    - smarthr-ui/RadioButton、smarthr-ui/RadioButtonPanel、smarthr-ui/Checkbox はlabel要素を内包しています
  - 方法4: HogeFieldset が smarthr-ui/Fieldset、もしくはそれを拡張しているコンポーネントではない場合、名称を /Fieldset$/ にマッチしないものに変更してください
  - 方法5: 別途label要素が存在し、それらと紐づけたい場合はlabel要素のhtmlFor属性、${name}のid属性に同じ文字列を指定してください。この文字列はhtml内で一意である必要があります
@@ -68,29 +68,16 @@ const useFormControlInsteadOfSectionInRadio = (name, section) => `${name}は${se
    - ${section} 内のHeading要素はFieldsetのtitle属性に変更してください
  - 方法2: ${section} と ${name} の間に Fieldset が存在するようにマークアップを変更してください`
 const invalidFieldsetHasRoleGroup = (fieldset, base) => `${fieldset}に 'role="group" が設定されています。${base} をつかってマークアップする場合、'role="group"' は不要です
- - ${fieldset} が ${base}、もしくはそれを拡張しているコンポーネントではない場合、名称を /((FormGroup)$|(FormControl)$|((F|^f)ieldset)$)/ にマッチしないものに変更してください`
+ - ${fieldset} が ${base}、もしくはそれを拡張しているコンポーネントではない場合、名称を /(Form(Control|Group)|(F|^f)ieldset)$/ にマッチしないものに変更してください`
 const invalidChildreninFormControl = (children) => `FormControl が、${children} を子要素として持っており、マークアップとして正しくない状態になっています。以下のいずれかの方法で修正を試みてください。
  - 方法1: 親要素であるFormControlをsmarthr-ui/FormControl、もしくはそれを拡張していないコンポーネントでマークアップしてください
    - FormControlではなく、smarthr-ui/Fieldset、もしくはsmarthr-ui/Section + smarthr-ui/Heading などでのマークアップを検討してください
  - 方法2: 親要素であるFormControlがsmarthr-ui/FormControlを拡張したコンポーネントではない場合、コンポーネント名を/(Form(Control|Group))$/と一致しない名称に変更してください`
 const requireMultiInputInFormControlWithRoleGroup = () => `HogeFormControl内に入力要素が2個以上存在しないため、'role=\"group\"'を削除してください。'role=\"group\"'は複数の入力要素を一つのグループとして扱うための属性です。
- - HogeFormControl内に2つ以上の入力要素が存在する場合、入力要素を含むコンポーネント名全てを/((I|^i)nput$|SearchInput$|(T|^t)extarea$|(S|^s)elect$|InputFile$|Combo(b|B)ox$|(Date|Wareki)Picker$|TimePicker$|RadioButton$|RadioButtons$|RadioButtonPanel$|RadioButtonPanels$|Check(b|B)ox$|Check(b|B)ox(e)?s$)/、もしくは/((FormGroup)$|(FormControl)$|((F|^f)ieldset)$)/にマッチする名称に変更してください`
+ - HogeFormControl内に2つ以上の入力要素が存在する場合、入力要素を含むコンポーネント名全てを/(RadioButton(Panel)?(s)?|Check(B|b)ox(es|s)?|(Search)?(I|^i)nput(File)?|(T|^t)extarea|(S|^s)elect|Combo(B|b)ox|(Date|Wareki|Time)Picker)$/、もしくは/(Form(Control|Group)|(F|^f)ieldset)$/にマッチする名称に変更してください`
 
 ruleTester.run('a11y-input-in-form-control', rule, {
   valid: [
-    { code: `import styled from 'styled-components'` },
-    { code: `import styled, { css } from 'styled-components'` },
-    { code: `import { css } from 'styled-components'` },
-    { code: `import { HogeAInput as FugaInput } from './hoge'` },
-    { code: `import { Textarea as HogeTextarea } from './hoge'` },
-    { code: 'const HogeInput = styled.input``' },
-    { code: 'const HogeTextarea = styled.textarea``' },
-    { code: 'const HogeSelect = styled(Select)``' },
-    { code: 'const HogeRadioButton = styled(FugaRadioButton)``' },
-    { code: 'const HogeRadioButtonPanel = styled(FugaRadioButtonPanel)``' },
-    { code: 'const HogeCheckbox = styled(FugaCheckBox)``' },
-    { code: 'const DatePicker = styled(AnyDatePicker)``' },
-    { code: 'const WarekiPicker = styled(AnyWarekiPicker)``' },
     { code: '<input type="hidden" />' },
     { code: '<input title="any"/>' },
     { code: '<HogeInput title="any"/>' },
@@ -139,17 +126,6 @@ ruleTester.run('a11y-input-in-form-control', rule, {
     { code: '<HogeFormControl>{ dateInput ? <DateInput /> : <Input /> }</HogeFormControl>'},
   ],
   invalid: [
-    { code: `import hoge from 'styled-components'`, errors: [ { message: `styled-components をimportする際は、名称が"styled" となるようにしてください。例: "import styled from 'styled-components'"` } ] },
-    { code: `import { ComboBox as ComboBoxHoge } from './hoge'`, errors: [ { message: `ComboBoxHogeを正規表現 "/(Combobox)$/" がmatchする名称に変更してください。
- - ComboBoxが型の場合、'import type { ComboBox as ComboBoxHoge }' もしくは 'import { type ComboBox as ComboBoxHoge }' のように明示的に型であることを宣言してください。名称変更が不要になります` } ] },
-    { code: 'const RadioButton = styled(FugaRadioButtonPanel)``', errors: [
-      { message: `RadioButtonを正規表現 "/(RadioButtonPanel)$/" がmatchする名称に変更してください。` },
-      { message: `RadioButton は /RadioButton$/ にmatchする名前のコンポーネントを拡張することを期待している名称になっています
- - RadioButton の名称の末尾が"RadioButton" という文字列ではない状態にしつつ、"FugaRadioButtonPanel"を継承していることをわかる名称に変更してください
- - もしくは"FugaRadioButtonPanel"を"RadioButton"の継承元であることがわかるような名称に変更するか、適切な別コンポーネントに差し替えてください
-   - 修正例1: const Xxxx = styled(FugaRadioButtonPanel)
-   - 修正例2: const RadioButtonXxxx = styled(FugaRadioButtonPanel)
-   - 修正例3: const RadioButton = styled(XxxxRadioButton)` } ] },
     { code: `<input />`, errors: [ { message: noLabeledInput('input') } ] },
     { code: `<HogeInput />`, errors: [ { message: noLabeledInput('HogeInput') } ] },
     { code: '<textarea />', errors: [ { message: noLabeledInput('textarea') } ] },

package/test/a11y-prohhibit-input-placeholder.js

@@ -12,24 +12,6 @@ const ruleTester = new RuleTester({
 })
 ruleTester.run('a11y-prohibit-input-placeholder', rule, {
   valid: [
-    { code: `import styled from 'styled-components'` },
-    { code: `import styled, { css } from 'styled-components'` },
-    { code: `import { css } from 'styled-components'` },
-    { code: `import { Input as HogeInput } from './hoge'` },
-    { code: `import { HogeSearchInput as FugaSearchInput } from './hoge'` },
-    { code: `import { HogeTextarea as FugaHogeTextarea } from './hoge'` },
-    { code: `import { Combobox as FugaHogeCombobox } from './hoge'` },
-    { code: `import { AbcDatePicker as StyledDatePicker } from './hoge'` },
-    { code: `import { AbcWarekiPicker as StyledWarekiPicker } from './hoge'` },
-    { code: 'const HogeInput = styled.input``' },
-    { code: 'const HogeTextarea = styled.textarea``' },
-    { code: 'const HogeInput = styled(Input)``' },
-    { code: 'const HogeInput = styled(StyledInput)``' },
-    { code: 'const HogeTextarea = styled(Textarea)``' },
-    { code: 'const hoge = styled.fieldset``' },
-    { code: 'const HogeFieldSet = styled(FieldSet)``' },
-    { code: 'const HogeCombobox = styled(ComboBox)``' },
-    { code: 'const HogeSearchInput = styled(SearchInput)``' },
     { code: `<input />` },
     { code: `<textarea />` },
     { code: `<FieldSet />` },
@@ -49,33 +31,6 @@ ruleTester.run('a11y-prohibit-input-placeholder', rule, {
     { code: `<ComboBox placeholder="hoge" dropdownHelpMessage="fuga" />` },
   ],
   invalid: [
-    { code: `import hoge from 'styled-components'`, errors: [ { message: `styled-components をimportする際は、名称が"styled" となるようにしてください。例: "import styled from 'styled-components'"` } ] },
-    { code: `import { Input as InputHoge } from './hoge'`, errors: [ { message: `InputHogeを正規表現 "/Input$/" がmatchする名称に変更してください。
- - Inputが型の場合、'import type { Input as InputHoge }' もしくは 'import { type Input as InputHoge }' のように明示的に型であることを宣言してください。名称変更が不要になります` } ] },
-    { code: `import { SearchInput as Hoge } from './hoge'`, errors: [ { message: `Hogeを正規表現 "/Input$/" がmatchする名称に変更してください。
- - SearchInputが型の場合、'import type { SearchInput as Hoge }' もしくは 'import { type SearchInput as Hoge }' のように明示的に型であることを宣言してください。名称変更が不要になります` }, { message: `Hogeを正規表現 "/SearchInput$/" がmatchする名称に変更してください。
- - SearchInputが型の場合、'import type { SearchInput as Hoge }' もしくは 'import { type SearchInput as Hoge }' のように明示的に型であることを宣言してください。名称変更が不要になります` } ] },
-    { code: `import { HogeTextarea as HogeTextareaFuga } from './hoge'`, errors: [ { message: `HogeTextareaFugaを正規表現 "/Textarea$/" がmatchする名称に変更してください。
- - HogeTextareaが型の場合、'import type { HogeTextarea as HogeTextareaFuga }' もしくは 'import { type HogeTextarea as HogeTextareaFuga }' のように明示的に型であることを宣言してください。名称変更が不要になります` } ] },
-    { code: `import { HogeCombobox as ComboboxFuga } from './hoge'`, errors: [ { message: `ComboboxFugaを正規表現 "/Combobox$/" がmatchする名称に変更してください。
- - HogeComboboxが型の場合、'import type { HogeCombobox as ComboboxFuga }' もしくは 'import { type HogeCombobox as ComboboxFuga }' のように明示的に型であることを宣言してください。名称変更が不要になります` } ] },
-    { code: `import { DatePicker as HogeDatePickerFuga } from './hoge'`, errors: [ { message: `HogeDatePickerFugaを正規表現 "/(Date|Wareki)Picker$/" がmatchする名称に変更してください。
- - DatePickerが型の場合、'import type { DatePicker as HogeDatePickerFuga }' もしくは 'import { type DatePicker as HogeDatePickerFuga }' のように明示的に型であることを宣言してください。名称変更が不要になります` } ] },
-    { code: `import { WarekiPicker as HogeWarekiPickerFuga } from './hoge'`, errors: [ { message: `HogeWarekiPickerFugaを正規表現 "/(Date|Wareki)Picker$/" がmatchする名称に変更してください。
- - WarekiPickerが型の場合、'import type { WarekiPicker as HogeWarekiPickerFuga }' もしくは 'import { type WarekiPicker as HogeWarekiPickerFuga }' のように明示的に型であることを宣言してください。名称変更が不要になります` } ] },
-    { code: 'const Hoge = styled.input``', errors: [ { message: `Hogeを正規表現 "/Input$/" がmatchする名称に変更してください。` } ] },
-    { code: 'const Hoge = styled(StyledInput)``', errors: [ { message: `Hogeを正規表現 "/Input$/" がmatchする名称に変更してください。` } ] },
-    { code: 'const Hoge = styled.textarea``', errors: [ { message: `Hogeを正規表現 "/Textarea$/" がmatchする名称に変更してください。` } ] },
-    { code: 'const Hoge = styled(StyledTextarea)``', errors: [ { message: `Hogeを正規表現 "/Textarea$/" がmatchする名称に変更してください。` } ] },
-    { code: 'const Hoge = styled(FieldSet)``', errors: [ { message: `Hogeを正規表現 "/FieldSet$/" がmatchする名称に変更してください。` } ] },
-    { code: 'const Hoge = styled(Combobox)``', errors: [ { message: `Hogeを正規表現 "/Combobox$/" がmatchする名称に変更してください。` } ] },
-    {
-      code: 'const Hoge = styled(SearchInput)``',
-      errors: [
-        { message: `Hogeを正規表現 "/Input$/" がmatchする名称に変更してください。` },
-        { message: `Hogeを正規表現 "/SearchInput$/" がmatchする名称に変更してください。` },
-      ],
-    },
     { code: `<input placeholder />`, errors: [ { message: `input にはplaceholder属性は設定せず、別途ヒント用要素の利用を検討してください。(例: '<div><input /><Hint>ヒント</Hint></div>')` } ] },
     { code: `<textarea placeholder="hoge" />`, errors: [ { message: `textarea にはplaceholder属性は設定せず、別途ヒント用要素の利用を検討してください。(例: '<div><textarea /><Hint>ヒント</Hint></div>')` } ] },
     { code: `<StyledInput placeholder={any} />`, errors: [ { message: `StyledInput にはplaceholder属性は設定せず、別途ヒント用要素の利用を検討してください。(例: '<div><StyledInput /><Hint>ヒント</Hint></div>')` } ] },

package/test/a11y-trigger-has-button.js

@@ -12,53 +12,11 @@ const ruleTester = new RuleTester({
 })
 ruleTester.run('a11y-trigger-has-button', rule, {
   valid: [
-    { code: `import styled from 'styled-components'` },
-    { code: `import styled, { css } from 'styled-components'` },
-    { code: `import { css } from 'styled-components'` },
-    { code: `import { DropdownTrigger as HogeDropdownTrigger } from './hoge'` },
-    { code: `import { FugaDialogTrigger as HogeDialogTrigger } from './hoge'` },
-    { code: `import { AbcButton as HogeAbcButton } from './hoge'` },
-    { code: `import { AnchorButton as FugaAnchorButton } from './hoge'` },
-    { code: `import { HogeAnchor as HogeFugaAnchor } from './hoge'` },
-    { code: `import { FugaLink as HogeLink } from './hoge'` },
-    { code: 'const HogeButton = styled.button``' },
-    { code: 'const HogeAnchor = styled.a``' },
-    { code: 'const HogeLink = styled.a``' },
-    { code: 'const HogeButton = styled(Button)``' },
-    { code: 'const HogeButtonAnchor = styled(ButtonAnchor)``' },
-    { code: 'const HogeAnchorButton = styled(AnchorButton)``' },
-    { code: 'const HogeLink = styled(FugaLink)``' },
-    { code: 'const HogeAnchor = styled(FugaAnchor)``' },
-    { code: 'const HogeDialogTrigger = styled(DialogTrigger)``' },
-    { code: 'const HogeDropdownTrigger = styled(DropdownTrigger)``' },
     { code: '<DropdownTrigger><button>hoge</button></DropdownTrigger>' },
     { code: '<DialogTrigger><button>{hoge}</button></DialogTrigger>' },
     { code: '<DropdownTrigger>{hoge}</DropdownTrigger>' },
   ],
   invalid: [
-    { code: `import hoge from 'styled-components'`, errors: [ { message: `styled-components をimportする際は、名称が"styled" となるようにしてください。例: "import styled from 'styled-components'"` } ] },
-    { code: `import { DropdownTrigger as Hoge } from './hoge'`, errors: [ { message: `Hogeを正規表現 "/DropdownTrigger$/" がmatchする名称に変更してください。
- - DropdownTriggerが型の場合、'import type { DropdownTrigger as Hoge }' もしくは 'import { type DropdownTrigger as Hoge }' のように明示的に型であることを宣言してください。名称変更が不要になります` } ] },
-    { code: `import { DialogTrigger as Hoge } from './hoge'`, errors: [ { message: `Hogeを正規表現 "/DialogTrigger$/" がmatchする名称に変更してください。
- - DialogTriggerが型の場合、'import type { DialogTrigger as Hoge }' もしくは 'import { type DialogTrigger as Hoge }' のように明示的に型であることを宣言してください。名称変更が不要になります` } ] },
-    { code: `import { Button as Hoge } from './hoge'`, errors: [ { message: `Hogeを正規表現 "/Button$/" がmatchする名称に変更してください。
- - Buttonが型の場合、'import type { Button as Hoge }' もしくは 'import { type Button as Hoge }' のように明示的に型であることを宣言してください。名称変更が不要になります` } ] },
-    { code: `import { AbcAnchorButton as Hoge } from './hoge'`, errors: [ { message: `Hogeを正規表現 "/Button$/" がmatchする名称に変更してください。
- - AbcAnchorButtonが型の場合、'import type { AbcAnchorButton as Hoge }' もしくは 'import { type AbcAnchorButton as Hoge }' のように明示的に型であることを宣言してください。名称変更が不要になります` }, { message: `Hogeを正規表現 "/AnchorButton$/" がmatchする名称に変更してください。
- - AbcAnchorButtonが型の場合、'import type { AbcAnchorButton as Hoge }' もしくは 'import { type AbcAnchorButton as Hoge }' のように明示的に型であることを宣言してください。名称変更が不要になります` } ] },
-    { code: `import { Anchor as Hoge } from './hoge'`, errors: [ { message: `Hogeを正規表現 "/Anchor$/" がmatchする名称に変更してください。
- - Anchorが型の場合、'import type { Anchor as Hoge }' もしくは 'import { type Anchor as Hoge }' のように明示的に型であることを宣言してください。名称変更が不要になります` } ] },
-    { code: `import { Link as Hoge } from './hoge'`, errors: [ { message: `Hogeを正規表現 "/Link$/" がmatchする名称に変更してください。
- - Linkが型の場合、'import type { Link as Hoge }' もしくは 'import { type Link as Hoge }' のように明示的に型であることを宣言してください。名称変更が不要になります` } ] },
-    { code: 'const Hoge = styled.button``', errors: [ { message: `Hogeを正規表現 "/Button$/" がmatchする名称に変更してください。` } ] },
-    { code: 'const Hoge = styled.a``', errors: [ { message: `Hogeを正規表現 "/(Anchor|Link)$/" がmatchする名称に変更してください。` } ] },
-    { code: 'const Hoge = styled(Button)``', errors: [ { message: `Hogeを正規表現 "/Button$/" がmatchする名称に変更してください。` } ] },
-    { code: 'const Hoge = styled(AnchorButton)``', errors: [ { message: `Hogeを正規表現 "/Button$/" がmatchする名称に変更してください。` },{ message: `Hogeを正規表現 "/AnchorButton$/" がmatchする名称に変更してください。` } ] },
-    { code: 'const Hoge = styled(ButtonAnchor)``', errors: [ { message: `Hogeを正規表現 "/ButtonAnchor$/" がmatchする名称に変更してください。` }, { message: `Hogeを正規表現 "/Anchor$/" がmatchする名称に変更してください。` } ] },
-    { code: 'const Hoge = styled(Anchor)``', errors: [ { message: `Hogeを正規表現 "/Anchor$/" がmatchする名称に変更してください。` } ] },
-    { code: 'const Hoge = styled(Link)``', errors: [ { message: `Hogeを正規表現 "/Link$/" がmatchする名称に変更してください。` } ] },
-    { code: 'const Hoge = styled(DropdownTrigger)``', errors: [ { message: `Hogeを正規表現 "/DropdownTrigger$/" がmatchする名称に変更してください。` } ] },
-    { code: 'const Hoge = styled(DialogTrigger)``', errors: [ { message: `Hogeを正規表現 "/DialogTrigger$/" がmatchする名称に変更してください。` } ] },
     { code: '<DropdownTrigger>ほげ</DropdownTrigger>', errors: [ { message: 'DropdownTrigger の直下にはbuttonコンポーネントのみ設置してください' } ] },
     { code: '<DialogTrigger><span><Button>ほげ</Button></span></DialogTrigger>', errors: [ { message: 'DialogTrigger の直下にはbuttonコンポーネントのみ設置してください' } ] },
     { code: '<DropdownTrigger><AnchorButton>ほげ</AnchorButton></DropdownTrigger>', errors: [ { message: 'DropdownTrigger の直下にはbuttonコンポーネントのみ設置してください' } ] },

package/test/best-practice-for-remote-trigger-dialog.js

@@ -12,18 +12,12 @@ const ruleTester = new RuleTester({
 })
 ruleTester.run('best-practice-for-remote-trigger-dialog', rule, {
   valid: [
-    { code: `import styled from 'styled-components'` },
-    { code: 'const HogeRemoteDialogTrigger = styled(RemoteDialogTrigger)``' },
-    { code: 'const RemoteTriggerHogeDialog = styled(RemoteTriggerActionDialog)``' },
     { code: '<RemoteDialogTrigger targetId="hoge">open.</RemoteDialogTrigger>' },
     { code: '<StyledRemoteDialogTrigger targetId="fuga">open.</StyledRemoteDialogTrigger>' },
     { code: '<RemoteTriggerActionDialog {...args} id="hoge">content.</RemoteTriggerActionDialog>' },
     { code: '<RemoteTriggerHogeDialog {...args} id="hoge">content.</RemoteTriggerHogeDialog>' },
   ],
   invalid: [
-    { code: `import hoge from 'styled-components'`, errors: [ { message: `styled-components をimportする際は、名称が"styled" となるようにしてください。例: "import styled from 'styled-components'"` } ] },
-    { code: 'const Hoge = styled(RemoteDialogTrigger)``', errors: [ { message: 'Hogeを正規表現 "/RemoteDialogTrigger$/" がmatchする名称に変更してください。' } ] },
-    { code: 'const Fuga = styled(RemoteTriggerActionDialog)``', errors: [ { message: 'Fugaを正規表現 "/RemoteTrigger(.+)Dialog$/" がmatchする名称に変更してください。' } ] },
     { code: '<RemoteDialogTrigger targetId={hoge}>open.</RemoteDialogTrigger>', errors: [ { message: `RemoteDialogTriggerのtargetId属性には直接文字列を指定してください。
   - 変数などは利用できません（これは関連するTriggerとDialogを検索しやすくするためです）
   - RemoteTriggerActionDialogはループやDropdown内にTriggerが存在する場合に利用してください

package/test/component-name.js

@@ -0,0 +1,247 @@
+const rule = require('../rules/component-name')
+const RuleTester = require('eslint').RuleTester
+
+const ruleTester = new RuleTester({
+  languageOptions: {
+    parserOptions: {
+      ecmaFeatures: {
+        jsx: true,
+      },
+    },
+  },
+})
+
+const messageProperName = ({ extended, matcher, sampleMatcher, suffix, base }) => {
+  const isComponent = base[0].toUpperCase() === base[0]
+  const sampleSuffix = `styled${isComponent ? `(${base})` : `.${base}`}`
+  const actualPrefix = sampleMatcher ? extended.replace(sampleMatcher, '') : (base[0] === base[0].toUpperCase() ? base.replace(matcher, '') : 'Hoge')
+
+  return `${extended} は ${matcher} にmatchする名前のコンポーネントを拡張することを期待している名称になっています
+ - ${extended} の名称の末尾が"${suffix}" という文字列ではない状態にしつつ、"${base}"を継承していることをわかる名称に変更してください
+ - もしくは"${base}"を"${extended}"の継承元であることがわかるような${isComponent ? '名称に変更するか、適切な別コンポーネントに差し替えてください' : '適切なタグや別コンポーネントに差し替えてください'}
+   - 修正例1: const ${actualPrefix}Xxxx = ${sampleSuffix}
+   - 修正例2: const ${actualPrefix}${suffix}Xxxx = ${sampleSuffix}
+   - 修正例3: const ${actualPrefix}${suffix} = styled(Xxxx${suffix})`
+}
+const messageInheritance = ({ extended, matcher }) => `${extended}を正規表現 "${matcher}" がmatchする名称に変更してください。`
+const messageImportAs = ({ extended, matcher, base }) => `${messageInheritance({ extended, matcher })}
+ - ${base}が型の場合、'import type { ${base} as ${extended} }' もしくは 'import { type ${base} as ${extended} }' のように明示的に型であることを宣言してください。名称変更が不要になります`
+const messageExtendSectioningContent = ({ extended, expected }) => `${extended} は smarthr-ui/${expected} をextendすることを期待する名称になっています
+ - childrenにHeadingを含まない場合、コンポーネントの名称から"${expected}"を取り除いてください
+ - childrenにHeadingを含み、アウトラインの範囲を指定するためのコンポーネントならば、smarthr-ui/${expected}をexendしてください
+   - "styled(Xxxx)" 形式の場合、拡張元であるXxxxコンポーネントの名称の末尾に"${expected}"を設定し、そのコンポーネント内でsmarthr-ui/${expected}を利用してください`
+
+ruleTester.run('component-name', rule, {
+  valid: [
+    { code: `import styled from 'styled-components'` },
+    { code: `import styled, { css } from 'styled-components'` },
+    { code: `import { css } from 'styled-components'` },
+
+    { code: `const HogeOrderedFugaList = styled.ol` },
+    { code: `const HogeOrderedFugaList = styled(HogeOrderedList)` },
+    { code: `import { HogeOrderedFugaList } from 'hoge'` },
+    { code: `import { OrderedFugaList as HogeOrderedPiyoList } from 'hoge'` },
+
+    { code: `const HogeSelect = styled(FugaSelect)` },
+
+    { code: `const HogeAnchor = styled.a` },
+    { code: `const HogeLink = styled.a` },
+
+    { code: 'const HogeButton = styled.button``' },
+    { code: 'const HogeButton = styled(Button)``' },
+    { code: 'const FugaSmartHRLogo = styled(SmartHRLogo)``' },
+    { code: 'const FugaText = styled(HogeText)(() => ``)' },
+    { code: 'const FugaMessage = styled(HogeMessage)(() => ``)' },
+
+    { code: `const HogeInput = styled.input` },
+    { code: `const HogeTextarea = styled(Textarea)` },
+    { code: `import { InputFile as HogeInputFile } from 'hoge'` },
+    { code: `const HogeRadioButton = styled(RadioButton)` },
+    { code: `import { HogeRadioButtonPanel } from 'hoge'` },
+    { code: `const HogeCheckbox = styled(Checkbox)` },
+    { code: `import { HogeCombobox as FugaCombobox } from 'hoge'` },
+
+    { code: `const FugaRightFixedNote = styled(HogeRightFixedNote)` },
+    { code: `import { HogeFieldset as FugaFieldset } from 'hoge'` },
+    { code: `const FugaFormControl = styled(HogeFormControl)` },
+    { code: `import { HogeTabItem as TabItem } from 'hoge'` },
+    { code: `const Form = styled(HogeForm)` },
+    { code: `import { ActionDialogWithTrigger as FugaActionDialogWithTrigger } from 'hoge'` },
+    { code: `const FugaRemoteDialogTrigger = styled(RemoteDialogTrigger)` },
+    { code: `import { HogeRemoteTriggerActionDialog as FugaRemoteTriggerAnyDialog } from 'hoge'` },
+
+    { code: `const HogeFieldset = styled.fieldset` },
+    { code: `const HogeFieldsets = styled(FugaFieldsets)` },
+    { code: `import { HogeFormControls as FugaFormControls } from 'hoge'` },
+    { code: `const RemoteTriggerFormDialog = styled(RemoteTriggerAnyFormDialog)` },
+
+    { code: `import { PageHeading as HogePageHeading } from './hoge'` },
+    { code: `import { HogeHeading as FugaHeading } from './hoge'` },
+    { code: `import { HogeArticle as FugaArticle } from './hoge'` },
+    { code: `import { HogeAside as FugaAside } from './hoge'` },
+    { code: `import { HogeNav as FugaNav } from './hoge'` },
+    { code: `import { HogeSection as FugaSection } from './hoge'` },
+    { code: `import { ModelessDialog as FugaModelessDialog } from './hoge'` },
+    { code: 'const HogePageHeading = styled.h1``' },
+    { code: 'const HogeHeading = styled.h2``' },
+    { code: 'const HogeHeading = styled.h3``' },
+    { code: 'const HogeHeading = styled.h4``' },
+    { code: 'const HogeHeading = styled.h5``' },
+    { code: 'const HogeHeading = styled.h6``' },
+    { code: 'const FugaHeading = styled(Heading)``' },
+    { code: 'const FugaHeading = styled(HogeHeading)``' },
+    { code: 'const FugaArticle = styled(HogeArticle)``' },
+    { code: 'const FugaAside = styled(HogeAside)``' },
+    { code: 'const FugaNav = styled(HogeNav)``' },
+    { code: 'const FugaSection = styled(HogeSection)``' },
+    { code: "const FugaHeading = styled(Heading).attrs(() => ({ type: 'blockTitle' }))``" },
+    { code: 'const FugaCenter = styled(HogeCenter)``' },
+    { code: 'const FugaReel = styled(HogeReel)``' },
+    { code: 'const FugaSidebar = styled(HogeSidebar)``' },
+    { code: 'const FugaStack = styled(HogeStack)``' },
+
+    { code: `import { HogeImg as FugaImg } from './hoge'` },
+    { code: `import { HogeImage as FugaImage } from './hoge'` },
+    { code: `import { HogeIcon as FugaIcon } from './hoge'` },
+    { code: 'const HogeImg = styled.img``' },
+    { code: 'const HogeImage = styled.img``' },
+    { code: 'const HogeIcon = styled.img``' },
+    { code: 'const HogeImg = styled.svg``' },
+    { code: 'const HogeImage = styled.svg``' },
+    { code: 'const HogeIcon = styled.svg``' },
+    { code: 'const HogeImg = styled(Img)``' },
+    { code: 'const HogeImage = styled(Image)``' },
+    { code: 'const HogeIcon = styled(Icon)``' },
+
+    { code: 'const HogeRadioButton = styled(FugaRadioButton)``' },
+    { code: 'const HogeRadioButtonPanel = styled(FugaRadioButtonPanel)``' },
+    { code: 'const HogeCheckbox = styled(FugaCheckBox)``' },
+
+    { code: `import { HogeSearchInput as FugaSearchInput } from './hoge'` },
+
+    { code: 'const IndexNav = styled(HogeIndexNav)``' },
+
+    { code: `import { DropdownTrigger as HogeDropdownTrigger } from './hoge'` },
+    { code: `import { FugaDialogTrigger as HogeDialogTrigger } from './hoge'` },
+    { code: `import { AbcButton as HogeAbcButton } from './hoge'` },
+    { code: `import { AnchorButton as FugaAnchorButton } from './hoge'` },
+    { code: `import { HogeAnchor as HogeFugaAnchor } from './hoge'` },
+    { code: `import { FugaLink as HogeLink } from './hoge'` },
+    { code: 'const HogeAnchor = styled.a``' },
+    { code: 'const HogeLink = styled.a``' },
+    { code: 'const HogeButtonAnchor = styled(ButtonAnchor)``' },
+    { code: 'const HogeAnchorButton = styled(AnchorButton)``' },
+    { code: 'const HogeLink = styled(FugaLink)``' },
+    { code: 'const HogeAnchor = styled(FugaAnchor)``' },
+    { code: 'const HogeDialogTrigger = styled(DialogTrigger)``' },
+    { code: 'const HogeDropdownTrigger = styled(DropdownTrigger)``' },
+
+    { code: 'const RemoteTriggerHogeDialog = styled(RemoteTriggerActionDialog)``' },
+  ],
+  invalid: [
+    { code: `import hoge from 'styled-components'`, errors: [ { message: `styled-components をimportする際は、名称が"styled" となるようにしてください。例: "import styled from 'styled-components'"` } ] },
+
+    { code: `const HogeOrderedFugaList = styled.ul`, errors: [ { message: messageProperName({ extended: 'HogeOrderedFugaList', matcher: /(Ordered(.*)List|^ol)$/, suffix: 'OrderedFugaList', base: 'ul' }) } ] },
+    { code: `const HogeOrderedFugaList = styled(Hoge)`, errors: [ { message: messageProperName({ extended: 'HogeOrderedFugaList', matcher: /(Ordered(.*)List|^ol)$/, suffix: 'OrderedFugaList', base: 'Hoge' }) } ] },
+    { code: `const Hoge = styled.ol`, errors: [ { message: messageInheritance({ extended: 'Hoge', matcher: /Ordered(.*)List$/ }) } ] },
+    { code: `import { HogeOrderedFugaList as Fuga } from 'hoge'`, errors: [ { message: messageImportAs({ extended: 'Fuga', matcher: /Ordered(.*)List$/, base: 'HogeOrderedFugaList' }) } ] },
+
+    { code: `const HogeSelect = styled.div`, errors: [ { message: messageProperName({ extended: 'HogeSelect', matcher: /(S|^s)elect$/, suffix: 'Select', base: 'div' }) } ] },
+
+    { code: `const HogeAnchor = styled.div`, errors: [ { message: messageProperName({ extended: 'HogeAnchor', matcher: /(Anchor|^a)$/, suffix: 'Anchor', base: 'div' }) } ] },
+    { code: `const HogeLink = styled.div`, errors: [ { message: messageProperName({ extended: 'HogeLink', matcher: /(Link|^a)$/, suffix: 'Link', base: 'div' }) } ] },
+    { code: `const HogeAnchor = styled(Hoge)`, errors: [ { message: messageProperName({ extended: 'HogeAnchor', matcher: /(Anchor|^a)$/, suffix: 'Anchor', base: 'Hoge' }) } ] },
+    { code: `const HogeLink = styled(Hoge)`, errors: [ { message: messageProperName({ extended: 'HogeLink', matcher: /(Link|^a)$/, suffix: 'Link', base: 'Hoge' }) } ] },
+    { code: `const Hoge = styled.a`, errors: [ { message: messageInheritance({ extended: 'Hoge', matcher: /(Anchor|Link)$/ }) } ] },
+    { code: `import { HogeAnchor as Fuga } from 'hoge'`, errors: [ { message: messageImportAs({ extended: 'Fuga', matcher: /Anchor$/, base: 'HogeAnchor' }) } ] },
+    { code: `import { HogeLink as Fuga } from 'hoge'`, errors: [ { message: messageImportAs({ extended: 'Fuga', matcher: /Link$/, base: 'HogeLink' }) } ] },
+
+    { code: `import { SmartHRLogo as SmartHRLogoHoge } from './hoge'`, errors: [ { message: messageImportAs({ extended: 'SmartHRLogoHoge', matcher: /SmartHRLogo$/, base: 'SmartHRLogo' }) } ] },
+    { code: `import { FugaMessage as FugaMessageFuga } from './hoge'`, errors: [ { message: messageImportAs({ extended: 'FugaMessageFuga', matcher: /Message$/, base: 'FugaMessage' }) } ] },
+    { code: 'const Hoge = styled.button``', errors: [ { message: messageInheritance({ extended: 'Hoge', matcher: /Button$/ }) } ]  },
+    { code: 'const Fuga = styled(SmartHRLogo)``', errors: [ { message: messageInheritance({ extended: 'Fuga', matcher: /SmartHRLogo$/ }) } ]  },
+    { code: 'const Hoge = styled(HogeMessage)``', errors: [ { message: messageInheritance({ extended: 'Hoge', matcher: /Message$/ }) } ]  },
+    { code: 'const HogeButton = styled.div``', errors: [ { message: messageProperName({ extended: 'HogeButton', matcher: /(B|^b)utton$/, suffix: 'Button', base: 'div' }) } ]  },
+
+    { code: `import { DatePicker as DatePickerHoge } from './hoge'`, errors: [ { message: messageImportAs({ extended: 'DatePickerHoge', matcher: /(Date|Wareki)Picker$/, base: 'DatePicker' }) } ] },
+    { code: 'const Fuga = styled(WarekiPicker)``', errors: [ { message: messageInheritance({ extended: 'Fuga', matcher: /(Date|Wareki)Picker$/ }) } ]  },
+    { code: `import { TimePicker as Hoge } from './hoge'`, errors: [ { message: messageImportAs({ extended: 'Hoge', matcher: /TimePicker$/, base: 'TimePicker' }) } ] },
+    { code: 'const Hoge = styled(DropZone)``', errors: [ { message: messageInheritance({ extended: 'Hoge', matcher: /DropZone$/ }) } ]  },
+    { code: `import { Switch as Hoge } from './hoge'`, errors: [ { message: messageImportAs({ extended: 'Hoge', matcher: /Switch$/, base: 'Switch' }) } ] },
+    { code: 'const SegmentedControlHoge = styled(FugaSegmentedControl)``', errors: [ { message: messageInheritance({ extended: 'SegmentedControlHoge', matcher: '/SegmentedControl$/' }) } ]  },
+    { code: `import { FormDialog as HogeDialog } from './hoge'`, errors: [ { message: messageImportAs({ extended: 'HogeDialog', matcher: /FormDialog$/, base: 'FormDialog' }) } ] },
+    { code: 'const PaginationFuga = styled(FugaPagination)``', errors: [ { message: messageInheritance({ extended: 'PaginationFuga', matcher: /Pagination$/ }) } ]  },
+    { code: `import { HogeSideNav as Hoge } from './hoge'`, errors: [ { message: messageImportAs({ extended: 'Hoge', matcher: /Nav$/, base: 'HogeSideNav' }) }, { message: messageImportAs({ extended: 'Hoge', matcher: /SideNav$/, base: 'HogeSideNav' }) } ] },
+    { code: 'const AccordionPanelAny = styled(FugaAccordionPanel)``', errors: [ { message: messageInheritance({ extended: 'AccordionPanelAny', matcher: /AccordionPanel$/ }) } ]  },
+    { code: `import { HogeFilterDropdown as Hoge } from './hoge'`, errors: [ { message: messageImportAs({ extended: 'Hoge', matcher: /FilterDropdown$/, base: 'HogeFilterDropdown' }) } ] },
+    { code: `const Hoge = styled.fieldset`, errors: [ { message: messageInheritance({ extended: 'Hoge', matcher: /Fieldset$/ }) } ] },
+    { code: `const Hoge = styled(Fieldsets)`, errors: [ { message: messageInheritance({ extended: 'Hoge', matcher: /Fieldsets$/ }) } ] },
+    { code: `const Hoge = styled(FormControls)`, errors: [ { message: messageInheritance({ extended: 'Hoge', matcher: /FormControls$/ }) } ] },
+    { code: `const Hoge = styled(FilterDropdown)`, errors: [ { message: messageInheritance({ extended: 'Hoge', matcher: /FilterDropdown$/ }) } ] },
+
+    { code: `import { HogePageHeading as PageHeadingAbc } from './hoge'`, errors: [ { message: messageImportAs({ extended: 'PageHeadingAbc', matcher: /Heading$/, base: 'HogePageHeading' }) }, { message: messageImportAs({ extended: 'PageHeadingAbc', matcher: /PageHeading$/, base: 'HogePageHeading' }) } ] },
+    { code: `import { Heading as HeadingHoge } from './hoge'`, errors: [ { message: messageImportAs({ extended: 'HeadingHoge', matcher: /Heading$/, base: 'Heading' }) } ] },
+    { code: `import { HogeArticle as HogeArticleFuga } from './hoge'`, errors: [ { message: messageImportAs({ extended: 'HogeArticleFuga', matcher: /Article$/, base: 'HogeArticle' }) } ] },
+    { code: `import { HogeAside as HogeAsideFuga } from './hoge'`, errors: [ { message: messageImportAs({ extended: 'HogeAsideFuga', matcher: /Aside$/, base: 'HogeAside' }) } ] },
+    { code: `import { HogeNav as HogeNavFuga } from './hoge'`, errors: [ { message: messageImportAs({ extended: 'HogeNavFuga', matcher: /Nav$/, base: 'HogeNav' }) } ] },
+    { code: `import { HogeSection as HogeSectionFuga } from './hoge'`, errors: [ { message: messageImportAs({ extended: 'HogeSectionFuga', matcher: /Section$/, base: 'HogeSection' }) } ] },
+    { code: `import { HogeModelessDialog as HogeModelessDialogFuga } from './hoge'`, errors: [ { message: messageImportAs({ extended: 'HogeModelessDialogFuga', matcher: /ModelessDialog$/, base: 'HogeModelessDialog' }) } ] },
+    { code: 'const Hoge = styled.h1``', errors: [ { message: messageInheritance({ extended: 'Hoge', matcher: /PageHeading$/ }) } ] },
+    { code: 'const Hoge = styled.h2``', errors: [ { message: messageInheritance({ extended: 'Hoge', matcher: /Heading$/ }) } ] },
+    { code: 'const Hoge = styled.h3``', errors: [ { message: messageInheritance({ extended: 'Hoge', matcher: /Heading$/ }) } ] },
+    { code: 'const Hoge = styled.h4``', errors: [ { message: messageInheritance({ extended: 'Hoge', matcher: /Heading$/ }) } ] },
+    { code: 'const Hoge = styled.h5``', errors: [ { message: messageInheritance({ extended: 'Hoge', matcher: /Heading$/ }) } ] },
+    { code: 'const Hoge = styled.h6``', errors: [ { message: messageInheritance({ extended: 'Hoge', matcher: /Heading$/ }) } ] },
+    { code: 'const Fuga = styled(Heading)``', errors: [ { message: messageInheritance({ extended: 'Fuga', matcher: /Heading$/ }) } ] },
+    { code: 'const Fuga = styled(HogeHeading)``', errors: [ { message: messageInheritance({ extended: 'Fuga', matcher: /Heading$/ }) } ] },
+    { code: 'const Fuga = styled(HogeHeading).attrs(() => ({ type: "blockTitle" }))``', errors: [ { message: messageInheritance({ extended: 'Fuga', matcher: /Heading$/ }) } ] },
+    { code: 'const Fuga = styled(HogeArticle)``', errors: [ { message: messageInheritance({ extended: 'Fuga', matcher: /Article$/ }) } ] },
+    { code: 'const Fuga = styled(HogeAside)``', errors: [ { message: messageInheritance({ extended: 'Fuga', matcher: /Aside$/ }) } ] },
+    { code: 'const Fuga = styled(HogeNav)``', errors: [ { message: messageInheritance({ extended: 'Fuga', matcher: /Nav$/ }) } ] },
+    { code: 'const Fuga = styled(HogeSection)``', errors: [ { message: messageInheritance({ extended: 'Fuga', matcher: /Section$/ }) } ] },
+    { code: 'const Fuga = styled(HogeCenter)``', errors: [ { message: messageInheritance({ extended: 'Fuga', matcher: /Center$/ }) } ] },
+    { code: 'const Fuga = styled(HogeReel)``', errors: [ { message: messageInheritance({ extended: 'Fuga', matcher: /Reel$/ }) } ] },
+    { code: 'const Fuga = styled(HogeSidebar)``', errors: [ { message: messageInheritance({ extended: 'Fuga', matcher: /Sidebar$/ }) } ] },
+    { code: 'const Fuga = styled(HogeStack)``', errors: [ { message: messageInheritance({ extended: 'Fuga', matcher: /Stack$/ }) } ] },
+    { code: 'const StyledSection = styled.div``', errors: [ { message: messageExtendSectioningContent({ extended: 'StyledSection', expected: 'Section' }) } ] },
+    { code: 'const StyledArticle = styled(Hoge)``', errors: [ { message:messageExtendSectioningContent({ extended: 'StyledArticle', expected: 'Article' }) } ] },
+    { code: 'const StyledAside = styled(AsideXxxx)``', errors: [ { message: messageExtendSectioningContent({ extended: 'StyledAside', expected: 'Aside' }) } ] },
+    { code: 'const HogeHeading = styled(Hoge)``', errors: [ { message: messageProperName({ extended: 'HogeHeading', matcher: /(Heading|^h(1|2|3|4|5|6))$/, suffix: 'Heading', base: 'Hoge' }) } ] },
+    { code: 'const HogeHeading = styled.div``', errors: [ { message: messageProperName({ extended: 'HogeHeading', matcher: /(Heading|^h(1|2|3|4|5|6))$/, suffix: 'Heading', base: 'div' }) } ] },
+    { code: `import { HogeImg as ImgFuga } from './hoge'`, errors: [ { message: messageImportAs({ extended: 'ImgFuga', matcher: /Img$/, base: 'HogeImg' }) } ] },
+    { code: `import { HogeImage as HogeImageFuga } from './hoge'`, errors: [ { message: messageImportAs({ extended: 'HogeImageFuga', matcher: /Image$/, base: 'HogeImage' }) } ] },
+    { code: `import { Icon as Hoge } from './hoge'`, errors: [ { message: messageImportAs({ extended: 'Hoge', matcher: /Icon$/, base: 'Icon' }) } ] },
+    { code: 'const Hoge = styled.img``', errors: [ { message: messageInheritance({ extended: 'Hoge', matcher: /(Img|Image|Icon)$/ }) } ] },
+    { code: 'const Hoge = styled.svg``', errors: [ { message: messageInheritance({ extended: 'Hoge', matcher: /(Img|Image|Icon)$/ }) } ] },
+    { code: 'const Hoge = styled(Icon)``', errors: [ { message: messageInheritance({ extended: 'Hoge', matcher: /Icon$/ }) } ] },
+    { code: 'const Hoge = styled(Img)``', errors: [ { message: messageInheritance({ extended: 'Hoge', matcher: /Img$/ }) } ] },
+    { code: 'const Hoge = styled(Image)``', errors: [ { message: messageInheritance({ extended: 'Hoge', matcher: /Image$/ }) } ] },
+    { code: 'const HogeImage = styled.span``', errors: [ { message: messageProperName({ extended: 'HogeImage', matcher: /(Image|^(img|svg))$/, suffix: 'Image', base: 'span' }) } ] },
+    { code: 'const HogeImg = styled(Hoge)``', errors: [ { message: messageProperName({ extended: 'HogeImg', matcher: /(Img|^(img|svg))$/, suffix: 'Img', base: 'Hoge' }) } ] },
+    { code: 'const HogeIcon = styled(Hoge)``', errors: [ { message: messageProperName({ extended: 'HogeIcon', matcher: /(Icon|^(img|svg))$/, suffix: 'Icon', base: 'Hoge' }) } ] },
+    { code: `import { ComboBox as ComboBoxHoge } from './hoge'`, errors: [ { message: messageImportAs({ extended: 'ComboBoxHoge', matcher: /Combobox$/, base: 'ComboBox' }) } ] },
+    { code: 'const RadioButton = styled(FugaRadioButtonPanel)``', errors: [
+      { message: messageInheritance({ extended: 'RadioButton', matcher: /RadioButtonPanel$/ }) },
+      { message: messageProperName({ extended: 'RadioButton', matcher: /(B|^b)utton$/, sampleMatcher: /(Button)$/, suffix: 'Button', base: 'FugaRadioButtonPanel' }) },
+      { message: messageProperName({ extended: 'RadioButton', matcher: /RadioButton$/, sampleMatcher: /(RadioButton)$/, suffix: 'RadioButton', base: 'FugaRadioButtonPanel' }) }] },
+    { code: 'const SideNav = styled(Hoge)``', errors: [ { message: messageExtendSectioningContent({ extended: 'SideNav', expected: 'Nav' }) }, { message: messageProperName({ extended: 'SideNav', matcher: /SideNav$/, sampleMatcher: /(SideNav)$/, suffix: 'SideNav', base: 'Hoge' }) } ] },
+
+    { code: `import { DropdownTrigger as Hoge } from './hoge'`, errors: [ { message: messageImportAs({ extended: 'Hoge', matcher: /DropdownTrigger$/, base: 'DropdownTrigger' }) } ] },
+    { code: `import { DialogTrigger as Hoge } from './hoge'`, errors: [ { message: messageImportAs({ extended: 'Hoge', matcher: /DialogTrigger$/, base: 'DialogTrigger' }) } ] },
+    { code: `import { Button as Hoge } from './hoge'`, errors: [ { message: messageImportAs({ extended: 'Hoge', matcher: /Button$/, base: 'Button' }) } ] },
+    { code: `import { AbcAnchorButton as Hoge } from './hoge'`, errors: [ { message: messageImportAs({ extended: 'Hoge', matcher: /Button$/, base: 'AbcAnchorButton' }) }, messageImportAs({ extended: 'Hoge', matcher: /AnchorButton$/, base: 'AbcAnchorButton' }) ] },
+    { code: `import { Anchor as Hoge } from './hoge'`, errors: [ { message: messageImportAs({ extended: 'Hoge', matcher: /Anchor$/, base: 'Anchor' }) } ] },
+    { code: `import { Link as Hoge } from './hoge'`, errors: [ { message: messageImportAs({ extended: 'Hoge', matcher: /Link$/, base: 'Link' }) } ] },
+    { code: 'const Hoge = styled.a``', errors: [ { message: messageInheritance({ extended: 'Hoge', matcher: /(Anchor|Link)$/ }) } ] },
+    { code: 'const Hoge = styled(Button)``', errors: [ { message: messageInheritance({ extended: 'Hoge', matcher: /Button$/ }) } ] },
+    { code: 'const Hoge = styled(AnchorButton)``', errors: [ { message: messageInheritance({ extended: 'Hoge', matcher: /Button$/ }) }, { message: messageInheritance({ extended: 'Hoge', matcher: /AnchorButton$/ }) } ] },
+    { code: 'const Hoge = styled(ButtonAnchor)``', errors: [ { message: messageInheritance({ extended: 'Hoge', matcher: /Anchor$/ }) } ] },
+    { code: 'const Hoge = styled(Anchor)``', errors: [ { message: messageInheritance({ extended: 'Hoge', matcher: /Anchor$/ }) } ] },
+    { code: 'const Hoge = styled(Link)``', errors: [ { message: messageInheritance({ extended: 'Hoge', matcher: /Link$/ }) } ] },
+    { code: 'const Hoge = styled(DropdownTrigger)``', errors: [ { message: messageInheritance({ extended: 'Hoge', matcher: /DropdownTrigger$/ }) } ] },
+    { code: 'const Hoge = styled(DialogTrigger)``', errors: [ { message: messageInheritance({ extended: 'Hoge', matcher: /DialogTrigger$/ }) } ] },
+
+    { code: 'const Hoge = styled(RemoteDialogTrigger)``', errors: [ { message: messageInheritance({ extended: 'Hoge', matcher: /DialogTrigger$/ }) }, { message: messageInheritance({ extended: 'Hoge', matcher: /RemoteDialogTrigger$/ }) } ] },
+    { code: 'const Fuga = styled(RemoteTriggerActionDialog)``', errors: [ { message: messageInheritance({ extended: 'Fuga', matcher: /RemoteTrigger(.+)Dialog$/ }) } ] },
+  ]
+})