プロジェクトの構成

• .storybook - Storybookのためのコンフィグ
• cypress - サイプレスによるE2Eテストコード
• src
  • auth - 認証 (auth0-spa-js)
  • components -コンポーネントの分類については、src/componentsディレクトリにあるREADME.mdを参照してください。
  • gql - GraphQL 用の生成コードとフラグメントの定義 (Apollo クライアント)
  • theme - テーマとグローバルに使用されるスタイル (Emotion)
  • state - ローカルな状態管理(Redux)
  • locale - 国際化設定(react-intl)
  • util - ヘルパー関数と便利なカスタムフック
• .env - 環境変数用の設定です。JSONとしてwindow.REEARTH_CONFIGと一緒に使用することができます。
• .eslintrc.yml - ESLintの設定ファイル。
• codegen.yml - graphql-codegen の設定ファイル。
• webpack.config - webpackの設定ファイル。
• tsconfig.json - TypeScript 用の設定ファイル。

プロバイダーとフック

srcディレクトリ内のいくつかのディレクトリでは、Providerコンポーネントや、外部ライブラリが提供する一部の機能をラップして提供するためのフックを公開しています。これにより、外部ライブラリの変更に伴う影響範囲を小さくすることができます。

• auth: Auth0 (auth0-spa-js)をラップします。
• gql: graphql-codegenによるGraphQLの生成コードをラップします。
• theme: ラップ Emotion
• local: ラップスRedux
• i18n：ラップリアクトインテル

コンポーネントの構造

Re:EarthはAtomic Designを参照していますが、Atomic Designで使われている用語の解釈を明確にするために、それぞれの用語の意味を明確にしています。