✨ Add new config format

src/config/init.ts

@@ -0,0 +1,15 @@
+import { useEffect } from 'react';
+import { ConfigType } from '../types/config';
+import { useConfigContext } from './provider';
+import { useConfigStore } from './store';
+
+export const useInitConfig = (initialConfig: ConfigType) => {
+  const { setConfigName } = useConfigContext();
+  const configName = initialConfig.configProperties?.name ?? 'default';
+  const initConfig = useConfigStore((x) => x.initConfig);
+
+  useEffect(() => {
+    setConfigName(configName);
+    initConfig(configName, initialConfig);
+  }, [configName]);
+};

src/config/provider.tsx

@@ -0,0 +1,45 @@
+import { createContext, ReactNode, useContext, useEffect, useState } from 'react';
+import shallow from 'zustand/shallow';
+import { useColorTheme } from '../tools/color';
+import { ConfigType } from '../types/config';
+import { useConfigStore } from './store';
+
+export type ConfigContextType = {
+  config: ConfigType | undefined;
+  name: string | undefined;
+  setConfigName: (name: string) => void;
+};
+
+const ConfigContext = createContext<ConfigContextType>({
+  name: 'unknown',
+  config: undefined,
+  setConfigName: () => console.error('Provider not set'),
+});
+
+export const ConfigProvider = ({ children }: { children: ReactNode }) => {
+  const [configName, setConfigName] = useState<string>();
+  const { configs } = useConfigStore((s) => ({ configs: s.configs }), shallow);
+  const { setPrimaryColor, setSecondaryColor, setPrimaryShade } = useColorTheme();
+
+  const currentConfig = configs.find((c) => c.configProperties.name === configName);
+
+  useEffect(() => {
+    setPrimaryColor(currentConfig?.settings.customization.colors.primary || 'red');
+    setSecondaryColor(currentConfig?.settings.customization.colors.secondary || 'orange');
+    setPrimaryShade(currentConfig?.settings.customization.colors.shade || 6);
+  }, [configName]);
+
+  return (
+    <ConfigContext.Provider
+      value={{
+        name: configName,
+        config: currentConfig,
+        setConfigName: (name: string) => setConfigName(name),
+      }}
+    >
+      {children}
+    </ConfigContext.Provider>
+  );
+};
+
+export const useConfigContext = () => useContext(ConfigContext);

src/config/store.ts

@@ -0,0 +1,35 @@
+import create from 'zustand';
+import { ConfigType } from '../types/config';
+
+export const useConfigStore = create<UseConfigStoreType>((set, get) => ({
+  configs: [],
+  initConfig: (name, config) => {
+    set((old) => ({
+      ...old,
+      configs: [...old.configs.filter((x) => x.configProperties?.name !== name), config],
+    }));
+  },
+  // TODO: use callback with current config as input
+  updateConfig: async (name, updateCallback: (previous: ConfigType) => ConfigType) => {
+    const { configs } = get();
+    const currentConfig = configs.find((x) => x.configProperties.name === name);
+    if (!currentConfig) return;
+
+    // TODO: update config on server
+    const updatedConfig = updateCallback(currentConfig);
+
+    set((old) => ({
+      ...old,
+      configs: [...old.configs.filter((x) => x.configProperties.name !== name), updatedConfig],
+    }));
+  },
+}));
+
+interface UseConfigStoreType {
+  configs: ConfigType[];
+  initConfig: (name: string, config: ConfigType) => void;
+  updateConfig: (
+    name: string,
+    updateCallback: (previous: ConfigType) => ConfigType
+  ) => Promise<void>;
+}