@flickfyi/flkr 0.0.141 → 0.0.153

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

@@ -0,0 +1,652 @@
+import { Flex, Icon, Text } from '@flickfyi/core'
+import { Button, Input, Picker } from '@flickfyi/core/atoms'
+import {
+	Choice,
+	completedTaskStyle,
+	Field,
+	List,
+	Segmented,
+	Stat,
+	Stepper,
+} from '@flickfyi/core/molecules'
+import * as stylex from '@stylexjs/stylex'
+import { useState } from 'react'
+
+import { size, space } from '~/themes/scale.stylex'
+import { appearance, button, roles } from '~/themes/shared'
+import { colors } from '~/themes/tokens.stylex'
+
+import { formatCurrency } from './calculations'
+import { kowalskiCatalog, type KowalskiInput } from './catalog'
+import { format, parseNumberInput } from './format'
+import {
+	FeatureAction,
+	FeatureFacts,
+	FeatureField,
+	FeatureFrame,
+	FeatureProgress,
+	FeatureWell,
+	layout,
+} from './frame'
+import { useConfiguredFeature } from './use-configured-feature'
+
+export function Budget(input: KowalskiInput<'budget'>) {
+	const props = kowalskiCatalog.budget.props.parse(input)
+	const categories = props.categories
+	const schema = kowalskiCatalog.budget.storeSchema
+	const store = useConfiguredFeature({
+		name: props.id ?? 'KowalskiBudget',
+		revision: props.revision,
+		schema,
+		scope: props.scope,
+		seed: schema.parse({}),
+	})
+	const [categoryId, setCategoryId] = useState(categories[0].id)
+	const [amount, setAmount] = useState({ value: '' })
+	const money = (value: number) => formatCurrency(value, props.currency)
+	const spentOn = (id: string) => store.value[`spent_${id}`] ?? 0
+	const spent = categories.reduce((total, category) => total + spentOn(category.id), 0)
+	const limit = categories.reduce((total, category) => total + category.limit, 0)
+	const left = limit - spent
+	const category = categories.find(option => option.id === categoryId) ?? categories[0]
+	const parsed = parseNumberInput(amount.value, props.currency)
+	const valid =
+		Number.isFinite(parsed) && parsed > 0 && parsed <= 1e12 - spentOn(category.id)
+	return (
+		<FeatureFrame
+			onRetry={store.retry}
+			notice={store.error}
+			component="budget"
+			title={props.title}
+			trailing={
+				<Text {...stylex.props(roles.muted, left < 0 && layout.notice)}>
+					{left < 0 ? `${money(-left)} over` : `${money(left)} left`}
+				</Text>
+			}
+		>
+			<FeatureWell>
+				<Stat>
+					<Stat.Value>{money(spent)}</Stat.Value>
+					<Stat.Caption>{`Spent of ${money(limit)}`}</Stat.Caption>
+				</Stat>
+				<FeatureProgress component="budget" value={Math.min(1, spent / limit)} />
+			</FeatureWell>
+			<FeatureFacts>
+				{categories.map(option => (
+					<List.Item
+						description={
+							spentOn(option.id) > option.limit
+								? `${money(spentOn(option.id) - option.limit)} over`
+								: undefined
+						}
+						key={option.id}
+						label={option.label}
+						trailing={`${money(spentOn(option.id))} of ${money(option.limit)}`}
+					/>
+				))}
+			</FeatureFacts>
+			<Field
+				error={amount.value && !valid && 'Enter an amount within the supported range.'}
+				label="Add spending"
+			>
+				<Picker label="Category" value={category.id} onChange={setCategoryId}>
+					{categories.map(option => (
+						<Text key={option.id} value={option.id}>
+							{option.label}
+						</Text>
+					))}
+				</Picker>
+				<Input
+					placeholder="Amount"
+					value={amount.value}
+					onChange={value => setAmount({ value })}
+					style={[layout.input]}
+				/>
+			</Field>
+			<FeatureAction
+				component="budget"
+				disabled={!valid || !store.ready || store.saving}
+				icon="plus"
+				size="lg"
+				variant="primary"
+				onClick={() =>
+					store.set(
+						current => ({
+							[`spent_${category.id}`]: (current[`spent_${category.id}`] ?? 0) + parsed,
+						}),
+						() => setAmount(current => (current === amount ? { value: '' } : current))
+					)
+				}
+			>
+				{`Add to ${category.label}`}
+			</FeatureAction>
+		</FeatureFrame>
+	)
+}
+
+export function Scoreboard(input: KowalskiInput<'scoreboard'>) {
+	const props = kowalskiCatalog.scoreboard.props.parse(input)
+	const players = props.players
+	const schema = kowalskiCatalog.scoreboard.storeSchema
+	const store = useConfiguredFeature({
+		name: props.id ?? 'KowalskiScoreboard',
+		revision: props.revision,
+		schema,
+		scope: props.scope,
+		seed: schema.parse({}),
+	})
+	const scoreOf = (id: string) => store.value[`score_${id}`] ?? 0
+	const best = Math.max(...players.map(player => scoreOf(player.id)))
+	const leaders = players.filter(player => scoreOf(player.id) === best)
+	const started = players.some(player => scoreOf(player.id) !== 0)
+	const change = (id: string, direction: -1 | 1) =>
+		store.set(current => ({
+			[`score_${id}`]: (current[`score_${id}`] ?? 0) + direction * props.step,
+		}))
+	return (
+		<FeatureFrame
+			onRetry={store.retry}
+			notice={store.error}
+			component="scoreboard"
+			title={props.title}
+			trailing={
+				<Text
+					{...stylex.props(
+						roles.muted,
+						started && leaders.length === 1 && appearance.accent
+					)}
+				>
+					{started
+						? leaders.length === 1
+							? `${leaders[0].label} leads`
+							: `Tied at ${format.formatNumber(best)}`
+						: 'No scores yet'}
+				</Text>
+			}
+		>
+			<FeatureFacts>
+				{players.map(player => (
+					<List.Item
+						key={player.id}
+						label={player.label}
+						trailing={
+							<Stepper
+								decrementDisabled={!store.ready}
+								decrementLabel={`Lower ${player.label}`}
+								incrementDisabled={!store.ready}
+								incrementLabel={`Raise ${player.label}`}
+								onDecrement={() => change(player.id, -1)}
+								onIncrement={() => change(player.id, 1)}
+							>
+								<Text {...stylex.props(roles.h2, everydayStyles.score)}>
+									{format.formatNumber(scoreOf(player.id))}
+								</Text>
+							</Stepper>
+						}
+					/>
+				))}
+			</FeatureFacts>
+			{started && (
+				<FeatureAction
+					component="scoreboard"
+					disabled={!store.ready}
+					icon="arrow.counterclockwise"
+					onClick={() =>
+						store.set(() =>
+							Object.fromEntries(players.map(player => [`score_${player.id}`, 0]))
+						)
+					}
+				>
+					New game
+				</FeatureAction>
+			)}
+		</FeatureFrame>
+	)
+}
+
+export function TaskBoard(input: KowalskiInput<'taskBoard'>) {
+	const props = kowalskiCatalog.taskBoard.props.parse(input)
+	const tasks = props.tasks
+	const schema = kowalskiCatalog.taskBoard.storeSchema
+	const store = useConfiguredFeature({
+		name: props.id ?? 'KowalskiTaskBoard',
+		revision: props.revision,
+		schema,
+		scope: props.scope,
+		seed: schema.parse({}),
+	})
+	const [column, setColumn] = useState<TaskStatus>('todo')
+	const statusOf = (id: string): TaskStatus => store.value[`status_${id}`] ?? 'todo'
+	const visible = tasks.filter(task => statusOf(task.id) === column)
+	return (
+		<FeatureFrame
+			onRetry={store.retry}
+			notice={store.error}
+			component="taskBoard"
+			title={props.title}
+			trailing={
+				<Text {...stylex.props(roles.muted)}>
+					{`${format.formatNumber(tasks.filter(task => statusOf(task.id) === 'done').length)} of ${format.formatNumber(tasks.length)} done`}
+				</Text>
+			}
+		>
+			<Segmented
+				options={taskColumns.map(option => ({
+					label: `${option.label} ${format.formatNumber(tasks.filter(task => statusOf(task.id) === option.value).length)}`,
+					value: option.value,
+				}))}
+				value={column}
+				onChange={setColumn}
+			/>
+			{visible.length === 0 ? (
+				<FeatureWell style={everydayStyles.empty}>
+					<Text {...stylex.props(roles.muted)}>
+						{column === 'done' ? 'Nothing finished yet.' : 'Nothing here.'}
+					</Text>
+				</FeatureWell>
+			) : (
+				<FeatureFacts>
+					{visible.map(task => {
+						const next: TaskStatus =
+							column === 'todo' ? 'doing' : column === 'doing' ? 'done' : 'todo'
+						return (
+							<List.Item
+								key={task.id}
+								label={task.label}
+								trailing={
+									<Button
+										accessibilityLabel={`${moveLabels[column]}: ${task.label}`}
+										disabled={!store.ready}
+										onClick={() => {
+											store.set(() => ({ [`status_${task.id}`]: next }))
+										}}
+										style={[button.quiet, button.sm, layout.trailingAction]}
+									>
+										<Text>{moveLabels[column]}</Text>
+									</Button>
+								}
+							/>
+						)
+					})}
+				</FeatureFacts>
+			)}
+		</FeatureFrame>
+	)
+}
+
+export function Rotation(input: KowalskiInput<'rotation'>) {
+	const props = kowalskiCatalog.rotation.props.parse(input)
+	const people = props.people
+	const schema = kowalskiCatalog.rotation.storeSchema
+	const store = useConfiguredFeature({
+		name: props.id ?? 'KowalskiRotation',
+		revision: props.revision,
+		schema,
+		scope: props.scope,
+		seed: schema.parse({}),
+	})
+	// A saved turn for someone no longer in the group falls back to the first person.
+	const position = (turn: string | null) =>
+		Math.max(
+			0,
+			people.findIndex(person => person.id === turn)
+		)
+	const current = people[position(store.value.turn)]
+	const pass = (completed: boolean) =>
+		store.set(state => ({
+			completed: state.completed + (completed ? 1 : 0),
+			turn: people[(position(state.turn) + 1) % people.length].id,
+		}))
+	return (
+		<FeatureFrame
+			onRetry={store.retry}
+			notice={store.error}
+			component="rotation"
+			title={props.title}
+			detail={props.task}
+		>
+			<Field
+				label={
+					store.value.completed > 0
+						? `Order · ${format.formatNumber(store.value.completed)} done so far`
+						: 'Order'
+				}
+			>
+				<FeatureFacts>
+					{people.map(person => (
+						<List.Item
+							key={person.id}
+							label={person.label}
+							trailing={
+								person.id === current.id ? (
+									<Text {...stylex.props(roles.muted, appearance.accent)}>Now</Text>
+								) : undefined
+							}
+						/>
+					))}
+				</FeatureFacts>
+			</Field>
+			<FeatureWell style={everydayStyles.centered}>
+				<Text {...stylex.props(roles.label, layout.fieldLabel)}>Up now</Text>
+				<Text {...stylex.props(roles.h1)}>{current.label}</Text>
+			</FeatureWell>
+			<Flex {...stylex.props(layout.actions)}>
+				<FeatureAction
+					component="rotation"
+					disabled={!store.ready}
+					size="lg"
+					onClick={() => pass(false)}
+				>
+					Skip
+				</FeatureAction>
+				<FeatureAction
+					component="rotation"
+					disabled={!store.ready}
+					icon="checkmark"
+					size="lg"
+					variant="primary"
+					onClick={() => pass(true)}
+				>
+					Done
+				</FeatureAction>
+			</Flex>
+		</FeatureFrame>
+	)
+}
+
+export function ShoppingList(input: KowalskiInput<'shoppingList'>) {
+	const props = kowalskiCatalog.shoppingList.props.parse(input)
+	const items = props.items
+	const schema = kowalskiCatalog.shoppingList.storeSchema
+	const store = useConfiguredFeature({
+		name: props.id ?? 'KowalskiShoppingList',
+		revision: props.revision,
+		schema,
+		scope: props.scope,
+		seed: schema.parse({}),
+	})
+	const money = (value: number) => formatCurrency(value, props.currency)
+	const got = (id: string) => Boolean(store.value[`got_${id}`])
+	const priced = items.filter(item => item.price !== undefined)
+	const cost = (item: (typeof items)[number]) => (item.price ?? 0) * item.quantity
+	const total = priced.reduce((sum, item) => sum + cost(item), 0)
+	const cart = priced
+		.filter(item => got(item.id))
+		.reduce((sum, item) => sum + cost(item), 0)
+	const count = items.filter(item => got(item.id)).length
+	return (
+		<FeatureFrame
+			onRetry={store.retry}
+			notice={store.error}
+			component="shoppingList"
+			title={props.title}
+			trailing={
+				<Text {...stylex.props(roles.muted)}>
+					{`${format.formatNumber(count)} of ${format.formatNumber(items.length)}`}
+				</Text>
+			}
+		>
+			{priced.length > 0 && (
+				<FeatureWell>
+					<Stat>
+						<Stat.Value>{money(cart)}</Stat.Value>
+						<Stat.Caption>{`In the cart of ${money(total)}`}</Stat.Caption>
+					</Stat>
+				</FeatureWell>
+			)}
+			<List style={completedTaskStyle}>
+				{items.map(item => (
+					<Choice
+						checked={got(item.id)}
+						description={
+							item.price === undefined
+								? item.quantity > 1
+									? `× ${format.formatNumber(item.quantity)}`
+									: undefined
+								: item.quantity > 1
+									? `${format.formatNumber(item.quantity)} × ${money(item.price)}`
+									: money(item.price)
+						}
+						disabled={!store.ready}
+						key={item.id}
+						onCheckedChange={checked =>
+							store.set(() => ({ [`got_${item.id}`]: checked }))
+						}
+					>
+						{item.label}
+					</Choice>
+				))}
+			</List>
+			{count > 0 && (
+				<FeatureAction
+					component="shoppingList"
+					disabled={!store.ready}
+					onClick={() =>
+						store.set(() =>
+							Object.fromEntries(items.map(item => [`got_${item.id}`, false]))
+						)
+					}
+				>
+					Start a new trip
+				</FeatureAction>
+			)}
+		</FeatureFrame>
+	)
+}
+
+export function Rating(input: KowalskiInput<'rating'>) {
+	const props = kowalskiCatalog.rating.props.parse(input)
+	const schema = kowalskiCatalog.rating.storeSchema
+	const store = useConfiguredFeature({
+		name: props.id ?? 'KowalskiRating',
+		revision: props.revision,
+		schema,
+		scope: props.scope,
+		seed: schema.parse({}),
+	})
+	const stars = store.value.stars
+	return (
+		<FeatureFrame
+			onRetry={store.retry}
+			notice={store.error}
+			component="rating"
+			title={props.title}
+			detail={props.subject}
+		>
+			<FeatureField
+				component="rating"
+				label="Note"
+				multiline
+				ready={store.ready}
+				saving={store.saving}
+				validate={value => value.length <= 2000}
+				value={store.value.note.value}
+				onChange={(note, onSaved) =>
+					store.set(() => ({ note: { value: note } }), onSaved)
+				}
+			/>
+			<FeatureWell style={everydayStyles.centered}>
+				<Flex {...stylex.props(everydayStyles.stars)}>
+					{[1, 2, 3, 4, 5].map(value => (
+						<Button
+							accessibilityLabel={`${value} ${value === 1 ? 'star' : 'stars'}`}
+							disabled={!store.ready}
+							key={value}
+							onClick={() => {
+								store.set(() => ({ stars: stars === value ? 0 : value }))
+							}}
+							selected={value === stars}
+							style={[button.quiet, everydayStyles.star]}
+						>
+							<Icon
+								name="star"
+								{...stylex.props(
+									roles.h1,
+									value <= stars ? appearance.accent : everydayStyles.emptyStar
+								)}
+							/>
+						</Button>
+					))}
+				</Flex>
+				<Text {...stylex.props(roles.muted)}>{ratingLabels[stars]}</Text>
+			</FeatureWell>
+		</FeatureFrame>
+	)
+}
+
+export function Ledger(input: KowalskiInput<'ledger'>) {
+	const props = kowalskiCatalog.ledger.props.parse(input)
+	const schema = kowalskiCatalog.ledger.storeSchema
+	const store = useConfiguredFeature({
+		name: props.id ?? 'KowalskiLedger',
+		revision: props.revision,
+		schema,
+		scope: props.scope,
+		seed: schema.parse({}),
+	})
+	const [first, second] = props.people
+	const [label, setLabel] = useState({ value: '' })
+	const [amount, setAmount] = useState({ value: '' })
+	const [paidBy, setPaidBy] = useState(first.id)
+	const money = (value: number) => formatCurrency(value, props.currency)
+	const nameOf = (id: string) => (id === first.id ? first.label : second.label)
+	const parsed = parseNumberInput(amount.value, props.currency)
+	const validLabel = schema.shape.entries
+		.unwrap()
+		.element.shape.label.safeParse(label.value.trim()).success
+	const valid = validLabel && Number.isFinite(parsed) && parsed > 0 && parsed <= 1e12
+	// Every cost is shared evenly, so whoever paid is owed half of it.
+	const balance = store.value.entries.reduce(
+		(sum, entry) => sum + (entry.paidBy === first.id ? entry.amount : -entry.amount) / 2,
+		0
+	)
+	const settled = Math.abs(balance) < 0.005
+	return (
+		<FeatureFrame
+			onRetry={store.retry}
+			notice={store.error}
+			component="ledger"
+			title={props.title}
+			detail={`${first.label} and ${second.label} · costs split evenly`}
+		>
+			<FeatureWell style={everydayStyles.centered}>
+				<Text {...stylex.props(roles.h1)}>
+					{settled ? 'All square' : money(Math.abs(balance))}
+				</Text>
+				{!settled && (
+					<Text {...stylex.props(roles.muted)}>
+						{balance > 0
+							? `${second.label} owes ${first.label}`
+							: `${first.label} owes ${second.label}`}
+					</Text>
+				)}
+			</FeatureWell>
+			{store.value.entries.length > 0 && (
+				<>
+					<FeatureAction
+						component="ledger"
+						disabled={!store.ready}
+						onClick={() => store.set(() => ({ entries: [] }))}
+					>
+						Settle up
+					</FeatureAction>
+					<FeatureFacts>
+						{store.value.entries.slice(0, 20).map(entry => (
+							<List.Item
+								description={`Paid by ${nameOf(entry.paidBy)}`}
+								key={entry.id}
+								label={entry.label || 'Shared cost'}
+								trailing={money(entry.amount)}
+							/>
+						))}
+					</FeatureFacts>
+				</>
+			)}
+			<Field
+				error={!validLabel && 'Keep the description within 160 characters.'}
+				label="What for"
+			>
+				<Input
+					placeholder="What for"
+					value={label.value}
+					onChange={value => setLabel({ value })}
+					style={[layout.input]}
+				/>
+			</Field>
+			<Field
+				error={amount.value && !valid && 'Enter an amount within the supported range.'}
+				label="Amount"
+			>
+				<Input
+					placeholder="Amount"
+					value={amount.value}
+					onChange={value => setAmount({ value })}
+					style={[layout.input]}
+				/>
+			</Field>
+			<Field label="Paid by">
+				<Segmented
+					options={props.people.map(person => ({
+						label: person.label,
+						value: person.id,
+					}))}
+					value={paidBy}
+					onChange={setPaidBy}
+				/>
+			</Field>
+			<FeatureAction
+				component="ledger"
+				disabled={
+					!valid || !store.ready || store.saving || store.value.entries.length >= 200
+				}
+				icon="plus"
+				size="lg"
+				variant="primary"
+				onClick={() =>
+					store.set(
+						current => ({
+							entries: [
+								{
+									amount: parsed,
+									id: `${Date.now().toString(36)}${Math.random().toString(36).slice(2, 8)}`,
+									label: label.value.trim(),
+									paidBy,
+								},
+								...current.entries,
+							],
+						}),
+						() => {
+							setAmount(current => (current === amount ? { value: '' } : current))
+							setLabel(current => (current === label ? { value: '' } : current))
+						}
+					)
+				}
+			>
+				Add to the tab
+			</FeatureAction>
+		</FeatureFrame>
+	)
+}
+
+type TaskStatus = 'doing' | 'done' | 'todo'
+
+const moveLabels: Record<TaskStatus, string> = {
+	doing: 'Finish',
+	done: 'Reopen',
+	todo: 'Start',
+}
+const ratingLabels = ['Tap a star to rate', 'Poor', 'Fair', 'Good', 'Great', 'Excellent']
+const taskColumns: { label: string; value: TaskStatus }[] = [
+	{ label: 'To do', value: 'todo' },
+	{ label: 'Doing', value: 'doing' },
+	{ label: 'Done', value: 'done' },
+]
+
+const everydayStyles = stylex.create({
+	centered: { alignItems: 'center', textAlign: 'center' },
+	empty: { alignItems: 'center', padding: space[6] },
+	emptyStar: { color: colors.border },
+	score: { minWidth: size[8], textAlign: 'center' },
+	star: { minWidth: 0, paddingLeft: space[1], paddingRight: space[1] },
+	stars: { flexDirection: 'row', gap: space[1], justifyContent: 'center' },
+})

package/node_modules/@flickfyi/core/src/kowalski/format.ts

@@ -0,0 +1,48 @@
+import { createIntl, createIntlCache } from '@formatjs/intl'
+import isCurrency from 'validator/lib/isCurrency.js'
+
+/** Kowalski's authored English UI uses one cache for display and editor formatting. */
+export const format = createIntl(
+	{
+		defaultLocale: 'en-US',
+		formats: {
+			number: {
+				decimal: {
+					maximumFractionDigits: 100,
+					maximumSignificantDigits: 17,
+					roundingPriority: 'morePrecision',
+				},
+				integer: { maximumFractionDigits: 0 },
+				twoDigits: {
+					maximumFractionDigits: 0,
+					minimumIntegerDigits: 2,
+					useGrouping: false,
+				},
+			},
+		},
+		locale: 'en-US',
+		messages: {},
+	},
+	createIntlCache()
+)
+
+/** Validate the UI's English decimal/currency grammar before removing its fixed affixes. */
+export function parseNumberInput(text: string, currency?: string) {
+	const symbol = currency
+		? (format
+				.formatNumberToParts(0, { currency, style: 'currency' })
+				.find(part => part.type === 'currency')?.value ?? currency)
+		: ''
+	const normalized = text.replaceAll('\u200E', '').trim().replaceAll('\u00A0', ' ')
+	const amount = normalized.replace(symbol, '')
+	if (
+		!isCurrency(normalized, {
+			allow_space_after_symbol: true,
+			digits_after_decimal: [amount.split('.')[1]?.length ?? 0],
+			symbol,
+		})
+	) {
+		return Number.NaN
+	}
+	return Number(amount.replaceAll(',', '').trim())
+}