@flickfyi/flkr 0.0.141 → 0.0.153

package/node_modules/@flickfyi/core/src/kowalski/date-time.tsx

@@ -0,0 +1,469 @@
+import { Flex, Text } from '@flickfyi/core'
+import { Button, Input, Picker } from '@flickfyi/core/atoms'
+import * as stylex from '@stylexjs/stylex'
+import { sortBy } from 'lodash'
+import { DateTime } from 'luxon'
+import { useEffect, useRef, useState } from 'react'
+
+import { space } from '~/themes/scale.stylex'
+import { button, roles } from '~/themes/shared'
+
+import type { KowalskiComponent } from './catalog'
+import { format } from './format'
+import { FeatureAction, layout } from './frame'
+
+/** Stores an instant and edits calendar time in the supplied IANA timezone. */
+export function FeatureDateTime(props: DateEditorProps & { timeZone: string }) {
+	return <DateEditor {...props} dateOnly={false} />
+}
+
+/** Date-only values remain calendar dates, without device timezone conversion. */
+export function FeatureDate(props: DateEditorProps) {
+	return <DateEditor {...props} dateOnly timeZone="UTC" />
+}
+
+type DateEditorProps = {
+	actionLabel?: string
+	clearable?: boolean
+	compact?: boolean
+	component: KowalskiComponent
+	label: string
+	inline?: boolean
+	onChange: (value: string | null, onSaved?: () => void) => boolean | void
+	onEditingChange?: (editing: boolean) => void
+	ready: boolean
+	saving?: boolean
+	submitLabel?: string
+	value: string | null
+}
+
+type CalendarFields = {
+	day: number
+	hour: number
+	millisecond: number
+	minute: number
+	month: number
+	second: number
+	year: number
+}
+
+function DateEditor({
+	actionLabel,
+	clearable = false,
+	compact = false,
+	component,
+	dateOnly,
+	label,
+	inline = false,
+	onChange,
+	onEditingChange,
+	ready,
+	saving,
+	submitLabel,
+	timeZone,
+	value,
+}: DateEditorProps & { dateOnly: boolean; timeZone: string }) {
+	const [editing, setEditing] = useState(false)
+	const [editorValue, setEditorValue] = useState(value)
+	useEffect(() => {
+		if (!inline) {
+			onEditingChange?.(editing)
+			return () => onEditingChange?.(false)
+		}
+	}, [editing, inline, onEditingChange])
+	const close = () => {
+		setEditing(false)
+		onEditingChange?.(false)
+	}
+	const instant = value ? Date.parse(dateOnly ? `${value}T12:00:00Z` : value) : undefined
+	const action = dateOnly ? 'date' : 'date & time'
+	if (inline && ready) {
+		return (
+			<CalendarEditor
+				clearable={clearable}
+				component={component}
+				dateOnly={dateOnly}
+				inline
+				label={label}
+				onCancel={close}
+				onChange={onChange}
+				onEditingChange={onEditingChange}
+				timeZone={timeZone}
+				value={value}
+			/>
+		)
+	}
+	return (
+		<Flex {...stylex.props(dateStyles.section)}>
+			{!compact && <Text {...stylex.props(roles.label)}>{label}</Text>}
+			{!compact &&
+				!editing &&
+				(instant === undefined ? (
+					<Text {...stylex.props(roles.muted)}>No date set</Text>
+				) : (
+					<Flex {...stylex.props(dateStyles.summary)}>
+						<Text {...stylex.props(roles.strong)}>
+							{formatCalendarDate(instant, timeZone)}
+						</Text>
+						{!dateOnly && (
+							<Text {...stylex.props(roles.muted)}>
+								{formatCalendarTime(instant, timeZone)}
+							</Text>
+						)}
+					</Flex>
+				))}
+			{editing && ready ? (
+				<CalendarEditor
+					key={`${editorValue}:${timeZone}`}
+					clearable={clearable}
+					component={component}
+					dateOnly={dateOnly}
+					onCancel={close}
+					onChange={next => {
+						const result = saving === undefined ? onChange(next) : onChange(next, close)
+						if (result === undefined || (saving === undefined && result)) {
+							close()
+						}
+					}}
+					saving={saving}
+					submitLabel={submitLabel}
+					timeZone={timeZone}
+					value={editorValue}
+				/>
+			) : (
+				<FeatureAction
+					component={component}
+					disabled={!ready || saving}
+					icon="calendar"
+					onClick={() => {
+						setEditorValue(value)
+						setEditing(true)
+						onEditingChange?.(true)
+					}}
+				>
+					{actionLabel ?? `${value ? 'Change' : 'Choose'} ${action}`}
+				</FeatureAction>
+			)}
+		</Flex>
+	)
+}
+
+function CalendarEditor({
+	clearable,
+	component,
+	dateOnly,
+	inline = false,
+	label = 'Date & time',
+	onCancel,
+	onChange,
+	onEditingChange,
+	saving,
+	submitLabel,
+	timeZone,
+	value,
+}: Omit<DateEditorProps, 'label' | 'ready'> & {
+	dateOnly: boolean
+	label?: string
+	onCancel: () => void
+	timeZone: string
+}) {
+	const [originalValue] = useState(value)
+	const [original] = useState(() =>
+		value
+			? DateTime.fromISO(dateOnly ? `${value}T12:00:00` : value, {
+					locale: 'en-US',
+					zone: timeZone,
+				})
+			: DateTime.fromMillis(Math.ceil((Date.now() + 3_600_000) / 3_600_000) * 3_600_000, {
+					locale: 'en-US',
+					zone: timeZone,
+				})
+	)
+	const timePattern = original.millisecond
+		? 'h:mm:ss.SSS a'
+		: original.second
+			? 'h:mm:ss a'
+			: 'h:mm a'
+	const [dateText, setDateText] = useState(original.toFormat('MM/dd/yyyy'))
+	const [timeText, setTimeText] = useState(original.toFormat(timePattern))
+	const [offset, setOffset] = useState(original.offset)
+	const [removed, setRemoved] = useState(inline && value === null)
+	const parsedDate = DateTime.fromFormat(dateText.trim(), 'M/d/yyyy', {
+		locale: 'en-US',
+		zone: 'UTC',
+	})
+	const parsedTime =
+		['h:mm:ss.SSS a', 'h:mm:ss a', 'h:mm a']
+			.map(pattern =>
+				DateTime.fromFormat(timeText.trim().toUpperCase(), pattern, {
+					locale: 'en-US',
+					zone: 'UTC',
+				})
+			)
+			.find(candidate => candidate.isValid) ?? DateTime.invalid('Invalid time')
+	const fields =
+		parsedDate.isValid && (dateOnly || parsedTime.isValid)
+			? {
+					...calendarFields(parsedDate),
+					hour: dateOnly ? 12 : parsedTime.hour,
+					millisecond: dateOnly ? 0 : parsedTime.millisecond,
+					minute: dateOnly ? 0 : parsedTime.minute,
+					second: dateOnly ? 0 : parsedTime.second,
+				}
+			: undefined
+	const candidates = fields ? calendarCandidates(fields, timeZone) : []
+	const date = candidates.find(candidate => candidate.offset === offset) ?? candidates[0]
+	const instant = date?.toMillis()
+	const valid = removed || instant !== undefined
+	const unchanged =
+		fields &&
+		JSON.stringify(fields) === JSON.stringify(calendarFields(original)) &&
+		date?.offset === original.offset
+	const nextValue = removed
+		? null
+		: instant === undefined
+			? undefined
+			: unchanged && originalValue
+				? originalValue
+				: dateOnly
+					? new Date(instant).toISOString().slice(0, 10)
+					: new Date(instant).toISOString()
+	const lastEmitted = useRef(originalValue)
+	useEffect(() => {
+		if (inline) {
+			onEditingChange?.(!valid)
+			return () => onEditingChange?.(false)
+		}
+	}, [inline, onEditingChange, valid])
+	useEffect(() => {
+		if (inline && nextValue !== undefined && nextValue !== lastEmitted.current) {
+			lastEmitted.current = nextValue
+			onChange(nextValue)
+		}
+	}, [inline, nextValue, onChange])
+	if (saving) {
+		return (
+			<Flex {...stylex.props(dateStyles.editor)}>
+				<Text {...stylex.props(roles.muted)}>Saving date…</Text>
+				{instant !== undefined && (
+					<Text {...stylex.props(roles.text)}>
+						{formatCalendarDate(instant, timeZone)}
+						{!dateOnly && ` · ${formatCalendarTime(instant, timeZone)}`}
+					</Text>
+				)}
+			</Flex>
+		)
+	}
+	return (
+		<Flex {...stylex.props(dateStyles.editor)}>
+			{inline && (
+				<Flex {...stylex.props(dateStyles.heading)}>
+					<Text {...stylex.props(roles.strong)}>{label}</Text>
+					{clearable && !removed && (
+						<Button
+							accessibilityLabel={`Remove ${label.toLowerCase()}`}
+							onClick={() => setRemoved(true)}
+							style={button.quiet}
+						>
+							<Text>Clear</Text>
+						</Button>
+					)}
+				</Flex>
+			)}
+			{removed ? (
+				<FeatureAction component={component} onClick={() => setRemoved(false)}>
+					Add date
+				</FeatureAction>
+			) : (
+				<Flex {...stylex.props(dateStyles.fields)}>
+					<Flex {...stylex.props(dateStyles.field)}>
+						{(!inline || !dateOnly) && <Text {...stylex.props(roles.muted)}>Date</Text>}
+						<Input placeholder="MM/DD/YYYY" value={dateText} onChange={setDateText} />
+					</Flex>
+					{!dateOnly && (
+						<Flex {...stylex.props(dateStyles.field)}>
+							<Text {...stylex.props(roles.muted)}>Time</Text>
+							<Input placeholder="h:mm AM/PM" value={timeText} onChange={setTimeText} />
+						</Flex>
+					)}
+				</Flex>
+			)}
+			{!removed && !dateOnly && (
+				<Text {...stylex.props(roles.muted)}>
+					{zoneName(instant ?? original.toMillis(), timeZone)}
+				</Text>
+			)}
+			{!removed && candidates.length > 1 && (
+				<Flex {...stylex.props(dateStyles.section)}>
+					<Text {...stylex.props(roles.muted)}>
+						This time happens twice when the clocks change. Choose an occurrence.
+					</Text>
+					<CalendarChoice
+						component={component}
+						label="Occurrence"
+						onChange={choice => {
+							const selected = candidates.find(
+								(candidate, index) => offsetChoice(candidate, index) === choice
+							)
+							if (selected) {
+								setOffset(selected.offset)
+							}
+						}}
+						options={candidates.map(offsetChoice)}
+						value={offsetChoice(
+							date ?? candidates[0],
+							candidates.indexOf(date ?? candidates[0])
+						)}
+					/>
+				</Flex>
+			)}
+			{!valid && (
+				<Text {...stylex.props(roles.muted)}>
+					{fields
+						? 'This time is skipped when the clocks change. Choose another time.'
+						: dateOnly
+							? 'Enter a valid date (MM/DD/YYYY).'
+							: 'Enter a valid date (MM/DD/YYYY) and time (h:mm AM/PM).'}
+				</Text>
+			)}
+			{!inline && (
+				<Flex {...stylex.props(layout.actions)}>
+					<FeatureAction component={component} onClick={onCancel}>
+						Cancel
+					</FeatureAction>
+					<FeatureAction
+						component={component}
+						disabled={!valid}
+						onClick={() => {
+							if (nextValue !== undefined) {
+								onChange(nextValue)
+							}
+						}}
+						variant="primary"
+					>
+						{submitLabel ?? 'Save date'}
+					</FeatureAction>
+				</Flex>
+			)}
+			{!inline && clearable && value && (
+				<FeatureAction
+					component={component}
+					onClick={() => onChange(null)}
+					variant="quiet"
+				>
+					Remove date
+				</FeatureAction>
+			)}
+		</Flex>
+	)
+}
+
+function CalendarChoice({
+	label,
+	onChange,
+	options,
+	value,
+}: {
+	component: KowalskiComponent
+	label: string
+	onChange: (value: string) => void
+	options: string[]
+	value: string
+}) {
+	return (
+		<Picker
+			label={label}
+			onChange={next => {
+				if (options.includes(next)) {
+					onChange(next)
+				}
+			}}
+			value={value}
+			style={dateStyles.choice}
+		>
+			{options.map(option => (
+				<Text key={option} value={option}>
+					{option}
+				</Text>
+			))}
+		</Picker>
+	)
+}
+
+function calendarFields(date: DateTime): CalendarFields {
+	return {
+		day: date.day,
+		hour: date.hour,
+		millisecond: date.millisecond,
+		minute: date.minute,
+		month: date.month,
+		second: date.second,
+		year: date.year,
+	}
+}
+
+function calendarCandidates(fields: CalendarFields, timeZone: string) {
+	const date = DateTime.fromObject(fields, { zone: timeZone })
+	return date.isValid && JSON.stringify(calendarFields(date)) === JSON.stringify(fields)
+		? sortBy(date.getPossibleOffsets(), candidate => candidate.toMillis())
+		: []
+}
+
+function offsetChoice(date: DateTime, index: number) {
+	return `${index === 0 ? 'First' : 'Second'} · ${date.offsetNameLong}`
+}
+
+function formatCalendarDate(instant: number, timeZone: string) {
+	return format.formatters
+		.getDateTimeFormat(format.locale, {
+			day: 'numeric',
+			era:
+				DateTime.fromMillis(instant, { zone: timeZone }).year <= 0 ? 'short' : undefined,
+			month: 'long',
+			timeZone,
+			weekday: 'short',
+			year: 'numeric',
+		})
+		.format(instant)
+}
+
+function formatCalendarTime(instant: number, timeZone: string) {
+	const precise = new Date(instant)
+	return format.formatters
+		.getDateTimeFormat(format.locale, {
+			hour: 'numeric',
+			hour12: true,
+			minute: '2-digit',
+			...(precise.getUTCSeconds() !== 0 || precise.getUTCMilliseconds() !== 0
+				? { second: '2-digit' }
+				: {}),
+			...(precise.getUTCMilliseconds() === 0 ? {} : { fractionalSecondDigits: 3 }),
+			timeZone,
+			timeZoneName: 'short',
+		})
+		.format(instant)
+}
+
+function zoneName(instant: number, timeZone: string) {
+	return (
+		format.formatters
+			.getDateTimeFormat(format.locale, { timeZone, timeZoneName: 'long' })
+			.formatToParts(instant)
+			.find(part => part.type === 'timeZoneName')?.value ?? timeZone.replaceAll('_', ' ')
+	)
+}
+
+const dateStyles = stylex.create({
+	choice: { width: '100%' },
+	editor: { gap: space[3] },
+	field: { flexBasis: '8rem', flexGrow: 1, gap: space[1.5], minWidth: 0 },
+	fields: { flexDirection: 'row', flexWrap: 'wrap', gap: space[2] },
+	heading: {
+		alignItems: 'center',
+		flexDirection: 'row',
+		gap: space[2],
+		justifyContent: 'space-between',
+	},
+	section: { gap: space[3] },
+	summary: { gap: space[1] },
+})