Support Configurable UI Components via Local Configuration File

[pepermao]

Background Information

To provide a highly customizable and flexible user interface, our platform needs to support configurable UI components based on organization-specific settings. These configurations will be stored in a local configuration TypeScript file (localConfig.ts). The goal is to generate the proper UI during build time, ensuring optimal performance by avoiding runtime configuration overhead.

What

The task involves creating a localConfig.ts file that contains the organization-specific configurations and modifying the build process and UI components to utilize these configurations at build time. The components to be configured include the Footer, Header, Home page, and search functionality.

How

1. Create localConfig.ts File:

   • Define a TypeScript interface for the configuration schema.
   • Implement the configuration settings for the Footer, Header, Home page, and search functionality.

2. Modify Build Process:

   • Update the build process to read configurations from localConfig.ts.
   • Generate the necessary UI components during build time based on the configurations.

3. Update UI Components:

   • Modify the Footer component to use configurations from localConfig.ts.
   • Modify the Header component to use configurations from localConfig.ts.
   • Modify the Home page to use configurations from localConfig.ts.
   • Update the search functionality to use configurations from localConfig.ts and support searching sentences and reviews without MongoDB Atlas Search.

Acceptance Criteria

1. Create localConfig.ts File:

   • A new localConfig.ts file should be created containing the organization-specific configurations.
   • The file should define an appropriate TypeScript interface for the configuration schema.
   • Example content:

     
     export interface LocalConfig {
     footer: {
     socialMedias: object[],
     showStatuteButton: boolean,
     address: string,
     description: string,
     },
     header: {
     languages: boolean | string[],
     donateButton: {
       show: boolean,
       redirectUrl: string,
     },
     logo: string,
     },
     home: {
     header: {
       title: string,
       message: string,
     },
     affixCTA: {
       show: boolean,
     },
     ctaBanner: {
       text: string,
     },
     share: object,
     },
     search: {
     useAlternativeSearch: boolean,
     }
     }

   const localConfig: LocalConfig = { // Add organization-specific configurations here };

   export default localConfig;

   
   - [ ] https://github.com/AletheiaFact/aletheia/issues/1298
   - [ ] https://github.com/AletheiaFact/aletheia/issues/1299
   - [ ] https://github.com/AletheiaFact/aletheia/issues/1300
   - [ ] https://github.com/AletheiaFact/aletheia/issues/1301

[thesocialdev]

Ideally this would create the proper UI during build time to avoid performance issues,