Project Structure

• .storybook
• cypress
• src
  • auth - Authentication (auth0-spa-js)
  • components - please refer to the README.md found in the src/components directory for all component classification
  • gql - Generated code for GraphQL and definitions of fragments (Apollo Client)
  • theme - Theme and globally used styles (Emotion)
  • state - Local state management (Redux)
  • locale - Internationalization setup (react-intl)
  • util - Helper functions and convenient custom hooks
• .env - Config for environment variables. They can be used with window.REEARTH_CONFIG as JSON.
• .eslintrc.yml - Configuration file for ESLint
• codegen.yml - Configuration file for graphql-codegen
• webpack.config - Configuration file for webpack
• tsconfig.json - Configuration file for TypeScript

Providers and Hooks

In the src directory of the Re-Earth app, you may find some directories that contain Provider components and hooks. These components and hooks are used to wrap and provide certain functionalities offered by external libraries.

By encapsulating the functionalities within these components and hooks, the impact of changes in external libraries is minimized.

• auth: wraps Auth0 (auth0-spa-js)
• gql: wraps generated code for GraphQL by graphql-codegen
• theme: wraps Emotion
• local: wraps Redux
• i18n: wraps react-intl

Component Structure

Re-Earth follows the principles of Atomic Design methodology. To provide a clear understanding of the terminology used in Atomic Design, the meaning of each term has been explicitly defined within the project.

In Re-Earth, components can be organized into folders and can have an unlimited number of child components. This allows for a flexible and scalable component structure, where components can be nested and composed to build complex user interfaces.