schon/storefront/app/composables/config/useProjectConfig.ts

import type { AppConfig } from 'nuxt/schema';

export type DemoConfigKey = keyof AppConfig['ui'];

export const useProjectConfig = () => {
	const appConfig = useAppConfig();
	const { $notify } = useNuxtApp();
	const { t } = useI18n();

	const demoOverridesCookie = useCookie<Partial<AppConfig['ui']>>('nuxt-demo-overrides', {
		default: () => ({}),
		path: '/',
	});

	const isDemoMode = useState('demo-mode', () => {
		// return
		return false;
	});

	const demoOverrides = computed({
		get: () => demoOverridesCookie.value || {},
		set: (value) => {
			demoOverridesCookie.value = value;
		},
	});

	const uiConfig = computed(() => {
		const config = {
			...appConfig.ui,
		};

		if (isDemoMode.value) {
			Object.keys(demoOverrides.value).forEach((key) => {
				if (key in config) {
					config[key as DemoConfigKey] = demoOverrides.value[key as DemoConfigKey];
				}
			});
		}

		return config;
	});

	const getFlag = <K extends DemoConfigKey>(key: K): AppConfig['ui'][K] => {
		if (isDemoMode.value && key in demoOverrides.value) {
			return demoOverrides.value[key] as AppConfig['ui'][K];
		}
		return appConfig.ui[key];
	};

	const setDemoFlag = <K extends DemoConfigKey>(key: K, value: AppConfig['ui'][K]) => {
		if (!isDemoMode.value) return;

		demoOverrides.value = {
			...demoOverrides.value,
			[key]: value,
		};
	};

	const resetDemoFlags = () => {
		demoOverrides.value = {};
	};

	const availableFlags = computed(() => {
		const flags: Array<{
			key: DemoConfigKey;
			value: boolean;
			label: string;
			description?: string;
		}> = [];

		Object.keys(appConfig.ui).forEach((key) => {
			const k = key as DemoConfigKey;
			const value = appConfig.ui[k];

			if (typeof value === 'boolean') {
				flags.push({
					key: k,
					value: getFlag(k) as boolean,
					label: formatKeyToLabel(key),
					description: getFlagDescription(k),
				});
			}
		});

		return flags;
	});

	const formatObjectAsCode = (obj: Record<string, boolean>, indent = 2): string => {
		const spaces = ' '.repeat(indent);
		const entries = Object.entries(obj)
			.map(([key, value]) => `${spaces}${key}: ${value}`)
			.join(',\n');

		return `ui: {
${entries}
}`;
	};

	const generateConfigCode = () => {
		const currentConfig = uiConfig.value;
		const booleanConfig: Record<string, boolean> = {};

		Object.entries(currentConfig).forEach(([key, value]) => {
			if (typeof value === 'boolean') {
				booleanConfig[key] = value;
			}
		});

		return formatObjectAsCode(booleanConfig);
	};

	const copyToClipboard = async (text: string) => {
		if (!import.meta.client) return false;

		await navigator.clipboard.writeText(text);

		$notify({
			message: t('popup.success.configCopy'),
			type: 'success',
		});
	};

	const formatKeyToLabel = (key: string): string => {
		return key
			.replace(/([A-Z])/g, ' $1')
			.replace(/^./, (str) => str.toUpperCase())
			.trim();
	};

	const getFlagDescription = (key: DemoConfigKey): string => {
		const descriptions: Partial<Record<DemoConfigKey, string>> = {
			showBreadcrumbs: t('demo.descriptions.showBreadcrumbs'),
			showSearchBar: t('demo.descriptions.showSearchBar'),
		};
		return descriptions[key] || '';
	};

	return {
		uiConfig,
		isDemoMode,
		demoOverrides,
		availableFlags,
		setDemoFlag,
		resetDemoFlags,
		getFlag,
		generateConfigCode,
		copyToClipboard,
	};
};