From 86cd3d351cc0509e3150e91a886af540866cc866 Mon Sep 17 00:00:00 2001 From: Chris Joe Date: Mon, 2 Mar 2026 01:17:15 +1300 Subject: [PATCH 1/5] feat: adding type definitions for basic clay interfaces --- dev/config.js | 3 + index.d.ts | 233 ++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 236 insertions(+) create mode 100644 index.d.ts diff --git a/dev/config.js b/dev/config.js index 0499478..58e4768 100644 --- a/dev/config.js +++ b/dev/config.js @@ -1,6 +1,9 @@ 'use strict'; /* eslint-disable quotes */ +/** + * @type {import("..").Config} + */ module.exports = [ { "type": "heading", diff --git a/index.d.ts b/index.d.ts new file mode 100644 index 0000000..599506e --- /dev/null +++ b/index.d.ts @@ -0,0 +1,233 @@ +import ClayConfig from "./src/scripts/lib/clay-config"; + +type FilterScalar = { + [K in keyof T]: T[K] extends string | number | boolean | null ? T[K] : never; +}; + +export declare type ComponentTypes = + | "section" + | "color" + | "footer" + | "heading" + | "input" + | "select" + | "submit" + | "text" + | "toggle" + | "radiogroup" + | "checkboxgroup" + | "button" + | "slider"; + +export declare type Capabilities = + | "PLATFORM_APLITE" + | "NOT_PLATFORM_APLITE" + | "PLATFORM_BASALT" + | "NOT_PLATFORM_BASALT" + | "PLATFORM_CHALK" + | "NOT_PLATFORM_CHALK" + | "PLATFORM_DIORITE" + | "NOT_PLATFORM_DIORITE" + | "PLATFORM_EMERY" + | "NOT_PLATFORM_EMERY" + | "PLATFORM_FLINT" + | "NOT_PLATFORM_FLINT" + | "PLATFORM_GABBRO" + | "NOT_PLATFORM_GABBRO" + | "BW" + | "NOT_BW" + | "COLOR" + | "NOT_COLOR" + | "MICROPHONE" + | "NOT_MICROPHONE" + | "SMARTSTRAP" + | "NOT_SMARTSTRAP" + | "SMARTSTRAP_POWER" + | "NOT_SMARTSTRAP_POWER" + | "HEALTH" + | "NOT_HEALTH" + | "RECT" + | "NOT_RECT" + | "ROUND" + | "NOT_ROUND" + | "DISPLAY_144x168" + | "NOT_DISPLAY_144x168" + | "DISPLAY_180x180_ROUND" + | "NOT_DISPLAY_180x180_ROUND" + | "DISPLAY_200x228" + | "NOT_DISPLAY_200x228"; + +export declare interface BaseComponent { + type: ComponentTypes; +} + +export declare interface PebbleAttributes { + id?: string; + capabilities?: Capabilities[]; + group?: string; + messageKey?: string; +} + +export declare interface Option { + label: string; + value: T; +} + +export declare interface OptionGroup< + T extends string, + O extends Option = Option, +> { + label: string; + value: O[]; +} + +export declare interface SectionComponent extends BaseComponent { + type: "section"; + items: Block[]; + capabilities?: Capabilities[]; +} + +export declare interface HeadingComponent + extends BaseComponent, PebbleAttributes { + type: "heading"; + defaultValue: string; + size?: 1 | 2 | 3 | 4 | 5 | 6; +} + +export declare interface TextComponent extends BaseComponent, PebbleAttributes { + type: "text"; + defaultValue: string; +} + +export declare interface InputComponent + extends BaseComponent, PebbleAttributes { + type: "input"; + label: string; + attributes?: Partial>; + defaultValue?: string; + description?: string; +} + +export declare interface ToggleComponent + extends BaseComponent, PebbleAttributes { + type: "toggle"; + label: string; + defaultValue?: boolean; + description?: string; +} + +export declare interface SelectComponent + extends BaseComponent, PebbleAttributes { + type: "select"; + defaultValue: T; + label: string; + options: Option | OptionGroup; + description?: string; +} + +export declare interface ColorComponent + extends BaseComponent, PebbleAttributes { + type: "color"; + label: string; + allowGray?: boolean; + defaultValue?: number | string; + description?: string; + layout?: "COLOR" | "GRAY" | "BLACK_WHITE" | (string | false)[][]; + sunlight?: boolean; +} + +export declare interface RadioGroupComponent + extends BaseComponent, PebbleAttributes { + type: "radiogroup"; + defaultValue: T; + label: string; + options: Option; + description?: string; +} + +export declare interface CheckboxComponent + extends BaseComponent, PebbleAttributes { + type: "checkboxgroup"; + // TODO: I think there's a way to type check that defaultValue and options are the same length? + defaultValue: boolean[]; + label: string; + options: string[]; + description?: string; +} + +export declare interface ButtonComponent extends BaseComponent { + type: "button"; + defaultValue: string; + id?: string; + capabilities?: Capabilities[]; + description?: string; + group?: string; + primary?: boolean; +} + +export declare interface SliderComponent + extends BaseComponent, PebbleAttributes { + type: "slider"; + defaultValue: number; + label: string; + min: number; + max: number; + description?: string; + step?: number; +} + +export declare interface SubmitComponent + extends BaseComponent, PebbleAttributes { + type: "submit"; + defaultValue: string; + id?: string; + capabilities?: Capabilities[]; + group?: string; +} + +export declare type Block = + | SectionComponent + | HeadingComponent + | TextComponent + | InputComponent + | ToggleComponent + | SelectComponent + | ColorComponent + | RadioGroupComponent + | CheckboxComponent + | ButtonComponent + | SliderComponent + | SubmitComponent; + +export declare type Config = Block[]; + +export default interface ClayOptions { + autoHandleEvents: boolean; + userData: M; +} + +// TODO: mock type for minified? +export declare function CustomFunction( + this: ClayConfig & { meta: { userData: M } }, + minified: any, +): void; + +export declare class Clay { + constructor( + config: Config, + customFn: CustomFunction, + options: ClayOptions, + ); + version: string; + config: Config; + customFn: CustomFunction; + /** + * This will only be populated in the showConfiguration event handler. + */ + meta: { + userData: M; + watchToken: string; + accountToken: string; + activeWatchInfo: string; + }; +} From 673949347686fc035592d240e61cc368dd9f5bf3 Mon Sep 17 00:00:00 2001 From: Chris Joe Date: Mon, 2 Mar 2026 04:09:16 +1300 Subject: [PATCH 2/5] fix: add typeof for custom function type usage --- index.d.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/index.d.ts b/index.d.ts index 599506e..4af53fd 100644 --- a/index.d.ts +++ b/index.d.ts @@ -215,12 +215,12 @@ export declare function CustomFunction( export declare class Clay { constructor( config: Config, - customFn: CustomFunction, + customFn: typeof CustomFunction, options: ClayOptions, ); version: string; config: Config; - customFn: CustomFunction; + customFn: typeof CustomFunction; /** * This will only be populated in the showConfiguration event handler. */ From 5babfdf63979b0b2e8bded94d0d67d0424f6b3e1 Mon Sep 17 00:00:00 2001 From: Chris Joe Date: Mon, 2 Mar 2026 04:23:35 +1300 Subject: [PATCH 3/5] fix: options weren't arrays fix: attributes for select --- index.d.ts | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/index.d.ts b/index.d.ts index 4af53fd..54a24e0 100644 --- a/index.d.ts +++ b/index.d.ts @@ -121,7 +121,8 @@ export declare interface SelectComponent type: "select"; defaultValue: T; label: string; - options: Option | OptionGroup; + options: (Option | OptionGroup)[]; + attributes?: Partial>; description?: string; } @@ -139,9 +140,9 @@ export declare interface ColorComponent export declare interface RadioGroupComponent extends BaseComponent, PebbleAttributes { type: "radiogroup"; - defaultValue: T; + defaultValue?: T; label: string; - options: Option; + options: Option[]; description?: string; } From 83dffea9dcc2f3e118651494b9d1f767bd11c8ab Mon Sep 17 00:00:00 2001 From: Chris Joe Date: Mon, 2 Mar 2026 04:24:01 +1300 Subject: [PATCH 4/5] fix: shift defaultValue as optional for fields --- index.d.ts | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/index.d.ts b/index.d.ts index 54a24e0..1d942b0 100644 --- a/index.d.ts +++ b/index.d.ts @@ -119,10 +119,10 @@ export declare interface ToggleComponent export declare interface SelectComponent extends BaseComponent, PebbleAttributes { type: "select"; - defaultValue: T; label: string; options: (Option | OptionGroup)[]; attributes?: Partial>; + defaultValue?: T; description?: string; } @@ -140,9 +140,9 @@ export declare interface ColorComponent export declare interface RadioGroupComponent extends BaseComponent, PebbleAttributes { type: "radiogroup"; - defaultValue?: T; label: string; options: Option[]; + defaultValue?: T; description?: string; } @@ -158,9 +158,9 @@ export declare interface CheckboxComponent export declare interface ButtonComponent extends BaseComponent { type: "button"; - defaultValue: string; id?: string; capabilities?: Capabilities[]; + defaultValue?: string; description?: string; group?: string; primary?: boolean; @@ -169,10 +169,10 @@ export declare interface ButtonComponent extends BaseComponent { export declare interface SliderComponent extends BaseComponent, PebbleAttributes { type: "slider"; - defaultValue: number; label: string; min: number; max: number; + defaultValue?: number; description?: string; step?: number; } From 29f7a0914fe9a4441e6d422d2f869c5830380268 Mon Sep 17 00:00:00 2001 From: Chris Joe Date: Mon, 2 Mar 2026 12:01:00 +1300 Subject: [PATCH 5/5] fix: rename Config to ClayUserConfig --- index.d.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/index.d.ts b/index.d.ts index 1d942b0..5611a51 100644 --- a/index.d.ts +++ b/index.d.ts @@ -200,7 +200,7 @@ export declare type Block = | SliderComponent | SubmitComponent; -export declare type Config = Block[]; +export declare type ClayUserConfig = Block[]; export default interface ClayOptions { autoHandleEvents: boolean; @@ -215,12 +215,12 @@ export declare function CustomFunction( export declare class Clay { constructor( - config: Config, + config: ClayUserConfig, customFn: typeof CustomFunction, options: ClayOptions, ); version: string; - config: Config; + config: ClayUserConfig; customFn: typeof CustomFunction; /** * This will only be populated in the showConfiguration event handler.