@storybook/addon-docsでNo inputs found for this component.が表示された時の対応

はじめに

@storybook/addon-docsを導入したところ、本来propsの項目が表示されるはずの箇所にNo inputs found for this component.が表示されてしまう状態でした。
解決してみれば大した原因ではなかったのですが、地味に時間がかかったので備忘録として残しておきます。同じ現象でハマっているひとの助けになれば幸いです。

参考画像

解決方法

storieファイルにインポートしたReactComponent名とファイル名に差異があるとpropsの項目が表示できないらしく、今回の現象が発生した環境では、tsxのファイル名をケバブケースで記載するルールにしており、ファイル名が小文字になっていたためコンポーネント名と差異が発生していました。

button.tsx

const Button:React.FC<Props> = (props) => {
  return (
    <StyledButton className={ props.className } to={props.to}>
      <ButtonText>{ props.children }</ButtonText>
    </StyledButton>
  );
}
export default Button;

ファイル名をButton.tsxに変更したところpropsの項目を意図した通りに表示することができました。
とりあえずファイル名はパスカルケースで記載するルールに変更。

補足

ハイフンが入る分には問題ないらしく、大文字小文字の差異が主な原因のようです。
例えば、IconBtnという名前のコンポーネントを持つicon-btn.tsxのようなファイルはIcon-Btn.tsxにすることでpropsの項目を表示できるようです