@flickfyi/flkr 0.0.182 → 0.0.185

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

@@ -1,575 +0,0 @@
-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 },
-})