code reading of Component Design Patterns in bulletproof-react

https://github.com/alan2207/bulletproof-react

コンポーネントの管理や分離方法に関する設計について

• フォルダ構成
• 依存関係
• stateやhooksなどの有無
• storyboardの管理

フォルダ構成

App.tsxからたどるとと基本的に、featuresが各ページに関するルーティングをしている。
@featuresで、@componentsなどを利用して、各ページのコンポーネントを作成している。

components
├── Elements
│   ├── Button
│   ├── ConfirmationDialog
│   │   └── __tests__
│   ├── Dialog
│   │   └── __tests__
│   ├── Drawer
│   │   └── __tests__
│   ├── Link
│   ├── MDPreview
│   ├── Spinner
│   └── Table
├── Form
│   └── __tests__
├── Head
│   └── __tests__
├── Layout
└── Notifications

依存関係

feature -> componentsになっている。
components内はLayout -> Head, Form -> Elementsはあったが、基本的に依存方向は統一されている。
逆にいうと、components内のフォルダ構成はAtomic Designのようなコンポーネントの粒度を細かく管理をしていない。

stateやhooksなどの有無

Elements/ConfirmDialogなどではuseEffectなどを利用しており、hooksなどでフォルダを明確に分けているわけではなさそう。

storyboardの管理

@components下のものは全てstoryboardで管理し、@features/componentsなどは管理していない。
@features/componentsは基本的に、認可に基づいたレンダリングの制御をしているので、認可制御のコンポーネントをおいている？