Interest

The @kit/settings package is a type-safe settings management system designed to simplify the development of settings pages. It provides a declarative approach to define, store, and render settings with built-in support for multiple storage providers, form validation, and UI rendering.

The problem

When you want to implement a settings section in your application, you need to:

• Define the page endpoints
• Fetch the settings from the database
• Render a settings form with react-hook-form to handle type validation
• Handle the form submission to the database
• Request the setting to the database to reuse it in the appropriate place

As you have to do this for each settings page, it leads to a lot of duplicated code.

The solution

To solve this, we chose an architecture close to a MVC (Model-View-Controller) architecture.

Settings architecture schema

That way, you just have to define your settings in a type-safe object and you are good to go. The settings UI, storage management and settings fetching is handled by the package.

The settings configuration is made of 3 objects from :

• a UI config object that control the ui (found in settings.ui.config.ts file)
• a schema config object that define zod schemas used for type checking (found in settings.schema.config.ts file)
• a server config object that contains the database controllers (found in kit/shared/src/config/settings.server.config.ts file)

Features

• Centralized Configuration: Define all settings in a single object
• Type Safety: Full typescript support with autocompletion for setting keys
• Database Connection: Automatically fetch and save settings to the appropriate database tables
• Schema Validation: Uses Zod schemas for validation before database update
• Form Generation: Automatically generate forms
• Navigation: Built-in navigation UI
• Customization: Easily add custom UI and storage providers