@flickfyi/flkr 0.0.141 → 0.0.146

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

@@ -0,0 +1,351 @@
+import { Flex, Icon, Text } from '@flickfyi/core'
+import { Button as NativeButton, Input } from '@flickfyi/core/atoms'
+import {
+	Choice,
+	completedTaskStyle,
+	Field,
+	List,
+	Progress,
+} from '@flickfyi/core/molecules'
+import * as stylex from '@stylexjs/stylex'
+import type { PropsWithChildren, ReactNode } from 'react'
+import { useEffect, useState } from 'react'
+
+import { space } from '~/themes/scale.stylex'
+import { appearance, button, roles } from '~/themes/shared'
+import { colors, shape } from '~/themes/tokens.stylex'
+
+import type { KowalskiComponent } from './catalog'
+import { format, parseNumberInput } from './format'
+
+/**
+ * Every feature is one tray: the theme's tray color, radius and edge, content at p-4.
+ * One painted top-level surface is also what the native renderer turns into the card.
+ */
+export function FeatureFrame({
+	children,
+	component,
+	detail,
+	header,
+	notice,
+	onRetry,
+	title,
+	trailing,
+}: PropsWithChildren<{
+	component: KowalskiComponent
+	detail?: string
+	header?: ReactNode
+	notice?: string
+	onRetry?: () => void
+	title: string
+	trailing?: ReactNode
+}>) {
+	return (
+		<Flex {...stylex.props(appearance.tray, layout.frame)}>
+			{header ?? (
+				<Flex {...stylex.props(layout.header)}>
+					<Flex {...stylex.props(layout.headerRow)}>
+						<Text {...stylex.props(roles.h2, layout.grow)}>{title}</Text>
+						{trailing}
+					</Flex>
+					{detail && <Text {...stylex.props(roles.muted)}>{detail}</Text>}
+				</Flex>
+			)}
+			{children}
+			{notice && <Text {...stylex.props(roles.muted, layout.notice)}>{notice}</Text>}
+			{onRetry && (
+				<FeatureAction component={component} onClick={onRetry}>
+					Retry
+				</FeatureAction>
+			)}
+		</Flex>
+	)
+}
+
+/** A focal panel inside the tray: surface paint, control radius to stay concentric at p-4. */
+export function FeatureWell({
+	children,
+	style,
+}: PropsWithChildren<{ style?: stylex.StyleXArray<stylex.StyleXStyles> }>) {
+	return <Flex {...stylex.props(appearance.surface, layout.well, style)}>{children}</Flex>
+}
+
+/** Facts as label and value rows on one quiet surface, like an invoice's terms. */
+export function FeatureFacts({ children }: PropsWithChildren) {
+	return (
+		<FeatureWell style={layout.facts}>
+			<List>{children}</List>
+		</FeatureWell>
+	)
+}
+
+/** The one way a detail feature offers editing: a quiet pencil in the title row. */
+export function FeatureEdit({
+	disabled,
+	label,
+	onClick,
+}: {
+	disabled: boolean
+	label: string
+	onClick: () => void
+}) {
+	return (
+		<NativeButton
+			accessibilityLabel={label}
+			disabled={disabled}
+			onClick={onClick}
+			style={[button.quiet, layout.trailingAction]}
+		>
+			<Flex {...stylex.props(layout.actionContent)}>
+				<Icon name="pencil" />
+				<Text>Edit</Text>
+			</Flex>
+		</NativeButton>
+	)
+}
+
+export function KowalskiStack({ children }: PropsWithChildren) {
+	return <Flex {...stylex.props(layout.stack)}>{children}</Flex>
+}
+
+export function FeatureAction({
+	children,
+	disabled,
+	icon,
+	onClick,
+	size,
+	variant = 'secondary',
+}: PropsWithChildren<{
+	component: KowalskiComponent
+	disabled?: boolean
+	icon?: string
+	onClick: () => void
+	size?: 'lg'
+	variant?: 'primary' | 'secondary' | 'quiet'
+}>) {
+	return (
+		<NativeButton
+			disabled={disabled}
+			onClick={onClick}
+			style={[
+				button[variant],
+				size === 'lg' && button.lg,
+				layout.action,
+				disabled && button.disabled,
+			]}
+		>
+			<Flex {...stylex.props(layout.actionContent)}>
+				{icon && <Icon name={icon} />}
+				<Text>{children}</Text>
+			</Flex>
+		</NativeButton>
+	)
+}
+
+export function FeatureField({
+	component,
+	label,
+	multiline,
+	onChange,
+	parseValue,
+	ready,
+	saving,
+	validate = () => true,
+	value,
+}: {
+	component: KowalskiComponent
+	label: string
+	multiline?: boolean
+	onChange: (value: string, onSaved: () => void) => void
+	parseValue?: (value: string) => number
+	ready: boolean
+	saving: boolean
+	validate?: (value: string) => boolean
+	value: string
+}) {
+	const [draft, setDraft] = useState(value)
+	const [preserveDraft, setPreserveDraft] = useState<{ text: string }>()
+	useEffect(() => {
+		if (preserveDraft !== undefined) {
+			return
+		}
+		setDraft(current =>
+			parseValue && parseValue(current) === parseValue(value) ? current : value
+		)
+	}, [parseValue, preserveDraft, value])
+	const valid = validate(draft)
+	const control = ready ? (
+		<Input
+			multiline={multiline}
+			placeholder={label}
+			onChange={next => {
+				setDraft(next)
+				const edit = { text: next }
+				setPreserveDraft(edit)
+				if (validate(next)) {
+					onChange(next, () =>
+						setPreserveDraft(current => (current === edit ? undefined : current))
+					)
+				}
+			}}
+			value={draft}
+			style={[layout.input, multiline && layout.multiline]}
+		/>
+	) : (
+		<Text {...stylex.props(roles.text)}>{value || 'Loading…'}</Text>
+	)
+	return (
+		<Field error={!valid && `Enter a valid ${label.toLowerCase()}.`} label={label}>
+			{control}
+			{ready && valid && preserveDraft !== undefined && !saving && (
+				<FeatureAction
+					component={component}
+					onClick={() =>
+						onChange(draft, () =>
+							setPreserveDraft(current =>
+								current === preserveDraft ? undefined : current
+							)
+						)
+					}
+				>
+					Retry {label.toLowerCase()}
+				</FeatureAction>
+			)}
+		</Field>
+	)
+}
+
+export function FeatureProgress({
+	value,
+}: {
+	component: KowalskiComponent
+	value: number
+}) {
+	return <Progress max={1} value={value} />
+}
+
+export function FeatureNumber({
+	component,
+	integer = false,
+	label,
+	max = 1e12,
+	min = -1e12,
+	onChange,
+	ready,
+	saving,
+	value,
+}: {
+	component: KowalskiComponent
+	integer?: boolean
+	label: string
+	max?: number
+	min?: number
+	onChange: (value: number, onSaved: () => void) => void
+	ready: boolean
+	saving: boolean
+	value: number
+}) {
+	return (
+		<FeatureField
+			component={component}
+			label={label}
+
+			ready={ready}
+			saving={saving}
+			parseValue={parseNumberInput}
+			value={format.formatNumber(value, { format: 'decimal' })}
+			validate={text =>
+				Number.isFinite(parseNumberInput(text)) &&
+				parseNumberInput(text) >= min &&
+				parseNumberInput(text) <= max &&
+				(!integer || Number.isInteger(parseNumberInput(text)))
+			}
+			onChange={(text, onSaved) => onChange(parseNumberInput(text), onSaved)}
+		/>
+	)
+}
+
+/** One tappable, clearly selected row; used by checklist and poll choices. */
+export function FeatureChoice({
+	component,
+	detail,
+	label,
+	onClick,
+	ready,
+	selected,
+}: {
+	component: KowalskiComponent
+	detail?: string
+	label: string
+	onClick: () => void
+	ready: boolean
+	selected: boolean
+}) {
+	return (
+		<Choice
+			checked={selected}
+			description={detail}
+			disabled={!ready}
+			onCheckedChange={onClick}
+			style={component === 'checklist' && completedTaskStyle}
+		>
+			{label}
+		</Choice>
+	)
+}
+
+// One rhythm for every feature: p-4 inside the tray, gap-4 between sections,
+// gap-2 inside a section. Controls at p-4 keep the tray's radius concentric.
+export const layout = stylex.create({
+	action: {
+		alignItems: 'center',
+		flexBasis: '0%',
+		flexGrow: 1,
+		justifyContent: 'center',
+	},
+	actionContent: {
+		alignItems: 'center',
+		flexDirection: 'row',
+		gap: space[2],
+		justifyContent: 'center',
+	},
+	actions: { flexDirection: 'row', flexWrap: 'wrap', gap: space[2] },
+	choiceText: { gap: space[1], textAlign: 'left' },
+	// List rows bring their own py-3 and px-3, so the facts well adds no padding.
+	facts: { gap: 0, padding: 0 },
+	field: { gap: space[2], minWidth: 0 },
+	// Matches the Field molecule's label for editors that lay out their own fields.
+	fieldLabel: { color: colors.muted },
+	frame: {
+		alignItems: 'stretch',
+		flexDirection: 'column',
+		gap: space[4],
+		margin: space[1],
+		minWidth: 0,
+		padding: space[4],
+	},
+	grow: { flexBasis: '0%', flexGrow: 1, minWidth: 0 },
+	header: { gap: space[1] },
+	headerRow: {
+		alignItems: 'center',
+		columnGap: space[3],
+		flexDirection: 'row',
+		flexWrap: 'wrap',
+		rowGap: space[1],
+	},
+	input: { width: '100%' },
+	list: { gap: 0 },
+	multiline: { minHeight: space[24] },
+	notice: { color: colors.danger },
+	stepperInput: { textAlign: 'center' },
+	stack: { alignItems: 'stretch', flexDirection: 'column', gap: space[2] },
+	// Header actions sit in the title row and take no padding of their own.
+	trailingAction: { flexShrink: 0, paddingLeft: 0, paddingRight: 0 },
+	well: {
+		alignItems: 'stretch',
+		borderRadius: shape.controlRadius,
+		gap: space[2],
+		minWidth: 0,
+		padding: space[4],
+	},
+})

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

@@ -0,0 +1,23 @@
+export type { KowalskiInput, KowalskiProps } from './catalog'
+export { Countdown, Timer, TimeZone } from './clocks'
+export { Bookmark, Contact, Event, Note, Reminder, Trip } from './details'
+export {
+	Budget,
+	Ledger,
+	Rating,
+	Rotation,
+	Scoreboard,
+	ShoppingList,
+	TaskBoard,
+} from './everyday'
+export { KowalskiStack } from './frame'
+export { Checklist, Goal, Habit, Poll } from './productivity'
+export { Recipe } from './recipe'
+export {
+	BillSplit,
+	Calculator,
+	ColorPalette,
+	Expense,
+	RandomPicker,
+	UnitConverter,
+} from './tools'