Settings

Copy to Clipboardimport { parseSchemaSettingConfig } from '@kit/settings/schema-config';
import { z } from 'zod';
 
export const settingsSchemas = parseSchemaSettingConfig({
  schema: {
    user_name: { schema: z.string().default(''), storage: 'user_attributes' },
    user_bio: { schema: z.string().max(500).default(''), storage: 'user_settings' },
    theme: { schema: z.enum(['light', 'dark', 'system']), storage: 'user_settings' },
  },
});

Expand
Copy to Clipboardimport { parseUISettingConfig } from '@kit/settings/ui-config';
import { z } from 'zod';
 
export const settingsUI = parseUISettingConfig({
  ui: [
    {
      group: 'index',
      label: 'About you',
      settingsPages: [
        {
          slug: 'profile',
          title: 'Profile',
          icon: 'User',
          settings: [
            {
              type: 'form',
              id: 'profile-form',
              settings: [
                { type: 'text', slug: 'user_name', label: 'Name' },
                { type: 'textarea', slug: 'user_bio', label: 'Bio' },
                {
                  slug: null,
                  name: 'confirm_email',
                  type: 'text',
                  schema: z.string().email(),
                  clearOnSubmit: true,
                  onSubmit: async (values) => {
                    if (values.user_email !== values.confirm_email) {
                      throw new Error('Email mismatch');
                    }
                  },
                },
              ],
            },
          ],
        },
      ],
    },
  ],
});
Expand

Copy to Clipboardimport type { QuickFormInput } from '@kit/utils/quick-form';
 
const UserMediaInput: QuickFormInput<{ triggerClassName?: string }> = ({ field }) => {
  return <input value={field.value ?? ''} onChange={(e) => field.onChange(e.target.value)} />;
};
 
const EXTRA_INPUTS = {
  user_media: UserMediaInput,
};

Copy to Clipboardconst extraInputs = useApplyFilter('get_settings_extra_inputs', EXTRA_INPUTS);
 
<SettingsPages
  inputs={extraInputs}
  settingsSchemas={filteredSettingsSchema}
  settingsUI={settingsConfig}
  clientTrpc={clientTrpc}
  params={awaitedParams}
  Wrapper={Wrapper}
/>

Expand
Copy to Clipboardimport { enqueueServerFilter } from '@kit/utils/filters/server';
 
enqueueServerFilter('server_get_settings_schema', {
  name: 'appSettingsSchema',
  priority: 1,
  fn: (input) => ({
    schema: {
      ...input.schema,
      ...settingsSchemas.schema,
    },
  }),
});
 
enqueueServerFilter('server_get_settings_server_config', {
  name: 'appSettingsProviders',
  fn: (input) => ({
    ...input,
    providers: {
      ...input.providers,
      // organization_settings: organizationSettingsStorage,
    },
  }),
});
Expand

Expand
Copy to Clipboardimport { parseI18nConfig } from '@kit/i18n/config';
import { DEFAULT_LANG, SUPPORTED_LANGS } from '@kit/shared/config/defined-languages';
import { applyCrossEnvAsyncFilter, applyCrossEnvFilter } from '@kit/utils/filters/cross-env';
import { initCrossEnvFilters } from '~/lib/init-cross-env-filters';
 
initCrossEnvFilters();
 
async function i18nResolver(language: string, namespace: string) {
  const packageTranslations = await applyCrossEnvAsyncFilter('cross_env_get_translations', null, {
    language,
    namespace,
  });
 
  if (packageTranslations) return packageTranslations;
  const data = await import(`../public/locales/${language}/${namespace}.json`);
  return data as Record<string, string>;
}
 
const namespaces = applyCrossEnvFilter('cross_env_get_namespaces', ['dashboard', 'settings']);
 
export const i18nConfig = parseI18nConfig({
  defaultLanguage: DEFAULT_LANG,
  languages: SUPPORTED_LANGS,
  namespaces,
  resolver: i18nResolver,
});
Expand

Copy to Clipboardconst settingsConfig = useSettingsUiConfig();
const filteredSettingsSchema = useApplyFilter('get_settings_schema', settingsSchemas);
const extraInputs = useApplyFilter('get_settings_extra_inputs', EXTRA_INPUTS);
 
<SettingsPages
  inputs={extraInputs}
  settingsSchemas={filteredSettingsSchema}
  settingsUI={settingsConfig}
  clientTrpc={clientTrpc}
  params={awaitedParams}
  Wrapper={Wrapper}
/>

Copy to Clipboardimport { getServerSettings } from '@kit/settings/shared/server/get-server-settings';
 
type AppSettingsSchema = typeof settingsSchemas.schema;
 
const settings = await getServerSettings<AppSettingsSchema, ['theme', 'user_name']>({
  settingKeys: ['theme', 'user_name'],
});

Copy to Clipboardimport { getClientSettings } from '@kit/settings/shared';
 
type AppSettingsSchema = typeof settingsSchemas.schema;
 
const values = await getClientSettings<AppSettingsSchema, 'theme'>({
  clientTrpc,
  settingKeys: ['theme'],
});

Copy to Clipboardimport { useClientSettings } from '@kit/settings/shared';
 
type AppSettingsSchema = typeof settingsSchemas.schema;
 
const query = useClientSettings<AppSettingsSchema, 'theme'>({
  clientTrpc,
  settingKeys: ['theme'],
});

Copy to Clipboardawait clientTrpc.updateSettingsForm.fetch({
  settingKeys: ['theme', 'user_name'],
  values: { theme: 'dark', user_name: 'Arnaud' },
});

Copy to Clipboardimport { applyServerFilter } from '@kit/utils/filters/server';
import { SettingServerModel } from '@kit/settings/shared/server/setting-server-model';
import { type SettingSchemaMap } from '@kit/settings/shared';
 
const fullSchema = applyServerFilter('server_get_settings_schema', { schema: {} as SettingSchemaMap<string> });
const serverConfig = applyServerFilter('server_get_settings_server_config', { providers: {} });
const model = new SettingServerModel(async () => db, serverConfig, fullSchema);
 
await model.updateSettings({ theme: 'dark' });