From a603e991442133c546052c66adc0203f02f4d389 Mon Sep 17 00:00:00 2001
From: David Wheatley <hi@davwheat.dev>
Date: Mon, 20 Jun 2022 01:34:13 +0100
Subject: [PATCH 1/3] chore: export common settings options

---
 framework/core/js/src/admin/components/AdminPage.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/framework/core/js/src/admin/components/AdminPage.tsx b/framework/core/js/src/admin/components/AdminPage.tsx
index 39f8fe2951..acccd0c448 100644
--- a/framework/core/js/src/admin/components/AdminPage.tsx
+++ b/framework/core/js/src/admin/components/AdminPage.tsx
@@ -57,7 +57,7 @@ export type HTMLInputTypes =
   | 'url'
   | 'week';
 
-interface CommonSettingsItemOptions extends Mithril.Attributes {
+export interface CommonSettingsItemOptions extends Mithril.Attributes {
   setting: string;
   label: Mithril.Children;
   help?: Mithril.Children;

From 0b00c40708bd4e7f7692285e5dbe7d80b9f6420b Mon Sep 17 00:00:00 2001
From: David Wheatley <hi@davwheat.dev>
Date: Mon, 20 Jun 2022 02:59:43 +0100
Subject: [PATCH 2/3] feat: support custom reusable setting components for
 `buildSettingComponent`

---
 .../js/src/admin/components/AdminPage.tsx     | 46 ++++++++++++++++++-
 1 file changed, 44 insertions(+), 2 deletions(-)

diff --git a/framework/core/js/src/admin/components/AdminPage.tsx b/framework/core/js/src/admin/components/AdminPage.tsx
index acccd0c448..f15bc0f22c 100644
--- a/framework/core/js/src/admin/components/AdminPage.tsx
+++ b/framework/core/js/src/admin/components/AdminPage.tsx
@@ -11,6 +11,7 @@ import saveSettings from '../utils/saveSettings';
 import AdminHeader from './AdminHeader';
 import generateElementId from '../utils/generateElementId';
 import ColorPreviewInput from '../../common/components/ColorPreviewInput';
+import ItemList from '../../common/utils/ItemList';
 
 export interface AdminHeaderOptions {
   title: Mithril.Children;
@@ -120,7 +121,9 @@ export type SettingsComponentOptions =
   | SwitchSettingComponentOptions
   | SelectSettingComponentOptions
   | TextareaSettingComponentOptions
-  | ColorPreviewSettingComponentOptions;
+  | ColorPreviewSettingComponentOptions
+  // For custom settings component options
+  | string;
 
 /**
  * Valid attrs that can be returned by the `headerInfo` function
@@ -185,6 +188,41 @@ export default abstract class AdminPage<CustomAttrs extends IPageAttrs = IPageAt
     };
   }
 
+  /**
+   * A list of extension-defined custom setting components to be available through
+   * {@link AdminPage.buildSettingComponent}.
+   *
+   * The ItemList key represents the value for `type` to be provided when calling
+   * {@link AdminPage.buildSettingComponent}. Other attributes passed are provided
+   * as arguments to the function added to the ItemList.
+   *
+   * ItemList priority has no effect here.
+   *
+   * @example
+   * ```tsx
+   * extend(AdminPage.prototype, 'customSettingComponents', function (items) {
+   *   // You can access the AdminPage instance with `this` to access its `settings` property.
+   *
+   *   // Prefixing the key with your extension ID is recommended to avoid collisions.
+   *   items.add('my-ext.setting-component', (attrs) => {
+   *     return (
+   *       <div className={attrs.className}>
+   *         <label>{attrs.label}</label>
+   *         {attrs.help && <p class="helpText">{attrs.help}</p>}
+   *
+   *         My setting component!
+   *       </div>
+   *     );
+   *   })
+   * })
+   * ```
+   */
+  customSettingComponents(): ItemList<(attributes: CommonSettingsItemOptions) => Mithril.Children> {
+    const items = new ItemList<(attributes: CommonSettingsItemOptions) => Mithril.Children>();
+
+    return items;
+  }
+
   /**
    * `buildSettingComponent` takes a settings object and turns it into a component.
    * Depending on the type of input, you can set the type to 'bool', 'select', or
@@ -228,6 +266,8 @@ export default abstract class AdminPage<CustomAttrs extends IPageAttrs = IPageAt
       return entry.call(this);
     }
 
+    const customSettingComponents = this.customSettingComponents();
+
     const { setting, help, type, label, ...componentAttrs } = entry;
 
     const value = this.setting(setting)();
@@ -262,8 +302,10 @@ export default abstract class AdminPage<CustomAttrs extends IPageAttrs = IPageAt
           {...otherAttrs}
         />
       );
+    } else if (customSettingComponents.has(type)) {
+      return customSettingComponents.get(type)({ setting, help, label, ...componentAttrs });
     } else {
-      componentAttrs.className = classList(['FormControl', componentAttrs.className]);
+      componentAttrs.className = classList('FormControl', componentAttrs.className);
 
       if ((TextareaSettingTypes as readonly string[]).includes(type)) {
         settingElement = <textarea id={inputId} aria-describedby={helpTextId} bidi={this.setting(setting)} {...componentAttrs} />;

From 818bb769d13291e84394c147407db555f8ccda94 Mon Sep 17 00:00:00 2001
From: David Wheatley <hi@davwheat.dev>
Date: Mon, 20 Jun 2022 03:41:59 +0100
Subject: [PATCH 3/3] fix: oops, buggered the typings

---
 framework/core/js/src/admin/components/AdminPage.tsx | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/framework/core/js/src/admin/components/AdminPage.tsx b/framework/core/js/src/admin/components/AdminPage.tsx
index f15bc0f22c..71517bd461 100644
--- a/framework/core/js/src/admin/components/AdminPage.tsx
+++ b/framework/core/js/src/admin/components/AdminPage.tsx
@@ -113,6 +113,11 @@ export interface ColorPreviewSettingComponentOptions extends CommonSettingsItemO
   type: typeof ColorPreviewSettingType;
 }
 
+export interface CustomSettingComponentOptions extends CommonSettingsItemOptions {
+  type: string;
+  [key: string]: unknown;
+}
+
 /**
  * All valid options for the setting component builder.
  */
@@ -122,8 +127,7 @@ export type SettingsComponentOptions =
   | SelectSettingComponentOptions
   | TextareaSettingComponentOptions
   | ColorPreviewSettingComponentOptions
-  // For custom settings component options
-  | string;
+  | CustomSettingComponentOptions;
 
 /**
  * Valid attrs that can be returned by the `headerInfo` function