@flickfyi/flkr 0.0.182 → 0.0.185

package/node_modules/@flickfyi/core/src/kowalski/components/random-picker.tsx

@@ -0,0 +1,308 @@
+import { Flex, Icon, Text } from '@flickfyi/core'
+import { Button } from '@flickfyi/core/atoms'
+import { Field, List } from '@flickfyi/core/molecules'
+import * as stylex from '@stylexjs/stylex'
+import { isEqual } from 'lodash'
+import { useEffect, useMemo, useState } from 'react'
+import { z } from 'zod/v4'
+
+import { useConfiguredFeature } from '~/hooks/use-configured-feature'
+import { pickResult } from '~/kowalski/calculations'
+import type { CreateSchemas } from '~/kowalski/create-schemas'
+import { featureFields, store } from '~/kowalski/feature-schema'
+import { format } from '~/kowalski/format'
+import { FeatureAction, FeatureFacts, FeatureFrame, FeatureWell } from '~/kowalski/frame'
+import { radius, space, text } from '~/themes/scale.stylex'
+import { appearance, button, roles } from '~/themes/shared'
+import { font } from '~/themes/tokens.stylex'
+
+const defaultId = 'KowalskiRandomPicker'
+const defaultScope = 'private'
+
+export const RandomPickerData = /* @__PURE__ */ z
+	.discriminatedUnion('mode', [
+		z.strictObject({
+			mode: z.literal('coin'),
+			title: z.string().optional().describe('A short heading. Omit for "Pick one".'),
+		}),
+		z.strictObject({
+			mode: z.literal('dice'),
+			title: z.string().optional().describe('A short heading. Omit for "Pick one".'),
+		}),
+		z.strictObject({
+			maximum: z.number().describe('The largest whole number that can be picked.'),
+			minimum: z.number().describe('The smallest whole number that can be picked.'),
+			mode: z.literal('range'),
+			title: z.string().optional().describe('A short heading. Omit for "Pick one".'),
+		}),
+		z.strictObject({
+			mode: z.literal('list'),
+			options: z.array(z.string()).describe('The choices to pick from.'),
+			title: z.string().optional().describe('A short heading. Omit for "Pick one".'),
+		}),
+	])
+	.describe(
+		'Flip a coin, roll a die, or pick from a whole-number range or list. Retains the last result.'
+	)
+
+export type RandomPickerData = z.infer<typeof RandomPickerData>
+
+export const RandomPickerProps = z.strictObject({
+	data: RandomPickerData,
+	...featureFields,
+	scope: featureFields.scope.default(defaultScope),
+})
+
+export type RandomPickerProps = z.input<typeof RandomPickerProps> & {
+	style?: stylex.StyleXArray<stylex.StyleXStyles>
+}
+
+export const randomPickerStoreSchema = store({
+	result: z
+		.strictObject({
+			domain: pickerDomain(),
+			value: z.union([z.number(), z.string()]),
+		})
+		.nullable()
+		.default(null),
+})
+
+export const createSchemas: CreateSchemas = ({
+	id = defaultId,
+	scope = defaultScope,
+} = {}) => ({
+	[`stores/${scope}/${id}`]: randomPickerStoreSchema,
+})
+
+export function RandomPicker({
+	data,
+	id,
+	revision = 0,
+	scope = defaultScope,
+	style,
+}: RandomPickerProps) {
+	const schema = randomPickerStoreSchema
+	const name = id ?? defaultId
+	const [poolExpanded, setPoolExpanded] = useState(false)
+	const store = useConfiguredFeature({
+		name,
+		revision,
+		schema,
+		scope,
+		seed: schema.parse({}),
+	})
+	const domain: PickerDomain =
+		data.mode === 'list'
+			? { mode: data.mode, options: data.options }
+			: data.mode === 'range'
+				? {
+						// Authored bounds are unvalidated; pick between whole numbers in either order.
+						maximum: Math.round(Math.max(data.minimum, data.maximum)),
+						minimum: Math.round(Math.min(data.minimum, data.maximum)),
+						mode: data.mode,
+					}
+				: { mode: data.mode }
+	// A stable key for the effect below; the saved domain itself stays structured.
+	const domainKey = JSON.stringify(domain)
+	const numbers = format.formatters.getNumberFormat(format.locale)
+	const detail =
+		data.mode === 'range'
+			? `${numbers.format(domain.mode === 'range' ? domain.minimum : 0)} to ${numbers.format(domain.mode === 'range' ? domain.maximum : 0)}, inclusive`
+			: undefined
+	const { ready, set, value } = store
+	const result =
+		value.result && isEqual(value.result.domain, domain) ? value.result.value : null
+	const resultDisplay = typeof result === 'number' ? numbers.format(result) : result
+	const resultLabel =
+		data.mode === 'dice'
+			? 'You rolled'
+			: data.mode === 'coin'
+				? 'It landed on'
+				: 'Your pick'
+	const attemptedReset = useMemo<{ key?: string }>(() => ({}), [name, scope])
+	useEffect(() => {
+		const key = JSON.stringify([domainKey, revision, value.result])
+		if (
+			ready &&
+			attemptedReset.key !== key &&
+			revision >= value.configurationRevision &&
+			value.result &&
+			JSON.stringify(value.result.domain) !== domainKey
+		) {
+			attemptedReset.key = key
+			set({ result: null })
+		}
+	}, [
+		attemptedReset,
+		revision,
+		domainKey,
+		ready,
+		set,
+		value.configurationRevision,
+		value.result,
+	])
+	return (
+		<FeatureFrame
+			style={style}
+			onRetry={store.retry}
+			notice={store.error}
+			component="randomPicker"
+			title={data.title ?? 'Pick one'}
+			detail={detail}
+		>
+			{data.mode === 'list' && (
+				<Field label="Choices">
+					<FeatureFacts>
+						{data.options
+							.slice(0, poolExpanded ? data.options.length : 4)
+							.map((option, index) => (
+								<List.Item
+									key={index}
+									label={`${format.formatNumber(index + 1)}. ${option}`}
+									trailing={
+										result === option ? (
+											<Icon name="checkmark" {...stylex.props(appearance.accent)} />
+										) : undefined
+									}
+								/>
+							))}
+					</FeatureFacts>
+					{data.options.length > 4 && (
+						<Button
+							onClick={() => setPoolExpanded(current => !current)}
+							style={[button.quiet, randomPickerStyles.disclosure]}
+						>
+							<Text>
+								{poolExpanded
+									? 'Show fewer'
+									: `Show all ${format.formatNumber(data.options.length)} options`}
+							</Text>
+						</Button>
+					)}
+				</Field>
+			)}
+			<FeatureWell style={randomPickerStyles.stage}>
+				{!store.ready && !store.error ? (
+					<Text {...stylex.props(roles.muted)}>Loading last result…</Text>
+				) : data.mode === 'coin' || data.mode === 'dice' ? (
+					<>
+						<Text {...stylex.props(roles.h2)}>
+							{result === null
+								? data.mode === 'coin'
+									? 'Heads or tails?'
+									: 'Ready to roll'
+								: resultLabel}
+						</Text>
+						<Flex
+							{...stylex.props(
+								appearance.surface,
+								randomPickerStyles.face,
+								data.mode === 'coin' && randomPickerStyles.coin
+							)}
+						>
+							<Text
+								{...stylex.props(
+									roles.display,
+									randomPickerStyles.faceValue,
+									data.mode === 'coin' && result !== null && randomPickerStyles.coinValue
+								)}
+							>
+								{resultDisplay ?? '?'}
+							</Text>
+						</Flex>
+					</>
+				) : resultDisplay === null ? (
+					<Text {...stylex.props(roles.muted)}>No pick yet</Text>
+				) : (
+					<>
+						<Text {...stylex.props(roles.muted)}>{resultLabel}</Text>
+						<Text
+							{...stylex.props(
+								roles.display,
+								randomPickerStyles.result(resultDisplay.length),
+								data.mode === 'list' && randomPickerStyles.listResult
+							)}
+						>
+							{resultDisplay}
+						</Text>
+					</>
+				)}
+			</FeatureWell>
+			{store.saving && <Text {...stylex.props(roles.muted)}>Saving pick…</Text>}
+			<FeatureAction
+				component="randomPicker"
+				icon="shuffle"
+				size="lg"
+				variant="primary"
+				disabled={!store.ready || (domain.mode === 'list' && domain.options.length === 0)}
+				onClick={() => {
+					store.set(() => ({
+						result: { domain, value: pickResult(domain, Math.random()) },
+					}))
+				}}
+			>
+				{data.mode === 'coin'
+					? result === null
+						? 'Flip coin'
+						: 'Flip again'
+					: data.mode === 'dice'
+						? result === null
+							? 'Roll die'
+							: 'Roll again'
+						: result === null
+							? 'Pick one'
+							: 'Pick again'}
+			</FeatureAction>
+		</FeatureFrame>
+	)
+}
+
+const randomPickerStyles = /* @__PURE__ */ stylex.create({
+	coin: { borderRadius: radius['full'] },
+	coinValue: { fontSize: text['3xl'], lineHeight: text['3xlLeading'] },
+	disclosure: { alignSelf: 'flex-start', paddingLeft: 0, paddingRight: 0 },
+	face: {
+		alignItems: 'center',
+		borderRadius: radius['3xl'],
+		height: space[24],
+		justifyContent: 'center',
+		width: space[24],
+	},
+	faceValue: { textAlign: 'center' },
+	listResult: { fontSize: text['3xl'], lineHeight: text['3xlLeading'] },
+	result: (length: number) => ({
+		fontSize: length > 14 ? text['2xl'] : length > 8 ? text['4xl'] : font.displaySize,
+		lineHeight:
+			length > 14
+				? text['2xlLeading']
+				: length > 8
+					? text['4xlLeading']
+					: font.displayLeading,
+		textAlign: 'center',
+	}),
+	stage: { alignItems: 'center', gap: space[4], justifyContent: 'center' },
+})
+
+export type PickerDomain = NonNullable<
+	z.output<typeof randomPickerStoreSchema>['result']
+>['domain']
+
+/**
+ * The choices a pick was drawn from. A plain union of strict variants (anyOf in JSON
+ * Schema) stays representable in the generated Quantum store source; oneOf does not.
+ */
+function pickerDomain() {
+	return z.union([
+		z.strictObject({ mode: z.literal('coin') }),
+		z.strictObject({ mode: z.literal('dice') }),
+		z.strictObject({
+			maximum: z.number(),
+			minimum: z.number(),
+			mode: z.literal('range'),
+		}),
+		z.strictObject({
+			mode: z.literal('list'),
+			options: z.array(z.string()),
+		}),
+	])
+}

package/node_modules/@flickfyi/core/src/kowalski/components/rating.tsx

@@ -0,0 +1,112 @@
+import { Flex, Icon, Text } from '@flickfyi/core'
+import { Button } from '@flickfyi/core/atoms'
+import * as stylex from '@stylexjs/stylex'
+import { z } from 'zod/v4'
+
+import { useConfiguredFeature } from '~/hooks/use-configured-feature'
+import type { CreateSchemas } from '~/kowalski/create-schemas'
+import { everydayStyles } from '~/kowalski/everyday'
+import { featureFields, replacement, store } from '~/kowalski/feature-schema'
+import { FeatureField, FeatureFrame, FeatureWell } from '~/kowalski/frame'
+import { appearance, button, roles } from '~/themes/shared'
+
+const defaultId = 'KowalskiRating'
+const defaultScope = 'private'
+
+export const RatingData = /* @__PURE__ */ z
+	.strictObject({
+		subject: z.string().describe('What is being rated, e.g. "Pad thai at Lotus".'),
+		title: z.string().optional().describe('A short heading. Omit for "Your rating".'),
+	})
+	.describe('Rate one thing from one to five stars and keep a short note about it.')
+
+export type RatingData = z.infer<typeof RatingData>
+
+export const RatingProps = z.strictObject({
+	data: RatingData,
+	...featureFields,
+	scope: featureFields.scope.default(defaultScope),
+})
+
+export type RatingProps = z.input<typeof RatingProps> & {
+	style?: stylex.StyleXArray<stylex.StyleXStyles>
+}
+
+export const ratingStoreSchema = store({
+	note: replacement(z.string().default('')),
+	stars: z.number().default(0),
+})
+
+export const createSchemas: CreateSchemas = ({
+	id = defaultId,
+	scope = defaultScope,
+} = {}) => ({
+	[`stores/${scope}/${id}`]: ratingStoreSchema,
+})
+
+export function Rating({
+	data,
+	id,
+	revision = 0,
+	scope = defaultScope,
+	style,
+}: RatingProps) {
+	const schema = ratingStoreSchema
+	const store = useConfiguredFeature({
+		name: id ?? defaultId,
+		revision,
+		schema,
+		scope,
+		seed: schema.parse({}),
+	})
+	const stars = store.value.stars
+	return (
+		<FeatureFrame
+			style={style}
+			onRetry={store.retry}
+			notice={store.error}
+			component="rating"
+			title={data.title ?? 'Your rating'}
+			detail={data.subject}
+		>
+			<FeatureField
+				component="rating"
+				label="Note"
+				multiline
+				ready={store.ready}
+				saving={store.saving}
+				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>
+	)
+}
+
+const ratingLabels = ['Tap a star to rate', 'Poor', 'Fair', 'Good', 'Great', 'Excellent']