Skip to content

Commit c3adcf3

Browse files
waleedlatif1waleedlatif1
authored
feat(time-picker): added timepicker emcn component, added to playground, added searchable prop for dropdown, added more timezones for schedule, updated license and notice date (#2668)
* feat(time-picker): added timepicker emcn component, added to playground, added searchable prop for dropdown, added more timezones for schedule, updated license and notice date * removed unused params, cleaned up redundant utils
1 parent 4df5d56 commit c3adcf3

12 files changed

Lines changed: 411 additions & 179 deletions

File tree

‎LICENSE‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -187,7 +187,7 @@
187187
same "printed page" as the copyright notice for easier
188188
identification within third-party archives.
189189

190-
Copyright 2025 Sim Studio, Inc.
190+
Copyright 2026 Sim Studio, Inc.
191191

192192
Licensed under the Apache License, Version 2.0 (the "License");
193193
you may not use this file except in compliance with the License.

‎NOTICE‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
11
Sim Studio
2-
Copyright 2025 Sim Studio
2+
Copyright 2026 Sim Studio
33

44
This product includes software developed for the Sim project.

‎apps/sim/app/playground/page.tsx‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -74,6 +74,7 @@ import {
7474
TableHeader,
7575
TableRow,
7676
Textarea,
77+
TimePicker,
7778
Tooltip,
7879
Trash,
7980
Trash2,
@@ -125,6 +126,7 @@ export default function PlaygroundPage() {
125126
const [switchValue, setSwitchValue] = useState(false)
126127
const [checkboxValue, setCheckboxValue] = useState(false)
127128
const [sliderValue, setSliderValue] = useState([50])
129+
const [timeValue, setTimeValue] = useState('09:30')
128130
const [activeTab, setActiveTab] = useState('profile')
129131
const [isDarkMode, setIsDarkMode] = useState(false)
130132

@@ -491,6 +493,31 @@ export default function PlaygroundPage() {
491493
</VariantRow>
492494
</Section>
493495

496+
{/* TimePicker */}
497+
<Section title='TimePicker'>
498+
<VariantRow label='default'>
499+
<div className='w-48'>
500+
<TimePicker value={timeValue} onChange={setTimeValue} placeholder='Select time' />
501+
</div>
502+
<span className='text-[var(--text-secondary)] text-sm'>{timeValue}</span>
503+
</VariantRow>
504+
<VariantRow label='size sm'>
505+
<div className='w-48'>
506+
<TimePicker value='14:00' onChange={() => {}} placeholder='Small size' size='sm' />
507+
</div>
508+
</VariantRow>
509+
<VariantRow label='no value'>
510+
<div className='w-48'>
511+
<TimePicker placeholder='Select time...' onChange={() => {}} />
512+
</div>
513+
</VariantRow>
514+
<VariantRow label='disabled'>
515+
<div className='w-48'>
516+
<TimePicker value='09:00' disabled />
517+
</div>
518+
</VariantRow>
519+
</Section>
520+
494521
{/* Breadcrumb */}
495522
<Section title='Breadcrumb'>
496523
<Breadcrumb

‎apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/dropdown/dropdown.tsx‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,8 @@ interface DropdownProps {
4646
) => Promise<Array<{ label: string; id: string }>>
4747
/** Field dependencies that trigger option refetch when changed */
4848
dependsOn?: SubBlockConfig['dependsOn']
49+
/** Enable search input in dropdown */
50+
searchable?: boolean
4951
}
5052

5153
/**
@@ -70,6 +72,7 @@ export function Dropdown({
7072
multiSelect = false,
7173
fetchOptions,
7274
dependsOn,
75+
searchable = false,
7376
}: DropdownProps) {
7477
const [storeValue, setStoreValue] = useSubBlockValue<string | string[]>(blockId, subBlockId) as [
7578
string | string[] | null | undefined,
@@ -369,7 +372,7 @@ export function Dropdown({
369372
)
370373
}, [multiSelect, multiValues, optionMap])
371374

372-
const isSearchable = subBlockId === 'operation'
375+
const isSearchable = searchable || (subBlockId === 'operation' && comboboxOptions.length > 5)
373376

374377
return (
375378
<Combobox
@@ -391,7 +394,7 @@ export function Dropdown({
391394
isLoading={isLoadingOptions}
392395
error={fetchError}
393396
searchable={isSearchable}
394-
searchPlaceholder='Search operations...'
397+
searchPlaceholder='Search...'
395398
/>
396399
)
397400
}

‎apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/time-input/time-input.tsx‎

Lines changed: 14 additions & 135 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,6 @@
11
'use client'
22

3-
import * as React from 'react'
4-
import { Button, Input, Popover, PopoverContent, PopoverTrigger } from '@/components/emcn'
5-
import { cn } from '@/lib/core/utils/cn'
3+
import { TimePicker } from '@/components/emcn'
64
import { useSubBlockValue } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/hooks/use-sub-block-value'
75

86
interface TimeInputProps {
@@ -15,6 +13,10 @@ interface TimeInputProps {
1513
disabled?: boolean
1614
}
1715

16+
/**
17+
* Time input wrapper for sub-block editor.
18+
* Connects the EMCN TimePicker to the sub-block store.
19+
*/
1820
export function TimeInput({
1921
blockId,
2022
subBlockId,
@@ -26,143 +28,20 @@ export function TimeInput({
2628
}: TimeInputProps) {
2729
const [storeValue, setStoreValue] = useSubBlockValue<string>(blockId, subBlockId)
2830

29-
// Use preview value when in preview mode, otherwise use store value
3031
const value = isPreview ? previewValue : storeValue
31-
const [isOpen, setIsOpen] = React.useState(false)
3232

33-
// Convert 24h time string to display format (12h with AM/PM)
34-
const formatDisplayTime = (time: string) => {
35-
if (!time) return ''
36-
const [hours, minutes] = time.split(':')
37-
const hour = Number.parseInt(hours, 10)
38-
const ampm = hour >= 12 ? 'PM' : 'AM'
39-
const displayHour = hour % 12 || 12
40-
return `${displayHour}:${minutes} ${ampm}`
41-
}
42-
43-
// Convert display time to 24h format for storage
44-
const formatStorageTime = (hour: number, minute: number, ampm: string) => {
45-
const hours24 = ampm === 'PM' ? (hour === 12 ? 12 : hour + 12) : hour === 12 ? 0 : hour
46-
return `${hours24.toString().padStart(2, '0')}:${minute.toString().padStart(2, '0')}`
47-
}
48-
49-
const [hour, setHour] = React.useState<string>('12')
50-
const [minute, setMinute] = React.useState<string>('00')
51-
const [ampm, setAmpm] = React.useState<'AM' | 'PM'>('AM')
52-
53-
// Update the time when any component changes
54-
const updateTime = (newHour?: string, newMinute?: string, newAmpm?: 'AM' | 'PM') => {
33+
const handleChange = (newValue: string) => {
5534
if (isPreview || disabled) return
56-
const h = Number.parseInt(newHour ?? hour) || 12
57-
const m = Number.parseInt(newMinute ?? minute) || 0
58-
const p = newAmpm ?? ampm
59-
setStoreValue(formatStorageTime(h, m, p))
60-
}
61-
62-
// Initialize from existing value
63-
React.useEffect(() => {
64-
if (value) {
65-
const [hours, minutes] = value.split(':')
66-
const hour24 = Number.parseInt(hours, 10)
67-
const _minute = Number.parseInt(minutes, 10)
68-
const isAM = hour24 < 12
69-
setHour((hour24 % 12 || 12).toString())
70-
setMinute(minutes)
71-
setAmpm(isAM ? 'AM' : 'PM')
72-
}
73-
}, [value])
74-
75-
const handleBlur = () => {
76-
updateTime()
77-
setIsOpen(false)
35+
setStoreValue(newValue)
7836
}
7937

8038
return (
81-
<Popover
82-
open={isOpen}
83-
onOpenChange={(open) => {
84-
setIsOpen(open)
85-
if (!open) {
86-
handleBlur()
87-
}
88-
}}
89-
>
90-
<PopoverTrigger asChild>
91-
<div className='relative w-full cursor-pointer'>
92-
<Input
93-
readOnly
94-
disabled={isPreview || disabled}
95-
value={value ? formatDisplayTime(value) : ''}
96-
placeholder={placeholder || 'Select time'}
97-
autoComplete='off'
98-
className={cn('cursor-pointer', !value && 'text-muted-foreground', className)}
99-
/>
100-
</div>
101-
</PopoverTrigger>
102-
<PopoverContent className='w-auto p-4'>
103-
<div className='flex items-center space-x-2'>
104-
<Input
105-
className='w-[4rem]'
106-
value={hour}
107-
onChange={(e) => {
108-
const val = e.target.value.replace(/[^0-9]/g, '')
109-
if (val === '') {
110-
setHour('')
111-
return
112-
}
113-
const numVal = Number.parseInt(val)
114-
if (!Number.isNaN(numVal)) {
115-
const newHour = Math.min(12, Math.max(1, numVal)).toString()
116-
setHour(newHour)
117-
updateTime(newHour)
118-
}
119-
}}
120-
onBlur={() => {
121-
const numVal = Number.parseInt(hour) || 12
122-
setHour(numVal.toString())
123-
updateTime(numVal.toString())
124-
}}
125-
type='text'
126-
autoComplete='off'
127-
/>
128-
<span className='text-[var(--text-primary)]'>:</span>
129-
<Input
130-
className='w-[4rem]'
131-
value={minute}
132-
onChange={(e) => {
133-
const val = e.target.value.replace(/[^0-9]/g, '')
134-
if (val === '') {
135-
setMinute('')
136-
return
137-
}
138-
const numVal = Number.parseInt(val)
139-
if (!Number.isNaN(numVal)) {
140-
const newMinute = Math.min(59, Math.max(0, numVal)).toString().padStart(2, '0')
141-
setMinute(newMinute)
142-
updateTime(undefined, newMinute)
143-
}
144-
}}
145-
onBlur={() => {
146-
const numVal = Number.parseInt(minute) || 0
147-
setMinute(numVal.toString().padStart(2, '0'))
148-
updateTime(undefined, numVal.toString())
149-
}}
150-
type='text'
151-
autoComplete='off'
152-
/>
153-
<Button
154-
variant='outline'
155-
className='w-[4rem]'
156-
onClick={() => {
157-
const newAmpm = ampm === 'AM' ? 'PM' : 'AM'
158-
setAmpm(newAmpm)
159-
updateTime(undefined, undefined, newAmpm)
160-
}}
161-
>
162-
{ampm}
163-
</Button>
164-
</div>
165-
</PopoverContent>
166-
</Popover>
39+
<TimePicker
40+
value={value || undefined}
41+
onChange={handleChange}
42+
placeholder={placeholder || 'Select time'}
43+
disabled={isPreview || disabled}
44+
className={className}
45+
/>
16746
)
16847
}

‎apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/sub-block.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -461,6 +461,7 @@ function SubBlockComponent({
461461
multiSelect={config.multiSelect}
462462
fetchOptions={config.fetchOptions}
463463
dependsOn={config.dependsOn}
464+
searchable={config.searchable}
464465
/>
465466
</div>
466467
)

‎apps/sim/background/schedule-execution.ts‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -372,8 +372,7 @@ function calculateNextRunTime(
372372
return nextDate
373373
}
374374

375-
const lastRanAt = schedule.lastRanAt ? new Date(schedule.lastRanAt) : null
376-
return calculateNextTime(scheduleType, scheduleValues, lastRanAt)
375+
return calculateNextTime(scheduleType, scheduleValues)
377376
}
378377

379378
export async function executeScheduleJob(payload: ScheduleExecutionPayload) {

‎apps/sim/blocks/blocks/schedule.ts‎

Lines changed: 27 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -128,24 +128,48 @@ export const ScheduleBlock: BlockConfig = {
128128
id: 'timezone',
129129
type: 'dropdown',
130130
title: 'Timezone',
131+
searchable: true,
131132
options: [
133+
// UTC
132134
{ label: 'UTC', id: 'UTC' },
133-
{ label: 'US Eastern (UTC-5)', id: 'America/New_York' },
134-
{ label: 'US Central (UTC-6)', id: 'America/Chicago' },
135-
{ label: 'US Mountain (UTC-7)', id: 'America/Denver' },
135+
// Americas
136136
{ label: 'US Pacific (UTC-8)', id: 'America/Los_Angeles' },
137+
{ label: 'US Mountain (UTC-7)', id: 'America/Denver' },
138+
{ label: 'US Central (UTC-6)', id: 'America/Chicago' },
139+
{ label: 'US Eastern (UTC-5)', id: 'America/New_York' },
140+
{ label: 'US Alaska (UTC-9)', id: 'America/Anchorage' },
141+
{ label: 'US Hawaii (UTC-10)', id: 'Pacific/Honolulu' },
142+
{ label: 'Canada Toronto (UTC-5)', id: 'America/Toronto' },
143+
{ label: 'Canada Vancouver (UTC-8)', id: 'America/Vancouver' },
137144
{ label: 'Mexico City (UTC-6)', id: 'America/Mexico_City' },
138145
{ label: 'São Paulo (UTC-3)', id: 'America/Sao_Paulo' },
146+
{ label: 'Buenos Aires (UTC-3)', id: 'America/Argentina/Buenos_Aires' },
147+
// Europe
139148
{ label: 'London (UTC+0)', id: 'Europe/London' },
140149
{ label: 'Paris (UTC+1)', id: 'Europe/Paris' },
141150
{ label: 'Berlin (UTC+1)', id: 'Europe/Berlin' },
151+
{ label: 'Amsterdam (UTC+1)', id: 'Europe/Amsterdam' },
152+
{ label: 'Madrid (UTC+1)', id: 'Europe/Madrid' },
153+
{ label: 'Rome (UTC+1)', id: 'Europe/Rome' },
154+
{ label: 'Moscow (UTC+3)', id: 'Europe/Moscow' },
155+
// Middle East / Africa
142156
{ label: 'Dubai (UTC+4)', id: 'Asia/Dubai' },
157+
{ label: 'Tel Aviv (UTC+2)', id: 'Asia/Tel_Aviv' },
158+
{ label: 'Cairo (UTC+2)', id: 'Africa/Cairo' },
159+
{ label: 'Johannesburg (UTC+2)', id: 'Africa/Johannesburg' },
160+
// Asia
143161
{ label: 'India (UTC+5:30)', id: 'Asia/Kolkata' },
162+
{ label: 'Bangkok (UTC+7)', id: 'Asia/Bangkok' },
163+
{ label: 'Jakarta (UTC+7)', id: 'Asia/Jakarta' },
144164
{ label: 'Singapore (UTC+8)', id: 'Asia/Singapore' },
145165
{ label: 'China (UTC+8)', id: 'Asia/Shanghai' },
146166
{ label: 'Hong Kong (UTC+8)', id: 'Asia/Hong_Kong' },
167+
{ label: 'Seoul (UTC+9)', id: 'Asia/Seoul' },
147168
{ label: 'Tokyo (UTC+9)', id: 'Asia/Tokyo' },
169+
// Australia / Pacific
170+
{ label: 'Perth (UTC+8)', id: 'Australia/Perth' },
148171
{ label: 'Sydney (UTC+10)', id: 'Australia/Sydney' },
172+
{ label: 'Melbourne (UTC+10)', id: 'Australia/Melbourne' },
149173
{ label: 'Auckland (UTC+12)', id: 'Pacific/Auckland' },
150174
],
151175
value: () => 'UTC',

‎apps/sim/components/emcn/components/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -98,4 +98,5 @@ export {
9898
TableRow,
9999
} from './table/table'
100100
export { Textarea } from './textarea/textarea'
101+
export { TimePicker, type TimePickerProps, timePickerVariants } from './time-picker/time-picker'
101102
export { Tooltip } from './tooltip/tooltip'

0 commit comments

Comments
 (0)