@flickfyi/flkr 0.0.182 → 0.0.185

package/node_modules/@flickfyi/core/src/kowalski/components/color-palette.tsx

@@ -0,0 +1,302 @@
+import { Flex, Icon, Text } from '@flickfyi/core'
+import { Button, Input } from '@flickfyi/core/atoms'
+import { Field } from '@flickfyi/core/molecules'
+import * as stylex from '@stylexjs/stylex'
+import { uniqBy } from 'lodash'
+import { useEffect, useState } from 'react'
+import { z } from 'zod/v4'
+
+import { useConfiguredFeature } from '~/hooks/use-configured-feature'
+import type { CreateSchemas } from '~/kowalski/create-schemas'
+import { featureFields, replacement, store } from '~/kowalski/feature-schema'
+import { format } from '~/kowalski/format'
+import { FeatureAction, FeatureFrame, layout } from '~/kowalski/frame'
+import { radius, size, space } from '~/themes/scale.stylex'
+import { appearance, button, roles } from '~/themes/shared'
+import { colors } from '~/themes/tokens.stylex'
+
+const defaultId = 'KowalskiColorPalette'
+const defaultScope = 'private'
+
+export const ColorPaletteData = /* @__PURE__ */ z
+	.strictObject({
+		color: z
+			.string()
+			.describe('The starting color as a six-digit hex code, e.g. "#3366FF".'),
+		title: z.string().optional().describe('A short heading. Omit for "Palette".'),
+	})
+	.describe('Choose and retain an sRGB color and display matching shades.')
+
+export type ColorPaletteData = z.infer<typeof ColorPaletteData>
+
+export const ColorPaletteProps = z.strictObject({
+	data: ColorPaletteData,
+	...featureFields,
+	scope: featureFields.scope.default(defaultScope),
+})
+
+export type ColorPaletteProps = z.input<typeof ColorPaletteProps> & {
+	style?: stylex.StyleXArray<stylex.StyleXStyles>
+}
+
+export const colorPaletteStoreSchema = store({
+	color: replacement(z.string().default('#6366f1')),
+})
+
+export const createSchemas: CreateSchemas = ({
+	id = defaultId,
+	scope = defaultScope,
+} = {}) => ({
+	[`stores/${scope}/${id}`]: colorPaletteStoreSchema,
+})
+
+export function ColorPalette({
+	data,
+	id,
+	revision = 0,
+	scope = defaultScope,
+	style,
+}: ColorPaletteProps) {
+	const schema = colorPaletteStoreSchema
+	const store = useConfiguredFeature({
+		name: id ?? defaultId,
+		revision,
+		schema,
+		scope,
+		seed: schema.parse({
+			color: { value: isHexColor(data.color) ? data.color : '#6366f1' },
+		}),
+	})
+	const color = isHexColor(store.value.color.value) ? store.value.color.value : '#6366f1'
+	const [hexDraft, setHexDraft] = useState<string | null>(null)
+	const [paletteBase, setPaletteBase] = useState(color.toLowerCase())
+	const editing = hexDraft !== null
+	const draftColor = `#${hexDraft ?? ''}`
+	const validDraft = isHexColor(draftColor)
+	const editDisabled = !store.ready || store.saving || (editing && !validDraft)
+	const shadesDisabled = !store.ready || editing
+	const shades = uniqBy(
+		[
+			{ label: 'Darker', mix: -0.6 },
+			{ label: 'Dark', mix: -0.3 },
+			{ label: 'Base', mix: 0 },
+			{ label: 'Light', mix: 0.3 },
+			{ label: 'Lighter', mix: 0.6 },
+		].map(shade => {
+			const value = mixColor(paletteBase, shade.mix)
+			return { color: value, label: value === paletteBase ? 'Base' : shade.label }
+		}),
+		'color'
+	)
+	useEffect(() => {
+		if (
+			!editing &&
+			!store.saving &&
+			![-0.6, -0.3, 0, 0.3, 0.6].some(
+				mix => mixColor(paletteBase, mix) === color.toLowerCase()
+			)
+		) {
+			setPaletteBase(color.toLowerCase())
+		}
+	}, [color, editing, paletteBase, store.saving])
+	const channels = [1, 3, 5].map(index =>
+		Number.parseInt(color.slice(index, index + 2), 16)
+	)
+	return (
+		<FeatureFrame
+			style={style}
+			onRetry={store.retry}
+			notice={store.error}
+			component="colorPalette"
+			title={data.title ?? 'Palette'}
+		>
+			<Flex {...stylex.props(colorStyles.specimen)}>
+				<Flex {...stylex.props(appearance.surface, colorStyles.preview(color))} />
+				<Flex {...stylex.props(colorStyles.identity)}>
+					<Flex {...stylex.props(colorStyles.value)}>
+						<Text {...stylex.props(roles.h2)}>{color.toUpperCase()}</Text>
+						<Text {...stylex.props(roles.muted)}>
+							{`RGB (${channels.map(channel => format.formatNumber(channel)).join(', ')})`}
+						</Text>
+					</Flex>
+				</Flex>
+			</Flex>
+			<Field label="Shades & tints">
+				<Flex {...stylex.props(colorStyles.swatches(shades.length))}>
+					{shades.map(shade => {
+						const selected = shade.color === color.toLowerCase()
+						return (
+							<Button
+								key={shade.color}
+								selected={selected}
+								disabled={shadesDisabled}
+								onClick={() => {
+									if (!shadesDisabled) {
+										store.set(() => ({ color: { value: shade.color } }))
+									}
+								}}
+								style={[
+									button.secondary,
+									colorStyles.swatchButton,
+									shadesDisabled && button.disabled,
+								]}
+							>
+								<Flex {...stylex.props(colorStyles.swatchContent)}>
+									<Flex
+										{...stylex.props(appearance.surface, colorStyles.swatch(shade.color))}
+									>
+										{selected && (
+											<Flex {...stylex.props(colorStyles.selected)}>
+												<Icon name="checkmark" />
+											</Flex>
+										)}
+									</Flex>
+									<Text {...stylex.props(roles.label, colorStyles.centered)}>
+										{shade.label}
+									</Text>
+									<Text {...stylex.props(roles.muted, colorStyles.centered)}>
+										{shade.color.toUpperCase()}
+									</Text>
+								</Flex>
+							</Button>
+						)
+					})}
+				</Flex>
+				{(store.saving || (!store.ready && !store.error) || editing) && (
+					<Text {...stylex.props(roles.muted)}>
+						{store.saving
+							? 'Saving color…'
+							: editing
+								? 'Finish editing to choose a shade.'
+								: 'Loading saved color…'}
+					</Text>
+				)}
+			</Field>
+			{editing && (
+				<Field
+					error={!validDraft && 'Enter six digits using 0–9 and A–F.'}
+					label="Hex color"
+				>
+					<Flex {...stylex.props(colorStyles.inputRow)}>
+						<Text {...stylex.props(roles.h2, colorStyles.prefix)}>#</Text>
+						{store.ready && !store.saving ? (
+							<Input
+								placeholder="Hex color"
+								value={hexDraft}
+								onChange={value => setHexDraft(value.replace(/^#/, '').toUpperCase())}
+								style={[colorStyles.input]}
+							/>
+						) : (
+							<Text {...stylex.props(roles.text, colorStyles.input)}>{hexDraft}</Text>
+						)}
+					</Flex>
+				</Field>
+			)}
+			<Flex {...stylex.props(layout.actions)}>
+				{editing && (
+					<FeatureAction
+						component="colorPalette"
+						disabled={store.saving}
+						onClick={() => setHexDraft(null)}
+					>
+						Cancel
+					</FeatureAction>
+				)}
+				<FeatureAction
+					component="colorPalette"
+					disabled={editDisabled}
+					variant={editing ? 'primary' : 'secondary'}
+					onClick={() => {
+						if (editDisabled) {
+							return
+						}
+						if (!editing) {
+							setHexDraft(color.slice(1).toUpperCase())
+						} else if (draftColor.toLowerCase() === color.toLowerCase()) {
+							setHexDraft(null)
+						} else {
+							store.set(
+								() => ({ color: { value: draftColor } }),
+								() => {
+									setPaletteBase(draftColor.toLowerCase())
+									setHexDraft(null)
+								}
+							)
+						}
+					}}
+				>
+					{store.saving && editing ? 'Saving…' : editing ? 'Done' : 'Edit hex'}
+				</FeatureAction>
+			</Flex>
+		</FeatureFrame>
+	)
+}
+
+const colorStyles = /* @__PURE__ */ stylex.create({
+	centered: { textAlign: 'center' },
+	identity: {
+		alignItems: 'center',
+		flexDirection: 'row',
+		flexWrap: 'wrap',
+		gap: space[3],
+		justifyContent: 'space-between',
+	},
+	input: { flexGrow: 1, minWidth: 0 },
+	inputRow: { alignItems: 'center', flexDirection: 'row', gap: space[2] },
+	prefix: { flexShrink: 0 },
+	preview: (color: string) => ({
+		backgroundColor: color,
+		borderRadius: radius['xl'],
+		height: space[24],
+	}),
+	selected: {
+		alignItems: 'center',
+		backgroundColor: colors.accent,
+		borderRadius: radius['xl'],
+		color: colors.onAccent,
+		height: size[6],
+		justifyContent: 'center',
+		width: size[6],
+	},
+	specimen: { gap: space[4] },
+	swatch: (color: string) => ({
+		alignItems: 'center',
+		backgroundColor: color,
+		borderRadius: radius['lg'],
+		height: size[16],
+		justifyContent: 'center',
+	}),
+	swatchButton: {
+		alignItems: 'stretch',
+		minWidth: 0,
+		paddingBottom: space[2],
+		paddingLeft: space[1],
+		paddingRight: space[1],
+		paddingTop: space[1],
+	},
+	swatchContent: { alignItems: 'stretch', gap: space[1.5] },
+	swatches: (count: number) => ({
+		display: 'grid',
+		gap: space[2],
+		gridTemplateColumns: `repeat(${Math.min(count, 3)}, minmax(0, 1fr))`,
+	}),
+	value: { gap: space[1], minWidth: 0 },
+})
+
+function mixColor(hex: string, amount: number) {
+	const target = amount < 0 ? 0 : 255
+	return `#${[1, 3, 5]
+		.map(index =>
+			Math.round(
+				Number.parseInt(hex.slice(index, index + 2), 16) * (1 - Math.abs(amount)) +
+					target * Math.abs(amount)
+			)
+				.toString(16)
+				.padStart(2, '0')
+		)
+		.join('')}`
+}
+
+function isHexColor(value: string) {
+	return /^#[\da-fA-F]{6}$/.test(value)
+}

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

@@ -0,0 +1,247 @@
+import { Flex, Icon, Text } from '@flickfyi/core'
+import { Button as NativeButton, Input } from '@flickfyi/core/atoms'
+import { List } from '@flickfyi/core/molecules'
+import { Person } from '@flickfyi/schemas/person'
+import * as stylex from '@stylexjs/stylex'
+import { useState } from 'react'
+import isEmail from 'validator/lib/isEmail.js'
+import { z } from 'zod/v4'
+
+import { useConfiguredFeature } from '~/hooks/use-configured-feature'
+import type { CreateSchemas } from '~/kowalski/create-schemas'
+import { featureFields, replacement, store } from '~/kowalski/feature-schema'
+import {
+	FeatureAction,
+	FeatureEdit,
+	FeatureFacts,
+	FeatureFrame,
+	layout,
+} from '~/kowalski/frame'
+import { space, text } from '~/themes/scale.stylex'
+import { button, roles } from '~/themes/shared'
+
+const defaultId = 'KowalskiContact'
+const defaultScope = 'private'
+
+export const ContactData = Person
+
+export type ContactData = Person
+
+export const ContactProps = z.strictObject({
+	data: ContactData,
+	...featureFields,
+	scope: featureFields.scope.default(defaultScope),
+})
+
+export type ContactProps = z.input<typeof ContactProps> & {
+	style?: stylex.StyleXArray<stylex.StyleXStyles>
+}
+
+export const contactStoreSchema = store({
+	email: replacement(z.string().nullable().default(null)),
+	name: replacement(z.string().default('')),
+	phone: replacement(z.string().nullable().default(null)),
+})
+
+export const createSchemas: CreateSchemas = ({
+	id = defaultId,
+	scope = defaultScope,
+} = {}) => ({
+	[`stores/${scope}/${id}`]: contactStoreSchema,
+})
+
+export function Contact({
+	data,
+	id,
+	revision = 0,
+	scope = defaultScope,
+	style,
+}: ContactProps) {
+	const schema = contactStoreSchema
+	const store = useConfiguredFeature({
+		name: id ?? defaultId,
+		revision,
+		schema,
+		scope,
+		seed: schema.parse({
+			email: { value: data.email ?? null },
+			name: { value: data.name },
+			phone: { value: data.phone ?? null },
+		}),
+	})
+	const [draft, setDraft] = useState({ email: '', name: '', phone: '' })
+	const [baseline, setBaseline] = useState<typeof draft | null>(null)
+	const editing = baseline !== null
+	const name = store.value.name.value.trim() ? store.value.name.value : 'Unnamed contact'
+	const fields = [
+		{
+			key: 'name',
+			label: 'Name',
+			valid: draft.name.trim().length > 0,
+			validation: 'Add a name.',
+		},
+		{ key: 'phone', label: 'Phone', valid: true, validation: '' },
+		{
+			key: 'email',
+			label: 'Email',
+			valid: draft.email === '' || isEmail(draft.email),
+			validation: 'Enter a valid email address.',
+		},
+	] as const
+	const changed =
+		baseline &&
+		(draft.email !== baseline.email ||
+			draft.name !== baseline.name ||
+			draft.phone !== baseline.phone)
+	return (
+		<FeatureFrame
+			style={style}
+			onRetry={store.retry}
+			notice={store.error}
+			component="contact"
+			title={name}
+			trailing={
+				!editing && (
+					<FeatureEdit
+						disabled={!store.ready || store.saving}
+						label="Edit contact"
+						onClick={() => {
+							const values = {
+								email: store.value.email.value ?? '',
+								name: store.value.name.value,
+								phone: store.value.phone.value ?? '',
+							}
+							setBaseline(values)
+							setDraft(values)
+						}}
+					/>
+				)
+			}
+		>
+			{editing && !store.saving ? (
+				<Flex {...stylex.props(contactStyles.editor)}>
+					{fields.map(field => (
+						<Flex key={field.key} {...stylex.props(layout.field)}>
+							<Flex {...stylex.props(contactStyles.fieldLabel)}>
+								<Text {...stylex.props(roles.label, layout.fieldLabel)}>
+									{field.label}
+								</Text>
+								{field.key !== 'name' && (
+									<Text {...stylex.props(roles.muted, contactStyles.optional)}>
+										Optional
+									</Text>
+								)}
+							</Flex>
+							<Input
+								placeholder={field.label}
+								value={draft[field.key]}
+								onChange={value =>
+									setDraft(current => ({ ...current, [field.key]: value }))
+								}
+								style={[layout.input]}
+							/>
+							{!field.valid && (
+								<Text {...stylex.props(roles.muted)}>{field.validation}</Text>
+							)}
+						</Flex>
+					))}
+					<Flex {...stylex.props(layout.actions)}>
+						<FeatureAction component="contact" onClick={() => setBaseline(null)}>
+							Cancel
+						</FeatureAction>
+						<FeatureAction
+							component="contact"
+							disabled={
+								store.saving ||
+								!store.ready ||
+								!changed ||
+								fields.some(field => !field.valid)
+							}
+							variant="primary"
+							onClick={() => {
+								if (!baseline || !changed || fields.some(field => !field.valid)) {
+									return
+								}
+								store.set(
+									current => ({
+										...(draft.email !== baseline.email &&
+											draft.email !== (current.email.value ?? '') && {
+												email: { value: draft.email || null },
+											}),
+										...(draft.name !== baseline.name &&
+											draft.name !== current.name.value && {
+												name: { value: draft.name },
+											}),
+										...(draft.phone !== baseline.phone &&
+											draft.phone !== (current.phone.value ?? '') && {
+												phone: { value: draft.phone || null },
+											}),
+									}),
+									() => setBaseline(null)
+								)
+							}}
+						>
+							Save changes
+						</FeatureAction>
+					</Flex>
+				</Flex>
+			) : (
+				<>
+					{store.saving ? (
+						<Text {...stylex.props(roles.muted)}>Saving changes…</Text>
+					) : !store.ready && !store.error ? (
+						<Text {...stylex.props(roles.muted)}>Loading contact…</Text>
+					) : null}
+					<FeatureFacts>
+						<List.Item
+							label="Phone"
+							trailing={store.value.phone.value ?? 'No phone number'}
+						/>
+						<List.Item
+							label="Email"
+							trailing={store.value.email.value ?? 'No email address'}
+						/>
+					</FeatureFacts>
+					<Flex {...stylex.props(layout.actions)}>
+						{(
+							[
+								{ address: store.value.phone.value, icon: 'phone', verb: 'Call' },
+								{ address: store.value.email.value, icon: 'envelope', verb: 'Email' },
+							] as const
+						).map(
+							field =>
+								field.address !== null && (
+									<NativeButton
+										accessibilityLabel={`${field.verb} ${name}`}
+										disabled={!store.ready || store.saving}
+										href={
+											field.verb === 'Call'
+												? `tel:${encodeURIComponent(field.address.replaceAll(/[()\s.-]/g, ''))}`
+												: `mailto:${encodeURIComponent(field.address)}`
+										}
+										key={field.verb}
+										style={[button.secondary, button.lg, layout.action]}
+									>
+										<Flex {...stylex.props(layout.actionContent)}>
+											<Icon name={field.icon} />
+											<Text>{field.verb}</Text>
+										</Flex>
+									</NativeButton>
+								)
+						)}
+					</Flex>
+				</>
+			)}
+		</FeatureFrame>
+	)
+}
+
+const contactStyles = /* @__PURE__ */ stylex.create({
+	editor: { gap: space[5] },
+	fieldLabel: {
+		alignItems: 'center',
+		flexDirection: 'row',
+		justifyContent: 'space-between',
+	},
+	optional: { fontSize: text['xs'] },
+})