Define the type/schema that allows the settings for an application to be described, this will be used to generate a form to manage settings.

[heswell]

Application settings are a collection of properties. To keep things simple to start, lets assume simple types. so

• string
• boolean
• number

We need to define a schema that allows devs to define the properties available to an application. Application developers will include a (JSON) document that describes the application settings properties. This will be used to build a custom form that presents the properties to the user and allows them to update the properties. Lets assume three simple properties:

• themeMode: "light", "dark"
• region: "us", "emea", "apac"
• dateDisplayFormat: "dd/mm/yyyy", "mm/dd/yyyy", ""dd MMMM yyyy"

Example of what a simple structure to capture these details shown below. We might need more information than this to allow us to support a better UX for users (eg help text, grouping, sub sections ?) but this set is a good start

{
   "properties": [
   {
      "name": "themeMode",
      "label": "Mode",
      "values": ["light","dark"],
      "defaultValue": "light",
      "type": "string"
   },
   {
      "name": "dataFormatPattern",
      "label": "Date Formatting",
      "values": ["dd/mm/yyyy", "mm/dd/yyyy", "dd MMMM yyyy"],
      "defaultValue": "dd/mm/yyyy",
      "type": "string"
   },
   {
      "name": "region",
      "label": "Region",
      "values": [{value: "us", label:"US"},{value: "apac", label: "Asia Pacific"},{value: "emea", label: "Europe, Middle East & Africa"}],
      "defaultValue": "light",
      "type": "string"
   }
]
}

and our TypeScript type to describe this structure would be something like

type SettingsProperty<T extends string | number | boolean = string> = {
name: string;
label: string;
values?: T[];
defaultValue: T;
type: 'string' | 'boolean' | 'number';
}

interface SettingsSchema {
properties: SettingsProperty[];
}

``