Add a module enabler

Add module enabler in settings.
This loops over all the exported Modules in the components/modules folder and renders them. (Interpreted language magic/ metaclasses)

components/Settings/ModuleEnabler.tsx

@@ -0,0 +1,43 @@
+import { Group, Switch } from '@mantine/core';
+import * as Modules from '../modules';
+import { useConfig } from '../../tools/state';
+
+export default function ModuleEnabler(props: any) {
+  const { config, setConfig } = useConfig();
+  // Loop over each module with their title
+  const modules = Object.keys(Modules);
+  // Match the enabled modules with the modules array
+  let enabledModules = config.settings.enabledModules ?? [];
+  enabledModules = modules.filter((module) => enabledModules.includes(module));
+  return (
+    <Group direction="column">
+      {modules.map((module: string) => (
+        <Switch
+          key={module}
+          size="md"
+          checked={enabledModules.includes(module)}
+          label={`Enable ${module.replace('Module', '')} module`}
+          onChange={(e) => {
+            if (e.currentTarget.checked) {
+              setConfig({
+                ...config,
+                settings: {
+                  ...config.settings,
+                  enabledModules: [...enabledModules, module],
+                },
+              });
+            } else {
+              setConfig({
+                ...config,
+                settings: {
+                  ...config.settings,
+                  enabledModules: enabledModules.filter((m) => m !== module),
+                },
+              });
+            }
+          }}
+        />
+      ))}
+    </Group>
+  );
+}

components/Settings/SettingsMenu.tsx

@@ -14,6 +14,7 @@ import { Settings as SettingsIcon } from 'tabler-icons-react';
 import { useConfig } from '../../tools/state';
 import { ColorSchemeSwitch } from '../ColorSchemeToggle/ColorSchemeSwitch';
 import SaveConfigComponent from '../Config/SaveConfig';
+import ModuleEnabler from './ModuleEnabler';
 
 function SettingsMenu(props: any) {
   const { config, setConfig } = useConfig();
@@ -63,6 +64,7 @@ function SettingsMenu(props: any) {
           label="Enable search bar"
         />
       </Group>
+      <ModuleEnabler />
       <ColorSchemeSwitch />
       <SaveConfigComponent />
       <Text

components/modules/calendar/index.ts

@@ -0,0 +1 @@
+export { CalendarModule } from './CalendarModule';

components/modules/date/index.ts

@@ -0,0 +1 @@
+export { DateModule } from './DateModule';

components/modules/index.ts

@@ -0,0 +1,2 @@
+export * from './date';
+export * from './calendar';

components/modules/moduleWrapper.tsx

@@ -1,11 +1,18 @@
 import { Card, useMantineTheme } from '@mantine/core';
+import { useConfig } from '../../tools/state';
 import { IModule } from './modules';
 
 export default function ModuleWrapper(props: any) {
   const { module }: { module: IModule } = props;
+  const { config } = useConfig();
+  const enabledModules = config.settings.enabledModules ?? [];
+  // Remove 'Module' from enabled modules titles
+  const enabledModulesTitles = enabledModules.map((module) => module.replace('Module', ''));
+  const isShown = enabledModulesTitles.includes(module.title);
   const theme = useMantineTheme();
   return (
     <Card
+      hidden={!isShown}
       mx="sm"
       radius="lg"
       shadow="sm"

tools/types.ts

@@ -1,6 +1,7 @@
 export interface Settings {
   searchUrl: string;
   searchBar: boolean;
+  enabledModules: string[];
   [key: string]: any;
 }