@flickfyi/flkr 0.0.182 → 0.0.185

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

@@ -1,648 +1,9 @@
-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({
+export const everydayStyles = /* @__PURE__ */ stylex.create({
 	centered: { alignItems: 'center', textAlign: 'center' },
 	empty: { alignItems: 'center', padding: space[6] },
 	emptyStar: { color: colors.border },