@flickfyi/flkr 0.0.140 → 0.0.146

package/node_modules/@flickfyi/core/src/kowalski/productivity.tsx

@@ -0,0 +1,575 @@
+import { Flex, Icon, Text } from '@flickfyi/core'
+import { Button } from '@flickfyi/core/atoms'
+import { Field } from '@flickfyi/core/molecules'
+import * as stylex from '@stylexjs/stylex'
+import { Decimal } from 'decimal.js'
+import { isEqual } from 'lodash'
+import { Info } from 'luxon'
+import { useMemo, useState } from 'react'
+
+import { radius, size, space, text } from '~/themes/scale.stylex'
+import { appearance, button, roles } from '~/themes/shared'
+import { colors, font, shape } from '~/themes/tokens.stylex'
+
+import { localDate } from './calculations'
+import {
+	kowalskiCatalog,
+	type KowalskiInput,
+	pollVoterSchema,
+	type Weekday,
+	weekdayNames,
+} from './catalog'
+import { format } from './format'
+import {
+	FeatureAction,
+	FeatureChoice,
+	FeatureFrame,
+	FeatureProgress,
+	FeatureWell,
+	layout,
+} from './frame'
+import { useClock } from './use-clock'
+import { useConfiguredFeature } from './use-configured-feature'
+import { useFeatureStore } from './use-feature-store'
+
+export function Checklist(input: KowalskiInput<'checklist'>) {
+	const props = kowalskiCatalog.checklist.props.parse(input)
+	const items = props.items
+	const schema = kowalskiCatalog.checklist.storeSchema
+	const store = useConfiguredFeature({
+		name: props.id ?? 'KowalskiChecklist',
+		revision: props.revision,
+		schema,
+		scope: props.scope,
+		seed: schema.parse({}),
+	})
+	const completed = (id: string) => store.value[`completed_${id}`] === true
+	const count = items.filter(item => completed(item.id)).length
+	const loading = !store.ready && !store.error
+	const remaining = items.length - count
+	return (
+		<FeatureFrame
+			onRetry={store.retry}
+			notice={store.error}
+			component="checklist"
+			title={props.title}
+			trailing={
+				<Flex {...stylex.props(checklistStyles.status)}>
+					{!loading && remaining === 0 && (
+						<Icon name="checkmark.circle.fill" {...stylex.props(appearance.accent)} />
+					)}
+					<Text {...stylex.props(roles.muted)}>
+						{loading
+							? 'Loading checklist…'
+							: `${format.formatNumber(count)} of ${format.formatNumber(items.length)} complete`}
+					</Text>
+				</Flex>
+			}
+		>
+			<Flex {...stylex.props(layout.list)}>
+				{/* Completed items sink below open ones; each group keeps its authored order. */}
+				{items
+					.toSorted((a, b) => Number(completed(a.id)) - Number(completed(b.id)))
+					.map(item => (
+						<FeatureChoice
+							key={item.id}
+							component="checklist"
+							label={item.label}
+							ready={store.ready}
+							selected={completed(item.id)}
+							onClick={() => {
+								store.set(current => ({
+									[`completed_${item.id}`]: current[`completed_${item.id}`] !== true,
+								}))
+							}}
+						/>
+					))}
+			</Flex>
+			{store.saving && <Text {...stylex.props(roles.muted)}>Saving changes…</Text>}
+		</FeatureFrame>
+	)
+}
+
+export function Goal(input: KowalskiInput<'goal'>) {
+	const props = kowalskiCatalog.goal.props.parse(input)
+	const schema = kowalskiCatalog.goal.storeSchema
+	const store = useConfiguredFeature({
+		name: props.id ?? 'KowalskiGoal',
+		revision: props.revision,
+		schema,
+		scope: props.scope,
+		seed: schema.parse({ progress: props.progress }),
+	})
+	const progress = store.value.progress
+	const loading = !store.ready && !store.error
+	const reached = !loading && progress >= props.target
+	const number = useMemo(
+		() =>
+			format.formatters.getNumberFormat(format.locale, { maximumSignificantDigits: 17 }),
+		[]
+	)
+	const distance = new Decimal(props.target).minus(progress).abs().toNumber()
+	const progressLabel = loading ? '—' : number.format(progress)
+	const targetLabel = number.format(props.target)
+	const distanceLabel = number.format(distance)
+	const stepLabel = number.format(props.step)
+	const nextProgress = new Decimal(progress).plus(props.step).toNumber()
+	const previousProgress = Decimal.max(
+		0,
+		new Decimal(progress).minus(props.step)
+	).toNumber()
+	const unit = props.unit ? ` ${props.unit}` : ''
+	const change = (direction: -1 | 1) =>
+		store.set(current => {
+			const next = Decimal.max(
+				0,
+				new Decimal(current.progress).plus(props.step * direction)
+			).toNumber()
+			return { progress: Number.isFinite(next) ? next : current.progress }
+		})
+	return (
+		<FeatureFrame
+			onRetry={store.retry}
+			notice={store.error}
+			component="goal"
+			title={props.title}
+		>
+			<FeatureWell>
+				<Flex {...stylex.props(goalStyles.metric)}>
+					<Text
+						animated="numeric"
+						{...stylex.props(roles.display, goalStyles.value(progressLabel.length))}
+					>
+						{progressLabel}
+					</Text>
+					<Text {...stylex.props(roles.muted)}>{`of ${targetLabel}${unit}`}</Text>
+				</Flex>
+				<FeatureProgress component="goal" value={loading ? 0 : progress / props.target} />
+				{(loading || reached) && (
+					<Flex {...stylex.props(goalStyles.status)}>
+						{reached && (
+							<Icon name="checkmark.circle.fill" {...stylex.props(appearance.accent)} />
+						)}
+						<Text {...stylex.props(roles.muted, reached && appearance.accent)}>
+							{loading
+								? 'Loading saved progress…'
+								: progress > props.target
+									? `Goal reached, ${distanceLabel}${unit} beyond your target`
+									: 'Goal reached'}
+						</Text>
+					</Flex>
+				)}
+			</FeatureWell>
+			<Flex {...stylex.props(goalStyles.controls)}>
+				<Flex {...stylex.props(layout.actions)}>
+					<FeatureAction
+						component="goal"
+						disabled={!store.ready || previousProgress === progress}
+						onClick={() => change(-1)}
+					>{`−${stepLabel}`}</FeatureAction>
+					<FeatureAction
+						component="goal"
+						variant="primary"
+						disabled={
+							!store.ready || !Number.isFinite(nextProgress) || nextProgress === progress
+						}
+						onClick={() => change(1)}
+					>{`+${stepLabel}`}</FeatureAction>
+				</Flex>
+				{store.saving && <Text {...stylex.props(roles.muted)}>Saving progress…</Text>}
+				{store.ready && nextProgress === progress && previousProgress === progress && (
+					<Text {...stylex.props(roles.muted)}>
+						This increment is too small to change this total.
+					</Text>
+				)}
+			</Flex>
+		</FeatureFrame>
+	)
+}
+
+export function Habit(input: KowalskiInput<'habit'>) {
+	const props = kowalskiCatalog.habit.props.parse(input)
+	const [editingSchedule, setEditingSchedule] = useState(false)
+	const schema = kowalskiCatalog.habit.storeSchema
+	const store = useConfiguredFeature({
+		name: props.id ?? 'KowalskiHabit',
+		revision: props.revision,
+		schema,
+		scope: props.scope,
+		seed: schema.parse({ weekdays: props.weekdays }),
+	})
+	const now = useClock()
+	const today = localDate(now, props.timeZone)
+	const loading = !store.ready && !store.error
+	const dayOf = (date: string) => weekdayNames[new Date(`${date}T00:00:00Z`).getUTCDay()]
+	// Luxon lists weekdays Monday first; weekdayNames is Sunday first.
+	const shortName = (day: Weekday) =>
+		Info.weekdays('short', { locale: format.locale })[(weekdayNames.indexOf(day) + 6) % 7]
+	const scheduled = store.value.weekdays.includes(dayOf(today))
+	const done = store.value[`completed_${today}`] === true
+	const mondayFirst = [...weekdayNames.slice(1), weekdayNames[0]]
+	const selected = mondayFirst.filter(day => store.value.weekdays.includes(day))
+	const schedule =
+		selected.length === 7
+			? 'Every day'
+			: selected.length === 0
+				? 'No scheduled days'
+				: isEqual(selected, mondayFirst.slice(0, 5))
+					? 'Monday to Friday'
+					: isEqual(selected, mondayFirst.slice(5))
+						? 'Saturday & Sunday'
+						: format.formatList(selected.map(shortName), { type: 'unit' })
+	const days = Array.from({ length: 7 }, (_, index) => {
+		const date = new Date(`${today}T00:00:00Z`)
+		date.setUTCDate(date.getUTCDate() - 6 + index)
+		const key = date.toISOString().slice(0, 10)
+		return {
+			complete: store.value[`completed_${key}`] === true,
+			date: key,
+			label: shortName(dayOf(key)),
+			number: date.getUTCDate(),
+			scheduled: store.value.weekdays.includes(dayOf(key)),
+		}
+	})
+	return (
+		<FeatureFrame
+			onRetry={store.retry}
+			notice={store.error}
+			component="habit"
+			title={props.title}
+		>
+			<Field label="Schedule">
+				<Flex {...stylex.props(habitStyles.row)}>
+					<Text {...stylex.props(roles.text, layout.grow)}>
+						{loading ? 'Loading saved schedule…' : schedule}
+					</Text>
+					<Button
+						disabled={!store.ready}
+						onClick={() => setEditingSchedule(current => !current)}
+						style={[button.quiet, layout.trailingAction]}
+					>
+						<Text>{editingSchedule ? 'Done editing' : 'Edit schedule'}</Text>
+					</Button>
+				</Flex>
+				{editingSchedule && (
+					<>
+						<Flex {...stylex.props(habitStyles.weekdays)}>
+							{mondayFirst.map(day => (
+								<Button
+									key={day}
+									selected={store.value.weekdays.includes(day)}
+									disabled={!store.ready}
+									onClick={() => {
+										store.set(current => ({
+											weekdays: current.weekdays.includes(day)
+												? current.weekdays.filter(value => value !== day)
+												: [...current.weekdays, day],
+										}))
+									}}
+									style={[button.secondary, habitStyles.weekday]}
+								>
+									<Text>{shortName(day)}</Text>
+								</Button>
+							))}
+						</Flex>
+						<Text {...stylex.props(roles.muted)}>
+							Changes save as you tap. Completed days stay saved when the schedule
+							changes.
+						</Text>
+					</>
+				)}
+			</Field>
+			<Field label="Last seven days">
+				{loading ? (
+					<Text {...stylex.props(roles.muted)}>Loading saved history…</Text>
+				) : (
+					<Flex {...stylex.props(habitStyles.history)}>
+						{days.map(day => (
+							<Flex key={day.date} {...stylex.props(habitStyles.day)}>
+								<Text
+									{...stylex.props(roles.muted, day.date === today && appearance.accent)}
+								>
+									{day.date === today ? 'Today' : day.label}
+								</Text>
+								<Flex
+									{...stylex.props(
+										appearance.surface,
+										habitStyles.date,
+										day.date === today && appearance.selected,
+										day.complete && habitStyles.completedDate,
+										!day.scheduled && !day.complete && habitStyles.offDay
+									)}
+								>
+									<Text>{day.number}</Text>
+								</Flex>
+							</Flex>
+						))}
+					</Flex>
+				)}
+			</Field>
+			<FeatureWell>
+				<Flex {...stylex.props(habitStyles.row)}>
+					<Text {...stylex.props(roles.h1)}>
+						{loading ? 'Loading…' : done ? 'Complete' : scheduled ? 'Not yet' : 'Off day'}
+					</Text>
+					<Text {...stylex.props(roles.muted)}>
+						{format.formatters
+							.getDateTimeFormat(format.locale, {
+								day: 'numeric',
+								month: 'short',
+								timeZone: 'UTC',
+								weekday: 'short',
+							})
+							.format(new Date(`${today}T00:00:00Z`))}
+					</Text>
+				</Flex>
+				<Text {...stylex.props(roles.muted)}>
+					{loading
+						? 'Loading saved completions…'
+						: scheduled
+							? 'Scheduled today'
+							: done
+								? 'Completed on an off day'
+								: 'No completion needed today'}
+				</Text>
+			</FeatureWell>
+			{store.saving && <Text {...stylex.props(roles.muted)}>Saving changes…</Text>}
+			<FeatureAction
+				component="habit"
+				variant={done || !scheduled ? 'secondary' : 'primary'}
+				icon={done ? 'arrow.uturn.backward' : 'checkmark'}
+				size="lg"
+				disabled={!store.ready}
+				onClick={() => {
+					store.set(current => ({
+						[`completed_${today}`]: current[`completed_${today}`] !== true,
+					}))
+				}}
+			>
+				{done ? 'Undo' : 'Complete today'}
+			</FeatureAction>
+		</FeatureFrame>
+	)
+}
+
+export function Poll(input: KowalskiInput<'poll'>) {
+	const props = kowalskiCatalog.poll.props.parse(input)
+	const options = props.options
+	const schema = kowalskiCatalog.poll.storeSchema
+	const name = props.id ?? 'KowalskiPoll'
+	const identity = useMemo(
+		() =>
+			`${Date.now().toString(36)}-${Math.random().toString(36).slice(2)}-${Math.random().toString(36).slice(2)}`,
+		[name]
+	)
+	const voter = useFeatureStore({
+		initialState: { configuration: '', voter: identity },
+		name: `${name}Voter`,
+		schema: pollVoterSchema,
+		scope: 'private',
+	})
+	const store = useConfiguredFeature({
+		name,
+		revision: props.revision,
+		schema,
+		scope: props.shared ? 'public' : 'private',
+		seed: schema.parse({}),
+	})
+	const validIds = new Set(options.map(option => option.id))
+	const ballotKey = `vote_${voter.value.voter}`
+	const votes = Object.entries(store.value)
+		.filter(
+			([key, id]) => key.startsWith('vote_') && typeof id === 'string' && validIds.has(id)
+		)
+		.map(([, id]) => id)
+	const choice = options.find(option => option.id === store.value[ballotKey])
+	const notice = store.error ?? voter.error
+	const ready = store.ready && voter.ready
+	const loading = !ready && !notice
+	const percent = format.formatters.getNumberFormat(format.locale, {
+		maximumFractionDigits: 1,
+		style: 'percent',
+	})
+	return (
+		<FeatureFrame
+			onRetry={
+				store.retry || voter.retry
+					? () => {
+							store.retry?.()
+							voter.retry?.()
+						}
+					: undefined
+			}
+			notice={notice}
+			component="poll"
+			title={props.question}
+			trailing={
+				<Text {...stylex.props(roles.muted)}>
+					{loading
+						? 'Loading…'
+						: format.formatMessage(
+								{
+									defaultMessage: '{count, plural, one {# vote} other {# votes}}',
+									id: 'kowalski.poll.votes',
+								},
+								{ count: votes.length }
+							)}
+				</Text>
+			}
+		>
+			<Flex {...stylex.props(pollStyles.options)}>
+				{options.map(option => {
+					const count = votes.filter(id => id === option.id).length
+					const selected = choice?.id === option.id
+					const share = votes.length ? count / votes.length : 0
+					const shareLabel =
+						share > 0 && share < 0.001
+							? '<0.1%'
+							: share < 1 && share > 0.999
+								? '>99.9%'
+								: percent.format(share)
+					return (
+						<Button
+							key={option.id}
+							selected={selected}
+							disabled={!ready}
+							onClick={() => {
+								store.set(() => ({ [ballotKey]: option.id }))
+							}}
+							style={[button.secondary, pollStyles.option, !ready && button.disabled]}
+						>
+							<Flex {...stylex.props(pollStyles.optionHeading)}>
+								<Flex
+									{...stylex.props(
+										pollStyles.radio,
+										selected && pollStyles.selectedRadio
+									)}
+								>
+									{selected && <Flex {...stylex.props(pollStyles.dot)} />}
+								</Flex>
+								<Flex {...stylex.props(layout.grow, layout.choiceText)}>
+									<Text>{option.label}</Text>
+									{selected && (
+										<Text {...stylex.props(roles.muted, appearance.accent)}>
+											Your vote
+										</Text>
+									)}
+									{votes.length > 0 && (
+										<>
+											<FeatureProgress component="poll" value={share} />
+											<Text {...stylex.props(roles.muted)}>
+												{format.formatMessage(
+													{
+														defaultMessage:
+															'{count, plural, one {# vote} other {# votes}} · {share}',
+														id: 'kowalski.poll.share',
+													},
+													{ count, share: shareLabel }
+												)}
+											</Text>
+										</>
+									)}
+								</Flex>
+							</Flex>
+						</Button>
+					)
+				})}
+			</Flex>
+			<Text {...stylex.props(roles.muted)}>
+				{ready
+					? store.saving && choice
+						? 'Saving… You can still change your vote.'
+						: notice
+							? 'Choose an option to try again.'
+							: choice
+								? 'Tap another option to change your vote.'
+								: votes.length === 0
+									? 'Be the first to vote. Choose one option.'
+									: 'Choose one option to add your vote.'
+					: notice
+						? 'Voting is unavailable.'
+						: 'Loading your ballot…'}
+			</Text>
+		</FeatureFrame>
+	)
+}
+
+const goalStyles = stylex.create({
+	controls: { gap: space[2] },
+	metric: {
+		alignItems: 'baseline',
+		flexDirection: 'row',
+		flexWrap: 'wrap',
+		gap: space[2],
+	},
+	status: { alignItems: 'center', flexDirection: 'row', gap: space[1.5] },
+	value: (length: number) => ({
+		fontSize: length > 12 ? text.xl : length > 7 ? text['4xl'] : font.displaySize,
+		lineHeight:
+			length > 12
+				? text.xlLeading
+				: length > 7
+					? text['4xlLeading']
+					: font.displayLeading,
+		maxWidth: '100%',
+		minWidth: 0,
+	}),
+})
+
+const checklistStyles = stylex.create({
+	status: { alignItems: 'center', flexDirection: 'row', gap: space[1.5] },
+})
+
+// A week strip: state reads from the date chip alone (filled, plain, or faded).
+const habitStyles = stylex.create({
+	completedDate: {
+		backgroundColor: colors.accent,
+		borderColor: colors.accent,
+		color: colors.onAccent,
+	},
+	date: {
+		alignItems: 'center',
+		borderRadius: radius.full,
+		height: size[9],
+		justifyContent: 'center',
+		width: size[9],
+	},
+	day: { alignItems: 'center', flexBasis: '0%', flexGrow: 1, gap: space[2], minWidth: 0 },
+	history: { flexDirection: 'row', gap: space[1] },
+	offDay: { opacity: 0.5 },
+	row: {
+		alignItems: 'center',
+		flexDirection: 'row',
+		flexWrap: 'wrap',
+		gap: space[3],
+		justifyContent: 'space-between',
+	},
+	weekday: { flexBasis: '22%', flexGrow: 1, textAlign: 'center' },
+	weekdays: { flexDirection: 'row', flexWrap: 'wrap', gap: space[2] },
+})
+
+// A real radio: a round size-6 ring, filled with a centred dot when chosen.
+const pollStyles = stylex.create({
+	dot: {
+		backgroundColor: colors.onAccent,
+		borderRadius: radius.full,
+		height: size[2],
+		width: size[2],
+	},
+	option: { alignItems: 'stretch', padding: space[3] },
+	optionHeading: { alignItems: 'flex-start', flexDirection: 'row', gap: space[3] },
+	options: { gap: space[2] },
+	radio: {
+		alignItems: 'center',
+		backgroundColor: colors.surface,
+		borderColor: colors.border,
+		borderRadius: radius.full,
+		borderStyle: 'solid',
+		borderWidth: shape.stroke,
+		flexShrink: 0,
+		height: size[6],
+		justifyContent: 'center',
+		width: size[6],
+	},
+	selectedRadio: { backgroundColor: colors.accent, borderColor: colors.accent },
+})