Pages

pages
|----- Signin
        |----- components
                |----- SignInForm.tsx
                |----- SignInForm.styles.ts
        |----- consumers
                |----- useSignInFormConsumer.tsx
        |----- services
                |----- SignInService.ts
        |----- utils
                |----- parseGoogleCallback.ts
        |----- views
                |----- SignInView.tsx
        |----- SignIn.tsx
|----- Administration
        |----- components
                |----- ApprovedDomainsCard
                            |----- ApprovedDomainsCard.tsx
                            |----- ApprovedDomainsCard.styles.ts
                |----- DangerZone
                            |----- DangerZone.tsx
                            |----- DangerZone.styles.ts
                |----- ...
        |----- consumers
                |----- useGeneralViewApiConsumer.tsx
                |----- useAddMappingFileFormConsumer.tsx
                |----- useTeamMembersApiConsumer.tsx
                |----- ...
        |----- context
                |----- Administration.actions.ts
                |----- Administration.context.tsx
                |----- Administration.reducer.ts
                |----- Administration.types.tsx
        |----- services
                |----- AdministrationService.ts
        |----- utils
                |----- getIntegrationTypeLogo.ts
                |----- validationFunctions.ts
        |----- views
                |----- AppsView
                            |----- AppsView.tsx
                            |----- AppsView.styles.tsx
                |----- BillingView
                            |----- BillingView.tsx
                            |----- BillingView.styles.tsx
                |----- GeneralView
                            |----- GeneralView.tsx
                            |----- GeneralView.styles.ts
                |----- ...
        |----- Administration.tsx
|----- ...

• the idea is to use package-by-feature metodology and have everything related to functionality of a specific page contained within its folder
• components within these folders are not reusable, and are tied to the context of a specific page
• consumers are used to separated view logic from business logic of handling api calls or forms
• context - if needed, a locally scoped context can be added for domain specific data that needs to be shared between components (if the tree is deep, to avoid prop-drilling)
• services - specific api services used for the page
• utils - specific helper functions
• views - different page views which are tied to a specific domain, for example Signin domain has only one page, where as Administration has multiple pages
• Signin.tsx, Administration.tsx - top level container component which wraps and exposes views as pages, so all of them can be found in one place, example:

export function AdministrationGeneralPage() {
  return <GeneralView />;
}

export function AdministrationWhiteLabelingPage() {
  return <WhiteLabelingView />;
}

export function AdministrationMembersPage() {
  return <MembersView />;
}

export function AdministrationBillingPage() {
  return <BillingView />;
}

export function AdministrationDomainVerificationPage() {
  return <DomainVerificationView />;
}

export function AdministrationAppsPage() {
  return <AppsView />;
}