From a138e8d8b7903e303c99439003496d93385333a4 Mon Sep 17 00:00:00 2001 From: ajnart Date: Thu, 20 Aug 2026 16:01:27 +0200 Subject: [PATCH] refactor: drop clock option compatibility --- apps/docs/docs/widgets/clock/index.mdx | 7 ++--- apps/docs/docs/widgets/clock/index.ts | 27 ++++---------------- packages/translation/src/lang/en.json | 11 ++------ packages/widgets/src/clock/advanced-view.tsx | 6 ++--- packages/widgets/src/clock/component.tsx | 11 +++----- packages/widgets/src/clock/format.ts | 10 ++++---- packages/widgets/src/clock/index.ts | 23 ++++++++--------- 7 files changed, 32 insertions(+), 63 deletions(-) diff --git a/apps/docs/docs/widgets/clock/index.mdx b/apps/docs/docs/widgets/clock/index.mdx index 2ee0edf57..1f453d33f 100644 --- a/apps/docs/docs/widgets/clock/index.mdx +++ b/apps/docs/docs/widgets/clock/index.mdx @@ -24,9 +24,10 @@ comparable card. The primary clock includes a segmented 24-hour rail with a curr time, six-hour ticks, and a legend for night, dawn, day, and dusk. These phases are based on local clock time and are not astronomical sunrise or sunset calculations. Secondary cards stop after their localized date and timezone offsets. -The compact widget remains a single numeric clock. The 12/24-hour and seconds switches apply unless a custom Day.js -time format overrides them. The date-format selector shows common presets with live examples, while the custom date -format preserves support for any compatible Day.js tokens. Secondary cities always include a short localized date and a +The compact widget remains a single numeric clock. The time-format selector shows common Day.js presets with live +examples and applies to the primary clock. Choosing a format with seconds enables second-level updates; 12-hour and +24-hour display are selected through those same formats. The date-format selector likewise +shows live Day.js examples and their tokens. Secondary cities always include a short localized date and a Yesterday, Today, or Tomorrow label relative to the primary timezone. UTC and relative offsets follow current timezone rules, including daylight-saving changes. diff --git a/apps/docs/docs/widgets/clock/index.ts b/apps/docs/docs/widgets/clock/index.ts index 5a516b404..f34cae4ed 100644 --- a/apps/docs/docs/widgets/clock/index.ts +++ b/apps/docs/docs/widgets/clock/index.ts @@ -20,18 +20,6 @@ export const clockWidget: WidgetDefinition = { values: { type: "string" }, defaultValue: "-", }, - { - name: "24-hour format", - description: "Use 24-hour format instead of 12-hour format when no custom time format is set.", - values: { type: "boolean" }, - defaultValue: "yes", - }, - { - name: "Display seconds", - description: "Show seconds when no custom time format is set.", - values: { type: "boolean" }, - defaultValue: "no", - }, { name: "Use fixed timezone", description: "Select custom timezone to display instead of the client timezone.", @@ -57,16 +45,11 @@ export const clockWidget: WidgetDefinition = { defaultValue: "dddd, MMMM D", }, { - name: "Custom time format", - description: "Use Day.js tokens to override the 12/24-hour and seconds options.", - values: "A Day.js format such as HH:mm:ss or h:mm A", - defaultValue: "-", - }, - { - name: "Custom date format", - description: "Use Day.js tokens to override the selected date format.", - values: "A Day.js format such as YYYY-MM-DD", - defaultValue: "-", + name: "Time format", + description: + "Choose a common Day.js time format with a live example. The format controls 12/24-hour display and seconds.", + values: "HH:mm, HH:mm:ss, h:mm A, or h:mm:ss A", + defaultValue: "HH:mm", }, { name: "Show weather", diff --git a/packages/translation/src/lang/en.json b/packages/translation/src/lang/en.json index 9a688f2a1..88d739cec 100644 --- a/packages/translation/src/lang/en.json +++ b/packages/translation/src/lang/en.json @@ -3153,9 +3153,6 @@ "label": "24-hour format", "description": "Use 24-hour format instead of 12-hour format" }, - "showSeconds": { - "label": "Display seconds" - }, "useCustomTimezone": { "label": "Use a fixed timezone" }, @@ -3171,12 +3168,8 @@ "description": "Choose a Day.js preset. Each option shows a live example and its format tokens." }, "customTimeFormat": { - "label": "Custom time format", - "description": "Use Day.js tokens to override the 12/24-hour and seconds options." - }, - "customDateFormat": { - "label": "Custom date format", - "description": "Use Day.js tokens to override the selected date format." + "label": "Time format", + "description": "Choose a Day.js preset. The selected format controls 12/24-hour display and whether the clock updates every second." }, "showWeather": { "label": "Show weather", diff --git a/packages/widgets/src/clock/advanced-view.tsx b/packages/widgets/src/clock/advanced-view.tsx index 1fff55291..78ac239af 100644 --- a/packages/widgets/src/clock/advanced-view.tsx +++ b/packages/widgets/src/clock/advanced-view.tsx @@ -222,13 +222,11 @@ const ClockTime = ({ if (!entry.zonedTime) return null; let formattedTime = formatLocalizedTime(now, locale, { hour12: clockTimeFormatUses12Hours(options.customTimeFormat, options.is24HourFormat), - includeSeconds: clockTimeFormatShowsSeconds(options.customTimeFormat, options.showSeconds), + includeSeconds: clockTimeFormatShowsSeconds(options.customTimeFormat), timeZone: entry.timeZone, }); if (primary) { - formattedTime = entry.zonedTime.format( - resolveClockTimeFormat(options.customTimeFormat, options.is24HourFormat, options.showSeconds), - ); + formattedTime = entry.zonedTime.format(resolveClockTimeFormat(options.customTimeFormat, options.is24HourFormat)); } const accessibleDate = formatLocalizedDate(now, locale, { dateStyle: "medium", diff --git a/packages/widgets/src/clock/component.tsx b/packages/widgets/src/clock/component.tsx index 4eea4b8c2..45180cff9 100644 --- a/packages/widgets/src/clock/component.tsx +++ b/packages/widgets/src/clock/component.tsx @@ -15,7 +15,7 @@ dayjs.extend(advancedFormat); export default function ClockWidget({ options, width, height, displayMode }: WidgetComponentProps<"clock">) { const isAdvanced = displayMode === "advanced"; - const showSeconds = clockTimeFormatShowsSeconds(options.customTimeFormat, options.showSeconds); + const showSeconds = clockTimeFormatShowsSeconds(options.customTimeFormat); const time = useCurrentTime({ showSeconds }); const requestedTimeZone = options.useCustomTimezone ? options.timezone : getResolvedLocalTimeZone(); const primaryTimeZoneInvalid = !isTimeZoneSupported(requestedTimeZone); @@ -37,12 +37,7 @@ export default function ClockWidget({ options, width, height, displayMode }: Wid return
--:--
; } - const resolvedTimeFormat = resolveClockTimeFormat( - options.customTimeFormat, - options.is24HourFormat, - options.showSeconds, - ); - const resolvedDateFormat = options.customDateFormat || options.dateFormat; + const resolvedTimeFormat = resolveClockTimeFormat(options.customTimeFormat, options.is24HourFormat); const minimumAxis = Math.min(width, height * 1.5); let sizing: "xs" | "sm" | "md" = "md"; if (minimumAxis < 128) sizing = "xs"; @@ -76,7 +71,7 @@ export default function ClockWidget({ options, width, height, displayMode }: Wid {options.showDate && ( - {zonedTime?.format(resolvedDateFormat)} + {zonedTime?.format(options.dateFormat)} )} diff --git a/packages/widgets/src/clock/format.ts b/packages/widgets/src/clock/format.ts index 31852fd74..934bc818d 100644 --- a/packages/widgets/src/clock/format.ts +++ b/packages/widgets/src/clock/format.ts @@ -1,9 +1,9 @@ export const automaticTimeFormat = "automatic"; -export const resolveClockTimeFormat = (format: string, legacyIs24HourFormat: boolean, showSeconds = false) => { +export const resolveClockTimeFormat = (format: string, legacyIs24HourFormat: boolean) => { if (format && format !== automaticTimeFormat) return format; - if (legacyIs24HourFormat) return showSeconds ? "HH:mm:ss" : "HH:mm"; - return showSeconds ? "hh:mm:ss A" : "hh:mm A"; + if (legacyIs24HourFormat) return "HH:mm"; + return "hh:mm A"; }; export const clockTimeFormatUses12Hours = (format: string, legacyIs24HourFormat: boolean) => { @@ -12,8 +12,8 @@ export const clockTimeFormatUses12Hours = (format: string, legacyIs24HourFormat: return /h{1,2}/.test(formatWithoutLiterals); }; -export const clockTimeFormatShowsSeconds = (format: string, showSeconds = false) => { - if (!format || format === automaticTimeFormat) return showSeconds; +export const clockTimeFormatShowsSeconds = (format: string) => { + if (!format || format === automaticTimeFormat) return false; const formatWithoutLiterals = format.replace(/\[[^\]]*\]/g, ""); return /s{1,2}/.test(formatWithoutLiterals); }; diff --git a/packages/widgets/src/clock/index.ts b/packages/widgets/src/clock/index.ts index 344181b97..8f3fdd06f 100644 --- a/packages/widgets/src/clock/index.ts +++ b/packages/widgets/src/clock/index.ts @@ -46,9 +46,6 @@ export const { definition, componentLoader } = createWidgetDefinition("clock", { defaultValue: true, withDescription: true, }), - showSeconds: factory.switch({ - defaultValue: false, - }), useCustomTimezone: factory.switch({ defaultValue: false }), timezone: factory.select({ options: timeZoneOptions, @@ -76,12 +73,14 @@ export const { definition, componentLoader } = createWidgetDefinition("clock", { defaultValue: "dddd, MMMM D", withDescription: true, }), - customTimeFormat: factory.text({ - defaultValue: "", - withDescription: true, - }), - customDateFormat: factory.text({ - defaultValue: "", + customTimeFormat: factory.select({ + options: [ + { value: "HH:mm", label: `${dayjs().format("HH:mm")} · HH:mm` }, + { value: "HH:mm:ss", label: `${dayjs().format("HH:mm:ss")} · HH:mm:ss` }, + { value: "h:mm A", label: `${dayjs().format("h:mm A")} · h:mm A` }, + { value: "h:mm:ss A", label: `${dayjs().format("h:mm:ss A")} · h:mm:ss A` }, + ], + defaultValue: "HH:mm", withDescription: true, }), showWeather: factory.switch({ @@ -111,6 +110,9 @@ export const { definition, componentLoader } = createWidgetDefinition("clock", { }), }), { + is24HourFormat: { + shouldHide: () => true, + }, customTitle: { shouldHide: (options) => !options.customTitleToggle, }, @@ -120,9 +122,6 @@ export const { definition, componentLoader } = createWidgetDefinition("clock", { dateFormat: { shouldHide: (options) => !options.showDate, }, - customDateFormat: { - shouldHide: (options) => !options.showDate, - }, weatherLocation: { shouldHide: (options) => !options.showWeather, },