@liiift-studio/sanity-font-manager 2.2.0

package/src/components/GenerateCollectionsPairsComponent.jsx

@@ -0,0 +1,259 @@
+// Generates Full Family, Uprights, Italics, and Subfamily collections plus Regular/Italic weight pairs from a typeface's linked fonts
+
+import React, { useCallback, useState } from 'react';
+import { Stack, Grid, Flex, Text, Button, Card, Spinner } from '@sanity/ui';
+import { useFormValue } from 'sanity';
+import slugify from 'slugify';
+import { nanoid } from 'nanoid';
+
+import { useSanityClient } from '../hooks/useSanityClient';
+import StatusDisplay from './StatusDisplay';
+
+/**
+ * Generates Full Family, Uprights, Italics, Subfamily collections, and Regular/Italic pairs
+ * from a typeface's linked fonts. Replaces existing collections and pairs respectively.
+ */
+export const GenerateCollectionsPairsComponent = () => {
+	const [status, setStatus] = useState('ready');
+	const [ready, setReady] = useState(true);
+	const [collectionPrice, setCollectionPrice] = useState(
+		process.env.SANITY_STUDIO_DEFAULT_COLLECTION_PRICE || 20
+	);
+	const [pairPrice, setPairPrice] = useState(
+		process.env.SANITY_STUDIO_DEFAULT_PAIR_PRICE || 75
+	);
+
+	const client = useSanityClient();
+	const doc_id = useFormValue(['_id']);
+	const title = useFormValue(['title']);
+	const slug = useFormValue(['slug']);
+	const stylesObject = useFormValue(['styles']);
+
+	/** Creates or replaces a collection document and returns a weak reference to it. */
+	const createSanityCollection = useCallback(async (fontsList, collectionSlug, newTitle) => {
+		const newSlug = collectionSlug.toLowerCase().trim();
+
+		const fontRefs = fontsList.map(font => ({
+			_key: nanoid(),
+			_type: 'reference',
+			_ref: font._id ?? font._ref,
+			_weak: true,
+		}));
+
+		let preferredStyle = { weight: fontsList[0].weight, style: fontsList[0].style, _ref: fontsList[0]._ref };
+		fontsList.forEach(font => {
+			if (Number(font.weight) < Number(preferredStyle.weight)) return;
+			if (Number(font.weight) === Number(preferredStyle.weight) && preferredStyle.style === 'Italic' && font.style === 'Regular') {
+				preferredStyle = { weight: font.weight, style: font.style, _ref: font._id };
+			} else if (Number(font.weight) > Number(preferredStyle.weight)) {
+				preferredStyle = { weight: font.weight, style: font.style, _ref: font._id };
+			}
+		});
+
+		const price = (collectionPrice ? Number(collectionPrice) : 0) * fontRefs.length;
+
+		await client.createOrReplace({
+			_key: nanoid(),
+			_id: newSlug,
+			_type: 'collection',
+			state: 'active',
+			type: 'collection',
+			preferredStyle: { _type: 'reference', _ref: preferredStyle._ref, _weak: true },
+			title: newTitle,
+			slug: { _type: 'slug', current: newSlug },
+			fonts: fontRefs,
+			price,
+		}).catch(err => { console.error('Error creating collection:', err.message); });
+
+		return { _ref: newSlug, _type: 'reference', _weak: true, _key: nanoid() };
+	}, [collectionPrice, client]);
+
+	/** Creates or replaces a pair document and returns a weak reference to it. */
+	const createSanityPair = useCallback(async (pair, pairSlug, newTitle) => {
+		const newSlug = pairSlug.toLowerCase().trim();
+
+		const fontRefs = pair.map(font => ({
+			_key: nanoid(),
+			_type: 'reference',
+			_ref: font._id,
+			_weak: true,
+		}));
+
+		await client.createOrReplace({
+			_key: nanoid(),
+			_id: newSlug,
+			_type: 'pair',
+			preferredStyle: { _type: 'reference', _ref: fontRefs[0]._ref, _weak: true },
+			title: newTitle,
+			slug: { _type: 'slug', current: newSlug },
+			fonts: fontRefs,
+			price: pairPrice ? Number(pairPrice) : 0,
+		}).catch(err => { console.error('Error creating pair:', err.message); });
+
+		return { _ref: newSlug, _type: 'reference', _weak: true, _key: nanoid() };
+	}, [pairPrice, client]);
+
+	/** Generates Full Family, Uprights, Italics, and Subfamily collections. */
+	const handleGenerateCollections = useCallback(async () => {
+		setStatus('Generating collections...');
+		setReady(false);
+		try {
+			const result = await client.fetch(
+				`*[_type == "typeface" && _id == $id]{ "fonts": styles.fonts[] -> }[0]`,
+				{ id: doc_id }
+			);
+			const sanityFonts = result?.fonts ?? [];
+
+			const subfamilies = stylesObject?.subfamilies ?? [];
+			const totalCollections = subfamilies.length + 3;
+
+			const fullFamily = [], uprights = [], italics = [];
+			for (const font of sanityFonts) {
+				fullFamily.push(font);
+				if (font.style === 'Regular') uprights.push(font);
+				else italics.push(font);
+			}
+
+			const typefacePatch = [];
+
+			if (fullFamily.length > 1) {
+				setStatus(`[1/${totalCollections}] Generating full family collection`);
+				typefacePatch.push(await createSanityCollection(fullFamily, `${slug.current}-full-family`, `${title} Full Family`));
+			}
+			if (uprights.length > 1) {
+				setStatus(`[2/${totalCollections}] Generating uprights collection`);
+				const ref = await createSanityCollection(uprights, `${slug.current}-uprights`, `${title} Uprights`);
+				if (ref) typefacePatch.push(ref);
+			}
+			if (italics.length > 1) {
+				setStatus(`[3/${totalCollections}] Generating italics collection`);
+				const ref = await createSanityCollection(italics, `${slug.current}-italics`, `${title} Italics`);
+				if (ref) typefacePatch.push(ref);
+			}
+			for (let i = 0; i < subfamilies.length; i++) {
+				setStatus(`[${i + 4}/${totalCollections}] Generating ${subfamilies[i].title} collection`);
+				const ref = await createSanityCollection(
+					subfamilies[i].fonts,
+					`${slug.current}-${slugify(subfamilies[i].title)}-family`,
+					`${title} ${subfamilies[i].title} Family`
+				);
+				if (ref) typefacePatch.push(ref);
+			}
+
+			await client.patch(doc_id).set({ styles: { ...stylesObject, collections: typefacePatch } }).commit();
+			setStatus('Collections generated');
+		} catch (err) {
+			console.error('Error generating collections:', err);
+			setStatus('Error generating collections');
+		}
+		setReady(true);
+	}, [doc_id, title, slug, stylesObject, collectionPrice, client, createSanityCollection]);
+
+	/** Generates Regular/Italic pairs matched by subfamily and weight. */
+	const handleGeneratePairs = useCallback(async () => {
+		setStatus('Generating pairs...');
+		setReady(false);
+		try {
+			const result = await client.fetch(
+				`*[_type == "typeface" && _id == $id]{ "fonts": styles.fonts[] -> }[0]`,
+				{ id: doc_id }
+			);
+			const sanityFonts = result?.fonts ?? [];
+
+			const regular = [], italic = [];
+			for (const font of sanityFonts) {
+				if (font.style === 'Regular') regular.push(font);
+				else italic.push(font);
+			}
+
+			const pairs = [];
+			for (const reg of regular) {
+				for (const ita of italic) {
+					if (ita.subfamily === reg.subfamily && ita.weight === reg.weight && ita.weightName === reg.weightName) {
+						pairs.push([reg, ita]);
+					}
+				}
+			}
+
+			const typefacePatch = [];
+			for (let i = 0; i < pairs.length; i++) {
+				const [reg] = pairs[i];
+				let pairSlug, pairTitle;
+				if (reg.subfamily && reg.subfamily !== '') {
+					if (reg.subfamily === 'Regular') {
+						pairSlug = `${slug.current}-${slugify(reg.weightName)}s`;
+						pairTitle = `${title} ${reg.weightName}s`;
+					} else {
+						pairSlug = `${slug.current}-${slugify(reg.subfamily)}-${slugify(reg.weightName)}s`;
+						pairTitle = `${title} ${reg.subfamily} ${reg.weightName}s`;
+					}
+				} else {
+					pairSlug = `${slug.current}-${slugify(reg.weightName)}s`;
+					pairTitle = `${title} ${reg.weightName}s`;
+				}
+				setStatus(`[${i + 1}/${pairs.length}] Generating ${pairTitle}`);
+				const ref = await createSanityPair(pairs[i], pairSlug, pairTitle);
+				if (ref) typefacePatch.push(ref);
+			}
+
+			const preferredStyle = regular[0]?._id ?? '';
+			await client.patch(doc_id).set({
+				preferredStyle: { _ref: preferredStyle, _type: 'reference', _weak: true },
+				styles: { ...stylesObject, pairs: typefacePatch },
+			}).commit();
+
+			setStatus('Pairs generated');
+		} catch (err) {
+			console.error('Error generating pairs:', err);
+			setStatus('Error generating pairs');
+		}
+		setReady(true);
+	}, [doc_id, title, slug, stylesObject, pairPrice, client, createSanityPair]);
+
+	if (!title || !slug) return null;
+
+	return (
+		<Stack space={2}>
+			<StatusDisplay status={status} error={false} />
+			<Card border padding={2} shadow={1} radius={2}>
+				{ready ? (
+					<Stack space={3}>
+						<Grid columns={[2]} gap={4} marginTop={1} marginBottom={1}>
+							<Stack space={2}>
+								<Text size={1} muted>Collection price / font</Text>
+								<Flex align="center" gap={2}>
+									<Text size={1} muted>$</Text>
+									<input
+										value={collectionPrice}
+										onChange={(e) => setCollectionPrice(e.target.value)}
+										type="number"
+										style={{ textAlign: 'end', padding: '5px', maxWidth: '75px' }}
+									/>
+								</Flex>
+							</Stack>
+							<Stack space={2}>
+								<Text size={1} muted>Pair price</Text>
+								<Flex align="center" gap={2}>
+									<Text size={1} muted>$</Text>
+									<input
+										value={pairPrice}
+										onChange={(e) => setPairPrice(e.target.value)}
+										type="number"
+										style={{ textAlign: 'end', padding: '5px', maxWidth: '75px' }}
+									/>
+								</Flex>
+							</Stack>
+						</Grid>
+						<Button mode="ghost" tone="primary" text="Generate Collections" style={{ width: '100%' }} onClick={handleGenerateCollections} />
+						<Button mode="ghost" tone="primary" text="Generate Pairs" style={{ width: '100%' }} onClick={handleGeneratePairs} />
+					</Stack>
+				) : (
+					<Flex align="center" justify="center" gap={3} padding={4}>
+						<Spinner />
+						<Text muted size={1}>{status}</Text>
+					</Flex>
+				)}
+			</Card>
+		</Stack>
+	);
+};

package/src/components/PriceInput.jsx

@@ -0,0 +1,26 @@
+// Reusable $ + number input for collection and pair price fields
+
+import React from 'react';
+import { Flex, Text } from '@sanity/ui';
+
+/**
+ * Renders an inline price field: "Price  $  [input]  per style"
+ * @param {Object} props
+ * @param {string} props.inputPrice - Current price value
+ * @param {Function} props.handleInputChange - onChange handler
+ */
+const PriceInput = ({ inputPrice, handleInputChange }) => (
+	<Flex align="center" gap={2}>
+		<Text size={1} muted>Price:</Text>
+		<Text size={1} muted>$</Text>
+		<input
+			value={inputPrice}
+			onChange={handleInputChange}
+			type="number"
+			style={{ textAlign: 'end', padding: '5px', maxWidth: '75px' }}
+		/>
+		<Text size={1} muted>per style</Text>
+	</Flex>
+);
+
+export default PriceInput;

package/src/components/RegenerateSubfamiliesComponent.jsx

@@ -0,0 +1,185 @@
+// Recalculates and patches the subfamily field on all fonts linked to a typeface
+
+import React, { useState } from 'react';
+import { nanoid } from 'nanoid';
+import { Button, Text, Stack, Box } from '@sanity/ui';
+import { useFormValue } from 'sanity';
+import { useSanityClient } from '../hooks/useSanityClient';
+import { expandAbbreviations } from '../utils/generateKeywords';
+
+/**
+ * Button component that rebuilds the subfamilies array on the current typeface document
+ * by grouping all linked fonts by their `subfamily` field.
+ *
+ * NOTE: This component uses its own local updateTypefaceDocument that patches ONLY
+ * the `subfamilies` key while preserving all other styles fields (fonts, variableFont).
+ * Do NOT replace it with the shared updateTypefaceDocument from utils/, which patches
+ * the full styles object and would overwrite the fonts/variableFont arrays.
+ */
+export const RegenerateSubfamiliesComponent = () => {
+	const [status, setStatus] = useState('');
+	const [ready, setReady] = useState(true);
+	const [error, setError] = useState(false);
+
+	const client = useSanityClient();
+
+	const doc_id = useFormValue(['_id']);
+	const title = useFormValue(['title']);
+	const slug = useFormValue(['slug']);
+	const stylesObject = useFormValue(['styles']) || { fonts: [], variableFont: [] };
+
+	const handleClick = () => {
+		regenerateSubfamilies({ title, stylesObject, slug, doc_id, client, setStatus, setReady, setError });
+	};
+
+	return (
+		<>
+			{status && (
+				<Box padding={3} style={{ borderRadius: '4px', marginBottom: '10px' }}>
+					<Text size={1} style={{ color: error ? 'red' : 'green' }}>{status}</Text>
+				</Box>
+			)}
+			<Button mode="ghost" tone="primary" width="fill" padding={3} onClick={handleClick} disabled={!ready}>
+				<Stack space={2}>
+					<Text align="center">Regenerate Subfamilies</Text>
+				</Stack>
+			</Button>
+		</>
+	);
+};
+
+/**
+ * Fetches all fonts for a typeface, groups them by subfamily, and patches the document.
+ */
+const regenerateSubfamilies = async ({ title, stylesObject, slug, doc_id, client, setStatus, setReady, setError }) => {
+	try {
+		setStatus('Regenerating subfamilies...');
+		setReady(false);
+		setError(false);
+
+		const allFonts = await fetchFonts(title, slug, client);
+
+		if (!allFonts || allFonts.length === 0) {
+			setStatus('No fonts found for this typeface');
+			setReady(true);
+			setError(true);
+			return;
+		}
+
+		console.log('Found fonts:', allFonts.length);
+		setStatus(`Found ${allFonts.length} fonts. Processing...`);
+
+		const subfamilies = groupFontsBySubfamily(allFonts);
+		const newSubfamiliesArray = createSubfamiliesArray(subfamilies);
+
+		console.log('New subfamilies:', newSubfamiliesArray);
+		setStatus(`Created ${newSubfamiliesArray.length} subfamily groups`);
+
+		await updateTypefaceSubfamilies(doc_id, stylesObject, newSubfamiliesArray, client, setStatus, setError);
+
+		setStatus('Subfamilies regenerated successfully');
+	} catch (e) {
+		console.error(e.message);
+		setStatus('Error regenerating subfamilies');
+		setError(true);
+	}
+
+	setReady(true);
+};
+
+/**
+ * Fetches the font list for a typeface by slug.
+ * @param {string} title
+ * @param {Object} slug
+ * @param {Object} client
+ * @returns {Promise<Array>}
+ */
+const fetchFonts = async (title, slug, client) => {
+	const slugCurrent = slug?.current || title;
+	const query = await client.fetch(
+		`*[_type == "typeface" && slug.current == $slugCurrent][0]{
+			"fonts": styles.fonts[]->{ _id, title, subfamily, style, weight, _key }
+		}`,
+		{ slugCurrent }
+	);
+	return query?.fonts || [];
+};
+
+/**
+ * Groups fonts by their subfamily name, excluding VF fonts from shared subfamilies.
+ * @param {Object[]} fonts
+ * @returns {Object}
+ */
+const groupFontsBySubfamily = (fonts) => {
+	const subfamilies = {};
+	fonts.forEach(font => {
+		if (font.title?.includes('VF')) {
+			// Variable fonts get isolated into their own unique group so they don't pollute subfamilies
+			subfamilies[`VF_${font.title}`] = [font];
+		} else {
+			const subfamilyName = font.subfamily ? expandAbbreviations(font.subfamily) : 'Regular';
+			if (!subfamilies[subfamilyName]) subfamilies[subfamilyName] = [];
+			subfamilies[subfamilyName].push(font);
+		}
+	});
+	return subfamilies;
+};
+
+/**
+ * Converts a grouped subfamilies map into the Sanity array format.
+ * @param {Object} subfamilies
+ * @returns {Object[]}
+ */
+const createSubfamiliesArray = (subfamilies) => {
+	return Object.keys(subfamilies).map(subfamilyName => ({
+		title: subfamilyName,
+		_key: nanoid(),
+		_type: 'object',
+		fonts: subfamilies[subfamilyName].map(font => ({
+			_ref: font._id,
+			_key: nanoid(),
+			_type: 'reference',
+			_weak: true,
+		})),
+	}));
+};
+
+/**
+ * Patches ONLY the subfamilies key on the typeface document, preserving fonts and variableFont.
+ * This is intentionally scoped — do NOT replace with the shared updateTypefaceDocument util.
+ * @param {string} doc_id
+ * @param {Object} stylesObject
+ * @param {Object[]} newSubfamiliesArray
+ * @param {Object} client
+ * @param {Function} setStatus
+ * @param {Function} setError
+ */
+const updateTypefaceSubfamilies = async (doc_id, stylesObject, newSubfamiliesArray, client, setStatus, setError) => {
+	const patch = {
+		styles: {
+			...stylesObject,
+			subfamilies: newSubfamiliesArray,
+		},
+	};
+
+	try {
+		await client.patch(doc_id).set(patch).commit();
+		console.log(`Updated document: ${doc_id}`);
+
+		if (doc_id.startsWith('drafts.')) {
+			const publishedId = doc_id.replace('drafts.', '');
+			// Parameterized to guard against any edge-case injection via draft IDs
+			const publishedDoc = await client.fetch(`*[_id == $publishedId]`, { publishedId }).then(res => res[0]);
+			if (publishedDoc) {
+				await client.patch(publishedId).set(patch).commit();
+				console.log(`Updated published document: ${publishedId}`);
+			} else {
+				console.log(`No published document found for ${publishedId}, skipping`);
+			}
+		}
+	} catch (err) {
+		console.error('Error updating document:', err.message);
+		setStatus('Error regenerating subfamilies');
+		setError(true);
+	}
+};